/* ============================================================
   Case Bianche — v3, SOLO aggiunte sopra sito/css/style.css (v2)
   Questo file NON tocca sito/css/style.css: viene caricato DOPO,
   in ogni pagina di sito/v3/, e ridefinisce/aggiunge solo quello che
   serve alla v3 (docs/design/struttura-v3.md e, per le modifiche del
   30/09/2026, docs/design/modifiche-v3-2026-09-30.md).

   Regole di design v3 (approvate da Luca il 30/09/2026):
   - TRE BLU (regola di Luca 30/09): pieno #041729 per i fondi grandi (footer, bottoni grandi),
     piu' chiaro per i riempimenti piccoli, ancora piu' chiaro per le linee: vedi --blu-pieno,
     --blu-piccolo, --blu-linea in cima. Il blu pieno e' anche nelle scritte, nei contorni da tastiera e (piu' le
     sfumature scure sopra le foto). Nessuno sfondo blu.
   - Nessun crema: tutte le pagine sono bianche (#FFFFFF).
   - "Solo linee": tutto cio' che e' colorato (verde, rosso, oro,
     azzurro, grigio) e' un CONTORNO continuo sottilissimo, mai un fondo.
   - Linee SEMPRE continue (mai tratteggiate o punteggiate) e
     sottilissime: variabile --linea (1px; 0,5px sugli schermi ad alta
     densita'). UNICA eccezione: il contorno da tastiera (2-3px), che e'
     un obbligo di accessibilita'.
     Se sul telefono il verde a 0,5px non si vede: cambiare SOLO la
     riga "--linea: .5px" qui sotto in "--linea: 1px".
   - Angoli netti (radius 0) nel calendario e nella galleria.
   ============================================================ */

/* ---- Correzione bug trovato testando la v3 ----
   In style.css (v2) alcune classi impongono "display:flex" (es.
   ".messaggio"). Una regola d'autore con la stessa specificità di
   quella predefinita del browser per l'attributo "hidden" vince sempre
   su quella del browser: risultato, un elemento "hidden" che ha anche
   classe ".messaggio" restava visibile (vuoto). Qui si forza sempre
   "display:none" quando c'è l'attributo "hidden", qualunque classe
   abbia l'elemento. */
[hidden]{ display: none !important; }

/* ============================================================
   CARATTERI OSPITATI SUL SITO (2026-10-30)
   Questrial (testi) e Bodoni Moda (titoli) stanno in assets/fonts/ e non si chiedono piu' ai server di Google
   (cosi' l'indirizzo IP del visitatore non arriva a Google senza consenso). Sono gli STESSI file che Google
   serviva (versioni Questrial v19 e Bodoni Moda v28), stessi pesi (400/500/700) e stessi unicode-range:
   il browser scarica solo i pezzi che servono alla pagina. Licenza OFL: assets/fonts/OFL-*.txt.
   Bodoni Moda e' un file unico per tutti i pesi (variabile): per questo i tre pesi puntano allo stesso file.
   Non incluso di proposito: il vietnamita di Questrial (il sito e' in it/en/pt/fr/de).
   ============================================================ */
/* Bodoni Moda 400 math */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-math.woff2) format("woff2");
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
/* Bodoni Moda 400 symbols */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-symbols.woff2) format("woff2");
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda 400 latin-ext */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda 400 latin */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Bodoni Moda 500 math */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-math.woff2) format("woff2");
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
/* Bodoni Moda 500 symbols */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-symbols.woff2) format("woff2");
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda 500 latin-ext */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda 500 latin */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Bodoni Moda 700 math */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-math.woff2) format("woff2");
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
/* Bodoni Moda 700 symbols */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-symbols.woff2) format("woff2");
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda 700 latin-ext */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda 700 latin */
@font-face{ font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/bodoni-moda-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Questrial 400 latin-ext */
@font-face{ font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/questrial-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Questrial 400 latin */
@font-face{ font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/questrial-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   0. COLORI E SPESSORE DELLE LINEE (tabella §2 della specifica)
   Le variabili di style.css (v2) vengono ridefinite qui: la v2 resta
   identica perche' questo file si carica solo nelle pagine di sito/v3/.
   ============================================================ */
:root{
  --bianco-caldo: #FFFFFF;          /* il crema e' tolto: pagine tutte bianche */
  --bordo: #EEECE8;                 /* linea decorativa (non porta informazioni) */
  /* ---- I TRE BLU (regola di Luca, 30/09/2026) ----
     "Se c'e' un riempimento grosso usa il blu che ti ho dato (#041729);
      se c'e' un riempimento piu' piccolo schiariscilo un po'; se c'e' una
      linea schiariscilo di piu'."
     --blu-pieno    #041729  fondi pieni GRANDI: footer, bottoni grandi ("Prenota", "Continua")
     --blu-piccolo  #163F6B  riempimenti PICCOLI: pulsanti piccoli, elemento scelto piccolo,
                             pallino del video (bianco su questo blu = 10,9:1)
     --blu-linea    #1E466A  LINEE e contorni blu (via di mezzo tra #3975AC e #041729): bordi, frecce, riga sotto le date, giorno
                             scelto (circa 10:1 su bianco)
     Per cambiare un tipo di blu in tutto il sito basta cambiare la riga qui sotto.
     Restano scuri (#041729) solo: i testi, i contorni da tastiera (obbligo di accessibilita')
     e le sfumature scure sopra le foto. */
  --blu-pieno: #041729;
  --blu-piccolo: #163F6B;
  --blu-piccolo-hover: #1D4E7C;
  --blu-linea: #1E466A;
  /* ---- COLORI SCELTI DAL TITOLARE (pannello > Impostazioni > Colori del sito; js/colori-sito.js) ----
     Quattro colori: RIEMPIMENTI (--blu-pieno e parenti), LINEE (--blu-linea e parenti), TITOLI (le scritte blu: --c-titoli) e TESTO (--testo).
     Qui ci sono i valori di oggi; se il Titolare ne sceglie altri, js/colori-sito.js li scrive in un foglio di stile in testa alla pagina. */
  --c-titoli: #041729;      /* titoli e scritte blu (prima erano --blu-pieno / --blu-primario / --blu-accento) */
  --c-titoli-2: #163F6B;    /* collegamenti e piccole etichette blu (prima --blu-piccolo) */

  --blu-primario: var(--blu-pieno);   /* nome usato da style.css (v2) per i fondi grandi e i testi */
  --blu-primario-hover: #163552;
  --blu-accento: var(--blu-pieno);    /* prima #3174AF: ora lo stesso blu */
  --blu-accento-hover: #163552;
  --blu-scurissimo: #041729;
  --blu-scuro-intermedio: #163552;
  --blu-chiaro-su-scuro: #2B4661;   /* linee sul footer blu */
  --bordo-su-scuro: #2B4661;
  --testo-secondario: #66727F;      /* non piu' chiaro: 4,9:1 su bianco */
  --ap-inchiostro: #041729;
  /* COLORE DELLE SCRITTE (richiesta di Luca 30/09/2026: non nero, ma grigio scuro).
     #3A3F44 su bianco = 10,6:1. Il testo secondario (#66727F, 4,9:1) resta piu' chiaro.
     Il blu #041729 resta solo per marca: bottoni, footer, linee, focus, link. */
  --testo: #3A3F44;

  /* Segnaposto ("DA DEFINIRE"): solo contorno. */
  --segnaposto-bg: #FFFFFF;         /* fondo tolto */
  --segnaposto-testo: #5A4A1F;
  --segnaposto-linea: #9C8646;
  /* Messaggi: solo contorno + testo colorato. */
  --errore: #B23F38;
  --successo: #327A55;
  /* Calendario a NOTTI (2/10 pomeriggio): suite OCCUPATE = blu #1E466A, suite LIBERE = bianco con il prezzo in blu. */
  --fondo-occupato: var(--blu-pieno);    /* occupato = blu preciso di Luca #041729 (3/10; prima #1E466A), libero = bianco con prezzo */
  --linea-occ: #B8BFC7;             /* resta solo per le linee grigie di caricamento (.suite-linea) */
  /* WhatsApp: non piu' fondo verde, ma contorno (la scritta e' blu). */
  --whatsapp: #4A9A6E;
  /* Linee di stato del calendario. */
  --libero-linea: #4A9A6E;          /* camera libera (3,42:1 su bianco) */
  --occ-segno: #7A838D;             /* camera occupata (3,85:1) */
  --azzurro-linea: #4A79A6;         /* passaggio del mouse (3,47:1 sul blu libero, 4,59:1 sul bianco) */

  /* LINEA SOTTILISSIMA: 1px sugli schermi normali; 0,5px (un solo punto
     dello schermo) su telefoni e Mac. */
  --linea: 1px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  :root{ --linea: .5px; }
}

/* ---- Linguaggio "smooth" (2/10/2026): UN SOLO posto per curva e durate ----
   Tutti i cambi morbidi del sito usano queste variabili. Con "riduci le animazioni" diventano tutti 0 ms.
   Tre regole (docs/design/ritocchi-suite-2026-10-02.md, sezione B):
   1. cambia lo STATO di un elemento (colore, linea, velo): transition con --t-rapido o --t-vetro;
   2. cambia il CONTENUTO (testo, costi, totale): si aggiorna sul posto e si da' la classe .rivela (comparsa);
   3. APPARE o SCOMPARE un blocco: spazio riservato + opacita', oppure altezza animata con .apri. */
:root{
  --curva: cubic-bezier(.3, .7, .2, 1);
  --t-rapido: 160ms;    /* colori, linee, bordi, passaggio del mouse */
  --t-medio: 280ms;     /* comparsa/scomparsa di testi, pulsanti, totali */
  --t-altezza: 320ms;   /* aperture e chiusure in altezza */
  --t-tendina: 360ms;   /* tendina delle foto */
  --t-vetro: 450ms;     /* velo bianco stile Home */
  --t-linea: 900ms;     /* linea tra le suite (entrata) */
}
@media (prefers-reduced-motion: reduce){
  :root{ --t-rapido: 0ms; --t-medio: 0ms; --t-altezza: 0ms; --t-tendina: 0ms; --t-vetro: 0ms; --t-linea: 0ms; }
  .rivela{ animation: none; }
}
/* Comparsa di un contenuto che cambia (testo, costi, totale): solo opacita' e 6 px di scorrimento */
@keyframes cb-rivela{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.rivela{ animation: cb-rivela var(--t-medio) var(--curva) both; }
/* Blocco che si apre/chiude in altezza (senza salti). Chiuso e' anche escluso da Tab e dai lettori di schermo. */
.apri{ display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--t-altezza) var(--curva), opacity var(--t-medio) ease, visibility 0s linear var(--t-altezza); }
.apri > *{ min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }   /* il padding evita di tagliare il contorno da tastiera */
.apri.is-aperto{ grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--t-altezza) var(--curva), opacity var(--t-medio) ease, visibility 0s; }

/* Tutti i pulsanti: passaggio del mouse e pressione morbidi */
.btn{ transition: background-color var(--t-rapido) ease, border-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease, color var(--t-rapido) ease; }

/* TRE TASTI A SINISTRA (2/10 pomeriggio, richiesta di Luca): Home, Area personale, Contatti. Su tutte le pagine tranne la Home, il pannello e le
   pagine orfane camera-N. Rettangoli PIU' LARGHI CHE ALTI, uguali tra loro e impilati, attaccati al bordo sinistro dello schermo: il lato sinistro
   non c'e' (niente linea a sinistra: finisce lo schermo). Fondo molto trasparente (vetro: bianco 22% + sfocatura), scritta e icona blu.
   Telefono: solo l'icona (rettangolo piu' piccolo); la scritta resta per i lettori di schermo. Da 900 px: icona + scritta. */
.tasti-sx{
  position: fixed; top: 12px; left: 0; z-index: 200;
  display: grid; gap: 6px; width: max-content;
}
.tasto-sx{
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; box-sizing: border-box;
  min-width: 58px; height: 38px; padding: 0 14px 0 16px;
  background: rgba(255, 255, 255, .34); color: var(--c-titoli);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 70, 106, .55); border-left: 0; border-radius: 0;
  font-size: calc(14px * var(--s, 1)); line-height: 1; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 255, 255, .9);
  transition: box-shadow var(--t-rapido) ease, background-color var(--t-rapido) ease;
}
.tasto-sx svg{ flex: none; width: 22px; height: 22px; }
.tasto-sx__testo{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tasto-sx:hover{ box-shadow: inset 0 0 0 1px var(--blu-linea); background: rgba(255, 255, 255, .45); }
.tasto-sx[aria-current="page"]{ background: rgba(255, 255, 255, .5); }
.tasto-sx:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 2px; }
/* Computer: i rettangoli restano da 58 px (solo icona) per non coprire il testo delle pagine; passandoci sopra (o con Tab) si allargano e mostrano il nome.
   Sugli schermi larghi (da 1500 px) il nome si vede sempre: a sinistra del testo c'e' abbastanza spazio. */
@media (min-width: 900px){
  .tasti-sx{ top: 20px; gap: 8px; }
  .tasto-sx{ height: 42px; width: 58px; min-width: 0; padding: 0 0 0 18px; overflow: hidden; transition: width var(--t-medio) var(--curva), box-shadow var(--t-rapido) ease, background-color var(--t-rapido) ease; }
  .tasto-sx__testo{ position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; opacity: 0; transition: opacity var(--t-medio) ease; }
  .tasto-sx:hover, .tasto-sx:focus-visible{ width: 156px; }
  .tasto-sx:hover .tasto-sx__testo, .tasto-sx:focus-visible .tasto-sx__testo{ opacity: 1; }
}
@media (min-width: 1500px){
  .tasto-sx, .tasto-sx:hover, .tasto-sx:focus-visible{ width: 168px; padding-right: 18px; }
  .tasto-sx__testo{ opacity: 1; }
}

/* Con "riduci le animazioni" nessuno scorrimento morbido. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ============================================================
   1. TESTI PIU' PICCOLI (§1): il testo di lettura non scende sotto
   16px; i campi dei moduli restano a 16px (sotto, l'iPhone
   ingrandisce da solo la pagina).
   ============================================================ */
body{ font-size: calc(16px * var(--s, 1)); line-height: 1.6; }
/* Scala delle scritte (richieste di Luca del 2026-10-24: pagine secondarie -30%, poi +15%:
   .7 x 1.15 = .805). Ogni font-size del sito e' "misura x var(--s, 1)": qui --s vale .805
   dentro il contenuto (main) delle pagine; la Home lo rimette a 1 (style sul suo <main>).
   Menu e pie' di pagina stanno fuori da main e restano come nella Home. Per cambiare la
   misura basta cambiare .805. La riga font-size serve alle scritte senza misura propria.
   --larg allarga le righe dei testi (le max-width in "ch" sono "misura x var(--larg, 1)"):
   1.6 = righe molto piu' lunghe, si va a capo piu' tardi (stessa richiesta). */
main{ --s: .805; --larg: 1.6; font-size: calc(1em * var(--s, 1)); }
h1{ font-size: calc(30px * var(--s, 1)); }
h2{ font-size: calc(24px * var(--s, 1)); }
h3{ font-size: calc(16px * var(--s, 1)); }
.eyebrow{ font-size: calc(12px * var(--s, 1)); }
.btn{ font-size: calc(15px * var(--s, 1)); border-width: var(--linea); }
.messaggio{ font-size: calc(16px * var(--s, 1)); }
.footer__colonna h3{ font-size: calc(15px * var(--s, 1)); }
.footer__basso{ font-size: calc(13px * var(--s, 1)); }
@media (min-width: 900px){
  body{ font-size: calc(17px * var(--s, 1)); }
  h1{ font-size: calc(38px * var(--s, 1)); }
  h2{ font-size: calc(28px * var(--s, 1)); }
  h3{ font-size: calc(18px * var(--s, 1)); }
  p{ font-size: calc(17px * var(--s, 1)); }
  .eyebrow{ font-size: calc(13px * var(--s, 1)); }
}

/* ---- Font — richiesta di Luca del 2026-10-15: torna al font precedente ----
   Tra l'11/10/2026 e il 15/10/2026 qui c'era "Bodoni Moda"/"Bodoni MT" (serif),
   introdotto in via provvisoria l'11/10 e mai confermato da Luca. Il 15/10/2026
   Luca ha chiesto di tornare al font di prima per TUTTO il sito, con UNA sola
   eccezione: il nome proprio "Case Bianche" e il nome proprio "Boa Vista",
   quando compaiono DA SOLI come titolo/logo testuale/intestazione (non dentro
   una frase più lunga), restano in Bodoni. Questi punti hanno un font-family
   scritto a mano, quindi NON seguono questa variabile e non sono stati toccati:
   - sito/css/style.css, .apertura__titolo e .apertura__sottotitolo (il nome e
     il sottotitolo "Boa Vista" nella Home);
   - sito/v3/css/v3.css, qui sotto: .footer__griglia .footer__colonna:first-child h3
     (il "logo" testuale ripetuto nel footer di ogni pagina);
   - sito/v3/css/app-ospiti.css, .app-testata__marchio (il nome nell'intestazione
     dell'app installata sul telefono).
   I titoli che contengono il nome dentro una frase più lunga (es. "Aperitivi a
   Case Bianche", "Il mare a Boa Vista") NON sono stati divisi parola per
   parola: tornano interamente al font normale, insieme al resto della pagina
   (dividerli a metà avrebbe richiesto riscrivere i testi it/en/pt in HTML
   invece che testo semplice, con più rischio; da confermare con Luca se li
   vuole davvero spezzati). */
:root{
  --font-titoli: "Century Gothic", Questrial, Arial, sans-serif;
  --font-corpo: "Century Gothic", Questrial, Arial, sans-serif;
}
/* Con un font sans-serif il testo non ha più bisogno della riga più
   larga che serviva a Bodoni Moda (font stretto e con grazie): qui i
   titoli tornano a una spaziatura un filo più chiusa, più leggibile. */
h1, h2{ letter-spacing: .02em; }
.eyebrow{ font-style: normal; } /* Questrial non ha un corsivo vero */
/* Eccezione (vedi commento sopra): il "logo" testuale "Case Bianche" ripetuto
   nel footer di ogni pagina resta nel font del marchio (Bodoni). Selettore
   legato alla struttura del footer (prima colonna, primo h3), non a una nuova
   classe: la struttura è identica in tutte le pagine di sito/v3/. */
.footer__griglia .footer__colonna:first-child h3{ font-family: "Bodoni MT", "Bodoni Moda", Georgia, serif; }

/* ============================================================
   2. "SOLO LINEE" sui componenti di style.css (v2) usati dalla v3
   Ogni fondo colorato diventa contorno continuo sottilissimo.
   ============================================================ */
/* Sezioni "alternate": prima crema, ora semplicemente bianche. Nessuna linea
   di separazione tra le sezioni (richiesta di Luca del 30/09/2026): lo
   stacco lo fa solo lo spazio bianco. */

/* Etichette "DA DEFINIRE": contorno oro, testo marrone. */
.badge-segnaposto{
  background: transparent;
  color: var(--segnaposto-testo);
  border: var(--linea) solid var(--segnaposto-linea);
}
/* ...ma dentro il footer blu il marrone non si leggerebbe: testo chiaro e
   linea chiara (ripiego dello sviluppatore, la specifica non prevedeva
   etichette nel footer). */
.footer .badge-segnaposto{
  color: #C9D8E6;
  border-color: rgba(255,255,255,.55);
}

/* Messaggi: niente fondo rosa/verdino, solo contorno + testo. */
.messaggio--successo{ background: transparent; color: var(--successo); border: var(--linea) solid var(--successo); }
.messaggio--errore{ background: transparent; color: var(--errore); border: var(--linea) solid var(--errore); }
.messaggio--info{ background: transparent; color: var(--testo); border: var(--linea) solid var(--bordo); }

/* Riquadro "foto in arrivo": bianco, linea continua. */
.foto-in-arrivo{
  background: transparent;
  border: var(--linea) solid var(--occ-segno);   /* era tratteggiato */
}

/* Bottoni: al passaggio del mouse cambia la LINEA, non un fondo. */
.btn--secondario:hover{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) var(--blu-linea);
}
.btn--whatsapp{
  background: transparent;
  color: var(--testo);
  border-color: var(--whatsapp);
}
.btn--whatsapp:hover{
  filter: none;
  border-color: var(--blu-linea);
  box-shadow: inset 0 0 0 var(--linea) var(--blu-linea);
}
.btn--disabilitato, .btn:disabled{
  background: transparent;
  border-color: #D9D6D0;
  color: var(--testo-secondario);
}
.lang-btn:not([aria-current="true"]):hover{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) currentColor;
}

/* Footer: blu pieno (consentito). Il bottone "Prenota" diventa contorno
   bianco sottile con scritta bianca. Il passaggio del mouse sui link
   usa il bianco (con il blu #041729 la scritta sparirebbe). */
.footer a:hover{
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: var(--linea);
  text-underline-offset: 3px;
}
/* Bersagli da toccare (D8, 25/10): i link del piè di pagina sono alti 16px e il link "Sito" dei
   Servizi largo 22px. L'area che risponde al dito si allarga con un riquadro INVISIBILE
   (nessun cambio di aspetto ne' di spazi): 26px di altezza nel piè di pagina, 34px di larghezza
   per "Sito". Non tocca i link dentro le frasi (esenti dalla regola WCAG 2.5.8). */
.footer li a, .srv-voce__a{ position: relative; }
.footer li a::after{ content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.srv-voce__a::after{ content: ""; position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; }
.footer .btn--accento{
  background: transparent;
  color: #FFFFFF;
  border: var(--linea) solid #FFFFFF;
}
.footer .btn--accento:hover{
  background: transparent;
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--linea) #FFFFFF;
}
.footer .lang-btn[aria-current="true"]{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) #FFFFFF;
}
.footer :focus-visible{ outline-color: #FFFFFF; }

/* Icona WhatsApp fluttuante: resta a linee, in --blu-linea (l'icona ha
   il colore scritto nell'HTML come "stroke", qui lo si ridefinisce). */
.whatsapp-flottante{
  color: var(--blu-linea);
  border: var(--linea) solid var(--blu-linea);
}
.whatsapp-flottante svg{ stroke: var(--blu-linea); }

/* CORREZIONE (2026-10-13, segnalazione di Luca "una cosa in basso nella Home"):
   l'icona WhatsApp e' fissa in basso a sinistra (20px dal bordo + 48px di altezza
   = 68px occupati). Arrivati in fondo alla pagina copriva l'ultima riga del
   footer: su telefono il link "Privacy", su schermo largo l'inizio del
   "(c) 2026 Case Bianche...". Qui si lascia sotto l'ultima riga lo spazio che
   l'icona occupa (68px) piu' un margine, cosi' niente finisce piu' dietro
   l'icona. Vale per tutte le pagine con il footer. */
.footer{ padding-bottom: 88px; }

/* Campi dei moduli: il contorno deve vedersi (una linea che porta
   un'informazione ha bisogno di almeno 3:1 di contrasto: #EEECE8 sul
   bianco e' solo 1,18:1). Grigio #7A838D (3,85:1), continuo e sottile.
   Aggiunto anche il campo password, che in style.css (v2) non era
   previsto e restava senza stile. Il testo resta a 16px. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="password"],
.campo select,
.campo textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: var(--linea) solid var(--occ-segno);
  border-radius: var(--radius);
  font-family: var(--font-corpo);
  font-size: 16px; /* FISSO, fuori da var(--s): sotto 16px l'iPhone ingrandisce la pagina */
  color: var(--testo);
  background: var(--bianco);
}
.campo.campo--errore input,
.campo.campo--errore select,
.campo.campo--errore textarea{ border-color: var(--errore); }

/* ============================================================
   3. Rettangolo "La tua prenotazione" della Home (2/10 pomeriggio, richiesta di Luca)
   Largo quanto le due foto Suite e Colazioni (sta nello stesso .contenitore, sopra la griglia).
   Scollegato: fondo bianco, linea e scritta blu. Collegato (classe --loggato, messa da js/sessione.js): fondo blu pieno, scritta bianca.
   ============================================================ */
.cta-prenotazione{
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 72px; margin: 0 0 24px; padding: 18px 20px;
  background: #fff; color: var(--c-titoli);
  border: 1px solid var(--blu-linea); border-radius: 0;
  font-size: calc(18px * var(--s, 1)); letter-spacing: .04em; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-rapido) ease, color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.cta-prenotazione:hover{ box-shadow: inset 0 0 0 1px var(--blu-linea); }   /* come i pulsanti: cambia la linea, non il fondo */
.cta-prenotazione:focus-visible{ outline: 3px solid var(--blu-pieno); outline-offset: 3px; }
.cta-prenotazione--loggato{ background: var(--blu-pieno); color: #fff; border-color: var(--blu-pieno); }
.cta-prenotazione--loggato:hover{ background: var(--blu-primario-hover); box-shadow: none; }
.cta-prenotazione--loggato:focus-visible{ outline-color: var(--blu-linea); }
@media (min-width: 768px){ .cta-prenotazione{ margin-bottom: 32px; min-height: 80px; font-size: calc(20px * var(--s, 1)); } }

/* ============================================================
   4. Testata ridotta ".fascia-superiore" (struttura-v3.md §3.2, §4)
   ============================================================ */
.fascia-superiore{
  width: 100%;
  height: 25vh;
  min-height: 200px;
  overflow: hidden;
}
.fascia-superiore img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Nome "CASE BIANCHE" sopra la foto, centrato in basso: stesso stile del nome nella Home
   ma piu' piccolo (circa 40%), nero (richiesta di Luca del 2026-10-24). Scritto dal CSS,
   cosi' vale su tutte le pagine con la striscia senza toccare l'HTML. */
.fascia-superiore{ position: relative; }
.fascia-superiore::after{
  content: "Case Bianche";
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 2;
  text-align: center;
  font-family: "Bodoni MT", "Bodoni Moda", Georgia, serif;
  font-weight: 400;
  font-size: clamp(8.45px, 1.95vw, 16.9px);   /* -35% (Luca, 2026-10-24; era clamp(13px, 3vw, 26px)); fuori dalla scala --s */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .65em;
  padding-left: .65em;          /* compensa lo spazio dopo l'ultima lettera: il nome resta centrato */
  white-space: nowrap;
  color: #000;
  pointer-events: none;
}
.fascia-superiore-testo{ padding-top: 28px; }
/* Titolo e testo centrati — solo pagina Suite (richiesta di Luca, 13/10/2026).
   Selettore doppio di proposito: scatta solo dove compaiono entrambe le classi. */
.fascia-superiore-testo.centro .intro-pagina{ margin-inline: auto; }

/* ============================================================
   5. CALENDARIO DI DISPONIBILITA' (pagina Camere)
   Ogni giorno e' un piccolo quadrato con DUE rettangoli:
     sopra = camere singole (1 letto)   sotto = camere doppie (2 letti)
   Un rettangolo e' LIBERO se almeno una camera di quel tipo e' libera,
   OCCUPATO se sono tutte occupate (mai quante, mai quali).
   Angoli netti; linee continue sottilissime; nessun riempimento.
   Regole portate da docs/design/bozze-v3/anteprima-modifiche-2026-09-30.html
   (sezione CALENDARIO); classi rinominate con il prefisso "cal-".
   ============================================================ */
.cal-wrap{ container-type: inline-size; margin: 20px 0 12px; }
.cal{ --q: 56px; --gap: 8px; --fade: 22px; --etl: 58px; --linea-q: #D0CCC5; }
@container (min-width: 640px){
  .cal{ --q: 68px; --gap: 10px; --fade: 56px; --etl: 124px; }
}

/* In alto, al centro: ‹ Ottobre ›   ‹ 2026 ›  — frecce sottili che puntano
   verso l'esterno, niente tendine ne' menu del browser. Il segno e' sottile
   (1px) ma l'area di tocco resta di 40x44 px. */
.cal-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 20px; margin-bottom: 10px; }
@container (min-width: 640px){ .cal-top{ gap: 0 44px; } }
.cal-nav{ display: inline-flex; align-items: center; }
.cal-fr{
  width: 40px; height: 44px; padding: 0;
  border: 0; background: none; border-radius: 0;
  cursor: pointer; color: var(--blu-linea);
  display: grid; place-items: center;
  transition: color var(--t-rapido) ease;
}
.cal-fr svg{ width: 14px; height: 14px; }
.cal-fr:hover{ color: var(--azzurro-linea); }            /* cambia il colore della linea, non il fondo */
.cal-fr:focus-visible{ outline: 2px solid var(--blu-primario); outline-offset: -4px; }
.cal-fr[aria-disabled="true"]{ opacity: .3; cursor: default; }
.cal-fr[aria-disabled="true"]:hover{ color: var(--blu-linea); }
/* Larghezza fissa per il nome del mese: le frecce non "ballano" cambiando mese. */
.cal-nome{ min-width: 5.6em; text-align: center; font-size: calc(17px * var(--s, 1)); line-height: 44px; color: var(--testo); white-space: nowrap; }
.cal-nome--anno{ min-width: 2.9em; }

.cal-body{ display: flex; align-items: flex-start; }
.cal-eti{
  flex: 0 0 var(--etl); height: var(--q); margin-top: 8px;
  padding: var(--linea) 8px;
  display: flex; flex-direction: column;
  font-size: calc(12px * var(--s, 1)); line-height: 1.05; color: var(--testo-secondario); text-align: right;   /* telefono: 2 righe stanno dentro la riga del loro rettangolo (28px) */
}
.cal-eti__voce{ flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; }

/* Striscia scorrevole: bordi destro e sinistro che sfumano. La sfumatura e'
   solo grafica: i giorni sotto restano toccabili. */
.cal-scroller{
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--fade);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.cal-scroller::-webkit-scrollbar{ display: none; }
.cal-scroller.is-drag{ scroll-snap-type: none; cursor: grabbing; }
.cal-scroller{ -webkit-user-select: none; user-select: none; }
/* Spazio in alto 8px: serve a non tagliare il contorno da tastiera (2px + 3px di distacco). */
.cal-track{ position: relative; display: flex; gap: var(--gap); padding: 8px 0 18px var(--fade); width: max-content; }
.cal-track::after{ content: ""; flex: 0 0 var(--fade); }

.cal-g{
  flex: 0 0 var(--q); width: var(--q); padding: 0; border: 0; background: none; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  scroll-snap-align: start; -webkit-tap-highlight-color: transparent; text-align: center;
}
.cal-q{
  display: flex; flex-direction: column; width: 100%; height: var(--q);
  padding: 0; border: var(--linea) solid var(--linea-q); border-radius: 0; background: #fff;
  transition: border-color var(--t-rapido) ease;
  position: relative;
}
/* Cornice (mouse sopra e giorno scelto): e' un livello disegnato SOPRA le due meta'.
   Con un "outline" il fondo verde delle meta' libere copriva parte del bordo (bug del 30/09). */
.cal-q::after{
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  top: calc(-1 * var(--linea)); right: calc(-1 * var(--linea)); bottom: calc(-1 * var(--linea)); left: calc(-1 * var(--linea)); border: 0;
  box-shadow: 0 0 0 0 transparent;                 /* partenza della cornice: nessuna (cosi' compare in modo morbido) */
  transition: box-shadow var(--t-rapido) ease;
}
/* Solo DUE linee per giorno: il quadrato esterno e una linea orizzontale al
   centro che divide le singole (sopra) dalle doppie (sotto). */
.cal-st{
  flex: 1 1 0; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 0;
}
.cal-st + .cal-st{ border-top: var(--linea) solid var(--linea-q); }
/* PREZZO A NOTTE dentro il rettangolo (sopra: suite singola, sotto: suite doppia).
   I prezzi stanno in js/prezzi-v3.js.
   COLORI (richiesta di Luca, 2/10 pomeriggio): OCCUPATO = blu pieno #041729 (--fondo-occupato; 3/10, prima #1E466A), senza prezzo; LIBERO = bianco con il prezzo in blu.
   Quattro stati (si prenota a NOTTE: le due meta' sono solo grafica, nessun orario scritto):
     lib = tutto bianco     sx = bianco solo a sinistra, blu a destra     dx = blu a sinistra, bianco solo a destra
     occ = tutto blu, SENZA prezzo.
   Nelle meta' libere il prezzo sta al centro della meta' bianca; il numero e' senza "€" (spazio stretto).
   Il colore non e' mai l'unico segnale: c'e' il prezzo (solo sul libero) e l'etichetta per i lettori di schermo. Niente linee oblique ne' tratteggi. */
.cal-prezzo{ font-size: calc(12px * var(--s, 1)); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (min-width: 640px){ .cal-prezzo{ font-size: calc(13px * var(--s, 1)); } }
@container (min-width: 640px){ .cal-eti{ font-size: calc(13px * var(--s, 1)); line-height: 1.25; } }
.cal-st{ background-clip: padding-box; }   /* bordo e linea centrale restano netti sopra i fondi */
.cal-st--lib, .cal-st--sx, .cal-st--dx{ color: var(--c-titoli); }
.cal-st--lib{ background-color: #fff; }
/* mezzo e mezzo: gradiente 50/50 netto; il padding spinge il prezzo al centro della meta' bianca (libera) */
.cal-st--sx{ background-color: #fff; background-image: linear-gradient(90deg, transparent 50%, var(--fondo-occupato) 50%); padding-right: 50%; }
.cal-st--dx{ background-color: #fff; background-image: linear-gradient(90deg, var(--fondo-occupato) 50%, transparent 50%); padding-left: 50%; }
.cal-st--occ{ background-color: var(--fondo-occupato); }
@media (forced-colors: active){
  .cal-st--occ{ border: 1px solid CanvasText; }
  .cal-st--sx{ border-right: 3px solid CanvasText; }
  .cal-st--dx{ border-left: 3px solid CanvasText; }
}
.cal-n{ margin-top: 6px; height: 36px; line-height: 1.15; }
.cal-n b{ display: block; font-weight: 400; font-size: calc(15px * var(--s, 1)); color: var(--testo); }
.cal-n i{ display: block; font-style: normal; font-size: calc(13px * var(--s, 1)); color: var(--testo-secondario); margin-top: 2px; }
@media (hover: hover){
  /* passaggio del mouse: cornice ESTERNA da 2px, separata dal blu dal filo bianco del rettangolo */
  .cal-g:not([disabled]):not(.cal-g--arr):not(.cal-g--par):hover .cal-q::after{ box-shadow: 0 0 0 2px var(--azzurro-linea); }
}
/* GIORNO SCELTO (arrivo e partenza) = cornice ESTERNA da 3px --blu-linea, sopra lo spazio bianco tra i giorni;
   il bordo del rettangolo diventa un filo bianco, cosi' la cornice si stacca dal blu e non tocca il prezzo. */
.cal-g--arr .cal-q, .cal-g--par .cal-q{ border-color: #fff; }
.cal-g--arr .cal-q::after, .cal-g--par .cal-q::after{ box-shadow: 0 0 0 3px var(--blu-linea); }
.cal-g:focus-visible{ outline: none; }
/* unica eccezione allo spessore: il contorno da tastiera (obbligo di accessibilita') */
.cal-g:focus-visible .cal-q{ outline: 2px solid var(--blu-primario); outline-offset: 3px; }
/* giorno scelto da tastiera: tiene la cornice e in piu' ha un contorno scuro staccato di 5px */
.cal-g--arr:focus-visible .cal-q, .cal-g--par:focus-visible .cal-q{ outline: 2px solid var(--blu-pieno); outline-offset: 5px; box-shadow: none; }
/* Giorni troppo vicini all'arrivo (meno del minimo di notti): attenuati; il tocco spiega "Minimo N notti" nel riepilogo */
.cal-g--min .cal-q{ opacity: .4; }
.cal-g--min .cal-n{ opacity: .55; }
.cal-g--min{ cursor: not-allowed; }
.cal-g[disabled]{ cursor: not-allowed; }
.cal-g[disabled] .cal-q{ opacity: .45; }
.cal-g[disabled] .cal-n{ opacity: .55; }
/* caricamento: linea grigia continua che "respira" (niente fondo sfumato, niente tratteggio) */
.cal-g--scheletro .cal-q{ border-color: var(--occ-segno); animation: cal-respira 1.4s ease-in-out infinite; }
.cal-g--scheletro .cal-q > *, .cal-g--scheletro .cal-n > *{ visibility: hidden; }
@keyframes cal-respira{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }

/* ---- Calendario di UNA suite (variante .cal--una): un solo rettangolo per giorno, niente etichette ---- */
.cal--una .cal-q{ height: 34px; }
@container (min-width: 640px){ .cal--una .cal-q{ height: 40px; } }
.cal--una .cal-st{ min-height: 0; }

/* Legenda sotto il calendario: tre mini-campioni con lo stesso disegno dei rettangoli */

/* Sotto i giorni (richiesta del 30/09):
   primo tocco  = compare un PUNTO blu sotto il giorno d'arrivo, con un piccolo "sboccio";
   secondo tocco = il punto si ALLUNGA fino al giorno di partenza e diventa la riga sottile (1px).
   Il punto e' 2px (a 1px non si vedrebbe) e mentre si allunga si assottiglia a 1px.
   Il diametro del punto e' ripetuto in js/calendario.js (PUNTO). */
.cal-riga{
  position: absolute; left: 0; bottom: 8px; height: 2px; width: 2px; border-radius: 1px;
  background: var(--blu-linea); opacity: 0; transform: scale(0); pointer-events: none;
  transition: left .42s cubic-bezier(.3, .7, .2, 1), width .42s cubic-bezier(.3, .7, .2, 1),
              height .3s ease .1s, bottom .3s ease .1s,
              transform .28s cubic-bezier(.3, 1.5, .5, 1), opacity .15s ease;
}
.cal-riga--punto{ opacity: 1; transform: scale(1); }
.cal-riga--linea{ opacity: 1; transform: none; height: 1px; bottom: 8.5px; border-radius: 0; }
.cal-riga--salto{ transition: none; }
@media (prefers-reduced-motion: reduce){
  .cal-riga{ transition: none; }
  .cal-g--scheletro .cal-q{ animation: none; }
  .cal-q{ transition: none; }
}

/* Spazio riservato: la scritta delle date e "Cancella le date" non fanno saltare la pagina (96 px = due righe sul telefono) */
.cal-info{ display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 16px; margin-top: 6px; min-height: 96px; }
@container (min-width: 640px){ .cal-info{ min-height: 44px; } }
.cal-riep{ margin: 0; font-size: calc(16px * var(--s, 1)); }
.cal-riep a{ color: var(--c-titoli); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
.cal-lnk{
  background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: calc(14px * var(--s, 1)); color: var(--c-titoli);
  text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; cursor: pointer; border-radius: 0;
}
/* "Cancella le date": resta nel suo posto e si dissolve (niente attributo "hidden": la pagina non salta). Nascosto = fuori da Tab. */
.cal-lnk{ transition: opacity var(--t-medio) ease, transform var(--t-medio) var(--curva), visibility 0s; }
.cal-lnk.is-nascosto{ opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--t-rapido) ease, transform var(--t-rapido) ease, visibility 0s linear var(--t-rapido); }

/* ============================================================
   6. TRE FOTO CHE CAMBIANO A TURNO (pagina Camere, sotto il calendario)
   Al posto della vecchia galleria a scorrimento (richiesta di Luca
   30/09/2026). Tre rettangoli ORIZZONTALI 3:2 affiancati (spazio 18 px; telefono: impilati, 10 px); ogni 2 secondi UNO cambia
   con dissolvenza incrociata (sinistra, centro, destra, sinistra...).
   La logica e' in js/galleria-camere.js: li' si regolano intervallo
   (INTERVALLO) e durata della dissolvenza (DISSOLVENZA).
   Per regolare lo spazio tra i riquadri: --tre-foto-spazio.
   Telefono: impilati in colonna (vedi sotto).
   ============================================================ */
.tre-foto{
  --tre-foto-spazio: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tre-foto-spazio);
}
@media (max-width: 639px){
  /* Telefono: 3 riquadri orizzontali affiancati sarebbero minuscoli (110 x 73 px):
     si impilano uno sotto l'altro, a tutta larghezza. Il cambio a turno resta
     identico (alto, centro, basso). */
  .tre-foto{ --tre-foto-spazio: 10px; grid-template-columns: 1fr; }
}
.tre-foto__box{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--linea) solid var(--bordo);
  background: #FFFFFF;
}
.tre-foto__img{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  -webkit-user-drag: none;
  user-select: none;
}
/* La foto nuova arriva sopra la vecchia e sale da 0 a 1; la vecchia resta
   sotto finche' non e' coperta (nessun "buco" bianco a meta' dissolvenza). */
.tre-foto__box > .tre-foto__img:not(:first-child){
  opacity: 0;
  transition: opacity var(--tre-foto-dissolvenza, 1.3s) ease-in-out;
}
.tre-foto__box > .tre-foto__img.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .tre-foto__box > .tre-foto__img:not(:first-child){ transition: none; }
}

/* ============================================================
   7. HOME — schede degli argomenti con "VETRO OPACO" (§9)
   A riposo: foto sfocata + velo BIANCO semitrasparente (dal 30/09 ore 19:15), titolo e
   "Scopri di piu'" visibili.
   Mouse (solo dove esiste davvero): il vetro sparisce, la foto e'
   nitida, la scritta scompare (solo opacity: il testo resta per i
   lettori di schermo).
   Tastiera (Tab): vetro via come col mouse, ma la scritta RESTA + contorno.
   Telefono: la scheda al centro dello schermo e' nitida (classe
   .is-centro messa da js/argomenti-vetro.js); il tocco apre subito la pagina.
   La dissolvenza in sequenza della v2 (.argomenti--animata) NON e' toccata:
   agisce sull'opacita' dell'intera scheda, il vetro sta dentro.
   ============================================================ */
.argomenti__tile{ background: #FFFFFF; }
/* Ombra leggerissima sotto le foto della Home (Luca, 3/10: "deve essere impercettibile") */
.argomenti__tile{ box-shadow: 0 10px 18px -12px rgba(4, 23, 41, .16); }
/* ---- Forma delle schede (richiesta di Luca del 30/09/2026) ----
   Rettangoli PIU' LARGHI CHE ALTI, su 2 colonne x 3 righe (6 schede).
   Telefono: 1 colonna, un po' meno larghi (4:3) per non diventare
   strisce sottili. Sostituisce l'impaginazione a 3 colonne della v2.
   Il ritaglio della foto si regola scheda per scheda con --pos (in
   index.html), uguale per la foto nitida e per la copia sfocata. */
.argomenti__griglia{ grid-template-columns: 1fr; gap: 24px; }
.argomenti__tile{ aspect-ratio: 4 / 3; }
.argomenti__tile img{ object-position: var(--pos, 50% 50%); }
.argomenti__titolo{ font-size: calc(clamp(24px, 3.2vw, 40px) * var(--s, 1)); }
@media (min-width: 768px){
  .argomenti__griglia{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .argomenti__tile{ aspect-ratio: 3 / 2; }
}

/* ---- Rettangoli piu' piccoli (richiesta di Luca 15/10/2026: "-20%") ----
   Si restringe il contenitore della griglia (e il CTA sopra, per restare
   coerenti in larghezza: stesso max-width centrato) invece di toccare
   aspect-ratio o gap: la griglia resta 2x3 (desktop) / 1 colonna
   (telefono) con le stesse proporzioni 3:2 / 4:3 di prima, solo piu'
   piccole nel complesso. 89.44% = radice quadrata di 0.8: scalando la
   larghezza di questo fattore l'AREA di ogni rettangolo cala di circa il
   20% (il gap resta fisso in px, quindi l'effetto reale e' un pelo piu'
   marcato, non meno — mai sotto il -20% richiesto). */
.cta-prenotazione,
.argomenti__griglia{
  max-width: 89.44%;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Ritocco del 18/10/2026 (richiesta di Luca) ----
   1) "La tua prenotazione" alto la META' (Luca, 18/10 sera: "meno alto, non il contrario"): 72 -> 36 px (telefono),
      80 -> 40 px (computer); padding verticale ridotto perche' l'altezza minima prima la imponeva il padding.
   2) Foto piu' larghe di 1/6 a PARITA' DI ALTEZZA: proporzioni 4:3 -> 14:9 (telefono) e 3:2 -> 7:4 (computer).
   3) Spazio tra le foto raddoppiato: 24 -> 48 px (telefono), 32 -> 64 px (computer).
   Larghezza della griglia (e del rettangolo sopra, che resta largo quanto le due foto) ricalcolata cosi' che
   ogni foto sia 7/6 di prima: 7/6 x 89.44% = 104.35% del contenitore, + (spazio nuovo - 7/6 x spazio vecchio)
   sul computer (64 - 37.33 = 26.67 px). Puo' uscire un poco dal contenitore (resta centrata con margini negativi),
   ma mai dallo schermo: al massimo 100vw - 32 px. Per tornare indietro: cancellare questo blocco. */
.cta-prenotazione,
.argomenti__griglia{
  --larghezza-griglia: min(104.35%, calc(100vw - 32px));
  width: var(--larghezza-griglia);
  max-width: none;
  margin-left: calc((100% - var(--larghezza-griglia)) / 2);
  margin-right: calc((100% - var(--larghezza-griglia)) / 2);
}
.cta-prenotazione{ min-height: 36px; padding-top: 4px; padding-bottom: 4px; margin-bottom: 48px; }   /* distanza dalle foto = spazio tra le foto (Luca, 18/10) */
.argomenti__griglia{ gap: 48px; }
.argomenti__tile{ aspect-ratio: 14 / 9; }
@media (min-width: 768px){
  .cta-prenotazione,
  .argomenti__griglia{ --larghezza-griglia: min(calc(104.35% + 26.67px), calc(100vw - 32px)); }
  .cta-prenotazione{ min-height: 40px; margin-bottom: 64px; }
  .argomenti__griglia{ gap: 64px; }
  .argomenti__tile{ aspect-ratio: 7 / 4; }
}

/* ---- Ritocco del 26/10/2026 (richiesta di Luca) ----
   Foto della Home: ALTEZZA x 0,70 (30% piu' piccole) e LARGHEZZA x 0,63 (0,70 x 0,90: in piu' 10% piu' strette), anche sul telefono.
   Proporzioni nuove = vecchie x 0,9: 14/9 -> 7/5 (telefono), 7/4 -> 63/40 (computer). Altezza = larghezza / proporzione -> x 0,70.
   Si restringe SOLO la griglia: --larghezza-griglia resta quella del 18/10 (la usa ancora "La tua prenotazione", che NON cambia).
   Telefono: foto = 0,63 x G, centrata. Computer: foto = 0,63 x (G - 64 px) / 2; griglia = 0,63 x (G - 64 px) + 32 px, centrata.
   Spazio fra le COLONNE (solo computer): 64 -> 32 px; spazio fra le RIGHE invariato (48 px telefono, 64 px computer).
   Per tornare indietro: cancellare questo blocco (e ripristinare le due righe 'padding-bottom' nel blocco @supports piu' in basso).
   Ritocco del 30/10/2026 (Luca): foto +20% in larghezza e altezza (0,63 -> 0,756 = 0,63 x 1,2), stesse proporzioni, spazi invariati
   (48 px righe telefono; 64 px righe e 32 px colonne computer). Per tornare indietro rimettere 0.63 nelle due righe --larghezza-foto. */
.argomenti__griglia{
  --larghezza-foto: calc(0.756 * var(--larghezza-griglia));
  width: var(--larghezza-foto);
  margin-left: calc((100% - var(--larghezza-foto)) / 2);
  margin-right: calc((100% - var(--larghezza-foto)) / 2);
}
.argomenti__tile{ aspect-ratio: 7 / 5; }
@media (min-width: 768px){
  .argomenti__griglia{
    --larghezza-foto: calc(0.756 * (var(--larghezza-griglia) - 64px) + 32px);
    gap: 64px 32px;   /* righe 64 px (invariato), colonne 32 px (era 64) */
  }
  .argomenti__tile{ aspect-ratio: 63 / 40; }
}

/* ---- Comparsa delle foto della Home allo scorrimento (Luca, 18/10/2026) ----
   Le foto partono invisibili; quando arrivano al CENTRO dello schermo (js/argomenti-vetro.js aggiunge "is-rivelata") compaiono
   con una sfumatura che sale dalla parte bassa del rettangolo. Tecnica: una maschera alta 2,4 volte la foto, trasparente
   in alto e piena in basso, che scorre dall'alto (foto nascosta) al basso (foto intera). La classe "argomenti--rivela"
   la mette lo script: senza JavaScript le foto restano visibili. Sostituisce la vecchia "onda" di opacita' della v2.
   Velocita': cambiare 1.1s qui sotto. */
.argomenti--rivela .argomenti__tile{
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 58%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 58%, transparent 100%);
  -webkit-mask-size: 100% 240%;
          mask-size: 100% 240%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0%;
          mask-position: 0 0%;
  animation: none !important;
}
.argomenti--rivela .argomenti__tile.is-rivelata{
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  transition: -webkit-mask-position 1.1s cubic-bezier(.22,.7,.2,1), mask-position 1.1s cubic-bezier(.22,.7,.2,1);
}
/* Al momento della comparsa la foto e' gia' nitida: niente transizione del vetro (solo la maschera della comparsa si anima) */
.argomenti__tile.prima-nitida *,
.argomenti__tile.prima-nitida::after{ transition: none !important; }
@media (prefers-reduced-motion: reduce){
  .argomenti--rivela .argomenti__tile{ -webkit-mask-image: none; mask-image: none; }
}

/* Copia sfocata: statica (si anima solo l'opacita'), niente backdrop-filter. */
.argomenti__sfocata{
  filter: blur(16px);
  transform: scale(1.12);          /* nasconde i bordi trasparenti della sfocatura */
  transition: opacity .45s ease;
}
/* VELO BIANCO (richiesta di Luca 30/09/2026 ore 19:15): il vetro deve
   sembrare chiaro e lattiginoso, non scuro. Sopra la foto sfocata c'e'
   un velo bianco semitrasparente (da .42 in alto a .62 in basso, dove sta
   la scritta). Per schiarire o scurire il vetro si cambiano SOLO questi
   due numeri. La scritta a riposo e' blu #041729 (contrasto >= 10:1 anche
   sul caso peggiore, foto nera sotto il velo); con foto nitida (tastiera
   o telefono) torna bianca perche' si accende la sfumatura scura. */
.argomenti__tile{ --velo-vetro-alto: .42; --velo-vetro-basso: .62; }
.argomenti__tile::after{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,var(--velo-vetro-alto)) 0%, rgba(255,255,255,var(--velo-vetro-basso)) 100%);
  transition: opacity .45s ease;
}
.argomenti__testo{ color: var(--c-titoli); transition: opacity .3s ease, color .45s ease; }
.argomenti__tile:focus-visible .argomenti__testo,
.argomenti__tile.is-centro .argomenti__testo{ color: var(--bianco); }
/* La sfumatura scura di style.css e' tolta sempre (richiesta di Luca del 2026-10-24):
   sotto la scritta non resta nessuna ombra blu. */
