/* PTEK · identità del sito nuovo
   I colori vengono dal logo e da quello che devono far sentire a chi sceglie un impianto:
   - blu notte: fiducia e competenza. È il colore delle lettere del logo. Regge il 30% della pagina.
   - bianco caldo e grigio granito: pulizia, precisione svizzera, le valli. Il 60%.
   - rosso brace: calore e azione. Solo dove si deve cliccare: il 10%, non di più.
   - verde: natura, legno, energia rinnovabile. È l'arco del logo. Dice «va bene», non «clicca».
   Un solo carattere, Archivo, servito dal sito: largo nei titoli come le lettere del logo. */

@font-face { font-family: "Archivo"; src: url("../caratteri/archivo-v2.woff2") format("woff2"); font-weight: 400 900; font-stretch: 100% 125%; font-display: swap; }

:root {
  --notte-950: #0A1622;
  --notte-900: #0F2233;
  --notte-800: #17324A;
  --notte-700: #23445F;
  --neve: #FBFAF7;
  --granito-100: #F2F0EB;
  --granito-200: #E3DFD7;
  --granito-500: #6B665E;
  --bianco: #FFFFFF;
  --brace-600: #B8300F;
  --brace-500: #D03C1A;
  --brace-400: #E9583A;
  --brace-50: #FDEDE7;
  --ambra-300: #FFB25C;
  --verde-700: #256B33;
  --verde-600: #2F7D3B;
  --verde-100: #E4F1E5;
  --lago-600: #1F5FA8;
  --inchiostro: #101C29;
  --testo: #36434F;
  --su-scuro: #EEF2F6;
  --su-scuro-2: #B4C0CC;

  --carattere: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px;
  --ombra-md: 0 4px 10px rgba(10,22,34,.07), 0 1px 3px rgba(10,22,34,.05);
  --ombra-lg: 0 10px 28px rgba(10,22,34,.10), 0 3px 8px rgba(10,22,34,.05);
  --ombra-xl: 0 22px 54px rgba(10,22,34,.16), 0 8px 18px rgba(10,22,34,.07);
  --bagliore: 0 0 0 1px rgba(233,88,58,.35), 0 10px 34px rgba(208,60,26,.38);
  /* Largo quanto serve: 1180 sugli schermi normali, poi cresce con lo schermo fino a 1640. Era fisso a
     1180 e il founder, su uno schermo grande: «sembra avere dei limiti orizzontali» (5 ottobre 2026). */
  --largo: clamp(1180px, 88vw, 1640px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--neve); color: var(--testo);
  font-family: var(--carattere); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
img { height: auto; } /* con width e height nel tag la foto tiene la sua forma e lo spazio resta riservato prima che arrivi */
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--carattere); font-stretch: 112%; color: var(--inchiostro); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--brace-400); outline-offset: 3px; border-radius: 4px; }

.salta { position: absolute; left: -999px; top: 0; background: var(--bianco); color: var(--inchiostro); padding: .7rem 1rem; z-index: 100; border-radius: 0 0 var(--r-md) 0; }
.salta:focus { left: 0; }
.contenitore { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 1.25rem; }

/* ── Bottoni ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--carattere); font-stretch: 106%; font-weight: 650; font-size: 1rem; line-height: 1;
  min-height: 52px; padding: 0 1.5rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.btn-brace { background: linear-gradient(180deg, #E24A2A 0%, var(--brace-500) 52%, #C2360F 100%); color: var(--bianco); box-shadow: 0 8px 22px rgba(208,60,26,.30), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-brace:hover { background: linear-gradient(180deg, #D8431F 0%, var(--brace-600) 100%); box-shadow: 0 12px 30px rgba(208,60,26,.42), inset 0 1px 0 rgba(255,255,255,.24); transform: translateY(-1px); }
.btn-vetro { background: rgba(255,255,255,.10); color: var(--bianco); border-color: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-vetro:hover { background: rgba(255,255,255,.2); }
.btn-scuro { background: var(--notte-900); color: var(--bianco); }
.btn-scuro:hover { background: var(--notte-800); transform: translateY(-1px); }
.btn-linea { background: transparent; color: var(--inchiostro); border-color: var(--granito-200); }
.btn-linea:hover { border-color: var(--inchiostro); }
.btn-piccolo { min-height: 44px; padding: 0 1.15rem; font-size: .95rem; }

/* ── Testata ─────────────────────────────────────────────────── */
.testata { position: fixed; inset: .75rem 0 auto 0; z-index: 50; pointer-events: none; }
.testata-barra {
  pointer-events: auto; display: flex; align-items: center; gap: 1.25rem;
  max-width: calc(var(--largo) - 2.5rem); margin: 0 auto; padding: .45rem .55rem .45rem 1rem;
  background: rgba(255,255,255,.96); border: 1px solid rgba(10,22,34,.08); border-radius: 999px;
  box-shadow: var(--ombra-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.testata-logo { display: block; flex: none; }
/* Il logo è un'immagine su fondo bianco: così il suo riquadro si fonde con la testata invece di vedersi. */
.testata-logo img { height: 44px; width: auto; mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav a { font-weight: 550; font-size: .97rem; color: var(--inchiostro); text-decoration: none; padding: .55rem .8rem; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.nav a:hover { background: var(--granito-100); }
.nav a[aria-current="page"] { color: var(--brace-500); }
/* Il pannello dei servizi: si apre passando sopra «Servizi» o arrivandoci con la tastiera. */
.nav-gruppo { position: relative; }
.nav-capo { display: inline-flex; align-items: center; gap: .3rem; }
.nav-freccia { width: .7rem; height: .7rem; transition: transform .2s ease; }
.nav-gruppo:hover .nav-freccia, .nav-gruppo:focus-within .nav-freccia { transform: rotate(180deg); }
.nav-pannello {
  position: absolute; top: calc(100% + .6rem); left: -1.25rem; width: 37rem; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; padding: .7rem;
  background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); box-shadow: var(--ombra-xl);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-pannello::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; } /* il ponte fra la voce e il pannello */
.nav-gruppo:hover .nav-pannello, .nav-gruppo:focus-within .nav-pannello { opacity: 1; visibility: visible; transform: none; }
.nav .nav-pannello a { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: var(--r-md); }
.nav-pannello a b { font-weight: 650; color: var(--inchiostro); }
.nav-pannello a span { font-size: .86rem; font-weight: 450; color: var(--granito-500); }
.nav .nav-pannello a.nav-tutti { grid-column: 1 / -1; margin-top: .3rem; padding-top: .8rem; border-top: 1px solid var(--granito-200); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--brace-500); font-weight: 650; }
.testata-azioni { display: flex; align-items: center; gap: .4rem; }
.testata-telefono { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .65rem; border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--inchiostro); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .2s ease; }
.testata-telefono svg { width: 1.05rem; height: 1.05rem; color: var(--verde-600); flex: none; }
.testata-telefono:hover { background: var(--granito-100); }
.menu-bottone { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--granito-200); background: var(--bianco); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.menu-bottone span { display: block; width: 18px; height: 2px; background: var(--inchiostro); box-shadow: 0 6px 0 var(--inchiostro), 0 -6px 0 var(--inchiostro); }
.menu-mobile { display: none; }
@media (max-width: 78rem) { .testata-telefono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .testata-telefono { padding: 0; width: 44px; justify-content: center; } }
@media (max-width: 62rem) {
  .testata-barra { margin: 0 .75rem; gap: .6rem; }
  .nav { display: none; }
  .menu-bottone { display: inline-flex; }
  .testata-azioni { margin-left: auto; }
  .menu-mobile {
    pointer-events: auto; margin: .5rem .75rem 0; padding: .9rem; background: var(--bianco);
    border: 1px solid rgba(10,22,34,.08); border-radius: var(--r-xl); box-shadow: var(--ombra-xl);
    max-height: calc(100svh - 6.5rem); overflow: auto; overscroll-behavior: contain;
  }
  .menu-mobile[data-aperto="si"] { display: block; }
  .menu-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .menu-azioni .btn { width: 100%; padding: 0 .8rem; }
  .menu-titolo { margin: 1.1rem .5rem .3rem; font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--granito-500); }
  .menu-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
  .menu-griglia a { font-weight: 550; font-size: 1.02rem; color: var(--inchiostro); text-decoration: none; padding: .78rem .6rem; border-radius: var(--r-md); }
  .menu-griglia a:hover, .menu-griglia a[aria-current="page"] { background: var(--granito-100); }
}
@media (max-width: 30rem) { .testata-azioni .btn span.lungo { display: none; } .testata-logo img { height: 38px; } }
@media (max-width: 23rem) { .testata-telefono { display: none; } }

/* ── Prima schermata ─────────────────────────────────────────────
   Il video si vede com'è: nessun velo scuro sopra. Le braci stanno a destra e il fondo a
   sinistra è già nero, quindi il testo si legge da solo. L'ombra è sulle lettere, non sul video. */
.eroe { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: #050607; color: var(--bianco); overflow: hidden; isolation: isolate; }
.eroe-sfondo, .eroe-sfondo img, .eroe-sfondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eroe-sfondo { z-index: -1; }
.eroe-sfondo canvas { opacity: 0; transition: opacity 1.4s ease; }
.eroe-sfondo canvas[data-parte="si"] { opacity: 1; }
.video-pausa { position: absolute; right: 1.25rem; bottom: calc(var(--sfuma) + 1.5rem); z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(10,22,34,.5); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease; }
.video-pausa[hidden] { display: none; }
.video-pausa:hover { background: rgba(10,22,34,.8); }
.video-pausa svg { width: 18px; height: 18px; fill: var(--bianco); }
.video-pausa .icona-avvia, .video-pausa[aria-pressed="true"] .icona-ferma { display: none; }
.video-pausa[aria-pressed="true"] .icona-avvia { display: block; }
/* La prima schermata non finisce con un bordo: sfuma. Dal nero delle braci al chiaro della pagina passando
   per i toni caldi della cenere e del legno, non per il grigio (un nero che schiarisce da solo diventa
   grigio sporco) e NON per il blu: la prima versione passava dal blu del logo e il founder l'ha scartata,
   «deve essere molto migliore e non blu» (5 ottobre 2026). I passi sono fitti e seguono una curva dolce,
   così non si vede dove comincia né dove finisce. La sfumatura sta SOTTO la prima schermata: la schermata
   resta alta quanto lo schermo e la prenotazione resta in vista; la sfumatura si scopre scorrendo. */
.eroe { --sfuma: clamp(10.5rem, 17vw, 15rem); min-height: calc(100svh + var(--sfuma)); }
.eroe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: calc(var(--sfuma) + 7rem);
  background: linear-gradient(to bottom,
    rgba(5,6,7,0) 0%, rgba(7,6,6,.35) 9%, rgba(9,7,6,.7) 18%, #0D0A08 27%, #18110D 35%,
    #2A1E18 43%, #433229 51%, #645044 59%, #8A7567 67%, #AF9C8E 75%, #CFC1B5 82%,
    #E5DBD1 88%, #F2ECE5 93%, #F8F5F0 97%, var(--neve) 100%);
}
.sotto-eroe { position: relative; z-index: 2; margin-top: calc(var(--sotto, 4.75rem) * -1); }
@media (max-width: 52rem) { .sotto-eroe { --sotto: 3.25rem; } }

.eroe-dentro { position: relative; z-index: 1; width: 100%; padding-top: 8.5rem; padding-bottom: calc(var(--sfuma) + clamp(2.25rem, 4vw, 3.5rem)); }
.eroe-testo { max-width: 44rem; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.65); }
.etichetta { display: inline-flex; align-items: center; gap: .65rem; font-size: .8rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ambra-300); }
.etichetta::before { content: ""; width: 2rem; height: 2px; background: var(--brace-400); }
.eroe h1 { color: var(--bianco); font-stretch: 118%; font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em; margin: 1.1rem 0 0; text-wrap: balance; }
/* La seconda riga del titolo prende i colori della brace: dall'ambra al rosso. */
.eroe h1 em { font-style: normal; color: var(--brace-400); background: linear-gradient(92deg, #FFC27A 0%, #FF7A3C 46%, #E9583A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,.55)); }
/* Il sigillo sopra il titolo: una pillola di vetro con una brace accesa. */
.sigillo { display: inline-flex; align-items: center; gap: .6rem; padding: .44rem 1rem .44rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,22,34,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--su-scuro); text-shadow: none; }
.sigillo { white-space: nowrap; }
@media (max-width: 30rem) { .sigillo .lungo { display: none; } }
.sigillo i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ambra-300); box-shadow: 0 0 0 4px rgba(255,178,92,.16), 0 0 14px rgba(255,140,60,.95); }
.eroe h1 .cosa { display: block; margin-top: 1.1rem; font-stretch: 100%; font-weight: 500; font-size: clamp(1.08rem, .96rem + .55vw, 1.35rem); line-height: 1.45; letter-spacing: 0; color: var(--su-scuro); max-width: 36rem; }
.eroe-testo > p { margin-top: .9rem; color: var(--su-scuro-2); font-size: 1.05rem; }
.prove { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--su-scuro); font-size: .95rem; }
.prove li { display: flex; align-items: center; gap: .5rem; }
.prove svg { width: 1.05rem; height: 1.05rem; color: #7FD08B; flex: none; }

/* Su computer la metà destra della prima schermata era vuota: solo braci. Il founder, 6 ottobre 2026:
   «la hero da pc almeno è troppo vuota e potrebbe essere molto meglio presentata». Ora a destra c'è una
   stanza vera con la stufa accesa, intera, con una didascalia di vetro; le braci le girano attorno.
   Su telefono non c'è: lì la schermata è già piena e il bottone deve restare in vista. */
.eroe-vista { display: none; position: relative; margin: 0; text-shadow: none; }
.eroe-vista::before { content: ""; position: absolute; inset: -9% -7%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,150,70,.30), rgba(208,60,26,.10) 55%, transparent 74%); }
.eroe-vista img { display: block; width: 100%; height: auto; border-radius: 1.75rem; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
.eroe-vista figcaption { position: absolute; left: 1rem; bottom: 1rem; max-width: min(19rem, calc(100% - 2rem)); padding: .8rem 1.05rem; border-radius: 1.1rem; background: rgba(10,22,34,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.18); color: var(--su-scuro); font-size: .92rem; line-height: 1.4; }
.eroe-vista figcaption strong { display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ambra-300); }
@media (min-width: 68rem) {
  .eroe-dentro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2rem, 4.5vw, 5rem); align-items: center; }
  .eroe-dentro > .prenota-barra, .eroe-dentro > .prenota-nota { grid-column: 1 / -1; }
  .eroe-vista { display: block; }
  /* Accanto alla foto il titolo sta su due righe intere: la seconda è quella colorata. */
  .eroe h1 { font-size: clamp(2.8rem, .9rem + 2.9vw, 4.1rem); }
  .eroe h1 em { display: block; }
}

