/* ===========================================================================
   goEnergy · Components globali
   Ordine proprietà: posizionamento → box model → tipografia → visivo → varie.
   =========================================================================== */

/* === SPRITE & ICONE === */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: currentColor; }

/* === IMMAGINI ROTONDE (utility richiesta) ===
   Applicare la classe .img-round a qualsiasi <img> per renderla un cerchio
   perfetto a prescindere dalle proporzioni del file sorgente:
   - aspect-ratio:1 forza il riquadro quadrato
   - object-fit:cover ritaglia senza deformare
   - border-radius:50% disegna il cerchio
   Il wrapper .img-round-frame aggiunge la cornice bianca come nella grafica. */
.img-round {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.img-round-frame {
  padding: clamp(7px, 1.1vw, 13px);
  background-color: var(--color-bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
}

/* === BOTTONI === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-align: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; }

.btn--primary {
  color: var(--color-text-inverted);
  background-color: var(--color-cta);
}
.btn--primary:hover { background-color: var(--color-cta-hover); }

.btn--accent {
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
}
.btn--accent:hover { background-color: var(--color-accent-dark); }

.btn--ghost {
  color: var(--color-text-inverted);
  background-color: transparent;
  border: 2px solid currentColor;
}
.btn--ghost:hover { color: var(--color-accent); }

.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }

/* === NAVBAR (trasparente in overlay sull'hero; sfondo solido allo scroll) === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background-color: transparent;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.navbar.is-solid {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 84px;
}
.navbar__logo { flex-shrink: 0; }
.navbar__logo img { height: 44px; width: auto; }

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.navbar__pill {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverted);
  background-color: var(--color-primary-deep);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-base);
}
.navbar__pill:hover { background-color: var(--color-primary); }

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}
.navbar__links a {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  transition: color var(--t-fast);
}
.navbar__links a:hover,
.navbar__links a[aria-current="page"] { color: var(--color-cta-hover); }

/* Hamburger - sempre visibile (desktop + mobile), come da grafica */
.navbar__toggle {
  display: inline-flex;
  flex-shrink: 0;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverted);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
}
.navbar__toggle:hover { background-color: var(--color-primary-deep); }
.navbar__toggle .icon { width: 28px; height: 28px; }

/* === NAV DRAWER (off-canvas) === */
body.no-scroll { overflow: hidden; }

.nav-drawer { position: fixed; inset: 0; z-index: var(--z-modal); }
/* Da aperto il drawer deve stare SOPRA la navbar (che è fixed a --z-nav) */
.nav-drawer.is-open { z-index: var(--z-top); }
.nav-drawer[hidden] { display: none; }

.nav-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 60, 98, 0.55);
  opacity: 0;
  transition: opacity var(--t-base);
}
.nav-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: min(380px, 86vw);
  height: 100%;
  padding: var(--space-8) var(--space-8) var(--space-12);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer__overlay { opacity: 1; }
.nav-drawer.is-open .nav-drawer__panel  { transform: none; }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
}
.nav-drawer__close:hover { background-color: var(--color-bg-secondary); }

.nav-drawer__links { display: flex; flex-direction: column; }
.nav-drawer__links a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.nav-drawer__links a:hover { color: var(--color-primary); padding-left: var(--space-2); }
.nav-drawer__cta { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__overlay, .nav-drawer__panel { transition: none; }
}

/* === CARD CREMA (benefit) === */
.benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
}
.benefit-card__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-dark);
}
.benefit-card__small {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.benefit-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: var(--weight-extra);
  line-height: var(--leading-tight);
  color: var(--color-primary-dark);
}

/* === CARD RECENSIONE === */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
}
.review-card__logo { height: 28px; width: auto; }
.review-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.review-card__author {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
}
.stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }

/* === BADGE GOOGLE (hero) - biglietto da visita, reso più evidente === */
.rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.rating__logo { height: 32px; width: auto; }
.rating__score {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  color: var(--color-primary-dark);
}
.rating .stars svg { width: 24px; height: 24px; }
.rating__count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

/* === FORM === */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
}
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text); /* esplicito: gli input ereditavano il bianco dei blocchi con testo chiaro */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--color-text-muted); }
.input option { color: var(--color-text); background-color: var(--color-bg); }
.input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(32, 176, 168, 0.25);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.consent input { margin-top: 3px; accent-color: var(--color-primary); }
.consent__req {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-inverted);
  background-color: var(--color-primary-dark);
  border-radius: var(--radius-full);
}
.consent a { color: var(--color-primary-dark); font-weight: var(--weight-semibold); text-decoration: underline; }

/* === CAROUSEL === */
.carousel { position: relative; }
.carousel__viewport {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport > * { scroll-snap-align: start; }

.carousel__controls { display: flex; gap: var(--space-3); }
.carousel__btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: background-color var(--t-base), color var(--t-base), opacity var(--t-base);
}
.carousel__btn:hover { color: var(--color-text-inverted); background-color: var(--color-primary); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__btn:disabled:hover { color: var(--color-primary-dark); background-color: transparent; }
.carousel__btn .icon { width: 20px; height: 20px; }

/* === FOOTER === */
.footer {
  color: var(--color-text-inverted);
  background-image: var(--gradient-footer);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--space-12) var(--space-8);
  padding-block: var(--space-16) var(--space-12);
}
.footer__col h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-footer-title);
}
.footer__col li + li { margin-top: var(--space-3); }
.footer__col a {
  font-weight: var(--weight-semibold);
  transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--color-accent); }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-6); }
.footer__brand img { height: 38px; width: auto; }

.footer__social { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  transition: background-color var(--t-base), transform var(--t-fast);
}
.footer__social a:hover { background-color: var(--color-accent-dark); transform: translateY(-2px); }
.footer__social svg { width: 22px; height: 22px; }

.footer__legal {
  padding-block: var(--space-8) var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer__legal img { height: 40px; width: auto; margin-bottom: var(--space-5); }
.footer__legal p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.85);
}
.footer__legal p + p { margin-top: var(--space-2); }

/* === ANIMAZIONI (IntersectionObserver) === */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
[data-animate].is-visible { opacity: 1; transform: none; }
[data-animate="fade"]        { transform: none; }
[data-animate="slide-left"]  { transform: translateX(-32px); }
[data-animate="slide-right"] { transform: translateX(32px); }
[data-animate="scale"]       { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   RESPONSIVE - navbar / footer
   =========================================================================== */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__social { flex-direction: row; align-items: center; }
  .footer__social { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  /* Su mobile i link inline spariscono: la navigazione passa dal drawer */
  .navbar__menu { display: none; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__brand { flex-wrap: wrap; }
}

/* ===========================================================================
   SEZIONI CONDIVISE (riusate da più pagine)
   =========================================================================== */

/* === TESTIMONIALS (intestazione centrata + carosello recensioni) === */
.testimonials .section-head { margin-bottom: var(--space-10); }
.reviews__viewport { padding-bottom: var(--space-2); }
.reviews__viewport > .review-card { flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); }
.carousel__controls--center { justify-content: center; margin-top: var(--space-8); }

/* === SUPPLIERS (carosello con frecce laterali) === */
.suppliers__carousel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.suppliers__viewport { flex: 1; align-items: center; padding-block: var(--space-2); }
.suppliers__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 18vw, 190px);
  height: 96px;
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.suppliers__item:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.suppliers__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === CTA BAND === */
.cta-band { text-align: center; padding-block: var(--section-y); }
.cta-band--flush { padding-top: 0; } /* usa solo il padding inferiore */
.cta-band + .section { padding-top: 0; }

/* === NEWSLETTER === */
.newsletter__box {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12);
  background-color: var(--color-accent);
  border-radius: var(--radius-lg);
}
.newsletter__intro, .newsletter__form { min-width: 0; }
.newsletter__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-dark);
}
.newsletter__sub { font-size: var(--text-lg); color: var(--color-primary-dark); }
.newsletter__big {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.newsletter__form { display: flex; flex-direction: column; gap: var(--space-4); }
.newsletter__row { display: flex; gap: var(--space-3); min-width: 0; }
.newsletter__row .input { flex: 1; min-width: 0; }

/* === RESPONSIVE - sezioni condivise === */
@media (max-width: 1024px) {
  .newsletter__box { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .reviews__viewport > .review-card { flex: 0 0 calc((100% - var(--space-6)) / 2); }
}
@media (max-width: 768px) {
  .reviews__viewport > .review-card { flex: 0 0 100%; }
  .newsletter__box { padding: var(--space-6); }
  .newsletter__row { flex-direction: column; }
}

/* === DECORO ANELLI BRAND sulle aree teal di intestazione (hero/subhero/contatti) ===
   Due anelli sfumati del marchio goEnergy che sbordano dagli angoli,
   sopra il gradiente di base. Lo sfondo è clippato al box: nessun overflow. */
.hero, .subhero, .contact, .phero {
  /* 2 cerchi separati: navy in alto-destra, teal in basso-sinistra.
     Centro del cerchio esattamente nell'angolo (offset = metà dimensione)
     così è visibile solo un quarto del cerchio, uguale su tutte le pagine. */
  background-image: var(--deco-ring-a), var(--deco-ring-b), var(--gradient-header);
  background-repeat: no-repeat;
  background-position:
    right -430px top -430px,
    left -330px bottom -330px,
    center;
  background-size:
    860px,
    660px,
    cover;
}
@media (max-width: 700px) {
  .hero, .subhero, .contact, .phero {
    background-position:
      right -280px top -280px,
      left -220px bottom -220px,
      center;
    background-size: 560px, 440px, cover;
  }
}

/* === SUB-HERO (page hero a testo centrato, condiviso) === */
.subhero {
  position: relative;
  overflow: hidden;
  color: var(--color-text-inverted);
  text-align: center;
}
.subhero__inner { padding-block: calc(var(--navbar-h) + var(--space-12)) var(--space-24); }
.subhero__title {
  font-size: var(--text-4xl);
  text-transform: uppercase;
  color: var(--color-text-inverted);
}
.subhero__lead {
  max-width: 62ch;
  margin: var(--space-6) auto 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* === FEATURE (riga icona + testo, condiviso) === */
.feature { display: flex; align-items: center; gap: var(--space-4); }
.feature__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px; height: 56px;
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}
.feature__icon .icon { width: 26px; height: 26px; }
.feature__text {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
}

/* === ENFASI "chiavi in mano" e simili nelle feature === */
.feature__text strong { font-weight: var(--weight-extra); }

/* === POPOVER (spiegazioni componenti) === */
.popovers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.popover { position: relative; }
.popover__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  transition: background-color var(--t-base);
}
.popover__trigger:hover,
.popover__trigger[aria-expanded="true"] { background-color: var(--color-accent-dark); }
.popover__trigger .icon { width: 16px; height: 16px; }
.popover__panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  width: max(240px, 100%);
  max-width: 300px;
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.popover__panel[hidden] { display: none; }

/* === FEED INSTAGRAM (post che scorrono) === */
.instafeed__viewport { margin-top: var(--space-10); padding-bottom: var(--space-2); }
.instafeed__viewport > li { flex: 0 0 clamp(220px, 70vw, 280px); }
.instafeed__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.instafeed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.instafeed__item:hover img { transform: scale(1.05); }
.instafeed__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--color-text-inverted);
  background-color: rgba(9, 60, 98, 0.55);
  border-radius: var(--radius-full);
}
.instafeed__badge .icon { width: 18px; height: 18px; }
.instafeed__cta { display: flex; justify-content: center; margin-top: var(--space-8); }

/* === OVERLAY "PRODOTTI E SERVIZI" (stile Tabo) === */
.products-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-block: var(--space-5) var(--space-16);
  color: var(--color-text-inverted);
  background-image: var(--deco-ring-a), var(--deco-ring-b), var(--gradient-header);
  background-repeat: no-repeat;
  background-position: right -430px top -430px, left -330px bottom -330px, center;
  background-size: 860px, 660px, cover;
  background-attachment: scroll, scroll, fixed;
}
.products-overlay[hidden] { display: none; }

.products-overlay__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}
.products-overlay__back {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverted);
}
.products-overlay__back:hover { text-decoration: underline; }
.products-overlay__close {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  color: var(--color-primary-dark);
  background-color: var(--color-bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base);
}
.products-overlay__close:hover { transform: scale(1.06); }
.products-overlay__close .icon { width: 26px; height: 26px; }

.products-overlay__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-10);
}
.products-overlay__title {
  margin-bottom: var(--space-12);
  text-align: center;
  font-size: var(--text-4xl);
  text-transform: uppercase;
  color: var(--color-text-inverted);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}
.product-card { display: flex; flex-direction: column; gap: var(--space-5); }
.product-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base);
}
.product-card__media img { width: 100%; height: 100%; object-fit: fill; display: block; }
.product-card:hover .product-card__media,
.product-card:focus-visible .product-card__media { transform: translateY(-6px) scale(1.02); }
.product-card__label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverted);
}

@media (max-width: 900px) {
  .products-grid { grid-template-columns: 1fr; max-width: 420px; gap: var(--space-8); }
  .product-card__media { aspect-ratio: 16 / 10; }
}

/* ===========================================================================
   COMPONENTI PAGINE PRODOTTO (Piccoli Impianti / Industriali / Condominio)
   =========================================================================== */

/* === PRODUCT HERO (teal split, sfondo come la Home) === */
.phero { position: relative; overflow: hidden; color: var(--color-text-inverted); }
.phero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  padding-block: calc(var(--navbar-h) + var(--space-10)) var(--space-16);
}
.phero__title { font-size: var(--text-4xl); color: var(--color-text-inverted); }
.phero__lead {
  max-width: 52ch;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}
.phero__rating { margin-top: var(--space-6); }
.phero__list { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.phero__list .feature__text { color: var(--color-text-inverted); }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.phero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.phero__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }

/* === LISTA ICONE A DUE COLONNE === */
.icon-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-12);
  margin-top: var(--space-16);
}
.icon-cols ul { display: flex; flex-direction: column; gap: var(--space-5); }

/* === CARD SOLUZIONE (icona + titolo + testo) === */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-16);
}
.solution-card {
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.solution-card__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: var(--space-5);
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}
.solution-card__icon .icon { width: 28px; height: 28px; }
.solution-card h3 { margin-bottom: var(--space-3); }
.solution-card p { color: var(--color-text-muted); }

/* === SPLIT (testo + immagine alternati) === */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--space-8), 4vw, var(--space-16)); }
.split + .split { margin-top: var(--section-y); }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.split__body h2 { margin-bottom: var(--space-3); }
.split__lead { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-4); }
.split__body p { color: var(--color-text-muted); }
.split__body p + p { margin-top: var(--space-4); }
.split--reverse .split__media { order: 2; }

/* === STEPS (elenco numerato metodo) === */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); counter-reset: step; }
.step {
  position: relative;
  padding: calc(var(--space-6) + 48px) var(--space-6) var(--space-6);
  text-align: center;
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 50%; top: var(--space-5);
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-family: var(--font-display); font-weight: var(--weight-extra);
  color: var(--color-text-inverted);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* === LONGFORM (testi lunghi, es. Condominio) === */
.longform__inner { max-width: 74ch; margin-inline: auto; }
.longform h2 { margin-top: var(--space-12); }
.longform h3 { margin-top: var(--space-8); color: var(--color-primary-dark); }
.longform p { margin-top: var(--space-4); color: var(--color-text); }
.longform ul { margin-top: var(--space-4); padding-left: var(--space-6); list-style: disc; display: flex; flex-direction: column; gap: var(--space-2); }
.longform__figure { margin-block: var(--space-12); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.longform__figure img { width: 100%; height: auto; display: block; }
.longform__cta { display: flex; justify-content: center; margin-top: var(--space-10); }

@media (max-width: 1024px) {
  .phero__inner { grid-template-columns: 1fr; }
  .phero__media { max-width: 520px; }
  .solutions-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .icon-cols { grid-template-columns: 1fr; gap: var(--space-4); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* === GALLERY (mosaico realizzazioni) === */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-4);
}
.gallery__item { overflow: hidden; border-radius: var(--radius-md); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 1; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--tall { grid-row: span 1; }
}

/* === CHECKLIST (spunte, condivisa) === */
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); }
.checklist .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); }
.checklist strong { font-weight: var(--weight-bold); }

/* === UTILITY SPAZIATURA (pagine prodotto) === */
.gallery--spaced { margin-top: var(--space-16); }
.section-head--spaced { margin-top: var(--space-10); }
.checklist--spaced { margin-top: var(--space-6); }
/* === GALLERY HOME (masonry sfalsata stile Tabo) === */
.home-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: var(--space-12);
}
.home-gallery__item {
  --off: 0px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform: translateY(var(--off));
}
.home-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.home-gallery__item:hover img { transform: scale(1.05); }

/* Tablet: 2 colonne, colonna destra sfalsata */
@media (min-width: 561px) {
  .home-gallery { grid-template-columns: repeat(2, 1fr); }
  .home-gallery__item:nth-child(2n) { --off: var(--space-10); }
  .home-gallery { padding-bottom: var(--space-10); }
}

/* Desktop: 3 colonne, colonne centrale e destra sfalsate */
@media (min-width: 901px) {
  .home-gallery { grid-template-columns: repeat(3, 1fr); padding-bottom: var(--space-16); }
  .home-gallery__item:nth-child(3n+1) { --off: 0px; }
  .home-gallery__item:nth-child(3n+2) { --off: var(--space-16); }
  .home-gallery__item:nth-child(3n)   { --off: var(--space-8); }
}

/* === PAGINA IN COSTRUZIONE === */
.wip__icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto var(--space-5);
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}
.wip__icon .icon { width: 36px; height: 36px; }

/* === FORM DINAMICI (AJAX): messaggi, errori, honeypot === */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
}
.form-msg[hidden] { display: none; }
.form-msg--ok { color: var(--color-primary-dark); background-color: var(--color-bg); border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-sm); }
.form-msg--err { color: var(--color-text-inverted); background-color: var(--color-primary-dark); border-left: 4px solid var(--color-accent); }
.input.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.field-error { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-error); }
.consent .field-error { flex: 0 0 100%; margin-top: var(--space-1); }
.consent:has(.field-error) { flex-wrap: wrap; }
.consent:has(.field-error) > span:not(.field-error) { flex: 1 1 0; min-width: 0; }

/* Consenso obbligatorio non spuntato: evidenziato in rosso al click su Invia */
.consent--invalid { color: var(--color-error); font-weight: var(--weight-semibold); }
.consent--invalid input { outline: 2px solid var(--color-error); outline-offset: 2px; }
.consent--invalid .consent__req { background-color: var(--color-error); }

/* === RIQUADRO RECENSIONI GOOGLE (link) === */
a.rating { color: inherit; text-decoration: none; transition: transform var(--t-base), box-shadow var(--t-base); }
a.rating:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
a.rating:hover .rating__count { text-decoration: underline; }
a.rating:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* === FOOTER: logo cliccabili === */
.footer__legal > a { display: inline-block; }