/* ==========================================================================
   Eco Energy — design system
   Fonte di verità: identita-visiva/index.html. Non aggiungere colori.
   ========================================================================== */

:root {
  /* Colori del logo */
  --blu: #1961AD;
  --arancio: #EF6028;
  --azzurro: #36C5F2;
  --guscio: #EAEAEC;
  --bianco: #FFFFFF;
  /* Supporto */
  --notte: #0C2340;
  --ardesia: #4B5B70;
  --arancio-testo: #C4471A;
  --verde: #1A7F4B;
  --ambra: #FFB020;
  /* Tinte */
  --carta: #F4F6F9;
  --ghiaccio: #E7EEF7;
  --nebbia: #E3F5FC;
  --pesca: #FDEAE1;
  --linea: #D5DDE7;

  /* Derivati (dalla guida, non nuovi colori) */
  --arancio-hover: #F47A49;
  --blu-hover: #14518F;
  --verde-su-notte: #4FCB8A;                                  /* solo icone su Blu Notte */
  --testo-su-notte: rgba(255, 255, 255, .78);                 /* testo secondario su Blu Notte */
  --bordo-campo: color-mix(in srgb, var(--ardesia) 70%, white); /* 3,4:1 su bianco, WCAG 1.4.11 */

  /* Caratteri */
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Scala tipografica (guida: 56/56, 36/40, 24/28, 17/27, 14/20) */
  --t-display: clamp(3.5rem, 2rem + 6vw, 7rem);
  --t-1: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
  --t-2: clamp(1.875rem, 1.6rem + 1.1vw, 2.25rem);
  --t-3: 1.5rem;
  --t-testo: 1.0625rem;
  --t-piccolo: .875rem;

  /* Spaziature: scala 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;  --sp-5: 1.5rem;
  --sp-6: 2rem;    --sp-7: 3rem;   --sp-8: 4rem;   --sp-9: 6rem;  --sp-10: 8rem;
  --sezione: clamp(var(--sp-8), 8vw, var(--sp-10));
  --contenitore: 75rem;
  --margine: max(1.25rem, env(safe-area-inset-left, 0px));

  /* Raggi: diversi per ruolo */
  --r-etichetta: 4px;
  --r-campo: 10px;
  --r-scheda: 14px;
  --r-tassello: 16px;
  --r-pillola: 999px;

  /* Profondità: base → rialzato → flottante (ombre tinte di Blu Notte) */
  --ombra-1: 0 1px 2px rgba(12, 35, 64, .06), 0 2px 8px rgba(12, 35, 64, .05);
  --ombra-2: 0 2px 4px rgba(12, 35, 64, .05), 0 12px 28px -8px rgba(12, 35, 64, .18);
  --ombra-3: 0 4px 10px rgba(12, 35, 64, .06), 0 28px 56px -16px rgba(12, 35, 64, .30);

  /* Movimento: solo transform e opacity */
  --molla: cubic-bezier(.34, 1.56, .64, 1);
  --uscita: cubic-bezier(.22, 1, .36, 1);
  --t-breve: 160ms;
  --t-media: 280ms;

  /* Focus: anello doppio. Blu Notte interno (contrasto sul chiaro) + Azzurro esterno (contrasto sul Blu Notte). */
  --focus: 3px solid var(--azzurro);
  --anello: 0 0 0 3px var(--notte);
}

/* --------------------------------------------------------------------------
   Reset (il preflight di Tailwind è disattivato)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Ricerca, filtri, mappa: solo con JavaScript. La classe .js è messa in <head> prima del primo disegno,
   così questi elementi occupano subito il loro spazio e la pagina non salta. */
html:not(.js) [data-solo-js] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--notte);
  font-family: var(--text);
  font-size: var(--t-testo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: 3px; box-shadow: var(--anello); }
::selection { background: var(--azzurro); color: var(--notte); }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .t-display, .t-1, .t-2, .t-3 {
  font-family: var(--display);
  line-height: 1.05;
  text-wrap: balance;
}
.t-display { font-size: var(--t-display); font-weight: 800; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.t-1 { font-size: var(--t-1); font-weight: 800; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.t-2 { font-size: var(--t-2); font-weight: 700; line-height: 1.1; letter-spacing: -.005em; }
.t-3 { font-size: var(--t-3); font-weight: 600; line-height: 1.17; }
.t-testo { font-size: var(--t-testo); line-height: 1.6; }
.t-intro { font-size: 1.1875rem; line-height: 1.6; color: var(--ardesia); }
.t-piccolo { font-size: var(--t-piccolo); line-height: 1.43; }
.t-secondario { color: var(--ardesia); }
.misura { max-width: 62ch; }
.a-capo-no { white-space: nowrap; }
.prosa > * + * { margin-top: var(--sp-4); }

.prezzo { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.prezzo sup { font-size: .55em; vertical-align: .7em; margin-left: .04em; line-height: 0; }
.prezzo .unita { font-family: var(--text); font-weight: 500; font-size: .45em; color: var(--ardesia); margin-left: .3em; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
.sezione { padding-block: var(--sezione); }
.sezione--carta { background: var(--carta); }
.pila { display: flex; flex-direction: column; gap: var(--sp-4); }
.pila--5 { gap: var(--sp-5); }
.pila--7 { gap: var(--sp-7); }

.salta {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pillola);
  background: var(--notte); color: var(--bianco); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.salta:focus-visible { transform: none; }

.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Pulsanti
   Colore di hover su un livello ::before che cambia solo opacity.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--blu);
  --btn-fg: var(--bianco);
  --btn-hover: var(--blu-hover);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-pillola);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-media) var(--molla);
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--btn-hover);
  opacity: 0;
  transition: opacity var(--t-breve) ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
.btn:focus-visible { outline: var(--focus); outline-offset: 3px; box-shadow: var(--anello); }
.btn--contorno:focus-visible { box-shadow: inset 0 0 0 2px currentColor, var(--anello); }
.btn .icona { width: 20px; height: 20px; color: inherit; --accento: currentColor; --accento-hvo: currentColor; }