/* La prenotazione: una barra dentro la prima schermata */
.prenota-barra {
  margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: stretch;
  padding: .55rem; border-radius: var(--r-xl); text-shadow: none;
  background: rgba(10,22,34,.62); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.prenota-barra fieldset { display: contents; }
.prenota-barra legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scelta { position: relative; display: block; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.scelta-corpo { display: grid; gap: .1rem; height: 100%; padding: .8rem 1rem; border-radius: var(--r-lg); border: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.scelta-corpo b { font-stretch: 108%; font-weight: 700; font-size: 1.05rem; color: var(--bianco); }
.scelta-corpo span { color: var(--su-scuro-2); font-size: .88rem; line-height: 1.35; }
.scelta-corpo i { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ambra-300); font-variant-numeric: tabular-nums; margin-top: .25rem; }
.scelta:hover .scelta-corpo { background: rgba(255,255,255,.07); }
.scelta input:checked + .scelta-corpo { border-color: rgba(233,88,58,.9); background: rgba(208,60,26,.20); }
.scelta input:focus-visible + .scelta-corpo { outline: 3px solid var(--brace-400); outline-offset: 2px; }
.prenota-barra .btn { height: 100%; min-height: 64px; border-radius: var(--r-lg); padding: 0 1.6rem; }
.prenota-nota { margin-top: .9rem; font-size: .92rem; color: var(--su-scuro); }
.prenota-nota a { color: var(--bianco); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 62rem) {
  .prenota-barra { grid-template-columns: 1fr; }
  .prenota-barra .btn { min-height: 56px; }
  .scelta-corpo { grid-template-columns: 1fr auto; align-items: center; }
  .scelta-corpo span { grid-column: 1; }
  .scelta-corpo i { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .eroe-dentro { padding-top: 7rem; }
}

/* Su telefono il bottone «Scegli giorno e ora» deve stare nella prima schermata (bottone in vista).
   Misurato il 5 ottobre 2026 a 390×739, che è lo spazio che Safari lascia alla pagina su un iPhone: il
   bottone finiva sotto, fuori dallo schermo. Si stringono gli spazi, si toglie la riga «Un solo referente»
   (che torna nel riquadro dei numeri subito sotto) e le tre prove vanno su righe più fitte. */
@media (max-width: 40rem) {
  .eroe-dentro { padding-top: 5.9rem; }
  .eroe h1 { margin-top: .85rem; }
  .eroe h1 .cosa { margin-top: .8rem; font-size: 1.02rem; line-height: 1.4; }
  .eroe-testo > p { display: none; }
  .prove { margin-top: .85rem; gap: .2rem 1.1rem; font-size: .86rem; }
  .prenota-barra { margin-top: 1.1rem; padding: .4rem; gap: .3rem; }
  .scelta-corpo { padding: .55rem .85rem; }
  .scelta-corpo b { font-size: 1rem; }
  .scelta-corpo span { font-size: .84rem; }
  .prenota-barra .btn { min-height: 52px; }
  .prenota-nota { padding-right: 3.4rem; }
}

/* La stessa scelta, in verticale, nella pagina «Prenota» */
.prenota { background: rgba(10,22,34,.72); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); padding: 1.5rem; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.prenota h2 { color: var(--bianco); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.prenota > p { color: var(--su-scuro-2); font-size: .95rem; margin-top: .3rem; }
.scelte { display: grid; gap: .55rem; margin: 1.2rem 0 0; padding: 0; border: 0; }
.scelte legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scelte .scelta-corpo { grid-template-columns: 1fr auto; align-items: center; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.scelte .scelta-corpo span { grid-column: 1; }
.scelte .scelta-corpo i { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

/* ── Sezioni ─────────────────────────────────────────────────── */
.sezione { padding: clamp(4rem, 9vw, 7rem) 0; }
.sezione-scura { background: var(--notte-950); color: var(--su-scuro-2);
  background-image: radial-gradient(60rem 30rem at 100% 0%, rgba(47,125,59,.20), transparent 60%), radial-gradient(50rem 28rem at 0% 100%, rgba(31,95,168,.20), transparent 60%); }
.sezione-scura h2, .sezione-scura h3 { color: var(--bianco); }
.sezione-pietra { background: var(--granito-100); }
.sopra { font-size: .8rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-700); }
.sezione-scura .sopra { color: #8FD89A; }
.titolo { font-weight: 800; font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3.15rem); line-height: 1.08; letter-spacing: -.03em; margin-top: .7rem; text-wrap: balance; max-width: 22ch; }
.sotto { margin-top: 1rem; font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem); max-width: 60ch; }
.testa { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--granito-200); border: 1px solid var(--granito-200); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombra-md); }
.numero { background: var(--bianco); padding: 1.5rem 1.4rem; }
.numero b { display: block; font-stretch: 118%; font-weight: 800; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); color: var(--notte-900); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: .4rem; font-size: .95rem; color: var(--granito-500); }
@media (max-width: 52rem) { .numeri { grid-template-columns: repeat(2, 1fr); } }

.strade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.strada { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); padding: 1.6rem 1.4rem 1.4rem; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.strada:hover { transform: translateY(-4px); box-shadow: var(--ombra-xl); border-color: var(--notte-700); }
.strada-n { font-size: .82rem; font-weight: 700; color: var(--granito-500); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.strada h3 { font-size: 1.32rem; font-weight: 750; letter-spacing: -.02em; margin-top: .9rem; }
.strada-per { color: var(--granito-500); font-size: .97rem; margin-top: .2rem; }
.strada ul { list-style: none; margin: 1.1rem 0 1.4rem; padding: 1.1rem 0 0; border-top: 1px solid var(--granito-200); display: grid; gap: .55rem; font-size: .95rem; }
.strada li { display: flex; gap: .6rem; }
.strada li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-600); margin-top: .55rem; }
.vai { margin-top: auto; font-stretch: 106%; font-weight: 700; color: var(--brace-500); display: inline-flex; align-items: center; gap: .4rem; }
.vai::after { content: "→"; transition: transform .2s ease; }
a:hover > .vai::after, a:hover .vai::after { transform: translateX(4px); }
@media (max-width: 68rem) { .strade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .strade { grid-template-columns: 1fr; } }

