/* 2026-10-03 — Pagine statiche (/servizi/*, /blog/*): punti 1-5 per rompere la monotonia su telefono.
   1 FAQ a fisarmonica  2 fasce di colore alternate  3 elenchi a schede con icona
   4 tabelle a schede su telefono  5 zone a pillole  + protezioni contro testo fuori layout.
   Cache "immutable" su /assets: per modificare, alzare il ?v= nel link delle pagine o creare un file nuovo. */

/* ---------- Protezioni: nessuna scritta fuori dallo schermo ---------- */
.container,.enriched-content,.tw-art,.special-shell{overflow-wrap:break-word;word-wrap:break-word}
.container p,.container li,.container td,.container th,.container summary,.container a,
.tw-art p,.tw-art li,.tw-art td,.tw-art summary{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.container h2,.container h3,.container h4,.tw-art h2,.tw-art h3{overflow-wrap:break-word;hyphens:manual}
.container img,.container video,.tw-art img{max-width:100%;height:auto}
.container pre,.container code{white-space:pre-wrap;word-break:break-word}

/* ---------- 2) Fasce di colore alternate ---------- */
.tw-band{position:relative;margin:28px 0;padding:22px 18px 10px;border-radius:22px;border:1px solid var(--tb-b);background:var(--tb-bg);isolation:isolate}
.tw-band::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 6px 6px;background:var(--tb-acc)}
.tw-band>h2:first-child,.tw-band>h3:first-child{margin-top:0}
.tw-band>:last-child{margin-bottom:12px}
.tw-band-1{--tb-bg:linear-gradient(180deg,rgba(34,211,238,.075),rgba(15,23,42,.18) 70%);--tb-b:rgba(34,211,238,.20);--tb-acc:linear-gradient(90deg,#22d3ee,#3b82f6);--tb-ic:#67e8f9;--tb-icbg:rgba(34,211,238,.14)}
.tw-band-2{--tb-bg:linear-gradient(180deg,rgba(167,139,250,.09),rgba(15,23,42,.18) 70%);--tb-b:rgba(167,139,250,.24);--tb-acc:linear-gradient(90deg,#a78bfa,#ec4899);--tb-ic:#c4b5fd;--tb-icbg:rgba(167,139,250,.16)}
.tw-band-3{--tb-bg:linear-gradient(180deg,rgba(245,158,11,.075),rgba(15,23,42,.18) 70%);--tb-b:rgba(245,158,11,.22);--tb-acc:linear-gradient(90deg,#f59e0b,#10b981);--tb-ic:#fcd34d;--tb-icbg:rgba(245,158,11,.14)}
@media (min-width:700px){.tw-band{padding:26px 26px 12px}}
/* blocco descrittivo delle pagine siti-web */
.tw-extra{margin:28px 0;padding:22px 18px 8px;border-radius:22px;border:1px solid rgba(16,185,129,.22);background:linear-gradient(180deg,rgba(16,185,129,.07),rgba(15,23,42,.18) 70%)}

/* ---------- 1) FAQ a fisarmonica ---------- */
details.tw-acc{display:block;margin:0 0 12px!important;padding:0!important;border-radius:16px!important;border:1px solid rgba(148,163,184,.20)!important;background:rgba(15,23,42,.55)!important;overflow:hidden;transition:border-color .2s ease,background .2s ease}
details.tw-acc[open]{border-color:var(--tb-b,rgba(34,211,238,.35))!important;background:rgba(15,23,42,.75)!important}
summary.tw-acc-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:52px;padding:14px 16px;-webkit-tap-highlight-color:transparent}
summary.tw-acc-q::-webkit-details-marker{display:none}
summary.tw-acc-q::marker{content:""}
summary.tw-acc-q>h3,summary.tw-acc-q>h4,summary.tw-acc-q>strong{flex:1 1 auto;min-width:0;margin:0!important;padding:0!important;display:block;font-size:1.02rem!important;line-height:1.4!important;font-weight:700}
summary.tw-acc-q::after{content:"";flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--tb-icbg,rgba(34,211,238,.14)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .25s ease}
details.tw-acc[open]>summary.tw-acc-q::after{transform:rotate(45deg)}
summary.tw-acc-q:focus-visible{outline:3px solid #22d3ee;outline-offset:-3px;border-radius:16px}
.tw-acc-a{padding:0 16px 16px;color:#cbd5e1;line-height:1.65}
.tw-acc-a>p{margin:0!important}
.tw-acc-a>p+p{margin-top:10px!important}

/* ---------- 3) Elenchi a schede con icona ---------- */
ul.tw-cards{list-style:none;margin:16px 0 18px!important;padding:0!important;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:640px){ul.tw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
ul.tw-cards>li{display:flex;align-items:flex-start;gap:12px;margin:0!important;padding:13px 14px!important;min-width:0;border-radius:16px;background:rgba(15,23,42,.62);border:1px solid rgba(148,163,184,.16);line-height:1.5}
ul.tw-cards>li::before{content:none!important;display:none!important}
.tw-ic{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--tb-ic,#67e8f9);background:var(--tb-icbg,rgba(34,211,238,.14))}
.tw-ic svg{width:20px;height:20px;display:block}
.tw-ct{flex:1 1 auto;min-width:0;padding-top:2px}
.tw-ct strong{color:#fff}

/* ---------- 5) Zone a pillole ---------- */
.tw-zone-lead{margin-bottom:12px!important}
ul.tw-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px!important;padding:0!important}
ul.tw-pills>li{display:inline-flex;align-items:center;gap:6px;margin:0!important;padding:7px 13px 7px 10px!important;max-width:100%;border-radius:999px;font-size:.9rem;line-height:1.25;color:#e0f2fe;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.30);overflow-wrap:anywhere}
ul.tw-pills>li::before{content:""!important;position:static!important;flex:0 0 14px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center/14px no-repeat}
ul.tw-pills>li:nth-child(3n+2){background:rgba(167,139,250,.10);border-color:rgba(167,139,250,.30);color:#ede9fe}
ul.tw-pills>li:nth-child(3n){background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.28);color:#fef3c7}

/* ---------- 4) Tabelle: schede su telefono ---------- */
@media (max-width:640px){
  table.tw-rtable,table.tw-rtable tbody,table.tw-rtable tr,table.tw-rtable td{display:block!important;width:100%!important;max-width:100%!important}
  table.tw-rtable{margin:18px 0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;table-layout:auto!important}
  table.tw-rtable thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  table.tw-rtable tr:has(th){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
  table.tw-rtable tr{margin:0 0 12px!important;padding:14px 16px!important;border-radius:16px;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(15,23,42,.6));border:1px solid rgba(34,211,238,.24)}
  table.tw-rtable tr:nth-of-type(3n+2){background:linear-gradient(180deg,rgba(167,139,250,.09),rgba(15,23,42,.6));border-color:rgba(167,139,250,.26)}
  table.tw-rtable tr:nth-of-type(3n){background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(15,23,42,.6));border-color:rgba(245,158,11,.24)}
  table.tw-rtable td{border:0!important;padding:5px 0!important;text-align:left!important;font-size:.95rem!important;line-height:1.5!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;background:none!important}
  table.tw-rtable td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
  table.tw-rtable td:first-child{font-size:1.08rem!important;font-weight:800;color:#fff;padding-top:0!important}
  table.tw-rtable td:first-child::before{display:none!important}
  table.tw-rtable tr:hover td{background:none!important}
  .tw-art-table{overflow:visible!important}
}

/* ---------- Apparecchi speciali: sezioni a fasce alternate (struttura già a sezioni) ---------- */
.special-shell>.section.intro,.special-shell>.section.delay-section,.special-shell>.section.sectors,.special-shell>.section.faq,.special-shell>.section.niche-med,.special-shell>.section.niche-ind{--tb-bg:linear-gradient(180deg,rgba(34,211,238,.07),rgba(15,23,42,.15) 75%);--tb-b:rgba(34,211,238,.20)}
.special-shell>.section.why,.special-shell>.section.process,.special-shell>.section.brands,.special-shell>.section.next-steps,.special-shell>.section.niche-fit,.special-shell>.section.niche-close{--tb-bg:linear-gradient(180deg,rgba(167,139,250,.08),rgba(15,23,42,.15) 75%);--tb-b:rgba(167,139,250,.22)}
.special-shell>.section.risk,.special-shell>.section.advantages,.special-shell>.section.industrial-seo,.special-shell>.section.niche-lab,.special-shell>.section.niche-local{--tb-bg:linear-gradient(180deg,rgba(245,158,11,.07),rgba(15,23,42,.15) 75%);--tb-b:rgba(245,158,11,.20)}
.special-shell>.section:is(.intro,.why,.risk,.delay-section,.process,.advantages,.sectors,.brands,.industrial-seo,.faq,.next-steps,.niche){margin-top:34px;padding:30px 18px 14px!important;border-radius:24px;background:var(--tb-bg);border:1px solid var(--tb-b)}
@media (min-width:700px){.special-shell>.section:is(.intro,.why,.risk,.delay-section,.process,.advantages,.sectors,.brands,.industrial-seo,.faq,.next-steps,.niche){padding:40px 34px 20px!important}}

@media (prefers-reduced-motion:reduce){details.tw-acc,summary.tw-acc-q::after{transition:none}}

/* Apparecchi speciali su telefoni stretti (<=380px): il titolo a 2.45rem con la parola "Apparecchiature"
   era più largo dello spazio e allargava tutta l'apertura (problema preesistente, scroll orizzontale a 320/360px).
   Il testo dell'H1 non cambia: si riduce solo la grandezza del carattere e il percorso può andare a capo. */
@media (max-width:380px){
  .special-hero{grid-template-columns:minmax(0,1fr)!important}
  .special-hero h1{font-size:7.4vw!important;letter-spacing:-.04em!important;overflow-wrap:break-word}
  .special-hero .hero-copy,.special-hero .hero-copy>*{min-width:0;max-width:100%}
  .crumbs{flex-wrap:wrap;row-gap:4px}
  .crumbs>*{min-width:0;overflow-wrap:anywhere}
}

/* ---------- Foto illustrativa (Apparecchi speciali) ---------- */
.tw-photo{margin:22px 0 28px;padding:0}
.tw-photo img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid rgba(148,163,184,.22);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tw-photo figcaption{margin-top:8px;font-size:.8rem;color:#94a3b8;text-align:center}

/* ---------- Apparecchi speciali: apertura su telefoni stretti (320-360 px) ----------
   Il problema c'era già prima del 2026-10-03: la colonna della griglia prendeva la larghezza minima
   dei pulsanti/briciole (362 px su schermo da 320) e titolo e testi uscivano di 11 px. */
.special-hero{grid-template-columns:minmax(0,1fr)}
@media (min-width:851px){.special-hero{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}}
.special-hero>*,.hero-copy,.hero-actions{min-width:0;max-width:100%}
.hero-actions a,.hero-actions .button{max-width:100%;white-space:normal;overflow-wrap:break-word}
.special-hero .tw-segretaria-cta{max-width:100%}
.special-hero .tw-segretaria-txt,.special-hero .tw-segretaria-txt *{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (max-width:420px){
  .special-hero .tw-segretaria-cta{flex-wrap:wrap;gap:10px;padding:16px!important}
  .special-hero .tw-segretaria-txt{order:3;flex:1 1 100%;min-width:0}
  .special-hero .tw-segretaria-ico{order:1}
  .special-hero .tw-segretaria-arrow,.special-hero .tw-segretaria-go{order:2;margin-left:auto}
}
.crumbs{flex-wrap:wrap;row-gap:4px}
.crumbs strong{display:inline;min-width:0;overflow-wrap:anywhere}
@media (max-width:380px){.special-hero h1{font-size:2rem;letter-spacing:-.04em}}

/* ---------- Apparecchi speciali: 4 nicchie (2026-10-03) ---------- */
.niche h3{font-size:1.15rem;margin:26px 0 10px;color:#fff}
.niche .section-lead{color:#cbd5e1}
.niche ul.tw-cards{margin-top:10px!important}
.tw-niche-cta{margin:22px 0 8px!important;padding:16px 18px;border-radius:16px;border:1px solid rgba(34,211,238,.32);background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(59,130,246,.08));color:#e2e8f0!important;line-height:1.6}
.tw-niche-cta a{color:#67e8f9;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tw-niche-cta-big{font-size:1.05rem}

/* Apparecchi speciali: sezione "Rimandare la diagnosi" a 320 px (problema preesistente: +14 px) */
@media (max-width:850px){.special-shell .delay-layout,.special-shell .brand-layout{grid-template-columns:minmax(0,1fr)}}
.special-shell .symptom-board{grid-template-columns:repeat(2,minmax(0,1fr))}
.special-shell .symptom-board>div{min-width:0;overflow-wrap:break-word}
@media (max-width:380px){.special-shell .symptom-board{grid-template-columns:minmax(0,1fr)}.special-shell .symptom-board>div{padding:14px 16px}}

/* Comuni vicini (Apparecchi speciali): i link dalle pagine riparazione-pc puntano a #zona-<comune> */
#zone-vicine h3[id]{scroll-margin-top:90px}
#zone-vicine h3[id]::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center/14px no-repeat}
/* link nel testo delle sezioni (leggibili su fondo scuro, anche se già visitati) */
.niche p a,.niche p a:visited{color:#67e8f9;text-decoration:underline;text-decoration-color:rgba(103,232,249,.45);text-underline-offset:3px}
.niche p a:hover{color:#a5f3fc}