/* ==========================================================================
   FYBBO — sistema visivo "Chiaro"
   Fondo bianco, viola istituzionale, nessun colore decorativo oltre a quello.
   Il verde, l'ambra e il rosso restano riservati agli stati: online, avviso,
   chiuso. Lexend nei titoli perche' e' disegnata per la leggibilita', Source
   Sans 3 nel testo e nei dati. Filetti sottili, angoli morbidi, ombre appena
   accennate: la pagina deve sembrare aria, non carta.
   ========================================================================== */

/* --- Caratteri, ospitati sul dominio (nessuna richiesta a terzi) ---------- */

@font-face {
  font-family: Lexend;
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url(/assets/fonts/lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Lexend;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/lexend-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Valori di progetto ---------------------------------------------------
   Ogni contrasto qui sotto e' stato misurato: nessuna coppia testo/fondo
   scende sotto 4.5:1, i pallini di stato sotto 3:1. */

:root {
  /* Fondi: tre livelli, tutti chiari */
  --fondo: #fbfaff;          /* pagina */
  --fondo-alto: #ffffff;     /* schede e moduli, un gradino sopra la pagina */
  --fondo-basso: #f2f0fb;    /* fasce alternate */

  /* Testo */
  --ink: #14122b;            /* 18.2:1 sul fondo */
  --ink-soft: #56527a;       /* 7.3:1 sul fondo */

  /* Filetti */
  --line: #e7e4f4;
  --line-strong: #d3cdea;

  /* Viola istituzionale — unico colore di marca e unico colore dell'azione.
     Un accento solo: l'invito alla chiamata si distingue perche' e' pieno,
     non perche' cambia colore. */
  --viola: #6d28d9;          /* 7.1:1 sul bianco */
  --viola-cupo: #5b21b6;     /* passaggio del mouse, testo su tinta */
  --viola-tenue: #f3eeff;    /* fondini informativi */
  --viola-chiaro: #c4b5fd;   /* su fondo scuro */

  /* Superfici scure: copertura, chiusura, piede */
  --scuro: #221552;
  --scuro-cupo: #17103a;
  --su-scuro: #ffffff;
  --su-scuro-soft: #c8c1e6;  /* 9.4:1 su --scuro */
  --su-scuro-dim: #a79fd0;   /* 6.6:1 — etichette e valori spenti */
  --ok-scuro: #7ee0a8;       /* "disponibile" sul fondo scuro */
  --forse-scuro: #f0c674;    /* "da verificare" sul fondo scuro */
  --placeholder: #6b6597;    /* 4.6:1 sul bianco */
  --linea-scura: rgba(255, 255, 255, .18);

  /* Stati */
  --live: #15803d;           /* testo verde — 5.0:1 sul fondo */
  --live-dot: #16a34a;       /* pallino, piu' acceso */
  --chiuso: #b42318;
  --avviso: #b45309;
  --error: #b42318;

  /* Caratteri */
  --display: Lexend, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Forma: angoli morbidi, niente spigoli da stampato */
  --r-control: 10px;
  --r-card: 16px;
  --r-panel: 20px;

  /* Ombre viola e bassissime: servono a staccare, non a decorare */
  --lift: 0 1px 2px rgba(34, 21, 82, .04), 0 10px 26px -14px rgba(34, 21, 82, .22);
  --lift-high: 0 2px 6px rgba(34, 21, 82, .06), 0 26px 54px -22px rgba(34, 21, 82, .32);
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box }

/* L'attributo hidden vale display:none, ma e' una regola del browser a
   specificita' zero: qualunque classe con un display la batte. E' cosi' che
   le schede offerta restavano visibili pur essendo hidden, e che il banner
   cookie lampeggiava a ogni caricamento. Questa riga chiude il problema
   ovunque, una volta sola. */
[hidden] { display: none !important }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100% }
button, input { font: inherit; color: inherit }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(109, 40, 217, .14) }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em }

:focus-visible {
  outline: 2px solid var(--viola);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.coverage-preview :focus-visible,
.final-cta :focus-visible,
footer :focus-visible,
.coverage-result :focus-visible,
.offer-detail aside :focus-visible { outline-color: var(--viola-chiaro) }

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  transform: translateY(-160%);
  background: var(--viola); color: #fff;
  padding: 11px 16px; border-radius: var(--r-control);
  font-weight: 600; text-decoration: none;
}
.skip:focus { transform: translateY(0) }

/* --- Voce tipografica ---------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  /* Lexend nasce larga e spaziata: e' il suo pregio nel testo lungo, ma nei
     titoli grandi lascia buchi fra le lettere. Si stringe. */
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(42px, 4.7vw, 66px);
  line-height: 1.06;
  margin: 20px 0 24px;
}
.hero h1:first-child {              /* senza occhiello sopra, niente margine superiore */
  margin-top: 0;
}
/* Senza il corsivo di un serif l'enfasi la fa il colore: la parola chiave
   passa in viola e resta nella stessa linea di base. */
h1 em { font-style: normal; font-weight: 600; color: var(--viola) }

h2 {
  font-size: clamp(29px, 3.6vw, 44px);
  line-height: 1.12;
  margin: 8px 0 20px;
}
h2 em { font-style: normal; color: var(--viola) }

h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3 }

p { margin: 0 0 1em }
p:last-child { margin-bottom: 0 }

.lead {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Occhiello: filetto breve + etichetta in maiuscoletto spaziato */
.kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  font: 600 12px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--viola);
}
.kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none }

.micro { font-size: 14px; color: var(--ink-soft) }
.orario-corto { display: none }
@media (max-width: 400px) {
  .orario-lungo { display: none }
  .orario-corto { display: inline }
}

/* --- Testata ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 82px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 26px }

.brand { margin-right: auto; display: flex; flex-direction: column; gap: 3px }
.logo { display: inline-flex; text-decoration: none }
.logo img { display: block; width: auto; height: 33px }

/* Payoff: maiuscoletto spaziato sotto il logotipo. Con un logotipo in
   grazie ci stava il corsivo; con Lexend serve un contrasto di scala e di
   spaziatura, non di stile. */
.tagline {
  font: 600 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--viola);
  white-space: nowrap;
}
footer .tagline {
  display: block;
  margin: -6px 0 18px;
  font-size: 12px;
  color: var(--viola-chiaro);
}

.header-inner nav { display: flex; align-items: center; gap: 2px }
.header-inner nav a {
  padding: 9px 12px;
  white-space: nowrap;
  border-radius: var(--r-control);
  text-decoration: none;
  font-size: 15px; font-weight: 400;
  color: var(--ink-soft);
  transition: color .16s ease, background-color .16s ease;
}
.header-inner nav a:hover { color: var(--viola); background: var(--viola-tenue) }

.header-call { display: flex; flex-direction: column; align-items: center; gap: 5px }
.header-call .button { white-space: nowrap }
.call-hint { font-size: 12px; color: var(--ink-soft); white-space: nowrap; letter-spacing: .01em }

/* --- Invito alla chiamata -------------------------------------------------
   Ciclo lungo e ampiezza piccola: su un sito editoriale un lampeggio continuo
   stanca e toglie credibilita'. L'alone parte, si allarga e sparisce; la
   cornetta squilla una volta sola a fine ciclo. In hover l'alone si spegne:
   chi ha gia' trovato il bottone non ha piu' bisogno di essere richiamato. */
/* L'alone era un ::after ingrandito del 14%: essendo una percentuale della
   larghezza del bottone, su smartphone usciva dallo schermo (la barra in basso
   e' larga 362px su 390 e il margine laterale e' 14px, l'alone ne chiedeva 25).
   Con box-shadow lo spessore e' fisso, non dipende dalla larghezza del bottone
   e non altera mai il flusso: 7px stanno dentro il margine su ogni schermo. */
.call-cta { position: relative; --alone: 109, 40, 217 }
.call-cta { animation: call-alone 4.6s ease-out infinite }
.call-cta:hover, .call-cta:focus-visible { animation: none }
@keyframes call-alone {
  0%   { box-shadow: 0 0 0 0   rgba(var(--alone), .45) }
  55%  { box-shadow: 0 0 0 7px rgba(var(--alone), 0) }
  100% { box-shadow: 0 0 0 0   rgba(var(--alone), 0) }
}
.call-icon { flex: none; transform-origin: 50% 62%; animation: call-squillo 4.6s ease-in-out infinite }
@keyframes call-squillo {
  0%, 70%, 100% { transform: rotate(0) }
  74% { transform: rotate(-14deg) }
  78% { transform: rotate(12deg) }
  82% { transform: rotate(-9deg) }
  86% { transform: rotate(6deg) }
  90% { transform: rotate(0) }
}
/* L'alone segue il colore del bottone: bianco sulle fasce scure. */
.hero-dark .call-cta, .coverage-preview .call-cta,
.final-cta .call-cta, footer .call-cta { --alone: 255, 255, 255 }
.mobile-call .call-cta { --alone: 109, 40, 217 }

/* Accanto a Menu, dove la testata perde nav e CTA: la scritta con gli
   operatori online. E' un link telefonico, quindi ha l'area di tocco piena,
   ma non ha l'aspetto di un pulsante: il pallino verde fa il richiamo. */
.header-status {
  display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 2px;
  text-decoration: none; white-space: nowrap;
  font: 600 15px/1.2 var(--sans);
  color: var(--live);
  visibility: hidden;
}
.header-status.is-ready { visibility: visible }
.header-status.is-closed { color: var(--chiuso) }
.header-status .status-dot { width: 9px; height: 9px; background: var(--live-dot) }
.header-status.is-closed .status-dot { background: var(--chiuso) }
@media (max-width: 1000px) { .header-status { display: inline-flex } }
@media (max-width: 380px) { .header-status { font-size: 14px; gap: 6px } }
@media (max-width: 359px) { .header-status { display: none } }


/* --- Stato assistenza in tempo reale -------------------------------------
   Riga di testo, non una pastiglia. Lo spazio e' riservato dal primo disegno
   con min-height: il JS riempie il testo e nulla si sposta. Prima il badge
   compariva dopo il caricamento e spingeva in giu' l'intera hero. */

.status {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; min-height: 20px;
  font: 500 13px/1.4 var(--sans);
  color: var(--ink-soft);
  flex-wrap: wrap; row-gap: 2px;
  max-width: 100%;
  visibility: hidden;                /* si mostra solo a stato calcolato */
}
.status.is-ready { visibility: visible }

.status-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
  animation: status-lampeggio 1.6s ease-in-out infinite;
}
.status.is-open   .status-dot { background: var(--live-dot) }
.status.is-closed .status-dot { background: var(--chiuso); animation-duration: 2.4s }
/* Prima scendeva a .18 per meta' ciclo: il pallino sembrava grigio quasi
   sempre. Ora sta acceso la maggior parte del tempo e cala solo di poco. */
