/* Pagine pubbliche delle dirette (2.54). Il mondo dei cataloghi Sale Scuola Viaggi 2026-27: fondo azzurro, riquadri
   bianchi molto arrotondati con il quarto di cerchio arancione, blocco della data arancione, titoli in Geometos Rounded
   maiuscolo, testo in Montserrat, dati in Barlow Semi Condensed. Niente carattere a mano (14/10/2026, richiesta
   dell'utente): la nota delle dirette della 2.54 è in Barlow.
   Contrasti (WCAG AA): inchiostro su azzurro 10,5:1; inchiostro su arancio 5,4:1; bianco su petrolio 5,7:1;
   petrolio su bianco 5,7:1; ardesia su bianco 5,2:1. Il bianco su arancio (3,0:1) non si usa per il testo. */

@font-face { font-family: 'Geometos Rounded'; src: url('font/geometos-rounded-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('font/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('font/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('font/barlowsc-normal-500-latin-5.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('font/barlowsc-normal-600-latin-7.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('font/barlowsc-normal-700-latin-9.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --arancio: #EE6F2C;
  --arancio-chiaro: #F4A175;
  --pesca: #FBD0B2;
  --petrolio: #2D6D8C;
  --ardesia: #616E7D;
  --azzurro: #C1D2E0;
  --azzurro-box: #B2C7D8;
  --inchiostro: #231F20;
  --bianco: #FFFFFF;
  --pesca-velo: rgba(251, 208, 178, 0.45);
  --f-titoli: 'Geometos Rounded', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-testo: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-dati: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-mano: var(--f-dati); /* 14/10: niente più carattere a mano */
  --r-grande: 28px;
  --r: 16px;
  --r-campo: 14px;
  --margine: 16px;
  --larghezza: 1200px;
  --ombra: 0 22px 44px -24px rgba(35, 31, 32, 0.38), 0 2px 6px rgba(35, 31, 32, 0.08);
  --uscita: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  scrollbar-color: var(--petrolio) var(--azzurro);
}

body {
  margin: 0;
  background: var(--azzurro);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--arancio);
  overflow-x: clip;
}

::selection { background: var(--pesca); color: var(--inchiostro); }

img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--arancio);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; border-radius: 6px; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

[hidden] { display: none !important; }

/* Testo solo per i lettori di schermo (per esempio «4 scuole trovate»). */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Salta al modulo: visibile solo con la tastiera. */
.salta {
  position: absolute;
  left: var(--margine);
  top: -100px;
  z-index: 40;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-weight: 700;
  text-decoration: none;
}
.salta:focus { top: 12px; }

/* ---------------------------------------------------------------- testata e piede */

.testata { max-width: var(--larghezza); margin: 0 auto; padding: 20px var(--margine) 4px; }
.testata__logo { display: inline-block; border-radius: 8px; }
.testata__logo img { width: 168px; }

.piede { margin-top: 24px; background: var(--petrolio); color: var(--bianco); }
.piede__dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 32px var(--margine) calc(32px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  font-size: 1rem;
}
.piede__logo { width: 150px; }
.piede__contatti { margin: 0; display: grid; gap: 4px; }
.piede__legale { margin: 0; }
.piede a { color: var(--bianco); text-decoration-color: var(--pesca); }
.piede :focus-visible { outline-color: var(--bianco); }

/* ---------------------------------------------------------------- la diretta è in onda */

.in-onda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: calc(var(--larghezza) - 2 * var(--margine));
  margin: 12px var(--margine) 0;
  padding: 14px 20px;
  border-radius: var(--r);
  background: var(--inchiostro);
  color: var(--bianco);
  font-weight: 700;
  text-decoration: none;
}
@media (min-width: 1232px) { .in-onda { margin-left: auto; margin-right: auto; } }
.in-onda__vai { display: inline-flex; align-items: center; gap: 8px; color: var(--arancio); }
.in-onda--finita { background: var(--petrolio); }
.in-onda--finita .in-onda__vai { color: var(--bianco); }
.in-onda__punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--arancio);
  animation: battito 1.6s var(--uscita) infinite;
}
@keyframes battito {
  0% { box-shadow: 0 0 0 0 rgba(238, 111, 44, 0.65); }
  100% { box-shadow: 0 0 0 12px rgba(238, 111, 44, 0); }
}

