/* ComeOggi A2 — art direction sopra A1.
 *
 * Questo foglio si carica DOPO v2.css e non lo sostituisce: A1 resta intatto
 * e confrontabile, A2 e' cio' che si vede quando la pagina porta la classe
 * `.a2`. Togliere la riga che lo carica riporta tutto ad A1.
 *
 * IL PROBLEMA CHE RISOLVE
 * A1 era corretto e spento: un prodotto meteo senza un simbolo del tempo,
 * senza radar in pagina, con la previsione ridotta a orari e numeri, e molto
 * bianco senza funzione. Non mancava colore: mancava METEO.
 *
 * DUE SISTEMI DI COLORE CHE NON SI TOCCANO
 * Le tinte atmosferiche qui sotto descrivono il TEMPO e vivono nelle
 * superfici. I colori di rischio di v2.css descrivono la SICUREZZA e vivono
 * nei bordi e nelle etichette. Se una giornata coperta usasse l'ambra del
 * rischio sembrerebbe pericolosa; se un temporale usasse l'azzurro del sereno
 * sembrerebbe innocuo. Restano separati per costruzione.
 */

/* --- tinte atmosferiche: DERIVATE dai token, non inventate --------------- */
.a2 {
  --atm-sereno-1:   #eaf4fb;   /* blu-050 */
  --atm-sereno-2:   #fdf6e8;   /* la luce calda dell'orizzonte del marchio */
  --atm-nuvole-1:   #eef1f3;
  --atm-nuvole-2:   #f7f8f9;
  --atm-pioggia-1:  #e3eef6;
  --atm-pioggia-2:  #eef4f8;
  --atm-temporale-1:#e6e9f2;
  --atm-temporale-2:#f3f0f6;
  --atm-nebbia-1:   #eef0f0;
  --atm-nebbia-2:   #f6f7f7;
  --atm-neve-1:     #eef4f8;
  --atm-neve-2:     #fbfcfd;
  --atm-notte-1:    #e8ecf3;
  --atm-notte-2:    #f4f5f8;

  --i-sole:  var(--ambra-600);
  --i-acqua: var(--blu-600);
  --i-lampo: var(--ambra-600);
}
@media (prefers-color-scheme: dark) {
  .a2:not([data-tema="chiaro"]) {
    --atm-sereno-1:#123049; --atm-sereno-2:#2a2618;
    --atm-nuvole-1:#1b262e; --atm-nuvole-2:#141c22;
    --atm-pioggia-1:#122c3e; --atm-pioggia-2:#141f28;
    --atm-temporale-1:#1d2030; --atm-temporale-2:#181722;
    --atm-nebbia-1:#1c2124; --atm-nebbia-2:#15191b;
    --atm-neve-1:#17242c; --atm-neve-2:#131a1e;
    --atm-notte-1:#141a26; --atm-notte-2:#11151d;
    /* di notte l'ambra si schiarisce, se no sparisce sul fondo scuro */
    --i-sole:#e0a94a; --i-acqua:#5cb3e8; --i-lampo:#e8b95c;
  }
}

/* --- 1. IL MARCHIO ESISTE ------------------------------------------------
   Nella pagina localita' di A1 il marchio non c'era proprio: la testata
   mostrava il nome del comune e una lente. Il prodotto si presentava senza
   dire come si chiama. */