.btn--primario { --btn-bg: var(--arancio); --btn-fg: var(--notte); --btn-hover: var(--arancio-hover); }
.btn--secondario { --btn-bg: var(--blu); --btn-fg: var(--bianco); --btn-hover: var(--blu-hover); }
.btn--contorno { --btn-bg: transparent; --btn-fg: var(--blu); --btn-hover: var(--ghiaccio); box-shadow: inset 0 0 0 2px currentColor; }
.btn--link {
  --btn-bg: transparent; --btn-fg: var(--blu); --btn-hover: transparent;
  min-height: 44px; padding: 0 var(--sp-1); border-radius: var(--r-etichetta);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.btn--link:hover { transform: none; text-decoration-thickness: 3px; }
.btn--link:focus-visible { box-shadow: none; outline-offset: 2px; }
.btn--piccolo { min-height: 44px; padding: 0 var(--sp-5); font-size: .9375rem; }
.btn--blocco { width: 100%; }

/* Varianti su Blu Notte */
.su-notte .btn--contorno { --btn-fg: var(--bianco); --btn-hover: rgba(255, 255, 255, .1); }
.su-notte .btn--link { --btn-fg: var(--azzurro); }
.su-notte .btn--secondario { --btn-bg: var(--bianco); --btn-fg: var(--blu); --btn-hover: var(--ghiaccio); }

/* Link nel testo */
.link {
  color: var(--blu);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-radius: 2px;
}
.link:hover { text-decoration-thickness: 2.5px; }
.link:active { color: var(--blu-hover); }
.su-notte .link { color: var(--azzurro); }

/* --------------------------------------------------------------------------
   Schede
   -------------------------------------------------------------------------- */
.scheda {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-scheda);
  box-shadow: var(--ombra-1);
}
.scheda--piatta { box-shadow: none; }
.scheda--carta { background: var(--carta); border-color: transparent; box-shadow: none; }
.scheda--notte { background: var(--notte); border-color: transparent; color: var(--bianco); }
.scheda__titolo { font-family: var(--display); font-weight: 700; font-size: var(--t-3); line-height: 1.15; }
.scheda__testo { color: var(--ardesia); font-size: 1rem; line-height: 1.6; }
.scheda--notte .scheda__testo { color: var(--testo-su-notte); }
.scheda__piede { margin-top: auto; padding-top: var(--sp-2); }
.scheda > .btn { align-self: flex-start; }

/* Scheda cliccabile: tutta la scheda è il link (link "esteso" sul titolo) */
.scheda--link { transition: transform var(--t-media) var(--molla); }
.scheda--link::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: var(--ombra-3);
  opacity: 0;
  transition: opacity var(--t-media) var(--uscita);
}
.scheda--link:hover { transform: translateY(-4px); }
.scheda--link:hover::after { opacity: 1; }
.scheda--link:active { transform: translateY(-1px); transition-duration: 90ms; }
.scheda--link:focus-within { outline: var(--focus); outline-offset: 3px; box-shadow: var(--ombra-1), var(--anello); }
.scheda--link .scheda__link { text-decoration: none; color: inherit; }
.scheda--link .scheda__link::before { content: ""; position: absolute; inset: 0; }
.scheda--link .scheda__link:focus-visible { outline: none; box-shadow: none; }
.scheda__vai {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blu);
}

/* Media nella scheda */
.scheda__media { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) 0; border-radius: var(--r-scheda) var(--r-scheda) 0 0; overflow: hidden; aspect-ratio: 16 / 10; }
.scheda__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Etichette
   -------------------------------------------------------------------------- */
.etichetta {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--r-etichetta);
  background: var(--ghiaccio);
  color: var(--blu);
  font-family: var(--display);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
  letter-spacing: .02em;
  white-space: nowrap;
}
.etichetta .icona { width: 16px; height: 16px; }
.etichetta--hvo { background: var(--bianco); color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); }
.etichetta--promo { background: var(--pesca); color: var(--notte); }
.etichetta--promo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--arancio-testo); margin-right: 2px; }
.etichetta--neutra { background: var(--carta); color: var(--ardesia); }
.etichetta--notte { background: var(--notte); color: var(--bianco); }
.su-notte .etichetta { background: rgba(255, 255, 255, .1); color: var(--bianco); }

/* --------------------------------------------------------------------------
   Icone (sprite /assets/icons/sprite.svg)
   Tratto in currentColor, dettaglio in --accento.
   -------------------------------------------------------------------------- */
.icona {
  width: 24px; height: 24px; flex: none;
  color: var(--blu);
  --accento: var(--arancio);
  --accento-hvo: var(--verde);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icona--32 { width: 32px; height: 32px; }
.icona--40 { width: 40px; height: 40px; }
.icona--mono { --accento: currentColor; --accento-hvo: currentColor; }

.tassello {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px;
  border-radius: var(--r-tassello);
  background: var(--ghiaccio);
}
.tassello .icona { width: 30px; height: 30px; }
.tassello--notte, .su-notte .tassello { background: var(--notte); }
.tassello--notte .icona, .su-notte .tassello .icona { color: var(--bianco); --accento-hvo: var(--verde-su-notte); }
.su-notte .tassello { background: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   Box informativo
   -------------------------------------------------------------------------- */
.avviso {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-scheda);
  background: var(--nebbia);
  color: var(--notte);
  font-size: 1rem;
}
.avviso .icona { margin-top: 2px; }
.avviso--promo { background: var(--pesca); }
.avviso--promo .icona { color: var(--arancio-testo); }

/* --------------------------------------------------------------------------
   Moduli
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.campo__etichetta { font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--notte); }
.campo__etichetta .facoltativo { font-weight: 400; color: var(--ardesia); }
.campo__aiuto { font-size: var(--t-piccolo); line-height: 1.43; color: var(--ardesia); }
.campo__errore { display: none; align-items: flex-start; gap: var(--sp-2); font-size: var(--t-piccolo); line-height: 1.43; font-weight: 500; color: var(--arancio-testo); }
.campo__errore .icona { width: 18px; height: 18px; color: var(--arancio-testo); --accento: var(--arancio-testo); margin-top: 1px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--bordo-campo);
  border-radius: var(--r-campo);
  background: var(--bianco);
  color: var(--notte);
  font-size: 1rem;
  line-height: 1.5;
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; }
.select {
  padding-right: var(--sp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231961AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.input::placeholder, .textarea::placeholder { color: var(--ardesia); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ardesia); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--blu); outline: var(--focus); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--blu); }
.campo--errore .input, .campo--errore .select, .campo--errore .textarea,
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--arancio-testo); }
.campo--errore .campo__errore { display: flex; }

/* Casella di spunta */
.spunta { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.spunta input {
  appearance: none; margin: 0; width: 24px; height: 24px; cursor: pointer;
  border: 1.5px solid var(--bordo-campo); border-radius: 6px; background: var(--bianco);
  display: grid; place-items: center;
}
.spunta input::after {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--t-breve) ease-out, transform var(--t-media) var(--molla);
}
.spunta input:hover { border-color: var(--ardesia); }
.spunta input:checked { background: var(--blu); border-color: var(--blu); }
.spunta input:checked::after { opacity: 1; transform: none; }
.spunta input:focus-visible { outline: var(--focus); outline-offset: 3px; box-shadow: var(--anello); }
.spunta input:active { transform: scale(.92); }

/* --------------------------------------------------------------------------
   Fascia Blu Notte (con grana leggera) e orbite
   -------------------------------------------------------------------------- */
.su-notte { background: var(--notte); color: var(--bianco); }
.su-notte .t-secondario, .su-notte .t-intro { color: var(--testo-su-notte); }
.fascia-notte { position: relative; isolation: isolate; overflow: hidden; background: var(--notte); color: var(--bianco); }
.fascia-notte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .07;
}

.orbite { position: absolute; z-index: -1; pointer-events: none; max-width: none; width: 560px; height: 560px; --orbita-esterna: var(--ghiaccio); --orbita-interna: var(--pesca); }
.fascia-notte .orbite { --orbita-esterna: var(--blu); --orbita-interna: var(--arancio); opacity: .9; }

/* --------------------------------------------------------------------------
   Foto con velatura Blu Notte
   -------------------------------------------------------------------------- */
.foto { position: relative; isolation: isolate; overflow: hidden; background: var(--notte); border-radius: var(--r-scheda); }
.foto > img { width: 100%; height: 100%; object-fit: cover; }
.foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--notte); mix-blend-mode: multiply; opacity: .28; pointer-events: none; }
.foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(12, 35, 64, .94) 0%, rgba(12, 35, 64, .7) 38%, rgba(12, 35, 64, 0) 72%); }
@media (max-width: 767px) {
  .foto::after { background: linear-gradient(0deg, rgba(12, 35, 64, .94) 0%, rgba(12, 35, 64, .72) 50%, rgba(12, 35, 64, .1) 85%); }
}
.foto--alto::after { background: linear-gradient(0deg, rgba(12, 35, 64, .92) 0%, rgba(12, 35, 64, .55) 45%, rgba(12, 35, 64, 0) 80%); }
.foto__contenuto { position: relative; z-index: 2; color: var(--bianco); }
.foto__credito { position: absolute; z-index: 2; right: var(--sp-3); bottom: var(--sp-2); font-size: .6875rem; color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   Totem prezzi
   -------------------------------------------------------------------------- */
.totem {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-scheda);
  background: var(--notte);
  color: var(--bianco);
  box-shadow: var(--ombra-2);
}
.totem__testa { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.totem__testa img { width: 64px; }
.totem__stato { font-family: var(--display); font-weight: 600; font-size: .9375rem; letter-spacing: .02em; color: var(--testo-su-notte); }
.totem table { width: 100%; border-collapse: collapse; }
.totem thead th { padding: 0 0 var(--sp-2); text-align: right; font-family: var(--display); font-weight: 600; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-su-notte); }
.totem thead th:first-child { text-align: left; }
.totem tbody th, .totem td { padding: var(--sp-3) 0; border-top: 1px solid rgba(255, 255, 255, .14); vertical-align: middle; }
.totem tbody th { text-align: left; }
.totem td { text-align: right; padding-left: var(--sp-4); }
.totem__prodotto { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; line-height: 1.1; }
.totem__prodotto small { display: block; font-family: var(--text); font-weight: 400; font-size: .8125rem; letter-spacing: 0; color: var(--testo-su-notte); }
.totem__prodotto .hvo { margin-left: var(--sp-2); font-size: .75rem; letter-spacing: .06em; color: var(--verde-su-notte); vertical-align: 2px; }
.totem .prezzo { font-size: 2rem; line-height: 1; color: var(--ambra); text-shadow: 0 0 14px rgba(255, 176, 32, .35); }
.totem__nota { font-size: .8125rem; line-height: 1.45; color: var(--testo-su-notte); }

/* ==========================================================================
   STRUTTURA DEL SITO (Fase 2): testata, menu mobile, piè di pagina, Home
   ========================================================================== */

/* Fascia sopra la testata sticky sui telefoni con notch */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bianco); }

/* --- Testata --------------------------------------------------------------
   Logo originale (con guscio) "appeso" sotto la barra, come un'insegna.
   Scorrendo la barra si compatta e mostra solo il simbolo. */