/* ---------------------------------------------------------------- impianto della pagina della diretta */

.impianto {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 8px var(--margine) 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "apertura" "modulo" "blocchi";
  gap: 32px;
}
.apertura { grid-area: apertura; min-width: 0; }
.riquadro--modulo { grid-area: modulo; }
.blocchi { grid-area: blocchi; display: grid; gap: 44px; min-width: 0; }

@media (min-width: 1024px) {
  .testata { padding-top: 28px; }
  .testata__logo img { width: 210px; }
  .impianto {
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-rows: auto 1fr; /* lo spazio in più del modulo va ai blocchi, non sotto i benefici */
    grid-template-areas: "apertura modulo" "blocchi modulo";
    column-gap: 64px;
    row-gap: 56px;
    align-items: start;
    padding-top: 28px;
  }
  .apertura .azione--telefono { display: none; }
}

h1 {
  margin: 12px 0 0;
  font-family: var(--f-titoli);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.sottotitolo { margin: 18px 0 0; max-width: 58ch; font-size: 1.125rem; line-height: 1.55; }

/* Il blocco della data: il segno della pagina. */
.data {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  margin: 26px 0 0;
  padding: 16px 24px 16px 22px;
  border-radius: 22px;
  background: var(--arancio);
  color: var(--inchiostro);
  font-family: var(--f-dati);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.data__giorno { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.8rem); font-weight: 700; line-height: 1.15; }
.data__ora { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.data--piccola { margin-top: 14px; padding: 12px 18px; border-radius: 18px; }
.data--piccola .data__giorno { font-size: 1.25rem; }

.destinatari { margin: 24px 0 0; max-width: 60ch; }
.destinatari__per {
  margin-right: 4px;
  font-family: var(--f-dati);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.benefici { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; max-width: 62ch; }
.benefici li { display: flex; align-items: flex-start; gap: 14px; }
.benefici__segno {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bianco);
  color: var(--inchiostro);
}
.benefici__segno .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- azioni */

.azione, .invia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--bianco);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--uscita), transform 0.2s var(--uscita);
}
.azione .ic, .invia .ic { color: var(--arancio); transition: transform 0.2s var(--uscita); }
.azione:hover, .invia:hover { background: var(--petrolio); }
.azione:hover .ic, .invia:hover .ic { color: var(--bianco); transform: translateX(3px); }
.azione:active, .invia:active { transform: translateY(1px); }
.azione--telefono { width: 100%; margin-top: 28px; }
@media (max-width: 400px) { .azione, .invia { padding-left: 18px; padding-right: 18px; } }
.azione--piccola { min-height: 46px; padding: 10px 22px; font-size: 1rem; }

.secondaria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
}
.secondaria .ic { width: 1.1em; height: 1.1em; }

/* ---------------------------------------------------------------- riquadri bianchi */

.riquadro {
  position: relative;
  padding: 30px 20px 26px;
  border-radius: var(--r-grande);
  background: var(--bianco);
  box-shadow: var(--ombra);
  overflow: hidden;
}
/* Il quarto di cerchio arancione dei cataloghi, nell'angolo in alto a destra. */
.riquadro::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 76px;
  height: 76px;
  border-bottom-left-radius: 100%;
  background: var(--arancio);
  pointer-events: none;
}
.riquadro--video > :last-child { margin-right: 52px; } /* il quarto di cerchio, in basso a destra */
/* Nella conferma il quarto di cerchio va in basso: in alto c'è l'azione del momento, a tutta larghezza. */
.riquadro--conferma::before { top: auto; bottom: 0; border-bottom-left-radius: 0; border-top-left-radius: 100%; width: 64px; height: 64px; }
.riquadro--conferma { padding-bottom: 34px; }
@media (min-width: 760px) { .riquadro { padding: 38px 36px 32px; } }

.riquadro h2 {
  margin: 0;
  padding-right: 64px;
  font-family: var(--f-titoli);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--petrolio);
}
.riquadro--modulo > p { margin: 14px 0 0; }
.riquadro__testa { padding-right: 56px; }
/* Nella pagina senza diretta il pulsante sta sopra il quarto di cerchio. */
.riquadro--conferma > .azione:last-child { margin-bottom: 30px; }
.riquadro--modulo > .azione { width: 100%; margin-top: 22px; }