.a2 .a2-testata {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px var(--s4);
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-bordo);
}
.a2 .a2-marchio { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.a2 .a2-marchio img { width: 34px; height: 34px; display: block; }
.a2 .a2-marchio__n {
  font-family: var(--f-display, 'Fraunces', serif);
  font-size: 20px; font-weight: 700; color: var(--c-testo); letter-spacing: -.01em;
}
.a2 .a2-testata__sep { width: 1px; height: 26px; background: var(--c-bordo); }
/* marchio dentro la barra compatta di mappa/precisione: coerenza A2 senza
   ridisegnare la barra. */
.a2 .a2-marchio--bar { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.a2 .a2-marchio--bar img { width: 28px; height: 28px; display: block; }
.a2 .a2-marchio--bar .a2-marchio__n { font-size: 17px; }
.a2 .a2-luogo { min-width: 0; }
.a2 .a2-luogo__n {
  font-family: var(--f-display, 'Fraunces', serif);
  font-size: 18px; font-weight: 600; color: var(--c-testo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a2 .a2-luogo__m { font-size: var(--t-micro); color: var(--c-testo-soft); }
.a2 .a2-testata__az { margin-left: auto; display: flex; gap: 6px; }
@media (min-width: 900px) {
  .a2 .a2-testata { padding: 18px var(--s5); }
  .a2 .a2-marchio img { width: 42px; height: 42px; }
  .a2 .a2-marchio__n { font-size: 24px; }
  .a2 .a2-luogo__n { font-size: 20px; }
}

/* --- 2. HERO: una composizione, non un elenco --------------------------- */
.a2 .a2-hero {
  position: relative; overflow: hidden;
  padding: var(--s5) var(--s4) var(--s4);
  background: linear-gradient(158deg, var(--atm-1) 0%, var(--atm-2) 62%, var(--c-fondo) 100%);
}
.a2 .a2-hero--sereno    { --atm-1: var(--atm-sereno-1);    --atm-2: var(--atm-sereno-2); }
.a2 .a2-hero--nuvole    { --atm-1: var(--atm-nuvole-1);    --atm-2: var(--atm-nuvole-2); }
.a2 .a2-hero--pioggia   { --atm-1: var(--atm-pioggia-1);   --atm-2: var(--atm-pioggia-2); }
.a2 .a2-hero--temporale { --atm-1: var(--atm-temporale-1); --atm-2: var(--atm-temporale-2); }
.a2 .a2-hero--nebbia    { --atm-1: var(--atm-nebbia-1);    --atm-2: var(--atm-nebbia-2); }
.a2 .a2-hero--neve      { --atm-1: var(--atm-neve-1);      --atm-2: var(--atm-neve-2); }
.a2 .a2-hero--notte     { --atm-1: var(--atm-notte-1);     --atm-2: var(--atm-notte-2); }

.a2 .a2-hero__alto { display: flex; align-items: center; gap: var(--s4); }
.a2 .a2-icona-grande { width: 76px; height: 76px; flex: none; color: var(--c-testo-soft); }
.a2 .a2-grado {
  /* Numero critico: font SANS tabolare, non il display serif (Fraunces) dove il
     3 si confonde col 5 a colpo d'occhio. Stessa gerarchia A2 (grande, forte). */
  font-family: 'Figtree', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(56px, 17vw, 76px); font-weight: 700; line-height: .92;
  letter-spacing: -.02em; color: var(--c-testo);
}
.a2 .a2-grado sup { font-size: .4em; vertical-align: super; font-weight: 600; }
.a2 .a2-cond { font-size: var(--t-corpo); color: var(--c-testo-soft); margin-top: 2px; }
.a2 .a2-minmax {
  font-size: var(--t-piccolo); color: var(--c-testo-soft);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.a2 .a2-minmax b { color: var(--c-testo); font-weight: 600; }

/* la conclusione: peso diverso per classe, e "Attenzione" non e' il default */
.a2 .a2-concl {
  font-family: var(--f-display, 'Fraunces', serif);
  font-size: clamp(26px, 7vw, 34px); font-weight: 600; line-height: 1.12;
  letter-spacing: -.015em; margin: var(--s4) 0 0;
  color: var(--c-testo);
}
.a2 .a2-concl--osserva    { color: var(--blu-900); }
.a2 .a2-concl--attenzione { color: var(--r-rilievo); }
.a2 .a2-concl--pericolo   { color: var(--r-alto); }
.a2 .a2-motivo { margin: 8px 0 0; color: var(--c-testo-soft); font-size: var(--t-corpo); }

.a2 .a2-hero__tag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }

@media (min-width: 900px) {
  .a2 .a2-hero { padding: var(--s6) var(--s5) var(--s5); }
  .a2 .a2-icona-grande { width: 104px; height: 104px; }
  .a2 .a2-hero__griglia { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items: center; }
}

/* --- 3. RADAR SUL PUNTO -------------------------------------------------
   Il radar era solo sulla mappa. Il fotogramma nazionale e' in Web Mercator
   (verificato) e viene posizionato con la stessa matematica di Leaflet:
   nessun ritaglio nuovo, nessuna georeferenziazione inventata. */
.a2 .a2-radar { display: grid; gap: var(--s3); }
.a2 .a2-radar__vista {
  position: relative; aspect-ratio: 16/10; border-radius: var(--raggio-l);
  overflow: hidden; background: var(--atm-nuvole-2);
  border: 1px solid var(--c-bordo);
}
/* Il fotogramma nazionale come sfondo, spostato perche' il punto cada al
   centro. Nessun ritaglio server-side: e' la stessa PNG che usa la mappa,
   con la stessa proiezione. */
.a2 .a2-radar__tela {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-color: var(--atm-nuvole-2);
}
.a2 .a2-radar__punto {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--c-brand); border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.a2 .a2-radar__anello {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px dashed rgba(11,95,146,.55); pointer-events: none;
}
.a2 .a2-radar__scala {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(255,255,255,.9); color: var(--neutro-700);
  font-size: 11px; padding: 3px 7px; border-radius: 6px;
}
.a2 .a2-radar__vuoto {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.86); color: var(--neutro-700);
  font-size: var(--t-piccolo); padding: 7px 12px; border-radius: 999px;
  white-space: nowrap; margin-top: 26px;
}
.a2 .a2-radar__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a2 .a2-radar__fatto {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; font-size: var(--t-piccolo); color: var(--c-testo);
}
.a2 .a2-radar__fatto b { font-variant-numeric: tabular-nums; }
.a2 .a2-radar__fatto .v2-tag:not(.v2-tag--osservato) { background: var(--neutro-150); color: var(--neutro-700); }

/* --- 4. PROSSIME ORE: icona, non solo numeri --------------------------- */
.a2 .a2-ore {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 var(--s3);
  scroll-snap-type: x proximity;
}
.a2 .a2-ora {
  flex: none; width: 82px; scroll-snap-align: start; text-align: center;
  padding: 12px 8px 14px; border-radius: var(--raggio-m);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
}
.a2 .a2-ora__h { font-size: var(--t-micro); color: var(--c-testo-soft); font-variant-numeric: tabular-nums; }
.a2 .a2-ora__i { width: 36px; height: 36px; margin: 6px auto 4px; display: block; }
.a2 .a2-ora__t { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a2 .a2-ora__p { font-size: var(--t-micro); color: var(--blu-700); font-weight: 600; margin-top: 2px; }
.a2 .a2-ora__v { font-size: var(--t-micro); color: var(--neutro-700); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.a2 .a2-ora__v span { font-weight: 500; opacity: .65; margin-left: 1px; }
.a2 .a2-ora--ora {
  background: var(--blu-050); border-color: var(--blu-200);
  box-shadow: inset 0 -3px 0 var(--c-brand);
}
.a2 .a2-ora--ora .a2-ora__h { color: var(--blu-900); font-weight: 700; }
.a2 .a2-ora__nota {
  display: block; margin-top: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blu-700);
}
@media (min-width: 900px) {
  .a2 .a2-ora { width: 92px; }
  .a2 .a2-ora__i { width: 42px; height: 42px; }
}

/* --- 5. PROSSIMI GIORNI: una previsione, non una tabella --------------- */
.a2 .a2-giorni { display: grid; gap: 2px; }
.a2 .a2-giorno {
  display: grid; grid-template-columns: 4.2rem 40px 1fr auto;
  align-items: center; gap: var(--s3);
  padding: 12px var(--s3); border-radius: var(--raggio-m);
}
.a2 .a2-giorno:nth-child(odd) { background: var(--c-superficie-2); }
.a2 .a2-giorno__g { font-weight: 600; }
.a2 .a2-giorno__i { width: 38px; height: 38px; }
.a2 .a2-giorno__c { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a2 .a2-giorno__cond { font-size: var(--t-piccolo); color: var(--c-testo-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a2 .a2-giorno__fen { font-size: var(--t-micro); font-weight: 700; letter-spacing: .01em; }
.a2 .a2-giorno__fen--acqua { color: var(--blu-700); }
.a2 .a2-giorno__fen--vento { color: var(--neutro-700); }
.a2 .a2-giorno__t { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
/* affidabilità del giorno (conf del motore): un punto, non una parola in più */
.a2 .a2-giorno__conf { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.a2 .a2-giorno__conf--alta  { background: var(--r-ok, #1e9e6a); }
.a2 .a2-giorno__conf--media { background: var(--ambra-600, #d98a1f); }
.a2 .a2-giorno__conf--bassa { background: var(--neutro-300, #b7bec4); }
.a2 .a2-giorno__min { color: var(--c-testo-soft); }
.a2 .a2-giorno__max { font-weight: 700; }
/* la barra dice il campo della giornata dentro il campo della settimana */
.a2 .a2-arco { width: 62px; height: 5px; border-radius: 3px; background: var(--neutro-150); position: relative; }
.a2 .a2-arco i {
  position: absolute; top: 0; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blu-400), var(--ambra-600));
}
@media (max-width: 480px) {
  /* la condizione resta visibile anche su mobile: era la riga più "spenta" */
  .a2 .a2-giorno { grid-template-columns: 3.1rem 32px 1fr auto; gap: var(--s2, 8px); padding: 11px var(--s3); }
  .a2 .a2-giorno__cond { font-size: var(--t-micro); }
  .a2 .a2-arco { width: 40px; }
}

/* --- 6. INVITO A INSTALLARE: una riga, non un pannello ----------------- */
.a2 .a2-invito {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s3); padding: 10px var(--s3);
  background: var(--c-superficie); border: 1px solid var(--c-bordo-forte);
  border-radius: var(--raggio-m); box-shadow: var(--ombra-1);
}
.a2 .a2-invito img { width: 28px; height: 28px; }
.a2 .a2-invito__t { font-size: var(--t-piccolo); font-weight: 600; line-height: 1.3; }
.a2 .a2-invito__s { font-size: var(--t-micro); color: var(--c-testo-soft); }
.a2 .a2-invito__x {
  background: none; border: 0; color: var(--c-testo-soft);
  min-width: 44px; min-height: 44px; font-size: 18px; cursor: pointer;
}

/* --- 7. LA CARD SECONDARIA DICE QUALCOSA ------------------------------- */
.a2 .a2-voce {
  display: grid; gap: 6px; padding: var(--s4);
  border-radius: var(--raggio-m); background: var(--r-attesa-bg);
  border-left: 4px solid var(--r-attesa);
}
.a2 .a2-voce__t { font-weight: 700; }
.a2 .a2-voce__d { font-size: var(--t-piccolo); color: var(--neutro-700); }
.a2 .a2-voce__n { font-size: var(--t-micro); color: var(--neutro-700); font-variant-numeric: tabular-nums; }

/* --- 8. le icone dentro il simbolo ------------------------------------- */
/* wx.svg disegna con currentColor: basta dare un colore all'elemento.
   Le icone del tempo NON usano i colori del rischio. */
.a2 .a2-icona-grande { color: var(--blu-700); }
.a2 .a2-ora__i, .a2 .a2-giorno__i { color: var(--blu-700); }
.a2 .v2-nav__i { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
.a2 .i-sole  { fill: var(--i-sole); stroke: none; }
.a2 .i-acqua { stroke: var(--i-acqua); fill: none; }
.a2 .i-lampo { fill: var(--i-lampo); stroke: none; }
.a2 g.i-sole { fill: none; stroke: var(--i-sole); }

/* --- 8-bis. COSA POSSO FARE: giudizio leggibile, stato a colpo d'occhio -- */
.a2 .a2-att { display: grid; gap: 8px; }
.a2 .a2-att__r {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center;
  gap: var(--s3); padding: 12px var(--s3);
  border: 1px solid var(--c-bordo); border-left: 4px solid var(--neutro-200);
  border-radius: var(--raggio-m); background: var(--c-superficie);
}
.a2 .a2-att__r--si     { border-left-color: var(--r-ok, #1e9e6a); }
.a2 .a2-att__r--forse  { border-left-color: var(--ambra-600, #d98a1f); }
.a2 .a2-att__r--aspetta{ border-left-color: var(--ambra-600, #d98a1f); }
.a2 .a2-att__r--no     { border-left-color: var(--r-alto, #c8452a); }
.a2 .a2-att__i { font-size: 20px; text-align: center; color: var(--c-testo-soft); line-height: 1; }
.a2 .a2-att__r--si  .a2-att__i { color: var(--r-ok, #1e9e6a); }
.a2 .a2-att__r--no  .a2-att__i { color: var(--r-alto, #c8452a); }
.a2 .a2-att__c { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.a2 .a2-att__n { font-weight: 600; }
.a2 .a2-att__m { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.a2 .a2-esito {
  font-size: var(--t-micro); font-weight: 700; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .01em;
}
.a2 .a2-esito--si      { background: var(--r-sereno-bg, #e6f4ec); color: var(--r-ok, #157a51); }
.a2 .a2-esito--forse   { background: var(--r-attesa-bg, #fbf1df); color: var(--ambra-800, #9a6410); }
.a2 .a2-esito--aspetta { background: var(--r-attesa-bg, #fbf1df); color: var(--ambra-800, #9a6410); }
.a2 .a2-esito--no      { background: var(--r-alto-bg, #fbe7e2); color: var(--r-alto, #b23a22); }
.a2 .a2-esito--ignoto  { background: var(--neutro-150); color: var(--neutro-700); }
.a2 .a2-altre { margin-top: 10px; }
.a2 .a2-altre > summary { cursor: pointer; font-size: var(--t-piccolo); font-weight: 600; color: var(--blu-700); padding: 6px 0; }
@media (max-width: 480px) {
  .a2 .a2-att__r { grid-template-columns: 26px 1fr auto; }
  .a2 .a2-esito { padding: 4px 9px; }
}

/* --- 9. HOMEPAGE A2 ----------------------------------------------------
   Stesso contenuto della home v2, con presenza del marchio, un hero
   atmosferico e la situazione nazionale resa come fatto vivo. */
.a2 .a2-testata--home { justify-content: space-between; }
.a2 .a2-home-hero {
  position: relative; overflow: hidden;
  padding: var(--s6, 32px) var(--s4) var(--s5);
  background: linear-gradient(158deg, var(--atm-sereno-1) 0%, var(--atm-sereno-2) 58%, var(--c-fondo) 100%);
}
/* un accenno di cielo: un sole caldo sfumato in alto a destra, niente disegni */
.a2 .a2-home-hero__cielo {
  position: absolute; top: -70px; right: -50px; width: 230px; height: 230px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240,176,74,.28), rgba(240,176,74,0) 68%);
}
.a2 .a2-home-claim {
  position: relative;
  font-family: var(--f-display, 'Fraunces', serif);
  font-size: clamp(28px, 8vw, 40px); font-weight: 600; line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 var(--s3); color: var(--c-testo);
}
.a2 .a2-home-sub {
  position: relative; color: var(--c-testo-soft); font-size: var(--t-corpo);
  margin: 0 0 var(--s4); max-width: 34ch;
}
.a2 .a2-home-hero .v2-cerca, .a2 .a2-home-hero .v2-posizione { position: relative; }

/* la situazione nazionale: il numero grande, non una riga di testo */
.a2 .a2-live {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); border-radius: var(--raggio-l);
  background: linear-gradient(120deg, var(--atm-temporale-1), var(--atm-temporale-2));
  border: 1px solid var(--c-bordo);
}
.a2 .a2-live__glyph { width: 46px; height: 46px; color: var(--i-lampo); flex: none; }
.a2 .a2-live__c { min-width: 0; }
.a2 .a2-live__n {
  font-family: var(--f-display, 'Fraunces', serif);
  font-size: clamp(32px, 11vw, 46px); font-weight: 600; line-height: 1;
  color: var(--c-testo); font-variant-numeric: tabular-nums;
}
.a2 .a2-live__l { font-size: var(--t-piccolo); color: var(--c-testo-soft); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a2 .a2-live__n2 { font-size: var(--t-micro); margin: 8px 0 0; }
.a2 .a2-prec {
  display: grid; gap: var(--s3); padding: var(--s4);
  border-radius: var(--raggio-l); border: 1px solid var(--c-bordo);
  background: linear-gradient(120deg, var(--atm-sereno-1), var(--c-superficie) 70%);
}
.a2 .a2-prec .v2-bottone { justify-self: start; }
@media (min-width: 900px) {
  .a2 .a2-home-hero { padding: var(--s6) var(--s5) var(--s6); }
  .a2 .a2-live__glyph { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .a2 * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Breadcrumb comune (P0 SEO: percorso reale visibile, coerente col JSON-LD) */
.a2 .a2-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35em;
  margin: var(--s3) 0 0; padding: 0 var(--s4);
  font-size: 13px; line-height: 1.5; color: var(--c-testo-soft);
}
.a2 .a2-breadcrumb a { color: var(--c-testo-soft); text-decoration: none; }
.a2 .a2-breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; }
.a2 .a2-breadcrumb [aria-current="page"] { color: var(--c-testo); font-weight: 600; }
.a2 .a2-bc-sep { color: var(--c-bordo-forte); }
@media (min-width: 900px) { .a2 .a2-breadcrumb { padding: 0 var(--s5); } }

/* distanza nelle chip "comuni vicini": staccata dal nome e attenuata */
.a2 .a2-chip-km { margin-inline-start: 6px; color: var(--c-testo-soft); font-size: .82em; }

/* ============================================================
   News A2 — prodotto editoriale coerente col design system A2
   ============================================================ */
.a2 .a2-news { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.a2 .a2-news-hero { padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--c-bordo); margin-bottom: var(--s6); }
.a2 .a2-news-hero .a2-kicker { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--c-brand-forte); margin: 0 0 var(--s2); }
.a2 .a2-news-hero h1 { font-family: var(--f-display, 'Fraunces', serif); font-size: var(--t-display); line-height: 1.06; margin: 0 0 var(--s3); max-width: 20ch; }
.a2 .a2-news-hero p { color: var(--c-testo-soft); margin: 0; max-width: 62ch; line-height: 1.55; }
.a2 .a2-news-hero .a2-news-upd { font-size: var(--t-piccolo); margin-top: var(--s3); }

.a2 .a2-flag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s6); font-size: var(--t-piccolo); }
.a2 .a2-flag > span { color: var(--c-testo-soft); font-weight: 600; }
.a2 .a2-flag a { color: var(--c-brand-forte); text-decoration: none; padding: 4px 10px; border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill); }
.a2 .a2-flag a:hover { border-color: var(--c-bordo-forte); }

.a2 .a2-news-grouphead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); flex-wrap: wrap; }
.a2 .a2-news-grouphead h2 { font-family: var(--f-display, 'Fraunces', serif); font-size: var(--t-h2); margin: 0; }
.a2 .a2-news-grouphead span { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.a2 .a2-news-day { font-size: var(--t-h3); font-family: var(--f-display, 'Fraunces', serif); margin: var(--s5) 0 var(--s3); color: var(--c-testo-soft); }

.a2 .a2-cardgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .a2 .a2-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .a2 .a2-cardgrid { grid-template-columns: repeat(3, 1fr); } }

.a2 .a2-card { display: flex; flex-direction: column; background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-l); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.a2 .a2-card:hover { border-color: var(--c-bordo-forte); transform: translateY(-2px); }
.a2 .a2-card__imgwrap { position: relative; aspect-ratio: 16 / 9; background: var(--c-superficie-2); }
.a2 .a2-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a2 .a2-card__date { position: absolute; top: var(--s2); left: var(--s2); background: color-mix(in srgb, var(--c-fondo) 82%, transparent); backdrop-filter: blur(4px); font-size: var(--t-micro); font-weight: 600; padding: 3px 9px; border-radius: var(--raggio-pill); color: var(--c-testo); }
.a2 .a2-card__date.is-archivio { color: var(--c-testo-soft); }
.a2 .a2-card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.a2 .a2-card__cat { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-brand-forte); font-weight: 700; }
.a2 .a2-card__h { font-family: var(--f-display, 'Fraunces', serif); font-size: var(--t-h3); line-height: 1.18; margin: 0; }
.a2 .a2-card__ex { color: var(--neutro-700); font-size: var(--t-piccolo); line-height: 1.5; margin: 0; flex: 1; }
.a2 .a2-card__loc { font-size: var(--t-micro); color: var(--neutro-700); margin-top: auto; }
.a2 .a2-card--archivio { opacity: .92; }

.a2 .a2-news-policy { display: grid; gap: var(--s3); grid-template-columns: 1fr; background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s4); margin-top: var(--s6); font-size: var(--t-piccolo); }
@media (min-width: 700px) { .a2 .a2-news-policy { grid-template-columns: repeat(3, 1fr); } }
.a2 .a2-news-policy b { display: block; color: var(--c-testo); margin-bottom: 2px; }
.a2 .a2-news-policy span { color: var(--c-testo-soft); }

/* Articolo: colonna di lettura */
.a2 .a2-art { max-width: 720px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s8); }
.a2 .a2-art__archivio { background: var(--c-superficie-2); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s3) var(--s4); font-size: var(--t-piccolo); color: var(--c-testo-soft); margin-bottom: var(--s5); }
.a2 .a2-art__archivio b { color: var(--c-testo); margin-right: var(--s2); }
.a2 .a2-art__cat { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-brand-forte); font-weight: 700; }
.a2 .a2-art h1 { font-family: var(--f-display, 'Fraunces', serif); font-size: var(--t-display); line-height: 1.08; margin: var(--s2) 0 var(--s3); }
.a2 .a2-art__dek { font-size: var(--t-h3); color: var(--c-testo-soft); line-height: 1.42; margin: 0 0 var(--s4); }
.a2 .a2-art__byline { font-size: var(--t-piccolo); color: var(--c-testo-soft); display: flex; flex-wrap: wrap; gap: 6px var(--s2); align-items: center; padding-bottom: var(--s4); border-bottom: 1px solid var(--c-bordo); margin-bottom: var(--s5); }
.a2 .a2-art__hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio-l); margin: 0 0 var(--s5); background: var(--c-superficie-2); display: block; }
.a2 .a2-art__inbreve { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-left: 3px solid var(--c-brand); border-radius: var(--raggio-m); padding: var(--s4); margin: 0 0 var(--s5); }
.a2 .a2-art__inbreve b { display: block; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-brand-forte); margin-bottom: var(--s1); }
.a2 .a2-art__body { font-size: var(--t-corpo); line-height: 1.7; }
.a2 .a2-art__body h2 { font-family: var(--f-display, 'Fraunces', serif); font-size: var(--t-h2); line-height: 1.2; margin: var(--s6) 0 var(--s2); }
.a2 .a2-art__body p { margin: 0 0 var(--s3); }
.a2 .a2-art figure { margin: var(--s5) 0; }
.a2 .a2-art figure img { width: 100%; height: auto; border-radius: var(--raggio-m); background: var(--c-superficie-2); display: block; }
.a2 .a2-art figure figcaption { font-size: var(--t-micro); color: var(--neutro-700); margin-top: var(--s2); line-height: 1.45; }
.a2 .a2-art figure figcaption .a2-fonte { color: var(--neutro-700); }
.a2 .a2-art__facts { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s2); }
.a2 .a2-art__facts li { padding-left: var(--s4); position: relative; line-height: 1.5; }
.a2 .a2-art__facts li::before { content: "›"; position: absolute; left: 0; color: var(--c-brand-forte); font-weight: 700; }
.a2 .a2-art__box { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s4); margin: var(--s5) 0; }
.a2 .a2-art__box h2 { font-size: var(--t-h3); margin: 0 0 var(--s3); font-family: var(--f-display, 'Fraunces', serif); }
.a2 .a2-art__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.a2 .a2-art__method { font-size: var(--t-piccolo); color: var(--c-testo-soft); border-top: 1px solid var(--c-bordo); margin-top: var(--s6); padding-top: var(--s4); }
.a2 .a2-art__method b { color: var(--c-testo); }

/* ============================================================
   Pagine INTENT (domani/weekend/ora-per-ora/piove-oggi/vento/radar/
   temperatura-percepita) nella shell A2. Stesso corpo di A1, look A2:
   token semantici, dark-aware. Scoped .a2 -> A1 resta invariato.
   ============================================================ */
.a2 .a2-intento { max-width: 720px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s8); }
.a2 .it-bc { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: 13px; color: var(--c-testo-soft); margin: 0 0 var(--s4); }
.a2 .it-bc a { color: var(--c-testo-soft); text-decoration: none; }
.a2 .it-bc a:hover { color: var(--c-brand); text-decoration: underline; }
.a2 .it-bc [aria-current="page"] { color: var(--c-testo); font-weight: 600; }
.a2 .it-sep { color: var(--c-bordo-forte); }
.a2 .it-hero { margin: 0 0 var(--s5); }
.a2 .it-hero h1 { font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-display); line-height: 1.1; margin: 0 0 var(--s2); color: var(--c-testo); }
.a2 .it-occhiello { margin: 0 0 var(--s2); font-size: var(--t-h3); color: var(--c-testo-soft); font-family: var(--f-display,'Fraunces',serif); line-height: 1.4; }
.a2 .it-meta { margin: 0; font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.a2 .it-meta a, .a2 .it-p a, .a2 .it-bc a.forte { color: var(--c-brand-forte); }
.a2 .it-verdetto { border-radius: var(--raggio-l); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); color: #fff; }
.a2 .it-verdetto b { display: block; font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-h2); line-height: 1.25; margin-bottom: var(--s1); }
.a2 .it-verdetto p { margin: 0; font-size: var(--t-corpo); line-height: 1.5; opacity: .95; }
.a2 .it-si { background: linear-gradient(135deg, var(--blu-700,#12629f), var(--blu-500,#2f8fd0)); }
.a2 .it-forse { background: linear-gradient(135deg, #8a6a12, #c39a2a); }
.a2 .it-no { background: linear-gradient(135deg, #1d6b52, #37a37a); }
.a2 .it-box { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s4); margin: 0 0 var(--s4); }
.a2 .it-box h2 { font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-h3); margin: 0 0 var(--s2); line-height: 1.3; color: var(--c-testo); }
.a2 .it-p { margin: 0 0 var(--s2); font-size: var(--t-corpo); line-height: 1.6; color: var(--c-testo-soft); }
.a2 .it-p:last-child { margin-bottom: 0; }
.a2 .it-affid { font-size: var(--t-piccolo); }
.a2 .it-sintesi, .a2 .it-quando { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.a2 .it-sintesi-inline { margin: 0 0 var(--s3); }
.a2 .it-sintesi > div, .a2 .it-quando > div { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s3); min-width: 0; }
.a2 .it-sintesi span, .a2 .it-quando span { display: block; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-testo-soft); font-weight: 700; }
.a2 .it-sintesi b, .a2 .it-quando b { display: block; font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-h2); line-height: 1.2; margin: 2px 0 1px; color: var(--c-testo); }
.a2 .it-sintesi em, .a2 .it-quando em { display: block; font-style: normal; font-size: var(--t-piccolo); color: var(--c-testo-soft); line-height: 1.35; }
.a2 .it-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--s2)); }
.a2 .it-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 340px; color: var(--c-testo); }
.a2 .it-tab-ore { min-width: 620px; }
.a2 .it-tab th, .a2 .it-tab td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--c-bordo); white-space: nowrap; }
.a2 .it-tab thead th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .03em; color: var(--c-testo-soft); font-weight: 700; }
.a2 .it-tab tbody th { font-weight: 600; color: var(--c-testo-soft); white-space: normal; }
.a2 .it-tab tr:last-child td, .a2 .it-tab tr:last-child th { border-bottom: 0; }
.a2 .it-tab small { color: var(--c-testo-soft); }
.a2 .it-wet { background: color-mix(in srgb, var(--c-brand) 12%, transparent); }
.a2 .it-ic { font-size: 15px; }
.a2 .it-nota { background: color-mix(in srgb, var(--c-brand) 10%, transparent); border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: var(--s3); margin: 0 0 var(--s4); font-size: 13.5px; line-height: 1.55; color: var(--c-testo); }
.a2 .it-osservato { background: color-mix(in srgb, #1d6b52 12%, transparent); }
.a2 .it-mappa { height: 320px; border-radius: var(--raggio-m); overflow: hidden; margin: 0 0 var(--s3); background: var(--c-superficie-2); }
.a2 .it-fonte { font-size: var(--t-micro); line-height: 1.55; color: var(--c-testo-soft); margin: var(--s3) 0; }
.a2 .it-ritorno { background: color-mix(in srgb, var(--c-brand) 6%, var(--c-superficie)); }
.a2 .it-box .chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.a2 .it-box .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill); background: var(--c-superficie); color: var(--c-testo); text-decoration: none; font-size: var(--t-piccolo); }
.a2 .it-box .chip:hover { border-color: var(--c-bordo-forte); }
.a2 .back { color: var(--c-brand-forte); text-decoration: none; font-weight: 600; }
@media (max-width: 520px) {
  .a2 .it-sintesi, .a2 .it-quando { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Hub geografici (/comuni, regione, provincia) nella shell A2.
   Stesso corpo di A1, look A2. Scoped .a2 -> A1 invariato.
   ============================================================ */
.a2 .a2-hub { max-width: 900px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s8); }
.a2 .a2-hub-cerca { margin: 0 0 var(--s5); }
.a2 .a2-hub .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: 13px; color: var(--c-testo-soft); margin: 0 0 var(--s4); }
.a2 .a2-hub .breadcrumb a { color: var(--c-testo-soft); text-decoration: none; }
.a2 .a2-hub .breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; }
.a2 .a2-hub .breadcrumb [aria-current="page"] { color: var(--c-testo); font-weight: 600; }
.a2 .a2-hub .bcsep { color: var(--c-bordo-forte); }
.a2 .a2-hub .hero { margin: 0 0 var(--s5); }
.a2 .a2-hub .hello { font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-display); line-height: 1.1; margin: 0 0 var(--s2); color: var(--c-testo); }
.a2 .a2-hub .loc { font-size: var(--t-corpo); color: var(--c-testo-soft); line-height: 1.55; }
.a2 .a2-hub .card { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio-l); padding: var(--s4); margin: 0 0 var(--s4); }
.a2 .a2-hub .dayh { font-size: var(--t-piccolo); color: var(--c-testo-soft); font-weight: 600; }
.a2 .a2-hub .cm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 700px) { .a2 .a2-hub .cm-grid { grid-template-columns: repeat(4, 1fr); } }
.a2 .a2-hub .cm-city { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); padding: 10px 13px; background: var(--c-superficie); color: var(--c-testo); text-decoration: none; }
.a2 .a2-hub .cm-city:hover { border-color: var(--c-bordo-forte); }
.a2 .a2-hub .cm-city b { font-size: 14px; font-weight: 600; }
.a2 .a2-hub .cm-city span { font-family: var(--f-display,'Fraunces',serif); font-size: 18px; font-weight: 600; color: var(--c-brand-forte); }
.a2 .a2-hub .regidx-card h2, .a2 .a2-hub .paesi h2, .a2 .a2-hub .place h2 { font-family: var(--f-display,'Fraunces',serif); font-size: var(--t-h3); margin: 0; color: var(--c-testo); }
.a2 .a2-hub .regidx-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.a2 .a2-hub .regidx-head span, .a2 .a2-hub .place span { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.a2 .a2-hub .regidx, .a2 .a2-hub .paesi-l, .a2 .a2-hub .hublist { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.a2 .a2-hub .regidx-i, .a2 .a2-hub .paesi-i, .a2 .a2-hub .hubitem { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: 10px 12px; border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); background: var(--c-superficie); color: var(--c-testo); text-decoration: none; }
.a2 .a2-hub .regidx-i:hover, .a2 .a2-hub .paesi-i:hover, .a2 .a2-hub .hubitem:hover { border-color: var(--c-bordo-forte); }
.a2 .a2-hub .regidx-i b, .a2 .a2-hub .paesi-i b, .a2 .a2-hub .hubitem b { font-size: var(--t-piccolo); font-weight: 600; }
.a2 .a2-hub .regidx-i span, .a2 .a2-hub .paesi-i span, .a2 .a2-hub .hubitem span { font-size: var(--t-micro); color: var(--c-testo-soft); }
.a2 .a2-hub .paesi { margin-top: var(--s4); }
.a2 .a2-hub .paesi p { font-size: var(--t-piccolo); color: var(--c-testo-soft); margin: var(--s2) 0; }
.a2 .a2-hub .place { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.a2 .a2-hub .chips { display: flex; flex-wrap: wrap; gap: 8px 8px; margin-top: var(--s3); }
.a2 .a2-hub .chips-fitti { gap: 8px 8px; }
.a2 .a2-hub .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill); background: var(--c-superficie); color: var(--c-testo); text-decoration: none; font-size: var(--t-piccolo); line-height: 1.2; }
.a2 .a2-hub .chip:hover { border-color: var(--c-bordo-forte); }

/* §6 Timeline FUTURE zone — predisposta ma DISABLED (resa solo con
   COMEOGGI_RADAR_FUTURE=1). OSSERVATO = pieno; NOW = marker; FUTURE = tratteggio
   con stile distinto, mai dati reali finché il nowcast non è ACTIVATION_READY. */
.a2 .v2-tempo__futuro { display: flex; align-items: center; gap: var(--s2); margin-left: var(--s2); opacity: .5; }
.a2 .v2-tempo__now { width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 25%, transparent); }
.a2 .v2-tempo__proj { font-size: var(--t-micro); color: var(--c-testo-soft); border: 1px dashed var(--c-bordo-forte); border-radius: var(--raggio-pill); padding: 2px 7px; font-variant-numeric: tabular-nums; }

/* §11 Timeline radar consumer-style: thumb grande e track leggibile.
   Solo A2 (.a2), solo frame OSSERVATI reali (i tick/valori vengono dal JS). */
.a2 .v2-tempo__r { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; }
.a2 .v2-tempo__r::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--c-bordo-forte); }
.a2 .v2-tempo__r::-moz-range-track { height: 6px; border-radius: 99px; background: var(--c-bordo-forte); }
.a2 .v2-tempo__r::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--c-brand); }
.a2 .v2-tempo__r::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--c-brand); border: 3px solid var(--c-superficie); box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.a2 .v2-tempo__r::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-brand); border: 3px solid var(--c-superficie); box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.a2 .v2-tempo__r:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.a2 .v2-tempo__l { font-size: var(--t-corpo); }
.a2 .v2-tempo__l #oraFrame { font-weight: 700; font-size: var(--t-h3); font-family: var(--f-display,'Fraunces',serif); }