@keyframes status-lampeggio {
  0%, 62%  { opacity: 1 }
  81%      { opacity: .38 }
  100%     { opacity: 1 }
}

.status-count { font-weight: 700; color: var(--live) }
.status-count:empty { display: none }
.status-breve:empty, .status-text:empty { display: none }
.status.is-closed .status-breve { font-weight: 700 }
/* Fuori orario tutto il messaggio e' rosso, come nella testata: due colori
   sulla stessa riga facevano sembrare la seconda meta' un'altra cosa. */
.status.is-closed .status-breve,
.status.is-closed .status-text { color: var(--chiuso) }

/* Riquadro centrato che occupa tutta la colonna: la riga da sola lasciava
   un vuoto sbilanciato sopra il titolo. */
.status.grande {
  display: flex; width: 100%;
  justify-content: center; text-align: center;
  gap: 12px; margin-bottom: 28px;
  padding: 14px 20px; min-height: 52px;
  font-size: 15px;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
.status.grande .status-dot { width: 10px; height: 10px }
/* In testata c'e' spazio per una riga sola: quando siamo aperti basta il
   conteggio, il resto del messaggio sta nella hero. Fuori orario invece il
   conteggio non c'e' e serve il testo, che spiega quando si riapre. */
.status.compact { font-size: 13px; flex-wrap: nowrap; white-space: nowrap }
.status.compact .status-text { display: none }
/* Fra 1000 e 1150 la testata mostra gia' nav e CTA: lo stato non ci sta */
@media (max-width: 1150px) { .status.compact { display: none } }

/* Sotto i 1000px il conteggio e' gia' nella testata, sempre in vista:
   ripeterlo nella hero sarebbe un doppione a due centimetri di distanza. */
@media (max-width: 1000px) { .status.grande .status-count { display: none } }

@media (max-width: 560px) {
  /* Due righe sempre, non "quando capita": cosi' l'altezza riservata sopra
     coincide con quella reale e il testo non puo' spostare nulla entrando. */
  .status.grande { min-height: 52px; align-items: flex-start }
  .status.grande .status-dot { margin-top: 5px }
}

.menu-button {
  display: none;
  border: 1px solid var(--line-strong); background: transparent;
  border-radius: var(--r-control);
  min-height: 44px; padding: 8px 15px;
  font-weight: 600; cursor: pointer;
}
.site-header .tagline { display: block }
/* La testata ha altezza fissa: in flusso normale il pannello finiva fuori dal
   suo riquadro e non si vedeva. Lo si ancora sotto la testata e lo si sovrappone
   al contenuto, senza spostarlo. */
.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--fondo-alto);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--lift);
  padding: 6px 24px 14px;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu nav { display: grid }
.mobile-menu nav a {
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; font-weight: 500;
}
.mobile-menu nav a:last-child { border-bottom: 0 }

/* --- Comandi ------------------------------------------------------------- */

.button {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  padding: 14px 24px;
  text-decoration: none;
  font: 600 16px/1 var(--sans);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* Un accento solo in tutto il sistema: l'invito alla chiamata si distingue
   perche' e' l'unica superficie piena, non perche' cambia colore. */
.button.primary { background: var(--viola); color: #fff }
.button.primary:hover { background: var(--viola-cupo) }

.button.secondary { background: var(--fondo-alto); border-color: var(--line-strong); color: var(--ink) }
.button.secondary:hover { border-color: var(--viola); color: var(--viola) }

.button.compact { min-height: 44px; padding: 11px 18px; font-size: 15px; background: var(--viola); color: #fff }
.button.compact:hover { background: var(--viola-cupo) }

/* Inviti all'azione sulle fasce scure: pieno bianco con testo viola */
.hero-dark .button.primary,
.coverage-preview .split > div > .button.primary,
.final-cta .button.primary,
footer .button.primary { background: #fff; color: var(--viola-cupo) }
.hero-dark .button.primary:hover,
.coverage-preview .split > div > .button.primary:hover,
.final-cta .button.primary:hover,
footer .button.primary:hover { background: var(--viola-tenue) }

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 32px 0 18px }

/* --- Apertura ------------------------------------------------------------ */

.hero { padding-block: clamp(56px, 7vw, 92px) clamp(56px, 6.5vw, 88px); border-bottom: 1px solid var(--line) }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(48px, 6vw, 84px) }

/* Visuale d'apertura: una scheda di assistenza, non un oggetto tecnologico */
.hero-visual { display: grid; place-items: center }

.dossier {
  position: relative;
  width: min(430px, 100%);
  margin: 0;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 30px 30px 26px;
  box-shadow: var(--lift-high);
}
/* Prima la scheda era inclinata di un grado, con una cornice interna: un
   fascicolo di carta. Qui e' un pannello dell'applicativo, dritto, e il
   filetto interno lascia posto a una velatura viola in alto. */
.dossier::before {
  content: '';
  position: absolute; inset: 0; height: 4px;
  background: var(--viola);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  pointer-events: none;
}
.dossier > * { position: relative }

.dossier header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
  font: 600 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--ink-soft);
}
.dossier header b { color: var(--viola); font-variant-numeric: tabular-nums }

.dossier dl { margin: 4px 0 0 }
.dossier dl div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.dossier dl div:last-child { border-bottom: 0 }
.dossier dt { font-size: 13px; color: var(--ink-soft); white-space: nowrap }
.dossier dd { margin: 0 0 0 auto; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; text-align: right }

.dossier-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 20px;
}
.dossier-note {
  margin: 0;
  font-size: 15px; line-height: 1.45;
  color: var(--ink-soft);
}

/* Era un timbro inclinato da protocollo. Ora e' una pastiglia piena: stesso
   messaggio, stessa area, ma allineata alla griglia come tutto il resto. */
.stamp {
  flex: none;
  display: grid; place-content: center;
  min-width: 96px; min-height: 60px;
  padding: 12px 16px;
  background: var(--viola-tenue);
  border-radius: var(--r-control);
  color: var(--viola-cupo);
  font: 600 11px/1.45 var(--sans);
  text-transform: uppercase; letter-spacing: .1em; text-align: center;
}
.stamp br { line-height: inherit }

/* --- Fascia operatori ---------------------------------------------------- */

.logo-band {
  background: var(--fondo-alto);
  border-bottom: 1px solid var(--line);
  padding: 30px 0 34px;
  text-align: center;
}
.logo-band p {
  margin: 0 0 22px;
  font: 500 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--ink-soft);
  text-wrap: balance;
}
.operator-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 colonne da 2 loghi */
  gap: 26px 20px;
  align-items: center;
}
.operator-logos a {
  display: grid; place-items: center;
  min-height: 58px;
  border-radius: var(--r-control);
  transition: opacity .16s ease;
}
.operator-logos a:hover { opacity: .62 }

/* Le proporzioni vanno da 1,6:1 a 5:1. Vincolando la larghezza i marchi larghi
   (Tiscali, Fastweb, Sky) risultavano schiacciati: si vincola l'altezza, cosi'
   tutti rendono la stessa altezza ottica e la larghezza si adatta. */
.operator-logos img { width: auto; max-width: 100%; height: 40px; object-fit: contain }
.operator-logos img[src*="windtre"] { height: 50px }   /* marchio impilato sul nome */
.operator-logos img[src*="eolo"]    { height: 44px }
.operator-logos img[src*="iliad"]   { height: 38px }

/* --- Ritmo delle sezioni ------------------------------------------------- */

.section { padding-block: clamp(64px, 7.5vw, 104px) }
.tint { background: var(--fondo-basso); border-block: 1px solid var(--line) }

.section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 56px;
  margin-bottom: 44px;
}
.section-heading > div { max-width: 700px }
.section-heading > p { max-width: 400px; margin: 0; color: var(--ink-soft) }
.section-heading > a {
  flex: none;
  color: var(--viola); font-weight: 500;
  text-underline-offset: .3em;
  text-decoration-color: var(--line-strong);
}
.section-heading > a:hover { text-decoration-color: currentColor }

/* --- Colonne "il costo vero" --------------------------------------------- */

.three { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong) }
.feature { padding: 34px 34px 4px 0 }
.feature + .feature { padding-left: 34px; border-left: 1px solid var(--line) }
.feature > span {
  display: block;
  font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
  color: var(--viola);
  font-variant-numeric: tabular-nums;
}
.feature h3 { margin: 16px 0 10px }
.feature p { color: var(--ink-soft); font-size: 16px }

/* --- Schede offerta ------------------------------------------------------ */

.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }

.offer-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 24px 22px;
  content-visibility: auto;
  contain-intrinsic-size: 440px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.offer-card:hover { border-color: var(--line-strong); box-shadow: var(--lift) }

.offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 44px }
.offer-head img { width: 104px; height: 40px; object-fit: contain; object-position: left center }

.badge {
  flex: none;
  background: var(--viola-tenue); color: var(--viola-cupo);
  border-radius: 999px;
  padding: 6px 11px;
  font: 600 10px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .1em;
}
/* L'avviso non e' una promozione: cambia colore, non solo testo. */
.badge.warn { background: #fdf1e3; color: var(--avviso) }

.technology {
  margin: 22px 0 0;
  font: 500 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-soft);
}
.offer-card h3 { margin: 9px 0 6px; font-size: 22px }
.offer-card h3 a { text-decoration: none }
.offer-card h3 a:hover { color: var(--viola) }

.speed { margin: 0; color: var(--ink-soft); font-size: 15px }