.nota-mano {
  margin: 8px 0 0;
  font-family: var(--f-mano);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--petrolio);
  transform-origin: left center;
}

/* ---------------------------------------------------------------- il modulo */

.iscrizione { display: grid; gap: 20px; margin-top: 24px; }
.riga-2 { display: grid; gap: 20px; }
@media (min-width: 520px) { .riga-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.facoltativo { font-weight: 400; color: var(--ardesia); }
.aiuto { margin: -2px 0 2px; font-size: 1rem; line-height: 1.45; color: var(--ardesia); }
.scuola-scelta { margin: 0; }

.iscrizione input[type="text"],
.iscrizione input[type="email"],
.iscrizione input[type="tel"],
.iscrizione select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--ardesia);
  border-radius: var(--r-campo);
  background-color: var(--bianco);
  color: var(--inchiostro);
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  transition: border-color 0.15s ease-out;
}
.iscrizione select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  text-overflow: ellipsis;
}
.iscrizione select:disabled { color: var(--ardesia); background-color: var(--azzurro); cursor: not-allowed; }
.iscrizione input:hover, .iscrizione select:hover { border-color: var(--inchiostro); }
.iscrizione input:focus-visible, .iscrizione select:focus-visible {
  outline: 3px solid var(--arancio);
  outline-offset: 1px;
  border-color: var(--inchiostro);
  border-radius: var(--r-campo);
}

.iscrizione .campo--errore input, .iscrizione .campo--errore select { border: 2px solid var(--arancio); background-color: var(--pesca-velo); }
.errore {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.errore .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--arancio); }

.avviso-modulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--pesca-velo);
  font-weight: 700;
}
.avviso-modulo .ic { color: var(--arancio); margin-top: 2px; }
.avviso-modulo p { margin: 0; }

/* Il campo trappola: fuori dallo schermo, per i programmi automatici. */
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.gruppo { display: grid; gap: 20px; min-width: 0; margin: 4px 0 0; padding: 18px 0 0; border: 0; border-top: 2px solid var(--arancio-chiaro); }
/* Regione e provincia una sotto l'altra: nel riquadro largo 440px «Prima la regione» non ci starebbe. */
.gruppo .riga-2 { grid-template-columns: minmax(0, 1fr); }
/* Revisione 2.56: solo la legenda del gruppo (non quella di una domanda dentro il gruppo, come il voto del modulo presenze). */
.gruppo > legend {
  float: left;
  width: 100%;
  margin: 0 0 -6px;
  padding: 0;
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--petrolio);
}
.consensi { display: grid; gap: 14px; padding-top: 18px; border-top: 2px solid var(--arancio-chiaro); }
.consenso {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  font-size: 1rem;
  line-height: 1.5;
}
.consenso__link { grid-column: 2; justify-self: start; padding: 4px 0; font-weight: 700; }
.consenso input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--petrolio); cursor: pointer; }
.consenso label { cursor: pointer; }
.consenso .errore { grid-column: 2; }
.consenso.campo--errore input { outline: 2px solid var(--arancio); outline-offset: 2px; }

.invia { width: 100%; min-height: 58px; margin-top: 4px; font-size: 1.0625rem; }
.invia[aria-busy="true"] { cursor: progress; background: var(--petrolio); }
.invia[aria-busy="true"] .ic { display: none; }
.invia[aria-busy="true"]::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--bianco);
  border-radius: 50%;
  animation: gira 0.8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.dopo-invio { margin: -6px 0 0; font-size: 1rem; line-height: 1.45; color: var(--ardesia); text-align: center; }

/* L'elenco delle scuole della provincia (combobox). */
.scelta-scuola { position: relative; }
.elenco-scuole {
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  max-height: 300px;
  overflow: auto;
  list-style: none;
  border: 1.5px solid var(--inchiostro);
  border-radius: var(--r-campo);
  background: var(--bianco);
  box-shadow: var(--ombra);
  overscroll-behavior: contain;
}
.elenco-scuole [role="option"] { display: grid; padding: 10px 12px; border-radius: 10px; line-height: 1.35; cursor: pointer; }
.elenco-scuole [role="option"] small { font-size: 1rem; color: var(--ardesia); }
.elenco-scuole [role="option"][aria-selected="true"], .elenco-scuole [role="option"]:hover { background: var(--pesca); }
.elenco-scuole .elenco-scuole__nota { padding: 10px 12px; font-size: 1rem; color: var(--ardesia); cursor: default; }
.elenco-scuole .elenco-scuole__nota:hover { background: none; }

/* ---------------------------------------------------------------- i blocchi di contenuto */

.blocco h2 {
  margin: 0 0 16px;
  font-family: var(--f-titoli);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.95rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}
.blocco p { margin: 0 0 14px; max-width: 66ch; }
.blocco p:last-child { margin-bottom: 0; }

/* I fili arancio chiaro dei cataloghi tra una riga e l'altra. */
.fili { list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.fili li { padding: 14px 0; border-top: 2px solid var(--arancio-chiaro); }
.fili li:last-child { border-bottom: 2px solid var(--arancio-chiaro); }

.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 66ch; }
.kit li { display: flex; align-items: flex-start; gap: 12px; }
.kit .ic { margin-top: 2px; color: var(--petrolio); }

.relatori { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .relatori { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.relatore { display: flex; align-items: center; gap: 14px; min-width: 0; }
.relatore__foto { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bianco); }
.relatore__foto--iniziali {
  display: grid;
  place-items: center;
  background: var(--petrolio);
  color: var(--bianco);
  font-family: var(--f-titoli);
  font-size: 1.4rem;
}
.relatore__testo { display: grid; min-width: 0; }
.relatore__testo span { font-size: 1rem; }

/* ---------------------------------------------------------------- barra in basso sul telefono */

.barra-iscriviti {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--margine) calc(10px + env(safe-area-inset-bottom));
  background: var(--bianco);
  box-shadow: 0 -10px 28px -14px rgba(35, 31, 32, 0.4);
  transform: translateY(110%);
  transition: transform 0.3s var(--uscita);
}
.barra-iscriviti.visibile { transform: translateY(0); }
.barra-iscriviti__data {
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
body.con-barra .piede__dentro { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .barra-iscriviti { display: none !important; } }

/* La pagina senza diretta (404, errore): il piede chiude lo schermo. */
body.pagina-vuota { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.pagina-vuota > * { width: 100%; }
body.pagina-vuota > main { flex: 1 0 auto; }
body.pagina-vuota .conferma { align-content: start; }
/* Diretta conclusa su desktop: lo dice già il riquadro a destra, la fascia in cima serve sul telefono. */
@media (min-width: 1024px) { .momento-conclusa .in-onda--finita { display: none; } }

/* ---------------------------------------------------------------- pagina di conferma */

.conferma { max-width: 760px; margin: 0 auto; padding: 8px var(--margine) 56px; display: grid; gap: 24px; }
.momento-in_corso .conferma { max-width: 1040px; }
.calendario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 24px; }
.calendario .secondaria { margin-top: 0; padding: 12px 0; }
@media (min-width: 1024px) { .conferma { padding-top: 24px; } }

.riquadro--conferma h1 {
  margin: 0;
  font-size: clamp(1.625rem, 1.1rem + 2.4vw, 2.6rem);
}
.riquadro--video h1 { padding-right: 0; }
.riquadro--conferma > .azione { margin-top: 24px; }
.in-onda-pastiglia.in-onda-pastiglia--attesa { background: var(--petrolio); }
.riquadro--conferma .azione .ic { width: 1.35em; height: 1.35em; }

.esito {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: rgba(193, 210, 224, 0.55);
}
.esito .ic {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: var(--petrolio);
  color: var(--bianco);
}
.esito .ic path { stroke-dasharray: 24; stroke-dashoffset: 0; animation: disegna 0.6s 0.15s var(--uscita) both; }
@keyframes disegna { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.riquadro--video .esito { margin: 20px 0 0; }
.riquadro--conferma .conto { margin-right: 56px; }

.conto {
  margin: 16px 0 0;
  font-family: var(--f-dati);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.in-onda-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.in-onda-pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.in-onda-riga .data { margin: 0; }

.conferma__testa { padding-top: 24px; }
.nota { margin: 12px 0 0; font-size: 1rem; color: var(--ardesia); }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  background: var(--inchiostro);
  overflow: hidden;
}
.riquadro--video > .video:first-child { margin: -30px -20px 0; border-radius: var(--r-grande) var(--r-grande) 0 0; }
@media (min-width: 760px) { .riquadro--video > .video:first-child { margin: -38px -36px 0; } }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__anteprima {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--petrolio);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.video__anteprima img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--uscita); }
.video__anteprima:hover img { transform: scale(1.02); }
.video__anteprima:focus-visible { outline: 4px solid var(--arancio); outline-offset: -4px; border-radius: inherit; }
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 14px 20px;
  border-radius: 999px;
  background: var(--arancio);
  color: var(--inchiostro);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(35, 31, 32, 0.6);
}
.ic-play { width: 22px; height: 22px; fill: currentColor; }
.video--vuoto { display: grid; place-items: center; padding: 24px; background: var(--azzurro-box); color: var(--inchiostro); text-align: center; }
.video--vuoto p { margin: 0; max-width: 32ch; font-weight: 700; }
.video--attesa img { width: 100%; height: 100%; object-fit: cover; }
/* Senza anteprima, prima della diretta: una fascia con giorno e ora, non un rettangolo vuoto. */
.video--attesa.video--vuoto { aspect-ratio: auto; padding: 26px 20px; }
/* La registrazione senza anteprima: una fascia con il pulsante, non un rettangolo vuoto. */
.video.video--senza-anteprima { aspect-ratio: auto; }
.video--senza-anteprima .video__anteprima { position: static; display: grid; place-items: center; min-height: 0; padding: 30px 20px; }
.video--senza-anteprima .video__play { position: static; transform: none; }
.video--attesa:not(.video--vuoto) .video__quando {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bianco);
  color: var(--inchiostro);
  font-weight: 700;
}