/* §13/CLS: il foglio local-first è già aperto dal server col target; riservare
   un'altezza minima evita che il riempimento async sposti il layout. */
.a2 .v2-foglio--aperto { min-height: 36dvh; }

/* ======================================================================== */
/*  REDESIGN forecast 2026-08 — evoluzione premium del linguaggio COMEOGGI.  */
/*  Deriva dai token esistenti (Fraunces, blu/ambra, tinte atmosferiche);    */
/*  card elevate, "Adesso" a contrasto pieno, giorni a scheda, hero piu'     */
/*  presente. Nessun glassmorphism/neon; niente valori meteo toccati.        */
/* ======================================================================== */
.a2 {
  --r-card: var(--raggio-l);
  --ombra-card: 0 1px 2px rgba(20,40,60,.05), 0 10px 28px -14px rgba(20,40,60,.16);
  --ombra-card-hi: 0 2px 6px rgba(12,74,140,.18), 0 14px 34px -12px rgba(12,74,140,.34);
  --caldo-1: #f2a65a; --caldo-2: #e8703c;   /* accenti temperatura (solo grafica) */
}
@media (prefers-color-scheme: dark) {
  .a2:not([data-tema="chiaro"]) { --ombra-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.6); }
}

/* --- HERO piu' presente: gradiente piu' profondo + alone morbido -------- */
.a2 .a2-hero {
  padding: var(--s6) var(--s4) var(--s5);
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--atm-1) 70%, #fff) 0%, transparent 55%),
    linear-gradient(158deg, var(--atm-1) 0%, var(--atm-2) 58%, var(--c-fondo) 100%);
}
.a2 .a2-grado { font-size: clamp(64px, 19vw, 88px); font-weight: 600; }
.a2 .a2-icona-grande { width: 84px; height: 84px; filter: drop-shadow(0 6px 14px rgba(20,40,60,.14)); }
.a2 .a2-cond { font-size: var(--t-h3); font-weight: 500; }
.a2 .a2-concl { font-size: clamp(28px, 7.4vw, 38px); margin-top: var(--s5); }