.argomenti__scrim{ display: none; }
.argomenti__testo{ z-index: 2; }

@media (hover: hover) and (pointer: fine){
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover .argomenti__sfocata,
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover::after{ opacity: 0; }
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover .argomenti__testo{ opacity: 0; }
}
/* Tastiera e telefono (scheda al centro): vetro via, foto nitida, scritta che resta, sfumatura scura accesa. */
.argomenti__tile:focus-visible .argomenti__sfocata,
.argomenti__tile.is-centro .argomenti__sfocata,
.argomenti__tile:focus-visible::after,
.argomenti__tile.is-centro::after{ opacity: 0; }
.argomenti__tile:focus-visible .argomenti__scrim,
.argomenti__tile.is-centro .argomenti__scrim{ opacity: 1; }
.argomenti__tile:focus-visible .argomenti__testo{ opacity: 1; }
.argomenti__tile:focus-visible{ outline: 3px solid var(--blu-primario); outline-offset: 4px; }

/* Scheda senza foto (Colazioni): nessun vetro. Bianca, solo contorno
   CONTINUO sottilissimo (era tratteggiato); al mouse diventa blu, ~1,5px. */
.argomenti__tile--segnaposto{ border: var(--linea) solid var(--occ-segno); }
.argomenti__tile--segnaposto::after{ display: none; }
.argomenti__tile--segnaposto .foto-in-arrivo{ border: 0; }
.argomenti__tile--segnaposto:hover{ border-color: var(--blu-linea); box-shadow: inset 0 0 0 1px var(--blu-linea); }

/* Ripiego NITIDO (foto senza vetro, con la sfumatura scura di prima):
   - browser senza filter: blur;
   - preferenza "risparmio dati" (su telefono);
   - classe .argomenti--nitida messa da argomenti-vetro.js se il browser
     dichiara il risparmio dati (Save-Data). */
@supports not (filter: blur(1px)){
  .argomenti__sfocata{ display: none; }
  .argomenti__tile::after{ display: none; }
  .argomenti__scrim{ opacity: 1; }
}
@media (prefers-reduced-data: reduce) and (hover: none){
  .argomenti__sfocata{ display: none; }
  .argomenti__tile::after{ display: none; }
  .argomenti__scrim{ opacity: 1; }
}
.argomenti--nitida .argomenti__sfocata{ display: none; }
.argomenti--nitida .argomenti__tile::after{ display: none; }
.argomenti--nitida .argomenti__scrim{ opacity: 1; }
/* Ripiego nitido: nessun velo bianco, sfumatura scura accesa, quindi scritta bianca. */
.argomenti--nitida .argomenti__testo{ color: var(--bianco); }
@supports not (filter: blur(1px)){ .argomenti__testo{ color: var(--bianco); } }
@media (prefers-reduced-data: reduce) and (hover: none){ .argomenti__testo{ color: var(--bianco); } }

@media (prefers-reduced-motion: reduce){
  /* con "riduci le animazioni" il passaggio vetro/nitido e' immediato */
  .argomenti__sfocata, .argomenti__tile::after, .argomenti__scrim, .argomenti__testo{ transition: none; }
}

/* ============================================================
   8. Login (struttura-v3.md §6) — riusa .campo/.btn di style.css
   ============================================================ */