.blocco--bianco { padding: 26px 20px; border-radius: var(--r-grande); background: var(--bianco); }
@media (min-width: 760px) { .blocco--bianco { padding: 32px 36px; } }
.blocco--bianco h2 { color: var(--petrolio); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); }
.blocco--bianco .video { margin-top: 4px; }

.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.passi li { display: flex; align-items: flex-start; gap: 12px; }
.passi .ic { margin-top: 2px; color: var(--petrolio); }
.passi a { display: inline-block; padding: 10px 0; margin: -10px 0; }

.collegamenti { list-style: none; margin: 0; padding: 0; }
.collegamenti li + li { border-top: 2px solid var(--arancio-chiaro); }
.collegamenti a { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-weight: 700; text-decoration: none; }
.collegamenti a span { flex: 0 1 auto; text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.collegamenti a:hover span { text-decoration-color: currentColor; }
.collegamenti .ic { color: var(--petrolio); }

/* ---------------------------------------------------------------- 2.56: moduli per pubblico, Info extra, kit, edizioni */

/* La domanda a scelta del modulo INPS: le tre risposte come pastiglie grandi, da toccare anche sul telefono. */
.domanda { margin: 0; padding: 0; border: 0; min-width: 0; }
.domanda legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.scelte { display: flex; flex-wrap: wrap; gap: 10px; }
.scelta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px 10px 14px;
  border: 1.5px solid var(--inchiostro);
  border-radius: 999px;
  background: var(--bianco);
  font-weight: 700;
  cursor: pointer;
}
.scelta input { width: 20px; height: 20px; margin: 0; accent-color: var(--petrolio); cursor: pointer; }
.scelta:has(input:checked) { background: var(--pesca); border-color: var(--petrolio); }
.scelta:has(input:focus-visible) { outline: 3px solid var(--petrolio); outline-offset: 2px; }
.domanda.campo--errore .scelta { border-color: var(--arancio); border-width: 2px; }