.price { display: flex; align-items: baseline; gap: 7px; margin-top: 18px }
.price strong {
  font-family: var(--display); font-size: 42px; font-weight: 600; line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.price span { font-size: 14px; color: var(--ink-soft) }

.after { margin: 7px 0 0; color: var(--ink-soft); font-size: 14px }

.offer-card dl { margin: 18px 0 22px; padding-top: 4px; border-top: 1px solid var(--line) }
/* I valori vanno da "Inclusa" a 85 caratteri: su due colonne quelli lunghi si
   spezzavano in righe corte e frastagliate. Etichetta sopra, valore sotto a
   tutta larghezza: una riga sola nella gran parte dei casi. */
.offer-card dl div {
  padding: 10px 0;
  border-bottom: 1px dotted var(--line);
}
.offer-card dl div:last-child { border-bottom: 0 }
.offer-card dt {
  font: 500 10px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.offer-card dd {
  margin: 0;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.offer-card .button { margin-top: auto }

.disclaimer { margin-top: 32px; font-size: 14px; color: var(--ink-soft); max-width: 78ch }

/* --- Filtri -------------------------------------------------------------- */

/* --- Filtro e ordinamento del catalogo -----------------------------------
   Prima erano bottoni in fila con overflow-x: su telefono gli ultimi operatori
   restavano fuori campo. Poi tendine native: cambiano faccia su ogni sistema e
   su telefono aprono il rullo a tutto schermo. Qui la tendina e' disegnata da
   noi, sta in una barra ordinata e si comanda anche da tastiera. */
.offer-tools {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: 16px 20px;
  padding: 18px 20px;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
.offer-tools .field { flex: 1 1 240px; max-width: 300px; min-width: 0; margin-bottom: 0 }
.field-label {
  display: block; margin-bottom: 7px;
  font: 500 13px/1 var(--sans); color: var(--ink-soft);
}

.dropdown { position: relative }
.dropdown-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--fondo);
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
  text-align: left; cursor: pointer;
  transition: border-color .16s ease;
}
.dropdown-toggle:hover { border-color: var(--ink-soft) }
.dropdown-corrente { display: flex; align-items: center; gap: 10px; min-width: 0 }
.dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* I loghi degli operatori hanno proporzioni molto diverse (da 1,6:1 a 5:1):
   si vincola l'altezza e si lascia libera la larghezza, altrimenti i piu'
   larghi verrebbero schiacciati a pochi pixel di altezza. */
.dropdown-icona, .opt-icona {
  flex: none; width: auto; height: 18px; max-width: 72px;
  object-fit: contain; object-position: left center;
}
.dropdown-icona[hidden] { display: none }
.opt-corpo { display: flex; align-items: center; gap: 10px; min-width: 0 }
.dropdown-toggle::after {
  content: ''; flex: none;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--ink-soft);
  border-bottom: 1.6px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.dropdown.is-open .dropdown-toggle::after { transform: translateY(2px) rotate(225deg) }

.dropdown-panel {
  position: absolute; z-index: 60;
  top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  padding: 5px;
  background: var(--fondo-alto);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--lift-high);
}
.dropdown-panel[hidden] { display: none }
/* se il pannello sfonderebbe il bordo basso dello schermo si apre verso l'alto */
.dropdown.apre-su .dropdown-panel { top: auto; bottom: calc(100% + 6px) }
.dropdown-panel button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 42px;
  padding: 10px 12px;
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--ink);
  font: 400 15px/1.3 var(--sans);
  text-align: left; cursor: pointer;
}
.dropdown-panel button:hover,
.dropdown-panel button:focus-visible { background: var(--viola-tenue); color: var(--viola) }
.dropdown-panel button[aria-selected="true"] { font-weight: 600; color: var(--viola) }
.dropdown-panel button[aria-selected="true"]::after { content: '✓'; font-size: 13px; flex: none }

/* Con una sola tendina la barra respira: l'ordine dichiarato sta al centro,
   il conteggio a destra. */
.offer-order {
  margin: 0; padding-bottom: 15px;
  font-size: 14px; color: var(--ink-soft);
}
.offer-count {
  margin: 0 0 0 auto; padding-bottom: 15px;
  font-size: 14px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .offer-tools { padding: 16px; align-items: start }
  .offer-tools .field { flex: 1 1 100%; max-width: none }
  .offer-order, .offer-count { padding-bottom: 0 }
  .offer-count { margin: 0 0 0 auto }
}

/* --- Verifica copertura, anteprima in home ------------------------------- */

.coverage-preview { background: var(--scuro); color: var(--su-scuro) }
.coverage-preview .kicker { color: var(--viola-chiaro) }
.coverage-preview .lead { color: var(--su-scuro-soft) }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(48px, 6vw, 90px) }
.coverage-preview .button { margin-top: 30px }

/* --- Guide, elenchi editoriali ------------------------------------------- */

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.article-grid > a {
  display: block;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.article-grid > a:hover { border-color: var(--line-strong); box-shadow: var(--lift) }
.article-grid span {
  display: block; margin-bottom: 14px;
  font: 500 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--viola);
}
.article-grid h2, .article-grid h3 { font-size: 24px; margin: 0 0 12px }
.article-grid p { margin: 0; color: var(--ink-soft); font-size: 16px }
.guides-index > a { min-height: 230px }

/* --- Domande frequenti --------------------------------------------------- */

.faq { max-width: none }          /* resta agganciata al margine sinistro della griglia */
.faq h2 { margin-bottom: 34px }
.faq details, .faq summary { max-width: 900px }
.faq details { border-top: 1px solid var(--line); padding: 4px 0 }
.faq details:last-of-type { border-bottom: 1px solid var(--line) }
.faq summary {
  padding: 20px 30px 20px 0;
  position: relative;
  font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 24px/1 var(--sans); color: var(--viola);
}
.faq details[open] summary::after { content: '–' }
.faq details p { margin: 0 0 20px; max-width: 68ch; color: var(--ink-soft) }

/* --- Chiusura ------------------------------------------------------------ */

.final-cta { background: var(--scuro); color: var(--su-scuro); padding-block: clamp(64px, 7vw, 92px); text-align: center }
.final-cta p { margin: 0; font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .15em; color: var(--viola-chiaro) }
.final-cta h2 { margin: 18px auto 30px; max-width: 16ch }

/* --- Testate di pagina --------------------------------------------------- */

.page-hero { padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 52px) }
.page-hero h1 { font-size: clamp(42px, 5.4vw, 68px); max-width: 20ch }
.page-hero + .section { padding-top: clamp(40px, 4.5vw, 62px) }
.page-hero .lead { max-width: 68ch }

/* --- Operatori ----------------------------------------------------------- */

