/* ============================================================================
   B2Bdrop — foglio di stile del sito
   Token e componenti tradotti dal design system di Claude Design
   (_ds_bundle.js e _ds/tokens/*.css del progetto "B2Bdrop sito istituzionale",
   versione 3 di Sabrina, 02/09/2026). I valori vengono da li', non sono stati
   reinventati; l'unica aggiunta e' il fallback di sistema in --font-sans, che
   serve finche' Poppins non e' caricato.
   ========================================================================= */

/* ---------------------------------------------------------------- font --- */

/* Poppins servito dal sito, non da Google Fonts: cosi' il browser di chi
   visita non manda il suo indirizzo IP a Google (17/09/2026, ok di Sabrina).
   File in fonts/, licenza SIL OFL in fonts/OFL.txt. Stessi pesi e stessi
   sottoinsiemi (latin, latin-ext) del CSS di Google Fonts, versione v24. */

/* 400, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* 400, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 500, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* 500, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 600, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* 600, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 700, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* 700, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 800, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* 800, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------------------------------------------------------------- token --- */

:root{
  /* Base brand */
  --blue-primary:#005AC8;   /* blu primario B2Bdrop */
  --blue-primary-dark:#0049A3; /* hover del bottone primario */
  --blue-bright:#1766DC;    /* box categoria */
  --blue-mid:#2F6FD0;
  --blue-sky:#3D8BFD;
  --blue-soft:#6E8FC9;
  --navy:#111345;
  --navy-2:#1A2073;
  --hero-from:#00398E;
  --hero-to:#002879;
  --yellow:#FFCF3E;         /* SOLO accento: parole chiave e righe separatore */
  --white:#FFFFFF;

  /* Neutri */
  --gray-50:#F5F6FA;
  --gray-100:#EDEFF5;
  --gray-200:#D9DCE8;
  --gray-500:#6B7089;
  --gray-700:#3C405A;

  /* Fondi soft */
  --lilac-from:#AEB4D8;
  --lilac-to:#EDEEF6;

  /* Semantici */
  --surface-page:var(--white);
  --surface-soft:var(--gray-50);
  --gradient-hero:linear-gradient(120deg,var(--hero-from),var(--hero-to));
  --gradient-lilac:linear-gradient(120deg,var(--lilac-from),var(--lilac-to));
  --text-body:var(--gray-700);
  --text-heading:var(--navy);
  --text-muted:var(--gray-500);
  --accent-keyword:var(--yellow);
  --separator-accent:var(--yellow);
  --link:var(--blue-primary);
  --cta-bg:var(--blue-primary);
  --cta-fg:var(--white);

  /* Tipografia */
  --font-sans:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:56px;
  --fs-h1:44px;
  --fs-h2:34px;
  --fs-h3:26px;
  --fs-h4:20px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-eyebrow:15px;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --lh-tight:1.15;
  --lh-heading:1.25;
  --lh-body:1.55;

  /* Spazi */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --container-max:1200px;
  --section-pad-y:var(--sp-8);

  /* Forme ed effetti */
  --radius-pill:999px;
  --radius-card:20px;
  --radius-card-lg:28px;
  --radius-input:12px;
  --shadow-card:0 8px 24px rgba(17,19,69,.10);
  --shadow-card-hover:0 14px 34px rgba(17,19,69,.16);
  --shadow-cta:0 6px 16px rgba(0,90,200,.30);
  --separator-w:64px;
  --separator-h:3px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:150ms;
  --t-med:250ms;
}

/* ------------------------------------------------------------- di base --- */

/* Niente reset globale di box-sizing: il prototipo non ce l'ha, e i contenitori
   della pagina (max-width 1200 + padding 40) misurano in content-box. Con
   border-box ovunque ogni sezione risultava 80px piu' stretta del disegno.
   Il border-box lo mettiamo dove lo mette il design system, componente per
   componente (_ds_bundle.js: Navbar, Hero, Footer, Input, Select, LeadForm). */
.nav,.hero,.hero__inner,.footer,.btn,.field input,.field textarea,.field select{box-sizing:border-box}

/* Sotto l'ultima riga del sito c'e' il footer blu, e sotto ancora il vuoto:
   si vedeva bianco quando la pagina rimbalza oltre il fondo (trackpad Mac) o
   quando il contenuto e' piu' corto dello schermo (Area Riservata). Dando uno
   sfondo all'elemento html, quel vuoto prende il blu del footer: il body
   continua a dipingere di bianco la sua area, cioe' il contenuto vero. */
html{background:var(--navy)}

div:has(> section #linguette){overflow:clip !important}

/* Testo riservato ai lettori di schermo: non si vede, ma la sintesi vocale
   lo legge. Serve dove l'informazione a video e' solo grafica (per esempio
   i prezzi sfocati del Catalogo). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Piani e Tariffe: la spiegazione della "i" finiva dietro la scheda accanto.
   Quando e' aperta, la scheda che la contiene passa davanti alle altre. */
[data-carta-piano]:has([data-espandibile="tooltip"]:not([hidden])){z-index:40 !important}
[data-espandibile="tooltip"] > span{z-index:60 !important}

/* Pulsante WhatsApp, in basso a destra su tutte le pagine. In prova:
   azzurro, non il verde di WhatsApp. */
[data-whatsapp]{position:fixed;right:max(18px, calc((100% - var(--container-max)) / 2));bottom:20px;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--blue-primary);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 26px rgba(17,19,69,.26);text-decoration:none;
  transition:transform .15s,box-shadow .15s}
[data-whatsapp]:hover,[data-whatsapp]:focus{color:#fff;background:var(--blue-primary-dark);transform:translateY(-2px);box-shadow:0 14px 32px rgba(17,19,69,.32)}
@media (max-width:720px){ [data-whatsapp]{width:44px;height:44px;right:12px;bottom:14px} }
@media (max-width:720px){ [data-whatsapp] svg{width:22px;height:22px} }

/* Il pulsante "torna in cima" nasce nascosto: lo accende solo la regola
   per il telefono, piu' in basso. */
[data-torna-su]{display:none}

/* Una tendina non ha un vero segnaposto: la prima voce e' testo come le altre,
   e resta scura mentre negli altri campi il suggerimento e' chiaro. Finche' e'
   selezionata la voce vuota, la scritta si schiarisce; quando si sceglie
   davvero, torna scura come il testo scritto a mano. */
select[data-segnaposto]:has(option[value=""]:checked){color:var(--text-muted)}
select[data-segnaposto] option{color:var(--navy)}

body{
  margin:0;
  background:var(--surface-page);
  font-family:var(--font-sans);
  color:var(--text-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{color:var(--text-heading);line-height:var(--lh-heading);font-weight:var(--fw-bold);margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--hero-from)}
img{max-width:100%}

.container{max-width:var(--container-max);margin:0 auto;padding-left:40px;padding-right:40px}
.section{padding-top:var(--section-pad-y);padding-bottom:var(--section-pad-y)}
.section--soft{background:var(--surface-soft)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------- componente: Button --- */
/* Dal bundle: pillola, pesi e padding per taglia, quattro varianti.          */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 28px;              /* size md */
  border-radius:var(--radius-pill);
  font-family:var(--font-sans);
  font-weight:var(--fw-semibold);
  font-size:16px;
  line-height:24px;
  cursor:pointer;
  text-decoration:none;
  border:none;
  transition:all var(--t-fast) var(--ease);
}
.btn--sm{padding:8px 20px;font-size:14px}
.btn--lg{padding:15px 36px;font-size:18px}

.btn--primary{background:var(--cta-bg);color:var(--cta-fg);box-shadow:var(--shadow-cta)}
.btn--primary:hover{background:var(--blue-primary-dark);color:var(--cta-fg);transform:translateY(-1px)}

.btn--white{background:#fff;color:var(--navy);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn--white:hover{background:var(--gray-100);color:var(--navy);transform:translateY(-1px)}

.btn--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.9)}
.btn--outline:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}

.btn--ghost{background:transparent;color:var(--blue-primary);border:2px solid var(--blue-primary)}
.btn--ghost:hover{background:rgba(0,90,200,.08);color:var(--blue-primary);transform:translateY(-1px)}

.btn:active{transform:scale(.98)}

.btn__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1.8px solid currentColor;
}

/* --------------------------------------------- componente: SectionTitle --- */
/* Occhiello maiuscolo, titolo extrabold, riga gialla sotto.                  */

.section-title__eyebrow{
  color:var(--blue-primary);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-eyebrow);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.section-title h1,.section-title h2,.section-title h3{
  font-weight:var(--fw-extrabold);
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);
}
.section-title h1{font-size:var(--fs-h1)}
.section-title h3{font-size:var(--fs-h3)}
.section-title .kw{color:var(--accent-keyword)}   /* la parola chiave gialla */
.section-title__rule{
  width:var(--separator-w);height:var(--separator-h);
  background:var(--separator-accent);border-radius:2px;margin-top:14px;
}
.section-title--center{text-align:center}
.section-title--center .section-title__rule{margin-left:auto;margin-right:auto}
.section-title--on-blue .section-title__eyebrow{color:#fff}
.section-title--on-blue h1,
.section-title--on-blue h2,
.section-title--on-blue h3{color:#fff}

/* ---------------------------------------------------- componente: Hero --- */

.hero{
  position:relative;overflow:hidden;
  background:var(--gradient-hero);
  color:#fff;font-family:var(--font-sans);
  min-height:520px;display:flex;align-items:center;
}
.hero__deco{position:absolute;inset:0;pointer-events:none}
.hero__deco i{position:absolute;display:block}
.hero__deco .band-1{left:-12%;top:-40%;width:48%;height:180%;background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,0));transform:skewX(-18deg)}
.hero__deco .band-2{right:18%;top:-30%;width:10%;height:160%;background:rgba(255,255,255,.06);transform:skewX(-18deg)}
/* I due rombi del componente Hero: nel prototipo li nasconde navbar-align.js
   ("remove leftover decorative rotated squares coming from DS components"),
   quindi Sabrina non li vede e qui non devono comparire. Restano scritti per
   ritrovarli se un giorno si decide di rimetterli. */
.hero__deco .diamond-1{left:40px;bottom:60px;width:90px;height:90px;border:2px solid rgba(255,255,255,.25);transform:rotate(45deg);display:none}
.hero__deco .diamond-2{left:110px;bottom:140px;width:54px;height:54px;border:2px solid rgba(61,139,253,.5);transform:rotate(45deg);display:none}
.hero__inner{
  position:relative;display:flex;align-items:center;gap:48px;
  max-width:var(--container-max);margin:0 auto;padding:64px 40px;width:100%;
}
.hero__text{flex:1 1 55%}
.hero__text .section-title h1{font-size:var(--fs-display)}
.hero__lead{font-size:18px;line-height:var(--lh-body);color:rgba(255,255,255,.92);margin-top:22px;max-width:560px}
.hero__actions{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.hero__media{flex:1 1 45%;display:flex;justify-content:center}
.hero__media img{max-width:100%;height:auto}

/* -------------------------------------------------- componente: Navbar --- */

/* Lo sticky non sta qui: nelle pagine l'header e' dentro un contenitore
   sticky che tiene insieme barra e Login. Un secondo sticky annidato darebbe
   comportamenti diversi da quelli del prototipo. */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:18px 40px;background:#fff;
  box-shadow:0 2px 12px rgba(17,19,69,.06);
  font-family:var(--font-sans);
}
/* 40px e' l'altezza del design system. Sette pagine su otto la portano a 48px
   con una regola nel loro <style> (header img[alt*="B2Bdrop"]); Area Riservata
   no, e li' il logo resta piccolo: e' cosi' anche nel prototipo. */
/* Il logo e' alto 48px su tutte le pagine. Alcune lo dicono per conto loro
   (regola ereditata dal disegno), l'area riservata no: qui si allinea. */
.nav__logo{height:48px;width:auto;display:block}
/* Solo da computer il logo e' un po' piu' grande: il file e' largo 1650px,
   quindi resta nitidissimo anche sugli schermi ad alta definizione. */
/* Le pagine fissano l'altezza del logo con una regola propria: per superarla
   serve la stessa forza. */
@media (min-width:961px){ .nav .nav__logo[alt*="B2Bdrop"], .nav .nav__logo{height:58px !important} }
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{
  color:var(--navy);font-weight:var(--fw-medium);font-size:15.5px;
  text-decoration:none;padding-bottom:4px;
  border-bottom:3px solid transparent;
  transition:opacity var(--t-fast) var(--ease);
}
.nav__links a:hover{opacity:.7;color:var(--navy)}
.nav__links a[aria-current="page"]{
  color:var(--blue-primary);font-weight:var(--fw-bold);
  border-bottom-color:var(--yellow);opacity:1;
}
.nav__side{display:flex;align-items:center;gap:14px}

/* --- allineamento della barra: navbar-align.js del prototipo, in CSS -------
   Nel prototipo un piccolo script corregge a runtime la barra del design
   system: header largo tutta la riga, menu centrato e spostato di 24px,
   spaziature diverse sotto i 1080px. E' quello che Sabrina vede, quindi qui
   sono regole, non JavaScript.                                             */
.nav{width:100%;flex:1 1 auto;min-width:0;gap:32px;position:relative;
  /* il logo parte dove partono i testi delle sezioni sotto: il bordo della
     colonna centrale da 1200px, o 40px quando lo schermo e' piu' stretto */
  padding:18px max(40px, calc((100% - var(--container-max)) / 2));}
/* le voci al centro della pagina, non dello spazio che resta accanto al logo */
/* Spostate di 40px verso destra rispetto al centro della pagina; il logo
   invece non si muove. */
.nav__links{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + 40px),-50%);
  margin:0;gap:42px}
.nav__links a{white-space:nowrap;font-size:15.5px}
.nav__side .btn{white-space:nowrap}

/* Fra 1080 e 1199 punti il menu centrato arriverebbe a ridosso del logo:
   li' le voci stanno un po' piu' vicine fra loro. */
@media (min-width:1080px) and (max-width:1199px){ .nav__links{gap:24px} }
@media (max-width:1079px){
  .nav{padding:18px 16px;gap:12px}
  .nav__links{gap:12px}
  .nav__links a{font-size:13.5px}
  .nav__side .btn{font-size:13.5px}
  .nav + div{padding-right:16px !important}   /* il riquadro col Login */
}
/* Il pulsante Login non e' del componente Navbar: sta nel markup della pagina,
   accanto all'header, con i suoi stili. Qui non va duplicato. */
.nav__toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--navy)}

/* -------------------------------------------------- componente: Footer --- */

.footer{background:var(--navy);color:#fff;font-family:var(--font-sans);padding:56px 40px 24px}
.footer__inner{display:flex;gap:64px;flex-wrap:wrap;max-width:var(--container-max);margin:0 auto}
.footer__brand{flex:1 1 260px}
.footer__brand img{height:44px;width:auto}
.footer__brand p{color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.6;margin-top:16px;max-width:300px}
.footer__col{flex:0 1 auto;min-width:140px}
.footer__col h2,
.footer__col .footer__titolo{font-weight:var(--fw-bold);font-size:15.5px;margin-bottom:6px;color:#fff}
.footer__col .rule{width:32px;height:2.5px;background:var(--separator-accent);border-radius:2px;margin-bottom:14px}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* Nel design system la colonna e' un flex verticale e ogni voce occupa tutta
   la larghezza della colonna: senza display:block i link starebbero larghi
   quanto la parola, e la colonna verrebbe piu' stretta del disegno. */
.footer__col a,.footer__col li{color:rgba(255,255,255,.75);font-size:14.5px;text-decoration:none}
.footer__col a{display:block}
.footer__col a:hover{color:#fff}
.footer__note{
  border-top:1px solid rgba(255,255,255,.15);margin:44px auto 0;padding-top:20px;
  text-align:center;color:rgba(255,255,255,.55);font-size:13px;max-width:var(--container-max);
}
.footer__note a{color:rgba(255,255,255,.75)}

/* -------------------------------------------- componenti: Input, Checkbox --- */

.field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-sans)}
.field__label{font-weight:var(--fw-semibold);font-size:14px;color:var(--navy)}
.field__label .req{color:var(--blue-primary)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border-radius:var(--radius-input);
  border:2px solid var(--gray-200);background:#fff;
  font-family:var(--font-sans);font-size:15px;color:var(--gray-700);
  outline:none;transition:border-color var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-primary)}

/* Le spunte dei moduli: testo e casella allineati al centro, stessa misura
   per il consenso privacy e per quello facoltativo. */
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:var(--text-body);line-height:1.45}
.check + .check{margin-top:0}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:15px;height:15px;flex:none;border-radius:4px;
  border:2px solid var(--gray-200);background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast) var(--ease);
}
.check__box svg{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.check input:checked + .check__box{border-color:var(--blue-primary);background:var(--blue-primary)}
.check input:checked + .check__box svg{opacity:1}
.check input:focus-visible + .check__box{outline:2px solid var(--blue-sky);outline-offset:2px}

/* ------------------------------------------------ contenuto che si apre --- */
/* Il contenitore non deve esistere per il layout: i figli devono restare
   figli del loro contenitore vero (griglie e flex del prototipo). */
[data-espandibile]{display:contents}
[data-espandibile][hidden]{display:none}
/* Le due versioni della pagina di ringraziamento: alcune hanno display
   inline, che batterebbe il [hidden] del browser. */
[data-grazie][hidden],[data-esito][hidden]{display:none!important}
[data-scheda-apribile]{cursor:pointer}

/* ------------------------------------------- carosello delle recensioni --- */
/* Le schede hanno display:flex inline, che batterebbe il [hidden] del browser. */
[data-carosello-voce][hidden]{display:none!important}
[data-carosello][disabled]{opacity:.35;cursor:default}
[data-carosello]{transition:opacity var(--t-fast) var(--ease)}
[data-apri="sblocca"]:focus-visible{outline:3px solid var(--blue-sky);outline-offset:3px}

/* --------------------------------------------------------- avviso servizio --- */
/* Usato dove il prototipo prometteva pagamenti o login, che non esistono.      */

.notice{
  display:none;margin-top:14px;padding:14px 18px;border-radius:var(--radius-input);
  background:var(--gray-50);border:1px solid var(--gray-200);
  font-size:14.5px;color:var(--gray-700);line-height:1.5;
}
.notice.is-visible{display:block}
.notice strong{color:var(--navy)}

/* ----------------------------------------------------- banner dei cookie --- */
/* Lo crea js/consenso.js. "Rifiuta tutti" e "Accetta tutti" hanno lo stesso
   stile: il Garante vuole il rifiuto evidente quanto il consenso.            */

.consenso{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:990;
  max-width:760px;margin:0 auto;padding:22px 24px 20px;box-sizing:border-box;
  max-height:calc(100vh - 32px);overflow:auto;
  background:#fff;color:var(--gray-700);border:1px solid var(--gray-200);
  border-radius:var(--radius-card);box-shadow:0 12px 40px rgba(17,19,69,.22);
  font-family:var(--font-sans);font-size:14.5px;line-height:1.55;text-align:left;
}
.consenso[hidden],.consenso [hidden]{display:none !important}
.consenso p{margin:0}
.consenso strong{color:var(--navy)}
.consenso__titolo{margin:0 36px 8px 0 !important;font-size:18px;line-height:1.3;font-weight:var(--fw-semibold);color:var(--navy)}
.consenso__chiudi{
  position:absolute;top:10px;right:12px;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--gray-500);
}
.consenso__chiudi:hover{background:var(--gray-100);color:var(--navy)}
.consenso__scelte{display:grid;gap:10px;margin-top:14px}
.consenso__scelte label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consenso__scelte input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--blue-primary)}
.consenso__azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}
.consenso__azioni .btn{justify-content:center}
.consenso :focus-visible{outline:3px solid var(--blue-sky);outline-offset:2px}
/* stesso colore dei link Privacy e Cookie Policy accanto (color:inherit nel prototipo) */
.consenso-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.consenso-link:hover{color:#fff}

/* ---------------------------------------------------------- responsive --- */

@media (max-width:960px){
  :root{--fs-display:38px;--fs-h1:32px;--fs-h2:27px;--fs-h3:22px}
  /* I titoli in cima alle pagine interne sono scritti a 48px fissi. Quello
     della home usa la misura elastica della sua testata, che su schermo
     stretto si ferma a 32px: qui si applica la stessa, cosi' da telefono
     tutti i titoli di apertura hanno davvero la stessa dimensione. */
  h1[style*="font-size:48px"]{font-size:clamp(32px,3.6vw,46px) !important}
  /* Le tappe di Chi Siamo: incolonnate, il testo di una toccava il numero
     della successiva. Un po' di respiro fra un blocco e l'altro. */
  [data-tappe]{row-gap:32px !important}
  [data-tappe] > *{margin-bottom:20px}
  [data-tappe] > *:last-child{margin-bottom:0}
  /* Il riquadro blu del team: da telefono il testo arrivava a filo del bordo
     arrotondato. Qui si stringe l'imbottitura laterale e si allarga il
     riquadro, cosi' la colonna respira. */
  [data-riquadro-team]{padding:36px 20px !important;margin:0 -12px !important}
  .container{padding-left:24px;padding-right:24px}
  .hero__inner{flex-direction:column;align-items:flex-start;gap:32px;padding:48px 24px}
  .hero__text,.hero__media{flex:1 1 100%;width:100%}
  .nav{padding:14px 24px;flex-wrap:wrap}
  .nav__links{
    display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;
    gap:14px;padding:14px 0 4px;
    position:static;transform:none;                /* da telefono torna in colonna */
  }
  .nav.is-open .nav__links{display:flex}
  .nav__toggle{display:inline-flex}
  .footer{padding:40px 24px 20px}
  .footer__inner{gap:32px}
}

@media (max-width:520px){
  .hero__actions .btn{width:100%;justify-content:center}
  .consenso{left:8px;right:8px;bottom:8px;padding:18px 16px 16px}
  .consenso__azioni .btn{width:100%}
  /* La riga legale del footer arriva dal prototipo con white-space:nowrap:
     sotto i 520px e' larga 627px e fa scorrere di lato tutta la pagina
     (misurato il 03/09/2026: anche il prototipo lo fa, 643px). Qui va a capo. */
  .footer__note span{white-space:normal !important}
  /* con "Preferenze cookie" i link legali sono tre: sotto i 360px vanno a capo */
  .footer__note span{flex-wrap:wrap}
}

/* ----------------------------------------------------- telefono (<=720px) --- */
/* Il prototipo non ha un layout per schermi stretti: griglie a 4 colonne,
   colonne con min-width e margini negativi restano tali e il telefono scorre
   di lato. Le pagine sono fatte di stili inline, quindi qui si aggancia il
   valore dello stile. Ogni regola dice la pagina e il blocco che corregge
   (segnalazione di Sabrina del 03/09/2026, screenshot da iPhone).           */
/* Solo da telefono: nella testata della home la scritta "200+ clienti ci hanno
   gia' scelto" resta appoggiata in fondo alla fascia blu, ma prima finiva sopra
   l'immagine del computer. Qui la fascia si allunga in basso e l'immagine si
   stacca, cosi' la scritta trova il suo spazio, sempre sul blu. */
/* Le foto dei prodotti non si aprono, non si ingrandiscono e non si trascinano:
   il tocco vale come tocco sulla scheda. */
[data-griglia-assaggio] img{pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}

/* Da telefono il testo introduttivo delle testate ha la stessa misura dei
   testi in pagina (16,5px), non 18px. */
@media (max-width:720px){
  .hero__lead,
  #home .hero__lead,
  body #home .hero__lead,
  [style*="color:rgba(255,255,255,.9);font-size:18px;line-height:1.55"]{font-size:16.5px !important}
}

/* Da telefono il modulo del piano su misura: piu' respiro ai lati e
   pulsante centrato, che su schermo stretto sta meglio. */
@media (max-width:720px){
  [data-modulo-misura] button[data-servizio="modulo"],
  [data-modulo-contatti] button[data-servizio="modulo"]{display:block;margin-left:auto;margin-right:auto}
}

/* Da telefono i moduli a comparsa (sblocca il prezzo, richiedi informazioni)
   sono piu' alti dello schermo: il riquadro veniva centrato e la crocetta
   finiva sopra il bordo, irraggiungibile. Qui il fondo scorre, il riquadro
   parte dall'alto e la crocetta resta sempre in vista. */
@media (max-width:720px){
  [data-espandibile="sblocca"] > [data-chiudi="sblocca"],
  [data-ip-overlay]{align-items:flex-start !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;padding:14px !important}
  [data-espandibile="sblocca"] [data-ferma-click],
  [data-ip-card]{padding:52px 18px 24px !important;border-radius:18px !important;margin:0 auto}
  [data-espandibile="sblocca"] button[data-chiudi="sblocca"],
  [data-ip-close]{width:40px !important;height:40px !important;top:10px !important;right:10px !important;font-size:20px !important;background:rgba(17,19,69,.10) !important}
}

/* Indice dei documenti legali: tre colonne da computer, due da tablet,
   una sola da telefono. */
@media (max-width:980px){ details ul[style*="columns:3"]{columns:2 !important} }
@media (max-width:620px){ details ul[style*="columns:3"]{columns:1 !important} }

/* Tabelle dei documenti legali: da telefono si legge tutto senza scorrere
   di lato, con le voci una sotto l'altra. */
@media (max-width:720px){
  [data-tabella-piani] table{min-width:0 !important}
  [data-tabella-piani] thead{display:none}
  [data-tabella-piani] tr{display:block;padding:12px 4px;border-top:1px solid rgba(17,19,69,.10)}
  [data-tabella-piani] tr:first-child{border-top:none}
  [data-tabella-piani] td{display:flex;gap:10px;border:none !important;padding:5px 12px !important}
  [data-tabella-piani] td:first-child{display:block;font-size:15px !important;padding-bottom:8px !important}
  [data-tabella-piani] td:not(:first-child)::before{content:attr(data-colonna);flex:none;min-width:96px;color:var(--blue-primary);font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
}

/* La nota sui canali: accanto allo schema da computer, sotto i comparatori
   di prezzo e centrata da telefono. */
[data-nota-canali-mobile]{display:none !important}
@media (max-width:720px){
  [data-nota-canali-desktop]{display:none !important}
  [data-nota-canali-mobile]{display:flex !important}
}

/* Lo spostamento a sinistra dell'immagine vale solo da computer;
   da telefono resta centrata. */
@media (min-width:961px){ [data-img-sellrapido]{transform:translateX(-26px)} }
@media (max-width:720px){ [data-img-sellrapido]{margin-top:0 !important} }

/* Da telefono i titoletti in stampatello sopra le sezioni sono piu' piccoli. */
@media (max-width:720px){
  .section-title__eyebrow{font-size:13px !important;letter-spacing:.06em !important}
}

/* Da telefono l'occhiello sopra il titolo della Home e' piu' piccolo. */
@media (max-width:720px){
  .hero__text .section-title__eyebrow{font-size:13px !important;letter-spacing:.04em !important}
}

/* Da telefono i titoli delle testate scendono un po': 32px erano pesanti
   su schermo stretto. Da computer restano come sono. */
@media (max-width:720px){
  h1,
  h1[style*="font-size:48px"],
  body h1[style*="font-size:48px"]{font-size:28px !important;line-height:1.15 !important}
}
@media (max-width:380px){
  h1,
  h1[style*="font-size:48px"],
  body h1[style*="font-size:48px"]{font-size:26px !important}
}

/* Solo da computer: nella testata l'occhiello sta un filo piu' vicino al
   titolo, e il testo introduttivo un filo piu' vicino al titolo. */
@media (min-width:961px){
  .hero__text .section-title__eyebrow{margin-bottom:4px !important}
  .hero__lead{margin-top:16px !important}
}

/* Testata della Home: elenco con le spunte sotto al testo introduttivo. */
.hero__punti{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:var(--font-sans)}
.hero__punti li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.95);font-size:16.5px;font-weight:600;line-height:1.35}
.hero__punti svg{flex:none}
.hero__lead--sotto{margin-top:16px}
@media (max-width:720px){ .hero__punti{gap:8px;margin-top:14px} .hero__punti li{font-size:15px} }

/* Catalogo: da computer piu' aria fra le schede dell'assaggio;
   da telefono restano vicine, lo spazio e' poco. */
@media (min-width:961px){ [data-griglia-assaggio]{gap:28px !important} }

/* Catalogo: la riga sotto il titolo sta su una riga sola da tablet in su;
   sul telefono non ci starebbe (servirebbero 6px di carattere). */
@media (min-width:760px){ [data-riga-unica]{white-space:nowrap} }

/* Le tre voci in cima (Mensile/Trimestrale/Annuale) restano su una riga
   sola anche da telefono: meno spazio fra loro e testo un po' piu' piccolo. */
@media (max-width:620px){
  #linguette{margin-bottom:18px !important}          /* meno stacco dalle schede */
  #linguette > div{gap:12px !important;flex-wrap:nowrap !important}
  #linguette [data-etichetta]{font-size:15.5px !important}
  #linguette [data-sconto-badge],
  #linguette button > b{font-size:10px !important;padding:3px 6px !important}
}
@media (max-width:380px){
  #linguette > div{gap:6px !important}
  #linguette [data-etichetta]{font-size:13px !important}
  #linguette button{padding:6px 2px !important}
  #linguette [data-sconto-badge],
  #linguette button > b{font-size:8.5px !important;padding:2px 4px !important}
}
/* Le mini linguette dentro le schede: su schermo stretto si stringono
   un po', cosi' le tre voci restano in riga. */
@media (max-width:1200px){
  [data-mini-periodo]{gap:2px !important;padding:2px !important}
  [data-mini-periodo] button{padding:6px 2px !important;font-size:10.5px !important}
}
@media (max-width:360px){
  /* telefoni molto stretti: voci ancora piu' compatte, restano in riga */
  [data-mini-periodo] button{font-size:9.5px !important;padding:6px 1px !important}
}
@media (max-width:720px){
  #home .hero{padding-bottom:38px}
  [data-badge-clienti] span{margin-left:0 !important;justify-content:center}
  /* immagine un po' piu' grande e piu' vicina alla scritta */
  [data-hero-immagine]{margin:14px -5% 0 !important;width:110% !important;max-width:110% !important}
  /* "Scegli B2Bdrop": immagine appena piu' contenuta e attaccata al testo */
  [data-immagine-ecommerce]{margin:-22px -2% !important}
  [data-immagine-ecommerce] img{width:104% !important;max-width:104% !important}
  /* meno stacco fra l'elenco e l'immagine, quando le due colonne si incolonnano */
  [data-riga-ecommerce]{gap:18px !important}
  /* "Migliaia di prodotti pronti": stessa misura degli altri titoli di sezione,
     che da telefono scendono a 27px mentre questo restava fisso a 34. */
  [data-titolo-catalogo]{font-size:var(--fs-h2) !important}
  /* lo schema dei canali di vendita: da telefono guadagna un po' di larghezza */
  [data-grafica-tecnologia]{width:112% !important;max-width:112% !important;margin:0 -6% !important}
  /* "La certezza di un partner reale": stessa aria delle altre immagini */
  [data-immagine-partner]{margin:0 -2% !important}
  [data-immagine-partner] > img{width:104% !important;max-width:104% !important}
  /* Le due etichette Google e Trustpilot: da telefono andavano a capo una
     sotto l'altra. Restringendole di poco ci stanno affiancate. */
  [data-etichette-recensioni]{flex-wrap:nowrap !important;gap:8px !important}
  [data-etichette-recensioni] > span{padding:7px 10px !important;font-size:12.5px !important;gap:6px !important;white-space:nowrap}
  [data-etichette-recensioni] svg{width:16px !important;height:16px !important}
}

