/* ═══════════════════════════════════════════════════════════════════
   BANDA SUPERIORE COMUNE A TUTTO IL SITO (sito-testata.js la disegna)
   Al centro, su due righe: barra di ricerca e, sotto, il menu distribuito
   su tutta la sua larghezza (Come funziona · Prezzi · Redigi · Prezza).
   Ai lati, centrati in verticale nella banda: logo con slogan a sinistra,
   Accedi e Registrati a destra.
   La stessa in home, /come-funziona, /prezzi, /redigi, /prezza, guide,
   privacy e area riservata. --testata-h viene aggiornata dallo script con
   l'altezza reale, per chi deve sottrarla (gli hero a tutto schermo).
   ═══════════════════════════════════════════════════════════════════ */
:root{--testata-h:108px;
  /* LA COLONNA DEL SITO: tutto il contenuto e' largo quanto la barra di
     banda: dal bordo sinistro del logo alla fine della barra di ricerca.
     La calcola sito-testata.js lasciando circa 5 cm di margine per lato. */
  --colonna:1180px}
#cmi-testata{position:sticky;top:0;z-index:50;display:block;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid rgba(226,232,240,.9);font-family:'Inter',system-ui,-apple-system,sans-serif;color:#0f172a;
  line-height:1.2;font-size:16px;-webkit-font-smoothing:antialiased} /* valori propri: la banda e' identica qualunque sia il foglio della pagina */
#cmi-testata *{box-sizing:border-box}
/* La banda non eredita gli stili di pulsanti e campi delle singole pagine
   (es. l'area riservata, che da' a button e input padding e larghezza piena). */
#cmi-testata button{margin:0;width:auto;min-width:0;font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none}
#cmi-testata .ct-lente{padding:0}
#cmi-testata input{width:auto;margin:0;border:none;border-radius:0;box-shadow:none;background:transparent}
.ct-w{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,960px) minmax(230px,1fr);column-gap:24px;padding:0 24px}
.ct-logo{grid-column:1;grid-row:1/span 2;align-self:center;display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;
  padding:6px 0;justify-self:start;line-height:1}