.modulo-login{ max-width: 400px; }
.separatore-oppure{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--testo-secondario);
  font-size: calc(13px * var(--s, 1));
  text-transform: uppercase;
  letter-spacing: .08em;
}
.separatore-oppure::before, .separatore-oppure::after{ content: ""; flex: 1; height: 1px; background: var(--bordo); }
/* Pulsante "Continua con Google": lo disegna Google (iframe); qui solo lo spazio e il centraggio. */
.google-bottone{ display: flex; justify-content: center; min-height: 44px; margin-bottom: 8px; }
/* Frase di consenso sotto il pulsante Google (condizioni di prenotazione + privacy). */
.google-consenso{ margin: 12px 0 0; font-size: calc(13px * var(--s, 1)); line-height: 1.5; text-align: center; color: var(--testo-secondario); }
.google-consenso a{ color: inherit; text-decoration: underline; }
/* Pulsante "Continua con Apple" (nero, logo + testo, come da linee guida Apple) e blocco: se c'e' anche Google il "oppure" non si ripete. */
.apple-bottone{ display: flex; justify-content: center; margin-bottom: 8px; }
.apple-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 400px; min-height: 44px; padding: 0 16px; border: 1px solid #000; border-radius: 4px; background: #000; color: #fff; font: 500 calc(15px * var(--s, 1))/1 -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif; cursor: pointer; }
.apple-btn:hover{ background: #222; }
.apple-btn:focus-visible{ outline: 3px solid var(--blu, #1f4e9c); outline-offset: 2px; }
.apple-btn:disabled{ opacity: .6; cursor: default; }
.apple-btn .apple-logo{ flex: none; }
#blocco-google:not([hidden]) + .blocco-apple .separatore-oppure{ display: none; }

/* ============================================================
   COLORE DELLE SCRITTE (30/09/2026): grigio scuro, non nero/blu.
   Le regole di style.css (v2) usavano il blu di marca anche per le
   scritte: qui, solo per la v3, passano alla variabile --testo.
   Restano blu (scelta voluta): bottoni pieni, footer, linee/bordi,
   focus, link sottolineati, voce di menu attiva/al passaggio.
   ============================================================ */
body{
  color: var(--testo);
  /* Scritte del menu/apertura: dal quasi-bianco (sopra il video) al grigio scuro. */
  --ap-testo: color-mix(in oklab, var(--ap-testo-base), var(--testo) calc(var(--chiaro) * 100%));
}
.eyebrow,
.header__wordmark,
.btn--secondario,
.card-camera__prezzo,
.campo textarea,
.hero--segnaposto .hero__contenuto h1,
.hero--segnaposto .hero__contenuto p,
.argomenti__tile--segnaposto .argomenti__testo,
.contapezzi button,
.fascia-legale{ color: var(--testo); }
.eyebrow--su-scuro{ color: var(--bianco); }   /* su fondo scuro resta bianco */

/* ============================================================
   APERTURA DELLA HOME (richieste di Luca 30/09/2026, ore 17:45)
   a) foto a filo dello schermo: niente cornice bianca (inset 0);
   b) foto in BIANCO E NERO (grayscale(1), come in style.css) coperta da
      un VELO BIANCO semitrasparente ("come un foglio bianco davanti alla
      foto", correzione di Luca 30/09/2026 ore 18:20): risulta molto chiara
      e sbiadita. Il velo e' un ::after DENTRO ".apertura__foto-full": ne
      segue il ritaglio e si allarga insieme alla foto nell'animazione.
      Per rendere la foto piu' o meno chiara si cambia SOLO il valore
      di --velo-apertura (0 = nessun velo, 1 = tutto bianco);
   c) animazione piu' lenta del 30%: TUTTE le durate e i ritardi
      della sequenza sono moltiplicati per 1,3 (poi ancora per 1,3 il 30/09 sera: foto, C, lettere,
      spostamento del nome, riquadro video, sottotitolo), cosi' l'ordine
      resta identico e la sequenza e' solo piu' calma.
      Valori originali di style.css: foto 1,6s/.1s; C 1,25s/.29s;
      lettere .92s/--d; nome 1,75s/1,83s; video 1s/1,35s; sottotitolo 1,4s/4,3s.
   d) il nome "Case Bianche" e' in blu #1F3A5A (vedi piu' sotto).
   ============================================================ */
.apertura__foto-full{
  top: 0; right: 0; bottom: 0; left: 0;
  animation-duration: 2.704s;  /* 1,6 x 1,3 x 1,3 */
  animation-delay: .169s;      /* .1 x 1,3 x 1,3 */
}
@media (min-width: 640px){
  .apertura__foto-full{ top: 0; right: 0; bottom: 0; left: 0; }
}
/* 2026-10-21: provato velo .497 (-30%, richiesta di Luca) e poi ANNULLATO da Luca lo stesso giorno: torna .71. */
.apertura__foto-full{ --velo-apertura: .71; }
.apertura__foto-full img{ filter: grayscale(1); }
.apertura__foto-full::after{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(255,255,255,var(--velo-apertura));
  pointer-events: none;
}
/* ---- Il nome (richiesta di Luca 30/09/2026, ore 19:13) ----
   e) TUTTE le lettere, compresa la C, compaiono da zero una dopo l'altra
      con lo stesso effetto (dissolvenza .92 s x 1,3 x 1,3 = 1,555 s). Non c'e'
      piu' la C sola che si sposta: il nome sta gia' al centro. I ritardi
      (gia' moltiplicati per 1,3 due volte: +30% del 17:45, altro +30% del 30/09 sera) sono in
      index.html, variabile --d di ogni lettera (passo 0,169 s); la C parte
      per prima (.377 s).
   f) nome piu' piccolo, MAIUSCOLO, con molto spazio tra le lettere
      (letter-spacing .65em: per cambiarlo basta il numero qui sotto).
      Dimensione in vw cosi' il nome resta su UNA riga anche su telefono
      stretto (320 px), senza uscire dallo schermo. Blu #1F3A5A. */
.apertura__lettera-c{ animation-duration: 1.555s; animation-delay: .49s; }
.apertura__resto > span{
  animation-duration: 1.555s;                 /* .92 x 1,3 x 1,3 */
  animation-delay: var(--d);                  /* gia' in secondi finali */
}
.apertura__titolo{
  transform: none;             /* niente piu' spostamento verso il centro */
  animation: none;
  text-transform: uppercase;
  font-size: calc(clamp(18px, 4.95vw, 42.5px) * var(--s, 1));   /* +12% rispetto a prima (era clamp(16px, 4.4vw, 38px)), richiesta 30/09 */
  letter-spacing: .65em;
  padding-left: .65em;          /* compensa lo spazio dopo l'ultima lettera: il nome resta centrato */
  color: #1F3A5A;   /* blu un po' piu' chiaro del #041729 (richiesta di Luca 30/09 19:55) */
  text-shadow: none;   /* sulla foto chiara e velata il blu si legge da solo: alone bianco tolto */
}
/* g) il video e' piu' piccolo del 10% (52 -> 46,8 ; 420 -> 378), proporzioni invariate.
   h) il riquadro del video compare COME LA FOTO di sfondo (richiesta di Luca
      30/09 19:55): stessa animazione (ap-foto-allarga: si allarga da una
      striscia centrale), stessa durata (2,704 s), stesso ritardo (.169 s),
      quindi parte insieme alla foto. Se si cambia la foto, cambiare anche qui. */
.apertura__quadro{
  width: min(46.8vw, 46.8vh, 378px);   /* ripiego per i browser che non conoscono "svh" */
  width: min(46.8vw, 46.8svh, 378px);
  opacity: 1;
  clip-path: inset(0 calc(50% - 5px) 0 calc(50% - 5px));
  animation-name: ap-foto-allarga;
  animation-duration: 2.704s;
  animation-delay: .169s;
  animation-timing-function: cubic-bezier(.22,.85,.23,1);
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce){
  .apertura__quadro{ animation: none; clip-path: inset(0 0 0 0); }
}
/* "Boa Vista" parte insieme all'ultima lettera del nome (era 7.267s; richiesta di Luca 2026-10-24: "molto prima"). */
.apertura__sottotitolo{ animation-duration: 2.366s; animation-delay: 2.907s; color: var(--c-titoli); text-shadow: none; }
.header__wordmark{ color: var(--c-titoli); }

/* ============================================================
   REGOLA DEI TRE BLU — applicata ai componenti di style.css (v2)
   (vedi le tre variabili --blu-pieno / --blu-piccolo / --blu-linea in cima)
   - riempimento grande  -> --blu-pieno    (footer, .btn--primario, .btn--accento)
   - riempimento piccolo -> --blu-piccolo  (vedi i singoli componenti sopra + questi)
   - linea / contorno    -> --blu-linea
   I bottoni grandi ("Prenota", "Continua", "Prenota suite ...") usano gia'
   --blu-primario = --blu-pieno: nessuna riga in piu' serve.
   ============================================================ */
.menu-laterale__sottolineatura{ background: var(--blu-linea); }                       /* linea sotto l'icona del menu */
.contapezzi button:hover{ border-color: var(--blu-linea); }
.lang-btn[aria-current="true"]{ background: var(--blu-piccolo); }                     /* lingua scelta: riempimento piccolo */
.footer .lang-btn[aria-current="true"]{ background: transparent; }                    /* nel footer resta contorno bianco (vedi sopra) */

/* ============================================================
   CALENDARIO: nota prezzi, pulsanti "Prenota suite ..." (30/09 sera)
   I pulsanti sono riempimenti grandi: .btn--accento = --blu-pieno.
   ============================================================ */
.cal-nota{ margin: 14px 0 0; }
.cal-azioni{ margin-top: 20px; }
.cal-azioni:empty{ display: none; }
.cal-azioni{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 28px; align-items: flex-start; }  /* pulsanti al centro della pagina (30/09) */
.cal-azione{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cal-azione__tot{ font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.cal-nessuna{ margin: 0; font-size: calc(16px * var(--s, 1)); max-width: calc(52ch * var(--larg, 1)); }
.cal-nessuna a{ color: var(--c-titoli); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
@media (max-width: 479px){
  .cal-azione{ width: 100%; }
  .cal-azione .btn{ width: 100%; text-align: center; }
}

/* ============================================================
   PAGINE COLAZIONI E APERITIVI: niente menu, solo una descrizione
   elegante di come funziona (30/09 sera). Testo largo al massimo
   ~60 caratteri per riga, tanto spazio bianco.
   ============================================================ */
.come-funziona{ max-width: calc(60ch * var(--larg, 1)); }
.come-funziona p{ margin: 0 0 14px; font-size: calc(18px * var(--s, 1)); line-height: 1.75; color: var(--testo); }
.come-funziona .invito{ margin-top: 28px; }
.invito__riga{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.invito__riga span{ color: var(--testo-secondario); }
@media (min-width: 900px){ .come-funziona p{ font-size: calc(19px * var(--s, 1)); } }

/* ============================================================
   BLOCCO 1 PRENOTAZIONE (1 ottobre 2026) — specifica: docs/design/blocco1-calendario-prenotazione-2026-10-01.md
   a) pulsanti "Prenota suite ..." / "Conferma prenotazione": stati
   b) pagina delle suite (prenota-suite.html): blocchi, foto, costi, "non disponibile"
   ============================================================ */
:root{ --linea-q: #D0CCC5; }

/* a) Pulsante blu pieno: contorno da tastiera 2px, distacco 3px; spento = solo contorno chiaro (resta raggiungibile con Tab) */
.btn--accento:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }
.btn--accento[aria-disabled="true"]{
  background: transparent; color: var(--testo-secondario); border-color: var(--linea-q); cursor: not-allowed;
}
.btn--accento[aria-disabled="true"]:hover{ background: transparent; }
.btn--accento[aria-busy="true"]{ pointer-events: none; }
.cal-azione{ max-width: 300px; text-align: center; }
.cal-azione .btn{ min-width: 220px; }
.cal-errore{ align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }

/* b) Pagina delle suite (ritocchi del 2/10/2026: docs/design/ritocchi-suite-2026-10-02.md)
   Ogni suite e' un "rettangolo totale" (.suite-blocco) con 4 celle (2 x 2):
     in alto a sinistra la foto grande (come una scheda della Home), in alto a destra il testo;
     in basso a sinistra il calendario, in basso a destra i costi (a sinistra) e "Conferma prenotazione" (a destra).
   Telefono: tutto in colonna. Decide la larghezza del BLOCCO (non della finestra): 728 px = finestra 768, come la Home. */
.sezione--suite-testa{ padding-bottom: 32px; }
.sezione--suite-blocchi{ padding-top: 0; }
.suite-riga{ margin: 0 0 8px; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.suite-torna{ color: var(--c-titoli); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
#suite-errore:empty{ display: none; }
#suite-avviso{ margin: 8px 0 0; }
#cal-nessuna-apri .cal-nessuna{ margin: 16px auto 0; text-align: center; }
#suite-blocchi{ display: block; }

/* Linea sottile tra una suite e la successiva: 1 px, blu #1E466A, compare dal centro quando e' in vista (js/prenota-suite.js).
   Spazio totale tra i blocchi: 81 px (telefono) / 105 px (computer). Se la si vuole piu' corta:
   width: min(100%, 720px); margin-inline: auto; sul <span>. */
.suite-sep{ --spessore: .75px; height: var(--spessore); margin: 40px 0; }   /* piu' sottile di prima (era 1px): 2/10 pomeriggio */
@media (min-width: 900px){ .suite-sep{ margin: 52px 0; } }
.suite-sep > span{ display: block; height: var(--spessore); width: 100%; background: var(--blu-linea); transform-origin: 50% 50%; }
.suite-sep--anim > span{ transform: scaleX(0); transition: transform 450ms ease-in-out; }                             /* uscita: 450 ms */
.suite-sep--anim.is-visibile > span{ transform: scaleX(1); transition: transform var(--t-linea) var(--curva); }       /* entrata: 900 ms */
@media (prefers-reduced-motion: reduce){ .suite-sep--anim > span{ transition: none; } }

.suite-blocco{ container: suite / inline-size; --velo-vetro-alto: .42; --velo-vetro-basso: .62; }
.suite-titolo{ font-size: calc(20px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); letter-spacing: .02em; margin: 0 0 16px; }
@container suite (min-width: 728px){ .suite-titolo{ font-size: calc(22px * var(--s, 1)); } }

.suite-in{ position: relative; }

/* Foto. Telefono: striscia a scorrimento, 3 foto 4:3 a tutta larghezza (come le schede Home), tre trattini sotto.
   Computer/tablet: la prima foto e' una scheda Home (3:2, W x H), la 2 e la 3 si aprono sul testo con la freccia. */
.suite-foto{ display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.suite-foto::-webkit-scrollbar{ display: none; }
.suite-foto__box{
  position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border: 0; background: #fff; scroll-snap-align: start;
}
.suite-foto__img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; user-select: none; }
.suite-foto__no{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.suite-foto__fr{ display: none; }
.suite-punti{ display: flex; margin-top: 2px; }
.suite-punto{ width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.suite-punto span{ display: block; width: 16px; height: 1px; background: var(--occ-segno); transition: height var(--t-rapido) ease, background-color var(--t-rapido) ease; }
.suite-punto[aria-current="true"] span{ height: 2px; background: var(--blu-linea); }
.suite-punto:focus-visible, .suite-foto:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }

/* Colonna di destra: descrizione + costi/pulsante. Telefono: in colonna sotto le foto. Ricompare dopo la chiusura delle foto. */
.suite-destra{ margin-top: 8px; transition: opacity var(--t-medio) ease var(--t-tendina); }
.suite-in--aperto .suite-destra{ opacity: 0; transition-delay: 0s; }
.suite-desc{ margin: 0; max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); line-height: 1.5; color: var(--testo); }

/* Cella dei costi e pulsante */
.suite-sotto{ margin-top: 8px; }      /* il calendario sta sotto e occupa tutta la larghezza della pagina (2/10 pomeriggio) */
.suite-azione{ display: flex; flex-direction: column; margin-top: 20px; }
.suite-cal{ min-width: 0; }
.suite-cambia{ margin: 24px 0 0; font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); }
.suite-blocco .cal-wrap{ margin: 0; }

.suite-costi{ display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; max-width: 360px; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.suite-costi__g{ display: inline-flex; align-items: baseline; justify-content: space-between; gap: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.suite-costi__g b{ font-weight: 400; color: var(--c-titoli); }
.suite-costi-msg{ margin: 0; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
/* Supplemento per soggiorno breve: compare SOLO quando c'e' (a sinistra la scritta con le notti e la percentuale, a destra quanto costa in piu'). */
.suite-costi-blocco{ display: flex; flex-direction: column; gap: 6px; }
.suite-suppl{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 360px; margin: 2px 0 0; font-size: calc(15px * var(--s, 1)); color: var(--testo-secondario); font-variant-numeric: tabular-nums; }
.suite-suppl b{ flex: none; font-weight: 400; color: var(--c-titoli); white-space: nowrap; }
/* attesa: linee grigie continue che "respirano" */
.suite-linea{ display: block; width: 100%; max-width: 360px; height: 1px; margin: 16px 0; background: var(--linea-occ); animation: cal-respira 1.4s ease-in-out infinite; }
.suite-linea--corta{ width: 60%; }

/* "Conferma prenotazione": UN solo <a> alto 48 px in tutti gli stati (libero blu, non disponibile bianco con linea blu): stesse misure per
   costruzione e passaggio morbido del colore. Il totale sta sotto, con il posto sempre riservato. */
.suite-conferma{ width: 100%; margin-top: 4px; }
.suite-conferma .btn{
  display: flex; align-items: center; justify-content: center; width: 100%;
  box-sizing: border-box; height: 48px; min-height: 48px; padding: 0 16px;
  font: 600 calc(15px * var(--s, 1))/1.2 var(--font-corpo); text-align: center; text-decoration: none;
  border: 1px solid var(--blu-pieno); border-radius: 0; white-space: nowrap;
  transition: background-color var(--t-medio) ease, border-color var(--t-medio) ease, color var(--t-medio) ease, box-shadow var(--t-rapido) ease;
}
.suite-conferma .btn[aria-disabled="true"]{ background: #fff; border-color: var(--blu-linea); color: var(--testo-secondario); cursor: not-allowed; }
.suite-conferma .btn[aria-disabled="true"]:hover{ background: #fff; }
/* Totale sopra il pulsante: "Totale ........ 375 €". Il posto e' sempre riservato (non fa saltare la pagina). */
.suite-azione__tot{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 36px; margin: 8px 0 0; font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transition: opacity var(--t-medio) ease, visibility 0s linear var(--t-medio);
}
.suite-azione__tot.is-pieno{ opacity: 1; visibility: visible; transition: opacity var(--t-medio) ease, visibility 0s; }
.suite-azione__tot b{ font-weight: 400; font-size: calc(22px * var(--s, 1)); color: var(--c-titoli); }
.suite-azione__tot small{ font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); }

/* ---- Suite NON disponibile: "vetro" come le schede della Home (2/10, punto 8) ----
   Sulle 3 foto: copia sfocata (piccola) + velo bianco, con gli stessi numeri della Home (sezione 7: NON modificata,
   qui sono copiati). Titolo e testo restano sempre visibili: il velo sta solo dentro i riquadri delle foto. */
.suite-foto__sfocata{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  filter: blur(16px); transform: scale(1.12); opacity: 0; transition: opacity var(--t-vetro) ease;
}
.suite-foto__box::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,var(--velo-vetro-alto)) 0%, rgba(255,255,255,var(--velo-vetro-basso)) 100%);
  transition: opacity var(--t-vetro) ease;
}
/* a riposo, non disponibile: vetro acceso (la transizione fa anche il passaggio disponibile <-> non disponibile) */
.suite-blocco--no .suite-foto__sfocata, .suite-blocco--no .suite-foto__box::after{ opacity: 1; }
/* mouse sopra una foto: si vede quella foto (come la Home) */
@media (hover: hover) and (pointer: fine){
  .suite-blocco--no .suite-foto__box:hover .suite-foto__sfocata,
  .suite-blocco--no .suite-foto__box:hover::after{ opacity: 0; }
}
/* tendina aperta: tutte e 3 le foto visibili; tastiera; tocco (".is-vista").
   ":has(:focus-visible)" e non ":focus-within": su Android un tocco lascia il fuoco sul pulsante e il vetro non tornerebbe piu'. */
.suite-blocco--no .suite-in--aperto .suite-foto__sfocata, .suite-blocco--no .suite-in--aperto .suite-foto__box::after,
.suite-blocco--no .suite-in:has(:focus-visible) .suite-foto__sfocata, .suite-blocco--no .suite-in:has(:focus-visible) .suite-foto__box::after,
.suite-blocco--no.is-vista .suite-foto__sfocata, .suite-blocco--no.is-vista .suite-foto__box::after{ opacity: 0; }
/* ripiego: senza sfocatura o con "risparmio dati" resta un velo piatto */
@supports not (filter: blur(1px)){ .suite-foto__sfocata{ display: none; } .suite-blocco--no .suite-foto__box::after{ background: rgba(255,255,255,.62); } }
@media (prefers-reduced-data: reduce){ .suite-foto__sfocata{ display: none; } .suite-blocco--no .suite-foto__box::after{ background: rgba(255,255,255,.62); } }

/* Pulsante a tutto riquadro sul primo riquadro: serve ai tocchi, alla tastiera e ai lettori di schermo.
   La scritta si vede SOLO sui touch (col mouse il vetro e' puro, come descrive Luca). */
.suite-vedi{
  display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: none; border: 0; padding: 0; margin: 0;
  align-items: flex-end; text-align: left; cursor: pointer; font: inherit; border-radius: 0;
}
.suite-blocco--no .suite-vedi{ display: flex; }
.suite-vedi:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: -5px; }
.suite-vedi__testo{ display: none; padding: 20px; max-width: calc(36ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); font-weight: 500; line-height: 1.4; color: var(--c-titoli); opacity: 1; transition: opacity var(--t-vetro) ease; }
@media (hover: none), (pointer: coarse){
  .suite-vedi__testo{ display: block; }
}
.suite-blocco--no.is-vista .suite-vedi__testo, .suite-blocco--no .suite-in--aperto .suite-vedi__testo, .suite-blocco--no .suite-in:has(:focus-visible) .suite-vedi__testo{ opacity: 0; }

/* Computer e tablet: la foto e' il 10% piu' piccola di una scheda Home (2/10 pomeriggio). W = (larghezza blocco - 32) / 2 x 0,9, H = W x 2/3.
   A destra della foto la colonna .suite-destra e' alta quanto la foto: descrizione in alto, costi + totale + "Conferma prenotazione" in basso,
   con il bordo basso del pulsante sul bordo basso della foto. */
@container suite (min-width: 728px){
  .suite-zona{ --W: calc((100cqw - 32px) / 2 * .9); --H: calc(var(--W) * 2 / 3); }
  .suite-in{ min-height: var(--H); }
  .suite-foto{ display: block; overflow: visible; }
  .suite-foto__box{ position: absolute; top: 0; height: var(--H); aspect-ratio: auto; overflow: hidden; border: 0; }
  .suite-foto__box:nth-child(1){ left: 0; width: var(--W); aspect-ratio: 3 / 2; }
  .suite-foto__box:nth-child(2){ left: calc(var(--W) + 32px); width: calc((var(--W) - 12px) / 2); }
  .suite-foto__box:nth-child(3){ left: calc(var(--W) + 32px + (var(--W) - 12px) / 2 + 12px); width: calc((var(--W) - 12px) / 2); }
  .suite-foto__box:nth-child(n+2){
    clip-path: inset(0 100% 0 0); visibility: hidden;
    transition: clip-path var(--t-tendina) var(--curva), visibility 0s linear var(--t-tendina);
  }
  .suite-in--aperto .suite-foto__box:nth-child(n+2){
    clip-path: inset(0); visibility: visible;
    transition: clip-path var(--t-tendina) var(--curva), visibility 0s;
  }
  /* freccia al centro dello spazio tra le due colonne; aperta ruota di 180 gradi e resta ferma */
  .suite-foto__fr{
    display: grid; position: absolute; z-index: 4; left: calc(var(--W) + 16px - 22px); top: calc(var(--H) / 2 - 22px);
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none;
    place-items: center; cursor: pointer; color: var(--blu-linea);
    transition: transform var(--t-tendina) var(--curva), color var(--t-rapido) ease;
  }
  .suite-foto__fr svg{ width: 14px; height: 14px; }
  .suite-foto__fr:hover{ color: var(--azzurro-linea); }
  .suite-foto__fr:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: -4px; }
  .suite-in--aperto .suite-foto__fr{ transform: rotate(180deg); }
  .suite-punti{ display: none; }
  .suite-destra{
    margin: 0 0 0 calc(var(--W) + 32px); min-height: var(--H);
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  }
  .suite-azione{ margin-top: 0; max-width: 380px; }
  .suite-sotto{ margin-top: 24px; }
  .suite-cambia{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .suite-linea{ animation: none; }
}

/* ============================================================
   BLOCCO 2 — ACCOUNT, PAGAMENTO, ESITO, INVITI (1 ottobre 2026)
   Specifica: docs/design/blocco2-accesso-pagamento-email-2026-10-01.md
   Solo i colori e le variabili gia' presenti sopra. Solo linee, tranne il blu pieno dei pulsanti
   principali. Angoli netti. Nelle pagine nuove il <body> ha la classe "pagina-account".
   ============================================================ */

/* Contorno da tastiera: 2px, distacco 3px (obbligo di accessibilita') */
.pagina-account main :focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }

/* ---------- Pagine di modulo: colonna singola, 440px, a sinistra ---------- */
.modulo-account{ max-width: 440px; margin-top: 24px; }
.account-intro{ margin: 8px 0 0; max-width: calc(52ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.modulo-account > .messaggio, .modulo-account > p{ margin-top: 0; margin-bottom: 24px; }
.modulo-account .messaggio{ margin-top: 0; margin-bottom: 24px; }
.pagina-account .eyebrow{ display: block; margin-bottom: 8px; }
.pagina-account h1{ margin-top: 0; }

/* Riga dei passi (se si arriva dal pagamento) */
.passi-wrap{ margin: 0 0 24px; }
.passi{ display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.passi li{ padding: 4px 0; border-bottom: 2px solid transparent; }
.passi li[aria-current="step"]{ color: var(--testo); border-bottom-color: var(--blu-pieno); }
.passi__tel{ display: none; margin: 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
@media (max-width: 599px){
  .passi{ display: none; }
  .passi__tel{ display: block; }
}

/* ---------- Campi ---------- */
.modulo-account .campo, .pag-pannello .campo{ margin-bottom: 24px; }
.modulo-account .campo label, .pag-pannello .campo label{ font-size: calc(16px * var(--s, 1)); font-weight: 500; color: var(--testo); margin-bottom: 6px; }
.modulo-account .campo input[type="text"],
.modulo-account .campo input[type="email"],
.modulo-account .campo input[type="password"],
.pag-pannello .campo input[type="email"]{ min-height: 48px; }
.modulo-account .campo input[readonly]{ background: transparent; color: var(--testo-secondario); border-color: var(--linea-q); }
.campo__aiuto{ margin: 6px 0 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.campo__err{ margin: 6px 0 0; font-size: calc(15px * var(--s, 1)); color: var(--errore); }
.campo__azioni{ display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; font-size: calc(15px * var(--s, 1)); }
.campo__azioni a, .campo__err a{ display: inline-block; padding: 10px 0; }
.modulo-account a:not(.btn), .pag-pannello a:not(.btn), .pag-riepilogo a, .esito a:not(.btn), .invito-pagina a:not(.btn), .mie-piede a{
  color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px;
}
.riepilogo-errori{ margin: 8px 0 0; padding: 0 0 0 20px; }
.riepilogo-errori a{ color: var(--errore); text-decoration: underline; padding: 6px 0; display: inline-block; }

/* Password con "Mostra / Nascondi" dentro il bordo, a destra */
.pw-wrap{ position: relative; }
.pw-wrap input{ padding-right: 96px !important; }
.pw-toggle{
  position: absolute; top: 0; right: 0; height: 100%; min-width: 44px; padding: 0 14px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: calc(15px * var(--s, 1));
  color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px;
}
.pw-contatore{ margin: 4px 0 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); font-variant-numeric: tabular-nums; }
.account-dimenticata{ margin: -12px 0 24px; text-align: right; font-size: calc(15px * var(--s, 1)); }
.account-dimenticata a{ display: inline-block; padding: 10px 0; }

/* Scelta della lingua: tre riquadri affiancati con radio veri */
.segmenti{ border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.segmenti legend{ padding: 0; margin-bottom: 6px; font-size: calc(16px * var(--s, 1)); font-weight: 500; color: var(--testo); }
.segmenti__riga{ display: flex; gap: 8px; }
.pagina-account .campo .segmenti__voce, .segmenti__voce{
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 6px;
  border: var(--linea) solid var(--occ-segno); cursor: pointer; font-size: calc(15px * var(--s, 1)); font-weight: 400; color: var(--testo); background: #fff;
}
.segmenti__voce input{ margin: 0; width: 18px; height: 18px; accent-color: var(--blu-pieno); flex: none; }
.segmenti__voce:has(input:checked){ border: 2px solid var(--blu-pieno); padding: 0 5px; }
.segmenti__voce:has(input:focus-visible){ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }

/* Casella di consenso */
.campo .consenso__riga{
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; margin: 0; cursor: pointer; font-weight: 400; font-size: calc(16px * var(--s, 1));
}
.consenso__riga input{ width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blu-pieno); flex: none; }

/* ---------- Pulsanti ---------- */
.btn--pieno{ width: 100%; min-height: 48px; text-align: center; }
.btn--primario:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }
.btn--primario:active{ background: var(--blu-primario-hover); }
.btn--primario[aria-disabled="true"]{ background: transparent; color: var(--testo-secondario); border-color: var(--linea-q); cursor: not-allowed; }
.btn--primario[aria-disabled="true"]:hover{ background: transparent; }
.btn--primario[aria-busy="true"]{ background: var(--blu-pieno); color: #fff; border-color: var(--blu-pieno); cursor: progress; }
.btn--secondario[aria-disabled="true"]{ color: var(--testo-secondario); border-color: var(--linea-q); cursor: not-allowed; box-shadow: none; }
.btn[aria-busy="true"], .btn[aria-disabled="true"]{ pointer-events: auto; }
.btn--piccolo{
  min-height: 44px; padding: 8px 14px; font-size: calc(14px * var(--s, 1)); font-weight: 400; color: var(--testo);
  background: transparent; border: var(--linea) solid var(--linea-q);
}
.btn--piccolo:hover{ border-color: var(--blu-linea); box-shadow: inset 0 0 0 var(--linea) var(--blu-linea); background: transparent; }
.btn--piccolo[aria-disabled="true"]{ color: var(--testo-secondario); cursor: not-allowed; box-shadow: none; border-color: var(--linea-q); }
.link-bottone{
  display: inline-block; min-height: 44px; padding: 10px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: calc(15px * var(--s, 1));
  color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px;
}
.account-altro{ margin-top: 40px; padding-top: 24px; border-top: var(--linea) solid var(--linea-q); }
.account-altro p{ margin: 0 0 12px; }
.account-altro .btn{ margin: 0; }
.azioni-pagina{ display: flex; flex-direction: column; gap: 12px; max-width: 440px; margin-top: 24px; }

/* ---------- Avviso di prova (sempre visibile, non si chiude) ---------- */
.avviso-prova{
  border: var(--linea) solid var(--blu-linea); padding: 12px 16px; margin: 0 0 20px;
  font-size: calc(16px * var(--s, 1)); font-weight: 600; color: var(--testo);
}
.avviso-prova p{ margin: 0; font-size: calc(16px * var(--s, 1)); }
.avviso-prova p + p{ font-weight: 400; margin-top: 4px; }

/* Modalita' prova: avviso discreto e "link di prova" al posto delle email */
.sim-avviso{ margin-top: 56px; padding-top: 16px; border-top: var(--linea) solid var(--linea-q); max-width: calc(60ch * var(--larg, 1)); }
.sim-avviso__testo, .sim-avviso__stato{ margin: 0 0 8px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.sim-avviso__azioni{ display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.sim-avviso__conf{ font-size: calc(14px * var(--s, 1)); flex-basis: 100%; }
.link-prova{ border: var(--linea) solid var(--blu-linea); padding: 16px; margin: 0 0 24px; }
.link-prova p{ margin: 0 0 6px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.link-prova .link-prova__titolo{ font-size: calc(16px * var(--s, 1)); font-weight: 600; color: var(--testo); }
.link-prova__link{ display: inline-block; padding: 8px 0; font-size: calc(16px * var(--s, 1)); }
.email-prova{ margin: 24px 0; }
.email-prova summary{ min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
.email-prova iframe{ display: block; width: 100%; height: 640px; border: var(--linea) solid var(--linea-q); background: #fff; margin-top: 8px; }

/* ---------- Password dimenticata / nuova / conferma email ---------- */
.pwd-ok__titolo{ display: block; margin-bottom: 4px; }
.pwd-ok__testo{ margin: 0; }
#pwd-esito > *{ margin-bottom: 24px; }

/* ---------- Le mie prenotazioni ---------- */
.mie-elenco{ list-style: none; margin: 24px 0 0; padding: 0; border-bottom: var(--linea) solid var(--linea-q); }
.mie-scheda{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 0;
  border-top: var(--linea) solid var(--linea-q); color: var(--testo); text-decoration: none;
}
.mie-scheda:hover{ border-top-color: var(--blu-linea); }
.mie-scheda__dati{ display: flex; flex-wrap: wrap; gap: 4px 32px; align-items: baseline; flex: 1 1 auto; }
.mie-scheda__titolo{ min-width: 260px; font-size: calc(17px * var(--s, 1)); color: var(--testo); }
.mie-scheda__sotto{ display: flex; gap: 24px; font-size: calc(15px * var(--s, 1)); color: var(--testo-secondario); }
.mie-scheda__apri{ white-space: nowrap; color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
.mie-vuoto{ margin: 8px 0 24px; max-width: calc(52ch * var(--larg, 1)); }
.mie-piede{ margin-top: 48px; padding-top: 16px; border-top: var(--linea) solid var(--linea-q); max-width: calc(60ch * var(--larg, 1)); }
.mie-piede__riga{ margin: 0 0 4px; font-size: calc(15px * var(--s, 1)); }
.mie-verifica{ margin-top: 16px; font-size: calc(15px * var(--s, 1)); }
.mie-verifica p{ margin: 0 0 4px; font-size: calc(15px * var(--s, 1)); }
@media (max-width: 599px){
  .mie-scheda{ align-items: flex-start; }
  .mie-scheda__dati{ flex-direction: column; gap: 2px; }
  .mie-scheda__titolo{ min-width: 0; }
  .mie-scheda__apri{ align-self: center; }
}

/* ---------- Pagamento ---------- */
.pagina-pagamento .whatsapp-flottante{ bottom: 96px; }
.pag-layout{ display: block; margin-top: 8px; }
.pag-riepilogo{ min-width: 0; margin-bottom: 40px; }
.pag-suite{ margin: 0 0 16px; font-size: calc(22px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
/* Foto del riepilogo (2/10): la prima e' grande come una scheda della Home (max 560 x 373), le altre due stanno sotto, a meta' larghezza.
   Niente piu' striscia a scorrimento ne' trattini: si vedono tutte e tre. */
.pag-foto{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin: 0 0 16px; overflow: visible; }
.pag-foto__box{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 0; background: #fff; }
.pag-foto__box:first-child{ grid-column: 1 / -1; aspect-ratio: 4 / 3; }          /* telefono: come le schede Home (4:3, tutta larghezza) */
@media (min-width: 768px){ .pag-foto__box:first-child{ aspect-ratio: 3 / 2; } }  /* da 768: come le schede Home (3:2) */
.pag-foto__box img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.pag-foto__no{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.pag-punti{ display: none; }
.pag-punto{ width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.pag-punto span{ display: block; width: 16px; height: 1px; background: var(--occ-segno); }
.pag-punto[aria-current="true"] span{ height: 2px; background: var(--blu-linea); }
.pag-desc{ margin: 0 0 16px; max-width: calc(52ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.pag-desc .badge-segnaposto{ margin-left: 4px; vertical-align: 1px; }
.pag-date, .pag-orari{ margin: 0 0 6px; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.pag-cambia{ display: inline-block; margin: 8px 0 24px; padding: 8px 0; }
.pag-riepilogo .suite-costi{ max-width: calc(60ch * var(--larg, 1)); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pag-riepilogo .suite-costi__g{ justify-content: flex-start; }
.pag-riepilogo .suite-costi__g + .suite-costi__g::before{ content: "+" / ""; color: var(--testo-secondario); }   /* la distanza dal testo la da il "gap" del gruppo (12 px) */
.pag-totale{ display: flex; justify-content: space-between; gap: 16px; max-width: 360px; margin: 4px 0 8px; font-size: calc(16px * var(--s, 1)); }
.pag-totale b{ font-weight: 400; color: var(--c-titoli); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pag-riepilogo.pag-riepilogo--no .pag-foto{ opacity: .6; }
.pag-pannello{ border: var(--linea) solid var(--occ-segno); padding: 16px; background: #fff; }
.pag-pannello h2{ margin: 0 0 16px; font-size: calc(20px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
.pag-pannello h3{ margin: 24px 0 8px; font-size: calc(16px * var(--s, 1)); font-weight: 500; }
.pag-pannello p{ font-size: calc(16px * var(--s, 1)); }
.cifre{ margin: 0 0 20px; }
.cifre > div{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; }
.cifre dt, .cifre dd{ margin: 0; }
.cifre dd{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.cifre__acconto{ margin-top: 8px; padding-top: 14px !important; border-top: var(--linea) solid var(--linea-q); color: var(--c-titoli); font-size: calc(24px * var(--s, 1)); font-weight: 600; }
.cifre__acconto dt{ font-size: calc(18px * var(--s, 1)); font-weight: 600; }
.cifre__resto{ font-size: calc(16px * var(--s, 1)); }
.riquadro-carta{ border: var(--linea) solid var(--occ-segno); padding: 16px; margin: 0 0 20px; font-size: calc(15px * var(--s, 1)); color: var(--testo); }
.riquadro-carta p{ margin: 0; font-size: calc(15px * var(--s, 1)); }
.pag-conferma-a{ margin: 0 0 4px; font-size: calc(15px * var(--s, 1)); word-break: break-word; }
.pag-lingua{ margin: 0 0 16px; font-size: calc(15px * var(--s, 1)); display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.pag-lingua .link-bottone{ min-height: 44px; }
.pag-lingua-scelta{ margin: 8px 0 16px; }
.pag-canc .badge-segnaposto{ margin-left: 4px; }
.pag-canc p{ margin: 0 0 8px; font-size: calc(15px * var(--s, 1)); }
.pag-accetta{ margin: 16px 0 0; }
.pag-pannello .btn--primario{ margin-top: 16px; margin-bottom: 0; }
.pag-sim{ margin-top: 24px; padding-top: 12px; border-top: var(--linea) solid var(--linea-q); }
.pag-sim p{ margin: 0 0 8px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.pag-sim__azioni{ display: flex; flex-wrap: wrap; gap: 8px; }
.pag-esito-msg{ margin-bottom: 16px; }
.pag-accesso .btn{ margin-top: 12px; }
.pag-avviso-bassa{ height: 24px; }
.pag-attesa .suite-linea{ margin: 12px 0; max-width: none; }
@media (min-width: 900px){
  .pag-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
  .pag-riepilogo{ margin-bottom: 0; }
  .pag-pannello{ padding: 24px; }
  .pag-pannello--sticky{ position: sticky; top: 24px; }
}
@media (max-width: 899px){
  .pag-sim__azioni .btn{ flex: 1 1 100%; }
}
@media (max-width: 479px){
  .pag-riepilogo .suite-costi{ flex-direction: column; align-items: stretch; gap: 4px; max-width: 360px; }
  .pag-riepilogo .suite-costi__g{ justify-content: space-between; }
  .pag-riepilogo .suite-costi__g + .suite-costi__g::before{ display: none; }
}

/* ---------- Esito ---------- */
.esito{ max-width: 720px; }
.esito h1{ margin-bottom: 8px; }
.esito__codice{ margin: 0 0 20px; font-size: calc(18px * var(--s, 1)); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.esito__riga{ margin: 0 0 8px; }
.esito__aiuto{ margin: 0 0 12px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.esito-riepilogo{ margin: 28px 0; padding: 16px 0; border-top: var(--linea) solid var(--linea-q); border-bottom: var(--linea) solid var(--linea-q); }
.esito-riepilogo p{ margin: 0 0 6px; }
.esito-riepilogo .cifre{ margin: 12px 0 0; }
.esito-azione{ margin: 0 0 32px; }
.esito-azione .btn{ width: 100%; max-width: 440px; min-height: 48px; margin-bottom: 8px; }
.esito-azione p{ margin: 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.esito-cal{ margin: 32px 0 24px; }
.esito-link{ margin: 0 0 8px; }
.esito .messaggio{ margin-top: 0; margin-bottom: 16px; }
.esito .btn{ margin-bottom: 8px; }
.esito-attesa .suite-linea{ margin: 14px 0; max-width: none; }

/* ---------- Invito: scatola per chi prenota ---------- */
.invito-box{ margin: 40px 0; padding-top: 24px; border-top: var(--linea) solid var(--linea-q); max-width: 560px; }
.invito-box h2{ margin: 0 0 8px; font-size: calc(20px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
.invito-box > p{ font-size: calc(16px * var(--s, 1)); margin: 0 0 16px; }
.invito-box .campo{ margin-bottom: 16px; }
.invito-box .campo input{ min-height: 48px; }
.invito-box .btn--secondario{ min-height: 48px; }
.invito-riga{ padding: 12px 0; border-top: var(--linea) solid var(--linea-q); }
.invito-riga__testa{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.invito-riga__email{ font-size: calc(16px * var(--s, 1)); word-break: break-all; }
.etichetta-stato{ display: inline-block; padding: 1px 8px; border: var(--linea) solid var(--occ-segno); font-size: calc(14px * var(--s, 1)); color: var(--testo); }
.invito-riga p{ margin: 0 0 8px; font-size: calc(15px * var(--s, 1)); }
.invito-azioni{ display: flex; flex-wrap: wrap; gap: 8px 12px; }
.invito-conferma{ margin-top: 8px; }
.invito-conferma p{ font-size: calc(15px * var(--s, 1)); }
.invito-stato{ margin: 12px 0 0; font-size: calc(15px * var(--s, 1)); color: var(--successo); }
.invito-limite{ font-size: calc(15px * var(--s, 1)); color: var(--testo); }
@media (max-width: 599px){
  .invito-azioni .btn, .invito-conferma .btn{ width: 100%; }
}

/* ---------- Pagina dell'invitato ---------- */
.invito-pagina{ max-width: 560px; }
.invito-pagina p{ margin: 0 0 12px; }
.invito-pagina .azioni-pagina{ margin-top: 24px; }
.invito-pagina .btn{ margin-bottom: 0; }

@media (prefers-reduced-motion: reduce){
  .pag-attesa .suite-linea, .esito-attesa .suite-linea{ animation: none; }
}

/* ============================================================
   BLOCCO 3 — AREA UNICA DELLA SUITE (2 ottobre 2026)
   Specifica: docs/design/blocco3-area-suite-2026-10-01.md
   Solo i colori e le variabili gia' presenti sopra. Solo linee, tranne il blu pieno dei pulsanti principali
   e del fondo del visore a schermo intero. Angoli netti. Il <body> ha le classi "pagina-account pagina-area".
   ============================================================ */

/* ---------- Testata e comuni ---------- */
.pagina-area .eyebrow{ display: block; margin-bottom: 8px; }
.pagina-area h1{ margin: 0 0 8px; }
.pagina-area main :focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }
.area-sopra{ padding-top: 144px; }      /* le pagine dell'area suite senza foto in testata: spazio per i 3 tasti a sinistra (telefono: 3 x 38 px + 2 x 6 + 12) */
@media (min-width: 900px){ .area-sopra{ padding-top: 72px; } }
.area-vuoto-alto{ height: 72px; }
@media (min-width: 900px){ .area-sopra{ padding-top: 84px; } .area-vuoto-alto{ height: 84px; } }
.link-indietro{
  display: inline-block; min-height: 44px; padding: 10px 0; margin: 0 0 8px; font-size: calc(15px * var(--s, 1));
  color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px;
}
.area-date{ margin: 0 0 12px; font-size: calc(18px * var(--s, 1)); color: var(--testo); }
.etichetta{ display: inline-block; padding: 1px 10px; border: var(--linea) solid var(--occ-segno); font-size: calc(14px * var(--s, 1)); line-height: 22px; color: var(--testo); white-space: nowrap; }
.etichetta--da{ border-color: var(--blu-linea); color: var(--c-titoli-2); }
.etichetta--ok{ border-color: var(--successo); color: #327A55; }
.etichetta--neutra{ border-color: var(--occ-segno); color: var(--testo-secondario); }
.area-intro{ margin: 8px 0 0; max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.area-intro .badge-segnaposto, .area-nota .badge-segnaposto{ margin-left: 4px; vertical-align: 1px; }
.area-nota{ margin: 8px 0 0; max-width: calc(60ch * var(--larg, 1)); font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.area-sezione{ margin-top: 48px; }
.area-sezione > h2{ margin: 0 0 12px; font-size: calc(22px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
@media (max-width: 599px){ .area-sezione{ margin-top: 40px; } }
.area-piede{ margin-top: 56px; padding-top: 16px; border-top: var(--linea) solid var(--linea-q); max-width: calc(60ch * var(--larg, 1)); }
.area-piede p{ margin: 0 0 4px; font-size: calc(15px * var(--s, 1)); }
/* tasto "Accedi all'area riservata" (solo staff): 16 px sopra, 44 px di altezza; comparsa morbida (la imposta area-comune.js) */
.area-staff{ padding-top: 16px; }
.area-staff--anim{ box-sizing: border-box; overflow: hidden; transition: height 280ms cubic-bezier(.3,.7,.2,1), opacity 280ms cubic-bezier(.3,.7,.2,1); }
@media (prefers-reduced-motion: reduce){ .area-staff--anim{ transition: none; } }
.area-piede__elimina{ margin: 8px 0 0; }
.area-piede__elimina a{ display: inline-block; min-height: 44px; line-height: 44px; font-size: calc(15px * var(--s, 1)); }
.area-piede a:not(.btn), .area-stato a:not(.btn){ color: var(--c-titoli-2); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
/* caricamento: linee grigie continue che "respirano" (nessun cerchio che gira) */
.area-attesa{ display: block; height: 1px; margin: 16px 0; background: var(--occ-segno); animation: area-respira 1.6s ease-in-out infinite; }
@keyframes area-respira{ 0%, 100%{ opacity: .35; } 50%{ opacity: 1; } }
.area-attesa--riga{ margin: 20px 0; }
.area-caricamento{ list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.area-caricamento li{ border: var(--linea) solid var(--linea-q); aspect-ratio: 4 / 3; position: relative; }
.area-caricamento li::after{ content: ""; position: absolute; left: 20px; bottom: 28px; width: 40%; height: 1px; background: var(--occ-segno); animation: area-respira 1.6s ease-in-out infinite; }
@media (min-width: 1024px){ .area-caricamento{ grid-template-columns: repeat(3, 1fr); gap: 32px; } .area-caricamento li{ aspect-ratio: 3 / 4; } }

/* Stati di accesso (S1-S11): una pagina corta */
.area-stato{ max-width: 560px; }
.area-stato p{ margin: 0 0 16px; font-size: calc(16px * var(--s, 1)); }
.area-stato .azioni-pagina{ margin-top: 24px; }
.area-stato .riga-contatto{ margin-top: 24px; font-size: calc(15px * var(--s, 1)); color: var(--testo-secondario); }
.area-lista{ list-style: none; margin: 24px 0 0; padding: 0; border-bottom: var(--linea) solid var(--linea-q); max-width: 720px; }

/* ---------- I tre rettangoli dell'area (vetro come la Home, ma il titolo non sparisce mai) ---------- */
.area-griglia{ list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.area-tile{
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #FFFFFF; color: inherit; text-decoration: none;
  --velo-vetro-alto: .42; --velo-vetro-basso: .62;
}
.area-tile > img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.area-tile__sfocata{ filter: blur(16px); transform: scale(1.12); transition: opacity .45s ease; }
.area-tile::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,var(--velo-vetro-alto)) 0%, rgba(255,255,255,var(--velo-vetro-basso)) 100%);
  transition: opacity .45s ease;
}
.area-tile__scrim{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(4,23,41,0) 40%, rgba(4,23,41,.60) 70%, rgba(4,23,41,.72) 100%); }
.area-tile__testo{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 56px 20px 20px; display: flex; flex-direction: column; gap: 2px;
  color: var(--c-titoli); transition: color .45s ease;
}
.area-tile__titolo{ font-size: calc(24px * var(--s, 1)); line-height: 1.1; letter-spacing: .04em; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.area-tile__sub{ font-size: calc(16px * var(--s, 1)); }
.area-tile__stato{ font-size: calc(14px * var(--s, 1)); min-height: 20px; }
.area-tile__freccia{ position: absolute; right: 18px; bottom: 20px; z-index: 2; width: 22px; height: 22px; color: inherit; }
.area-tile:hover .area-tile__sfocata, .area-tile:hover::after{ opacity: 0; }
.area-tile:hover .area-tile__scrim{ opacity: 1; }
.area-tile:hover .area-tile__testo, .area-tile:hover .area-tile__freccia{ color: #FFFFFF; }
.area-tile:focus-visible, .area-tile:hover{ outline: 0; }
.area-tile:focus-visible{ outline: 3px solid var(--blu-pieno); outline-offset: 4px; }
.area-tile:focus-visible .area-tile__sfocata, .area-tile.is-centro .area-tile__sfocata, .area-tile:focus-visible::after, .area-tile.is-centro::after{ opacity: 0; }
.area-tile:focus-visible .area-tile__scrim, .area-tile.is-centro .area-tile__scrim{ opacity: 1; }
.area-tile:focus-visible .area-tile__testo, .area-tile.is-centro .area-tile__testo, .area-tile:focus-visible .area-tile__freccia, .area-tile.is-centro .area-tile__freccia{ color: #FFFFFF; }
@media (min-width: 768px){ .area-griglia{ grid-template-columns: minmax(0, 720px); } .area-tile{ aspect-ratio: 3 / 2; } }
@media (min-width: 1024px){
  .area-griglia{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .area-griglia--due{ grid-template-columns: repeat(2, calc((100% - 64px) / 3)); }
  .area-tile{ aspect-ratio: 3 / 4; }
  .area-tile__titolo{ font-size: calc(28px * var(--s, 1)); }
}
/* risparmio dati: foto nitida, nessuna copia sfocata e nessun velo (la scritta resta bianca sulla sfumatura scura) */
@media (prefers-reduced-data: reduce){
  .area-tile__sfocata, .area-tile::after{ display: none; }
  .area-tile__scrim{ opacity: 1; }
  .area-tile__testo, .area-tile__freccia{ color: #FFFFFF; }
}
.area-griglia--nitida .area-tile__sfocata, .area-griglia--nitida .area-tile::after{ display: none; }
.area-griglia--nitida .area-tile__scrim{ opacity: 1; }
.area-griglia--nitida .area-tile__testo, .area-griglia--nitida .area-tile__freccia{ color: #FFFFFF; }
@supports not (filter: blur(1px)){
  .area-tile__sfocata, .area-tile::after{ display: none; }
  .area-tile__scrim{ opacity: 1; }
  .area-tile__testo, .area-tile__freccia{ color: #FFFFFF; }
}
.invita-toggle{ margin: 4px 0 0; }
.invita-toggle .link-bottone{ font-size: calc(16px * var(--s, 1)); }
.invito-box--area{ margin: 16px 0 0; max-width: 560px; }

/* ---------- Colazione ---------- */
.col-layout{ display: block; margin-top: 24px; }
.col-pannello{ border: var(--linea) solid var(--occ-segno); padding: 16px; background: #fff; margin-top: 40px; }
.col-pannello h2{ margin: 0 0 12px; font-size: calc(20px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
@media (min-width: 900px){
  .col-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
  .col-pannello{ margin-top: 0; padding: 24px; }
  .col-pannello--sticky{ position: sticky; top: 24px; }
}
.col-blocco{ margin-top: 40px; }
.col-blocco:first-child{ margin-top: 0; }
.col-blocco > h2{ margin: 0 0 8px; font-size: calc(20px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.col-aiuto{ margin: 0 0 12px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.col-tab{ width: 100%; border-collapse: collapse; margin: 8px 0 0; }
.col-tab caption{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.col-tab th, .col-tab td{ border-top: var(--linea) solid var(--linea-q); padding: 6px 0; vertical-align: middle; text-align: left; }
.col-tab tr:last-child th, .col-tab tr:last-child td{ border-bottom: var(--linea) solid var(--linea-q); }
.col-tab thead th{ border-top: 0; font-size: calc(14px * var(--s, 1)); font-weight: 400; color: var(--testo-secondario); padding-bottom: 4px; }
.col-tab tbody th{ font-size: calc(16px * var(--s, 1)); font-weight: 500; color: var(--testo); min-height: 56px; padding-right: 12px; }
.col-tab .col-prezzo{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--testo); padding: 0 16px; }
.col-tab .col-qta{ width: 1%; white-space: nowrap; }
@media (max-width: 599px){
  .col-tab tbody tr{ height: 64px; }
  .col-tab th[scope="col"].col-prezzo{ display: none; }
  .col-tab td.col-prezzo{ display: none; }
  .col-tab .col-nomeprezzo{ display: block; font-weight: 400; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); font-variant-numeric: tabular-nums; }
}
@media (min-width: 600px){ .col-tab .col-nomeprezzo{ display: none; } }
.contapezzi{ gap: 0; }
.contapezzi button{ width: 44px; height: 44px; border: var(--linea) solid var(--occ-segno); background: #fff; color: var(--c-titoli); font-size: calc(20px * var(--s, 1)); line-height: 1; cursor: pointer; font-family: inherit; }
.contapezzi button:hover{ border-color: var(--blu-linea); }
.contapezzi button[aria-disabled="true"]{ color: var(--testo-secondario); border-color: var(--linea-q); cursor: not-allowed; }
.contapezzi__valore{ display: inline-block; min-width: 40px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.col-totale{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 12px 0 0; padding: 8px 0; font-size: calc(18px * var(--s, 1)); }
.col-totale b{ font-weight: 400; color: var(--c-titoli); font-variant-numeric: tabular-nums; white-space: nowrap; }
.segmenti__riga--lingue{ flex-wrap: wrap; }   /* cinque lingue: a righe da tre, poi due (stessa estetica, nessuna voce tagliata a 390 px) */
.segmenti__riga--lingue .segmenti__voce, .pagina-account .campo .segmenti__riga--lingue .segmenti__voce{ flex: 1 1 calc(33.333% - 8px); min-width: 0; }
.segmenti__riga--ore{ flex-wrap: wrap; }
.segmenti__riga--ore .segmenti__voce{ flex: 1 1 calc(25% - 8px); min-width: 64px; }
@media (min-width: 900px){ .segmenti__riga--ore .segmenti__voce{ flex: 1 1 0; min-width: 0; } }
.segmenti__voce[aria-disabled="true"]{ color: var(--testo-secondario); border-color: var(--linea-q); cursor: not-allowed; }
.col-pagopt{ display: flex; gap: 12px; align-items: flex-start; min-height: 64px; margin: 0 0 8px; padding: 12px 16px; border: var(--linea) solid var(--occ-segno); cursor: pointer; background: #fff; }
.col-pagopt input{ margin: 4px 0 0; width: 20px; height: 20px; accent-color: var(--blu-pieno); flex: none; }
.col-pagopt:has(input:checked){ border: 2px solid var(--blu-pieno); padding: 11px 15px; }
.col-pagopt:has(input:focus-visible){ outline: 2px solid var(--blu-pieno); outline-offset: 3px; }
.col-pagopt__t{ display: block; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.col-pagopt__d{ display: block; margin-top: 2px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.col-avviso-poco{ margin: 4px 0 8px; font-size: calc(14px * var(--s, 1)); color: var(--testo); }
.col-riep-riga{ display: flex; justify-content: space-between; gap: 16px; margin: 0 0 4px; font-size: calc(16px * var(--s, 1)); }
.col-riep-riga span:last-child{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-riep-sep{ margin: 12px 0; border: 0; border-top: var(--linea) solid var(--linea-q); }
.col-riep-tot{ display: flex; justify-content: space-between; gap: 16px; font-size: calc(22px * var(--s, 1)); color: var(--c-titoli); margin: 0 0 8px; }
.col-pannello .btn--primario{ margin-top: 12px; }
.col-ok{ border: var(--linea) solid var(--successo); padding: 16px; margin: 0 0 24px; max-width: 560px; }
.col-ok h2{ margin: 0 0 4px; font-size: calc(22px * var(--s, 1)); font-weight: 400; color: #327A55; }
.col-ok p{ margin: 4px 0; font-size: calc(16px * var(--s, 1)); }
.col-ok__codice{ letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.col-ordine{ max-width: 560px; }
.col-ordine .azioni-pagina{ max-width: 560px; }
/* elenco delle mattine */
.col-elenco{ list-style: none; margin: 16px 0 0; padding: 0; border-bottom: var(--linea) solid var(--linea-q); max-width: 880px; }
.col-riga{ display: flex; align-items: center; gap: 12px 20px; min-height: 72px; padding: 12px 0; border-top: var(--linea) solid var(--linea-q); flex-wrap: wrap; }
.col-riga__data{ flex: 0 0 auto; min-width: 190px; font-size: calc(17px * var(--s, 1)); color: var(--testo); }
.col-riga__data small{ display: block; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.col-riga__stato{ flex: 0 0 auto; }
.col-riga__testo{ flex: 1 1 200px; font-size: calc(15px * var(--s, 1)); color: var(--testo); margin: 0; }
.col-riga__azione{ flex: 0 0 auto; }
.col-riga .btn{ min-height: 44px; padding: 8px 20px; font-size: calc(15px * var(--s, 1)); }
@media (max-width: 599px){
  .col-riga{ align-items: flex-start; }
  .col-riga__data{ min-width: 0; flex: 1 1 auto; }
  .col-riga__testo{ flex-basis: 100%; }
  .col-riga__azione{ flex-basis: 100%; }
  .col-riga .btn{ width: 100%; min-height: 48px; }
}
.col-messaggio{ max-width: 560px; margin: 24px 0; font-size: calc(18px * var(--s, 1)); }
.col-messaggio p{ margin: 0 0 8px; }
.col-sim{ margin-top: 16px; padding-top: 12px; border-top: var(--linea) solid var(--linea-q); }
.col-sim p{ margin: 0 0 8px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.col-sim__azioni{ display: flex; flex-wrap: wrap; gap: 8px; }
.col-conferma{ margin-top: 12px; border: var(--linea) solid var(--blu-linea); padding: 12px 16px; }
.col-conferma p{ margin: 0 0 8px; font-size: calc(15px * var(--s, 1)); }
@media (max-width: 899px){ .pagina-colazione .whatsapp-flottante{ bottom: 96px; } .col-sim__azioni .btn{ flex: 1 1 100%; } }

/* ---------- Info camera ---------- */
.info-griglia{ list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px){ .info-griglia{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
/* ---- Vetro scorrevole (2/10 pomeriggio, richiesta di Luca) ----
   Ogni rettangolo ha una "chiarezza" --c tra 0 (vetro opaco) e 1 (foto nitida), scritta da js/area-info.js SOLO in base a dove si trova
   il rettangolo nello schermo: 1 quando e' al centro, scende verso 0 allontanandosi, e mentre quello sopra si spegne quello sotto si accende
   (la somma dei due e' sempre 1). Quando lo scorrimento si ferma, lo stesso file porta il valore a 0 o 1 con una piccola animazione fatta in JS
   (requestAnimationFrame): qui NON ci sono transizioni sulla variabile, perche' ogni browser le gestisce diversamente. Con "riduci le animazioni"
   --c vale solo 0 o 1 (si accende la riga piu' vicina al centro). */
.info-tile{
  position: relative; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; isolation: isolate;
  --velo-vetro-alto: .42; --velo-vetro-basso: .62;
  --c: 0;
}
/* tastiera: il rettangolo col fuoco da tastiera e' sempre nitido (il mouse sopra NON cambia nulla: conta solo la posizione) */
.info-tile:has(:focus-visible){ --c: 1 !important; }
@media (min-width: 768px){ .info-tile{ aspect-ratio: 3 / 2; } }
.info-tile__media{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.info-tile__media img, .info-tile__media video{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.info-tile__media img{ opacity: 0; transition: opacity .6s ease; }
.info-tile__media img.is-corrente{ opacity: 1; }
.info-tile__sfocata{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: blur(16px); transform: scale(1.12); opacity: calc(1 - var(--c)); }
.info-tile::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,var(--velo-vetro-alto)) 0%, rgba(255,255,255,var(--velo-vetro-basso)) 100%);
  opacity: calc(1 - var(--c));
}
.info-tile__scrim{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none; opacity: var(--c);
  background: linear-gradient(180deg, rgba(4,23,41,0) 40%, rgba(4,23,41,.60) 70%, rgba(4,23,41,.72) 100%); }
.info-tile__apri{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.info-tile__apri:focus-visible{ outline: 0; }
.info-tile:focus-within{ outline: 3px solid var(--blu-pieno); outline-offset: 4px; }
.info-tile:has(.info-tile__apri:not(:focus-visible)):focus-within{ outline: 0; }
.info-tile:has(.info-tile__apri:focus-visible), .info-tile:has(.info-tile__ctrl:focus-visible){ outline: 3px solid var(--blu-pieno); outline-offset: 4px; }
.info-tile__testo{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 20px 20px 20px 20px; pointer-events: none; display: flex; flex-direction: column; gap: 4px;
  color: var(--c-titoli); color: color-mix(in srgb, #fff calc(var(--c) * 100%), var(--c-titoli));   /* blu sul vetro, bianco sulla foto: passa piano piano */
}
.info-tile__titolo{ margin: 0; font-size: calc(24px * var(--s, 1)); line-height: 1.15; font-weight: 500; letter-spacing: .03em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 768px){ .info-tile__titolo{ font-size: calc(28px * var(--s, 1)); } }
.info-tile__tipo{ font-size: calc(14px * var(--s, 1)); display: flex; align-items: center; gap: 12px; }
.info-tile__badge{ position: absolute; top: 12px; left: 12px; z-index: 6; margin: 0; padding: 0 8px; background: #fff; border: var(--linea) solid var(--segnaposto-linea); color: var(--segnaposto-testo); font-size: calc(13px * var(--s, 1)); line-height: 20px; pointer-events: none; }
.info-tile__ctrl{
  position: absolute; z-index: 7; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: var(--linea) solid #fff; background: rgba(4,23,41,.55); color: #fff; opacity: var(--c);
}
.info-tile__ctrl svg{ width: 22px; height: 22px; }
.info-tile__ctrl--pausa{ right: 8px; top: 8px; }
/* FRECCE avanti/indietro (2/10 pomeriggio): solo un segno sottile, niente riquadro. Area di tocco 56 x 96 px, sul bordo della foto. */
.info-tile__ctrl--prec, .info-tile__ctrl--succ{
  top: 50%; width: 56px; height: 96px; margin-top: -48px; border: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(4,23,41,.6)); -webkit-tap-highlight-color: transparent;
}
.info-tile__ctrl--prec{ left: 0; }
.info-tile__ctrl--succ{ right: 0; }
.info-tile__ctrl--prec svg, .info-tile__ctrl--succ svg{ width: 30px; height: 44px; stroke-width: .9; opacity: .9; transition: opacity var(--t-rapido) ease, transform var(--t-rapido) var(--curva); }
.info-tile__ctrl--prec:hover svg, .info-tile__ctrl--succ:hover svg{ opacity: 1; }
.info-tile__ctrl--prec:hover svg{ transform: translateX(-2px); }
.info-tile__ctrl--succ:hover svg{ transform: translateX(2px); }
.info-tile__ctrl:focus-visible{ opacity: 1; outline: 2px solid #fff; outline-offset: -6px; box-shadow: 0 0 0 4px #041729; }
.info-tile__punti{ display: flex; gap: 6px; align-items: center; }
.info-tile__punti span{ display: block; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.info-tile__punti span.is-corrente{ height: 2px; opacity: 1; }
.info-tile__avvia{ position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 48px; padding: 0 20px; border: var(--linea) solid #fff; background: rgba(4,23,41,.55); color: #fff; cursor: pointer; font: inherit; font-size: calc(16px * var(--s, 1)); }
.info-tile__avvia[hidden]{ display: none; }
.info-tile__avvia{ opacity: var(--c); }   /* il pulsante "Avvia il video" compare insieme alla foto nitida */
/* Wi-Fi: nessuna foto nitida; piu' il rettangolo e' al centro, piu' il velo sale verso il bianco e compare il testo in blu */
.info-tile--wifi .info-tile__wifi{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: var(--c); color: var(--c-titoli); pointer-events: none; }
.info-tile--wifi .info-tile__wifi > *{ pointer-events: auto; }
.info-tile--wifi .info-tile__wifi p{ margin: 0; font-size: calc(20px * var(--s, 1)); color: var(--c-titoli); }
.info-tile--wifi .info-tile__wifi .btn{ align-self: flex-start; min-height: 44px; padding: 8px 16px; font-size: calc(15px * var(--s, 1)); background: #fff; }
.info-tile--wifi .info-tile__pw{ font-variant-ligatures: none; user-select: all; word-break: break-all; }
.info-tile--wifi::after{ opacity: 1; background: linear-gradient(180deg, rgba(255,255,255,calc(.42 + .52 * var(--c))) 0%, rgba(255,255,255,calc(.62 + .32 * var(--c))) 100%); }
.info-tile--wifi .info-tile__scrim{ opacity: 0; }
.info-tile--wifi .info-tile__testo{ color: var(--c-titoli); }
.info-tile--wifi .info-tile__apri{ z-index: 5; }
.info-tile--wifi .info-tile__wifi{ z-index: 8; }
.info-tile--wifi .info-tile__wifi .btn, .info-tile--wifi .info-tile__wifi .info-wifi__stato{ position: relative; }
.info-wifi__stato{ min-height: 20px; font-size: calc(14px * var(--s, 1)); }
.info-griglia--nitida .info-tile__sfocata, .info-griglia--nitida .info-tile::after{ display: none; }
@media (prefers-reduced-motion: reduce){
  .tasto-sx, .tasto-sx__testo, .area-tile__sfocata, .area-tile::after, .area-tile__scrim, .area-tile__testo, .info-tile__media img, .info-tile__ctrl, .info-tile__ctrl svg, .area-attesa{ transition: none; animation: none; }
}
@media (prefers-reduced-data: reduce){ .info-tile__sfocata{ display: none; } }

/* ---------- Visore a schermo intero ---------- */
.visore{
  box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--blu-pieno); color: #fff; overflow: hidden;
}
.visore::backdrop{ background: var(--blu-pieno); }
.visore:not([open]){ display: none; }
.visore[open]{ display: flex; flex-direction: column; animation: visore-entra .2s ease; }
@keyframes visore-entra{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .visore[open]{ animation: none; } }
.visore__barra{ flex: 0 0 56px; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; border-bottom: var(--linea) solid rgba(255,255,255,.35); }
.visore__titolo{ flex: 1 1 auto; min-width: 0; margin: 0; font-size: calc(16px * var(--s, 1)); font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visore__conta{ flex: 0 0 auto; font-size: calc(14px * var(--s, 1)); color: #fff; }
.visore__chiudi{ flex: 0 0 auto; height: 48px; min-width: 48px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--linea) solid #fff; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: calc(16px * var(--s, 1)); }
.visore__chiudi svg{ width: 22px; height: 22px; }
.visore__chiudi-testo{ display: none; }
@media (min-width: 600px){ .visore__chiudi-testo{ display: inline; } }
.visore__palco{ position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 8px 72px; touch-action: pan-y pinch-zoom; }
.visore__palco img, .visore__palco video{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.visore__sfocata{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px); opacity: .35; z-index: 0; }
.visore__palco > *:not(.visore__sfocata):not(.visore__freccia){ position: relative; z-index: 1; }
.visore__errore{ text-align: center; }
.visore__errore p{ margin: 0 0 12px; font-size: calc(18px * var(--s, 1)); color: #fff; }
.visore__errore button{ min-height: 48px; padding: 0 20px; border: var(--linea) solid #fff; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.visore__freccia{
  position: absolute; top: 50%; margin-top: -56px; width: 64px; height: 112px; padding: 0; display: grid; place-items: center;
  border: 0; background: none; color: #fff; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent;   /* area di tocco ampia: 64 x 112 px */
}
/* FRECCE (2/10 pomeriggio): un segno solo, sottile, senza cerchio ne' riquadro; leggero alone scuro per leggersi sulle foto chiare */
.visore__freccia svg{ width: 34px; height: 52px; stroke-width: .8; opacity: .85; filter: drop-shadow(0 0 6px rgba(4,23,41,.55)); transition: opacity var(--t-rapido) ease, transform var(--t-rapido) var(--curva); }
.visore__freccia:hover svg{ opacity: 1; }
.visore__freccia--prec:hover svg{ transform: translateX(-3px); }
.visore__freccia--succ:hover svg{ transform: translateX(3px); }
.visore__freccia--prec{ left: 0; }
.visore__freccia--succ{ right: 0; }
.visore__freccia[aria-disabled="true"]{ cursor: default; }
.visore__freccia[aria-disabled="true"] svg{ opacity: .22; transform: none; }
.visore :focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.visore__piede{ flex: 0 0 auto; padding: 12px 16px 20px; max-height: 40%; overflow: auto; }
.visore__piede .badge-segnaposto{ background: #fff; margin: 0 8px 8px 0; }
.visore__dida{ margin: 8px 0 0; max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); line-height: 1.5; color: #fff; }
.visore__wifi{ text-align: center; font-size: calc(28px * var(--s, 1)); line-height: 1.4; color: #fff; }
.visore__wifi p{ margin: 0 0 8px; color: #fff; font-size: calc(28px * var(--s, 1)); }
.visore__wifi .info-wifi__stato{ font-size: calc(16px * var(--s, 1)); color: #fff; }
.visore__wifi .btn{ background: transparent; color: #fff; border: var(--linea) solid #fff; margin-top: 8px; }
.visore__wifi .info-tile__pw{ font-variant-ligatures: none; user-select: all; word-break: break-all; }
@media (max-width: 599px){ .visore__palco{ padding: 8px 8px; } .visore__freccia{ width: 56px; } .visore__freccia svg{ width: 30px; height: 46px; } }
@media (max-height: 499px){ .visore__piede{ padding: 6px 16px 8px; } .visore__dida{ margin-top: 2px; } }
body.visore-aperto{ overflow: hidden; }

/* ---------- Carta prepagata ---------- */
.car-colonna{ max-width: 720px; }
.car-saldo{ margin: 4px 0 0; font-size: calc(32px * var(--s, 1)); line-height: 1.1; color: var(--c-titoli); font-variant-numeric: tabular-nums; }
@media (min-width: 600px){ .car-saldo{ font-size: calc(40px * var(--s, 1)); } }
.car-agg{ margin: 8px 0 0; font-size: calc(16px * var(--s, 1)); }
.car-nota{ margin: 4px 0 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); max-width: calc(60ch * var(--larg, 1)); }
.car-attesa{ margin: 12px 0 0; font-size: calc(16px * var(--s, 1)); }
.car-ric{ border: var(--linea) solid var(--occ-segno); padding: 16px; margin-top: 40px; }
@media (min-width: 600px){ .car-ric{ padding: 24px 16px; } }
.car-ric h2{ margin: 0 0 12px; font-size: calc(22px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
.car-ric .segmenti__riga{ flex-wrap: wrap; }
.car-ric .segmenti__voce{ flex: 1 1 calc(50% - 8px); }
@media (min-width: 600px){ .car-ric .segmenti__voce{ flex: 1 1 0; } }
.car-ric .campo{ margin: 16px 0 0; }
.car-ric .campo input[type="text"]{ min-height: 48px; max-width: 240px; }
.car-ric p{ font-size: calc(16px * var(--s, 1)); }
.car-ric .btn--primario{ margin-top: 16px; }
.car-mov{ width: 100%; border-collapse: collapse; margin-top: 8px; }
.car-mov caption{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.car-mov th, .car-mov td{ border-top: var(--linea) solid var(--linea-q); padding: 10px 8px 10px 0; text-align: left; font-size: calc(15px * var(--s, 1)); vertical-align: top; font-weight: 400; }
.car-mov thead th{ border-top: 0; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.car-mov tr:last-child td{ border-bottom: var(--linea) solid var(--linea-q); }
.car-mov .car-imp{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 16px; }
.car-mov-lista{ list-style: none; margin: 8px 0 0; padding: 0; border-bottom: var(--linea) solid var(--linea-q); }
.car-mov-lista li{ border-top: var(--linea) solid var(--linea-q); padding: 12px 0; }
.car-mov-lista .car-riga1{ display: flex; justify-content: space-between; gap: 12px; font-size: calc(16px * var(--s, 1)); }
.car-mov-lista .car-riga2{ display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); align-items: center; }
.car-mov-tab{ display: none; }
@media (min-width: 600px){ .car-mov-tab{ display: table; } .car-mov-lista{ display: none; } }
.car-testi h3{ margin: 24px 0 8px; font-size: calc(18px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.car-testi p{ margin: 0 0 12px; max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); }
.car-testi .badge-segnaposto{ vertical-align: 1px; }
.car-ok{ border: var(--linea) solid var(--successo); padding: 16px; margin: 0 0 24px; }
.car-ok h3{ margin: 0 0 4px; font-size: calc(20px * var(--s, 1)); font-weight: 400; color: #327A55; }
.car-ok p{ margin: 4px 0; }
.pagina-carta .car-ric .btn--primario{ width: 100%; }
@media (min-width: 600px){ .pagina-carta .car-ric .btn--primario{ width: auto; min-width: 260px; } }
/* il titolo che riceve il focus da programma (dopo un cambio di stato) non mostra il contorno: lo annunciano i lettori di schermo */
.pagina-area main [tabindex="-1"]:focus{ outline: 0; }
.pagina-area .campo .col-pagopt{ display: flex; margin: 0 0 8px; font-weight: 400; }
.pagina-area .campo .col-pagopt .col-pagopt__t{ font-size: calc(16px * var(--s, 1)); }
@media (max-width: 899px){ .pagina-carta .whatsapp-flottante, .pagina-area-suite .whatsapp-flottante{ bottom: 96px; } }

/* ============================================================
   Pagina SERVIZI (servizi.html, 02/10/2026): elenco pratico di ristoranti, escursioni, sport acquatici e noleggi di Boa Vista.
   Stile v3: molto spazio bianco, tipografia essenziale, solo linee continue sottili (--linea). Nessuna stella, nessun voto.
   Cinque schede (categorie) e, sotto, solo le attivita' della scheda scelta in una colonna di righe (03/10/2026: torna la colonna unica).
   ============================================================ */
.sezione--senza-sopra{ padding-top: 0; }
.pagina-servizi h1{ margin-bottom: 28px; }
.pagina-servizi{ padding-bottom: 0; }

/* AVVISO: ben visibile ma elegante. Cornice sottile blu, titoletto in maiuscolo spaziato, testo di lettura comoda. */
.srv-avviso{
  max-width: 760px; margin: 0 0 28px; padding: 22px 24px 24px;
  border: var(--linea) solid var(--blu-linea);
  border-left-width: 4px;               /* il solo tratto piu' marcato: porta l'occhio sull'avviso (resta una linea, non un fondo) */
}
.srv-avviso__t{
  margin: 0 0 10px; font-size: calc(13px * var(--s, 1)); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--c-titoli-2); font-weight: 600;
}
.srv-avviso__testo{ margin: 0; font-size: calc(17px * var(--s, 1)); line-height: 1.65; color: var(--testo); }
@media (max-width: 599px){ .srv-avviso{ padding: 18px 16px 20px; } .srv-avviso__testo{ font-size: calc(16px * var(--s, 1)); } }

.srv-ufficiale{ margin: 0 0 32px; font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); }
.srv-ufficiale a{ color: var(--c-titoli); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 4px; }
.srv-ufficiale a:hover{ text-decoration-thickness: 2px; }

/* SCHEDE delle categorie (tab): solo testo blu, quella scelta e' sottolineata con una riga piu' marcata. Nessun pulsante pesante.
   Telefono: la fila scorre di lato col dito (senza barra visibile e senza muovere la pagina); un'ombra sul bordo destro dice che c'e' altro. */
.srv-schede{
  position: relative; display: flex; flex-wrap: nowrap; gap: 0 28px; margin: 8px 0 0; padding: 0 28px 0 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-bottom: var(--linea) solid var(--linea-q);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.srv-schede::-webkit-scrollbar{ display: none; }
.srv-scheda{
  flex: 0 0 auto; margin: 0; padding: 14px 0 12px; min-height: 48px; background: none; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; font: inherit; font-size: calc(17px * var(--s, 1)); line-height: 1.3; color: var(--c-titoli);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.srv-scheda:hover{ border-bottom-color: var(--blu-linea); }
.srv-scheda[aria-selected="true"]{ border-bottom-color: var(--blu-pieno); }
/* INDICATORE che scivola dalla scheda vecchia alla nuova (disegnato dallo script; se c'e', la riga fissa sotto la scheda scelta si spegne).
   DURATA: .30s qui sotto (deve restare vicina a ENTRATA_MS in js/servizi-pagina.js). */
.srv-schede--ind .srv-scheda[aria-selected="true"]{ border-bottom-color: transparent; }
.srv-schede__ind{
  position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--blu-pieno); pointer-events: none;
  transition: left .30s cubic-bezier(.4,0,.2,1), width .30s cubic-bezier(.4,0,.2,1);
}
.srv-schede__ind--fermo{ transition: none; }
@media (prefers-reduced-motion: reduce){ .srv-schede__ind{ transition: none; } }
.srv-scheda:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: -2px; }
.srv-scheda__n{ margin-left: 2px; font-size: calc(14px * var(--s, 1)); font-variant-numeric: tabular-nums; color: var(--testo-secondario); }
@media (min-width: 900px){
  .srv-schede{ overflow: visible; flex-wrap: wrap; padding-right: 0; gap: 0 36px; -webkit-mask-image: none; mask-image: none; }
  .srv-scheda{ font-size: calc(18px * var(--s, 1)); }
}

.srv-stato{ margin: 0 0 24px; font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); }

/* Elenco della categoria scelta: UNA colonna di righe separate da linee sottili (come nella versione del 02/10), larghezza di lettura comoda.
   Ogni riga: nome e localita' a sinistra, costo indicativo al centro, collegamenti a destra (su telefono tutto in colonna). */
#srv-elenco{ position: relative; display: flow-root; min-height: 380px; }   /* min-height: categorie corte non fanno "saltare" la pagina; flow-root: i margini restano dentro, cosi' l'altezza animata e' esatta */
#srv-elenco.srv-in-moto{ overflow-y: clip; }           /* durante il cambio l'altezza si anima: il contenuto non esce dal riquadro (di lato resta libero) */
.srv-cat{ margin: 0 0 56px; padding-top: 24px; }
.srv-cat__titolo{ margin: 0 0 12px; font-size: calc(28px * var(--s, 1)); font-weight: 400; color: var(--c-titoli); }
@media (min-width: 900px){ .srv-cat__titolo{ font-size: calc(34px * var(--s, 1)); } }
.srv-lista{ list-style: none; margin: 0; padding: 0; border-bottom: var(--linea) solid var(--linea-q); }
.srv-voce{
  display: grid; grid-template-columns: 1fr; gap: 6px 24px; align-items: baseline;
  padding: 18px 0; border-top: var(--linea) solid var(--linea-q);
}
.srv-voce__nome{ display: block; font-size: calc(19px * var(--s, 1)); line-height: 1.3; color: var(--c-titoli); overflow-wrap: anywhere; }
.srv-voce__luogo{ display: block; margin-top: 2px; font-size: calc(14px * var(--s, 1)); color: var(--testo-secondario); }
.srv-voce__costo{ margin: 0; font-size: calc(16px * var(--s, 1)); color: var(--testo); }
.srv-voce__etichetta{ font-size: calc(13px * var(--s, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--testo-secondario); margin-right: 6px; }
.srv-voce__valore{ font-variant-numeric: tabular-nums; }
.srv-voce__link{ margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: calc(16px * var(--s, 1)); }
.srv-voce__a{
  display: inline-block; padding: 8px 0; color: var(--c-titoli); text-decoration: underline;
  text-decoration-thickness: var(--linea); text-underline-offset: 4px;
}
.srv-voce__a:hover{ text-decoration-thickness: 2px; }
.srv-voce__dist{ display: grid; gap: 4px; }
.srv-voce__isola{ color: var(--testo-secondario); font-style: normal; }
@media (min-width: 760px){
  .srv-voce{ grid-template-columns: minmax(0, 1fr) 230px 290px; padding: 20px 0; }
  .srv-voce__principale{ grid-column: 1; }
  .srv-voce__dist{ grid-column: 2; gap: 8px; }
  .srv-voce__link{ grid-column: 3; justify-content: flex-end; }
  .srv-voce__etichetta{ display: block; margin: 0 0 2px; font-size: calc(12px * var(--s, 1)); }
}

/* Numeri di emergenza: una riga sobria sotto il collegamento al sito del turismo (testo piccolo, filetti sottili, niente colori d'allarme) */
.srv-emergenza{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; max-width: none; margin: 0 0 28px; padding: 12px 0;
  border-top: var(--linea) solid var(--linea-q); border-bottom: var(--linea) solid var(--linea-q); font-size: calc(16px * var(--s, 1)); color: var(--testo);
}
.srv-emergenza__t{ font-size: calc(13px * var(--s, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-secondario); margin-right: 4px; }
.srv-emergenza__n{ white-space: nowrap; }
.srv-emergenza a{
  display: inline-block; padding: 8px 2px; color: var(--c-titoli); font-variant-numeric: tabular-nums; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 4px;
}

/* Nota in testa alla scheda "Salute" (a Boa Vista non c'e' un ospedale) */
.srv-nota{ max-width: 760px; margin: 0 0 18px; font-size: calc(16px * var(--s, 1)); line-height: 1.6; color: var(--testo); }

/* "Ordina per: Nome · Vicinanza a piedi · Vicinanza in auto": tre pulsanti a due stati, solo testo, quello scelto e' sottolineato */
.srv-ordina{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 0 0 6px; }
.srv-ordina__t{ font-size: calc(13px * var(--s, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-secondario); }
.srv-ordina__b{
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0; padding: 12px 0 10px; min-height: 44px;
  font: inherit; font-size: calc(16px * var(--s, 1)); color: var(--testo-secondario); cursor: pointer;
}
.srv-ordina__b:hover{ color: var(--c-titoli); border-bottom-color: var(--blu-linea); }
.srv-ordina__b[aria-pressed="true"]{ color: var(--c-titoli); border-bottom-color: var(--blu-pieno); }
.srv-ordina__b:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: 2px; }


/* ============================================================
   SFONDO "MURO IMBIANCATO A CALCE" (richiesta di Luca, 2026-10-02)
   Una texture quasi impercettibile sotto le superfici bianche:
   chiazze larghe, pennellate appena accennate e grana finissima.
   Sono tre disegni SVG generati dal browser (feTurbulence), pesano
   circa 1,3 KB in tutto e non si scarica nessun file. Ogni disegno
   e' un riquadro che si ripete senza giunture (stitchTiles) e ha
   una misura diversa (1000, 700, 300 px), cosi' la ripetizione non
   si nota. Sono macchie semitrasparenti di grigio neutro (niente tinte: con una tinta
   si vedrebbero a occhio nudo sfumature di colore a gradini) sopra il
   bianco: scuriscono il bianco da 0 a circa 3% (media circa 1%).
   PER REGOLARE: in ognuno dei tre disegni qui sotto, nella matrice
   feColorMatrix, l'ultima riga e' "K 0 0 0 B". Cambia K (il primo
   numero): 0.042 chiazze, 0.022 pennellate, 0.03 grana. Piu' alto =
   piu' visibile; 0 = quel disegno e' spento (cambia anche B in 0).
   Per spegnere tutto: --muro-immagine: none.
   Solo il fondo della pagina (body); foto, video, vetro, pulsanti,
   campi dei moduli e calendario hanno il loro fondo e restano puliti.
   ============================================================ */
:root{
  --muro-immagine:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0014 .016' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .42 0 0 0 0 .42 0.022 0 0 0 -0.0065'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .42 0 0 0 0 .42 0.03 0 0 0 -0.0085'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0042' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .42 0 0 0 0 .42 0.042 0 0 0 -0.0135'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --muro-misura: 700px 700px, 300px 300px, 1000px 1000px;
}
body{
  background-color: #fff;
  background-image: var(--muro-immagine);
  background-size: var(--muro-misura);
  background-repeat: repeat;
}
/* I blocchi che erano "bianco crema" (ora bianchi) lasciano vedere il muro. */
.sezione--alternata, .fascia-legale{ background: transparent; }

/* ---------- Pagina "Elimina il mio account" (elimina-account.html) ---------- */
.del-sottotitolo{ margin: 32px 0 8px; font-size: calc(20px * var(--s, 1)); font-weight: 500; line-height: 1.25; color: var(--c-titoli); }
.del-elenco{ margin: 0 0 8px; padding-left: 1.2em; max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); line-height: 1.5; }
.del-elenco li{ margin-bottom: 6px; }
#del-resta{ max-width: calc(60ch * var(--larg, 1)); font-size: calc(16px * var(--s, 1)); line-height: 1.5; margin: 0 0 24px; }
#del-resta a{ color: var(--c-titoli-2); text-decoration: underline; text-underline-offset: 3px; }
.del-conferma{ display: flex; gap: 12px; align-items: flex-start; min-height: 44px; margin: 16px 0 20px; font-size: calc(16px * var(--s, 1)); line-height: 1.4; cursor: pointer; }
.del-conferma input{ flex: 0 0 24px; width: 24px; height: 24px; margin: 2px 0 0; }
#del-attive{ margin: 0 0 20px; }
#del-attive .btn{ margin-top: 12px; }
.del-btn-elimina[hidden], #del-esci-rientra[hidden]{ display: none; }

/* ============================================================
   SEGNAPOSTO "FOTO NON ANCORA DISPONIBILE" su tutte le foto reali del
   sito (richiesta di Luca, 2026-10-15). SOLO CSS: nessun file HTML e'
   stato toccato, nessuna foto e' stata cancellata o rinominata.
   Il testo riusa la chiave i18n che esiste gia' per ".foto-in-arrivo"
   (Capo Verde, Mare, La storia): "foto_non_disp" in
   sito/v3/i18n/it|en|pt.json. Qui non si puo' usare data-i18n (il testo
   e' dentro a ::before/::after, non un elemento vero), quindi la lingua
   si segue con :lang() sull'attributo lang di <html>, che i18n-v3.js
   aggiorna ad ogni cambio di lingua (vedi js/i18n-v3.js, riga con
   "document.documentElement.setAttribute('lang', ...)"): stesso risultato,
   stesse tre frasi gia' tradotte, senza inventarne di nuove.
   Il colore e il bordo riprendono ".foto-in-arrivo" qui sopra (bordo
   continuo var(--occ-segno), non piu' tratteggiato: scelta di Luca per
   la v3, "era tratteggiato" nel commento sopra), per restare coerenti
   con l'UNICO riquadro-segnaposto che il sito aveva gia'.
   ESCLUSI DI PROPOSITO: il video di apertura (.apertura__quadro-video,
   non e' una foto) e la mappa disegnata "Dove siamo" (.loc-mappa,
   .loc-mappa-mobile: e' un disegno/illustrazione, non una fotografia).
   Aggiunto il 2026-10-15 (punto 3 piu' sotto): lo stesso riquadro anche
   nel visore a schermo intero (js/visore.js), che prima mostrava ancora
   la foto vera quando si cliccava "Apri" su una tessera di "Info camera".
   AGGIUNTO il 2026-10-16 (strumento TEMPORANEO js/sostituisci-immagini.js): ogni foto sostituita porta la classe "cb-sost-img";
   dove c'e' una foto sostituita il riquadro finto sparisce e la foto torna visibile con le regole di prima. Se si toglie lo
   strumento, queste condizioni ":not(.cb-sost-img)" / ":not(:has(.cb-sost-img))" non danno fastidio (nessuna classe = riquadri come sempre).
   COME TOGLIERLO quando arrivano le foto vere: eliminare questo intero
   blocco (da qui alla riga "FINE SEGNAPOSTO FOTO"). Le foto reali
   torneranno visibili da sole, perche' qui si nasconde solo con CSS
   (display:none), src/alt/data-i18n-alt non sono mai stati toccati.
   AGGIORNATO il 2026-10-15 (stessa richiesta, completamento): testo
   cambiato in "FOTO DA INSERIRE" / "PHOTO TO ADD" / "FOTO A ADICIONAR"
   (parole esatte di Luca, non piu' "Foto non ancora disponibile");
   aggiunte le ultime 3 gallerie che mancavano, trovate con una ricerca
   di tutte le classi usate per <img> generate da JS in sito/v3/js/:
   punto 4 ".tre-foto__box" (Camere, galleria a turno sotto il
   calendario), punto 5 ".suite-foto__box" (Prenota, scelta della suite,
   qui con z-index piu' alto dell'effetto vetro "non disponibile" così
   il riquadro si vede sempre), punto 6 ".pag-foto__box" (riepilogo di
   Pagamento). Tutte e tre erano foto reali ancora visibili prima di
   oggi: non sono un errore del lavoro precedente, semplicemente non
   erano nell'elenco.
   AGGIORNATO ancora il 2026-10-15 (richiesta di Luca): aggiunte righe
   diagonali grige sopra lo sfondo (stesso colore dei bordi, var(--occ-segno))
   e un numero progressivo visibile dentro ogni riquadro ("FOTO DA INSERIRE
   NUMERO X"), per sapere a colpo d'occhio quale foto va in quale punto
   quando arriveranno le foto vere. Il numero usa un contatore CSS
   (counter-reset / counter-increment / counter()), senza JavaScript: si
   azzera da solo a ogni caricamento di pagina (counter-reset su body, qui
   sotto), quindi la numerazione riparte sempre da 1 su ogni pagina HTML,
   nell'ordine in cui i riquadri compaiono nel codice. */
/* AGGIORNATO il 2026-10-16 (richiesta di Luca: "il numero deve essere
   lineare, non devono esserci piu' 1 in diverse pagine"): il contatore CSS
   e' stato TOLTO. Il numero di ogni riquadro e' ora quello FISSO della
   foto che c'era prima, preso da js/numera-foto-mappa.js (stessi numeri
   di docs/foto-numerate-sito.md) da js/segnaposto-numeri.js, che lo scrive
   nell'attributo data-foto-n del contenitore (data-foto-n2 per il secondo
   riquadro di .galleria). Cosi' ogni foto ha lo stesso numero su tutte
   le pagine e non riparte mai da 1. */

/* ---- 1) Foto "a riempimento" con eventuale scritta sopra: fascia in
   cima alle pagine interne, le 6 tessere della Home, le 3 tessere
   dell'Area riservata (fatte da js/area-pagina.js), le tessere della
   galleria "Info camera" (fatte da js/area-info.js). Si nasconde la foto
   reale (e la sua eventuale copia sfocata "vetro") e un riquadro ::before
   prende il suo posto, SOTTO alla sfumatura/scritta che c'era gia'
   (restano leggibili, l'impaginazione non cambia).
   TOLTO da questo gruppo il 2026-10-16: ".apertura__foto-full" (foto di
   sfondo dell'apertura Home). Luca ha caricato 11 foto candidate in
   foto/01/ e vuole confrontarle a schermo con due frecce temporanee
   (sito/v3/js/prova-apertura-frecce.js): quello slot resta SBLOCCATO,
   mostra una foto vera (effetto bianco e nero/velo, righe 833-849 qui
   sotto, resta invariato). Gli altri 4 selettori di questo gruppo
   restano "FOTO DA INSERIRE" come prima: NON toccarli per questo
   compito. Quando Luca avra' scelto la foto definitiva, rimettere
   ".apertura__foto-full img" e ".apertura__foto-full::before" (3 lingue)
   in questo gruppo, insieme al resto della pulizia descritta in
   sito/v3/js/prova-apertura-frecce.js. */
.fascia-superiore{ position: relative; }
.fascia-superiore img:not(.cb-sost-img),
.argomenti__tile img:not(.cb-sost-img),
.area-tile > img:not(.cb-sost-img),
.info-tile__media img:not(.cb-sost-img){ display: none; }
.info-tile__sfocata:not(.cb-sost-img){ display: none; }
.fascia-superiore:not(:has(.cb-sost-img))::before,
.argomenti__tile:not(:has(.cb-sost-img))::before,
.area-tile:not(:has(.cb-sost-img))::before,
.info-tile__media:not(:has(.cb-sost-img))::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  pointer-events: none;
}
:lang(en) .fascia-superiore:not(:has(.cb-sost-img))::before,
:lang(en) .argomenti__tile:not(:has(.cb-sost-img))::before,
:lang(en) .area-tile:not(:has(.cb-sost-img))::before,
:lang(en) .info-tile__media:not(:has(.cb-sost-img))::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .fascia-superiore:not(:has(.cb-sost-img))::before,
:lang(fr) .argomenti__tile:not(:has(.cb-sost-img))::before,
:lang(fr) .area-tile:not(:has(.cb-sost-img))::before,
:lang(fr) .info-tile__media:not(:has(.cb-sost-img))::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .fascia-superiore:not(:has(.cb-sost-img))::before,
:lang(de) .argomenti__tile:not(:has(.cb-sost-img))::before,
:lang(de) .area-tile:not(:has(.cb-sost-img))::before,
:lang(de) .info-tile__media:not(:has(.cb-sost-img))::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .fascia-superiore:not(:has(.cb-sost-img))::before,
:lang(pt) .argomenti__tile:not(:has(.cb-sost-img))::before,
:lang(pt) .area-tile:not(:has(.cb-sost-img))::before,
:lang(pt) .info-tile__media:not(:has(.cb-sost-img))::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

/* ---- 2) Foto "in sequenza, senza scritte sopra": la galleria delle
   pagine Suite (camera-1..7.html) e le due foto nella scelta della
   suite in Prenota. Qui la foto NON ha testo sovrapposto: il riquadro
   prende il suo posto nel flusso normale della pagina (niente
   position:absolute). In ".galleria" (griglia) i due riquadri sono gli
   stessi ::before/::after del contenitore: con le foto vere nascoste
   (display:none, escluse dalla griglia) restano gli unici due elementi
   della griglia, nella stessa proporzione 3/4 di prima. */
.galleria img:not(.cb-sost-img){ display: none; }
.galleria:not(:has(> img:nth-of-type(1).cb-sost-img))::before,
.galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 10px;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  border-radius: var(--radius);
}
:lang(en) .galleria:not(:has(> img:nth-of-type(1).cb-sost-img))::before,
:lang(en) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .galleria:not(:has(> img:nth-of-type(1).cb-sost-img))::before,
:lang(fr) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .galleria:not(:has(> img:nth-of-type(1).cb-sost-img))::before,
:lang(de) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .galleria:not(:has(> img:nth-of-type(1).cb-sost-img))::before, :lang(pt) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

.galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n2); }
:lang(en) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n2); }
:lang(fr) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "PHOTO À AJOUTER N° " attr(data-foto-n2); }
:lang(de) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n2); }
:lang(pt) .galleria:not(:has(> img:nth-of-type(2).cb-sost-img))::after{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n2); }

/* ---- 3) Il visore a schermo intero (js/visore.js), usato oggi solo dalla pagina
   "Info camera" (area-info-camera.html, js/area-info.js: pulsante "Apri" su un
   rettangolo di tipo foto). La foto reale e la sua copia sfocata di sfondo
   (.visore__sfocata, il "vetro" dietro la foto mentre carica) si nascondono; un
   riquadro prende il loro posto nello stesso punto, perche' .visore__palco e'
   display:grid e ::before del contenitore diventa un elemento della griglia
   (stesso meccanismo del punto 1 qui sopra e di .galleria).
   :has() sceglie il riquadro SOLO quando c'e' davvero una <img> dentro
   .visore__media: cosi' il video e il testo del Wi-Fi nel visore restano come
   sono (qui si nasconde solo la FOTO, come nel resto del sito). */
.visore__media img:not(.cb-sost-img),
.visore__sfocata:not(.cb-sost-img){ display: none; }
.visore__palco:has(.visore__media img):not(:has(.cb-sost-img))::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(420px, 90%);
  aspect-ratio: 3 / 4;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  border-radius: var(--radius);
}
:lang(en) .visore__palco:has(.visore__media img):not(:has(.cb-sost-img))::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .visore__palco:has(.visore__media img):not(:has(.cb-sost-img))::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .visore__palco:has(.visore__media img):not(:has(.cb-sost-img))::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .visore__palco:has(.visore__media img):not(:has(.cb-sost-img))::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

/* ---- 4) Galleria "tre foto a turno" sotto il calendario di Camere
   (camere.html, js/galleria-camere.js): 3 riquadri 3:2, dentro ognuno 4
   foto che si alternano a dissolvenza. La dissolvenza viene tolta (le
   foto vere restano nascoste, non ha senso farne dissolvere una finta
   nell'altra): basta nascondere OGNI .tre-foto__img e mettere il
   riquadro sul contenitore. Aggiunto il 2026-10-15 (completamento del
   punto 3, richiesta di Luca). */
.tre-foto__img:not(.cb-sost-img){ display: none; }
.tre-foto__box:not(:has(.cb-sost-img))::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  pointer-events: none;
}
:lang(en) .tre-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .tre-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .tre-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .tre-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

/* ---- 5) Galleria della scelta suite in "Prenota" (prenota-suite.html,
   js/prenota-suite.js, classe ".suite-foto__box"): stesso meccanismo del
   punto 1, ma qui il riquadro ha ANCHE un effetto "vetro" per le suite
   NON disponibili (sfocata + velo + pulsante "Vedi"), che resta attivo
   per segnalare la disponibilita'. Il riquadro FOTO DA INSERIRE sta
   SOPRA quel vetro (z-index piu' alto di sfocata/velo/pulsante, che
   arrivano al massimo a 3) cosi' si vede sempre, disponibile o no.
   Aggiunto il 2026-10-15 (completamento del punto 3, richiesta di Luca). */
.suite-foto__img:not(.cb-sost-img){ display: none; }
.suite-foto__box:not(:has(.cb-sost-img))::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  pointer-events: none;
}
:lang(en) .suite-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .suite-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .suite-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .suite-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

/* ---- 6) Riepilogo di Pagamento (pagamento.html, js/pagamento.js,
   classe ".pag-foto__box"): stesso meccanismo del punto 1, nessun vetro
   qui dentro. Aggiunto il 2026-10-15 (completamento del punto 3,
   richiesta di Luca). */
.pag-foto__box img:not(.cb-sost-img){ display: none; }
.pag-foto__box:not(:has(.cb-sost-img))::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
  color: var(--testo-secondario);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
  pointer-events: none;
}
:lang(en) .pag-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .pag-foto__box:not(:has(.cb-sost-img))::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .pag-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .pag-foto__box:not(:has(.cb-sost-img))::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }
/* ===== FINE SEGNAPOSTO FOTO ===== */

/* ---- Home: spazio "Inserire filmato" al posto del filmato di apertura (2026-10-16, richiesta di Luca) ---- */
.apertura__quadro-vuoto{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: var(--linea) solid var(--blu-linea);
  color: var(--c-titoli);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(15px, 2.2vw, 19px) * var(--s, 1));
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Orari del bar (pagine Colazioni e Aperitivi): js/orari-bar.js ---- */
.orari-bar{ margin: 0; }
.orari-valore{ font-size: calc(clamp(22px, 3vw, 30px) * var(--s, 1)); letter-spacing: .02em; color: var(--c-titoli); }
.orari-valore[hidden], .orari-bar .badge-segnaposto[hidden]{ display: none; }

/* ---- Pagina Mare: collegamenti a siti esterni con le condizioni del mare (2026-10-16) ---- */
.link-esterni{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.link-esterni a{ font-size: calc(18px * var(--s, 1)); color: var(--c-titoli); text-decoration: none; border-bottom: var(--linea) solid var(--blu-linea); }
.link-esterni a::after{ content: " \2197"; }
.link-esterni a:hover{ border-bottom-width: 2px; }
.link-esterni span{ display: block; margin-top: 4px; font-size: calc(15px * var(--s, 1)); line-height: 1.45; color: var(--testo-secondario); }

/* ---- Riquadri senza foto (".foto-in-arrivo") numerati come le altre foto (mare.html): stesso aspetto di "FOTO DA INSERIRE NUMERO n".
   Il numero lo scrive js/segnaposto-numeri.js (data-foto-n) dalla mappa js/numera-foto-mappa.js. Sparisce da solo quando il riquadro
   riceve una foto con lo strumento js/sostituisci-immagini.js (classe cb-sost-ok). ---- */
.foto-in-arrivo[data-foto-n]:not(.cb-sost-ok){
  font-size: 0;
  background: var(--bianco-caldo) repeating-linear-gradient(45deg, var(--occ-segno) 0, var(--occ-segno) 1px, transparent 1px, transparent 10px);
  border: var(--linea) solid var(--occ-segno);
}
.foto-in-arrivo[data-foto-n]:not(.cb-sost-ok)::before{
  content: "FOTO DA INSERIRE NUMERO " attr(data-foto-n);
  font-family: "Questrial", sans-serif;
  font-size: calc(clamp(13px, 2vw, 15px) * var(--s, 1));
  line-height: 1.4;
  color: var(--testo-secondario);
  text-shadow: 0 0 6px var(--bianco-caldo), 0 0 6px var(--bianco-caldo);
}
:lang(en) .foto-in-arrivo[data-foto-n]:not(.cb-sost-ok)::before{ content: "PHOTO TO ADD NUMBER " attr(data-foto-n); }
:lang(fr) .foto-in-arrivo[data-foto-n]:not(.cb-sost-ok)::before{ content: "PHOTO À AJOUTER N° " attr(data-foto-n); }
:lang(de) .foto-in-arrivo[data-foto-n]:not(.cb-sost-ok)::before{ content: "FOTO EINFÜGEN NR. " attr(data-foto-n); }
:lang(pt) .foto-in-arrivo[data-foto-n]:not(.cb-sost-ok)::before{ content: "FOTO A ADICIONAR NÚMERO " attr(data-foto-n); }

/* ============================================================
   SELETTORE DI LINGUA A LINGUETTA (2026-10-16, richiesta di Luca; specifica: docs/design/selettore-lingua.md)
   Quadrato in alto a destra, attaccato al bordo dello schermo, con la bandiera della lingua attuale. Al clic: Italiano / English / Português / Français / Deutsch.
   Creato da js/selettore-lingua.js. La bandiera segue <html lang> (solo CSS). Le voci sono button.lang-btn[data-lang]: il cambio lo fanno
   gli script esistenti (i18n.js, i18n-v3.js). Non c'e' nell'app (html.in-app), nel pannello, offline e in stampa.
   ============================================================ */
.selettore-lingua{ position: fixed; top: 12px; right: env(safe-area-inset-right, 0px); z-index: 210; }
@media (min-width: 900px){ .selettore-lingua{ top: 20px; } }
.selettore-lingua__linguetta{
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5); color: var(--c-titoli);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 70, 106, .55); border-right: 0; border-radius: 0;
  transition: box-shadow var(--t-rapido) ease, background-color var(--t-rapido) ease;
}
@media (min-width: 900px){ .selettore-lingua__linguetta{ width: 48px; height: 48px; } }
.selettore-lingua__linguetta:hover{ background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--blu-linea); }
.selettore-lingua.is-aperto .selettore-lingua__linguetta{ background: rgba(255, 255, 255, .96); }
.selettore-lingua__linguetta:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: -4px; }

/* bandiera: una sola visibile, scelta da <html lang>; predefinita Italia */
.selettore-lingua__bandiera{ display: none; line-height: 0; }
.selettore-lingua__bandiera svg, .selettore-lingua__voce-bandiera svg{ display: block; outline: 1px solid rgba(4, 23, 41, .28); outline-offset: -1px; }
html:not(:lang(en)):not(:lang(pt)):not(:lang(fr)):not(:lang(de)) .selettore-lingua__bandiera--it,
html:lang(en) .selettore-lingua__bandiera--en,
html:lang(pt) .selettore-lingua__bandiera--pt,
html:lang(fr) .selettore-lingua__bandiera--fr,
html:lang(de) .selettore-lingua__bandiera--de{ display: block; }

.selettore-lingua__pannello{
  position: absolute; top: 100%; right: 0; margin-top: 8px; box-sizing: border-box;
  width: 208px; max-width: calc(100vw - 24px);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--blu-linea); border-right: 0; border-radius: 0; box-shadow: none;
  visibility: hidden; opacity: 0; transform: translateX(12px);
  transition: opacity var(--t-rapido) ease, transform var(--t-rapido) ease, visibility 0s linear var(--t-rapido);
}
@media (min-width: 900px){ .selettore-lingua__pannello{ width: 224px; } }
.selettore-lingua.is-aperto .selettore-lingua__pannello{
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva), visibility 0s;
}
/* voci: stesso bottone .lang-btn del piede della pagina, ma qui grande e senza riempimento (vince su style.css e sul resto di v3.css) */
.selettore-lingua .selettore-lingua__voce{
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-width: 0; height: 48px; min-height: 48px; padding: 0 14px;
  background: transparent; color: var(--c-titoli); border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: calc(16px * var(--s, 1)); font-weight: 400; letter-spacing: 0; box-shadow: none;
  transition: background-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.selettore-lingua .selettore-lingua__voce:hover,
.selettore-lingua .selettore-lingua__voce:not([aria-current="true"]):hover{ background: rgba(30, 70, 106, .06); box-shadow: inset 0 0 0 1px var(--blu-linea); }
.selettore-lingua .selettore-lingua__voce[aria-current="true"]{ background: transparent; color: var(--c-titoli); box-shadow: inset 3px 0 0 var(--blu-pieno); }
.selettore-lingua .selettore-lingua__voce[aria-current="true"]:hover{ box-shadow: inset 3px 0 0 var(--blu-pieno), inset 0 0 0 1px var(--blu-linea); }
.selettore-lingua .selettore-lingua__voce:focus-visible{ outline: 2px solid var(--blu-pieno); outline-offset: -4px; }
.selettore-lingua__voce-bandiera{ flex: none; line-height: 0; }
.selettore-lingua__nome{ flex: 1 1 auto; }
.selettore-lingua__voce[aria-current="true"] .selettore-lingua__nome{ font-weight: 700; }
.selettore-lingua__spunta{ flex: none; line-height: 0; opacity: 0; }
.selettore-lingua__voce[aria-current="true"] .selettore-lingua__spunta{ opacity: 1; }
/* apparizione "opaco -> nitido": le tre voci entrano sfocate, una dopo l'altra (con "riduci animazioni" i tempi valgono 0) */
.selettore-lingua__voce{ opacity: 0; filter: blur(6px); transition: opacity var(--t-medio) var(--curva) var(--ritardo, 0ms), filter var(--t-medio) var(--curva) var(--ritardo, 0ms), background-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease; }
.selettore-lingua.is-aperto .selettore-lingua__voce{ opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce){ .selettore-lingua__voce{ filter: none; } }
html.in-app .selettore-lingua{ display: none !important; }
@media print{ .selettore-lingua{ display: none !important; } }
/* Home: il pulsante temporaneo "Rivedi" occupa lo stesso angolo: sta a sinistra della linguetta (sparira' prima della pubblicazione) */
.rivedi-apertura{ right: 60px; }

/* ============================================================
   MODALITA' LEGGERA (18/10/2026, richiesta di Luca: "il sito dal mio Mac vecchio e' difficile da vedere")
   La classe "leggero" su <html> la mette js/leggero.js quando l'apparecchio e' vecchio o lento (o con ?leggero=1 nell'indirizzo).
   Su un apparecchio normale queste regole non agiscono mai: il sito resta com'e'. Qui si tolgono SOLO le cose pesanti per la scheda grafica,
   lasciando lo stesso disegno in versione ferma o piu' semplice. Altre parti: css/mappa-home.css (mappa), js/mappa-sfondo.js (niente zoom).
   Per togliere la modalita' leggera: cancellare questo blocco (le altre parti non fanno danni da sole).
   ============================================================ */
/* 1) Vetri sfocati dei pulsanti fissi (lingua, tasti a sinistra, "Rivedi"): la sfocatura dietro a un elemento fisso si rifa a ogni scorrimento.
      Al suo posto un fondo bianco piu' pieno (stessa idea di "vetro chiaro"). */
html.leggero .tasto-sx,
html.leggero .selettore-lingua__linguetta,
html.leggero .selettore-lingua__pannello,
html.leggero .rivedi-apertura,
html.leggero .header--sopra-apertura{ -webkit-backdrop-filter: none; backdrop-filter: none; }
html.leggero .tasto-sx{ background: rgba(255, 255, 255, .84); }
html.leggero .selettore-lingua__linguetta{ background: rgba(255, 255, 255, .92); }
/* 2) Le sei foto della Home: niente copia sfocata (filter: blur su sei foto grandi). Il "vetro" diventa un velo bianco piu' forte sopra la foto
      nitida; scorrendo, la foto al centro si schiarisce/scopre come prima (e' solo l'opacita' del velo). */
html.leggero .argomenti__sfocata{ display: none; }
html.leggero .argomenti__tile{ --velo-vetro-alto: .74; --velo-vetro-basso: .86; }
/* 3) Comparsa delle foto allo scorrimento: semplice dissolvenza invece della maschera animata (la maschera si ridisegna a ogni fotogramma). */
html.leggero .argomenti--rivela .argomenti__tile{
  -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity .6s ease;
}
html.leggero .argomenti--rivela .argomenti__tile.is-rivelata{ opacity: 1; transition: opacity .6s ease; }
/* 4) Apertura: la foto (e il riquadro del filmato) non si allargano piu' da una striscia (il taglio animato sopra una foto in bianco e nero a tutto
      schermo costa molto): compaiono con una dissolvenza. Le lettere del nome restano com'erano (solo opacita'). */
html.leggero .apertura__foto-full,
html.leggero .apertura__quadro{ -webkit-clip-path: none; clip-path: none; animation: cb-leggero-dissolvi .9s ease both; }
@keyframes cb-leggero-dissolvi{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  html.leggero .apertura__foto-full,
  html.leggero .apertura__quadro{ animation: none; }
}

/* ============================================================
   RIPIEGHI PER BROWSER VECCHI (18/10/2026, richiesta di Luca: Mac molto vecchio, Safari 12-15 o Chrome vecchi)
   Il CSS sopra e' moderno. Qui, in fondo, si rimedia a cio' che un browser vecchio non conosce, cosi' la pagina resta leggibile e usabile
   (non serve che sia identica). Ogni blocco agisce SOLO dove la funzione manca: sui browser aggiornati non cambia niente.
   Gia' sistemato altrove (nei file stessi):
   - "inset: ..." (Safari prima del 14.1) e' stato scritto come top/right/bottom/left in tutti i CSS (se si aggiunge un "inset", scriverlo cosi');
   - "svh" (Safari prima del 15.4): prima della riga con "svh" c'e' sempre la stessa riga con "vh" (min-height, width dell'apertura).
   Quello che resta, qui sotto. Cosa NON si ripara (accettato): ":has()" (Safari prima del 15.4: i riquadri "FOTO DA INSERIRE" non si vedono; le foto vere
   si vedono), "@container" (calendario di Prenota: resta la versione stretta), i "gap" dei flex nelle pagine interne (solo spazi piu' stretti).
   ============================================================ */

/* 1) aspect-ratio (Safari prima del 15): senza, i riquadri delle foto si schiacciano a altezza zero. Ripiego classico: altezza zero + riempimento
      in percentuale (la percentuale e' sulla LARGHEZZA: altezza/larghezza della proporzione). Gli elementi dentro sono gia' posizionati in assoluto. */
@supports not (aspect-ratio: 1 / 1) {
  .argomenti__tile{ height: 0; padding-bottom: 71.4286%; }                            /* 7 : 5 (telefono; ritocco 26/10/2026, prima 14 : 9 = 64.2857%) */
  @media (min-width: 768px){ .argomenti__tile{ padding-bottom: 63.4921%; } }          /* 63 : 40 (computer; ritocco 26/10/2026, prima 7 : 4 = 57.1429%) */
  .apertura__quadro{ height: min(46.8vw, 46.8vh, 378px); }                            /* quadrato: stessa misura della larghezza */
  .tre-foto__box{ height: 0; padding-bottom: 66.6667%; }                              /* 3 : 2 (galleria sotto il calendario) */
  .suite-foto__box{ height: 0; padding-bottom: 75%; }                                 /* 4 : 3 (scelta della suite) */
  .area-tile{ height: 0; padding-bottom: 75%; }
  @media (min-width: 768px){ .area-tile{ padding-bottom: 66.6667%; } }
  .info-tile{ height: 0; padding-bottom: 75%; }
  @media (min-width: 768px){ .info-tile{ padding-bottom: 66.6667%; } }
  .pag-foto__box{ height: 0; padding-bottom: 66.6667%; }
  .pag-foto__box:first-child{ padding-bottom: 75%; }
  @media (min-width: 768px){ .pag-foto__box:first-child{ padding-bottom: 66.6667%; } }
}

/* 2) clamp() (Safari prima del 13.1): senza, la dimensione dei titoli della Home non viene applicata e il nome resterebbe piccolo. Misure medie fisse. */
@supports not (font-size: calc(clamp(1px, 2vw, 3px))) {
  .apertura__titolo{ font-size: calc(18px * var(--s, 1)); }                                   /* come clamp(18px, 4.95vw, 42.5px) */
  @media (min-width: 364px){ .apertura__titolo{ font-size: calc(4.95vw * var(--s, 1)); } }
  @media (min-width: 859px){ .apertura__titolo{ font-size: calc(42.5px * var(--s, 1)); } }
  .apertura__sottotitolo{ font-size: calc(15px * var(--s, 1)); }                              /* come clamp(15px, 1.5vw, 19px) */
  @media (min-width: 1000px){ .apertura__sottotitolo{ font-size: calc(1.5vw * var(--s, 1)); } }
  @media (min-width: 1267px){ .apertura__sottotitolo{ font-size: calc(19px * var(--s, 1)); } }
  .argomenti__titolo{ font-size: calc(24px * var(--s, 1)); }                                  /* come clamp(24px, 3.2vw, 40px) */
  @media (min-width: 750px){ .argomenti__titolo{ font-size: calc(3.2vw * var(--s, 1)); } }
  @media (min-width: 1250px){ .argomenti__titolo{ font-size: calc(40px * var(--s, 1)); } }
}

/* 3) color-mix() (Safari prima del 16.2): serve al colore del pulsante "Rivedi" (solo in fase di revisione). Senza, resterebbe scuro su scuro. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .rivedi-apertura{ color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
}

/* 4) "gap" dentro i flex (Safari prima del 14.1): js/leggero.js mette la classe "senza-gap-flex" su <html> se il browser non lo conosce.
      Si rimettono gli spazi con i margini, solo per le parti della Home e dei bottoni. */
html.senza-gap-flex .apertura__testo > * + *{ margin-top: 22px; }
html.senza-gap-flex .apertura__centro > * + *{ margin-top: 28px; }
html.senza-gap-flex .argomenti__testo > * + *{ margin-top: 2px; }
html.senza-gap-flex .btn-gruppo > *{ margin: 0 16px 16px 0; }
html.senza-gap-flex .btn > * + *{ margin-left: 8px; }
html.senza-gap-flex .footer__basso > * + *{ margin-left: 16px; }
html.senza-gap-flex .loc-comandi > * + *{ margin-top: 6px; }
html.senza-gap-flex .loc-piede > *{ margin-right: 12px; }
html.senza-gap-flex .lang-selector > * + *{ margin-left: 4px; }
html.senza-gap-flex .menu-laterale__lingue > * + *{ margin-left: 6px; }

/* PAGINA EMERGENZE (25/10/2026, richiesta di Luca): elenco di tasti grandi che chiamano col tocco. Telefono: uno sotto l'altro, alti almeno 64 px
   (comodi col pollice). Il numero e' grande a sinistra, la descrizione a destra. Colori e linee: quelli dei pulsanti del sito (nessun rosso). */
.emerg-elenco{ display: grid; gap: 12px; margin-top: 20px; max-width: 560px; }
.emerg-elenco .btn{ justify-content: flex-start; flex-wrap: wrap; gap: 6px 18px; min-height: 64px; padding: 12px 22px; text-align: left; }
.emerg-num{ font-size: calc(30px * var(--s, 1)); line-height: 1; letter-spacing: .02em; min-width: 3ch; }