/* --- PROSSIME ORE: strip di card elevate; "Adesso" a contrasto pieno ---- */
.a2 .a2-ore { gap: var(--s3); padding: var(--s1) 2px var(--s4); }
.a2 .a2-ora {
  width: 88px; padding: 14px 8px 16px; border-radius: var(--r-card);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  box-shadow: var(--ombra-card); transition: transform .15s ease;
}
.a2 .a2-ora__h { font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .01em; }
.a2 .a2-ora__i { width: 42px; height: 42px; margin: 8px auto 6px; }
.a2 .a2-ora__t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.a2 .a2-ora__p { font-size: var(--t-micro); color: var(--blu-700); font-weight: 700; }
/* lo slot corrente: pieno, non solo bordato -> "Adesso" si vede al volo */
.a2 .a2-ora--ora {
  background: linear-gradient(165deg, var(--blu-600), var(--blu-900));
  border-color: transparent; box-shadow: var(--ombra-card-hi); transform: translateY(-2px);
}
.a2 .a2-ora--ora .a2-ora__h { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-micro); }
.a2 .a2-ora--ora .a2-ora__t { color: #fff; }
.a2 .a2-ora--ora .a2-ora__p { color: #dbeafe; }
.a2 .a2-ora--ora .a2-ora__i { color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@media (min-width: 900px) { .a2 .a2-ora { width: 96px; } .a2 .a2-ora__i { width: 46px; height: 46px; } }

/* --- PROSSIMI GIORNI: schede, non righe a zebra; barra range marcata ---- */
.a2 .a2-giorni { gap: 8px; }
.a2 .a2-giorno {
  padding: 14px var(--s4); border-radius: var(--r-card);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  box-shadow: var(--ombra-card);
}
.a2 .a2-giorno:nth-child(odd) { background: var(--c-superficie); }   /* niente zebra */
.a2 .a2-giorno:first-child {   /* "Oggi" in evidenza */
  border-color: color-mix(in srgb, var(--blu-600) 40%, var(--c-bordo));
  box-shadow: 0 2px 6px rgba(12,74,140,.10), 0 12px 30px -14px rgba(12,74,140,.24);
}
.a2 .a2-giorno__g { font-family: var(--f-display,'Fraunces',serif); font-weight: 600; font-size: var(--t-corpo); }
.a2 .a2-giorno__i { width: 42px; height: 42px; }
.a2 .a2-giorno__max { font-weight: 800; font-size: var(--t-h3); }
.a2 .a2-arco { width: 74px; height: 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--c-bordo) 70%, transparent); }
.a2 .a2-arco i { height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--blu-400), #7cc0ec 30%, var(--caldo-1) 72%, var(--caldo-2)); }
@media (max-width: 480px) {
  .a2 .a2-giorno { grid-template-columns: 3.3rem 34px 1fr auto; padding: 13px var(--s3); }
  .a2 .a2-arco { width: 52px; }
}

/* --- Sezioni un po' piu' ariose (stesso linguaggio, piu' respiro) ------- */
.a2 .v2-sez__t { letter-spacing: -.01em; }

/* --- titoli di sezione con accento (tocco distintivo, coerente col brand) - */
.a2 main .v2-sez { margin-top: var(--s6); }
.a2 .v2-sez__t {
  display: flex; align-items: baseline; gap: 10px;
}
.a2 .v2-sez__t::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 3px; flex: none;
  background: linear-gradient(var(--blu-600), var(--blu-900));
  transform: translateY(.12em);
}
.a2 .v2-sez__t small { color: var(--c-testo-soft); font-weight: 500; }

