/* italianlyb.it — stili condivisi, ricavati dal canvas Design del 24/9/2026 (tavole mobile 390×844) */
:root{--accent:#23A6DD}
html{background:#DDE4E9}
body{margin:0;font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;background:#DDE4E9;-webkit-font-smoothing:antialiased}
a{color:#0C6E9C;text-decoration:none}
a:hover{color:#0A5578}
h1,h2,h3{font-family:'Sora',ui-sans-serif,system-ui,sans-serif;margin:0}
button,input,label{font-family:inherit}

/* La colonna: 390 px di disegno, al massimo 480 px su desktop, sfondo neutro intorno */
.tavola{max-width:480px;margin:0 auto;min-height:100vh;background:#F2F6F8;color:#16242F;overflow-x:clip;box-shadow:0 0 48px rgba(11,22,34,.14)}

/* Input nascosti che pilotano gli stati (tab, interruttori, quiz) solo con CSS */
.stato{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Testata */
.testata{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(11,22,34,.94);border-bottom:1px solid rgba(255,255,255,.08)}
.testata .logo{display:flex;align-items:center;gap:9px;color:#FFFFFF;min-height:44px}
.testata .logo img{height:30px;width:auto;display:block}
.testata .link{min-height:44px;display:flex;align-items:center;font-size:14px;color:#B9CCD8}
.hamburger{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:10px;box-sizing:border-box}
.hamburger span{width:18px;height:1.6px;background:#FFFFFF;display:block}

/* Menu a tutto schermo (Home): si apre con #menu, si chiude tornando a #top o seguendo una voce */
.menu{display:none;position:fixed;top:0;bottom:0;left:0;right:0;width:100%;max-width:480px;margin:0 auto;z-index:100;background:#0B1622;flex-direction:column;padding:16px 20px 32px;box-sizing:border-box}
.menu:target{display:flex}
.menu .chiudi{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#FFFFFF;font-size:18px;box-sizing:border-box}
.menu nav{display:flex;flex-direction:column;gap:4px;margin-top:28px}
.menu nav a{font-family:'Sora',sans-serif;font-size:27px;font-weight:600;color:#FFFFFF;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}

/* Etichette in monospazio */
.mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.6px;color:var(--accent)}
.eyebrow.blu{color:#0C6E9C}
.eyebrow.celeste{letter-spacing:1.4px;color:#7FD0F0}

/* Pulsanti e link-pulsante */
.btn-primario{display:block;text-align:center;padding:17px;border-radius:12px;background:var(--accent);color:#06131C;font-weight:600;font-size:16px}
.btn-secondario{display:block;text-align:center;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:#D9E6EE;font-weight:500;font-size:16px}
.freccia{flex-shrink:0}

/* Chip (tab orizzontali, oggetti del contatto) */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 15px;border-radius:999px;white-space:nowrap;cursor:pointer;font-size:14px;font-weight:500;background:rgba(255,255,255,.04);color:#D9E6EE;border:1px solid rgba(255,255,255,.18);box-sizing:border-box}

/* Card bianche */
.card{background:#FFFFFF;border:1px solid #DCE5EA;border-radius:16px;padding:20px}
.card.evidenza{border-color:#0C6E9C}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.3px}

/* Foto segnaposto */
.foto{margin:0}
.foto .segnaposto{width:100%;border-radius:14px;background:#E7EFF3;border:1px dashed #DCE5EA;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.foto .segnaposto span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.2px;text-align:center;line-height:1.5;color:#5A6B77}
.foto figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#5A6B77}

/* Fisarmonica (passaggi in Home, domande in Linea e scorta): <details>, nessuno script */
.acc{border-bottom:1px solid #E6EDF1}
.acc summary{list-style:none;width:100%;min-height:60px;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;box-sizing:border-box}
.acc summary::-webkit-details-marker{display:none}
.acc .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#0C6E9C;flex-shrink:0}
.acc .t{font-family:'Sora',sans-serif;font-size:16.5px;font-weight:600;color:#16242F;flex-grow:1;letter-spacing:-.3px}
.acc .ico-meno,.acc .ico-piu{flex-shrink:0}
.acc:not([open]) .ico-meno{display:none}
.acc[open] .ico-piu{display:none}
.acc .corpo{margin:0;padding:0 18px 20px 46px;font-size:14.5px;line-height:1.6;color:#5A6B77}
.acc.faq summary{min-height:58px;gap:12px;padding:15px 18px}
.acc.faq .t{font-family:inherit;font-size:15.5px;line-height:1.35;letter-spacing:0}
.acc.faq .corpo{padding:0 18px 18px}

/* Blocco di chiusura «Scrivici» */
.cta{background:#0B1622;padding:38px 20px 40px}
.cta h2{font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.7px;color:#FFFFFF}
.cta .lead{margin:14px 0 24px;font-size:15.5px;line-height:1.6;color:#B9CCD8}
.cta .scrivici{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:12px;background:var(--accent);color:#06131C;font-weight:600;font-size:16px}
.cta .oppure{display:block;text-align:center;margin-top:10px;padding:15px;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:#D9E6EE;font-weight:500;font-size:15px}
.cta .sede{margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.55;color:#8FA9B8}

/* «Torna alle aree» e «Le altre schede» */
.torna{padding:0 20px 36px;background:#F2F6F8}
.torna a{display:block;text-align:center;padding:15px;border-radius:12px;border:1px solid #C9D7DF;color:#0C6E9C;font-weight:500;font-size:15px;background:#FFFFFF}
.altre{padding:34px 20px 36px;background:#F2F6F8}
.altre h2{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.4px}
.altre .lista{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.scheda-link{display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;background:#FFFFFF;border:1px solid #DCE5EA;color:inherit}
.scheda-link>div{flex-grow:1;min-width:0}
.scheda-link .tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.3px;color:#0C6E9C}
.scheda-link h3{font-size:17px;font-weight:600;letter-spacing:-.3px;margin-top:5px}
.scheda-link p{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:#5A6B77}
.scheda-link.scura{background:#12212F;border-color:rgba(255,255,255,.12);padding:16px}
.scheda-link.scura .tag{color:#7FD0F0}
.scheda-link.scura h3{color:#FFFFFF}
.scheda-link.scura p{color:#A9C0CF}

/* Piè di pagina */
.piede{background:#06121C;padding:32px 20px 34px}
.piede .logo{height:32px;width:auto;display:block}
.piede .motto{margin:14px 0 0;font-size:13px;line-height:1.55;color:#7E96A6}
.piede .griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:28px}
.piede .titolo{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.4px;color:#7FD0F0}
.piede .voci{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.piede .voci a{font-size:14.5px;line-height:1.4;color:#B9CCD8;min-height:32px;display:flex;align-items:center}
.piede .verifica{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding:16px;border-radius:12px;border:1px solid rgba(127,208,240,.3);background:rgba(35,166,221,.08)}
.piede .verifica span{font-size:14.5px;line-height:1.4;color:#FFFFFF;font-weight:600}
.piede .legale{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.6;color:#64798A}

/* ---------- Home ---------- */
@keyframes ilybpulse{0%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes ilybflowA{0%{stroke-dashoffset:260;opacity:1}40%{stroke-dashoffset:0;opacity:1}44%{opacity:0}100%{opacity:0}}
@keyframes ilybflowB{0%,50%{opacity:0}52%{stroke-dashoffset:260;opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes ilybLineA{0%,42%{stroke:rgba(127,208,240,.45);stroke-dasharray:none}48%,94%{stroke:rgba(255,155,138,.55);stroke-dasharray:5 7}100%{stroke:rgba(127,208,240,.45);stroke-dasharray:none}}
@keyframes ilybLineB{0%,46%{stroke:rgba(255,255,255,.14)}52%,96%{stroke:rgba(95,211,166,.5)}100%{stroke:rgba(255,255,255,.14)}}
@keyframes ilybTagA{0%,40%{opacity:1}46%,96%{opacity:.25}100%{opacity:1}}
@keyframes ilybTagB{0%,46%{opacity:.25}52%,96%{opacity:1}100%{opacity:.25}}
.ilyb-a{animation:ilybLineA 9s ease-in-out infinite}
.ilyb-b{animation:ilybLineB 9s ease-in-out infinite}
.ilyb-fa{stroke-dasharray:16 260;animation:ilybflowA 9s linear infinite}
.ilyb-fb{stroke-dasharray:16 260;animation:ilybflowB 9s linear infinite}
.ilyb-ta{animation:ilybTagA 9s ease-in-out infinite}
.ilyb-tb{animation:ilybTagB 9s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.ilyb-a,.ilyb-b,.ilyb-fa,.ilyb-fb,.ilyb-ta,.ilyb-tb{animation:none}.ilyb-fa,.ilyb-fb{opacity:0}}
/* Verifica dominio: il pulsante mostra gli esiti d'esempio */
.verifica-esito{display:none}
#verifica-demo:checked ~ .verifica-esito{display:block}
/* Quattro fronti: tab a radio */
.tab-barra{display:flex;gap:8px;overflow-x:auto;margin:24px -20px 0;padding:0 20px 4px}
.tab-pannello{display:none}
#fronte-rete:checked ~ .tab-barra label[for="fronte-rete"],
#fronte-posta:checked ~ .tab-barra label[for="fronte-posta"],
#fronte-identita:checked ~ .tab-barra label[for="fronte-identita"],
#fronte-hosting:checked ~ .tab-barra label[for="fronte-hosting"]{background:var(--accent);color:#06131C;border-color:var(--accent)}
#fronte-rete:checked ~ .tab-pannello-rete,
#fronte-posta:checked ~ .tab-pannello-posta,
#fronte-identita:checked ~ .tab-pannello-identita,
#fronte-hosting:checked ~ .tab-pannello-hosting{display:block}

/* ---------- Aree di servizio ---------- */
.chipbar{position:sticky;top:66px;z-index:40;background:#0E1B29;border-bottom:1px solid rgba(255,255,255,.08)}
.chipbar .riga{display:flex;gap:8px;padding:12px 20px}
.chip-area{flex-grow:1;flex-basis:0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:8px 6px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;line-height:1.25;background:rgba(255,255,255,.04);color:#D9E6EE;border:1px solid rgba(255,255,255,.18);box-sizing:border-box}
.area{display:none}
#area-rete:checked ~ .chipbar label[for="area-rete"],
#area-posta:checked ~ .chipbar label[for="area-posta"],
#area-identita:checked ~ .chipbar label[for="area-identita"]{background:var(--accent);color:#06131C;border-color:var(--accent)}
#area-rete:checked ~ .aree .area-rete,
#area-posta:checked ~ .aree .area-posta,
#area-identita:checked ~ .aree .area-identita{display:block}
.voce{display:block;background:#FFFFFF;border:1px solid #DCE5EA;border-radius:16px;padding:20px;color:inherit}
.voce.con-scheda{border-color:#0C6E9C}
.voce h3{font-size:18px;font-weight:600;letter-spacing:-.3px}
.voce .testo{margin:10px 0 0;font-size:14.5px;line-height:1.58;color:#5A6B77}
.pill{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.2px;border-radius:999px;padding:4px 9px}
.pill.scheda{color:#0C6E9C;background:#E4F0F6;border:1px solid #BBD8E6}
.pill.arrivo{color:#8A5A00;background:#FBE9C8;border:1px solid #E8C67E}

/* ---------- Linea e scorta ---------- */
@keyframes ilybflow{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.sim-giu{display:none}
#guasto:checked ~ .sim-ok{display:none}
#guasto:checked ~ .sim-giu{display:block}
.sim-btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:18px;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;box-sizing:border-box}

/* ---------- Caselle e archivio ---------- */
.esito-on{display:none}
#prot:checked ~ .esito-off{display:none}
#prot:checked ~ .esito-on{display:block}
.prot-sw{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.8px;font-weight:500;background:rgba(255,255,255,.06);color:#FF9B8A;border:1px solid #FF9B8A;box-sizing:border-box}
.prot-sw .on{display:none}
#prot:checked ~ .sw-riga .prot-sw{background:#5FD3A6;color:#06131C;border-color:#5FD3A6}
#prot:checked ~ .sw-riga .prot-sw .off{display:none}
#prot:checked ~ .sw-riga .prot-sw .on{display:inline}

/* ---------- Ambiente e sviluppo: analisi preventiva a radio, «Ricomincia» = reset del form ---------- */
.quiz{margin:0}
.quiz .opz{display:block;width:100%;min-height:54px;text-align:left;padding:15px 16px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:500;background:rgba(255,255,255,.04);color:#FFFFFF;border:1px solid rgba(255,255,255,.18);box-sizing:border-box}
.quiz .barra{flex-grow:1;height:4px;border-radius:999px;background:rgba(255,255,255,.12)}
.quiz .passo span{display:none}
.quiz .passo .p1{display:inline}
.quiz .dom,.quiz .fine{display:none}
.quiz .dom-1{display:block}
.quiz .esito-r{display:none}
.quiz input[name="q1"]:checked ~ .dom-1{display:none}
.quiz input[name="q1"]:checked ~ .dom-2{display:block}
.quiz input[name="q2"]:checked ~ .dom-2{display:none}
.quiz input[name="q2"]:checked ~ .dom-3{display:block}
.quiz input[name="q3"]:checked ~ .dom-3{display:none}
.quiz input[name="q3"]:checked ~ .dom-4{display:block}
.quiz input[name="q4"]:checked ~ .dom-4{display:none}
.quiz input[name="q4"]:checked ~ .fine{display:block}
.quiz input[name="q1"]:checked ~ .barre .barra-1,
.quiz input[name="q2"]:checked ~ .barre .barra-2,
.quiz input[name="q3"]:checked ~ .barre .barra-3,
.quiz input[name="q4"]:checked ~ .barre .barra-4{background:var(--accent)}
.quiz input[name="q1"]:checked ~ .testa .passo .p1{display:none}
.quiz input[name="q1"]:checked ~ .testa .passo .p2{display:inline}
.quiz input[name="q2"]:checked ~ .testa .passo .p2{display:none}
.quiz input[name="q2"]:checked ~ .testa .passo .p3{display:inline}
.quiz input[name="q3"]:checked ~ .testa .passo .p3{display:none}
.quiz input[name="q3"]:checked ~ .testa .passo .p4{display:inline}
.quiz input[name="q4"]:checked ~ .testa .passo .p4{display:none}
.quiz input[name="q4"]:checked ~ .testa .passo .p5{display:inline}
#q1a:checked ~ .fine .e-q1a,#q1b:checked ~ .fine .e-q1b,#q1c:checked ~ .fine .e-q1c,#q1d:checked ~ .fine .e-q1d,
#q2a:checked ~ .fine .e-q2a,#q2b:checked ~ .fine .e-q2b,#q2c:checked ~ .fine .e-q2c,#q2d:checked ~ .fine .e-q2d,
#q3a:checked ~ .fine .e-q3a,#q3b:checked ~ .fine .e-q3b,#q3c:checked ~ .fine .e-q3c,#q3d:checked ~ .fine .e-q3d,
#q4a:checked ~ .fine .e-q4a,#q4b:checked ~ .fine .e-q4b,#q4c:checked ~ .fine .e-q4c,#q4d:checked ~ .fine .e-q4d{display:flex}
.quiz .ricomincia{width:100%;min-height:48px;margin-top:10px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#D9E6EE;font-size:14.5px;cursor:pointer}

/* ---------- Contatti ---------- */
.modulo{margin:0}
.modulo .campo{width:100%;box-sizing:border-box;height:52px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#0B1622;color:#FFFFFF;font-size:15px}
.modulo .campo::placeholder{color:#64798A}
.modulo label.et{display:block;font-size:12.5px;color:#8FA9B8;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
#og-linea:checked ~ .blocco .chips label[for="og-linea"],
#og-posta:checked ~ .blocco .chips label[for="og-posta"],
#og-hosting:checked ~ .blocco .chips label[for="og-hosting"],
#og-identita:checked ~ .blocco .chips label[for="og-identita"],
#og-telefonia:checked ~ .blocco .chips label[for="og-telefonia"],
#og-referto:checked ~ .blocco .chips label[for="og-referto"],
#og-altro:checked ~ .blocco .chips label[for="og-altro"]{background:var(--accent);color:#06131C;border-color:var(--accent)}
.momento{width:100%;min-height:54px;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-radius:12px;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.14);box-sizing:border-box}
.momento .box,.privacy-lbl .box{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid rgba(255,255,255,.35);box-sizing:border-box}
.momento .box svg,.privacy-lbl .box svg{display:none}
.momento .et{font-size:14.5px;line-height:1.4;color:#FFFFFF}
#mo-ora:checked ~ .blocco .momento-ora,
#mo-cambio:checked ~ .blocco .momento-cambio,
#mo-prevenzione:checked ~ .blocco .momento-prevenzione{border-color:var(--accent);background:rgba(35,166,221,.1)}
#mo-ora:checked ~ .blocco .momento-ora .box,
#mo-cambio:checked ~ .blocco .momento-cambio .box,
#mo-prevenzione:checked ~ .blocco .momento-prevenzione .box{background:var(--accent);border-color:var(--accent)}
#mo-ora:checked ~ .blocco .momento-ora .box svg,
#mo-cambio:checked ~ .blocco .momento-cambio .box svg,
#mo-prevenzione:checked ~ .blocco .momento-prevenzione .box svg{display:block}
.privacy-lbl{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;margin-top:20px;padding:14px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12);box-sizing:border-box}
.privacy-lbl .box{margin-top:1px}
.privacy-lbl .et{font-size:13.5px;line-height:1.5;color:#B9CCD8}
#privacy:checked ~ .blocco .privacy-lbl{border-color:var(--accent)}
#privacy:checked ~ .blocco .privacy-lbl .box{background:var(--accent);border-color:var(--accent)}
#privacy:checked ~ .blocco .privacy-lbl .box svg{display:block}
.invia{width:100%;height:54px;margin-top:16px;border:none;border-radius:12px;background:rgba(255,255,255,.08);color:#8FA9B8;font-weight:600;font-size:16px;cursor:pointer}
#privacy:checked ~ .blocco .invia{background:var(--accent);color:#06131C}

/* Pannello desktop «fatto per il telefono» (14/10/2026): solo su schermi larghi con mouse; telefono e iPad non lo vedono.
   I QR (assets/qr-*.svg) si rigenerano con strumenti/qr/genera_qr.py al passaggio su italianlyb.it. */
.desk-qr{display:none}
@media (min-width:1160px) and (hover:hover) and (pointer:fine){
.desk-qr{display:block;position:fixed;top:50%;left:calc(50% + 296px);transform:translateY(-50%);width:248px;padding:26px 24px 22px;box-sizing:border-box;background:#0B1622;color:#FFFFFF;border-radius:18px;box-shadow:0 18px 48px rgba(11,22,34,.22);z-index:50}
.desk-qr .eyebrow-qr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.6px;color:var(--accent);font-weight:500}
.desk-qr h2{font-family:'Sora',ui-sans-serif,system-ui,sans-serif;font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.4px;margin:10px 0 0;color:#FFFFFF}
.desk-qr p{font-size:13.5px;line-height:1.55;color:#B9CCD8;margin:10px 0 18px}
.desk-qr .qr{background:#FFFFFF;border-radius:12px;padding:10px;line-height:0}
.desk-qr .qr img{width:100%;height:auto;display:block}
.desk-qr .url{display:block;margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#B9CCD8;word-break:break-all}
}