/* IS4ICT, home e pagine nuove del rifacimento «vetrina» (20/10/2026): proposta B «La via di notte» scelta da Francesco,
   con le aggiunte per le pagine interne (/attivita/, /servizi-it/, /strutture-ricettive/ e le loro sorelle EN/ES).
   Autonomo: non si carica insieme a insegna.css (le pagine di linea già esistenti restano con quello). */
@font-face{font-family:"Big Shoulders Display";src:url("/assets/fonts/BigShouldersDisplay-var.woff2") format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/HankenGrotesk-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
  color-scheme:dark;
  --notte:#070B1C;--muro:#0A1130;--pannello:#0C1536;--alone:#415CB4;--tubo:#B4C6FF;--anima:#F5F8FF;
  --testo:#E8ECF7;--testo2:#AEB8D0;--filo:rgba(141,169,255,.22);--vetro:#2A3458;--supporto:#39446A;--sodio:#F0A35E;--pieno:#3D5BD9;
  --titoli:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --luce:0 0 6px rgba(127,156,255,.9),0 0 22px rgba(65,92,180,.85);
  --tubo-acceso:linear-gradient(#B4C6FF,#F5F8FF 50%,#B4C6FF);
  --testata:88px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
html,body{margin:0}
body{background:var(--notte);color:var(--testo);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--tubo);outline-offset:3px;border-radius:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.salta{position:absolute;left:12px;top:-60px;z-index:9;padding:12px 16px;background:var(--anima);color:var(--notte);font-weight:600;border-radius:4px}
.salta:focus{top:12px}
h1,h2{font-family:var(--titoli);font-weight:800;letter-spacing:.004em;color:var(--testo);text-wrap:balance;margin:0}
h3{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:4px;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;text-align:center;
  background:var(--pieno);color:#fff;border:1.5px solid #8DA9FF;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 22px rgba(91,120,224,.42);transition:background .2s}
.btn:hover{background:#4C6AE6}
.ico{width:30px;height:30px;flex:none;fill:none;stroke:var(--tubo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(127,156,255,.6))}
.etichetta{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tubo)}
.etichetta::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--tubo-acceso);box-shadow:var(--luce)}
.etichetta.centro{justify-content:center}
.intro{margin:20px 0 34px;font-size:18px;line-height:1.55;color:var(--testo2);max-width:52ch}
.intro a{color:var(--tubo);text-underline-offset:4px}
.pagina{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--tubo);text-decoration:none;white-space:nowrap}
.pagina::after{content:"";width:16px;height:16px;margin-left:8px;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.pagina:hover{color:var(--anima)}
.pagina:hover::after{transform:translateX(4px)}

/* ---------- Testata: sopra la scena, trasparente ---------- */

/* ---------- La scena: l'insegna sopra la via, tre vetrine accese ---------- */
.scena{position:relative;overflow:hidden;padding-top:var(--testata);
  background:
    radial-gradient(45% 40% at 50% 22%,rgba(65,92,180,.26),transparent 72%),
    radial-gradient(40% 40% at 6% 100%,rgba(240,163,94,.09),transparent 70%),
    radial-gradient(40% 40% at 94% 100%,rgba(240,163,94,.07),transparent 70%),
    linear-gradient(180deg,#070B1C 0%,var(--muro) 70%,#060915 100%)}
.scena::after,.banda::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.apertura{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px;padding-bottom:64px}
.visiva{width:clamp(220px,23vw,330px);margin:0 auto 6px}
.insegna{display:block;width:100%;height:auto;overflow:visible}
.insegna .rifl{display:none} /* il riflesso sul selciato finiva dietro l occhiello */
.occhiello{margin:0 0 14px;font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--testo2)}
h1{font-size:clamp(46px,5.5vw,82px);line-height:.94;max-width:23ch}
.sotto{margin:18px auto 0;max-width:58ch;font-size:18.5px;line-height:1.5;color:var(--testo2)}
.vetrine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;margin-top:40px;text-align:left}
.vetrina{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;align-items:start;
  padding:26px 22px 24px;text-decoration:none;border:1px solid rgba(141,169,255,.28);border-radius:6px;
  background:linear-gradient(180deg,rgba(65,92,180,.16),rgba(8,13,36,.88) 70%);transition:border-color .25s,box-shadow .25s,transform .25s}
.vetrina::before{content:"";position:absolute;left:18px;right:18px;top:-2px;height:3px;border-radius:2px;background:var(--tubo-acceso);box-shadow:var(--luce)}
.vetrina:hover{border-color:rgba(180,198,255,.7);box-shadow:0 0 36px rgba(65,92,180,.35);transform:translateY(-2px)}
.vetrina .ico{grid-row:1/span 2;width:34px;height:34px}
.v-chi{font-family:var(--titoli);font-weight:700;font-size:27px;line-height:1.02;color:var(--anima)}
.v-cosa{grid-column:2;font-size:15px;line-height:1.45;color:var(--testo2)}
.freccia{grid-column:3;grid-row:1/span 2;align-self:center;width:24px;height:24px;fill:none;stroke:var(--tubo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.vetrina:hover .freccia{transform:translateX(4px)}

/* ---------- Bande: una per sottosezione, ognuna con la sua luce ---------- */
.banda{position:relative;overflow:hidden;padding:150px 0 140px;border-top:1px solid var(--filo)}
.parola{position:absolute;z-index:0;top:34px;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--titoli);font-weight:900;font-size:clamp(120px,19vw,300px);line-height:.8;letter-spacing:.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(141,169,255,.10)}
.banda .wrap{position:relative;z-index:1}
.banda-griglia{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.banda-griglia.rovescia{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.disegno svg{display:block;width:100%;height:auto;overflow:visible}
h2{font-size:clamp(40px,4.4vw,64px);line-height:.98;max-width:16ch}

.banda-attivita{background:
  radial-gradient(42% 55% at 14% 46%,rgba(240,163,94,.14),transparent 70%),
  radial-gradient(40% 50% at 86% 30%,rgba(65,92,180,.14),transparent 70%),var(--muro)}
.tessere{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tessera{padding:22px 22px 20px;border:1px solid rgba(141,169,255,.2);border-radius:6px;background:rgba(7,11,28,.55)}
.tessera h3{margin:12px 0 6px;font-size:18.5px;font-weight:600;line-height:1.3;color:var(--testo)}
.tessera p{margin:0;font-size:15px;line-height:1.55;color:var(--testo2)}
.tessera.larga{grid-column:1/-1;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:18px;align-items:center;
  border-color:rgba(240,163,94,.5);background:linear-gradient(90deg,rgba(240,163,94,.09),rgba(7,11,28,.55) 60%)}
.tessera.larga .ico{stroke:#F6C08C;filter:drop-shadow(0 0 4px rgba(240,163,94,.6))}
.tessera.larga h3{margin-top:0}

.banda-it{background:
  radial-gradient(50% 45% at 50% 0%,rgba(65,92,180,.2),transparent 72%),
  linear-gradient(rgba(141,169,255,.045) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(141,169,255,.045) 1px,transparent 1px) 0 0/48px 48px,var(--notte)}
.testa-it{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.testa-it .intro{margin-bottom:0}
.disegno-it{max-width:380px;justify-self:end;width:100%}
.pannelli-it{list-style:none;margin:56px 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pannello-it{position:relative;display:flex;flex-direction:column;padding:30px 26px 18px;border:1px solid rgba(141,169,255,.3);border-radius:6px;
  background:linear-gradient(180deg,rgba(65,92,180,.16),rgba(10,17,48,.92) 60%)}
.pannello-it::before{content:"";position:absolute;left:18px;right:18px;top:-2px;height:3px;border-radius:2px;background:var(--tubo-acceso);box-shadow:var(--luce)}
.pannello-it .ico{width:32px;height:32px}
.pannello-it h3{margin:16px 0 10px;font-family:var(--titoli);font-weight:700;font-size:33px;line-height:1;color:var(--anima)}
.pannello-it p{margin:0;font-size:15.5px;line-height:1.55;color:var(--testo2)}
.pannello-it .parti{margin:auto 0 0;padding-top:16px;margin-top:18px;border-top:1px solid var(--filo);color:var(--testo);font-weight:600}
.pannello-it .pagina{margin-top:6px}
.righe-it{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.righe-it li{display:grid;grid-template-columns:28px auto minmax(0,1fr);gap:6px 16px;align-items:center;padding:18px 24px;border:1px solid var(--filo);border-radius:6px;background:rgba(10,17,48,.7)}
.righe-it .ico{width:26px;height:26px}
.righe-it h3{font-size:17px;font-weight:600;white-space:nowrap}
.righe-it p{margin:0;font-size:15px;color:var(--testo2)}

.banda-export{background:
  radial-gradient(42% 60% at 76% 50%,rgba(65,92,180,.22),transparent 70%),
  radial-gradient(18% 22% at 74% 38%,rgba(240,163,94,.08),transparent 70%),var(--muro)}
.disegno-globo{max-width:460px;justify-self:center;width:100%}
.comincia{position:relative;margin:0 0 34px;padding:22px 26px 22px 30px;font-size:18px;line-height:1.55;color:var(--testo2);background:rgba(7,11,28,.6);border:1px solid var(--filo);border-radius:6px;max-width:52ch}
.comincia::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:2px;background:linear-gradient(90deg,#B4C6FF,#F5F8FF 50%,#B4C6FF);box-shadow:var(--luce)}
.comincia strong{color:var(--anima)}

/* ---------- Come lavoriamo: il tubo della catena, tre tratti accesi su quattro supporti ---------- */
.come{padding:136px 0 120px;border-top:1px solid var(--filo)}
h2.centro{margin:0 auto;text-align:center;max-width:22ch}
.tubo{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.tubo li{position:relative;padding:58px 40px 0 0}
.tubo li::before{content:"";position:absolute;left:0;right:0;top:19px;height:4px;border-radius:2px;background:var(--tubo-acceso);box-shadow:var(--luce)}
.tubo li::after,.tubo::after{content:"";position:absolute;left:-7px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--supporto);border:1.5px solid #05081a;z-index:1}
.tubo::after{left:auto;right:-7px}
.tubo h3{font-family:var(--titoli);font-weight:700;font-size:32px;line-height:1.02;color:var(--anima)}
.tubo p{margin:14px 0 0;color:var(--testo2);max-width:32ch}


/* ---------- Domande frequenti ---------- */
.domande{position:relative;padding:110px 0;background:var(--muro);border-top:1px solid var(--filo)}
.domande .wrap{max-width:844px;text-align:center}
.domande .segno{display:block;margin:0 auto 8px;width:52px;height:78px;overflow:visible}
.domande .segno path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.domande .intro{margin:14px auto 28px}
.faq{text-align:left}
.faq details{position:relative;border-bottom:1px solid var(--filo);padding-left:26px}
.faq details::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:2px;background:#222B4E;box-shadow:0 0 0 1px rgba(141,169,255,.14)}
.faq details[open]::before{background:linear-gradient(90deg,#B4C6FF,#F5F8FF 50%,#B4C6FF);box-shadow:var(--luce)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:20px;align-items:center;padding:20px 0;min-height:44px;font-size:18px;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:18px;height:18px;background:linear-gradient(var(--tubo),var(--tubo)) center/100% 2px no-repeat,linear-gradient(var(--tubo),var(--tubo)) center/2px 100% no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--anima)}
.faq details p{margin:0 0 22px;color:var(--testo2);max-width:62ch}
.faq details p a{color:var(--tubo);text-underline-offset:3px}

/* ---------- Contatti: la scritta più accesa della pagina ---------- */
.contatti{text-align:center;padding:130px 0 120px;background:radial-gradient(50% 60% at 50% 55%,rgba(65,92,180,.24),transparent 70%),var(--notte)}
.contatti h2{max-width:none}
.contatti .intro{margin:14px auto 30px}
.posta{display:inline-block;font-family:var(--titoli);font-weight:800;font-size:clamp(38px,7.4vw,104px);line-height:1.05;letter-spacing:.01em;text-decoration:none;color:var(--anima);
  text-shadow:0 0 6px rgba(180,198,255,.75),0 0 24px rgba(91,120,224,.8),0 0 60px rgba(65,92,180,.5);overflow-wrap:anywhere}
.posta:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}
.dove{margin:16px 0 30px;color:var(--testo2)}

footer{position:relative;padding:48px 0;font-size:14.5px;color:var(--testo2)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#1B2446;box-shadow:0 0 0 1px rgba(141,169,255,.12)}
footer .wrap{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr) auto;gap:40px;align-items:start}
footer img{height:40px;width:auto;display:block}
footer p{margin:0 0 6px}
footer .titoletto{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--testo)}
footer ul{list-style:none;margin:0;padding:0}
footer ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--testo)}
footer .altre{text-align:right}
footer .lingua-attuale{display:inline-flex;align-items:center;min-height:44px;color:var(--tubo);font-weight:700}

/* l'insegna si accende all'apertura, come oggi; con «riduci animazioni» nasce accesa */
@media (prefers-reduced-motion:no-preference){
  .insegna .luce,.insegna .acceso,.insegna .riflesso{animation:neon 1s linear .4s both}
  .insegna .lettere{animation:dissolvi .4s ease-out 1.5s both}
  @keyframes neon{0%{opacity:0}3%{opacity:.8}12%{opacity:0}72%{opacity:0}75%{opacity:1}82%{opacity:.3}88%{opacity:1}100%{opacity:1}}
  @keyframes dissolvi{from{opacity:0}to{opacity:1}}
}

@media (max-width:1180px){
  .righe-it li{grid-template-columns:28px minmax(0,1fr)}
  .righe-it p{grid-column:2}
}
@media (max-width:1080px){
  .vetrine{grid-template-columns:1fr;max-width:620px}
  .banda-griglia,.banda-griglia.rovescia,.testa-it{grid-template-columns:1fr;gap:44px}
  .banda-griglia .disegno{max-width:360px;justify-self:start}
  .disegno-it{justify-self:start;max-width:320px}
  .pannelli-it{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
  footer .altre{grid-column:2/-1;text-align:left}
}
@media (max-width:860px){
  /* sotto gli 860 px le cinque voci non stanno in riga: il menu scorre, come nella home di oggi sul telefono */
}
@media (max-width:720px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .apertura{padding-top:10px;padding-bottom:44px}
  .visiva{width:60%;max-width:230px;margin-bottom:0}
  .rifl{display:none}
  .occhiello{font-size:11.5px;letter-spacing:.12em;margin-bottom:10px}
  h1{font-size:clamp(38px,10.4vw,50px)}
  .sotto{font-size:16px;margin-top:12px}
  .vetrine{gap:10px;margin-top:22px}
  .vetrina{grid-template-columns:28px minmax(0,1fr) 20px;column-gap:12px;row-gap:3px;padding:15px 14px 14px}
  .vetrina::before{left:14px;right:14px}
  .vetrina .ico{width:26px;height:26px}
  .v-chi{font-size:21px}
  .v-cosa{font-size:14px}
  .freccia{width:20px;height:20px}
  .banda{padding:84px 0 80px}
  .parola{font-size:30vw;top:24px}
  h2{font-size:clamp(36px,10vw,46px)}
  .intro{font-size:16.5px;margin:14px 0 24px}
  .banda-griglia .disegno{max-width:260px}
  .disegno-it{max-width:240px}
  .tessere{grid-template-columns:1fr;gap:10px}
  .tessera{padding:18px}
  .tessera.larga{grid-template-columns:30px minmax(0,1fr);gap:4px 14px;align-items:start}
  .tessera.larga .pagina{grid-column:2}
  .pannelli-it{margin-top:36px}
  .pannello-it{padding:24px 20px 14px}
  .righe-it{grid-template-columns:1fr;gap:10px}
  .righe-it li{padding:16px 18px}
  .righe-it h3{white-space:normal}
  .comincia{padding:18px 18px 18px 22px;font-size:16.5px}
  .come{padding:84px 0 72px}
  /* il tubo scende in verticale, come la catena di oggi sul telefono */
  .tubo{grid-template-columns:1fr;margin-top:44px}
  .tubo li{padding:0 0 34px 36px}
  .tubo li::before{left:0;right:auto;top:6px;bottom:0;width:4px;height:auto;background:linear-gradient(90deg,#B4C6FF,#F5F8FF 50%,#B4C6FF)}
  .tubo li::after{left:-5px;top:0}
  .tubo::after{display:none}
  .tubo h3{font-size:27px}
  .domande{padding:72px 0}
  .faq details{padding-left:20px}
  .faq summary{font-size:17px;padding:16px 0}
  .contatti{padding:76px 0 68px}
  footer{padding:36px 0 32px}
  footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px}
  footer .marchio,footer .dati{grid-column:1/-1}
  footer .altre{grid-column:auto;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ====================================================================================================================
   PAGINE INTERNE (20/10): /attivita/, /servizi-it/, /strutture-ricettive/ e le loro sorelle EN/ES.
   Stessi componenti della home (tubo acceso, vetro spento, muro di notte, luce di sodio per le attività):
   una testata con il suo disegno al neon, schede con il tubo acceso in cima, la cifra in lettere di tubo.
   ==================================================================================================================== */
a.salta,.salta{z-index:9}
.btn.vuoto{background:transparent;color:var(--testo);border-color:rgba(180,198,255,.5);box-shadow:none}
.btn.vuoto:hover{border-color:var(--tubo);color:var(--anima);background:rgba(65,92,180,.12)}

/* ---------- Testata della pagina interna ---------- */
.scena-interna{position:relative;overflow:hidden;padding-top:var(--testata);
  background:
    radial-gradient(48% 55% at 82% 38%,rgba(65,92,180,.26),transparent 72%),
    radial-gradient(40% 40% at 4% 100%,rgba(240,163,94,.09),transparent 70%),
    linear-gradient(180deg,#070B1C 0%,var(--muro) 72%,#060915 100%)}
.scena-interna.calda{background:
    radial-gradient(48% 55% at 82% 38%,rgba(240,163,94,.17),transparent 72%),
    radial-gradient(42% 50% at 10% 80%,rgba(65,92,180,.2),transparent 72%),
    linear-gradient(180deg,#070B1C 0%,var(--muro) 72%,#060915 100%)}
.scena-interna::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.apertura-i{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;padding-top:34px;padding-bottom:92px}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;padding:0;font-size:14.5px;color:var(--testo2)}
.briciole li+li::before{content:"/";margin-right:10px;opacity:.5}
.briciole li{display:flex;align-items:center;min-height:44px}
.briciole a{color:var(--testo2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.briciole a:hover{color:var(--tubo)}
.briciole [aria-current]{color:var(--testo)}
.testo-i h1{font-size:clamp(46px,5.1vw,76px);line-height:.95;max-width:17ch;text-align:left}
.testo-i .sotto{margin:20px 0 0;max-width:58ch;text-align:left}
.testo-i .comincia{margin:30px 0 0;max-width:58ch}
.azioni-i{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.disegno-i{max-width:430px;justify-self:end;width:100%}
.disegno-i svg{display:block;width:100%;height:auto;overflow:visible}
.comincia .titoletto-c{display:block;margin:0 0 4px;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tubo)}

/* ---------- Blocchi ---------- */
.blocco-v{position:relative;padding:112px 0 108px;border-top:1px solid var(--filo)}
.blocco-v.muro{background:var(--muro)}
.blocco-v.griglia{background:
  radial-gradient(50% 45% at 50% 0%,rgba(65,92,180,.18),transparent 72%),
  linear-gradient(rgba(141,169,255,.04) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(141,169,255,.04) 1px,transparent 1px) 0 0/48px 48px,var(--notte)}
.blocco-v .wrap{position:relative;z-index:1}
.blocco-v h2{max-width:20ch}
.blocco-v .intro{max-width:60ch}
.testa-blocco{margin-bottom:46px}
.testa-blocco .intro{margin-bottom:0}
.blocco-v h3.gruppo{margin:46px 0 18px;font-family:var(--titoli);font-weight:700;font-size:30px;line-height:1.05;color:var(--anima)}

/* ---------- Schede (le offerte e i servizi): il tubo acceso in cima, la cifra in lettere di tubo ---------- */
.schede{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.schede.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.schede>li,.prezzi-v>li{display:flex}
.schede>li>.scheda,.prezzi-v>li>.scheda{flex:1 1 auto;width:100%}
.schede>li.piena{grid-column:1/-1}
.domande h2{max-width:none}
.scheda{position:relative;display:flex;flex-direction:column;padding:34px 30px 24px;border:1px solid rgba(141,169,255,.3);border-radius:6px;
  background:linear-gradient(180deg,rgba(65,92,180,.16),rgba(10,17,48,.92) 62%)}
.scheda::before{content:"";position:absolute;left:18px;right:18px;top:-2px;height:3px;border-radius:2px;background:var(--tubo-acceso);box-shadow:var(--luce)}
.scheda .ico{width:34px;height:34px}
.scheda h3{margin:16px 0 4px;font-family:var(--titoli);font-weight:700;font-size:34px;line-height:1.02;color:var(--anima)}
.scheda h3+p{margin-top:10px}
.scheda .cifra{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:10px 0 14px}
.scheda .num{font-family:var(--titoli);font-weight:800;font-size:54px;line-height:1;color:var(--anima);
  text-shadow:0 0 6px rgba(180,198,255,.55),0 0 22px rgba(91,120,224,.7)}
.scheda .unita{font-size:15px;color:var(--testo2)}
.scheda>p{margin:0 0 14px;font-size:16px;line-height:1.55;color:var(--testo2)}
.scheda .gratis{margin:0 0 16px;padding:14px 16px 14px 18px;position:relative;font-size:15.5px;line-height:1.5;color:var(--testo);background:rgba(7,11,28,.62);border:1px solid var(--filo);border-radius:6px}
.scheda .gratis::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:2px;background:linear-gradient(90deg,#B4C6FF,#F5F8FF 50%,#B4C6FF);box-shadow:var(--luce)}
.scheda .gratis strong{color:var(--anima)}
.compreso{list-style:none;margin:0 0 16px;padding:0}
.compreso li{position:relative;padding:5px 0 5px 24px;font-size:15.5px;line-height:1.5;color:var(--testo)}
.compreso li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:3px;border-radius:2px;background:var(--tubo-acceso);box-shadow:0 0 6px rgba(127,156,255,.8)}
.scheda .fondo{margin-top:auto}
.limiti{margin:0;padding-top:16px;border-top:1px solid var(--filo);font-size:14.5px;line-height:1.5;color:var(--testo2)}
.limiti strong{color:var(--testo);font-weight:600}
.scheda .azioni-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:18px}
.scheda .rimando{margin:0 0 14px;font-size:15px}
.scheda .rimando a{color:var(--tubo);text-underline-offset:4px}
.scheda.calda{border-color:rgba(240,163,94,.5);background:linear-gradient(135deg,rgba(240,163,94,.1),rgba(10,17,48,.92) 60%)}
.scheda.larga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:start}
.scheda.larga>.ico,.scheda.larga>h3,.scheda.larga>.cifra{grid-column:1}
.scheda.larga>.lato{grid-column:2;grid-row:1/span 6;display:flex;flex-direction:column}
.nota-v{margin:26px 0 0;font-size:14.5px;line-height:1.55;color:var(--testo2);max-width:80ch}
.nota-v strong{color:var(--testo)}

/* ---------- Righe di servizio senza prezzo (centralini, assistenza) ---------- */
.righe-v{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.righe-v li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 16px;align-items:start;padding:20px 24px;border:1px solid var(--filo);border-radius:6px;background:rgba(10,17,48,.7)}
.righe-v .ico{width:26px;height:26px;grid-row:1/span 2;margin-top:2px}
.righe-v h3{font-size:18px;font-weight:600;line-height:1.3}
.righe-v p{margin:0;font-size:15.5px;color:var(--testo2)}

/* ---------- Coppie di colonne e elenchi di fatti ---------- */
.coppia-v{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pannello-v{padding:30px 30px 26px;border:1px solid var(--filo);border-radius:6px;background:rgba(10,17,48,.72)}
.pannello-v h3{margin:0 0 14px;font-family:var(--titoli);font-weight:700;font-size:30px;line-height:1.05;color:var(--anima)}
.pannello-v.no{border-color:rgba(240,163,94,.4)}
.pannello-v.no .compreso li::before{background:linear-gradient(90deg,#F6C08C,#FFE2C2 50%,#F6C08C);box-shadow:0 0 6px rgba(240,163,94,.7)}
.pannello-v p{margin:0 0 12px;color:var(--testo2)}
.pannello-v p:last-child{margin-bottom:0}
.fatti-v{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:0;margin:0;border-top:1px solid var(--filo)}
.fatti-v dt,.fatti-v dd{margin:0;padding:18px 0;border-bottom:1px solid var(--filo)}
.fatti-v dt{font-weight:600;color:var(--testo);padding-right:24px}
.fatti-v dd{color:var(--testo2);max-width:70ch}
.fatti-v dd strong{color:var(--testo)}
.fatti-v dd a{color:var(--tubo);text-underline-offset:3px}
.passi-v{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:0;border-top:1px solid var(--filo)}
.passi-v li{counter-increment:p;position:relative;padding:22px 0 22px 76px;border-bottom:1px solid var(--filo)}
.passi-v li::before{content:counter(p);position:absolute;left:0;top:16px;width:46px;font-family:var(--titoli);font-weight:800;font-size:44px;line-height:1;color:var(--anima);
  text-shadow:0 0 6px rgba(180,198,255,.55),0 0 20px rgba(91,120,224,.7)}
.passi-v h3{font-size:19px;font-weight:600;margin:0 0 4px;color:var(--testo)}
.passi-v p{margin:0;color:var(--testo2);max-width:70ch}

/* ---------- Tre cifre in fila (strutture) ---------- */
.prezzi-v{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.prezzi-v .scheda h3{font-size:28px}
.prezzi-v .scheda .num{font-size:60px}

/* ---------- Contatti con due pulsanti ---------- */
.contatti .azioni-c{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Pagine interne: telefono e schermi stretti ---------- */
@media (max-width:1080px){
  .apertura-i{grid-template-columns:1fr;gap:34px;padding-bottom:64px}
  .disegno-i{justify-self:start;max-width:300px}
  .schede,.schede.tre,.prezzi-v,.coppia-v,.righe-v{grid-template-columns:1fr}
  .scheda.larga{display:flex}
  .fatti-v{grid-template-columns:1fr}
  .fatti-v dt{border-bottom:0;padding-bottom:0}
  .fatti-v dd{padding-top:6px}
}
@media (max-width:720px){
  .apertura-i{padding-top:20px;padding-bottom:48px}
  .testo-i h1{font-size:clamp(40px,11vw,52px)}
  .disegno-i{max-width:230px}
  .azioni-i .btn{flex:1 1 100%}
  .blocco-v{padding:76px 0 72px}
  .testa-blocco{margin-bottom:30px}
  .scheda{padding:28px 20px 20px}
  .scheda h3{font-size:30px}
  .scheda .num{font-size:48px}
  .prezzi-v .scheda .num{font-size:52px}
  .scheda .azioni-s .btn{flex:1 1 100%}
  .pannello-v{padding:24px 20px 20px}
  .righe-v li{padding:16px 18px}
  .passi-v li{padding:18px 0 18px 58px}
  .passi-v li::before{font-size:36px;width:40px;top:14px}
  .nota-v{margin-top:20px}
  .blocco-v h3.gruppo{font-size:26px;margin-top:34px}
}

/* Le schede con sfumatura hanno anche un fondo pieno (il colore del muro): è lo stesso aspetto, ma chi misura il contrasto
   (ops/misura.py) legge la sfumatura sul fondo giusto invece che sul bianco. */
.vetrina,.tessera.larga,.pannello-it,.scheda,.scheda.calda{background-color:#0A1130}

/* Aree toccabili e margini (ops/misura.py, 20/10): le sigle delle lingue a 44 px anche sul telefono, il primo anello delle briciole
   a 44 px, l'indirizzo email dei contatti alto almeno 44 px; le parole di vetro spento dietro le bande non stanno sul telefono
   (uscivano dallo schermo, decorative: sotto i 720 px si tolgono). */
.briciole a{min-width:44px;justify-content:center}
.posta{display:inline-flex;align-items:center;min-height:48px}
@media (max-width:720px){.parola{display:none}}

/* Ritocchi del 20/10 (revisore): prezzi in riga, link «preventivo» sotto le righe di servizio, margini della pagina strutture */
.fatti-v.prezzi dt{font-family:var(--titoli);font-weight:800;font-size:38px;line-height:1.05;color:var(--anima);text-shadow:0 0 6px rgba(180,198,255,.5),0 0 20px rgba(91,120,224,.65)}
.fatti-v.prezzi dt small{display:block;margin-top:2px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:14.5px;color:var(--testo2);text-shadow:none}
.righe-v .pagina{grid-column:2;justify-self:start}
.pannello-sotto{margin-top:34px}
.nota-per{margin-top:14px}
@media (max-width:720px){
  .fatti-v.prezzi dt{font-size:34px}
  .blocco-v{padding:56px 0 52px}
  .testa-blocco{margin-bottom:22px}
  .fatti-v dt,.fatti-v dd{padding:14px 0}
  .fatti-v dd{padding-top:4px}
  .passi-v li{padding:14px 0 14px 54px}
  .pannello-v{padding:20px 18px 16px}
  .pannello-sotto{margin-top:22px}
  .domande{padding:56px 0}
  .contatti{padding:56px 0 52px}
}

/* Piè di pagina (21/10): la colonna di destra (privacy e lingue) parte alla stessa altezza della prima voce di «Servizi», non del suo titolo.
   Solo dove le due colonne stanno una accanto all'altra (da 1081 px in su e fino a 960 px). */
@media (min-width:1081px),(max-width:960px){footer .altre{padding-top:25px}}

/* Piè di pagina fra 721 e 960 px (21/10, revisore): come nelle pagine di linea (insegna.css), due colonne con marchio e dati a tutta larghezza */
@media (max-width:960px){
  footer .wrap{grid-template-columns:1fr 1fr;gap:18px 32px}
  footer .marchio,footer .dati{grid-column:1/-1}
  footer .altre{grid-column:auto}
}
@media (max-width:720px){footer .wrap{gap:14px 20px}}