.testata { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bianco); }
.testata::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 1px 0 var(--linea), 0 10px 24px -14px rgba(12, 35, 64, .35);
  opacity: 0; transition: opacity var(--t-media) var(--uscita);
}
.testata--compatta::after { opacity: 1; }
.testata__barra { display: flex; align-items: center; gap: var(--sp-5); height: 76px; }
.testata__marchio { position: relative; flex: none; align-self: stretch; width: 128px; border-radius: var(--r-etichetta); }
.testata__insegna {
  position: absolute; top: 12px; left: 0; width: 128px; height: auto;
  transform-origin: top left;
  transition: opacity var(--t-breve) ease-out, transform var(--t-media) var(--uscita);
}
.testata__simbolo {
  position: absolute; top: 50%; left: 0; width: 76px; height: auto;
  opacity: 0; transform: translateY(-50%) scale(.85);
  transition: opacity var(--t-breve) ease-out, transform var(--t-media) var(--molla);
}
.testata--compatta .testata__insegna { opacity: 0; transform: translateY(-18px) scale(.9); }
.testata--compatta .testata__simbolo { opacity: 1; transform: translateY(-50%); }
.testata__marchio:focus-visible { outline-offset: 4px; }

.nav { display: none; margin-left: auto; }
.nav__lista { display: flex; gap: var(--sp-1); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-etichetta); color: var(--notte); font-weight: 500; font-size: 1rem; text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--blu); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-media) var(--uscita);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link:active { opacity: .7; }
.nav__link[aria-current="page"] { font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--arancio); }

.testata__azioni { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.testata__tel { display: none; }
.testata__tel-icona { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pillola); color: var(--blu); background: var(--ghiaccio); text-decoration: none; transition: transform var(--t-media) var(--molla); }
.testata__tel-icona:hover { transform: translateY(-2px); }
.testata__tel-icona:active { transform: scale(.94); }
.testata__tel-icona .icona { color: inherit; }

@media (min-width: 640px) {
  .testata__tel { display: inline-flex; }
  .testata__tel-icona { display: none; }
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .testata__azioni { margin-left: var(--sp-2); }
  .testata__menu { display: none; }
}
@media (max-width: 639px) {
  .testata__barra { height: 64px; }
  .testata__marchio { width: 112px; }
  .testata__insegna { width: 112px; top: 10px; }
  .testata__simbolo { width: 64px; }
}

/* --- Menu mobile (pannello a tutto schermo) ------------------------------- */
.menu-mobile {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0px));
  opacity: 0; transform: translateY(-12px);
  transition: opacity var(--t-media) var(--uscita), transform var(--t-media) var(--uscita);
}
.menu-mobile.aperto { opacity: 1; transform: none; }
.menu-mobile__barra { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.menu-mobile__barra img { width: 64px; }
.menu-mobile__lista { display: flex; flex-direction: column; padding-block: var(--sp-5) var(--sp-6); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.menu-mobile__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px; padding-block: var(--sp-2); border-radius: var(--r-etichetta);
  color: var(--bianco); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); line-height: 1.1;
}
.menu-mobile__link .icona { color: var(--testo-su-notte); transition: transform var(--t-media) var(--molla); }
.menu-mobile__link:hover .icona { transform: translateX(4px); }
.menu-mobile__link:active { opacity: .75; }
.menu-mobile__link .icona { order: 3; }
.menu-mobile__link[aria-current="page"]::before { content: ""; order: 2; margin-right: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--arancio); }
.menu-mobile__contatti { display: grid; gap: var(--sp-4); padding-top: var(--sp-6); }
.menu-mobile__contatti a:not(.btn) { color: var(--azzurro); }
.menu-mobile__contatti .social a { color: var(--bianco); }
body.menu-aperto { overflow: hidden; }

/* --- Piè di pagina -------------------------------------------------------- */
.piede { padding-top: var(--sp-9); }
.piede .orbite { right: -420px; top: -330px; width: 560px; height: 560px; }
@media (min-width: 768px) { .piede .orbite { top: auto; right: -300px; bottom: -330px; width: 640px; height: 640px; } }
.piede__griglia { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; padding-bottom: var(--sp-8); }
@media (min-width: 768px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--sp-6); } }
.piede__marchio img { width: 132px; }
.piede__titolo { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: .02em; color: var(--testo-su-notte); margin-bottom: var(--sp-4); }
.piede__lista { display: grid; gap: var(--sp-2); }
.piede__lista a, .piede__contatto a { color: var(--bianco); text-decoration: none; border-radius: var(--r-etichetta); }
.piede__lista a:hover, .piede__contatto a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede__lista a:active, .piede__contatto a:active { opacity: .75; }
.piede__contatto { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; }
.piede__contatto .icona { color: var(--azzurro); margin-top: 2px; }
.piede__contatto small { display: block; color: var(--testo-su-notte); font-size: var(--t-piccolo); }
.social { display: flex; gap: var(--sp-2); }
.social a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pillola);
  background: rgba(255, 255, 255, .08); color: var(--bianco); transition: transform var(--t-media) var(--molla);
}
.social a:hover { transform: translateY(-2px); }
.social a:active { transform: scale(.94); }
.social .icona { color: inherit; }
.piede__legale {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5) var(--sp-6); border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-piccolo); color: var(--testo-su-notte);
}
.piede__legale nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.piede__legale a { color: var(--bianco); text-underline-offset: 3px; border-radius: 2px; }
.piede__legale a:active { opacity: .75; }

/* --- Home: apertura ------------------------------------------------------- */
.eroe { position: relative; isolation: isolate; overflow: hidden; background: var(--notte); color: var(--bianco); }
.eroe__foto { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.eroe::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--notte); mix-blend-mode: multiply; opacity: .3; }
.eroe::after { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(0deg, rgba(12, 35, 64, .96) 0%, rgba(12, 35, 64, .78) 42%, rgba(12, 35, 64, .2) 78%, rgba(12, 35, 64, .35) 100%); }
.eroe__orbite { position: absolute; z-index: -1; pointer-events: none; max-width: none; width: 560px; height: 560px; right: -330px; top: -240px; --orbita-esterna: var(--blu); --orbita-interna: var(--arancio); }
.eroe__contenuto { display: flex; flex-direction: column; gap: var(--sp-5); min-height: clamp(34rem, 78vh, 46rem); justify-content: flex-end; padding-block: var(--sp-10) calc(var(--sp-8) + var(--sp-7)); }
.eroe h1 { max-width: 17ch; }
.eroe .t-intro { max-width: 44ch; color: var(--testo-su-notte); }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2); }
.eroe__credito { position: absolute; right: var(--margine); bottom: calc(var(--sp-8) + var(--sp-3)); z-index: 1; font-size: .6875rem; color: rgba(255, 255, 255, .7); }
@media (min-width: 768px) {
  .eroe::after { background: linear-gradient(100deg, rgba(12, 35, 64, .95) 0%, rgba(12, 35, 64, .78) 34%, rgba(12, 35, 64, .1) 68%, rgba(12, 35, 64, 0) 100%); }
  .eroe__orbite { right: -260px; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); }
  .eroe__contenuto { justify-content: center; }
}