.operator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.operator-card {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.operator-card:hover { border-color: var(--line-strong); box-shadow: var(--lift) }
.operator-card img { width: 140px; height: 52px; object-fit: contain; object-position: left }
.operator-card strong { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em }
.operator-card span { margin-top: auto; color: var(--viola); font-size: 15px; font-weight: 500 }

.operator-hero > img { width: 172px; height: 62px; object-fit: contain; object-position: left; margin-bottom: 26px }
.operator-hero .button { margin-top: 28px }

/* --- Scheda offerta ------------------------------------------------------ */

.offer-detail { display: grid; grid-template-columns: 1fr 340px; gap: clamp(40px, 5vw, 76px); align-items: center }
.offer-detail > div > img { width: 164px; height: 56px; object-fit: contain; object-position: left; margin-bottom: 24px }
.offer-detail .button { margin-top: 28px }
.offer-detail aside {
  background: var(--scuro); color: var(--su-scuro);
  border-radius: var(--r-panel);
  padding: 32px;
}
.offer-detail aside > span {
  display: block;
  font: 500 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--viola-chiaro);
}
.offer-detail aside strong {
  display: flex; align-items: baseline; gap: 6px;
  margin: 16px 0 12px;
  font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.offer-detail aside small { font: 400 14px var(--sans); color: var(--su-scuro-soft) }
.offer-detail aside p { margin: 0; color: var(--su-scuro-soft); font-size: 15px }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start }
.detail-grid h2 { font-size: 30px; margin-bottom: 22px }
.detail-grid .button { margin-top: 24px }

.cost-table { background: var(--fondo-alto); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 20px }
.cost-table div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px dotted var(--line-strong);
}
.cost-table div:last-child { border-bottom: 0 }
.cost-table dt { color: var(--ink-soft); font-size: 15px }
.cost-table dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums }

.notice { background: var(--viola-tenue); color: var(--ink); padding: 16px 18px; border-radius: var(--r-control) }

/* --- Testi lunghi -------------------------------------------------------- */

.editorial, .article { max-width: 760px }
.shell.editorial { max-width: none }              /* resta sul margine della griglia */
.shell.editorial > * { max-width: 760px }
.article { padding-block: clamp(48px, 6vw, 80px) }
.article h1 { font-size: clamp(40px, 5.2vw, 62px); margin-bottom: 24px }

.editorial h2, .article h2 { font-size: 30px; margin-top: 52px; margin-bottom: 16px }
.editorial > h2:first-child, .article > h2:first-child { margin-top: 0 }

.editorial p, .article p {
  font-size: 19px; line-height: 1.72;
  color: #3b365f;
  text-wrap: pretty;
}
.article .lead {
  font-size: 20px; line-height: 1.6;
  color: var(--ink-soft);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}

.article-cta {
  margin-top: 60px; padding: 32px;
  background: var(--fondo-basso);
  border-radius: var(--r-panel);
}
.article-cta h2 { margin: 0 0 20px; font-size: 26px }

/* --- Verifica copertura, pagina ------------------------------------------ */

.coverage-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 4vw, 60px); align-items: start }

.coverage-form {
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 30px;
  color: var(--ink);              /* la card resta chiara anche su fondo scuro */
}
.coverage-form .micro { color: var(--ink-soft) }
.coverage-form input { color: var(--ink) }
.coverage-form input::placeholder { color: var(--ink-soft); opacity: .75 }
.field { position: relative; margin-bottom: 22px }
.field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px }
.field input {
  width: 100%; min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--fondo);
  padding: 13px 15px;
}
.field input::placeholder { color: var(--placeholder) }
.field input:hover { border-color: var(--ink-soft) }
.field input:focus-visible { outline: 2px solid var(--viola); outline-offset: 1px; border-color: var(--viola) }
.field input:disabled { background: var(--fondo-basso); color: var(--placeholder); cursor: not-allowed }
.field.narrow { max-width: 220px }
.field-error { margin-top: 6px; min-height: 4px; font-size: 14px; color: var(--error) }
.field-error.ok { color: var(--live) }        /* conferma, non errore */
.coverage-form .button { width: 100%; margin-top: 4px }
.coverage-form .micro { margin: 14px 0 0; text-align: center }

.suggestions {
  position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--fondo-alto);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  max-height: 250px; overflow-y: auto;
  box-shadow: var(--lift-high);
  overscroll-behavior: contain;
}
.suggestions:empty { display: none }
.suggestions button {
  display: block; width: 100%; min-height: 44px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left; padding: 11px 15px;
  cursor: pointer;
}
.suggestions button:last-child { border-bottom: 0 }
.suggestions button:hover, .suggestions button[aria-selected='true'] { background: var(--viola-tenue); color: var(--viola) }
.suggestions button small { color: var(--ink-soft); font-size: 13px; margin-left: 6px }

.coverage-result {
  min-height: 430px;
  background: var(--scuro); color: var(--su-scuro);
  border-radius: var(--r-panel);
  padding: 34px;
}
/* --- Copertura in home ---------------------------------------------------
   Il form vive anche nella sezione scura della home: il pannello dei risultati
   non deve occupare spazio finche' non c'e' un esito, e da' sotto al form. */
.split-form { align-items: start }
.quiet-link {
  display: inline-flex; align-items: center;
  margin-top: 28px; padding: 12px 20px;
  color: var(--viola-chiaro); text-decoration: none; font-weight: 600;
  border: 1px solid rgba(196, 181, 253, .55);
  border-radius: var(--r-control);
  transition: background-color .16s ease, border-color .16s ease;
}
.quiet-link:hover { background: rgba(196, 181, 253, .14); border-color: var(--viola-chiaro) }

