/* base-basso.css (Paco 29/10): unione di public-responsive.css + geo-blocchi.css + app-light.css, stesso ordine. Gli originali restano sul server. */
/* PC SERVICE - rifinitura responsive del sito pubblico (2026-08-01). */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

main,
.wrap,
.svc-hero,
.blk,
.panel,
.cta-band,
.about,
.loc-grid {
  min-width: 0;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

/* iOS ingrandisce la pagina quando un campo attivo usa caratteri sotto i 16px. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

.crumb,
.svc-hero h1,
.sec-h,
.faq summary,
.vt-name,
.rec-name,
.pm-name,
.pm-desc {
  overflow-wrap: break-word;
}

/* Desktop: testo leggibile e contenuti centrati anche su schermi molto larghi. */
@media (min-width: 1100px) {
  main > .wrap {
    padding-inline: clamp(24px, 2.2vw, 34px);
  }

  .svc-hero h1 {
    max-width: 27ch;
  }

  .svc-hero .lead {
    max-width: 72ch;
  }
}

/* Tablet e telefono: una sola misura di sicurezza per tutte le pagine pubbliche. */
@media (max-width: 760px) {
  .wrap,
  main > .wrap {
    width: 100%;
    max-width: 100%;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .mast {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .mast-inner,
  .mast-switch {
    width: 100%;
    min-width: 0;
  }

  .crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 5px;
    width: 100%;
    padding-top: 16px;
    line-height: 1.45;
  }

  .svc-hero h1 {
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.08;
  }

  .svc-hero .lead {
    font-size: 16px;
    line-height: 1.58;
  }

  .fchips,
  .svc-cta,
  .rec-actions,
  .pm-actions {
    max-width: 100%;
  }

  .fchip {
    max-width: 100%;
    min-height: 34px;
    line-height: 1.25;
  }

  .btn,
  .vt-btn,
  .rec-cta,
  .pm-primary,
  .pm-share {
    min-height: 44px;
  }

  .faq summary {
    min-width: 0;
    padding-right: 42px;
  }

  .wa-widget {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .wa-panel {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))) !important;
  }

  .wa-fab {
    width: 52px !important;
    height: 52px !important;
  }

  .wa-fab svg {
    width: 28px !important;
    height: 28px !important;
  }

  .pm-ov,
  .rich-ov,
  .cm-ov {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .pm,
  .rich-box,
  .cm {
    max-width: 100%;
    max-height: calc(100dvh - 20px);
  }

  /* Le tabelle legali diventano schede verticali: nessuno scorrimento laterale. */
  .policy-page table,
  .policy-page tbody,
  .policy-page tr,
  .policy-page td {
    display: block;
    width: 100%;
  }

  .policy-page table {
    border: 0;
    overflow: visible;
  }

  .policy-page thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .policy-page tbody tr {
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
  }

  .policy-page td {
    display: grid;
    grid-template-columns: minmax(82px, 31%) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 0;
    border-top: 1px solid #e4e7ec;
    overflow-wrap: anywhere;
  }

  .policy-page td:first-child {
    border-top: 0;
  }

  .policy-page td::before {
    color: #14171a;
    font-weight: 700;
  }

  .privacy-page td:nth-child(1)::before { content: "Finalita"; }
  .privacy-page td:nth-child(2)::before { content: "Base giuridica"; }
  .cookie-page td:nth-child(1)::before { content: "Tipo"; }
  .cookie-page td:nth-child(2)::before { content: "Finalita"; }
  .cookie-page td:nth-child(3)::before { content: "Consenso"; }
}

/* Telefoni stretti: due card restano affiancate, ma senza badge che sbordano. */
@media (max-width: 360px) {
  .mast-opt {
    min-width: 0;
    padding-inline: 5px;
    font-size: 12.5px;
  }

  .vt-card,
  .rec-card {
    padding: 12px;
  }

  .vt-titleline .vt-tags,
  .vt-tags,
  .rec-tags {
    gap: 3px;
    max-width: 100%;
  }

  .vt-g,
  .rec-grade {
    padding: 3px 5px;
    font-size: 8.5px;
    letter-spacing: 0;
  }

  .vt-b,
  .rec-batt {
    margin-right: 3px;
  }

  .vt-bat,
  .rec-bat {
    min-width: 37px;
    height: 17px;
    padding-inline: 3px;
    font-size: 9.5px;
  }

  .vt-rate,
  .rec-rate {
    white-space: normal;
  }

  .paylogo {
    gap: 4px;
    margin-left: 0;
  }

  .paylogo .lk {
    height: 16px;
  }

  .paylogo .lp {
    height: 13px;
  }
}

/* Interazioni touch: nessun movimento accidentale mentre si tocca una card. */
@media (hover: none) and (pointer: coarse) {
  .svc-card:hover,
  .panel:hover,
  .vt-card:hover,
  .rec-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Footer mobile unico per tutte le pagine pubbliche: stesso aspetto esteso della Home. */
@media (max-width: 760px) {
  body footer {
    margin-top: 20px !important;
    padding: 14px 0 12px !important;
  }

  body footer .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 12px !important;
  }

  body footer .fgrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body footer .fgrid > :first-child {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 3px !important;
    padding: 0 4px 9px;
    border-bottom: 1px solid #20242a;
  }

  body footer .flogo {
    width: auto;
    height: 32px !important;
    margin: 0 !important;
  }

  body footer .soc {
    display: flex;
    gap: 6px;
    margin: 0 !important;
  }

  body footer .soc a {
    width: 32px !important;
    height: 32px !important;
  }

  body footer .fcol {
    grid-column: auto !important;
    min-width: 0;
    padding: 0 10px 7px !important;
    border: 1px solid #24282e;
    border-radius: 11px;
    background: #090a0c;
    overflow: hidden;
  }

  body footer .fcol > b.h {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 1px;
    font-size: 12px !important;
    cursor: default !important;
  }

  body footer .fcol > b.h::after {
    display: none !important;
    content: none !important;
  }

  body footer .fcol > a,
  body footer .fcol.is-open > a {
    display: block !important;
    margin: 0;
    padding: 7px 2px !important;
    border-top: 1px solid #1d2126;
    font-size: 11.5px !important;
    line-height: 1.25;
  }

  body footer .fic {
    width: 12px !important;
    height: 12px !important;
    margin-right: 5px !important;
  }

  body footer .lg {
    margin: 9px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.45;
    text-align: center;
  }
}

/* Blocchi compatti condivisi da Vendi, Acquista, Riparazioni e pagine dei dispositivi (2026-10-28, Paco: "less is more",
   grafica CHIARA: bianco o grigio chiarissimo, testo antracite, icone a linea sottile, bordi leggermente arrotondati).
   Badge con icona, fisarmonica (details) e schede per dispositivo. Il testo resta tutto nella pagina:
   chiuso per chi guarda, leggibile per Google e per le IA. */

/* Badge: icona + due parole */
.bdg-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 0;padding:0;list-style:none}
.bdg-row.tre{grid-template-columns:repeat(3,1fr)}
.bdg{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF0F3;border-radius:12px;padding:12px 14px;min-width:0}
.bdg-ic{width:36px;height:36px;border-radius:10px;background:#F6F7F9;color:#E50914;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bdg-ic svg{width:20px;height:20px;stroke-width:1.5}
.bdg b{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;line-height:1.2;color:#1F2329}
.bdg span{display:block;font-size:12.5px;line-height:1.35;color:var(--muted,#626c77);margin-top:2px}
/* ⚠️ la regola sopra prendeva anche lo span dell'icona (block = icona in alto a sinistra): l'icona resta centrata */
.bdg .bdg-ic{display:flex;align-items:center;justify-content:center;margin:0}
@media(max-width:820px){.bdg-row,.bdg-row.tre{grid-template-columns:1fr 1fr;gap:9px}.bdg{padding:11px}.bdg-ic{width:34px;height:34px}}
@media(max-width:480px){.bdg-row,.bdg-row.tre{grid-template-columns:1fr}}

/* Fisarmonica */
.gacc{border:0;border-bottom:1px solid #EEF0F3;border-radius:0;background:transparent;margin:0}
.gacc:first-of-type{border-top:1px solid #EEF0F3;margin-top:14px}
.gacc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;min-height:48px;box-sizing:border-box}
.gacc>summary::-webkit-details-marker{display:none}
.gacc>summary::after{content:"";width:9px;height:9px;border-right:1.5px solid #6B7380;border-bottom:1.5px solid #6B7380;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;flex:0 0 auto;margin-right:4px}
.gacc[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.gacc>summary h3,.gacc>summary .gacc-t{margin:0;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:#1F2329}
.gacc-b{padding:0 2px 16px;font-size:14px;line-height:1.55;color:#4F5763}
.gacc-b p{margin:0 0 8px}
.gacc-b ul{margin:0;padding-left:18px}
.gacc-b li{margin:3px 0}
.gacc-b a{color:#E50914;font-weight:700}
.gacc :focus-visible{outline:3px solid #173F73;outline-offset:2px;border-radius:10px}

/* Tabelle dentro la fisarmonica */
.mini-tab{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45}
.mini-tab th,.mini-tab td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e4e7ec);color:var(--text,#14181f)}
.mini-tab thead th{background:#F6F7F9;color:#1F2329;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #E4E7EC}
.mini-tab tbody th{font-weight:700}
.mini-tab caption{caption-side:top;text-align:left;font-size:12px;color:var(--muted,#626c77);padding:0 0 6px}
.mini-w{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Schede per dispositivo */
.dev-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 4px;margin:16px 0 0;-webkit-overflow-scrolling:touch}
.dev-tabs::-webkit-scrollbar{display:none}
.dev-tab{flex:0 0 auto;min-height:42px;padding:9px 15px;border-radius:999px;border:1px solid #E4E7EC;background:#fff;color:#1F2329;font:600 13.5px/1 'Poppins',sans-serif;cursor:pointer}
.dev-tab[aria-selected="true"]{background:#1F2329;border-color:#1F2329;color:#fff}
.dev-tab:focus-visible{outline:3px solid #173F73;outline-offset:2px}
.dev-panel{margin:12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dev-panel[hidden]{display:none}
.dev-panel h3{grid-column:1/-1;margin:0;font:600 16px/1.3 'Poppins',sans-serif;color:var(--text,#14181f)}
.dev-c{background:#fff;border:1px solid #EEF0F3;border-radius:12px;padding:13px 14px}
.dev-c b{display:flex;align-items:center;gap:8px;font:600 14px/1.25 'Poppins',sans-serif;color:var(--text,#14181f)}
.dev-c b svg{width:18px;height:18px;color:#E50914;flex:0 0 auto;stroke-width:1.5}
.dev-c p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted,#626c77)}
.dev-c a{color:#E50914;font-weight:700}
@media(max-width:820px){.dev-panel{grid-template-columns:1fr;gap:8px}}
.faq summary h3.faq-q{margin:0;line-height:1.35}
/* Le tabelle dei criteri di Vendi: intestazione chiara come il resto */
.vc thead th{background:#F6F7F9!important;color:#1F2329!important;border-bottom:1px solid #E4E7EC}
.vc table{border:0}
/* FAQ del sito: stessa fisarmonica leggera */
.faq summary h3.faq-q{color:#1F2329}

/* =====================================================================
   app-light.css (2026-10-28, Paco): veste "App Light" in stile Apple per tutto il sito.
   SOLO aspetto: caricato per ULTIMO, non tocca script, ID, form, vetrina o WhatsApp.
   Pagina bianca, card piatte grigio chiarissimo senza bordi che si sollevano al tocco,
   icone a linea antracite (rosse solo se attive), rosso del marchio solo su pulsanti e icone attive,
   FAQ a card con + che diventa -, barra in basso su telefono, recensioni chiare.
   Molti fogli piu' vecchi (premium.css) usano !important: qui serve lo stesso peso.
   ===================================================================== */
:root{
  --al-bg:#ffffff; --al-card:#f5f5f7; --al-ink:#1d1d1f; --al-text:#424245; --al-muted:#6e6e73;
  --al-red:#E50914; --al-r:18px; --al-shadow:0 10px 28px rgba(0,0,0,.07); --al-soft:0 4px 12px rgba(0,0,0,.03);
  --al-ease:transform .3s ease,box-shadow .3s ease,color .2s ease,background-color .2s ease;
}

/* ---- pagina e tipografia ---- */
body{background:var(--al-bg) !important;background-image:none !important;color:var(--al-text) !important}
h1,h2,h3,.sec-h,.svc-hero h1,.faq-q,.faq summary{color:var(--al-ink) !important}
.sec-h,.svc-hero h1{font-weight:700 !important;letter-spacing:-.015em}
p,.lead,.blk p,.prose p,.faq details p,.svc-card p,.info-row p,.checks li{color:var(--al-text) !important}
.sub,.crumb span{color:var(--al-muted) !important}
/* il rosso esce dai titoli e dai paragrafi: resta su pulsanti e icone attive */
.sec-h em,.svc-hero h1 em,h1 em,h2 em,.v-grades .v-h2 span,.orig-h em{color:inherit !important;font-style:normal}
.prose a,.blk p a,.gacc-b a,.dev-c a,.dtab a,.vc .vc-p a,.faq details p a,.v-step p a,.dtab-nota a{color:var(--al-red) !important;font-weight:600 !important;text-decoration:none}
.prose a:hover,.blk p a:hover,.gacc-b a:hover,.faq details p a:hover{text-decoration:underline}
/* parole colorate dentro i paragrafi: tutte antracite (il rosso resta a pulsanti, link e barra) */
p em,.lead em,li em{color:inherit !important}

/* ---- sezioni ariose: niente riquadri bianchi, solo spazio ---- */
.svc-hero,.blk,.usato-col,.about .txt{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
.blk{padding:56px 24px 8px !important}
.svc-hero{padding:30px 24px 6px !important;margin-top:8px !important}
@media(max-width:820px){.blk{padding:40px 2px 4px !important}.svc-hero{padding:22px 2px 4px !important}}
.sec-ey,.v-ey,.ey{color:var(--al-muted) !important}

/* ---- card piatte (servizi, motivi, badge, schede dispositivo, gradi, garanzie) ---- */
.svc-card,.why .w,.bdg,.dev-c,.orig-c,.v-grade,.v-ti,.panel,.info-row,.hours,.areabox,.app-card{
  background:var(--al-card) !important;border:0 !important;border-radius:var(--al-r) !important;box-shadow:none !important;transition:var(--al-ease) !important}
.svc-card:hover,.svc-card:active,.why .w:hover,.bdg:hover,.dev-c:hover,.orig-c:hover,.v-grade:hover,.app-card:hover,.app-card:active,.svc-card:focus-visible,.app-card:focus-visible{
  transform:translateY(-3px) !important;box-shadow:var(--al-shadow) !important;background:var(--al-card) !important}
.why{background:transparent !important;border:0 !important;gap:12px;display:grid !important}
.why .w{border:0 !important}
.orig{background:transparent !important;border:0 !important}
/* icone a linea: antracite a riposo, rosse su card attiva o al passaggio */
.svc-card .ic svg,.why .w svg,.bdg-ic,.dev-c b svg,.orig-ic,.v-ti .ic,.app-card svg,.fchip svg{color:var(--al-ink) !important;stroke-width:1.5}
.bdg-ic,.orig-ic{background:#fff !important;border-radius:12px !important}
.svc-card:hover .ic svg,.why .w:hover svg,.bdg:hover .bdg-ic,.dev-c:hover b svg,.app-card:hover svg,.app-card:active svg{color:var(--al-red) !important}

/* ---- pillole sotto i titoli ---- */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fchip,.fchip.red,.fchip.green,.fchip.purple{border:0 !important;border-radius:999px !important;padding:7px 13px !important;font-size:12.5px !important;font-weight:600 !important;color:var(--al-ink) !important;background:#f5f5f7 !important}
.fchips .fchip:nth-child(4n+1){background:#eaf6ee !important}
.fchips .fchip:nth-child(4n+2){background:#eef2fb !important}
.fchips .fchip:nth-child(4n+3){background:#fdf3e6 !important}
.fchips .fchip:nth-child(4n+4){background:#f6eef9 !important}

/* ---- griglia di icone stile app (Cosa ritiriamo, scelta dispositivo) ---- */
.app-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin:18px 0 0;padding:0;list-style:none}
.app-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;aspect-ratio:1/1;padding:12px;text-align:center;
  font:600 13px/1.25 'Poppins',sans-serif;color:var(--al-ink) !important;text-decoration:none;cursor:default}
.app-card svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.app-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.app-grid{gap:8px}.app-card{font-size:11px;gap:6px;padding:8px;border-radius:16px !important}.app-card svg{width:26px;height:26px}}
@media(max-width:340px){.app-grid{grid-template-columns:repeat(2,1fr)}}
/* scelta del dispositivo nel modulo riparazioni: stessa veste, logica intatta (.chip/.on) */
#usato .nv-tipi .chip,#ripara .nv-tipi .chip{background:#f9f9f9 !important;border:0 !important;border-radius:16px !important;box-shadow:none !important;transition:var(--al-ease) !important;color:var(--al-ink) !important}
#usato .nv-tipi .chip:hover,#ripara .nv-tipi .chip:hover,#ripara .nv-tipi .chip:active{transform:translateY(-3px) !important;box-shadow:var(--al-shadow) !important}
#ripara .nv-tipi .chip svg{color:var(--al-ink) !important;stroke-width:1.4}
#ripara .nv-tipi .chip.on{background:#fff !important;box-shadow:0 0 0 2px var(--al-red),var(--al-shadow) !important}
#ripara .nv-tipi .chip.on svg{color:var(--al-red) !important}

/* ---- FAQ e fisarmoniche: card separate, + che diventa - ---- */
.faq{display:grid;gap:10px}
.faq details,.gacc{background:#fff !important;border:0 !important;border-radius:12px !important;box-shadow:0 1px 2px rgba(0,0,0,.04),var(--al-soft) !important;margin:0 0 10px !important;padding:0 18px !important}
.faq details{margin:0 !important}
.gacc:first-of-type{border-top:0 !important;margin-top:16px !important}
.faq summary,.gacc>summary{padding:16px 0 !important}
.faq summary::after,.gacc>summary::after{content:"" !important;flex:0 0 auto;width:14px;height:14px;border:0 !important;margin:0 2px 0 auto;transform:none !important;
  background:linear-gradient(var(--al-ink),var(--al-ink)) center/14px 1.6px no-repeat,linear-gradient(var(--al-ink),var(--al-ink)) center/1.6px 14px no-repeat;transition:background-size .3s ease}
.faq details[open] summary::after,.gacc[open]>summary::after{background-size:14px 1.6px,1.6px 0 !important}
.faq details p,.gacc-b{padding-bottom:16px}

/* ---- recensioni chiare (recensioni.js inserisce il suo stile: qui con un selettore piu' forte) ---- */
body .rev-hero{background:#fff !important;border:0 !important;box-shadow:var(--al-soft),0 1px 2px rgba(0,0,0,.04) !important;color:var(--al-ink) !important;border-radius:20px !important}
body .rev-hero-brand,body .rev-hero-num{color:var(--al-ink) !important}
body .rev-hero-lbl{color:var(--al-muted) !important}
body .rev-hero-stars,body .rvc-s,.reviews-sec .stars,.rev-hero-stars,.stars{color:#FFCC00 !important}
body .rev-hero-cta{background:var(--al-ink) !important;color:#fff !important}
body .rev-track{scroll-snap-type:x mandatory;padding:6px 2px 18px !important}
body .rvc{background:#fff !important;border:0 !important;border-radius:16px !important;box-shadow:0 4px 12px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.04) !important;color:var(--al-text) !important;scroll-snap-align:center !important}
body .rvc-n{color:var(--al-ink) !important;font-weight:600 !important;display:flex !important;align-items:center;gap:7px;flex-wrap:wrap}
body .rvc-n::after{content:"Recensione Google";font-size:10.5px;font-weight:600;color:var(--al-muted);background:#f5f5f7;border-radius:999px;padding:2px 8px}
body .rvc-t{color:var(--al-muted) !important}
body .rvc-b{color:var(--al-text) !important}
.rev-sum-cta{color:var(--al-ink) !important}

/* ---- navigazione: pillole su desktop, barra in basso su telefono ---- */
.mast-switch{border-radius:24px !important}
.mast-ind{border-radius:20px !important;transition:transform .35s cubic-bezier(.2,.8,.2,1) !important}
.mast-opt{border-radius:20px;transition:color .2s ease,background-color .2s ease}
.mast-opt:hover:not(.is-active){background:rgba(255,255,255,.08)}
.appnav{display:none}
@media(max-width:800px){
  .appnav{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(3,1fr);
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
    border-top:1px solid rgba(0,0,0,.06);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .appnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;border-radius:14px;
    color:var(--al-muted);text-decoration:none;font:600 11px/1 'Poppins',sans-serif;transition:color .2s ease,transform .2s ease}
  .appnav a:active{transform:scale(.94)}
  .appnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  body.mast-compra .appnav .an-compra,body.mast-vendi .appnav .an-vendi,body.mast-ripara .appnav .an-ripara{color:var(--al-red)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important}
  .dock{display:none !important}
  .wa-widget{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  .mast-switch{display:none !important}
}
@media(prefers-reduced-motion:reduce){.svc-card,.why .w,.bdg,.dev-c,.app-card,.orig-c,.v-grade{transition:none !important}}
/* spunte degli elenchi: antracite, il rosso resta ai pulsanti */
.checks li::before{filter:grayscale(1) brightness(.35);opacity:.85}

/* ---- rifiniture 2026-10-28 sera (Paco) ---- */
/* Cosa ritiriamo: icona libera, piu' grande, nessun contorno */
.app-card svg{width:42px !important;height:42px !important;stroke-width:1.3 !important;border:0 !important;border-radius:0 !important;background:none !important}
@media(max-width:820px){.app-card svg{width:34px !important;height:34px !important}}
/* Perche PC Service: solo 4 card, piu' aria */
.why4{grid-template-columns:repeat(4,1fr) !important;gap:16px !important}
.why4 .v-ti{padding:26px 18px !important}
.why4 .v-ti .ic{background:none !important;border:0 !important;box-shadow:none !important}
.why4 .v-ti .ic svg{width:34px;height:34px;color:var(--al-ink)}
@media(max-width:820px){.why4{grid-template-columns:1fr 1fr !important;gap:10px !important}.why4 .v-ti{padding:20px 12px !important}}
/* Modulo riparazioni, passo 2: testo scuro e micro-icona sopra ogni problema */
.repair-problems button{color:var(--al-ink) !important;font-weight:600 !important;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#f5f5f7 !important;border:0 !important;border-radius:16px !important;transition:var(--al-ease) !important}
.repair-problems button:hover,.repair-problems button:active{transform:translateY(-3px);box-shadow:var(--al-shadow) !important}
.repair-problems .rp-ic{width:24px;height:24px;color:var(--al-ink);flex:0 0 auto}
.repair-problems button.on{background:#fff !important;box-shadow:0 0 0 2px var(--al-red),var(--al-shadow) !important}
.repair-problems button.on .rp-ic{color:var(--al-red)}
/* simmetria footer da computer (Paco 2026-10-28): le quattro colonne di link hanno la stessa larghezza */
@media(min-width:900px){footer .fgrid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr)) !important;column-gap:28px !important}}
footer .lg{text-align:center !important}

/* ===== HOME in stile Bento (Paco 2026-10-28) =====
   Hero: titolo grande, niente sottotitoli lunghi, 3 pillole. Lo script dell'hero resta com'e' (ruota titolo e foto). */
.hero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}
.hero-pills .hp{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:50px;background:#fff;color:#1d1d1f;font:600 15px/1 'Poppins',sans-serif;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.hero-pills .hp svg{width:20px;height:20px}
.hero-pills .hp-main{background:var(--al-red);color:#fff}
.hero-pills .hp:hover,.hero-pills .hp:active{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
@media(max-width:600px){.hero-pills{display:grid;grid-template-columns:1fr;width:100%;max-width:340px;margin-inline:auto}.hero-pills .hp{justify-content:center}}

/* Bento: tre mattonelle grigio Apple, la prima piu' grande */
.bento{max-width:1120px;margin:40px auto 0;padding:0 22px;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:16px}
.bento .bt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px;border-radius:20px;background:#f5f5f7;color:#1d1d1f;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;min-height:200px}
.bento .bt:hover,.bento .bt:active{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.bento .bt-compra{grid-row:1 / span 2;justify-content:center;align-items:center;text-align:center}
.bento .bt-k{font:700 11px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73}
.bento .bt h2{margin:0;font:700 clamp(22px,2.6vw,30px)/1.15 'Poppins',sans-serif;color:#1d1d1f !important;letter-spacing:-.015em}
.bento .bt-cap{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:50px;background:#FFCC00;color:#000;font:800 14px/1 'DM Sans',Arial,sans-serif;letter-spacing:.05em;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.bento .bt-cap svg{width:18px;height:18px}
.bento .bt-pay{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;font:600 14px/1.3 'DM Sans',Arial,sans-serif;color:#1d1d1f}
.bento .bt-pay img{height:20px;width:auto}
.bento .bt-ic svg{width:48px;height:48px;color:#1d1d1f;transition:color .25s ease}
.bento .bt:hover .bt-ic svg{color:var(--al-red)}
.bento .bt-go{margin-top:auto;font:600 14px/1 'Poppins',sans-serif;color:var(--al-red)}
.bento .bt-compra .bt-go{margin-top:6px}
@media(max-width:800px){.bento{grid-template-columns:1fr 1fr;padding:0 16px;gap:12px;margin-top:28px}.bento .bt-compra{grid-column:1 / -1;grid-row:auto;min-height:0}.bento .bt{padding:22px 18px;min-height:170px}.bento .bt-ic svg{width:40px;height:40px}}
@media(max-width:380px){.bento .bt h2{font-size:19px}}

/* Perche PC Service: 4 icone libere con due parole, nessun riquadro */
.why4 .v-ti{background:transparent !important;padding:8px 6px !important;box-shadow:none !important;display:flex;flex-direction:column;align-items:center;gap:10px}
.why4 .v-ti:hover{transform:none !important;box-shadow:none !important}
.why4 .v-ti h3{margin:0;font:600 14px/1.25 'Poppins',sans-serif !important;color:#1d1d1f !important}
.why4 .v-ti .ic svg{width:36px !important;height:36px !important;stroke-width:1.4}
section[aria-label="Perche sceglierci"] .v-tg{border:0 !important;background:transparent !important;box-shadow:none !important}

/* testo storico: fisarmonica discreta, senza foto */
.home-intro .hi-photo{display:none !important}
.home-intro{grid-template-columns:1fr !important;max-width:900px;margin-inline:auto}
.hi-acc{background:transparent !important;box-shadow:none !important;border-top:1px solid #ececf0 !important;border-bottom:1px solid #ececf0 !important;border-radius:0 !important}
.hi-acc>summary h2{margin:0;font:600 14px/1.3 'Poppins',sans-serif !important;color:#6e6e73 !important}
.hi-acc>summary h2 span{font-weight:600}
.hi-acc .gacc-b p{font-size:12.8px !important;line-height:1.6;color:#8e8e93 !important}
.why4 .v-ti{border:0 !important}.why4 .v-ti+.v-ti{border-left:0 !important}

/* ===== HOME seconda versione (Paco 2026-10-28 01:29): riga di 3 icone, Bento vero, sezioni senza muri di testo ===== */
.hero-pills{display:none !important}
.hero-quick{display:flex;justify-content:center;gap:clamp(28px,6vw,64px);margin:26px 0 0}
.hero-quick a{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:64px;color:#e5e5ea;text-decoration:none;font:500 13.5px/1 'Poppins',sans-serif;transition:color .2s ease,transform .2s ease}
.hero-quick svg{width:28px;height:28px}
.hero-quick a:hover,.hero-quick a:active{color:#fff;transform:translateY(-2px)}
/* Bento: Compra larga in alto, Vendi e Ripara quadrate sotto */
.bento{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important;max-width:1000px !important}
.bento .bt{align-items:center !important;justify-content:center !important;text-align:center;gap:16px !important;min-height:0 !important}
.bento .bt-compra{grid-column:1 / -1 !important;grid-row:auto !important;padding:44px 30px !important}
.bento .bt-vendi,.bento .bt-ripara{aspect-ratio:1 / 1;max-height:420px}
.bento .bt-go{margin-top:0 !important}
.bento .bt-ic svg{width:56px !important;height:56px !important}
@media(max-width:800px){.bento .bt-compra{padding:32px 18px !important}.bento .bt-vendi,.bento .bt-ripara{aspect-ratio:auto;min-height:190px !important}.bento .bt-ic svg{width:44px !important;height:44px !important}}
/* Ultimi arrivi: dal titolo direttamente ai prodotti */
#ultimi-arrivi .rec-head{margin-bottom:6px}
/* Qualcosa non funziona?: solo titolo e 4 icone libere */
#ripara-home .lab-proof,#ripara-home .rh-cta{display:none !important}
#ripara-home .svc-cards{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:12px !important;margin-top:22px}
#ripara-home .svc-card{flex-direction:column !important;justify-content:center;align-items:center !important;text-align:center;gap:10px !important;background:transparent !important;padding:14px 6px !important;border:0 !important;box-shadow:none !important}
#ripara-home .svc-card:hover{transform:translateY(-2px) !important;box-shadow:none !important;background:transparent !important}
#ripara-home .svc-card .sub,#ripara-home .svc-card .go{display:none !important}
#ripara-home .svc-card .ic svg{width:34px !important;height:34px !important;stroke-width:1.4}
#ripara-home .svc-card b{font:600 13px/1.25 'Poppins',sans-serif !important;color:#1d1d1f}
@media(max-width:500px){#ripara-home .svc-cards{gap:4px !important}#ripara-home .svc-card b{font-size:11.5px !important}#ripara-home .svc-card .ic svg{width:30px !important;height:30px !important}}
/* bollino delle card: a filo nell'angolo in alto a sinistra del riquadro foto */
/* simmetria: titoli delle mattonelle Vendi/Ripara e nomi dei dispositivi alti uguale, cosi' icone e link stanno sulla stessa riga */
.bento .bt-vendi h2,.bento .bt-ripara h2{min-height:2.3em;display:flex;align-items:center;justify-content:center}
#ripara-home .svc-card>span:not(.ic){min-height:2.6em;display:flex;align-items:flex-start;justify-content:center}
.why4 .v-ti::after,.why4 .v-ti::before{display:none !important;content:none !important}
@media(min-width:801px){.bento .bt-vendi,.bento .bt-ripara{aspect-ratio:auto !important;min-height:250px !important}}


/* (Paco 2026-10-28 01:51) niente colori ne' effetti in piu': l'hero torna com'era (capsula Compra / Vendi / Ripara, occhiello, pulsante);
   come nelle altre pagine; la riga di icone sotto il titolo sparisce. Tutto piatto, antracite e grigio chiaro. */
.hero-quick{display:none !important}

/* ===== HOME confronto A/B (Paco 2026-10-28 01:57): stesso stile piatto, piu' creativo ===== */
.phero .hero-h{font-size:clamp(32px,4.6vw,52px) !important;line-height:1.08 !important}
/* Bento a misure diverse: Compra grande a sinistra, Vendi e Ripara piccole, Disponibili larga */
.bento{grid-template-columns:repeat(4,minmax(0,1fr)) !important;max-width:1120px !important}
.bento .bt-compra{grid-column:1 / span 2 !important;grid-row:1 / span 2 !important;padding:40px 28px !important}
.bento .bt-vendi{grid-column:3 !important;grid-row:1 !important}
.bento .bt-ripara{grid-column:4 !important;grid-row:1 !important}
.bento .bt-disp{grid-column:3 / span 2 !important;grid-row:2 !important}
.bento .bt-vendi,.bento .bt-ripara{min-height:220px !important}
.bento .bt-disp{justify-content:center !important;gap:12px !important}
.bento .bt-k{font:700 11px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73}
.bt-thumbs{display:flex;justify-content:center;gap:8px;min-height:64px}
.bt-thumbs img{width:64px;height:64px;object-fit:cover;background:#fff;border-radius:14px}
.bt-num{font:500 14px/1.2 'Poppins',sans-serif;color:#424245}
.bt-num b{font-weight:700;color:#1d1d1f}
/* senza la mattonella (versione B): Compra larga sopra, Vendi e Ripara sotto */
.bento:not(:has(.bt-disp)) .bt-compra{grid-column:1 / -1 !important;grid-row:1 !important}
.bento:not(:has(.bt-disp)) .bt-vendi{grid-column:1 / span 2 !important;grid-row:2 !important}
.bento:not(:has(.bt-disp)) .bt-ripara{grid-column:3 / span 2 !important;grid-row:2 !important}
@media(max-width:800px){
  .bento{grid-template-columns:1fr 1fr !important}
  .bento .bt-compra{grid-column:1 / -1 !important;grid-row:auto !important}
  .bento .bt-vendi,.bento .bt-ripara{grid-column:auto !important;grid-row:auto !important}
  .bento .bt-disp{grid-column:1 / -1 !important;grid-row:auto !important}
  .bento:not(:has(.bt-disp)) .bt-vendi,.bento:not(:has(.bt-disp)) .bt-ripara{grid-column:auto !important;grid-row:auto !important}
  .bt-thumbs img{width:56px;height:56px}
}
/* numeri grandi al posto delle icone */
.nums4 .v-ti{gap:6px !important}
.nums4 .nm{display:block;font:700 clamp(34px,4vw,46px)/1 'Poppins',sans-serif;letter-spacing:-.03em;color:#1d1d1f}
.nums4 .nm small{font-size:.42em;font-weight:600;letter-spacing:0;color:#6e6e73}
.nums4 .v-ti h3{font:500 13px/1.35 'Poppins',sans-serif !important;color:#6e6e73 !important}
/* (Paco 2026-10-28 02:07) riquadro recensioni: prima il numero di recensioni, poi il voto con le stelle */
body .rev-hero-count{order:-1}
body .rev-hero-cta{order:2}

/* ===== Stile della Home su tutte le pagine (Paco 2026-10-28 02:08) =====
   Solo aspetto: testi, titoli, dati strutturati e FAQ restano identici. */
/* elenchi di servizi con icona (riparazioni, pagine dispositivo): icone libere in griglia, come in Home */
.svc-cards{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important}
.svc-card{flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;text-align:center;gap:8px !important;background:transparent !important;padding:16px 8px !important;border:0 !important;box-shadow:none !important}
.svc-card:hover,.svc-card:active{transform:translateY(-2px) !important;box-shadow:none !important;background:transparent !important}
.svc-card .go{display:none !important}
.svc-card .ic svg{width:34px !important;height:34px !important;stroke-width:1.4}
.svc-card b{font:600 14px/1.25 'Poppins',sans-serif !important;color:#1d1d1f}
.svc-card .sub{font-size:12px !important;line-height:1.4;color:#6e6e73 !important}
@media(max-width:700px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
/* "Perche noi" e i motivi: icone libere senza riquadro, come i punti di forza in Home */
.why{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.why .w{background:transparent !important;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px !important}
.why .w:hover{transform:none !important;box-shadow:none !important}
.why .w svg{width:34px !important;height:34px !important;margin:0 0 4px !important}
.why .w b{font:600 14px/1.25 'Poppins',sans-serif !important;color:#1d1d1f}
.why .w span{color:#6e6e73 !important}
@media(max-width:700px){.why{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.v-tg:not(.why4) .v-ti{background:transparent !important;box-shadow:none !important}
.v-tg:not(.why4) .v-ti:hover{transform:none !important;box-shadow:none !important}
.v-tg:not(.why4) .v-ti .ic{color:#1d1d1f !important}
.v-tg:not(.why4) .v-ti h3,.v-tg:not(.why4) .v-ti h3 span{color:#1d1d1f !important}
/* badge e card informative: grigio Apple piatto come le mattonelle della Home */
.bdg,.dev-c,.orig-c,.v-grade{background:#f5f5f7 !important;box-shadow:none !important}
.bdg-ic,.orig-ic{background:#fff !important}
/* passaggi numerati: cerchi grigio chiaro con icona antracite (il rosso resta solo sui pulsanti) */
.v-step .circ{background:#f5f5f7 !important;color:#1d1d1f !important;box-shadow:none !important}
.v-step .lbl{color:#6e6e73 !important}
.v-tg .v-ti::after,.v-tg .v-ti::before{display:none !important;content:none !important}
/* (Paco 2026-10-28) "Usato Certificato" e "Disponibili adesso" in una sola mattonella a tutta larghezza:
   sotto, Valuta e Riparazioni affiancate e uguali. */
.bento .bt-compra .bt-thumbs{margin-top:2px}
.bento .bt-compra .bt-thumbs img{width:72px;height:72px}
.bento .bt-num[hidden]{display:none}
@media(max-width:800px){.bento .bt-compra .bt-thumbs img{width:56px;height:56px}}
@media(max-width:800px){.bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}