/* Fatti: livello flottante che si appoggia sul bordo dell'apertura */
.fatti { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-8)); }
.fatti__griglia {
  display: grid; grid-template-columns: 1fr; background: var(--bianco); border-radius: var(--r-scheda); box-shadow: var(--ombra-3);
}
.fatto { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); }
.fatto + .fatto { border-top: 1px solid var(--linea); }
.fatto__valore { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: -.01em; color: var(--notte); }
.fatto__testo { color: var(--ardesia); font-size: 1rem; line-height: 1.45; }
@media (min-width: 768px) {
  .fatti__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fatto { padding: var(--sp-6) var(--sp-7); }
  .fatto + .fatto { border-top: 0; border-left: 1px solid var(--linea); }
}

/* --- Home: sezioni --------------------------------------------------------- */
.sezione-testa { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); max-width: 46rem; }
.offerta { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .offerta { grid-template-columns: 7fr 5fr; }
  .offerta .blocco__media:not(.blocco__media--prodotti) { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}
.blocco { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-scheda); background: var(--bianco); border: 1px solid var(--linea); box-shadow: var(--ombra-1); transition: transform var(--t-media) var(--molla); }
.blocco::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--ombra-3); opacity: 0; transition: opacity var(--t-media) var(--uscita); }
.blocco:hover { transform: translateY(-4px); }
.blocco:hover::after { opacity: 1; }
.blocco:active { transform: translateY(-1px); }
.blocco:focus-within { outline: var(--focus); outline-offset: 3px; box-shadow: var(--ombra-1), var(--anello); }
.blocco__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--carta); }
.blocco__media img { width: 100%; height: 100%; object-fit: cover; }
.blocco__media--prodotti { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6) 0; background: var(--ghiaccio); }
.blocco__media--prodotti img { height: auto; object-fit: contain; }
.blocco__corpo { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); flex: 1; }
.blocco__corpo .scheda__testo { max-width: 52ch; }
.blocco__link { color: inherit; text-decoration: none; }
.blocco__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.blocco__link:focus-visible { outline: none; box-shadow: none; }
.blocco__credito { position: absolute; z-index: 2; right: var(--sp-3); top: var(--sp-3); font-size: .6875rem; color: var(--bianco); background: rgba(12, 35, 64, .55); padding: 2px 8px; border-radius: var(--r-etichetta); }
.servizi-mini { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Marchi */
.marchi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.marchio { display: grid; place-items: center; height: 120px; padding: var(--sp-5); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-scheda); }
.marchio img { max-height: 84px; width: auto; }
.marchi-testo { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .marchi-testo { grid-template-columns: 5fr 7fr; gap: var(--sp-8); } }

/* Rete e affiliazione (fascia Blu Notte) */
.rete { display: grid; gap: var(--sp-8); }
@media (min-width: 960px) { .rete { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }
.vantaggi { display: grid; gap: var(--sp-6); }
.vantaggio { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5); align-items: start; }
.vantaggio h3 { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; margin-bottom: var(--sp-2); }
.vantaggio p { color: var(--testo-su-notte); }
.vantaggio .etichette { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.convenziona { display: grid; gap: var(--sp-6); align-items: center; margin-top: var(--sp-9); padding-top: var(--sp-8); border-top: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 960px) { .convenziona { grid-template-columns: 5fr 6fr; gap: var(--sp-9); } }
.convenziona .foto { aspect-ratio: 16 / 10; }
.convenziona .foto::after { background: linear-gradient(0deg, rgba(12, 35, 64, .45) 0%, rgba(12, 35, 64, 0) 45%); }

/* Perché sceglierci: elenco, non schede */
.motivi { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--linea); }
.motivo { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5); padding-block: var(--sp-6); border-bottom: 1px solid var(--linea); }
.motivo h3 { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; margin-bottom: var(--sp-2); }
.motivo p { color: var(--ardesia); max-width: 52ch; }
@media (min-width: 900px) {
  .motivi { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
}

/* ==========================================================================
   PAGINE INTERNE (Fase 3)
   ========================================================================== */

/* Intestazione di pagina: lascia spazio all'insegna della testata */
.testa-pagina { position: relative; isolation: isolate; overflow: hidden; background: var(--carta); padding-block: var(--sp-9) var(--sp-8); }
.testa-pagina .orbite { right: -340px; top: -150px; width: 520px; height: 520px; }
@media (min-width: 768px) {
  .testa-pagina { padding-block: calc(var(--sp-9) + var(--sp-4)) var(--sp-9); }
  .testa-pagina .orbite { right: -200px; top: -110px; width: 600px; height: 600px; }
}
.testa-pagina__contenuto { display: grid; gap: var(--sp-5); }
.testa-pagina__contenuto > * { max-width: 50rem; }
.testa-pagina .t-intro { max-width: 56ch; }

.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--t-piccolo); color: var(--ardesia); }
.briciole li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--bordo-campo); }
.briciole a { color: var(--blu); text-underline-offset: 3px; border-radius: 2px; }
.briciole a:hover { text-decoration-thickness: 2px; }
.briciole [aria-current] { color: var(--notte); font-weight: 500; }