.coverage-result.inline { min-height: 0; padding: 0; background: transparent }
.coverage-result.inline:not(:empty) {
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(24px, 3vw, 32px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linea-scura);
}

.coverage-result .empty { height: 362px; display: grid; place-content: center; text-align: center; max-width: 42ch; margin-inline: auto }
.coverage-result .empty > span { font-size: 46px; color: var(--viola-chiaro); line-height: 1 }
.coverage-result .empty h2 { font-size: 26px; margin: 20px 0 10px }
.coverage-result .empty p { margin: 0; color: var(--su-scuro-soft); font-size: 16px }
.coverage-result h2 { color: var(--su-scuro) }
.technology-result {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-control);
  padding: 16px; margin-top: 14px;
}
.technology-result strong { color: var(--viola-chiaro) }

/* --- Esito della verifica copertura --------------------------------------
   Il riquadro e' su fondo verde scuro: i colori qui sotto sono scelti per
   restare leggibili su quel fondo, non sulla carta.                        */

.cov-indirizzo { margin: 6px 0 22px; color: var(--su-scuro-soft); font-size: 15px }

.cov-reti { display: grid; gap: 14px }
.cov-rete {
  padding: 18px 20px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: var(--r-card);
}
.cov-rete header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.cov-rete h3 { margin: 0; font-size: 21px; color: var(--su-scuro) }
.cov-esito {
  flex: none;
  padding: 6px 10px;
  font: 500 12px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .12em;
  border: 1px solid currentColor; border-radius: 999px;
}
.cov-rete.is-presente .cov-esito { color: var(--ok-scuro) }
.cov-rete.is-assente  .cov-esito { color: var(--su-scuro-dim) }
.cov-sintesi { margin: 10px 0 0; color: var(--su-scuro-soft); font-size: 15px }

.cov-voci { margin: 16px 0 0 }
.cov-voce {
  display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 4px 20px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.cov-voce dt { color: var(--su-scuro-dim); font-size: 14px }
.cov-voce dd { margin: 0; color: var(--su-scuro); font-size: 15px; font-weight: 500 }
.cov-voce dd small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; color: var(--su-scuro-dim) }
.cov-voce.is-si    dd { color: var(--ok-scuro) }
.cov-voce.is-no    dd { color: var(--su-scuro-dim); font-weight: 400 }
.cov-voce.is-forse dd { color: var(--forse-scuro) }

/* Perche' un esito negativo non e' una condanna: si spiega dentro la scheda */
.cov-spiega {
  margin: 16px 0 0; padding: 12px 14px;
  background: rgba(255, 255, 255, .06);
  border-left: 2px solid var(--viola-chiaro);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  color: var(--su-scuro-soft); font-size: 14px; line-height: 1.55;
}

.cov-conteggio, .cov-azione { margin: 18px 0 0; color: var(--su-scuro-soft); font-size: 14px }
.cov-azione a { color: var(--viola-chiaro); font-weight: 600 }

/* Il grezzo resta chiuso: serve a chi vuole controllare, non a chi legge */
.cov-grezzo { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14) }
.cov-grezzo summary { cursor: pointer; color: var(--su-scuro-soft); font-size: 14px }
.cov-grezzo pre {
  margin: 12px 0 0; padding: 14px;
  max-height: 320px; overflow: auto;
  background: rgba(0, 0, 0, .24); border-radius: var(--r-control);
  font-size: 12px; line-height: 1.5; color: var(--su-scuro-soft);
}
@media (max-width: 620px) {
  .cov-voce { grid-template-columns: 1fr }
  .cov-rete header { flex-direction: column; align-items: flex-start; gap: 8px }
}

/* --- Piede --------------------------------------------------------------- */

footer { background: var(--scuro-cupo); color: var(--su-scuro); padding: clamp(56px, 6vw, 76px) 0 26px }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 48px }
.footer-grid > div > img { width: auto; height: 28px; margin-bottom: 18px }
.footer-grid p, .footer-grid address { color: var(--su-scuro-soft); font-style: normal; font-size: 15px }
.footer-grid > div > p { max-width: 30ch; margin-bottom: 22px }
.footer-grid h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--viola-chiaro);
  margin: 0 0 14px;
}
.footer-grid > div > a:not(.button) {
  display: block; margin: 10px 0;
  color: var(--su-scuro-soft); font-size: 15px;
  text-decoration: none;
}
.footer-grid > div > a:not(.button):hover { color: var(--su-scuro); text-decoration: underline }

.legal-row {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; color: var(--su-scuro-dim);
}
.legal-row a { text-decoration: none }
.legal-row a:hover { color: var(--su-scuro); text-decoration: underline }
.legal-row button { border: 0; background: none; color: inherit; text-decoration: none; cursor: pointer; padding: 0; font: inherit }
.legal-row button:hover { color: var(--su-scuro) }

/* --- Consenso ------------------------------------------------------------ */

/* Il pannello nasce chiuso e lo apre il JS solo se manca la scelta.
   Prima 'display:flex' vinceva sull'attributo hidden del markup: il banner
   veniva disegnato a ogni caricamento e spariva un istante dopo, quando lo
   script differito girava. Il lampo era garantito per chi aveva gia' scelto. */