/* ======================================================================== */
/*  REDESIGN v2 — trasformazione visiva forte (hero immersivo, metriche,     */
/*  tipografia piu' grande). On-brand COMEOGGI (alba blu->ambra). Nessun      */
/*  dato/valore meteo toccato.                                                */
/* ======================================================================== */

/* --- HERO "OGGI": card immersiva, temperatura protagonista -------------- */
.a2 .a2-hero {
  padding: var(--s6) var(--s4) var(--s5);
  background:
    radial-gradient(90% 70% at 84% -6%, color-mix(in srgb, var(--i-sole) 26%, transparent) 0%, transparent 46%),
    linear-gradient(155deg, color-mix(in srgb, var(--atm-1) 62%, #fff) 0%, var(--atm-1) 34%, var(--atm-2) 74%, var(--c-fondo) 100%);
}
.a2 .a2-hero__alto { align-items: center; gap: var(--s4); }
.a2 .a2-icona-grande { width: 96px; height: 96px; filter: drop-shadow(0 8px 18px rgba(20,40,60,.18)); }
.a2 .a2-grado {
  font-size: clamp(74px, 23vw, 108px); font-weight: 600; line-height: .86; letter-spacing: -.045em;
}
.a2 .a2-cond { font-size: var(--t-h2); font-weight: 600; margin-top: 4px; }
.a2 .a2-minmax { font-size: var(--t-corpo); margin-top: 4px; }

/* riga metriche: pillole nette (nuovo elemento di composizione) */
.a2 .a2-stat {
  display: flex; gap: 8px; margin-top: var(--s4); flex-wrap: wrap;
}
.a2 .a2-stat__i {
  display: flex; flex-direction: column; gap: 1px; min-width: 84px; flex: 1 1 0;
  padding: 10px 12px; border-radius: var(--raggio-m);
  background: color-mix(in srgb, var(--c-superficie) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-bordo) 80%, transparent);
  box-shadow: var(--ombra-1);
}
.a2 .a2-stat__k { font-size: var(--t-micro); color: var(--c-testo-soft); font-weight: 600; letter-spacing: .02em; }
.a2 .a2-stat__v { font-size: var(--t-h3); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.a2 .a2-stat__v small { font-size: .62em; font-weight: 500; color: var(--c-testo-soft); }

.a2 .a2-concl { font-size: clamp(30px, 8vw, 42px); margin-top: var(--s5); line-height: 1.08; }
.a2 .a2-motivo { font-size: var(--t-h3); }

/* --- HOURLY: rinforzo (icone/temperatura piu' grandi) ------------------- */
.a2 .a2-ora { width: 90px; padding: 15px 8px 17px; }
.a2 .a2-ora__i { width: 46px; height: 46px; }
.a2 .a2-ora__t { font-size: 23px; }

/* --- MULTI-DAY: icone piu' presenti, max piu' forte --------------------- */
.a2 .a2-giorno__i { width: 44px; height: 44px; }
.a2 .a2-giorno__g { font-size: var(--t-h3); }
.a2 .a2-giorno__max { font-size: var(--t-h2); }

@media (min-width: 900px) {
  .a2 .a2-icona-grande { width: 124px; height: 124px; }
  .a2 .a2-stat__i { min-width: 120px; flex: 0 1 160px; }
}

/* ======================================================================== */
/*  MAP UI redesign — controlli piu' netti e moderni, radar protagonista.    */
/*  Solo grafica dei controlli: basemap CARTO/valori radar invariati.        */
/* ======================================================================== */
/* livelli: il selezionato e' PIENO (stesso linguaggio della card 'Adesso') */
.a2 .v2-livelli { padding: var(--s3) var(--s4); background: var(--c-fondo); border-bottom: 0; }
.a2 .v2-liv {
  border-radius: var(--raggio-pill); box-shadow: var(--ombra-1);
  border-color: color-mix(in srgb, var(--c-bordo) 90%, transparent);
}
.a2 .v2-liv[aria-pressed="true"] {
  background: linear-gradient(165deg, var(--blu-600), var(--blu-900));
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(12,74,140,.24);
}
.a2 .v2-liv[aria-pressed="true"] .v2-liv__c { color: #fff; }
.a2 .v2-altri > summary { border-style: solid; border-color: var(--c-bordo); box-shadow: var(--ombra-1); }

/* timeline: card FLOTTANTE arrotondata, staccata dai bordi -> mappa piu' ampia */
.a2 .v2--mappa .v2-tempo {
  left: var(--s3); right: var(--s3);
  bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  border: 1px solid color-mix(in srgb, var(--c-bordo) 60%, transparent);
  border-radius: var(--raggio-l);
  background: color-mix(in srgb, var(--c-superficie) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 22px -8px rgba(20,40,60,.28);
  padding: 10px 12px;
}
.a2 .v2-tempo__b {
  width: 44px; height: 44px;
  background: linear-gradient(165deg, var(--blu-600), var(--blu-900));
  border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(12,74,140,.28);
}
.a2 .v2-tempo__b svg rect { fill: #fff; }
/* Attribuzione OSM/CARTO: SEMPRE sopra la timeline flottante, mai dentro.
   L'altezza reale della timeline arriva da JS in --h-tempo (varia per viewport e
   contenuto): l'offset non e' piu' un 76px valido per un solo viewport ma segue
   la barra. La timeline flotta a bottom:var(--s3), quindi l'attribuzione sta a
   s3 + altezza-timeline + 6px, con la safe-area. */
.a2 .v2-mappa-attrib {
  bottom: calc(var(--s3) + var(--h-tempo, 112px) + 6px + env(safe-area-inset-bottom, 0px));
  /* leggibilita' garantita (WCAG AA): testo pieno su sfondo quasi opaco, niente
     opacity che abbassa il contrasto. L'attribuzione deve restare leggibile. */
  font-size: 10.5px; opacity: 1;
  color: var(--c-testo);
  background: color-mix(in srgb, var(--c-superficie) 96%, transparent);
}
/* Foglio del punto aperto: timeline e attribuzione si spostano per non finire
   coperte. Mobile: salgono sopra il bottom-sheet (--h-foglio da JS). Desktop: la
   timeline si restringe per non passare sotto la card laterale del foglio.
   Nessun controllo resta visibile-ma-coperto. */
/* Mobile-first: il bottom-sheet copre il basso -> la timeline si COLLASSA
   (riappare chiudendo il foglio: azione chiara e reversibile) e l'attribuzione
   risale appena SOPRA il foglio, restando leggibile sulla mappa visibile. Cosi'
   niente sovrapposizione con zoom/livelli nemmeno a 320px con foglio esteso. */
.a2 .v2--mappa.mappa--foglio .v2-tempo { display: none; }
.a2 .v2--mappa.mappa--foglio .v2-mappa-attrib {
  bottom: calc(var(--h-foglio, 40dvh) + var(--s3) + env(safe-area-inset-bottom, 0px));
  /* col foglio alto su schermo corto l'attribuzione risale nella banda dei
     comandi zoom (a destra): la si accorcia a sinistra per non toccarli. */
  max-width: calc(100% - 76px);
}
@media (min-width: 768px) {
  /* Desktop: il foglio e' una card a destra (26rem @ right:var(--s5)). La timeline
     resta in basso ma si accorcia per non finirci sotto; l'attribuzione torna
     all'offset normale sopra la timeline. */
  .a2 .v2--mappa.mappa--foglio .v2-tempo {
    display: flex;
    bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    right: calc(26rem + var(--s5) + var(--s3) + var(--s4));
  }
  .a2 .v2--mappa.mappa--foglio .v2-mappa-attrib {
    bottom: calc(var(--s3) + var(--h-tempo, 112px) + 6px + env(safe-area-inset-bottom, 0px));
  }
}
/* Altri livelli: il pannello NON deve essere tagliato dalla riga a scorrimento
   (.v2-livelli ha overflow-x:auto). position:fixed lo estrae dal contenitore che
   clippa; le coordinate le mette il JS sotto il summary. */
.a2 .v2-altri__c {
  position: fixed; z-index: 60; max-height: 70dvh; overflow-y: auto;
  max-width: min(24rem, calc(100vw - 2 * var(--s4)));
}
/* barra top mappa: LIVE badge coerente */
.a2 .v2-vivo { color: var(--blu-700); }

/* --- ritorno evidente dalla mappa alla scheda comune -------------------- */
.a2 .v2-bar__back {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 40px; padding: 0 12px 0 7px; border-radius: var(--raggio-pill);
  background: var(--c-superficie); border: 1px solid var(--c-bordo-forte);
  color: var(--c-testo); font-weight: 700; font-size: var(--t-piccolo);
  text-decoration: none; box-shadow: var(--ombra-1); max-width: 44vw;
}
.a2 .v2-bar__back:active { transform: scale(.97); }
.a2 .v2-bar__back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .a2 .v2-bar--conback .a2-marchio__n { display: none; } }

/* pagina radar (intento) con bottom-nav fissa: il piede a chip non deve finire
   sotto la barra (la scheda comune usa .v2-guscio, qui il layout e' diverso) */
.a2.v2--connav .v2-piede-nav { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .a2.v2--connav .v2-piede-nav { padding-bottom: 0; } }

/* /comuni raggiunta dalla nav di un comune: header col chip di ritorno; su schermi
   stretti si nasconde il nome del marchio per far stare tutto senza andare a capo */
@media (max-width: 560px) { .a2 .a2-testata--conback .a2-marchio__n { display: none; } }

/* ============================================================================
   MINI-MAPPA RADAR STATICA (RC #6, candidato C) — Web-Mercator, senza map-lib.
   Container .a2-radar__vista gia' a dimensione riservata (aspect-ratio 16/10) ->
   CLS 0. Il ritaglio CSS resta come fallback no-JS finche' .mr-live non compare.
   ============================================================================ */
.a2 .a2-radar__vista .mr-tiles { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.a2 .a2-radar__vista .mr-tile { position: absolute; width: 256px; height: 256px; }
.a2 .a2-radar__vista .mr-radar { position: absolute; opacity: .72; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.a2 .a2-radar__vista .mr-marker {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--c-brand); border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); z-index: 2;
}
.a2 .a2-radar__attrib {
  position: absolute; right: 4px; bottom: 4px; z-index: 3;
  font-size: 9px; line-height: 1.3; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--c-superficie) 88%, transparent); color: var(--c-testo-soft);
  max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.a2 .a2-radar__attrib a { color: inherit; }
/* quando la mini-mappa e' viva sostituisce il crop CSS, la scala (~120km) e la
   pillola "nessuna pioggia" non servono (la cartina + overlay dicono gia' tutto) */
.a2 .a2-radar--live-static .a2-radar__tela,
.a2 .mr-live .a2-radar__tela,
.a2 .mr-live .a2-radar__punto,
.a2 .mr-live .a2-radar__scala,
.a2 .mr-live .a2-radar__vuoto { display: none; }
/* prima che la mini sia viva l'attribuzione statica non deve mostrarsi (la mette
   la mini-mappa); resta comunque leggibile quando .mr-live */
.a2 .a2-radar__vista:not(.mr-live) .a2-radar__attrib { display: none; }