/* Info extra: HTML ripulito dal server (titoletti, grassetto, corsivo, elenchi, link). */
.extra h3, .extra h4 { margin: 18px 0 10px; font-family: var(--f-dati); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--petrolio); line-height: 1.2; }
.extra h3 { font-size: 1.25rem; }
.extra h4 { font-size: 1.0625rem; }
.extra > :first-child, .extra > .solo-lettori + * { margin-top: 0; }
.extra ul, .extra ol { margin: 0 0 14px; padding-left: 1.3em; max-width: 66ch; }
.extra li { margin: 6px 0; }
.extra li::marker { color: var(--arancio); font-weight: 700; }
.extra a { font-weight: 700; color: var(--inchiostro); text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.extra a:hover { text-decoration-color: currentColor; }
.extra strong { font-weight: 700; }

/* Il kit della conferma: il tipo sotto il nome, in piccolo. */
/* Il sottolineato solo sul nome: il tipo sotto resta pulito. */
.kit-link a .kit-link__voce { display: grid; gap: 2px; text-decoration: none; }
.kit-link a small { font-family: var(--f-dati); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; color: var(--ardesia); text-decoration: none; }
.kit-link a > .ic:last-child { margin-left: auto; }

/* Le altre edizioni sulla pagina della diretta. */
.blocco__sotto { margin: 18px 0 4px; font-family: var(--f-dati); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--petrolio); }
.blocco__sotto:first-of-type { margin-top: 0; }
.edizioni a span b { font-weight: 700; }
.edizioni a > .ic:last-child { margin-left: auto; }

/* ---------------------------------------------------------------- 2.56, blocco C: il modulo presenze «Sono presente» */

/* Sulla conferma, mentre il modulo è aperto: il riquadro con l'azione, come gli altri bianchi. */
.presenza-invito > p { margin: 12px 0 0; max-width: 60ch; }
.presenza-invito > .azione { margin-top: 18px; }
.riquadro--presenza h1 { padding-right: 56px; }
.presenza__diretta { margin: 10px 0 0; font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.presenza__intro { margin: 16px 0 0; max-width: 62ch; }
.riquadro--presenza .esito { margin: 18px 0 0; }
.presenza__esito { margin: 20px 0 6px; }
.presenza__stato { margin: 18px 0 6px; max-width: 60ch; }
.presenza__aiuto { margin: -10px 0 0; }
/* Revisione 2.56: «Sei tu, Nome?» prima di mostrare i dati di un link personale o del cookie. */
.presenza-chi { margin: 22px 0 6px; padding: 18px 20px 20px; border-radius: var(--r); border-left: 6px solid var(--arancio); background: rgba(193, 210, 224, 0.55); }
.presenza-chi h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.presenza-chi p { margin: 10px 0 0; max-width: 62ch; }
.presenza-chi__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 18px; }
.presenza-chi__azioni .azione, .presenza-chi__azioni .secondaria { margin-top: 0; }
.presenza .gruppo > legend .facoltativo { font-family: var(--f-testo); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ardesia); }
/* Le risposte del feedback: aree di testo come gli altri campi. */
.iscrizione textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1.5px solid var(--ardesia);
  border-radius: var(--r-campo);
  background-color: var(--bianco);
  color: var(--inchiostro);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  transition: border-color 0.15s ease-out;
}
.iscrizione textarea:hover { border-color: var(--inchiostro); }
.iscrizione textarea:focus-visible { outline: 3px solid var(--arancio); outline-offset: 1px; border-color: var(--inchiostro); }
.iscrizione .campo--errore textarea { border: 2px solid var(--arancio); background-color: var(--pesca-velo); }
/* Il voto: cinque pastiglie tonde, da toccare anche sul telefono. */
.scelte--voto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.scelta--voto { justify-content: center; gap: 6px; padding: 10px 6px; font-family: var(--f-dati); font-size: 1.125rem; }
.scelta--voto input { width: 18px; height: 18px; }


/* ---------------------------------------------------------------- 2.58, blocco B: richieste del marketing (dirette 2.56+) */

/* La nota del modulo nel carattere del testo (non più «Bold Messy Marker», che non è un carattere Sale). */
.riquadro__testa--riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.riquadro__nota { margin: 0; font-family: var(--f-testo); font-weight: 700; font-size: 0.9375rem; line-height: 1.35; color: var(--petrolio); }

