/* Dieci atmosfere per il mestiere elettrico; Volt è il tema predefinito. */
:root {
  --sfondo: #ffffff;
  --superficie: #f3f6fb;
  --testo: #111d35;
  --testo-2: #47546b;
  --primario: #14284b;
  --su-primario: #ffffff;
  --accento: #ffda19;
  --su-accento: #14213a;
  --piede: #0b1730;
  --su-piede: #f3f6fc;
  --linea: #cdd5e1;
  --focus: #245baf;
  --velo: #0a162c;
  --raggio: 14px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}
body.tema-volt {
  --sfondo: #ffffff;
  --superficie: #f3f6fb;
  --testo: #111d35;
  --testo-2: #47546b;
  --primario: #14284b;
  --su-primario: #ffffff;
  --accento: #ffda19;
  --su-accento: #14213a;
  --piede: #0b1730;
  --su-piede: #f3f6fc;
  --linea: #cdd5e1;
  --focus: #245baf;
  --velo: #0a162c;
  --raggio: 14px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-rame {
  --sfondo: #faf6f1;
  --superficie: #ffffff;
  --testo: #282524;
  --testo-2: #62544e;
  --primario: #934721;
  --su-primario: #ffffff;
  --accento: #c87543;
  --su-accento: #17110e;
  --piede: #252628;
  --su-piede: #f9f4ee;
  --linea: #dccdc3;
  --focus: #934721;
  --velo: #211b19;
  --raggio: 10px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-led {
  --sfondo: #ffffff;
  --superficie: #f0f7fc;
  --testo: #142f43;
  --testo-2: #425f73;
  --primario: #086396;
  --su-primario: #ffffff;
  --accento: #9ee5ff;
  --su-accento: #13374b;
  --piede: #0d283c;
  --su-piede: #f2faff;
  --linea: #c5dbe9;
  --focus: #086396;
  --velo: #0b2539;
  --raggio: 16px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 600;
}

body.tema-notte {
  --sfondo: #0d1729;
  --superficie: #19273c;
  --testo: #f6f8ff;
  --testo-2: #bdcbe0;
  --primario: #f5bd60;
  --su-primario: #192338;
  --accento: #ffce7b;
  --su-accento: #1a2231;
  --piede: #070f1e;
  --su-piede: #eaf0fc;
  --linea: #52617a;
  --focus: #ffd487;
  --velo: #0b1425;
  --raggio: 14px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
  color-scheme: dark;
}

body.tema-sole {
  --sfondo: #fffdf4;
  --superficie: #ffffff;
  --testo: #33281b;
  --testo-2: #69583f;
  --primario: #a43d0b;
  --su-primario: #ffffff;
  --accento: #ffce32;
  --su-accento: #352509;
  --piede: #332519;
  --su-piede: #fff8e7;
  --linea: #e6d5bb;
  --focus: #a43d0b;
  --velo: #302014;
  --raggio: 20px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-grafite {
  --sfondo: #f1f2f2;
  --superficie: #ffffff;
  --testo: #202326;
  --testo-2: #52585e;
  --primario: #30353b;
  --su-primario: #ffffff;
  --accento: #f5d323;
  --su-accento: #232527;
  --piede: #171a1e;
  --su-piede: #f6f6f2;
  --linea: #c5c9cd;
  --focus: #555b63;
  --velo: #171b20;
  --raggio: 6px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-smart {
  --sfondo: #fafbff;
  --superficie: #ffffff;
  --testo: #25223e;
  --testo-2: #5c5872;
  --primario: #6040b0;
  --su-primario: #ffffff;
  --accento: #82e8f2;
  --su-accento: #12313b;
  --piede: #19162f;
  --su-piede: #f2f0ff;
  --linea: #d5d0e8;
  --focus: #6840b5;
  --velo: #19142e;
  --raggio: 18px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-cantiere {
  --sfondo: #f3f2ef;
  --superficie: #ffffff;
  --testo: #292c2e;
  --testo-2: #595c5e;
  --primario: #a53e0c;
  --su-primario: #ffffff;
  --accento: #f69039;
  --su-accento: #2b1f16;
  --piede: #24282b;
  --su-piede: #f6f4ee;
  --linea: #c9c9c5;
  --focus: #a53e0c;
  --velo: #232323;
  --raggio: 8px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
}

body.tema-lino {
  --sfondo: #faf9f6;
  --superficie: #ffffff;
  --testo: #30302e;
  --testo-2: #64625e;
  --primario: #315b87;
  --su-primario: #ffffff;
  --accento: #315b87;
  --su-accento: #ffffff;
  --piede: #242a32;
  --su-piede: #f8f7f3;
  --linea: #d9d6cf;
  --focus: #315b87;
  --velo: #202934;
  --raggio: 12px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 600;
}

body.tema-neon {
  --sfondo: #0b0e0c;
  --superficie: #171c19;
  --testo: #f3f8f2;
  --testo-2: #bdcabd;
  --primario: #b7f72e;
  --su-primario: #162005;
  --accento: #caff52;
  --su-accento: #1a2508;
  --piede: #050806;
  --su-piede: #ecf5e7;
  --linea: #56634e;
  --focus: #caff52;
  --velo: #080e0a;
  --raggio: 12px;
  --ombra: 0 14px 36px color-mix(in srgb, #10182b 8%, transparent);
  --peso-titoli: 800;
  color-scheme: dark;
}
/* Palette autonome: le viste di produzione possono usare le stesse classi. */
/* Il contenuto resta leggibile anche quando il font locale non è disponibile. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block: 110px 200px; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; }
body.cookie-visibile { padding-bottom: 160px; }
[hidden] { display: none !important; }
a { color: var(--primario); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--peso-titoli); line-height: 1.12; text-wrap: balance; }
h1 { max-width: 850px; font-size: clamp(3rem, 6.2vw, 5.9rem); letter-spacing: -0.055em; }
h2 { font-size: clamp(2.4rem, 4.5vw, 4.3rem); letter-spacing: -0.05em; }
h3 { font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.3; }
ul, ol { padding: 0; margin: 0; list-style: none; }
.salta { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--superficie); transform: translateY(-160%); font-weight: 800; border-radius: var(--raggio); }
.salta:focus { transform: translateY(0); }
.testa { position: sticky; top: 0; z-index: 30; background: var(--sfondo); border-bottom: 1px solid var(--linea); }
.testa-interno, .sezione, .piede-interno { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.testa-interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; transition: min-height 180ms ease; }
.testa.compatta { box-shadow: var(--ombra); }
.testa.compatta .testa-interno { min-height: 76px; }
.marca { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: var(--testo); text-decoration: none; flex-shrink: 0; }
.iniziale, .logo { width: 48px; height: 48px; flex-shrink: 0; }
.iniziale { display: grid; place-items: center; background: var(--primario); color: var(--su-primario); border-radius: 50%; font-size: 24px; font-weight: 800; }
.logo { object-fit: contain; }
.marca-testo { display: grid; line-height: 1.35; }
.marca-testo b { font-size: 16px; font-weight: 800; letter-spacing: -0.035em; }
.marca-testo small { margin-top: 4px; color: var(--testo-2); font-size: 12px; }
.menu { display: flex; align-items: center; gap: 20px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu a:not(.pulsante) { color: var(--testo); }
.menu a:not(.pulsante):hover { text-decoration: underline; }
.menu-apri { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); color: var(--testo); }
.pulsante { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: var(--raggio); background: var(--primario); color: var(--su-primario); box-shadow: var(--ombra); text-align: center; text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1.4; transition: transform 180ms ease, box-shadow 180ms ease; }
.pulsante.piccolo { min-height: 44px; padding: 12px 18px; font-size: 13px; }
.pulsante.grande { min-height: 58px; padding: 17px 28px; }
.pulsante:hover { transform: translateY(-2px); background: var(--accento); color: var(--su-accento); }
.pulsante.secondario { background: #ffffff; color: #141c33; box-shadow: none; }
.pulsante.secondario:hover { background: #f8f6ee; color: #141c33; }
.azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.apertura { --focus: #ffffff; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 620px; height: 78vh; max-height: 820px; background: var(--velo); color: #ffffff; }
.copertina { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* La sfumatura lascia visibile la foto e concentra il velo nella parte bassa. */
.apertura::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, var(--velo) 0%, color-mix(in srgb, var(--velo) 78%, transparent) 30%, color-mix(in srgb, var(--velo) 20%, transparent) 60%, transparent 100%); }
.apertura-testo { position: relative; width: min(1180px, calc(100% - 64px)); margin-inline: auto; padding-block: 64px 54px; }
.apertura h1, .apertura .frase { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.apertura.senza-copertina { min-height: 420px; height: auto; background: var(--velo); }
.occhiello { margin-bottom: 15px; color: var(--primario); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.apertura .occhiello { color: #ffffff; }
.frase { max-width: 620px; margin-top: 22px; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; }
.apertura .azioni { margin-top: 28px; }
.sezione { padding-block: 104px; scroll-margin-top: 96px; }
.sezione + .sezione { border-top: 1px solid var(--linea); }
.titolo-sezione { margin-bottom: 44px; }
.servizi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.servizio { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); }
.icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; color: var(--primario); border: 1px solid var(--linea); border-radius: var(--raggio); }
.servizio p { margin-block: 14px 28px; color: var(--testo-2); font-size: 15px; }
.prezzo { margin-top: auto; color: var(--primario); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.prezzo small { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.nota { margin-top: 28px; max-width: 740px; color: var(--testo-2); font-size: 13px; }
.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.galleria li { min-width: 0; }
.galleria figure { position: relative; overflow: hidden; border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra); transition: transform 200ms ease, box-shadow 200ms ease; }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galleria figcaption { position: absolute; bottom: 0; inset-inline: 0; padding: 28px 14px 10px; color: #ffffff; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--velo) 85%, transparent)); font-size: 12px; line-height: 1.5; }
@media (hover: hover) { .galleria figure:hover { transform: translateY(-5px); box-shadow: 0 20px 40px color-mix(in srgb, var(--velo) 18%, transparent); } }
.procedura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.numero { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 50%; background: var(--accento); color: var(--su-accento); font-weight: 800; }
.procedura p { margin-top: 16px; color: var(--testo-2); font-size: 15px; }
.richiesta .azioni { margin-top: 40px; scroll-margin-block: 120px 200px; }
.contatti { display: grid; grid-template-columns: 1.3fr 1fr; gap: 100px; align-items: start; }
.elenco-contatti { margin: 32px 0 0; }
.elenco-contatti > div { display: grid; grid-template-columns: 160px 1fr; align-items: baseline; gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--linea); }
.elenco-contatti dt { color: var(--testo-2); font-size: 13px; }
.elenco-contatti dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.elenco-contatti a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.disponibilita { padding: 40px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); }
.disponibilita h3 { font-size: 1.8rem; }
.giorni-lavoro { margin-block: 28px 10px; color: var(--testo-2); font-size: 14px; }
.fascia { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.5; }
.durata { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--testo-2); font-size: 14px; }
.piede { --focus: #ffffff; background: var(--piede); color: var(--su-piede); }
.piede-interno { display: flex; justify-content: space-between; gap: 64px; padding-block: 64px; }
.piede a, .piede .link { color: inherit; }
.recapiti { display: grid; gap: 3px; font-size: 13px; }
.recapiti b { margin-bottom: 12px; font-size: 16px; }
.recapiti a, .legale > a, .legale .link { display: inline-flex; align-items: center; min-height: 44px; }
.legale { display: flex; flex-direction: column; align-items: flex-start; font-size: 13px; }
.legale > span { margin-top: 18px; }
.link { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 0.22em; text-align: left; }
.cookie { position: fixed; z-index: 50; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 16px max(32px, calc((100vw - 1180px) / 2)); padding-bottom: max(16px, env(safe-area-inset-bottom)); background: var(--superficie); color: var(--testo); border-top: 1px solid var(--linea); box-shadow: var(--ombra); }
.cookie p { max-width: 800px; font-size: 12px; line-height: 1.6; }
.cookie a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cookie form { margin: 0; flex-shrink: 0; }
body.tema-grafite h1 { font-size: clamp(3.3rem, 7.6vw, 7rem); line-height: 0.98; }
body.tema-grafite h2 { font-size: clamp(2.8rem, 5.5vw, 5.2rem); }
body.tema-smart .pulsante { border-radius: var(--raggio); }
@media (min-width: 900px) and (max-width: 1150px) {
  .testa-interno { gap: 14px; }
  .menu { gap: 12px; }
  .menu a { font-size: 12px; }
  .marca-testo b { font-size: 14px; }
  .menu .pulsante { padding-inline: 12px; }
  .iniziale, .logo { width: 40px; height: 40px; }
}
@media (max-width: 899px) {
  .testa-interno, .testa.compatta .testa-interno { min-height: 76px; }
  .testa-interno { flex-wrap: wrap; gap: 0; }
  .menu-apri { display: inline-flex; }
  .menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-block: 12px 20px; }
  .menu a { padding: 10px 12px; font-size: 15px; }
  /* Gli stati sono gestiti dal pulsante e dal menu della pagina pubblica. */
  .menu { display: none; }
  .menu-apri[aria-expanded="true"] + .menu, .menu.aperto { display: flex; }
  .menu.aperto { max-height: calc(100svh - 270px); overflow-y: auto; }
  .menu .pulsante { margin-top: 6px; }
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria { gap: 16px; }
  .contatti { gap: 32px; }
  .elenco-contatti > div { grid-template-columns: 1fr; gap: 0; }
  .procedura { gap: 28px; }
  .servizio { padding: 26px; }
}
@media (max-width: 719px) {
  html { scroll-padding-block: 96px 230px; }
  .testa-interno, .sezione, .piede-interno, .apertura-testo { width: calc(100% - 40px); }
  .marca { gap: 9px; }
  .marca-testo b { font-size: 14px; }
  .marca-testo small { font-size: 11px; }
  .iniziale, .logo { width: 40px; height: 40px; }
  .menu-apri { padding-inline: 10px; font-size: 13px; }
  .apertura { min-height: 560px; height: 82svh; }
  .apertura-testo { padding-block: 44px; }
  .apertura .azioni { align-items: stretch; }
  .apertura .azioni > a { flex: 1 1 100%; }
  .occhiello { font-size: 11px; letter-spacing: 0.1em; }
  .frase { font-size: 16px; }
  .sezione { padding-block: 68px; }
  .titolo-sezione { margin-bottom: 30px; }
  .servizi, .procedura, .contatti { grid-template-columns: 1fr; }
  .servizi { gap: 16px; }
  .servizio { padding: 28px; }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .galleria figcaption { padding: 24px 10px 8px; font-size: 11px; }
  .procedura { gap: 32px; }
  .procedura li { padding-bottom: 28px; border-bottom: 1px solid var(--linea); }
  .numero { margin-bottom: 18px; }
  .richiesta .azioni > a { width: 100%; }
  .contatti { gap: 40px; }
  .elenco-contatti > div { grid-template-columns: 1fr; }
  .disponibilita { padding: 28px; }
  .piede-interno { flex-direction: column; gap: 32px; padding-block: 48px; }
  .cookie { padding: 10px 20px max(10px, env(safe-area-inset-bottom)); gap: 12px; align-items: flex-end; }
  .cookie p { font-size: 11px; line-height: 1.5; }
  .cookie a { min-height: 44px; }
  .cookie .pulsante { padding-inline: 12px; white-space: nowrap; }
  body.cookie-visibile { padding-bottom: 230px; }
}
@media (max-width: 479px) { .galleria { grid-template-columns: 1fr; } }
@media (max-width: 359px) {
  .testa-interno { width: calc(100% - 24px); }
  .marca-testo b { font-size: 12px; }
  .marca-testo small { font-size: 10px; }
  .menu-apri { gap: 4px; padding-inline: 6px; }
  .iniziale, .logo { width: 32px; height: 32px; }
  .cookie { gap: 8px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) { .pulsante, .iniziale, .numero { border: 1px solid ButtonText; } }
@media print {
  .testa, .cookie, .menu-apri, .salta { display: none; }
  body.cookie-visibile { padding-bottom: 0; }
  .apertura { height: auto; min-height: 0; }
  .apertura-testo { padding-block: 40px; }
  .sezione { padding-block: 30px; }
  .servizio, .galleria figure, .disponibilita { break-inside: avoid; }
}

/* Il percorso di richiesta resta raccolto senza limitare le sezioni della pagina pubblica. */
.blocco { width: min(760px, calc(100% - 64px)); margin: 48px auto; padding: 48px; background: var(--superficie); color: var(--testo); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); overflow-wrap: anywhere; }
.blocco.modulo h1, .blocco.testo-legale h1 { max-width: 100%; margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.passi { display: flex; gap: 8px; margin-bottom: 36px; }
.passi li { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 10px; color: var(--testo-2); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.5; }
.passi li span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--linea); border-radius: 50%; background: var(--sfondo); color: var(--testo); font-size: 14px; font-weight: 800; }
.passi li.attivo { color: var(--primario); font-weight: 800; }
.passi li.attivo span { background: var(--primario); color: var(--su-primario); border-color: var(--primario); }
.passi li.fatto { color: var(--primario); }
.passi li.fatto span { background: var(--accento); color: var(--su-accento); border-color: var(--accento); }
.errore, .avviso { margin-bottom: 24px; padding: 18px 20px; border: 1px solid; border-radius: var(--raggio); font-size: 16px; line-height: 1.65; }
.errore { background: #fff0ed; border-color: #b74735; color: #81271d; }
.errore p, .avviso p { color: inherit; }
.errore p + p { margin-top: 8px; }
.avviso { background: var(--sfondo); border-color: var(--primario); color: var(--testo); font-weight: 600; }
small.errore-campo, .campo small.errore-campo { display: block; color: #8d241b; font-size: 14px; line-height: 1.65; }
/* Gli errori sotto i campi richiedono un colore chiaro sulla superficie del tema scuro. */
body.tema-neon small.errore-campo { color: #ffb4a5; }
.scelte { display: grid; gap: 14px; margin-top: 24px; }
.scelta { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); cursor: pointer; }
.scelta:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); background: var(--sfondo); }
.scelta:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.scelta input, .consenso input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--primario); }
.scelta span { min-width: 0; font-weight: 800; }
.scelta small { display: block; margin-top: 6px; color: var(--testo-2); font-size: 14px; font-weight: 400; }
details.giorno { margin-top: 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.giorno summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 56px; padding: 18px 20px; border-radius: var(--raggio); cursor: pointer; list-style: none; }
.giorno summary::-webkit-details-marker { display: none; }
.giorno summary::after { content: '+'; flex: none; font-size: 24px; line-height: 1; }
.giorno[open] summary::after { content: '−'; }
.giorno summary b { font-size: 16px; }
.giorno summary small { margin-left: auto; color: var(--testo-2); font-size: 13px; }
.giorno[open] summary { background: var(--sfondo); }
.orari { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; padding: 20px; }
.orario { position: relative; min-width: 0; cursor: pointer; }
/* Il radio rimane raggiungibile con la tastiera; il suo stato è mostrato sull'intera pillola. */
.orario input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.orario span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--testo); font-size: 16px; font-weight: 800; }
.orario:has(input:checked) span { background: var(--primario); color: var(--su-primario); border-color: var(--primario); }
.orario:has(input:focus-visible) span { outline: 3px solid var(--focus); outline-offset: 4px; }
.riepilogo { display: flex; flex-direction: column; gap: 8px; margin-block: 24px; padding: 24px; background: var(--sfondo); border: 1px solid var(--linea); border-radius: var(--raggio); color: var(--testo-2); font-size: 16px; }
.riepilogo b { color: var(--testo); }
.vuoto { margin-top: 24px; padding: 24px; border: 1px dashed var(--testo-2); border-radius: var(--raggio); }
.vuoto b { display: block; margin-bottom: 10px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 24px; }
.campo label { font-size: 16px; font-weight: 800; }
.campo small, .facoltativo { color: var(--testo-2); font-size: 14px; }
.facoltativo { font-weight: 400; }
input, textarea, select { font: inherit; }
.campo input, .campo textarea, .campo select { width: 100%; min-width: 0; min-height: 48px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); color: var(--testo); font-size: 16px; }
.campo textarea { min-height: 132px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-2); opacity: 1; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 3px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #8d241b; }
body.tema-neon input[aria-invalid="true"], body.tema-neon textarea[aria-invalid="true"] { border-color: #ffb4a5; }
.consenso { display: flex; align-items: flex-start; gap: 14px; min-height: 44px; margin-block: 16px; font-size: 14px; cursor: pointer; }
.consenso span { min-width: 0; }
.consenso a { text-decoration: underline; }
p.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blocco .azioni { margin-top: 32px; }
.blocco .pulsante.secondario { background: var(--superficie); color: var(--primario); border-color: var(--primario); }
.blocco .pulsante.secondario:hover { background: var(--primario); color: var(--su-primario); }
.blocco.testo-legale h2 { margin-block: 32px 16px; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.3; }
.blocco.testo-legale p { margin-bottom: 18px; font-size: 16px; line-height: 1.65; }
.tabella-scorri { max-width: 100%; margin-block: 24px; overflow-x: auto; }
table.tabella-cookie { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.65; }
.tabella-cookie caption { padding-bottom: 12px; color: var(--testo-2); font-size: 13px; text-align: left; }
.tabella-cookie th, .tabella-cookie td { padding: 14px 16px; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabella-cookie th { font-weight: 800; }
.tabella-cookie thead { background: var(--sfondo); }
main.spenta .blocco { margin-top: 80px; }
.pulsante.chiaro { background: #ffffff; color: #141c33; border-color: #ffffff; }
.pulsante.chiaro:hover { background: #f8f6ee; color: #141c33; }
button.link { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; color: var(--su-piede); text-decoration: underline; }
body.anteprima .testa { position: static; }
body.anteprima .cookie { display: none; }
@media (max-width: 719px) {
  .blocco { width: calc(100% - 40px); margin-block: 28px; padding: 28px 20px; }
  .passi { gap: 6px; margin-bottom: 28px; }
  .passi li { font-size: 11px; }
  .blocco .azioni > .pulsante { flex: 1 1 100%; }
  .scelta, .riepilogo, .vuoto { padding: 18px; }
  .giorno summary { flex-wrap: wrap; gap: 8px; padding: 16px; }
  .giorno summary small { margin-left: 0; }
  .giorno summary::after { margin-left: auto; }
  .orari { padding: 16px; }
  main.spenta .blocco { margin-top: 48px; }
}

/* Evox 3/11/2026: nella tabella dei cookie il nome del cookie non si spezza a meta' parola (il blocco ha overflow-wrap: anywhere) */
.tabella-cookie th[scope="row"] { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }

/* Fase 2B: i componenti editoriali condividono le palette della pagina pubblica. */
body.tema-sole .occhiello, body.tema-sole .passi li.fatto { color: var(--primario); }
body.tema-sole .apertura .occhiello { color: #ffffff; }
body.tema-notte small.errore-campo { color: #ffb4a5; }
body.tema-notte input[aria-invalid="true"], body.tema-notte textarea[aria-invalid="true"] { border-color: #ffb4a5; }
body.tema-lino .sezione { padding-block: 120px; }
/* Il velo resta sulla fotografia, senza fondi pieni dietro ai singoli testi. */
.apertura { min-height: 740px; max-height: none; height: auto; }
.apertura-testo { padding-top: 180px; }
.apertura h1 { font-size: clamp(2.8rem, 5.5vw, 5rem); }
.apertura .condividi { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.social { display: flex; flex-wrap: wrap; gap: 2px; padding: 0; margin: 0; list-style: none; }
.social li { flex: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; color: inherit; }
.social svg { width: 20px; height: 20px; }
.social a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.menu { flex-wrap: wrap; justify-content: flex-end; gap: 0 16px; min-width: 0; }
.menu > .social { flex-basis: 100%; justify-content: flex-end; color: var(--testo); margin-left: auto; }
.menu .social a { padding: 0; }
.recapiti .social { margin-top: 16px; color: var(--su-piede); }
.piede-interno { flex-wrap: wrap; }
.servizio { padding: 0 28px 28px; overflow: hidden; min-width: 0; }
.servizio-foto { flex: none; width: calc(100% + 56px); margin-inline: -28px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raggio) var(--raggio) 0 0; }
.servizio-foto img { width: 100%; height: 100%; object-fit: cover; }
.servizio .icona { position: relative; flex: none; width: 42px; height: 42px; margin-top: 28px; margin-bottom: 20px; background: var(--superficie); box-shadow: var(--ombra); }
.servizio-foto + .icona { margin-top: -21px; }
.servizio .icona svg { width: 20px; height: 20px; }
.richiesta { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px 64px; align-items: start; }
.richiesta > .titolo-sezione { grid-column: 1 / -1; margin-bottom: 0; }
.richiesta-testo, .procedura-foto { min-width: 0; }
/* Compatibilità con la struttura del mock prima dell'aggiornamento delle viste. */
.richiesta > .procedura-colonne { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
.richiesta .procedura { grid-template-columns: 1fr; gap: 28px; }
.richiesta .procedura li { position: relative; padding-left: 68px; }
.richiesta .numero { position: absolute; top: 0; left: 0; margin: 0; }
.richiesta .procedura p { margin-top: 8px; }
.procedura-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio); }
.procedura-foto figcaption { margin-top: 12px; color: var(--testo-2); font-size: 13px; }
.profilo { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.profilo-foto, .profilo > img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.profilo-nome { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.profilo-nome b { font-size: 19px; }
.profilo-nome span { color: var(--testo-2); font-size: 13px; }
.novita { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.novita > li { min-width: 0; }
.novita-scheda { height: 100%; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); transition: transform 200ms ease, box-shadow 200ms ease; }
.novita-scheda a { display: flex; flex-direction: column; height: 100%; padding-bottom: 28px; color: var(--testo); text-decoration: none; }
.novita-scheda a:focus-visible { outline-offset: -5px; }
.novita-scheda img, .novita-senza-foto { flex: none; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.novita-senza-foto { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.novita-scheda time { margin: 24px 24px 12px; color: var(--testo-2); font-size: 12px; }
.novita-scheda h3 { margin-inline: 24px; overflow-wrap: anywhere; }
.novita-scheda p { margin: 14px 24px 0; color: var(--testo-2); font-size: 14px; }
@media (hover: hover) { .novita-scheda:hover { transform: translateY(-5px); box-shadow: 0 20px 40px color-mix(in srgb, var(--velo) 18%, transparent); } }
#novita > .azioni { margin-top: 32px; }
.elenco-novita { overflow-wrap: anywhere; }
.elenco-novita h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.paginazione { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; font-size: 14px; }
.paginazione ul, .paginazione ol { display: flex; flex-wrap: wrap; gap: 8px; }
.paginazione a, .paginazione span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--raggio); }
.paginazione [aria-current="page"] { background: var(--primario); color: var(--su-primario); border-color: var(--primario); font-weight: 800; }
.paginazione [aria-disabled="true"] { color: var(--testo-2); }
.altre-novita { padding-block: 64px; border-top: 1px solid var(--linea); }
.condividi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 26px; font-size: 12px; }
.condividi > span:first-child { font-weight: 800; }
.condividi a, .condividi button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 4px; font: inherit; }
.condividi svg { width: 16px; height: 16px; }
.condividi-esito { flex-basis: 100%; }
.condividi-esito:empty { display: none; }
.articolo { width: min(720px, calc(100% - 64px)); margin-inline: auto; padding-top: 80px; overflow-wrap: anywhere; }
.articolo-testa { margin-inline: auto; }
.articolo h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.12; }
.articolo-meta { margin-top: 28px; color: var(--testo-2); font-size: 14px; }
.articolo-copertina { margin-block: 48px 60px; }
.articolo-copertina img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio); }
.articolo-corpo { font-size: 18px; line-height: 1.7; }
.articolo-corpo p { margin-block: 24px; }
.articolo-corpo h2 { margin-block: 48px 20px; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.035em; }
.articolo-corpo h3 { margin-block: 32px 16px; font-size: 1.4rem; line-height: 1.3; }
.articolo-corpo ul, .articolo-corpo ol { margin-block: 24px; padding-left: 28px; }
.articolo-corpo ul { list-style: disc; }
.articolo-corpo ol { list-style: decimal; }
.articolo-corpo li + li { margin-top: 10px; }
.articolo-corpo blockquote { margin: 32px 0; padding: 16px 24px; border-left: 4px solid var(--primario); background: var(--superficie); color: var(--testo); }
.articolo-corpo blockquote p { margin-block: 8px; }
.articolo-corpo figure { margin-block: 36px; }
.articolo-corpo img { max-width: 100%; height: auto; border-radius: var(--raggio); }
.articolo-corpo a { text-decoration: underline; }
.articolo-corpo figcaption, .articolo-copertina figcaption { margin-top: 12px; color: var(--testo-2); font-size: 13px; }
.articolo .condividi { color: var(--testo); }
.articolo-richiesta { margin-block: 48px 80px; padding: 36px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.articolo-richiesta h2 { font-size: 2rem; }
.articolo-richiesta p { margin-block: 16px 24px; }
/* La tendina evita di comprimere le voci quando si aggiungono Novità e social. */
@media (min-width: 900px) and (max-width: 1150px) {
  .testa-interno, .testa.compatta .testa-interno { min-height: 76px; }
  .testa-interno { flex-wrap: wrap; gap: 0; }
  .menu-apri { display: inline-flex; }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-block: 12px 20px; }
  .menu a { padding: 10px 12px; font-size: 15px; }
  .menu-apri[aria-expanded="true"] + .menu, .menu.aperto { display: flex; }
  .menu .pulsante { margin-top: 6px; }
}
@media (max-width: 1150px) {
  .menu > .social { flex-basis: auto; justify-content: flex-start; order: 1; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); }
  .menu.aperto { max-height: calc(100svh - 100px); overflow-y: auto; }
}
@media (max-width: 1099px) { .novita { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .richiesta, .richiesta > .procedura-colonne { grid-template-columns: 1fr; gap: 32px; }
  .richiesta-testo { order: 0; }
  .procedura-foto { order: 1; }
}
@media (max-width: 719px) {
  body.tema-lino .sezione { padding-block: 80px; }
  .servizio { padding: 0 24px 28px; }
  .servizio-foto { width: calc(100% + 48px); margin-inline: -24px; }
  .novita { grid-template-columns: 1fr; }
  .richiesta .procedura li { padding-left: 62px; padding-bottom: 24px; }
  .profilo { gap: 16px; }
  .apertura { min-height: 700px; }
  .apertura-testo { padding-top: 130px; }
  .apertura .condividi { gap: 0 12px; }
  .articolo { width: calc(100% - 40px); padding-top: 52px; }
  .articolo-copertina { margin-block: 32px; }
  .articolo-richiesta { padding: 24px; }
  .articolo-richiesta .pulsante { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .novita-scheda { transition: none; } }
@media print {
  .condividi, .paginazione { display: none; }
  .apertura { min-height: 0; }
  .apertura-testo { padding-block: 40px; }
  .novita-scheda, .articolo-richiesta { break-inside: avoid; }
}

/* Il giallo e il ciano evidenziano superfici: i testi brevi usano il primario leggibile. */
.occhiello::before { content: ''; display: inline-block; width: 24px; height: 4px; margin-right: 10px; vertical-align: middle; background: var(--accento); }
.apertura-testo .azioni { flex-wrap: nowrap; }
.apertura-testo .azioni > .pulsante { min-height: 58px; }
/* Il velo resta al 90% nella zona principale e al 65% sul margine destro. */
.apertura::after { background: linear-gradient(90deg, color-mix(in srgb, var(--velo) 96%, transparent) 0%, color-mix(in srgb, var(--velo) 90%, transparent) 78%, color-mix(in srgb, var(--velo) 65%, transparent) 100%); }
.apertura h1, .apertura .frase { max-width: 850px; }
.apertura .condividi { max-width: 850px; }
.galleria figcaption { position: static; padding: 12px 16px; background: var(--velo); min-height: 60px; }
.pulsante.secondario { background: var(--superficie); color: var(--primario); border-color: var(--primario); }
.pulsante.secondario:hover { background: var(--primario); color: var(--su-primario); }
.apertura .pulsante.secondario { border-color: var(--superficie); }
.apertura .pulsante.secondario:hover { background: var(--superficie); color: var(--primario); text-decoration: underline; }
/* Il contorno doppio resta visibile anche sulle azioni piene e sulle fotografie. */
.pulsante:focus-visible { outline: 3px solid var(--testo); outline-offset: 4px; box-shadow: 0 0 0 4px var(--superficie); }
.apertura .pulsante:focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 4px var(--velo); }
.pronto-intervento { background: var(--accento); color: var(--su-accento); }
.pronto-interno { width: min(1180px, calc(100% - 64px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 36px; }
.pronto-interno > div { max-width: 690px; min-width: 0; }
.pronto-intervento .occhiello { color: inherit; margin-bottom: 10px; }
.pronto-intervento .occhiello::before { background: currentColor; }
.pronto-intervento h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); letter-spacing: -0.035em; }
.pronto-intervento p:last-child { margin-top: 14px; }
.pulsante.urgente { flex: none; min-height: 72px; font-size: clamp(1.65rem, 2.8vw, 2.5rem); white-space: nowrap; letter-spacing: -0.04em; background: var(--su-accento); color: var(--accento); border: 2px solid currentColor; }
.pulsante.urgente:hover { background: var(--accento); color: var(--su-accento); }
.pronto-intervento :focus-visible { outline-color: var(--su-accento); box-shadow: 0 0 0 4px var(--accento); }
.scelta .icona { flex: none; display: grid; width: 24px; height: 24px; margin: 2px 0 0; border: 0; border-radius: 0; }
.scelta .icona svg { width: 24px; height: 24px; }
.scelta.urgente { border: 2px solid var(--accento); }
.scelta.urgente:has(input:checked) { border-color: var(--primario); }
.urgenza { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 28px 0; border: 0; min-width: 0; }
.urgenza legend { margin-bottom: 12px; font-weight: 800; }
.urgenza label { display: flex; flex: 1 1 180px; align-items: flex-start; gap: 12px; min-height: 48px; padding: 16px; border: 1px solid var(--testo-2); border-radius: var(--raggio); cursor: pointer; }
.urgenza input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primario); }
.urgenza small { display: block; margin-top: 6px; color: var(--testo-2); font-size: 14px; }
.urgenza label:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.urgenza label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.campo.foto input[type=file][multiple] { padding: 12px; overflow: hidden; }
.campo.foto input::file-selector-button { min-height: 44px; margin-right: 12px; padding: 10px 16px; border: 0; border-radius: var(--raggio); background: var(--primario); color: var(--su-primario); font: inherit; cursor: pointer; }
.campo input, .campo textarea, .campo select, .scelta, details.giorno, .orario span { border-color: var(--testo-2); }
fieldset.scelte { padding: 0; border: 0; min-width: 0; }
.scelte legend { font-weight: 800; }
.blocco.modulo .nota { margin-block: 20px; }
body.tema-grafite .apertura h1 { font-size: clamp(3.2rem, 6.3vw, 6rem); line-height: 1.02; }
body.tema-lino .servizio, body.tema-lino .novita-scheda { box-shadow: none; }
body.tema-neon .servizio .icona { border-color: var(--accento); }
@media (min-width: 1151px) { .testa > .testa-interno > .social { display: none; } }
@media (max-width: 1150px) { .marca { flex-shrink: 1; min-width: 0; } .marca-testo { min-width: 0; overflow-wrap: anywhere; } }
@media (max-width: 899px) { .pronto-interno { flex-direction: column; align-items: stretch; gap: 24px; } .pronto-interno > div { max-width: none; } }
@media (max-width: 719px) {
  .apertura-testo .azioni { flex-direction: column; align-items: stretch; }
  .apertura-testo .azioni > .pulsante { width: 100%; flex: none; }
  .apertura-testo { padding-top: 80px; }
  .apertura { min-height: 800px; }
  .apertura::after { background: color-mix(in srgb, var(--velo) 90%, transparent); }
  .pronto-interno { width: calc(100% - 40px); padding-block: 28px; }
  .pulsante.urgente { width: 100%; font-size: clamp(1.75rem, 7vw, 2.5rem); padding-inline: 12px; }
  .marca-testo b { font-size: 12px; max-width: 205px; }
  .marca { gap: 8px; }
  .iniziale { width: 32px; height: 32px; }
  .urgenza { gap: 12px; }
  .urgenza label { flex-basis: 100%; }
}

/* Anche i collegamenti più brevi mantengono un bersaglio di 44 × 44 px. */
.menu a { min-width: 44px; justify-content: center; }
.legale a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }