/*
Theme Name: 24Assistenza
Description: Tema moderno per assistenza e riparazione elettrodomestici.
Version: 2.0
Author: 24assistenza.it
Text Domain: 24assistenza
*/
:root{--ink:#000;--ink2:#000;--bg:#fff;--soft:#F6F7F9;--line:#D9E2EA;--blue:#0B6FB8;--water:#1FA3D6;--sun:#FFC83D;--sunink:#1A1400;--r:14px;--w:1160px;
--f-head:'Bricolage Grotesque',system-ui,sans-serif;--f-body:'Public Sans',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 var(--f-body);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto}a{color:var(--blue)}
h1,h2,h3{font-family:var(--f-head);line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:800}h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:700}h3{font-size:1.2rem;font-weight:700}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
section{padding:72px 0}.soft{background:var(--soft)}
.lead{font-size:1.15rem;color:var(--ink2);max-width:60ch}
:focus-visible{outline:3px solid var(--water);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 24px;border-radius:999px;font:700 1rem var(--f-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.6;cursor:wait}
.btn-sun{background:var(--sun);color:var(--sunink)}.btn-line{border-color:currentColor;color:inherit}
/* header */
.top{background:#10243A;color:#fff;font-size:.9rem;padding:8px 0}
.top .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.top a{color:#fff;font-weight:700;text-decoration:none}
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:800 1.5rem var(--f-head);color:var(--ink);text-decoration:none}.logo b{color:var(--water)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}.nav a:hover{color:var(--blue)}
.nav li{position:relative}.nav .menu-item-has-children>a:after{content:" ▾";font-size:.8em}
.nav ul ul{display:none;position:absolute;top:100%;left:-12px;min-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.14);flex-direction:column;gap:0}
.nav li:hover>ul,.nav li:focus-within>ul{display:flex}
.nav ul ul a{display:block;padding:10px 12px;border-radius:8px}.nav ul ul a:hover{background:var(--soft)}
.hdr .btn{padding:10px 18px}.burger{display:none;background:none;border:0;font-size:1.8rem;color:var(--ink)}
@media(max-width:960px){.burger{display:block}.hdr .btn{display:none}
.nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px}
.nav.open{display:block}.nav ul{flex-direction:column;gap:14px}
.nav ul ul{display:flex;position:static;border:0;box-shadow:none;padding:8px 0 0 14px;background:none}}
/* hero */
.hero{background:linear-gradient(160deg,#0B2A45 0%,#0B6FB8 100%);color:#fff;padding:64px 0 80px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .lead{color:#D5E7F5}.hero .tel{display:block;font:800 clamp(2rem,5vw,3.2rem) var(--f-head);color:var(--sun);text-decoration:none;margin:20px 0 14px}
.hero ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px}.hero li:before{content:"✓ ";color:var(--sun);font-weight:800}
.phero{background:linear-gradient(160deg,#0B2A45,#0B6FB8);color:#fff;padding:56px 0}.phero .lead{color:#D5E7F5;margin:0}.phero h1{font-size:clamp(2rem,5vw,3rem)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.pulse{animation:pulse 2.4s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,200,61,.6)}70%,100%{box-shadow:0 0 0 18px rgba(255,200,61,0)}}
/* form */
.card{background:var(--bg);color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.2)}.card h2{font-size:1.5rem}
.card label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px}
.card input:not([type=radio]),.card select,.card textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink)}
.card .btn{width:100%;justify-content:center;margin-top:16px}.card small{color:var(--ink2);display:block;margin-top:8px}
.hp{position:absolute;left:-9999px}
.fmsg{margin:12px 0 0;padding:0;font-weight:600;border-radius:10px}.fmsg.ok,.fmsg.err{padding:12px 14px}
.fmsg.ok{background:#DDF5EA;color:#0C5A3B}.fmsg.err{background:#FDE4E1;color:#8A1C10}
.stars{border:0;padding:0;margin:12px 0 0;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center}
.stars legend{float:left;font-weight:600;font-size:.9rem;margin-right:12px;padding:0}
.stars input{position:absolute;opacity:0}.card .stars label{display:inline;margin:0;font-size:2rem;line-height:1;color:var(--line);cursor:pointer}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:var(--sun)}.stars input:focus-visible+label{outline:3px solid var(--water)}
/* grids & cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:32px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}@media(max-width:860px){.two{grid-template-columns:1fr}}
.art{background:linear-gradient(160deg,#DCEEFA,#B8DDF2);border-radius:22px;display:grid;place-items:center;padding:20px;overflow:hidden}
.art svg{width:100%;max-width:300px;height:auto}.photo img{width:100%;border-radius:22px;display:block;aspect-ratio:4/3;object-fit:cover}
figure{margin:0}figcaption{margin-top:10px;font-size:.95rem;color:var(--ink2)}figcaption b{color:var(--ink)}
.svc{display:block;padding:16px 16px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.svc:hover{border-color:var(--water);transform:translateY(-4px)}.svc .art{margin-bottom:14px}.svc .art svg{max-width:170px}.svc p{margin:0;color:var(--ink2);font-size:.95rem}
.steps{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s;margin-top:32px}
.steps div{counter-increment:s;padding-left:64px;position:relative}
.steps div:before{content:counter(s);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--water);color:#fff;font:800 1.3rem var(--f-head);display:grid;place-items:center}
.ticks{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}@media(max-width:560px){.ticks{grid-template-columns:1fr}}
.ticks li:before{content:"✓ ";color:var(--water);font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding:0;list-style:none}
.chips li,.chips a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.chips a:hover{border-color:var(--water)}.chips.big li{font-size:1.1rem;padding:12px 22px}
.rev{padding:24px;border-left:4px solid var(--sun);background:var(--bg);border-radius:0 var(--r) var(--r) 0}
.rev p{margin:8px 0 10px}.rev b{font-size:.85rem;color:var(--ink2)}.st{color:#E9A700;letter-spacing:2px}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{font:700 1.1rem var(--f-head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary:after{content:"+";font-size:1.4rem;color:var(--water)}details[open] summary:after{content:"–"}details p{margin:10px 0 0;color:var(--ink2)}
.cta{background:var(--sun);color:var(--sunink);text-align:center}
.cta .tel{font:800 clamp(2rem,6vw,3.6rem) var(--f-head);color:inherit;text-decoration:none;display:block;margin:10px 0 20px}
.marquee{overflow:hidden;margin:24px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee div{display:flex;gap:14px;width:max-content;animation:mq 40s linear infinite}
.marquee span{padding:10px 24px;border:1px solid var(--line);border-radius:999px;font:700 1.1rem var(--f-head);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
.ftr{background:#10243A;color:#C6D4E1;padding:48px 0 90px;font-size:.95rem}
.ftr a{color:#fff}.ftr .wrap{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ftr h3{color:#fff;font-size:1rem}.ftr ul{list-style:none;padding:0;margin:0}.ftr li{margin:6px 0}
.sticky{display:none}
@media(max-width:700px){.sticky{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.sticky a{flex:1;text-align:center;padding:16px;font-weight:800;text-decoration:none}.sticky .c{background:var(--sun);color:var(--sunink)}.sticky .w{background:#25D366;color:#04210F}}
.a24-page{padding:56px 0}.a24-page .wrap{max-width:780px}
/* mappa */
.prov{fill:var(--blue);stroke:var(--bg);stroke-width:3;stroke-linejoin:round;transition:fill .2s}.prov.no{fill:var(--line)}.prov:not(.no):hover{fill:var(--water)}
.pl{fill:#fff;font:700 15px var(--f-body);text-anchor:middle;pointer-events:none}.pl.no{fill:var(--ink2)}
.cap{font-size:.9rem;color:var(--ink2);text-align:center}
.map.in .prov:not(.no){animation:pop .6s both;animation-delay:calc(var(--i)*.09s);transform-box:fill-box;transform-origin:center}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.ring{fill:none;stroke:#FFC83D;stroke-width:3;animation:ring 2s infinite}@keyframes ring{from{r:6;opacity:1}to{r:26;opacity:0}}
/* animazioni illustrazioni */
.spin{transform-origin:120px 170px;animation:spin 5s linear infinite}.spin2{transform-origin:120px 100px;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wave{animation:wv 3s linear infinite}@keyframes wv{to{transform:translateX(-80px)}}
.bub{animation:bub 2.6s ease-in infinite}.b2{animation-delay:1.1s}@keyframes bub{from{transform:translateY(0);opacity:.9}to{transform:translateY(-60px);opacity:0}}
.heat{animation:heat 2s ease-in-out infinite}@keyframes heat{50%{transform:translateY(-8px);opacity:.4}}
.glow{animation:glow 2s ease-in-out infinite}@keyframes glow{50%{opacity:.35}}
.drops{animation:drops 1.4s linear infinite}@keyframes drops{from{transform:translateY(0);opacity:1}to{transform:translateY(120px);opacity:0}}
.arm{transform-origin:122px 136px;animation:arm 1.6s ease-in-out infinite alternate}@keyframes arm{to{transform:rotate(-12deg)}}
.led{animation:glow 1s steps(2) infinite}
.o{fill:#fff;stroke:#10243A;stroke-width:4;stroke-linejoin:round}.b{fill:#0B6FB8}.w{fill:#7FD0F2}.k{fill:#10243A}.y{fill:#FFC83D;stroke:#10243A;stroke-width:4}.s{fill:none;stroke:#10243A;stroke-width:4;stroke-linecap:round}
/* comparsa blocchi */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.grid>.reveal:nth-child(2),.steps>.reveal:nth-child(2){--d:.1s}.grid>.reveal:nth-child(3),.steps>.reveal:nth-child(3){--d:.2s}.grid>.reveal:nth-child(4){--d:.3s}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}

/* blocchi "3 passi" */
figcaption h3{margin:14px 0 4px;font-size:1.3rem}figcaption p{margin:0}
.bm{transform-box:fill-box;transform-origin:left center;animation:bm 5.4s infinite;opacity:0}
@keyframes bm{0%{opacity:0;transform:scale(.5)}10%,80%{opacity:1;transform:none}95%,100%{opacity:0}}
.shake{transform-origin:120px 90px;animation:shake 5.4s infinite}
@keyframes shake{0%,55%,100%{transform:none}60%{transform:rotate(-4deg)}65%{transform:rotate(4deg)}70%{transform:rotate(-4deg)}75%{transform:rotate(3deg)}80%{transform:none}}
.rw{animation:rw 1.8s infinite;opacity:0}@keyframes rw{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.fly{animation:fly 3s ease-in-out infinite alternate}.fly2{animation:fly 3s ease-in-out -1.5s infinite alternate}
@keyframes fly{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.free{animation:glow 2.4s ease-in-out infinite}
.hop{animation:hop 2.4s ease-in-out infinite}@keyframes hop{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
.chk{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 3.2s ease-out infinite}
@keyframes draw{0%{stroke-dashoffset:60}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.2}}
.sp{transform-box:fill-box;transform-origin:center;animation:sp 1.8s ease-in-out infinite;opacity:0}
@keyframes sp{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.cf{animation:cf 3s linear infinite}@keyframes cf{from{transform:translateY(0) rotate(0)}to{transform:translateY(210px) rotate(300deg)}}
.stp{transform-box:fill-box;transform-origin:center;animation:stp 3.2s ease-in-out infinite}
@keyframes stp{0%,100%{transform:scale(1)}15%{transform:scale(1.5)}30%{transform:scale(1)}}
/* blocchi "3 passi": riquadri identici */
.g3 .art{aspect-ratio:4/3;position:relative;padding:0;display:block}
.g3 .art svg{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);max-width:none}
/* niente scroll orizzontale su telefono */
html,body{max-width:100%}
body{overflow-x:hidden}@supports(overflow:clip){body{overflow-x:clip}}
svg,img,video,iframe{max-width:100%}
.map svg{width:100%;height:auto;display:block}
.hero .wrap>*,.two>*,.grid>*,.steps>*{min-width:0}
h1,h2,h3,p,summary{overflow-wrap:break-word}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.ftr .wrap{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}

/* logo */
.logo{display:flex;align-items:center;line-height:0;flex-shrink:0}
.logo img{display:block;height:44px;width:auto;max-width:100%}
@media(max-width:560px){.logo img{height:34px}}

/* sfondo bianco, testi neri */
:root{color-scheme:light}
.top{background:#F6F7F9;color:#000;border-bottom:1px solid var(--line)}.top a{color:#000}
.hero,.phero{background:#fff;color:#000;border-bottom:1px solid var(--line)}
.hero{padding:56px 0 72px}
.hero .lead,.phero .lead{color:var(--ink2)}
.hero .tel{color:var(--blue)}.hero li:before{color:var(--blue)}
.card{border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.1)}
.ftr{background:#F6F7F9;color:#000;border-top:1px solid var(--line)}.ftr a,.ftr h3{color:#000}

/* Chi siamo */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px;margin-top:32px}
.stats div{padding:24px;border:1px solid var(--line);border-radius:var(--r);text-align:center}
.stats b{display:block;font:800 clamp(2.4rem,7vw,3.6rem) var(--f-head);color:var(--blue);line-height:1}.stats span{color:var(--ink2)}
.qa{list-style:none;padding:0;margin:24px 0 0}
.qa li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
.qa b{font-family:var(--f-head);color:var(--blue);text-align:right}.qa b:before{content:"✓ "}
.val{padding:28px;border:1px solid var(--line);border-top:4px solid var(--sun);border-radius:var(--r);text-align:center;background:var(--bg)}.val h3{margin:0;font-size:1.5rem}

/* sezioni Chi siamo / Home: animazioni */
.stats div{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.stats div:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,111,184,.15)}
.stats div:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(31,163,214,.18) 50%,transparent 60%);transform:translateX(-100%);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.js .qa .reveal{transform:translateX(-28px)}.js .qa .reveal.in{transform:none}
.qa li.reveal:nth-child(2){--d:.08s}.qa li.reveal:nth-child(3){--d:.16s}.qa li.reveal:nth-child(4){--d:.24s}.qa li.reveal:nth-child(5){--d:.32s}
.stats .reveal:nth-child(2){--d:.12s}
.qa li{transition:background .2s,padding .2s}.qa li:hover{background:var(--soft);padding-left:12px;padding-right:12px;border-radius:10px}
.val{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.val:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.1)}
.val:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--sun),var(--water))}
.val.reveal.in:before{animation:sweep .9s .3s both}@keyframes sweep{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.val{border-top:1px solid var(--line)}
.val .ico{display:block;font-size:2.4rem;line-height:1;margin-bottom:10px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-6deg)}}