.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.passo { position: relative; padding-top: 1.6rem; border-top: 2px solid rgba(255,255,255,.14); }
.passo::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 3rem; background: var(--brace-400); }
.passo-n { font-size: .82rem; font-weight: 700; color: var(--ambra-300); letter-spacing: .08em; }
.passo h3 { font-size: 1.22rem; font-weight: 750; margin-top: .6rem; letter-spacing: -.02em; }
.passo p { margin-top: .5rem; font-size: .97rem; }
.passo small { display: inline-block; margin-top: .8rem; font-size: .8rem; font-weight: 600; color: var(--su-scuro); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .2rem .7rem; }
@media (max-width: 62rem) { .passi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .passi { grid-template-columns: 1fr; } }

.doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cura { position: relative; border-radius: var(--r-2xl); overflow: hidden; min-height: 26rem; display: flex; align-items: flex-end; color: var(--su-scuro); isolation: isolate; }
.cura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
.cura:hover img { transform: scale(1.04); }
.cura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,22,34,.96) 0%, rgba(10,22,34,.66) 46%, rgba(10,22,34,.08) 100%); }
.cura-dentro { padding: 1.75rem; width: 100%; }
.cura h3 { color: var(--bianco); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.025em; }
.cura p { margin-top: .5rem; max-width: 34ch; color: var(--su-scuro-2); }
.cura-dati { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.cura-dati li { font-size: .82rem; font-weight: 600; color: var(--ambra-300); border: 1px solid rgba(255,178,92,.4); border-radius: 999px; padding: .2rem .75rem; }
@media (max-width: 52rem) { .doppio { grid-template-columns: 1fr; } .cura { min-height: 22rem; } }

.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.scheda { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s ease, transform .25s ease; }
.scheda:hover { box-shadow: var(--ombra-xl); transform: translateY(-3px); }
.scheda-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--granito-100); }
.scheda-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s ease; }
.scheda:hover .scheda-foto img { transform: scale(1.04); }
.scheda-testo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.scheda-tipo { font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-700); }
.scheda h3 { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; margin-top: .5rem; }
.scheda p { margin-top: .6rem; font-size: 1rem; }
.scheda .vai { margin-top: 1.25rem; }
@media (max-width: 46rem) { .coppia { grid-template-columns: 1fr; } }

.avviso-sussidi { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-top: 1rem; background: var(--verde-100); border: 1px solid rgba(47,125,59,.3); border-radius: var(--r-xl); padding: 1.5rem 1.75rem; }
.avviso-sussidi h3 { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; }
.avviso-sussidi p { margin-top: .35rem; font-size: 1rem; max-width: 62ch; }
@media (max-width: 46rem) { .avviso-sussidi { grid-template-columns: 1fr; } }

.zone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.zona { background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); padding: 1.6rem; text-decoration: none; color: inherit; display: block; transition: border-color .25s ease, box-shadow .25s ease; }
a.zona:hover { border-color: var(--notte-700); box-shadow: var(--ombra-lg); }
.zona-sigla { font-weight: 750; font-size: .8rem; letter-spacing: .06em; color: var(--verde-700); background: var(--verde-100); border-radius: 999px; padding: .2rem .7rem; display: inline-block; }
.zona h3 { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; margin-top: .9rem; }
.zona p { margin-top: .4rem; font-size: .98rem; }
@media (max-width: 52rem) { .zone { grid-template-columns: 1fr; } }

.chiusura { position: relative; overflow: hidden; background: var(--notte-950); color: var(--su-scuro-2); border-radius: var(--r-2xl); padding: clamp(2.25rem, 6vw, 4.5rem); isolation: isolate; }
/* La luce della brace sul blu, la stessa dell'apertura delle pagine interne: ambra al centro, rossa ai
   bordi, e un riflesso azzurro dalla parte opposta. Prima era un rosso pieno steso sul blu, che dava un
   marrone spento; il founder, 6 ottobre 2026: «migliora la sfumatura del rosso sul blu». */