.ct-logo img{height:32px;width:auto;display:block}
/* slogan: centrato sotto il logo, in corsivo e tra virgolette, blu scuro come "Computo" */
.ct-logo span{display:block;margin-top:5px;font-size:12px;font-weight:600;font-style:italic;letter-spacing:.2px;color:#0a1550;white-space:nowrap}
/* Accedi e Registrati, in alto a destra */
.ct-dx{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;display:flex;align-items:center;gap:16px}
/* Accedi: stesso blu sfumato delle voci del menu */
.ct-accedi{font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(100deg,#1d4ed8 0%,#0ea5e9 60%,#6366f1 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#1d4ed8;transition:opacity .15s}
.ct-accedi:hover{opacity:.78}.ct-accedi.on{font-weight:900}
.ct-registrati{font-weight:800;font-size:14px;line-height:1.2;padding:10px 20px;border-radius:10px;text-decoration:none;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);box-shadow:0 4px 16px rgba(14,165,233,.32)}
.ct-registrati:hover{filter:brightness(1.06)}
/* ricerca */
.ct-cerca{grid-column:2;grid-row:1;align-self:center;position:relative;padding-top:10px}
.ct-cerca form{display:flex;align-items:center;height:46px;border-radius:999px;background:#f1f5f9;border:1.5px solid transparent;
  transition:border-color .15s,background .15s,box-shadow .15s}
.ct-cerca form:focus-within{background:#fff;border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.ct-cerca svg{flex:0 0 auto;width:19px;height:19px;color:#64748b;margin:0 4px 0 18px}
.ct-cerca input{flex:1;min-width:0;height:100%;border:none;background:transparent;outline:none;font:inherit;font-size:15.5px;color:#0f172a;padding:0 12px}
.ct-cerca input::placeholder{color:#94a3b8}
.ct-cerca input::-webkit-search-cancel-button{display:none}
.ct-cerca .ct-x{border:none;background:none;cursor:pointer;color:#64748b;font-size:20px;line-height:1;padding:0 18px 2px 8px;display:none}
.ct-cerca.piena .ct-x{display:block}
.ct-ris{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #e2e8f0;border-radius:14px;
  box-shadow:0 18px 50px rgba(15,23,42,.16);padding:6px;max-height:min(70vh,520px);overflow:auto;display:none;z-index:70}
.ct-ris.aperte{display:block}
.ct-ris a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;color:inherit}
.ct-ris a:hover,.ct-ris a.sel{background:#eff6ff}
.ct-ris .t{font-size:14.5px;font-weight:700;color:#000C47;line-height:1.35}
.ct-ris .p{font-size:11.5px;font-weight:700;letter-spacing:.6px;color:#0185FD;text-transform:uppercase;margin-bottom:2px}
.ct-ris .s{font-size:13.5px;color:#475569;line-height:1.45;margin-top:3px}
.ct-ris mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
.ct-ris .vuoto{padding:14px;font-size:14px;color:#64748b}
/* ricerca intelligente con AI: in cima alla tendina */
.ct-ai:empty{display:none}
.ct-ai-chiedi{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:none;border-radius:10px;background:none;cursor:pointer;
  font:inherit;font-size:14.5px;color:#1e293b;text-align:left}
#cmi-testata .ct-ai-chiedi{width:100%;padding:11px 14px}
.ct-ai-chiedi:hover,.ct-ai-chiedi.forte{background:linear-gradient(100deg,rgba(29,78,216,.07),rgba(14,165,233,.09))}
.ct-ai-chiedi svg,.ct-ai-et svg{flex:0 0 auto;width:20px;height:20px;fill:#2563eb}
.ct-ai-chiedi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-ai-chiedi b{font-weight:800;color:#000C47}
.ct-ai-chiedi i{font-style:normal;font-size:11.5px;font-weight:700;color:#64748b;border:1px solid #cbd5e1;border-radius:6px;padding:2px 7px}
.ct-ai-risp{margin:4px 4px 8px;padding:14px 16px;border-radius:12px;background:linear-gradient(100deg,rgba(29,78,216,.06),rgba(14,165,233,.08));border:1px solid #dbeafe}
.ct-ai-et{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  background:linear-gradient(100deg,#1d4ed8 0%,#0ea5e9 60%,#6366f1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#1d4ed8}
.ct-ai-risp p{margin:8px 0 0;font-size:15px;line-height:1.55;color:#0f172a}
.ct-ai-link{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.ct-ris .ct-ai-link a{display:block;padding:8px 12px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;font-size:13.5px;color:#334155;line-height:1.35}
.ct-ris .ct-ai-link a:hover{border-color:#93c5fd;background:#fff}
.ct-ai-link a b{color:#0185FD;font-size:11px;letter-spacing:.5px;text-transform:uppercase;margin-right:6px}
.ct-ai-nota{margin-top:9px;font-size:11.5px;color:#94a3b8}
.ct-ai-risp.errore{font-size:14px;color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.ct-ai-righe{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ct-ai-righe i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#e2e8f0 0%,#f8fafc 50%,#e2e8f0 100%);background-size:200% 100%;animation:ct-luce 1.2s linear infinite}
.ct-ai-righe i:nth-child(2){width:85%}.ct-ai-righe i:nth-child(3){width:60%}
@keyframes ct-luce{from{background-position:200% 0}to{background-position:-200% 0}}
.ct-lista:not(:empty){border-top:1px solid #f1f5f9;padding-top:4px}
.ct-ai:empty+.ct-lista{border-top:none}
/* menu */
.ct-menu{grid-column:2;grid-row:2;display:flex;gap:6px;align-items:stretch;justify-content:space-between;margin:4px 0 0;padding:0 8px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ct-menu::-webkit-scrollbar{display:none}
.ct-menu>a{flex:0 0 auto;display:inline-flex;align-items:center;padding:10px 4px 11px;font:inherit;font-size:15px;
  font-weight:700;text-decoration:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap;
  /* stesso blu sfumato dei titoli del sito e del logo */
  background:linear-gradient(100deg,#1d4ed8 0%,#0ea5e9 60%,#6366f1 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#1d4ed8;transition:opacity .15s}
.ct-menu>a:hover{opacity:.78}
.ct-menu>a.on{font-weight:900;border-image:linear-gradient(90deg,#1d4ed8,#0ea5e9) 1;border-bottom:2.5px solid}
.ct-menu .corto{display:none}
/* su computer il menu non scorre mai: se e' piu' largo della colonna della
   ricerca sporge a destra, invece di slittare al clic su "Accedi" */
@media(min-width:761px){.ct-menu{overflow:visible}}
/* computer grandi: logo, ricerca e menu crescono con tutta la pagina
   (autoadattamento in sito-testata.js), non qui */
/* testo trovato dalla ricerca */
.ct-trovato{outline:3px solid #fde047;outline-offset:4px;border-radius:6px;transition:outline-color 1.4s ease}
.ct-trovato.spegni{outline-color:transparent}
/* telefono: logo e lente su una riga, menu sotto; la barra si apre con la lente */
.ct-lente{display:none}
@media(max-width:760px){
  #cmi-testata{position:relative}
  .ct-w{grid-template-columns:minmax(0,1fr) auto;padding:0 14px;column-gap:10px}
  .ct-logo{grid-row:1;padding:9px 0 3px}
  .ct-logo img{height:26px}
  .ct-logo span{font-size:10.5px;margin-top:3px}
  .ct-dx{grid-column:2;grid-row:1;gap:8px;padding-top:6px}
  .ct-registrati{display:none}
  .ct-accedi{color:#fff;-webkit-text-fill-color:#fff;font-weight:800;font-size:14px;padding:10px 18px;border-radius:10px;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);-webkit-background-clip:border-box;background-clip:border-box;box-shadow:0 4px 16px rgba(14,165,233,.32)}
  .ct-accedi:hover,.ct-accedi.on{color:#fff}
  .ct-lente{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:50%;border:none;background:#f1f5f9;color:#334155;cursor:pointer}
  .ct-lente svg{width:19px;height:19px}
  .ct-cerca{grid-column:1/-1;grid-row:2;display:none;padding-top:8px}
  .ct-cerca.mostra{display:block}
  .ct-cerca form{height:44px}
  .ct-menu{grid-column:1/-1;grid-row:3;margin:2px 0 0;padding:0;gap:0;justify-content:space-between}
  .ct-menu>a{font-size:14.5px;padding:9px 2px 10px}
  .ct-menu .lungo{display:none}.ct-menu .corto{display:inline}
}

/* ═══ COLONNA COMUNE: ogni sezione di ogni pagina allineata alla barra di
   ricerca (salvo logo e Accedi/Registrati, che restano ai lati) ═══ */
.sez-w,.cmi-sec-w,.cmi-fo-w,.cmi-banda-w,.cmi-loghi{max-width:var(--colonna)!important}
.pag-testa{max-width:calc(var(--colonna) + 64px)!important}
.contenitore{max-width:calc(var(--colonna) + 32px)!important}
.cmi-hero>div:not(.cmi-net):not(.cmi-piede-hero){max-width:var(--colonna)!important}
.cmi-ingressi{max-width:100%!important}
.cmi-hero .cmi-reg{margin-left:auto;margin-right:auto} /* larga quanto il titolo: la misura sito-testata.js */

/* ═══ SCHEDE PREZZI (pagina Prezzi e sezione prezzi di /prezza e /redigi):
   strette quanto la colonna, e la scheda Premium blu scuro con la scritta
   dorata; il listino personalizzato e' la prima voce e risalta ═══ */
.cmi-prezzi{gap:16px!important}
.cmi-pz{padding:24px 20px!important;gap:14px!important}
.cmi-pz .cifra{font-size:42px!important}
.cmi-pz li{font-size:15px!important;line-height:1.45!important}
.cmi-pz li b{color:#000C47;font-weight:800}
/* Premium: stessa scheda del singolo computo; d'oro solo l'etichetta
   PREMIUM e le cornici del listino personalizzato e del pulsante */
.cmi-pz.premium .tag{color:#000C47!important;background:linear-gradient(135deg,#f7e08a,#d4a72c 55%,#f2d06b)!important;letter-spacing:2px}
.cmi-pz.premium .nome{font-size:21px;font-weight:800;color:#000C47}
.cmi-pz.premium .cifra{font-size:34px!important;letter-spacing:-1px!important}
.cmi-pz.premium li.oro{margin:2px -8px 4px;padding:10px 12px 10px 34px;border-radius:10px;font-weight:800;color:#000C47!important;
  background:#fff;border:2px solid #d4a72c}
.cmi-pz.premium li.oro::before{left:12px;top:15px}
.cmi-pz .btn.oro{background:#fff;color:#000C47;border:2px solid #d4a72c;font-weight:800;box-shadow:none}
.cmi-pz .btn.oro:hover{background:#fffbeb}
/* nota grigia sotto le schede: piu' in basso, fuori dalle loro ombre */
.cmi-prezzi+.err-c+.nota-c,.cmi-prezzi~.nota-c{margin-top:34px!important}
/* "Sconto di lancio": stesso rosso-arancio del -50% delle schede */
.cmi-lancio .eti{background:linear-gradient(135deg,#dc2626,#f97316)!important;color:#fff!important}

/* ═══ BANDA SU COMPUTER E TABLET: tutto dentro la colonna del sito ═══
   Logo a sinistra (dove prima iniziava "Come funziona"), barra di ricerca
   accanto fino al margine destro, sotto la barra il menu con in fondo
   Accedi e Registrati. Il bordo sinistro del logo e la fine della barra
   sono le due linee a cui si allinea tutto il resto della pagina. */
.ct-m-accedi,.ct-m-registrati{display:none!important}
@media(min-width:761px){
  .ct-w{grid-template-columns:auto minmax(0,1fr)!important;column-gap:32px;max-width:var(--colonna-banda,var(--colonna));margin:0 auto;padding:0!important}
  .ct-logo{grid-column:1!important;grid-row:1/span 2!important;align-self:center;padding:8px 0}
  .ct-cerca{grid-column:2!important;grid-row:1!important}
  .ct-menu{grid-column:2!important;grid-row:2!important;padding:0!important;justify-content:space-between;align-items:center}
  .ct-dx{display:none!important}
  .ct-menu .lungo{display:inline}.ct-menu .corto{display:none}
  .ct-menu>a.ct-m-accedi{display:inline-flex!important}
  .ct-menu>a.ct-m-registrati{display:inline-flex!important;align-self:center;padding:8px 18px;margin:4px 0 6px;border-radius:10px;border:none;
    -webkit-text-fill-color:#fff;color:#fff;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);-webkit-background-clip:border-box;background-clip:border-box;
    font-weight:800;box-shadow:0 4px 14px rgba(14,165,233,.3)}
  .ct-menu>a.ct-m-registrati:hover{opacity:1;filter:brightness(1.06)}
  .ct-menu>a.ct-m-registrati.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #0ea5e9,0 4px 14px rgba(14,165,233,.3)}
}
/* Con l'accesso fatto (classe messa da sito-testata.js): Registrati sparisce
   e "Area personale" prende il suo posto e il suo aspetto di pulsante. */
html.cmi-collegato .ct-registrati,html.cmi-collegato .ct-menu>a.ct-m-registrati{display:none!important}
@media(min-width:761px){
  html.cmi-collegato .ct-menu>a.ct-m-accedi{align-self:center;padding:8px 18px;margin:4px 0 6px;border-radius:10px;border:none;
    -webkit-text-fill-color:#fff;color:#fff;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);-webkit-background-clip:border-box;background-clip:border-box;
    font-weight:800;box-shadow:0 4px 14px rgba(14,165,233,.3)}
  html.cmi-collegato .ct-menu>a.ct-m-accedi:hover{opacity:1;filter:brightness(1.06)}
  html.cmi-collegato .ct-menu>a.ct-m-accedi.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #0ea5e9,0 4px 14px rgba(14,165,233,.3)}
}
/* tablet: il menu va a tutta la colonna, sotto logo e barra */
@media(min-width:761px) and (max-width:1100px){
  .ct-logo{grid-row:1!important}
  .ct-menu{grid-column:1/-1!important;grid-row:2!important}
  .ct-menu .lungo{display:none}.ct-menu .corto{display:inline}
}

/* ═══ TRANSIZIONE TRA LE PAGINE ═══════════════════════════════════════
   Effetto "pagina di libro che si volta": la banda in alto resta ferma, la
   pagina vecchia si volta da destra verso sinistra e scopre la nuova. Prima c'era uno scatto perche' la pagina nuova compariva
   alla misura naturale e solo dopo l'autoadattamento (sito-testata.js) la
   ingrandiva: ora la banda nasce gia' alla scala giusta (ricordata dalla
   pagina precedente) e il contenuto resta nascosto finche' la scala non e'
   stata calcolata, poi entra con l'animazione. Se lo script non partisse,
   il contenuto compare comunque dopo 1,2 secondi. */
@view-transition{navigation:auto}
#cmi-testata{view-transition-name:cmi-testata}
::view-transition-group(cmi-testata){animation:none}
::view-transition-old(cmi-testata){display:none}
::view-transition-new(cmi-testata){animation:none}
/* EFFETTO LIBRO: la pagina vecchia e' il foglio che si volta. E' fissata
   sul bordo sinistro, il bordo destro si solleva verso chi guarda e poi
   passa a sinistra, scoprendo sotto la pagina nuova; un'ombra le scurisce
   man mano che gira. Lo stesso movimento (sempre da destra a sinistra) vale
   andando avanti e tornando indietro. Tutto avviene sulle istantanee della
   schermata, quindi e' identico su pagine corte e lunghe. */
::view-transition-image-pair(root){perspective:2200px;perspective-origin:100% 50%}
::view-transition-old(root){z-index:2;transform-origin:0 50%;backface-visibility:hidden;
  animation:cmi-libro-gira .72s cubic-bezier(.45,.05,.55,.95) both}
::view-transition-new(root){z-index:1;animation:cmi-libro-sotto .72s ease-out both}
@keyframes cmi-libro-gira{
  0%{transform:rotateY(0);filter:brightness(1);box-shadow:0 0 0 rgba(0,0,0,0)}
  60%{filter:brightness(.9)}
  100%{transform:rotateY(-100deg);filter:brightness(.7)}}
@keyframes cmi-libro-sotto{
  0%{filter:brightness(.82)}
  100%{filter:brightness(1)}}
html:not(.cmi-pronta) body>*:not(#cmi-testata):not(script):not(style){opacity:0;animation:cmi-comunque 0s 1.2s forwards}
@keyframes cmi-comunque{to{opacity:1}}
/* se la pagina nuova e' pronta un attimo dopo, il suo contenuto compare
   con una dissolvenza breve, senza movimenti che contraddicano il foglio */
html.cmi-entra body>*:not(#cmi-testata):not(script):not(style){animation:cmi-libro-compare .35s ease-out both}
@keyframes cmi-libro-compare{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:cmi-dissolvi .2s both}
  ::view-transition-new(root){animation:none}
}
@keyframes cmi-dissolvi{to{opacity:0}}
/* fine pagina: niente effetto elastico (su Mac e iPhone mostrava lo sfondo
   bianco sotto il piede blu, come se la pagina rimbalzasse) */
html,body{overscroll-behavior-y:none}

/* TELEFONO: la barra di ricerca sempre visibile sotto logo e Accedi; via la lente */
@media(max-width:760px){
  #cmi-testata .ct-lente{display:none!important}
  #cmi-testata .ct-cerca{display:block!important;padding-top:4px}
  #cmi-testata .ct-cerca form{height:42px}
  #cmi-testata .ct-cerca input{font-size:16px}
}

/* TELEFONO: iPhone ingrandisce la pagina quando si tocca un campo con il
   testo sotto i 16 px. Tutti i campi del sito (ricerca, moduli, recensioni,
   Premium, invito, area riservata) a 16 px: niente zoom. */
@media(max-width:760px){
  input,select,textarea{font-size:16px!important}
}

/* COMPUTER: logo piu' grande, alto quanto tutta la banda (barra di ricerca
   + menu); margini e allineamenti restano quelli della colonna. */
@media(min-width:1101px){
  .ct-logo{align-self:stretch!important;justify-content:center;padding:6px 0!important}
  .ct-logo img{height:50px}
  .ct-logo span{font-size:13px;margin-top:6px}
}

/* SCHEDE PREZZI: i pulsanti si colorano e vengono incontro passandoci sopra
   (pagina Prezzi e sezione prezzi di /redigi e /prezza) */
.cmi-pz .btn{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease}
.cmi-pz .btn:not([disabled]):not(.spento):hover,.cmi-pz .btn:not([disabled]):not(.spento):focus-visible{
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);color:#fff;border-color:transparent;transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 30px rgba(14,165,233,.40)}
.cmi-pz .btn.pieno:not([disabled]):hover{filter:brightness(1.06)}
.cmi-pz .btn.oro:hover,.cmi-pz .btn.oro:focus-visible{background:linear-gradient(135deg,#f7e08a,#d4a72c 55%,#f2d06b)!important;color:#000C47!important;
  border-color:#d4a72c!important;transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px rgba(212,167,44,.40)!important}
.cmi-pz .btn:active{transform:translateY(-1px) scale(1.01)}
@media(prefers-reduced-motion:reduce){.cmi-pz .btn:hover{transform:none!important}}
/* titolo principale per Google e lettori di schermo, non visibile */
.cmi-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}