/* Il modulo compatto: in vista desktop sta nella finestra senza scorrere la pagina (anche a 1366 × 768). */
@media (min-width: 1024px) {
  .diretta-nuova .testata { padding-top: 14px; padding-bottom: 0; }
  .diretta-nuova .testata__logo img { width: 176px; }
  .pagina-diretta.diretta-nuova .impianto {
    grid-template-columns: minmax(0, 1fr) clamp(460px, 42vw, 580px);
    column-gap: 48px;
    padding-top: 10px;
  }
  .diretta-nuova .riquadro--modulo { padding: 18px 26px 18px; }
  /* Il riquadro sale accanto al logo (che sta a sinistra): la finestra è tutta per il modulo. */
  .pagina-diretta.diretta-nuova .riquadro--modulo { margin-top: -58px; }
  .pagina-diretta.diretta-nuova .in-onda + .impianto .riquadro--modulo { margin-top: 0; }
}
.iscrizione--compatta .riga-1 { display: grid; }
@media (min-width: 520px) { .iscrizione--compatta .riga-1 input { max-width: calc(50% - 6px); } }
.diretta-nuova .riquadro--modulo::before { width: 56px; height: 56px; }
.diretta-nuova .riquadro--modulo h2 { font-size: 1.375rem; padding-right: 0; }
.diretta-nuova .riquadro--modulo .riquadro__testa { padding-right: 44px; }

.iscrizione--compatta { gap: 8px; margin-top: 10px; }
.iscrizione--compatta .riga-2 { gap: 8px 12px; }
.iscrizione--compatta .campo { gap: 3px; }
.campo__testa { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.iscrizione--compatta .campo label { font-size: 0.875rem; line-height: 1.3; }
.iscrizione--compatta .facoltativo { font-size: 0.8125rem; }
.iscrizione--compatta input[type="text"],
.iscrizione--compatta input[type="email"],
.iscrizione--compatta input[type="tel"],
.iscrizione--compatta select { min-height: 40px; padding: 7px 12px; border-radius: 12px; }
.iscrizione--compatta select { padding-right: 36px; background-position: right 10px center; background-size: 18px 18px; }
.iscrizione--compatta .errore { font-size: 0.875rem; }
.iscrizione--compatta .errore .ic { width: 17px; height: 17px; }
.iscrizione--compatta .avviso-modulo { padding: 10px 14px; font-size: 0.9375rem; }
.modulo-titoletto {
  margin: 2px 0 -6px;
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--petrolio);
}
.domanda--c legend { margin-bottom: 4px; font-size: 0.875rem; line-height: 1.3; }
.domanda--c .scelte { gap: 8px; }
/* Sul telefono le risposte restano alte 48 px (da toccare); in vista desktop più basse, per stare nella finestra. */
@media (min-width: 1024px) { .domanda--c .scelta { min-height: 36px; padding: 4px 14px 4px 12px; font-size: 0.9375rem; } }
.domanda--c .scelta input { width: 16px; height: 16px; }

/* L'aiuto di un campo dietro la «i»: si apre sopra il modulo, senza spostare i campi. */
.info { position: static; flex: none; }
.info > summary {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -3px 0;
  border-radius: 50%;
  color: var(--petrolio);
  list-style: none;
  cursor: pointer;
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary .ic { width: 18px; height: 18px; }
.info > summary:hover, .info[open] > summary { color: var(--inchiostro); background: var(--pesca); }
.info__testo {
  position: absolute;
  z-index: 16;
  left: 0;
  right: -8px;
  top: calc(100% + 4px);
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--inchiostro);
  border-radius: 12px;
  background: var(--bianco);
  box-shadow: var(--ombra);
  color: var(--inchiostro);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* I consensi: il testo intero, più piccolo; caselle proporzionate al testo (si clicca anche sul testo). */
.iscrizione--compatta .consensi { gap: 6px; padding-top: 8px; border-top-width: 1.5px; }
/* Il testo scorre accanto alla casella e il link alla privacy continua sulla stessa riga. */
.iscrizione--compatta .consenso { display: block; position: relative; padding-left: 26px; font-size: 0.8125rem; line-height: 1.4; }
.iscrizione--compatta .consenso input { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; margin: 0; }
.iscrizione--compatta .consenso label { display: inline; }
.iscrizione--compatta .consenso .facoltativo { font-size: inherit; }
.iscrizione--compatta .consenso__link { display: inline; padding: 0; white-space: nowrap; }
.iscrizione--compatta .consenso .errore { margin-top: 4px; }
.iscrizione--compatta .invia { min-height: 48px; margin-top: 2px; padding-top: 10px; padding-bottom: 10px; font-size: 1rem; }

/* La pagina di conferma rifatta: logo al centro, il video in alto, il conto alla rovescia vivo, icone. */
.testata--centro { text-align: center; }
.testata--centro .testata__logo img { margin: 0 auto; }
.conferma--258 { gap: 22px; }
.conferma--258 .riquadro--video > .video:first-child { border-radius: var(--r-grande) var(--r-grande) 0 0; }
.conferma--258 .conferma__testa { padding-top: 22px; }
.conferma--258 .conferma__testa > .esito { margin: 0 0 18px; }
.conferma--258 .riquadro--video > :last-child { margin-right: 0; }
.conferma--258 .conferma__testa { padding-right: 0; }
.conferma--258 .riquadro--conferma { padding-bottom: 30px; }
.conferma--258 .riquadro--conferma::before { width: 52px; height: 52px; }

.video--conto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: var(--petrolio);
  color: var(--bianco);
  text-align: center;
}
.video--conto__testo { margin: 0; font-weight: 700; }
.video--conto .conto-vivo { margin: 0; }
.video--conto .conto-vivo__cella { background: var(--bianco); color: var(--inchiostro); }
.video--conto .conto-vivo__titolo { color: var(--bianco); }

.conto-vivo { margin: 18px 0 0; }
.conto-vivo__titolo {
  margin: 0 0 6px;
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrolio);
}
.conto-vivo__celle { display: flex; flex-wrap: wrap; gap: 8px; }
.conto-vivo__cella {
  display: grid;
  justify-items: center;
  min-width: 70px;
  padding: 8px 10px 6px;
  border-radius: 14px;
  background: var(--arancio);
  color: var(--inchiostro);
  font-family: var(--f-dati);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.conto-vivo__cella b { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 700; }
.conto-vivo__cella small { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 420px) {
  .conto-vivo__celle { flex-wrap: nowrap; gap: 6px; }
  .conto-vivo__cella { min-width: 0; flex: 1 1 0; padding: 8px 2px 6px; }
  .conto-vivo__cella small { font-size: 0.6875rem; letter-spacing: 0.02em; }
}
.video--conto .conto-vivo { width: min(100%, 360px); }
.video--conto .conto-vivo__celle { justify-content: center; }
.conto-vivo__stato {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-family: var(--f-dati);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.conto-vivo--dopo .conto-vivo__stato { background: var(--petrolio); }

/* I calendari: le icone con il nome sotto, poi «Aggiungi al calendario» per tutti gli altri. */
.calendari { margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--arancio-chiaro); }
.calendari__titolo { margin: 0 0 10px; font-family: var(--f-dati); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--petrolio); }
.calendari__icone { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.cal {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border-radius: var(--r);
  color: var(--inchiostro);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.cal__icona { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--azzurro); transition: background-color 0.2s var(--uscita); }
.cal__icona .ic { width: 24px; height: 24px; }
.cal:hover .cal__icona { background: var(--pesca); }
.cal:hover .cal__nome { text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.azione--calendario { margin-top: 14px; }
.calendari__nota { margin: 8px 0 0; font-size: 0.9375rem; color: var(--ardesia); }

/* I canali come icone tonde, con il nome per i lettori di schermo (e nel suggerimento al passaggio). */
.canali { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--arancio-chiaro); }
.blocco--canali .canali { margin-top: 0; padding-top: 0; border-top: 0; }
.canali__titolo { margin: 0 0 10px; font-weight: 700; }
.canali__icone { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.canale {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 8px;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--uscita);
}
.canale:hover { background: var(--petrolio); }
.canale .ic-marchio { width: 22px; height: 22px; }
.canale--altro { padding: 0 18px 0 14px; }
/* Revisione della 2.58: il link stesso (prima «.canale :focus-visible», con lo spazio, colpiva solo i figli). */
.canale:focus-visible, .cal:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* Il kit: il nome con l'icona del tipo e l'azione («Apri», «Scarica») a destra. */
.kit-link--azioni a { align-items: center; }
.kit-link--azioni .kit-link__azione {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--azzurro);
  color: var(--inchiostro);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.kit-link--azioni a:hover .kit-link__azione { background: var(--pesca); }
.kit-link--azioni a span.kit-link__azione { text-decoration: none; }
.kit-link--azioni .kit-link__azione .ic { width: 1.05em; height: 1.05em; color: var(--inchiostro); }

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

@media print {
  .barra-iscriviti, .salta, .iscrizione, .video { display: none !important; }
  body { background: var(--bianco); }
}