.consent { display: none }
.consent[hidden] { display: none }
.consent.is-open {
  position: fixed; left: 50%; bottom: 22px; z-index: 100;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 28px));
  display: flex; align-items: center; gap: 28px;
  background: var(--fondo-alto);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: 22px 24px;
  box-shadow: var(--lift-high);
  overscroll-behavior: contain;
}
.consent > div:first-child { flex: 1 }
.consent strong { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em }
.consent p { margin: 6px 0; font-size: 15px; color: var(--ink-soft) }
.consent a { font-size: 14px; color: var(--viola) }
.consent-actions { display: flex; gap: 10px; flex: none }

.mobile-call { display: none }

/* --- Adattamenti --------------------------------------------------------- */

@media (max-width: 1000px) {
  .header-inner nav, .header-call, .status.compact { display: none }
  .menu-button { display: block }
  .hero-grid, .split, .coverage-layout, .offer-detail, .detail-grid { grid-template-columns: 1fr }
  .hero-visual { display: none }
  .offer-grid, .operator-grid, .article-grid { grid-template-columns: repeat(2, 1fr) }
  .offer-detail aside { max-width: 420px }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .three { grid-template-columns: 1fr }
  .feature { padding: 28px 0 }
  .feature + .feature { padding-left: 0; border-left: 0; border-top: 1px solid var(--line) }
}

@media (max-width: 680px) {
  /* C'erano 56px di vuoto fra la testata e il riquadro dello stato: alzandolo
     il messaggio si legge subito, senza doverlo cercare. Deve stare qui, dopo
     la regola .hero, perche' fra media query a pari specificita' vince
     l'ultima scritta, non la piu' specifica. */
  .hero { padding-top: 24px }
  .status.grande { margin-bottom: 22px }
  /* Con logo ingrandito, pulsante operatori e Menu la riga non ci sta piu':
     si stringono spaziature e imbottiture, e il payoff cede per primo. */
  .header-inner { gap: 8px }
  .brand { min-width: 0 }
  .tagline { overflow: hidden; text-overflow: ellipsis }
  .menu-button { padding: 8px 10px; font-size: 15px }
  body { font-size: 16px; padding-bottom: 66px }
  .shell { width: min(100% - 32px, 1180px) }
  .site-header { height: 74px }
  .logo img { height: 30px }
  .tagline { font-size: 10px; letter-spacing: .12em }
  h1 { font-size: clamp(34px, 9vw, 46px) }
  .section-heading { display: block }
  .section-heading > p { margin-top: 16px }
  .section-heading > a { display: inline-block; margin-top: 18px }
  .offer-grid, .operator-grid, .article-grid { grid-template-columns: 1fr }
  .page-hero h1 { font-size: clamp(36px, 9.5vw, 46px) }

  /* Restano 4 colonne: con celle da ~80 px i marchi larghi vengono limitati
     dalla larghezza, quindi si abbassano gli altri per pareggiarli otticamente. */
  .operator-logos { gap: 22px 12px }
  .operator-logos a { min-height: 44px }
  .operator-logos img { height: 20px }
  .operator-logos img[src*="windtre"] { height: 27px }
  .operator-logos img[src*="eolo"]    { height: 23px }
  .operator-logos img[src*="iliad"]   { height: 19px }
  .footer-grid { grid-template-columns: 1fr; gap: 34px }
  .field.narrow { max-width: none }
  .editorial p, .article p { font-size: 18px }

  /* '.consent.is-open' vale due classi: una regola su '.consent' non lo
     batte nemmeno dentro una media query, e il pannello restava a colonne
     affiancate su schermo stretto. */
  .consent.is-open { bottom: 72px; display: block }
  .consent-actions { margin-top: 16px; display: grid }

  /* Compare scorrendo, non subito: all'apertura non copre il contenuto. */
  .mobile-call {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--fondo-alto);
    border-top: 1px solid var(--line-strong);
    padding: 9px max(14px, env(safe-area-inset-left));
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .24s ease;
    will-change: transform;
  }
  .mobile-call.is-visible { transform: translateY(0) }
  .mobile-call .button { width: 100%; min-height: 46px }
}

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

/* --- Speed test ----------------------------------------------------------- */

.speedtest {
  background: var(--fondo-alto);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 34px;
}

.st-dials {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
}
.st-dial { padding: 22px 22px 22px 0 }
.st-dial + .st-dial { padding-left: 22px; border-left: 1px solid var(--line) }
.st-dial span {
  display: block; margin-bottom: 10px;
  font: 500 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-soft);
}
.st-dial strong {
  display: block;
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600;
  line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.st-dial small { font-size: 13px; color: var(--ink-soft) }

.st-bar {
  height: 3px; margin: 26px 0 16px;
  background: var(--fondo-basso);
  border-radius: 999px;
  overflow: hidden;
}
.st-bar i {
  display: block; width: 0; height: 100%;
  background: var(--viola);
  transition: width .2s linear;
}

.st-status { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px }
.st-actions { display: flex; gap: 14px; flex-wrap: wrap }
.st-note { margin-top: 16px }
.st-cap { margin-top: 14px; color: var(--viola) }

.st-honesty { margin-top: 24px }
.st-honesty strong {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em;
}
.st-honesty p { margin: 0; font-size: 15px; color: var(--ink-soft) }

@media (max-width: 860px) {
  .speedtest { padding: 24px }
  .st-dials { grid-template-columns: repeat(2, 1fr) }
  .st-dial { padding: 18px 18px 18px 0 }
  .st-dial:nth-child(odd) { padding-left: 0; border-left: 0 }
  .st-dial:nth-child(n+3) { border-top: 1px solid var(--line) }
  .st-dial:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line) }
}