.chiusura { background: linear-gradient(160deg, #0A1622 0%, #0E2134 100%); box-shadow: inset 0 1px 0 rgba(255,190,120,.22), 0 28px 64px rgba(10,22,34,.22); }
.chiusura::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(36rem 24rem at 96% -16%, rgba(255,168,88,.48), rgba(240,104,60,.27) 30%, rgba(208,60,26,.10) 56%, transparent 74%),
  radial-gradient(42rem 26rem at -8% 114%, rgba(52,128,204,.22), transparent 64%); }
.chiusura h2 { color: var(--bianco); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.chiusura p { margin-top: 1rem; max-width: 52ch; font-size: 1.1rem; }
.chiusura-azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ── Piede ───────────────────────────────────────────────────── */
.piede { background: var(--notte-950); color: var(--su-scuro-2); padding: 4rem 0 2rem; margin-top: clamp(4rem, 9vw, 7rem); font-size: .97rem; }
.piede-griglia { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.piede h2 { font-size: .8rem; font-stretch: 100%; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #8FD89A; margin-bottom: 1rem; }
.piede a { color: var(--su-scuro); text-decoration: none; }
.piede a:hover { color: var(--bianco); text-decoration: underline; text-underline-offset: 3px; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.piede-logo { background: var(--bianco); border-radius: var(--r-md); padding: .45rem .7rem; display: inline-block; }
.piede-logo img { height: 46px; width: auto; }
.piede address { font-style: normal; margin-top: 1.1rem; line-height: 1.7; }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
.dato { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 58rem) { .piede-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .piede-griglia { grid-template-columns: 1fr; } }
/* Su telefono le scritte del piede stanno al centro: a sinistra lasciavano mezza schermata vuota. */
@media (max-width: 32rem) {
  .piede { text-align: center; }
  .piede-griglia { justify-items: center; gap: 2.1rem; }
  .piede ul { justify-items: center; }
  .piede-fondo { justify-content: center; text-align: center; }
}

.barra-telefono { display: none; }
@media (max-width: 46rem) {
  .barra-telefono { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 40; display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; padding: .5rem; background: rgba(10,22,34,.94); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ombra-xl); transform: translateY(140%); transition: transform .35s ease; }
  .barra-telefono[data-visibile="si"] { transform: translateY(0); }
  .barra-telefono .btn { min-height: 46px; padding: 0 1rem; }
  .piede { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .appare { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .appare.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ── Le offerte: tre schede in prima pagina e una riga nell'invito finale di ogni pagina ───────── */
.strade.offerte { grid-template-columns: repeat(3, 1fr); }
.strade.offerte .strada-n { color: var(--brace-500); text-transform: uppercase; }
@media (max-width: 68rem) { .strade.offerte { grid-template-columns: 1fr; } }
.chiusura-offerte { margin-top: 1.4rem; font-size: 1rem; }
.chiusura-offerte a { color: var(--ambra-300); font-weight: 650; text-decoration: none; }
.chiusura-offerte a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Moduli: conferma e errore scritti in pagina ── */
.modulo-info { font-size: .9rem; color: var(--testo); margin: .25rem 0 .75rem; }
.modulo-stato { margin: .75rem 0 0; font-size: .95rem; }
.modulo-errore { color: var(--brace-600); }
.modulo-alternativa { display: block; margin: .75rem auto 0; padding: .5rem .25rem; background: none; border: 0; color: var(--verde-700); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.modulo-alternativa:focus-visible { outline: 2px solid var(--verde-700); outline-offset: 3px; }
.modulo-grazie { padding: 1.5rem; border-radius: var(--r-lg, 1.25rem); background: var(--verde-100); color: var(--inchiostro); }
.modulo-grazie h3 { margin: 0 0 .5rem; color: var(--verde-700); }
.modulo-grazie:focus { outline: 2px solid var(--verde-700); outline-offset: 3px; }

/* ── Banner delle statistiche: compare solo quando il pixel dell'app è acceso ── */
.banner-consenso { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 60; max-width: 36rem; margin: 0 auto; padding: 1rem 1.1rem; border-radius: 1.25rem; background: rgba(10,22,34,.97); color: var(--su-scuro); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--ombra-xl); }
.banner-consenso p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.5; }
.banner-consenso a { color: var(--su-scuro); text-decoration: underline; }
.banner-consenso-scelte { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.banner-consenso .btn { min-height: 46px; }
.piede-cookie { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }