/* =============================================================================
   WSL SICUREZZA — listino.css
   Stile pagina Listino Prezzi. Coerente con tema Safety Glass di main.css.
   Dipende da main.css per: variabili CSS, nav, footer, .btn-primary,
   .btn-secondary, .section-label, .section-title, .section-body, .reveal.
   ============================================================================= */

/* ─── HERO ───────────────────────────────────────────────────────────────────
   Riusa le classi about-hero da about.css — stessa struttura hero secondaria.
   Aggiunge solo un override sul padding per dare respiro extra.
   --------------------------------------------------------------------------- */
.listino-hero {
  min-height: 60vh;
  background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  padding: 160px 80px 50px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: clip;
}

/* Glow decorativo in alto a destra — stesso pattern hero di index */
.listino-hero::before {
  content: '';
  position: absolute;
  top: -700px; right: -800px;
  width: 2000px; height: 2000px;
  border-radius: 500%;
  background: radial-gradient(circle, var(--glow-deep) 5%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.listino-hero-inner {
  width: 100%;
  max-width: 1440px;
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
}

/* ─── SEZIONI GENERALI ───────────────────────────────────────────────────────
   Contenitore base per ogni sezione della pagina.
   --dark: sfondo leggermente più scuro per alternare visivamente le sezioni.
   --------------------------------------------------------------------------- */
.listino-section {
  padding: 50px 80px;
  background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  position: relative;
  overflow: visible;
}

.listino-section--dark {
  background: color-mix(in srgb, var(--bg-deep) 98%, transparent);
}

/* Variante CTA centrata (sotto hero) */
.listino-section--cta {
  text-align: center;
  padding: 50px 80px;
}

/* Contenitore interno centrato con larghezza massima */
.listino-container {
  max-width: 1440px;
  margin: 0 auto;
}

/* Intestazione di sezione: label arancione + titolo + corpo */
.listino-section-header {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto 64px auto;
}

.listino-section-header .section-body {
  max-width: 900px;
}

/* ─── GRIGLIA DOCUMENTI SINGOLI ──────────────────────────────────────────────
   3 colonne. Ogni card è un documento con intestazione, descrizione,
   tabella prezzi e nota di consegna.
   --------------------------------------------------------------------------- */
.listino-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

/* Card documento — stile vetro Safety Glass */
.listino-doc-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.20) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 25%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.listino-doc-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

/* Variante full-width (es. card Tempi di consegna) */
.listino-doc-card--full {
  width: 100%;
}


/* ─── INTESTAZIONE CARD DOCUMENTO ────────────────────────────────────────── */

/* Riga icona + testi identificativi */
.listino-doc-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Quadrato icona verde — stesso pattern track-icon */
.listino-doc-icon {
  width: 44px;
  height: 44px;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bg-deep);
}

/* Variante icona gialla per card valutazioni speciali */
.listino-doc-icon--yellow {
  background: var(--accent-detail);
}

/* Etichetta normativa piccola sopra il nome */
.listino-doc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 4px;
}

/* Nome breve del documento — es. "DVR", "HACCP" */
.listino-doc-name {
  font-family: var(--font-titoli);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 2px;
}

/* Nome esteso sotto il nome breve */
.listino-doc-fullname {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Descrizione testuale del documento */
.listino-doc-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.75;
  flex-grow: 1; /* spinge la tabella prezzi verso il basso */
}

/* ─── TABELLA PREZZI ─────────────────────────────────────────────────────────
   Lista di righe fascia/prezzo separati da una linea sottile.
   --------------------------------------------------------------------------- */
.listino-price-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 15%, transparent);
}

/* Riga singola fascia + prezzo */
.listino-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 10%, transparent);
}

.listino-price-row:last-child {
  border-bottom: none;
}

/* Fascia (es. "Micro 1–10 dip.") */
.listino-price-tier {
  font-family: var(--font-corpo);
  font-size: 14px;
  color: var(--text-base);
}

/* ─── TABELLA TEMPI DI CONSEGNA ──────────────────────────────────────────────
   Griglia CSS a 3 colonne. Usata solo nella card Tempi di consegna.
   --------------------------------------------------------------------------- */
.listino-delivery-table {
  display: grid;
  grid-template-columns: 1.5fr 1fr 2fr;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 20%, transparent);
}

.listino-delivery-row {
  display: contents;
}

.listino-delivery-row > span {
  font-family: var(--font-corpo);
  font-size: 14px;
  color: var(--text-base);
  padding: 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 10%, transparent);
}

.listino-delivery-row--header > span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-label);
}

.listino-delivery-row:last-child > span {
  border-bottom: none;
}

.listino-delivery-note {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-detail);
  background: color-mix(in srgb, var(--accent-detail) 5%, transparent);
  font-family: var(--font-corpo);
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Testo in corsivo dentro la fascia (numero dipendenti) */
.listino-price-tier em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
}

/* Valore prezzo — verde, in evidenza */
.listino-price-value {
  font-family: var(--font-titoli);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
}

/* Prezzo su richiesta — muted, non verde */
.listino-price-onrequest {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Nota consegna e urgenza in fondo alla card */
.listino-doc-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Nota urgenza — arancione */
.listino-urgency {
  color: var(--accent-label);
}

/* Lista valutazioni specifiche (card rischi specifici) */
.listino-specific-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 15%, transparent);
}

.listino-specific-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 10%, transparent);
  font-size: 13px;
}

.listino-specific-list li:last-child {
  border-bottom: none;
}

.listino-specific-list li span:first-child {
  color: var(--text-base);
}

.listino-specific-list li span:last-child {
  font-family: var(--font-titoli);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
}

/* ─── NOTA INFORMATIVA ───────────────────────────────────────────────────────
   Box orizzontale con icona + testo — per note legali o chiarimenti.
   --------------------------------------------------------------------------- */
.listino-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--bg-deep) 50%, transparent);
  border: 0.7px solid color-mix(in srgb, var(--border-base) 15%, transparent);
  border-left: 2px solid var(--accent-primary);
  margin-top: 8px;
}

.listino-note svg {
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.listino-note p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

.listino-note p strong {
  color: var(--text-base);
}

.listino-note p a {
  color: var(--accent-primary);
  text-decoration: none;
}

.listino-note p a:hover {
  text-decoration: underline;
}

/* ─── PACCHETTI ──────────────────────────────────────────────────────────────
   Tre card affiancate. Quella centrale (--featured) è evidenziata con
   bordo verde e badge "Più scelto".
   --------------------------------------------------------------------------- */
.listino-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  align-items: stretch;
}

/* Card pacchetto base */
.listino-package-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.20) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 25%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Card evidenziata — bordo verde + glow più intenso */
.listino-package-card--featured {
  border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 40px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.listino-package-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

/* Badge "Più scelto" in cima alla card featured */
.listino-package-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-primary);
  color: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 16px;
  white-space: nowrap;
}

/* Nome livello pacchetto (Essential, Professional, Premium) */
.listino-package-tier {
  font-family: var(--font-titoli);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-bright);
}

/* Blocco prezzo grande */
.listino-package-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 15%, transparent);
}

/* Cifra principale */
.listino-package-amount {
  font-family: var(--font-titoli);
  font-size: 52px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
}

/* Periodo (es. "1° anno tutto incluso") */
.listino-package-period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Testo descrittivo del pacchetto */
.listino-package-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.7;
}

/* Lista voce incluse — con checkmark verde */
.listino-package-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.listino-package-items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-base);
  line-height: 1.5;
}

.listino-package-items li svg {
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Bottone CTA del pacchetto — full width */
.listino-package-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

/* ─── GRIGLIA ALTRI SERVIZI ──────────────────────────────────────────────────
   3 colonne di card servizi senza prezzo fisso.
   Ogni card: icona, nome, descrizione, lista voci, link contatto.
   --------------------------------------------------------------------------- */
.listino-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card servizio */
.listino-service-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.02) 55%,
    rgba(0,0,0,0.08) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.listino-service-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

/* Card B2B — bordo giallo per distinguerla visivamente */
.listino-service-card--b2b {
  border-color: color-mix(in srgb, var(--accent-detail) 20%, transparent);
}

.listino-service-card--b2b:hover {
  border-color: color-mix(in srgb, var(--accent-detail) 50%, transparent);
}

/* Icona quadrata verde */
.listino-service-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  flex-shrink: 0;
}

/* Variante icona gialla (card B2B) */
.listino-service-icon--yellow {
  background: var(--accent-detail);
}

/* Nome servizio */
.listino-service-name {
  font-family: var(--font-titoli);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
}

/* Descrizione testuale */
.listino-service-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.75;
  flex-grow: 1;
}

/* Lista voci incluse — con trattino verde */
.listino-service-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 12%, transparent);
}

.listino-service-includes li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Trattino verde prima di ogni voce */
.listino-service-includes li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--accent-primary);
  flex-shrink: 0;
}

/* Link CTA in fondo alla card */
.listino-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
  text-decoration: none;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 12%, transparent);
  transition: gap 0.2s, opacity 0.2s;
  margin-top: auto;
}

.listino-service-cta:hover {
  gap: 14px;
  opacity: 0.85;
}

/* Variante gialla per la card B2B */
.listino-service-cta--yellow {
  color: var(--accent-detail);
}

/* ─── CTA FINALE ─────────────────────────────────────────────────────────────
   Sezione conclusiva con sfondo verde scuro, titolo e bottone.
   Stesso stile della sezione final-cta di index.html.
   --------------------------------------------------------------------------- */
.listino-cta-final {
  background: color-mix(in srgb, var(--accent-primary-dark) 80%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
  );
  border-top: 0.7px solid color-mix(in srgb, var(--border-base) 40%, transparent);
  padding: 50px 80px;
}

.listino-cta-final-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Sottotitolo hero listino — variante con bordo giallo, font ridotto rispetto alla versione about */
.listino-subtitle {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.75;
  max-width: 900px;
  border-top: 2px solid var(--accent-detail);
  padding-top: 20px;
  margin: 24px auto 0;
}

/* ─── INTRO BOX ──────────────────────────────────────────────────────────────
   Box disclaimer 
   --------------------------------------------------------------------------- */
.listino-intro-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 28px;
  background: color-mix(in srgb, var(--bg-deep) 50%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.03) 50%,
    rgba(0,0,0,0.15) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 20%, transparent);
  border-top: 1px solid var(--accent-detail);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 60%, transparent);
  margin-bottom: 50px;
  text-align: center;
}

.listino-intro-box p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.listino-intro-box p strong {
  color: var(--text-base);
}

/* ─── RSPP TIER GRID ─────────────────────────────────────────────────────────
   3 card affiancate per le fasce di prezzo RSPP. Struttura più semplice
   delle package card: nessuna lista, solo fascia + dipendenti + prezzo.
   --------------------------------------------------------------------------- */
.listino-rspp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.listino-rspp-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.20) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 25%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.listino-rspp-card--featured {
  border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.listino-rspp-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

.listino-rspp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.listino-rspp-name {
  font-family: var(--font-titoli);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
}

.listino-rspp-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-primary);
  color: var(--bg-deep);
  padding: 3px 10px;
  white-space: nowrap;
}

.listino-rspp-size {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.listino-rspp-price {
  font-family: var(--font-titoli);
  font-size: 40px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
  margin-top: 8px;
}

.listino-rspp-price span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ─── INCLUDE BOX ────────────────────────────────────────────────────────────
   Box con lista voci incluse in tutte le fasce + nota extra servizi.
   --------------------------------------------------------------------------- */
.listino-include-box {
  background: color-mix(in srgb, var(--bg-deep) 50%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.03) 50%,
    rgba(0,0,0,0.15) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 60%, transparent);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.listino-include-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-label);
}

.listino-include-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 32px;
}

.listino-include-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-base);
  line-height: 1.5;
}

.listino-include-list li svg {
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.listino-include-extra {
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.listino-include-extra strong {
  color: var(--text-base);
}

/* ─── RISCHI SPECIFICI ───────────────────────────────────────────────────────
   Griglia 4 colonne di card compatte per valutazioni rischi specifiche.
   --------------------------------------------------------------------------- */
.listino-rischi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.listino-rischio-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.03) 50%,
    rgba(0,0,0,0.15) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 60%, transparent);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.listino-rischio-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

.listino-rischio-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-base);
  line-height: 1.4;
}

.listino-rischio-range {
  font-family: var(--font-titoli);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
}

.listino-rischio-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* ─── CONDIZIONI COMMERCIALI ─────────────────────────────────────────────────
   Griglia 3 colonne di note card con label + valore.
   --------------------------------------------------------------------------- */
.listino-conditions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.listino-condition-card {
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.03) 50%,
    rgba(0,0,0,0.15) 100%
  );
  border: 0.7px solid color-mix(in srgb, var(--border-base) 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 60%, transparent);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.listino-condition-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 30px color-mix(in srgb, var(--glow-base) 30%, transparent);
}

.listino-condition-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-label);
}

.listino-condition-value {
  font-size: 14px;
  color: var(--text-base);
  line-height: 1.6;
}

.listino-condition-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ─── DISCLAIMER ─────────────────────────────────────────────────────────────
   Nota legale in fondo alla sezione condizioni commerciali.
   --------------------------------------------------------------------------- */
.listino-disclaimer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
  letter-spacing: 0.02em;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--border-base) 12%, transparent);
}

/* ─── PACKAGE RENEWAL / SAVING ───────────────────────────────────────────────
   Righe aggiuntive sotto il prezzo principale nei pacchetti aggiornati.
   --------------------------------------------------------------------------- */
.listino-package-renewal {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.listino-package-saving {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-primary);
  letter-spacing: 0.02em;
}