/* Guerrisi Agency — stile bianco e nero con tocchi di arancione (ispirato a porsche.com).
   Sostituisce sobrio.css. Per tornare indietro: in index.html rimetti il link a sobrio.css al posto di questo. */

/* ---------- colori ---------- */
:root, html {
  --bg: #ffffff !important;
  --bg-2: #f4f4f4 !important;
  --surface: #ffffff !important;
  --surface-2: #f4f4f4 !important;
  --line: rgba(0, 0, 0, .12) !important;
  --line-2: rgba(0, 0, 0, .35) !important;
  --text: #0a0a0a !important;
  --ink: #0a0a0a !important;
  --ga: #d45300 !important;
  --ga-ink: #ffffff !important;
  --ga-muted: #5c5c5c !important;
  --r: 2px !important;
  --r-lg: 4px !important;
  --f-display: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif !important;
  --f-body: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif !important;
  scroll-behavior: auto !important;
}
html body { background: #fff !important; color: #0a0a0a !important; }

/* fasce nere: tutto ciò che sta dentro prende i colori scuri */
header.nav, .hero, .cs, .contact, footer.footer, .cookie, .menu__panel {
  --bg: #000000 !important;
  --bg-2: #0d0d0d !important;
  --surface: #111111 !important;
  --surface-2: #1a1a1a !important;
  --line: rgba(255, 255, 255, .16) !important;
  --line-2: rgba(255, 255, 255, .4) !important;
  --text: #ffffff !important;
  --ink: #ffffff !important;
  --ga: #ff6b1a !important;
  --ga-muted: #a8a8a8 !important;
  --ga-ink: #000000 !important;
  background: #000 !important;
  color: #fff !important;
}

/* ---------- niente effetti ---------- */
*, *::before, *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition-duration: .15s !important;
}
.js .reveal, .reveal, .w, small { opacity: 1 !important; translate: none !important; }
.hero__glow, .hero__grid-bg, .contact__glow, .summary__glow,
.ticker, .float-chip, .footer__giant, .hero__tag, .ga-live__badge { display: none !important; }

/* testi con sfumatura -> colore pieno arancione */
.accent, .fire, .cs__title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ga) !important;
}

/* ---------- tipografia: grande, nera, compatta ---------- */
html body h1, html body h2, html body h3, html body .h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: .98 !important;
}
.hero h1 { font-size: clamp(2.8rem, 6vw, 6rem) !important; }
html body .h2, html body section h2 { font-size: clamp(2.2rem, 5.4vw, 4.6rem) !important; }
.label, .mono { letter-spacing: .12em !important; }

/* ---------- barra in alto: nera, a tutta larghezza ---------- */
header.nav, header.nav.is-hidden { translate: none !important; transition: none !important; top: 0 !important; padding-inline: 0 !important; }
html body .nav__bar {
  width: 100% !important; max-width: none !important;
  height: 64px !important;
  padding: 0 var(--gutter, 24px) !important;
  background: #000 !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 0 !important;
}
.nav__mark {
  width: 28px !important; height: 34px !important;
  background: url(/logo.png) center / contain no-repeat !important;
  border-radius: 0 !important;
  font-size: 0 !important; color: transparent !important;
}
.nav__logo { gap: 12px !important; color: #fff !important; }
.nav__logo em { color: #a8a8a8 !important; }
.nav__links a, .nav a { color: #e8e8e8 !important; }
.nav__links a:hover, .nav a:hover { color: #fff !important; }

/* ---------- pulsanti: rettangolari ---------- */
.btn, button.btn, a.btn, .ga-live__crea, .ga-live__wa, .ga-live__apri, .ga-contatti__tel, .ga-contatti__wa {
  background-image: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}
/* principale: nero su bianco, bianco su nero */
.btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass),
.ga-live__crea, .ga-live__wa {
  background-color: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
  color: #fff !important;
}
.btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass):hover { background-color: var(--ga) !important; border-color: var(--ga) !important; }
.hero .btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass),
.contact .btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass),
.cs .btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass),
.ga-live__crea, .ga-live__wa {
  background-color: #fff !important; border-color: #fff !important; color: #000 !important;
}
.hero .btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass):hover,
.contact .btn:not(.btn--ghost):not(.btn-ghost):not(.btn--secondary):not(.btn--glass):hover { background-color: var(--ga) !important; border-color: var(--ga) !important; color: #fff !important; }
/* l'unico bottone arancione: preventivo in barra */
html body header.nav a.btn.btn--accent.nav__cta.magnetic, html body header.nav .btn.nav__cta.btn--sm { background-color: var(--ga) !important; border-color: var(--ga) !important; color: #fff !important; }
/* secondari: bordo */
.btn--ghost, .btn-ghost, .btn--secondary, .btn--glass {
  background-color: transparent !important; color: inherit !important; border: 1px solid currentColor !important;
}

/* ---------- riquadri: bianchi, bordo sottile, spigoli vivi ---------- */
.chip-link, .lab, .lab__stage, .segmented, .checklist, .plan, .qopt, .summary,
.qx-preview, .review, details.reveal, .tile, .cs__sticky, .cs__script, .mock__caption {
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  border-radius: 2px !important;
  color: #0a0a0a !important;
}
.hero .chip-link, .cs .cs__sticky, .cs .cs__script, .contact .tile, .contact .chip-link { background-color: #111 !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.plan:hover, .tile:hover, .review:hover { border-color: #0a0a0a !important; }
.ga-live__prompt, .ga-live__mic {
  background-image: none !important; background-color: #111 !important;
  border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 4px !important; color: #fff !important;
}
.cookie { background-image: none !important; border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 4px !important; }
.site__burger, .chip-link { border-radius: 2px !important; }

/* etichette: nere, con una nota arancione */
.tag, .plan__head .tag, .log__ver .tag {
  background-color: #0a0a0a !important; border-color: #0a0a0a !important; color: #fff !important; border-radius: 2px !important;
}
.hero .tag, .cs .tag, .contact .tag { background-color: #fff !important; color: #000 !important; border-color: #fff !important; }

/* sezioni a righe sottili */
.section { border-top: 1px solid rgba(0, 0, 0, .1); }
.why, .reviews, .haccp { background: var(--bg-2) !important; }
.section .label span, .section .label b, .label__n { color: var(--ga) !important; }

/* ---------- footer nero con logo ---------- */
footer.footer { border-top: 0 !important; }
footer.footer .footer__giant {
  display: block !important;
  font-size: 0 !important; color: transparent !important;
  width: 64px; height: 80px; margin: 48px 0 8px;
  background: url(/logo.png) left center / contain no-repeat;
}
footer.footer a { color: #d6d6d6 !important; }
footer.footer a:hover { color: #fff !important; }

/* ---------- correzioni di leggibilità ---------- */
.section-head__text, .services__lead, .haccp__lead, .statement__sub { color: #5c5c5c !important; }

/* testi che avevano il colore crema scritto a mano: sulle parti bianche diventano neri */
.price-block > p, .qx-preview__foot p, .qx-chip, blockquote, .review__nome, .review__fonte,
.checklist li, .checklist li *, .plan li, .faq p, .faq summary, .log__body p, .steps li p {
  color: #1a1a1a !important;
}
.price-block > p span, .review__fonte { color: #5c5c5c !important; }
.qx-chip { border-color: rgba(0,0,0,.25) !important; background: transparent !important; }

/* riquadri scuri: nero neutro e testo bianco */
.work__stage, .device, .qx-preview__frame, .mock, .mock__screen, .mock__bar, .ga-live__cornice, .ga-live__barra, .ga-live__schermo, .qx-bar {
  background-color: #0a0a0a !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.work__stage *, .qx-bar strong, .qx-bar span { color: #fff; }
.work__stage .accent, .qx-bar .qx-bar__cta { color: #fff !important; }
.mock__url { color: #bdbdbd !important; }

/* etichetta di sezione e numeri: arancione sobrio */
.label .mono, .steps .mono, .qopt em, .qstep__title .mono { color: var(--ga) !important; }

/* spigoli vivi anche nei grandi riquadri */
.contact__card, .contact__map, .work__card, .work__stage, .cs__browser, .cs__phone, .device, .mock, .qx-preview__frame, .plans .plan, .review {
  border-radius: 4px !important;
}
.contact__card { background-image: none !important; background-color: #0a0a0a !important; border: 1px solid rgba(255,255,255,.18) !important; }
.contact__map { filter: grayscale(1) contrast(1.05); }

/* niente cursore personalizzato (pallino e cerchio): resta il cursore normale */
.cursor, .cursor__dot, .cursor__ring { display: none !important; }
html, body, a, button { cursor: auto !important; }
a, button, [role="button"], summary, label, select { cursor: pointer !important; }
/* i bottoni non si spostano più seguendo il mouse */
.magnetic { translate: none !important; }