/* Barra di navigazione e pulsanti principali, uguali in home, /diagnosi-gratuita e /chi-sono.
   «Diagnosi gratuita» è il pulsante primario (gradiente rosso-oro, pillola), «Contattami» il
   secondario (bordo inchiostro, si riempie al passaggio). Presenti in tutte le pagine e nell'hero della home. Terziario: pillola tenue per le azioni
   di contorno. Nessuno stile inline: le pagine con CSP rigida lo caricano come file. */

.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 8px 12px; border-bottom: 1px solid rgba(20, 16, 16, .06); }
/* Sfondo e sfocatura su uno pseudo-elemento: la barra non diventa così il riferimento degli
   elementi fissi al suo interno (barra dei pulsanti in basso sul telefono). */
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250, 248, 243, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.barra-interno { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 44px; }
.barra .marchio { font-family: "Syne", system-ui, sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.02em; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 2px;
  background: linear-gradient(135deg, #C8102E, #F0C100); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-decoration: none; cursor: pointer; }
.barra-link { display: flex; align-items: center; gap: 0 6px; font-size: 12.5px; min-width: 0; }
.voce { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 2px; text-decoration: none; font-weight: 500; color: #141010; opacity: .5; transition: opacity .2s; white-space: nowrap; }
.voce:hover, .voce[aria-current="page"] { opacity: 1; }
.voce[aria-current="page"] { font-weight: 600; }
/* Selettore di lingua (IT | EN): area toccabile piena (44 px) e, dentro, una pillola sottile che lo distingue dal menu. */
.voce.lingua { position: relative; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; opacity: .7; }
.voce.lingua::before { content: ""; position: absolute; inset: 8px 3px; border: 1px solid rgba(20, 16, 16, .24); border-radius: 100px; }
.voce.lingua:hover { opacity: 1; }
.voce.lingua:hover::before { border-color: rgba(20, 16, 16, .6); }
.barra-azioni { display: flex; align-items: center; gap: 6px; margin-left: 2px; }
.barra .cta { font-size: 12px; padding: 8px 10px; }
@media (min-width: 481px) {
  .barra { padding: 10px 22px; }
  .barra-interno { gap: 8px; }
  .barra .marchio { padding: 0 4px; }
  .barra-link { gap: 0 14px; font-size: 14px; }
  .voce { padding: 0 4px; }
  .barra-azioni { gap: 8px; margin-left: 6px; }
  .barra .cta { font-size: 14px; padding: 9px 18px; }
}
@media (min-width: 861px) { .barra { padding: 12px 48px; } .barra-link { gap: 0 24px; } .barra-azioni { gap: 10px; margin-left: 8px; } .barra .cta { font-size: 14.5px; padding: 10px 22px; } }

/* ---------- Pulsanti principali ---------- */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 24px; border: 1.5px solid transparent; border-radius: 100px;
  font-family: "Manrope", system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s cubic-bezier(.215, .61, .355, 1), box-shadow .3s cubic-bezier(.215, .61, .355, 1), background-color .2s, color .2s, border-color .2s; }
.cta-primario { background: linear-gradient(135deg, #C8102E, #F0C100); color: #fff; box-shadow: 0 10px 24px -12px rgba(200, 16, 46, .55); }
.cta-primario:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(200, 16, 46, .6); }
.cta-primario:active { transform: translateY(0) scale(.97); box-shadow: 0 6px 14px -10px rgba(200, 16, 46, .5); }
.cta-secondario { background: transparent; color: #141010; border-color: rgba(20, 16, 16, .85); }
.cta-secondario:hover { background: #141010; color: #FAF8F3; border-color: #141010; transform: translateY(-2px); }
.cta-secondario:active { transform: translateY(0) scale(.97); }
.cta-terziario { background: rgba(20, 16, 16, .06); color: #141010; font-weight: 600; }
.cta-terziario:hover { background: rgba(20, 16, 16, .11); }
.cta-terziario:active { transform: scale(.97); }
.cta:focus-visible { outline: 3px solid #C8102E; outline-offset: 3px; }
/* Nella pagina del modulo «Diagnosi gratuita» è la pagina corrente, non un invito: non compare, a
   nessuna larghezza. Resta solo «Contattami». */
body.pagina-modulo .cta-primario[aria-current="page"] { display: none; }

/* Telefono (fino a 480 px): barra fissa in basso con i due pulsanti, sempre a portata di pollice.
   Nella pagina del modulo i comandi del modulo sono già fissi in basso: lì niente barra (mai due barre
   sovrapposte), «Contattami» resta in alto e «Diagnosi gratuita» (pagina corrente) non si ripete. */
@media (max-width: 480px) {
  .barra-azioni { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; margin: 0; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 248, 243, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(20, 16, 16, .06); }
  .barra-azioni .cta { flex: 1 1 0; font-size: 14.5px; min-height: 48px; padding: 10px 12px; }
  .barra-azioni .cta-primario { flex-grow: 1.15; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.pagina-modulo { padding-bottom: 0; }
  body.pagina-modulo .barra-azioni { position: static; padding: 0; background: none; border: 0; margin-left: 2px; gap: 6px; }
  body.pagina-modulo .barra-azioni .cta { flex: none; font-size: 12px; min-height: 44px; padding: 8px 10px; }
  /* Nella pagina del modulo «Contattami» resta in alto: con quattro voci non entra, «Prezzi» e «Guide» passano al piè di pagina. */
  body.pagina-modulo .voce-extra { display: none; }
}
/* Tra 481 e 700 px (tablet piccoli in verticale) la barra non contiene quattro voci più i due pulsanti:
   «Prezzi» e «Guide» restano raggiungibili dal piè di pagina e dalle pagine servizio. */
@media (min-width: 481px) and (max-width: 700px) { .voce-extra { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta, .voce { transition: none; } .cta:hover, .cta:active { transform: none; } }

/* ---------- Piè di pagina: mappa del sito ----------
   Uguale su tutte le pagine (home compresa): i collegamenti a servizi, guide, prezzi e contatti, così
   ogni pagina è raggiungibile in un clic e con lo stesso nome ovunque. Sopra la riga con © e P.IVA. */
.piede .piede-mappa { max-width: 1100px; margin: 0 auto; padding: 36px 22px 8px; display: grid; gap: 26px 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.piede .piede-mappa > div { display: grid; align-content: start; gap: 2px; padding: 0; max-width: none; font-size: 14px; color: rgba(20, 16, 16, .78); }
.piede .piede-mappa strong { font-family: "Syne", system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #141010; margin-bottom: 8px; }
.piede .piede-mappa a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: inherit; }
.piede .piede-mappa a:hover { text-decoration: underline; text-underline-offset: 3px; color: #141010; }
.piede .piede-mappa span { min-height: 40px; display: inline-flex; align-items: center; color: rgba(20, 16, 16, .6); }
@media (min-width: 861px) { .piede .piede-mappa { padding: 44px 48px 12px; } }