/* Riga divisa testo + immagine */
.diviso { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .diviso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); }
  .diviso--invertito > :first-child { order: 2; }
}
.diviso + .diviso { margin-top: var(--sezione); }

.immagine { position: relative; overflow: hidden; border-radius: var(--r-scheda); aspect-ratio: 4 / 3; background: var(--carta); box-shadow: var(--ombra-2); }
.immagine img { width: 100%; height: 100%; object-fit: cover; }
.immagine__credito { position: absolute; right: var(--sp-3); bottom: var(--sp-3); font-size: .6875rem; color: var(--bianco); background: rgba(12, 35, 64, .6); padding: 2px 8px; border-radius: var(--r-etichetta); }

/* Tappe (la storia è una sequenza: qui la numerazione per anno ha senso) */
.tappe { display: grid; border-top: 1px solid var(--linea); }
.tappa { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-6); border-bottom: 1px solid var(--linea); }
@media (max-width: 559px) { .tappa { grid-template-columns: 1fr; gap: var(--sp-3); } }
.tappa__quando { font-family: var(--display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--blu); font-variant-numeric: tabular-nums; }
.tappa h3 { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; margin-bottom: var(--sp-2); }
.tappa p { color: var(--ardesia); }

/* Valori / principi: tre colonne con tassello */
.principi { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .principi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principio { display: flex; flex-direction: column; gap: var(--sp-4); }
.principio h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.principio p { color: var(--ardesia); }
.su-notte .principio p { color: var(--testo-su-notte); }

/* Citazione della missione */
.missione { font-family: var(--display); font-weight: 700; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; max-width: 24ch; }

/* Prodotti */
.gruppo + .gruppo { margin-top: var(--sp-9); }
.gruppo__testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.prodotti { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prodotto { gap: var(--sp-4); }
.prodotto__media { display: grid; place-items: center; height: 200px; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-2); padding: var(--sp-5); background: var(--carta); border-radius: var(--r-scheda) var(--r-scheda) 0 0; }
.prodotto__media img { max-height: 150px; width: auto; }
.prodotto__media--marchio img { max-height: 110px; }

/* HVO */
.hvo-blocco { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 960px) { .hvo-blocco { grid-template-columns: 6fr 5fr; gap: var(--sp-9); } }
.hvo-blocco .t-1 { color: var(--notte); }
.hvo-punti { display: grid; gap: var(--sp-3); }
.hvo-punti li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; }
.hvo-punti .icona { color: var(--verde); margin-top: 2px; }

/* Servizi */
.servizi-griglia { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .servizi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promo { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .promo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scheda--pesca { background: var(--pesca); border-color: transparent; box-shadow: none; }
.carte { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.carte .etichetta { font-size: 1.0625rem; padding: 6px 14px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); color: var(--notte); }

/* Documento scaricabile */
.documento { display: grid; gap: var(--sp-6); align-items: center; padding: var(--sp-7); }
@media (min-width: 768px) { .documento { grid-template-columns: auto minmax(0, 1fr) auto; } }
.documento__meta { font-size: var(--t-piccolo); color: var(--ardesia); }

/* ==========================================================================
   CONTATTI, MODULO E PAGINE LEGALI (Fase 5)
   ========================================================================== */
.contatti { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 1000px) { .contatti { grid-template-columns: 5fr 7fr; gap: var(--sp-9); } }
.recapiti { display: grid; gap: var(--sp-3); }
.recapito { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-scheda); background: var(--bianco); border: 1px solid var(--linea); }
.recapito__etichetta { font-size: var(--t-piccolo); color: var(--ardesia); }
.recapito__valore { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.recapito__valore a { color: var(--notte); text-decoration: none; border-radius: 2px; }
.recapito__valore a:hover { color: var(--blu); text-decoration: underline; text-underline-offset: 4px; }
.recapito__valore a:active { opacity: .75; }
.recapito__valore--testo { font-family: var(--text); font-weight: 500; font-size: 1.0625rem; }
@media (max-width: 479px) { .recapito__valore--testo { font-size: .9375rem; } .recapito { grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); } .recapito .tassello { width: 56px; height: 56px; } }
.dati-aziendali { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--t-piccolo); color: var(--ardesia); }
.dati-aziendali dt { font-weight: 600; color: var(--notte); }
.dati-aziendali dd { margin: 0; font-variant-numeric: tabular-nums; }

.modulo { padding: clamp(var(--sp-5), 4vw, var(--sp-7)); gap: var(--sp-5); }
.modulo__trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__righe { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .modulo__righe--due { grid-template-columns: 1fr 1fr; } }
.modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.modulo__nota { font-size: var(--t-piccolo); color: var(--ardesia); }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.modulo__esito { display: grid; gap: var(--sp-4); justify-items: start; }
.modulo__esito .tassello { background: var(--nebbia); }
.modulo__esito--ok .icona { color: var(--verde); --accento: var(--verde); }
.avviso--errore { background: var(--pesca); }
.avviso--errore .icona { color: var(--arancio-testo); }

/* Pagine legali */
.legale { display: grid; gap: var(--sp-6); }
.legale > * { max-width: 46rem; }
.legale > .scheda { max-width: 60rem; }
.legale__incorporato, .legale__incorporato * { font-family: var(--text) !important; color: var(--notte); }
.legale__incorporato h2, .legale__incorporato h3 { font-family: var(--display) !important; letter-spacing: .005em; }
.legale__incorporato a { color: var(--blu); }
/* Il testo di Iubenda arriva dopo il caricamento: lo spazio riservato evita che spinga giù il footer (CLS) */
.js .legale__incorporato { min-height: 100vh; }
.legale__incorporato .iubenda-embed { font-weight: 600; }

/* Banner cookie Iubenda con i colori di marca.
   Iubenda usa selettori con id e !important: qui l'id è ripetuto per vincere in specificità.
   "Accetta" e "Rifiuta" restano identici: stesso colore, stessa dimensione. */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content { background-image: linear-gradient(var(--notte), var(--notte)) !important; /* lo sfondo nero è in linea con !important: lo copriamo */ color: var(--bianco) !important; font-family: var(--text) !important; border-radius: var(--r-scheda) !important; box-shadow: var(--ombra-3) !important; }
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph, #iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph * { color: var(--bianco) !important; font-family: var(--text) !important; font-size: .9375rem !important; line-height: 1.55 !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button {
  border-radius: var(--r-pillola) !important; min-height: 48px !important; padding: 0 var(--sp-5) !important;
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: .06em !important; text-transform: uppercase !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn,
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn { background: var(--arancio) !important; color: var(--notte) !important; min-width: 9rem !important; box-shadow: none !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn { background: transparent !important; color: var(--bianco) !important; box-shadow: inset 0 0 0 2px var(--bianco) !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-close-btn { background: transparent !important; color: var(--bianco) !important; }
#iubenda-cs-banner#iubenda-cs-banner button:focus-visible { outline: var(--focus) !important; outline-offset: 3px !important; box-shadow: var(--anello) !important; }
/* Pulsante fluttuante delle preferenze: copre il contenuto sul telefono. Le scelte si cambiano dal link
   «Preferenze cookie» del footer (.iubenda-cs-preferences-link), che resta sempre disponibile. Decisione #27. */
button.iubenda-tp-btn[data-tp-float]:not(#nessuno) { display: none !important; } /* :not(#…) conta come un id: batte lo stile inline di Iubenda */

/* ==========================================================================
   LA RETE: ricerca, mappa ed elenco (Fase 4)
   ========================================================================== */
.regioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.regione {
  display: inline-flex; align-items: baseline; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pillola); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--notte); text-decoration: none; transition: transform var(--t-media) var(--molla);
}
.regione:hover { transform: translateY(-2px); }
.regione:active { transform: scale(.97); }
.regione__nome { font-family: var(--display); font-weight: 700; font-size: 1.125rem; }
.regione__numero { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--blu); font-variant-numeric: tabular-nums; }
.regione[aria-pressed="true"] { background: var(--notte); box-shadow: none; color: var(--bianco); }
.regione[aria-pressed="true"] .regione__numero { color: var(--azzurro); }

.rete-ricerca { padding-block: var(--sp-6) var(--sezione); }
/* Telefono: ricerca → mappa → elenco. Desktop: ricerca ed elenco a sinistra, mappa fissa a destra. */
.rete-griglia { display: grid; gap: var(--sp-4); grid-template-areas: "cerca" "mappa" "elenco"; }
.rete-cerca-box { grid-area: cerca; }
.rete-mappa-box { grid-area: mappa; }
.rete-elenco-box { grid-area: elenco; }
@media (min-width: 960px) {
  .rete-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "cerca mappa" "elenco mappa"; column-gap: var(--sp-6); row-gap: 0; align-items: start; }
  .rete-mappa-box { position: sticky; top: calc(76px + var(--sp-4)); }
  .rete-mappa { height: calc(100vh - 76px - var(--sp-8)); min-height: 480px; }
  .rete-elenco-box { max-height: calc(100vh - 76px - 16rem); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--sp-3); }
}
.rete-cerca { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.rete-cerca__campo { position: relative; }
.rete-cerca__campo .icona { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--ardesia); pointer-events: none; }
.rete-cerca .input { padding-left: 3rem; padding-right: 3.25rem; font-size: 1.0625rem; }
.rete-cerca .input::-webkit-search-cancel-button { display: none; }
.rete-cerca__svuota {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pillola);
  background: transparent; color: var(--ardesia); cursor: pointer;
}
.rete-cerca__svuota:hover { background: var(--ghiaccio); color: var(--notte); }
.rete-cerca__svuota:active { transform: translateY(-50%) scale(.92); }
.rete-cerca__svuota .icona { position: static; transform: none; color: inherit; }
.rete-stato { font-size: var(--t-piccolo); color: var(--ardesia); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--linea); }
.rete-stato strong { color: var(--notte); font-weight: 600; }

.elenco__regione { padding-top: var(--sp-5); }
.elenco__titolo { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.elenco__conteggio { font-weight: 600; font-size: 1.0625rem; color: var(--ardesia); font-variant-numeric: tabular-nums; }
.elenco__provincia { margin-top: var(--sp-4); padding-block: var(--sp-2); font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: var(--ardesia); border-bottom: 1px solid var(--linea); }
.elenco__lista { display: grid; }
.pv { position: relative; display: grid; gap: var(--sp-1); align-items: center; padding: var(--sp-3) var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); border-radius: 10px; border-bottom: 1px solid var(--linea); }
.pv__comune { font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; }
.pv__localita { font-weight: 600; color: var(--ardesia); }
.pv__localita::before { content: "· "; }
.pv__indirizzo { font-size: .9375rem; line-height: 1.45; color: var(--ardesia); }
.pv__azioni { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-left: calc(-1 * var(--sp-1)); }
.pv__distanza { margin-left: var(--sp-2); font-family: var(--display); font-weight: 600; font-size: .9375rem; color: var(--blu); font-variant-numeric: tabular-nums; }
/* Filtro per servizio: interruttori più piccoli delle regioni, combinabili tra loro */
.rete-servizi { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.servizi { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.servizio {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-pillola); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--notte); font: 500 1rem/1.2 var(--text); cursor: pointer;
  transition: transform var(--t-media) var(--molla);
}
.servizio:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--blu); }
.servizio:active { transform: scale(.97); }
.servizio__numero { font-family: var(--display); font-weight: 600; color: var(--blu); font-variant-numeric: tabular-nums; }
.servizio__spunta { display: none; width: 18px; height: 18px; margin-left: calc(-1 * var(--sp-1)); }
.servizio[aria-pressed="true"] { background: var(--notte); box-shadow: none; color: var(--bianco); }
.servizio[aria-pressed="true"] .servizio__spunta { display: block; color: var(--azzurro); }
.servizio[aria-pressed="true"] .servizio__numero { color: var(--azzurro); }
.pv__servizi { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-block: 2px var(--sp-1); }
.pv__servizi .etichetta { font-size: .875rem; padding: 1px 8px; }
.pv--attivo .pv__servizi .etichetta { background: var(--bianco); }
.rete-vicino { display: grid; gap: var(--sp-2); justify-items: start; padding-bottom: var(--sp-4); }
.vicini { padding-top: var(--sp-3); display: grid; gap: var(--sp-4); }
.pv--attivo { background: var(--ghiaccio); border-bottom-color: transparent; }

.rete-vuoto { padding: var(--sp-6) 0; }
/* Telefono: «Mostra altri» in fondo all'elenco ridotto */
.rete-altri { display: grid; gap: var(--sp-2); justify-items: center; padding-top: var(--sp-5); text-align: center; }
.rete-altri .btn { width: 100%; }
.rete-altri__conto { font-size: var(--t-piccolo); color: var(--ardesia); font-variant-numeric: tabular-nums; }
@keyframes pv-arriva { from { opacity: 0; transform: translateY(12px); } }
.pv--nuovo { animation: pv-arriva 420ms var(--uscita) both; }
.pv:focus { outline: none; }
.pv:focus-visible { outline: var(--focus); outline-offset: 0; box-shadow: var(--anello); }
.rete-mappa { position: relative; z-index: 0; height: 52vh; min-height: 320px; border-radius: var(--r-scheda); overflow: hidden; background: var(--ghiaccio); box-shadow: var(--ombra-2); }
.rete-mappa:focus-visible { outline: var(--focus); outline-offset: 3px; }
.rete-nota { margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--ardesia); }

/* Leaflet con i token di marca */
.leaflet-container { font-family: var(--text); background: var(--ghiaccio); }
.leaflet-popup-content-wrapper { border-radius: var(--r-scheda); box-shadow: var(--ombra-3); }
.leaflet-popup-content { margin: var(--sp-4) var(--sp-5); font-size: .9375rem; line-height: 1.45; color: var(--notte); }
.leaflet-popup-content b { display: block; font-family: var(--display); font-size: 1.125rem; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; color: var(--notte); }
.leaflet-bar a:focus-visible { outline: var(--focus); outline-offset: 2px; }
.leaflet-control-attribution { font-size: .6875rem; }

/* Galleria */
.galleria { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .galleria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galleria figure { display: grid; gap: var(--sp-2); }
.galleria .immagine { aspect-ratio: 4 / 3; box-shadow: var(--ombra-1); }
.galleria figcaption { font-size: var(--t-piccolo); color: var(--ardesia); }

/* --------------------------------------------------------------------------
   Movimento allo scorrimento (assets/js/site.js, sezione «Movimento»)
   Lo script assegna data-rivela solo agli elementi ancora fuori schermo:
   senza JavaScript, con «riduci movimento» o in stampa tutto resta visibile.
   Eccezione voluta alla regola «solo transform e opacity»: la sfocatura usa
   filter: blur, limitata ai blocchi di testo (richiesta del 6/11/2026).
   -------------------------------------------------------------------------- */
main { overflow-x: clip; } /* gli elementi che entrano di lato non allargano la pagina */

[data-rivela] {
  transition: opacity 700ms var(--uscita), transform 900ms var(--uscita), filter 800ms var(--uscita);
  transition-delay: var(--ritardo, 0ms);
}
[data-rivela]:not(.rivelato) { opacity: 0; }
[data-rivela="sfoca"]:not(.rivelato) { filter: blur(12px); transform: translateY(12px) scale(.985); }
[data-rivela="su"]:not(.rivelato) { transform: translateY(32px); }
[data-rivela="da-destra"]:not(.rivelato) { transform: translateX(56px); }
[data-rivela="da-sinistra"]:not(.rivelato) { transform: translateX(-56px); }

/* Apertura delle pagine: titolo e testo arrivano sfocati, uno dopo l'altro */
@keyframes entra-sfoca { from { opacity: 0; filter: blur(10px); transform: translateY(14px); } }
.eroe__contenuto > *, .testa-pagina__contenuto > * { animation: entra-sfoca 900ms var(--uscita) both; }
.eroe__contenuto > :nth-child(2), .testa-pagina__contenuto > :nth-child(2) { animation-delay: 90ms; }
.eroe__contenuto > :nth-child(3), .testa-pagina__contenuto > :nth-child(3) { animation-delay: 180ms; }
.eroe__contenuto > :nth-child(4), .testa-pagina__contenuto > :nth-child(4) { animation-delay: 270ms; }

/* Contatore a rullo: ogni cifra è un nastro verticale che gira, come il contalitri
   di una pompa. Le cifre sono pseudo-elementi (nel testo resta solo il numero finale). */
[data-conta] { font-variant-numeric: tabular-nums; }
/* Finché lo script non ha montato il rullo il numero non si vede; se lo script non arriva, ricompare da solo */
@keyframes conta-riserva { to { opacity: 1; } }
.js [data-conta]:not(.conta--pronta) { opacity: 0; animation: conta-riserva 1ms linear 1500ms forwards; }
.conta__ruote { display: inline-flex; vertical-align: top; }
.conta__colonna { display: inline-block; height: var(--riga); overflow: hidden; }
.conta__nastro { display: block; transition: transform var(--durata, 1800ms) var(--uscita); }
.conta__nastro > i { display: block; height: var(--riga); line-height: var(--riga); font-style: normal; text-align: center; }
.conta__nastro > i::before { content: attr(data-c); }
.conta--via .conta__nastro { transform: translateY(calc(var(--passi) * var(--riga) * -1)); }

@media print {
  [data-rivela] { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:hover, .scheda--link:hover { transform: none; }
  .eroe__contenuto > *, .testa-pagina__contenuto > * { animation: none; }
}