@media (max-width:720px){
  /* Catalogo: le 7 categorie e i 4 prodotti "assaggio" da 4 a 2 per riga */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* Catalogo: a 2 per riga i titoli delle categorie ("Consumabili & Ufficio") non ci stanno a 19px */
  [style*="grid-template-columns:repeat(4,1fr)"] div[style*="font-size:19px"]{font-size:16px!important}
  /* Catalogo: le altre 21 categorie, 2 per riga invece di 1 */
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"]{grid-template-columns:repeat(2,1fr)!important}
  /* Catalogo, ritocchi per il telefono. */
  /* i riquadri delle categorie erano alti e stretti: piu' quadrati. Vale per
     le prime quattro, per il tasto "Vedi altre categorie" e per le 21 sotto. */
  [data-griglia-categorie] > div,
  [data-griglia-categorie] > button,
  [data-griglia-altre] > div{height:auto !important;min-height:0 !important;aspect-ratio:1/.92;padding:16px 16px 14px !important}
  /* "Un assaggio del catalogo": un prodotto per riga, si legge molto meglio */
  [data-griglia-assaggio]{grid-template-columns:1fr !important}
  /* i nomi dei marchi erano grandi come un titolo */
  [data-marchi] span{font-size:15px !important}
  /* gli stessi nomi, stessa misura, anche su Piani e Tariffe */
  [data-canali-piani] span{font-size:15px !important}
  /* l'immagine "un catalogo che lavora per te": piu' vicina al testo e un po' piu' grande */
  /* Da telefono i moduli sono gia' stretti: il tondo con l'icona in cima
     ruba spazio e non aggiunge nulla, quindi non si mostra. */
  [data-icona-modulo]{display:none !important}
  /* Come Funziona: lo schema dei canali e' disegnato a misure fisse (il tondo,
     le linee curve, le schede). Su schermo stretto non ci sta e si scomponeva.
     Rimpicciolendolo tutto insieme resta identico al disegno da computer. */
  /* Lo schema ha misure fisse: se la colonna si stringe, le linee curve non
     seguono i riquadri. Gli si dà la larghezza del disegno originale e lo si
     rimpicciolisce tutto insieme, come una fotografia. In piu' scende in fondo,
     sotto l'elenco dei comparatori di prezzo. */
  [data-schema-canali]{width:420px !important;zoom:.66;order:9;
    margin:28px auto 0 !important}
  /* meno vuoto fra il testo sull'all-in-one e i riquadri dei vantaggi */
  [data-testo-allinone]{margin-bottom:0 !important}
  [data-vantaggi-tecnici]{margin-top:14px !important}
  /* l'immagine della dashboard: un po' piu' grande */
  /* "in 3 mosse": i tondi con le icone erano grandi come su schermo largo */
  [data-icona-mossa]{width:52px !important;height:52px !important}
  [data-icona-mossa] svg{width:24px !important;height:24px !important}
  [data-immagine-dashboard]{margin:-26px -2% 0 !important}
  [data-immagine-dashboard] img{width:104% !important;max-width:104% !important}
  /* un po' d'aria sopra "Un catalogo che lavora per te", e meno stacco
     fra il testo e l'immagine */
  [data-riga-lavora]{gap:14px !important;margin-top:64px !important}
  [data-immagine-lavora]{margin-top:-26px !important}
  [data-immagine-lavora] img{width:106% !important;max-width:106% !important;margin-left:-3% !important}
  /* i paesi europei: due per riga invece di uno */
  /* Due paesi per riga: le pillole erano piu' larghe di mezzo schermo per via
     della bandiera e dell'imbottitura, quindi tornavano una per riga. */
  [data-paesi]{gap:10px !important}
  [data-paesi] > div{flex:0 1 calc(50% - 5px) !important;min-width:0 !important;
    box-sizing:border-box !important;gap:8px !important;padding:8px 12px 8px 8px !important}
  /* la bandiera e' un disegno con misure sue: va rimpicciolito insieme al cerchio,
     altrimenti esce dal tondo e sembra sfalsata */
  [data-paesi] > div > span:first-child{width:32px !important;height:32px !important}
  [data-paesi] svg{width:100% !important;height:100% !important}
  [data-paesi] > div > span:last-child{font-size:14px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Le colonne a due con min-width del prototipo si impilano. Colpisce:
     Catalogo "lavora per te" (480/380), Chi Siamo riquadro del team (380/320)
     e, con lo stesso stile, 4 blocchi in Home e 2 in Come Funziona: e' voluto,
     sotto i 720px una colonna da 300px non ci sta comunque. */
  [style*="flex:1 1 480px;min-width:300px"],
  [style*="flex:1 1 380px;min-width:280px"]{min-width:0!important;flex-basis:100%!important;justify-content:center!important}
  [style*="flex:1 1 380px;min-width:300px"],
  [style*="flex:1 1 320px;min-width:280px"]{min-width:0!important;flex-basis:100%!important}
  /* Catalogo: la foto "lavora per te" rientra (aveva margin-left:-64px) e si centra */
  img[style*="margin-left:-64px"]{margin-left:0!important}
  /* I riquadri con padding 44px 40px (Chi Siamo team, Catalogo, Piani) lasciano piu' spazio al testo */
  [style*="padding:44px 40px"]{padding:32px 22px!important}
  /* Attiva il piano: i tre passi "Account / Fatturazione / Pagamento" erano 3x120 + 2x70 = 500px */
  div[style="display:flex;flex-direction:column;align-items:center;gap:8px;width:120px"]{width:84px!important}
  div[style*="width:70px;height:3px"]{width:28px!important}
  /* Come Funziona: "+30 canali" e "I vantaggi tecnici", testo sopra e immagine sotto */
  [style*="grid-template-columns:minmax(0,1fr) minmax(420px,1.15fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(360px,1fr)"]{grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  /* Come Funziona: le pillole dei canali e i vantaggi, da 3 a 2 per riga */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* Il diagramma dei canali si vede intero: l'ingranaggio, le curve e le
     schede restano nelle posizioni del disegno originale, perche' il blocco
     tiene la sua larghezza e viene rimpicciolito tutto insieme (vedi
     [data-schema-canali] piu' sopra). */
  /* Contatti: il titolo della testata era su una riga sola (nowrap) e usciva dallo schermo */
  h1[style*="white-space:nowrap"]{white-space:normal!important;font-size:var(--fs-h1)!important}
  /* Piani e Tariffe: la tabella di confronto scorre nel suo riquadro */
  /* Confronto piani: su schermo stretto le quattro colonne si schiacciavano e
     non si leggeva niente. Ora la tabella tiene una larghezza minima e il
     riquadro si fa scorrere con il dito. */
  [data-espandibile="confronto"] > div{overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch}
  [data-espandibile="confronto"] [style*="grid-template-columns:2.2fr 1fr 1fr 1fr"]{min-width:620px}
  /* Il modulo del piano su misura era troppo stretto: il testo dentro i campi
     veniva tagliato. Guadagna spazio riducendo l'imbottitura e sbordando poco. */
  [data-modulo-misura]{padding:30px 22px !important;margin:0 -10px !important}
  /* Contatti: stesso trattamento del modulo su misura, e titolo della stessa
     misura (24px invece di 30). */
  [data-modulo-contatti]{padding:30px 22px !important;margin:0 -10px !important}
  /* Attivazione: stesso trattamento, i campi erano cosi' stretti che i
     segnaposti venivano tagliati. */
  [data-riquadro-attivazione]{padding:30px 16px !important;margin:0 -10px !important}
  /* Area riservata: le tre linguette non ci stavano in riga e uscivano dallo
     schermo. Vanno a capo, con "Il mio account" sulla seconda riga. */
  /* Il tondo "torna in cima": esiste solo da telefono, in basso a sinistra,
     e compare dopo un po' di scorrimento. */
  [data-torna-su]{display:flex;position:fixed;left:16px;bottom:20px;z-index:60;width:34px;height:34px;
    border-radius:50%;border:1px solid rgba(17,19,69,.10);background:#fff;color:var(--navy);
    box-shadow:0 8px 22px rgba(17,19,69,.18);display:flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .18s,transform .18s}
  [data-torna-su].is-visible{opacity:1;pointer-events:auto;transform:none}
  [data-schede-area]{flex-wrap:wrap !important;gap:8px !important}
  [data-schede-area] button{padding:10px 18px !important;font-size:13.5px !important}
  /* "Il mio account": stessa larghezza e imbottitura dei riquadri
     dell'attivazione, altrimenti i campi restano strettissimi. */
  [data-riquadro-account]{padding:30px 16px !important;margin:0 -10px !important}
  /* Le fatture: quattro colonne non ci stanno. Ogni riga diventa un blocco,
     con il pulsante PDF sotto, a tutta larghezza. */
  [data-intestazione-fatture]{display:none !important}
  [style*="grid-template-columns:1.4fr 1fr 1fr auto"]{grid-template-columns:1fr !important;
    gap:4px !important;padding:14px 16px !important}
  [style*="grid-template-columns:1.4fr 1fr 1fr auto"] > div{padding:0 !important}
  /* Gli stessi campi, comodi allo stesso modo, in tutti e quattro i moduli. */
  [data-riquadro-attivazione] .field input,
  [data-riquadro-attivazione] .field select,
  [data-riquadro-account] .field input,
  [data-riquadro-account] .field select,
  [data-modulo-contatti] .field input,
  [data-modulo-contatti] .field select,
  [data-modulo-contatti] textarea,
  [data-modulo-misura] .field input,
  [data-modulo-misura] .field select,
  [data-modulo-misura] textarea,
  [data-modulo-misura] select{font-size:14.5px !important;padding-left:12px !important;padding-right:12px !important}
  [data-titolo-contatti]{font-size:24px !important}
}
/* Telefoni stretti (molti Android sono larghi 360 punti, l'iPhone 13 390):
   alcune griglie e colonne hanno una larghezza minima di 280-320 punti che,
   tolti i margini della pagina, supera lo spazio disponibile. Il blocco esce
   a destra e la pagina sembra spostata (foto da Android, 22/09/2026).
   Qui la larghezza minima non supera mai lo spazio che c'e'. */
@media (max-width:720px){
  [style*="minmax(320px,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important}
  [style*="minmax(300px,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
  [style*="minmax(280px,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important}
  [style*="minmax(260px,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
  [style*="min-width:300px"],
  [style*="min-width:280px"]{min-width:0!important}
  /* attivazione: il riquadro del prezzo aveva 260 punti minimi e usciva dal bordo */
  [data-riepilogo]{min-width:0!important;width:100%;box-sizing:border-box}
  /* Chi Siamo: le tappe avevano un margine a destra pensato per la linea che
     le unisce da computer; incolonnate, spostava il testo a sinistra. */
  [data-tappe] > div{padding-right:0!important}
}
/* Telefoni molto piccoli (320 punti): lo schema dei canali di Come Funziona
   si rimpicciolisce ancora un po', altrimenti tocca il bordo destro. */
@media (max-width:359px){
  [data-schema-canali]{zoom:.55}
}

@media (max-width:460px){
  /* Come Funziona: le schede dei vantaggi (icona + testo) una per riga; le pillole restano a 2 */
  [style*="grid-template-columns:repeat(3,1fr);gap:14px"]{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}