/* Banner Immagine
   Valori letti dal component set `Banner Immagine` (2968:6301) e dalla sua mobile reference
   (2974:6256), file `bluenergy ui v2`. Colori dalle variabili della collection `color`:
   Primary #004278 · Secondary (Corporate) #467fbd · Dark gray #434750 · white #ffffff. */

/* --- Colori ---------------------------------------------------------------------------
   I valori restano quelli letti da Figma, ma passano dalle variabili del tema di
   produzione `bluenergy2026`, la cui palette è **identica** a quella del design system:
   `--color-primary` #004278 · `--color-secondary` #467FBD · `--color-dark-gray` #434750 ·
   `--color-gray` #747781.

   La fallback dopo la virgola non è difensiva per abitudine: è ciò che permette allo
   stesso file di funzionare sul tema di prova `Test Figma`, che quelle variabili non le
   ha. In produzione vince il tema e i moduli seguono le sue impostazioni; qui vince
   l'esadecimale letto da Figma.

   Restano cablati i colori che nel tema non hanno corrispondenza — sono elencati sotto
   con il loro perché. */
.bi {
  --bi-navy: var(--color-primary, #004278);
  --bi-corporate: var(--color-secondary, #467fbd);
  --bi-dark-gray: var(--color-dark-gray, #434750);
  --bi-white: var(--color-white, #ffffff);

  --bi-max: 1600px;
  --bi-gap: 64px;         /* spacing/gap-3xl */
  --bi-gap-col: 32px;     /* spacing/gap-xl  */

  /* Le due Mode della collection `padding` non sono due stati alternativi: sono i due
     **estremi di una scala**, misurati alle due larghezze a cui il design è disegnato —
     1920 (radici del component set) e 390 (mobile reference).

       section/padding-xl   24 a 390   →   160 a 1920
       section/padding-l    30 a 390   →   100 a 1920

     Fra le due il design system non dice nulla. Tenere il valore desktop fisso fino alla
     soglia è la lettura sbagliata: a 768 lascerebbe 288px di contenuto su 768 di viewport,
     cioè due colonne da 112px. Qui si interpola linearmente fra le ancore; alle due
     larghezze disegnate il risultato è esattamente il valore disegnato.

     È una scelta di implementazione, non una specifica: se la grafica dichiarerà che il
     gutter **salta** a una soglia invece di variare, questi tre valori diventano tre
     @media e il resto del file non cambia. Domanda aperta, vedi figma-in-sospeso.md §14. */
  --bi-pad-xl: clamp(24px, 8.889vw - 10.67px, 160px);
  --bi-pad-l: clamp(30px, 12.16px + 4.575vw, 100px);

  /* Padding interno della banda: 80 desktop (senza token — la scala spacing salta 64 → 96),
     24 mobile (`section/padding-xl`, Mode mobile, valore aggiornato il 14/09). */
  --bi-band-pad: clamp(24px, 9.68px + 3.660vw, 80px);

  --bi-font: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ancora del mezzo sfondo, che e' assoluto rispetto al modulo intero. */
  position: relative;
  font-family: var(--bi-font);
}
/* ⚠️ **`border-box` dichiarato, non ereditato — ed era l'unico modulo a non farlo.**

   Il tema di produzione lo imposta globalmente, quindi qui il difetto non si vedeva; su un
   tema che non ce l'ha, invece, i due padding da 80 della banda si **sommano** all'altezza
   invece di esservi compresi: misurato, 560 di minimo diventavano 720. Con l'altezza diventata
   un campo la cosa smette di essere teorica — chi scrive 517 si aspetta 517.

   È la stessa regola già scritta in `magazine`: un modulo che si regge sul reset del tema si
   rompe sul tema che non ce l'ha. */
.bi,
.bi *,
.bi *::before,
.bi *::after { box-sizing: border-box; }


/* Il padding della radice dipende dalla variante, e i due valori vengono dai nodi del set:

     In Gabbia (2968:6271)  pad 100/160/100/160  ← `section/padding-l` in verticale,
                                                   `section/padding-xl` in orizzontale
     Piena     (2968:6286)  pad 0                ← la banda tocca i bordi

   Come su text-image, tutto lo spazio visibile lo porta il modulo: la sezione HubSpot
   che lo ospita è neutra (full-bleed, padding 0). */
.bi--gabbia { padding: var(--bi-pad-l) var(--bi-pad-xl); }
.bi--piena { padding: 0; }

/* Serve a saldarsi col modulo sopra: senza, fra i due resta una riga di 100px. In Figma
   l'equivalente e' azzerare il padding verticale dell'istanza, che la grafica documenta
   come il modo di comporre «La forza del gruppo». */
.bi--senza-spazio.bi--gabbia { padding-top: 0; padding-bottom: 0; }

/* --- Il mezzo sfondo ---------------------------------------------------------------
   Dipinge la meta' superiore del modulo, da bordo a bordo, **dietro** la banda.

   Sostituisce l'idea di far risalire il banner con un margine negativo sopra una coda del
   modulo precedente. Quella chiedeva a due moduli di accordarsi su un numero, e un margine
   negativo non appartiene a nessuno dei due: basta riordinare i moduli nell'editor perche'
   si rompa senza dirlo. Qui il modulo dipinge lo spazio che occupa, e il 50% segue da solo
   l'altezza della banda — che dal 16/09 e' libera, e due istanze reali sono 560 e 665.

   Si vede nei margini laterali della variante **In Gabbia**: in «Piena» la banda arriva ai
   bordi e lo copre per intero. Non e' un difetto, e' la conseguenza di cosa vuol dire
   «piena»; il disegno della home usa infatti In Gabbia. */
.bi__half {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--bi-half, var(--bi-navy));
}
/* `--bi-half-tema` solo col campo colore vuoto: vedi module.html. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .bi__half { background: var(--bi-half-tema, var(--bi-half, var(--bi-navy))); }
}
/* Esplicito, invece di affidarsi all'ordine del DOM: `.bi__band` ha `isolation: isolate`
   e un giorno potrebbe prendere uno z-index proprio. */
.bi--mezzo-fondo .bi__band { z-index: 1; }

/* `isolation: isolate` confina il `mix-blend-mode` dell'overlay dentro la banda: senza,
   la fusione prenderebbe anche ciò che sta dietro nella pagina.
   `min-height` e non `height`: in Figma l'altezza 560 è FIXED, ma un testo più lungo del
   previsto deve poter allargare la banda invece di uscirne.

   Il 560 è la misura nativa e sta nel fallback della variabile: il campo la sovrascrive per
   istanza, come l'altezza dell'hero. Il mezzo sfondo è al 50% di questa, quindi segue da sé. */
.bi__band {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--bi-h, 560px);
  overflow: hidden;
  background-color: var(--bi-navy);
}

/* Le due varianti differiscono in **dove si ferma l'immagine**, non solo nello spazio:
   in gabbia la banda — che porta la foto — è larga 1600 e centrata, piena arriva ai bordi.
   Il contenuto invece è capped a 1600 in entrambe: 1440 in gabbia (1600 meno il padding
   interno), 1600 piena. */
.bi--gabbia .bi__band {
  max-width: var(--bi-max);
  margin: 0 auto;
  padding: var(--bi-band-pad);
}

.bi--piena .bi__band {
  padding: var(--bi-band-pad) var(--bi-pad-xl);
}

/* Oltre i 1920 la variante piena continuerebbe ad allargarsi: il gutter è fermo a 160 e
   niente la trattiene. In Figma il contenuto è 1600 e lì si ferma. */
.bi--piena .bi__content {
  max-width: var(--bi-max);
  margin: 0 auto;
}

.bi__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* `--bi-overlay` arriva inline dal modulo, composto dal campo colore. Vedi il commento
   in module.html sul perché l'opacità sta nell'alpha e non in `opacity`. */
.bi__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bi-overlay, rgba(0, 27, 68, 0.8));
  mix-blend-mode: multiply;
}
/* Il velo a due colonne fonde in MULTIPLY, come in Figma. Quello a colonna singola no:
   misurato sulla stessa foto, con multiply lo scarto dal render di Figma arriva a 103 su
   255, in fusione normale scende a 2. Due varianti dello stesso nodo, due modi di fondere:
   e' il file a dirlo, non una preferenza. */
.bi--colonna_singola .bi__overlay { mix-blend-mode: normal; }
/* Stessa ragione per il nodo `Velo`: quel gradiente in Figma non e' il rettangolo `Overlay`
   ma una fill del frame `Banda` — che sull'istanza `Due colonne` di `homepage-casa1` e'
   l'unico velo acceso — e una fill di frame si posa in fusione normale. Scegliere `Velo`
   cambia quindi due cose insieme, la rampa e il modo di fondere: in Figma sono due nodi
   diversi, non due regolazioni dello stesso. */
.bi--velo .bi__overlay { mix-blend-mode: normal; }

/* Il nodo `Contenuto`: allinea le due colonne in alto **fra loro**, mentre la banda
   centra lui. Vedi il commento di apertura in module.html. */
.bi__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--bi-gap);
  width: 100%;
}

/* Colonne 50/50: in Figma sono due FILL affiancate, 688+688 in gabbia e 768+768 piena.
   `min-width: 0` perché una colonna flex non scende sotto la larghezza del proprio
   contenuto senza, e un titolo lungo senza spazi sfonderebbe la riga. */
.bi__col {
  flex: 1 1 0;
  min-width: 0;
}

.bi__col--text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bi-gap-col);
}

/* --- Contenuto: colonna singola -----------------------------------------------------
   Le due colonne diventano un blocco solo largo 688, impilato. Le `.bi__col` restano due
   nel markup — titolo e sottotitolo nella prima, paragrafo e bottone nella seconda —
   perche' cosi' il verso della lettura non cambia fra le due disposizioni: chi passa da
   una all'altra non si ritrova i campi in ordine diverso.

   Il gap interno e' 24 come in Figma, non i 64 fra le colonne affiancate.

   ⚠️ **I 688 stanno sulle colonne, non sul contenitore, e non e' indifferente.** In
   `Piena` il contenitore porta `max-width: 1600` e `margin: 0 auto`: e' la pista dentro cui
   il disegno si ferma quando lo schermo supera i 1920. Stringere *quella* a 688 la lascia
   centrata, e il blocco finisce in mezzo alla banda — mentre in Figma e' incollato al
   gutter di sinistra, con la meta' destra vuota sulla foto. La pista resta larga 1600,
   quindi, e a misurare 688 sono le colonne dentro: `align-items: flex-start` le tiene a
   sinistra. Trovato il 23/09/2026 componendo `offerte-prezzo-fisso`, dove la colonna
   singola e' la prima a comparire in una pagina vera. */
.bi--colonna_singola .bi__content {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.bi--colonna_singola .bi__col { flex: none; width: 100%; max-width: 688px; }
.bi--colonna_singola .bi__col--title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.bi--colonna_singola .bi__col--text { gap: 24px; }

/* `text-transform: none` esplicito: il tema può applicarne uno agli heading, e in Figma
   il titolo è in caso frase. `margin: 0` perché la spaziatura la dà il flex. */
.bi__title {
  margin: 0;
  font-family: var(--bi-font);
  text-transform: none;
}

.bi__title--h2 { font-size: 4.8rem; line-height: 1.20833; font-weight: 700; }
.bi__title--h3 { font-size: 3.2rem; line-height: 1.25; font-weight: 700; }
.bi__title--h4 { font-size: 2.6rem; line-height: 1.35385; font-weight: 600; }
.bi__title--body-m-bold { font-size: 2rem; line-height: 1.5; font-weight: 600; }

.bi__title--c-navy { color: var(--bi-navy); }
.bi__title--c-corporate { color: var(--bi-corporate); }
.bi__title--c-white { color: var(--bi-white); }

/* La descrizione ospita HTML dell'editor. Il tema dichiara `p { font-size: 1rem }`
   sull'elemento, che batte l'ereditarietà dal contenitore: la misura va ridichiarata
   sui figli.

   ⚠️ **Le misure qui sono in `rem` e il `line-height` senza unità**, come ovunque. Vanno
   dichiarate così **dentro la custom property**, non al punto d'uso: una conversione che
   cerca `font-size:` non guarda dentro le variabili, e questi tre valori erano rimasti in px
   dopo la conversione del 22/09 proprio per quello.

   I modificatori impostano solo variabili, e un blocco solo le applica a contenitore e
   figli. Senza, ogni stile avrebbe bisogno della propria lista di selettori discendenti —
   tre stili per cinque selettori — e la prima modifica ne dimenticherebbe uno. */
.bi__description {
  --bi-d-size: 2rem;
  --bi-d-lh: 1.5;
  --bi-d-weight: 500;
  --bi-d-color: var(--bi-white);
}

.bi__description--body-s { --bi-d-size: 1.8rem; --bi-d-lh: 1.55556; --bi-d-weight: 400; }
.bi__description--body-xs { --bi-d-size: 1.6rem; --bi-d-lh: 1.5625; --bi-d-weight: 400; }

.bi__description--c-navy { --bi-d-color: var(--bi-navy); }
.bi__description--c-dark-gray { --bi-d-color: var(--bi-dark-gray); }
.bi__description--c-white { --bi-d-color: var(--bi-white); }

.bi__description,
.bi__description > p,
.bi__description > ul,
.bi__description > ol,
.bi__description li {
  font-family: var(--bi-font);
  font-size: var(--bi-d-size);
  line-height: var(--bi-d-lh);
  font-weight: var(--bi-d-weight);
  color: var(--bi-d-color);
}

.bi__description > :first-child { margin-top: 0; }
.bi__description > :last-child { margin-bottom: 0; }

/* La CTA è HUG in Figma: sta larga quanto il suo testo, non quanto la colonna. */
.bi__cta { align-self: flex-start; }

/* Il tema dichiara `a:hover, a:focus { … }` con `anchor_font.style`, che porta
   font-family, font-size, font-weight e text-decoration. `a:hover` vale (0,1,1) e batte
   `.bi__button` (0,1,0): nello stato base vinceremmo, in hover no — il pulsante
   diventerebbe un link sottolineato con un altro font. Stessa storia su `button:focus`,
   che sulle frecce di card-grid rimetteva raggio e colori del tema.

   Tutti gli stati sono quindi in un blocco solo, a specificità (0,2,0), e ridichiarano
   ogni proprietà che il tema tocca — `border-radius` compreso: in Figma il nodo `Link` ha
   raggio 0 (il 12 sta su `Link:shadow`, che porta solo effetti).

   Le due varianti impostano solo variabili, così base e stati non possono divergere. */
.bi__button,
.bi__button:link,
.bi__button:visited,
.bi__button:hover,
.bi__button:focus,
.bi__button:active {
  font-family: var(--bi-font);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3125;
  letter-spacing: 0.04375em;
  /* Maiuscolo del **componente**, non del testo scritto: in Figma `button` ha
     `textCase: UPPER` su tutte e sei le varianti (§12, deciso il 22/09 e confermato a
     voce il 24/09 — «le CTA sono tutte maiuscole»). Sta qui e non in HubL: nel campo
     resta scritto quello che scrive chi redige, e l'etichetta sale in maiuscolo da sola.
     ⚠️ Tolto il 18/09 su indicazione opposta, rimesso il 24/09. */
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  color: var(--bi-btn-fg);
  background: var(--bi-btn-bg);
  border: var(--bi-btn-border);
  /* `Link:shadow` del master `button`, dimensione Standard: due ombre, non una, e le due
     estensioni negative contano. La `Small` non ce l'ha. */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.bi__button {
  --bi-btn-fg: var(--bi-white);
  --bi-btn-bg: var(--bi-navy);
  --bi-btn-border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: opacity 0.15s ease;
}

/* Dopo `.bi__button`, non prima: stessa specificità, vince l'ultimo. */
.bi__button--white {
  --bi-btn-fg: var(--bi-navy);
  --bi-btn-bg: var(--bi-white);
  --bi-btn-border: 1px solid var(--bi-navy);
}

/* Il bordo di 1px c'è su entrambe le varianti — trasparente sulla Primario — così le due
   misurano uguale: in Figma sono entrambe alte 53. */
.bi__button--standard { padding: 16px 32px; }
/* Raddoppiata la classe per arrivare a (0,2,0): il blocco che dichiara tracking e ombra
   elenca i sei stati e vale altrettanto, e una classe sola non lo batterebbe. */
.bi__button.bi__button--small {
  padding: 8px 16px;
  /* `Small`: nessuna ombra — è una misura del master, non una riduzione proporzionale
     della Standard. La spaziatura lettere invece **non** è più una differenza: fino al
     22/09 qui c'era `tracking 0,032px`, poi la grafica l'ha portata a 0,7 su tutte le
     varianti del `button` (§12, chiusura §54). Resta dichiarata per non ereditare altro. */
  letter-spacing: 0.04375em;
  box-shadow: none;
}


/* Il tema segnalava il focus col colore del link, che qui abbiamo neutralizzato: senza un
   anello esplicito il pulsante diventa inaccessibile da tastiera. Bianco, perché sta
   quasi sempre sopra una foto scura. */
.bi__button:focus-visible {
  outline: 2px solid var(--bi-white);
  outline-offset: 2px;
}

/* Il tag {% icon %} emette un <svg> che eredita `currentColor`: si dimensiona e si colora
   dal pulsante, non da sé. In Figma l'icona è 13×13. */
/* La classe sta sull'`<svg>`, non su un involucro: la macro la mette li'.

   E il colore si dichiara con `color`, **mai** con `fill`. Il set non e' omogeneo —
   alcune icone sono a `fill`, altre a solo `stroke` con la radice a `fill="none"` — e una
   regola `fill: currentColor` sull'`<svg>` batte l'attributo di presentazione e
   riempirebbe di tinta piena proprio quelle. I path portano gia' `currentColor` dove
   serve: qui basta dire quale sia il colore corrente. */
.bi__button-icon {
  display: block;
  flex: none;
  width: 13px;
  height: 13px;
}

/* --- Sotto il breakpoint -----------------------------------------------------------
   Dalla mobile reference (2974:6256): radice senza padding, banda a piena larghezza con
   45px su tutti e quattro i lati (`section/padding-xl`, Mode mobile) e altezza libera —
   in Figma la banda mobile è HUG, non più 560 FIXED.

   L'asse `Larghezza` è inerte: le due varianti convergono, quindi nessun branch.

   Questo blocco sta in fondo al file di proposito. Una @media non aggiunge specificità:
   `.bi__title` qui vale (0,1,0) come `.bi__title--h2` sopra, e vince solo perché viene
   dopo. È così che il titolo scende sempre a 28px qualunque Style sia stato scelto —
   regola dichiarata in Figma, non un campo. */
/* La soglia è **768**, non 767. In Figma `breakpoint/max-width` mobile vale 767, ma il tema
   di produzione `bluenergy2026` ragiona per scala — `md: 768` — e la sua macro
   `breakpoint_down('md')` emette `max-width: 768px`. A 768 esatti il tema si considera
   mobile: restare a 767 metterebbe questo modulo in controfase col CSS che lo circonda per
   un pixel, che è il tipo di scostamento che nessuno trova mai.
   Divergenza dichiarata da Figma, decisa il 14/09. */
@media (max-width: 768px) {
  /* Il mezzo sfondo non si dipinge sotto la soglia: li' la banda e' a piena larghezza,
     quindi lo coprirebbe comunque, e soprattutto il disegno non prevede la saldatura —
     la reference mobile della sezione sopra dice che il suo fondo finisce col modulo. */
  .bi__half { display: none; }

  /* La colonna singola non ha piu' 688 da occupare: prende quel che c'e'. Il tetto sta
     sulle colonne (vedi sopra), quindi e' li' che va tolto. */
  .bi--colonna_singola .bi__col { max-width: none; }

  .bi--gabbia,
  .bi--piena { padding: 0; }

  /* Il padding non è ridichiarato: `--bi-band-pad` a 390 vale già esattamente i 24 della
     mobile reference, e fra 390 e 767 continua a salire invece di restare piatto. Qui
     resta solo ciò che cambia **struttura**. */
  .bi--gabbia .bi__band,
  .bi--piena .bi__band {
    max-width: none;
    margin: 0;
    min-height: 0;
  }

  .bi__content {
    flex-direction: column;
    gap: var(--bi-gap-col);
  }

  .bi__col {
    flex: 0 1 auto;
    width: 100%;
  }

  /* Ogni stile passa al **proprio** corrispondente mobile (§16 del contratto):

         H2           48/58  →  H2 mobile  32/37
         H3           32/40  →  H3 mobile  22/28
         H4           26/35  →  H4 mobile  20/27
         body m bold  20/30  →  invariato: i corpi di testo non scendono

     In Figma il titolo del Banner è sempre H2, e la mobile reference mostra solo quel caso.
     Ma qui `Style` è un campo — divergenza 4 — quindi la scelta esiste e la tabella va
     implementata per intero: dedurre «sempre 32» da una reference disegnata con un solo
     stile significherebbe trattare un esempio come una regola.

     Valori letti dagli stili di testo Figma, non ricavati da una proporzione: fra desktop e
     mobile il rapporto di interlinea non è costante.

     `font-weight` non si ripete: lo porta già il modificatore di stile, e H4 lo vuole a 600
     mentre gli altri a 700. Riscriverlo qui li appiattirebbe tutti. */
  .bi__title--h2 { font-size: 3.2rem; line-height: 1.15625; }
  .bi__title--h3 { font-size: 2.2rem; line-height: 1.27273; }
  .bi__title--h4 { font-size: 2rem; line-height: 1.35; }
}

/* ---- Stati interattivi — §70 del contratto (28/09) --------------------------------------
   Le regole valgono per tutti i controlli: transizione 150 ms su fondo, bordo e colore;
   focus da tastiera = contorno 2px a 2px, Primary su chiaro e bianco su navy; la freccia dei
   controlli con etichetta trasla di 4px **solo in hover**; ogni movimento dentro
   `prefers-reduced-motion`. `Primary scuro` (#031B3B) nel tema non c'è ancora: la variabile
   `--color-primary-scuro` è chiesta al team tema, e intanto vale il fallback.

   Stanno in fondo al file di proposito: i blocchi che elencano tutti gli stati valgono
   (0,2,0), e queste regole li battono per ordine a pari specificità. */
.bi__button:hover,
.bi__button:active { --bi-btn-bg: var(--color-primary-scuro, #031b3b); }
/* `White` sta sempre sulla foto velata di navy: «Controlli su fondo navy» del §70 (§72,
   28/09). Si rovescia e il bordo bianco tiene la forma — vedi `hero-generic`. */
.bi__button--white:hover {
  --bi-btn-fg: var(--bi-white);
  --bi-btn-bg: var(--bi-navy);
  --bi-btn-border: 1px solid var(--bi-white);
}
.bi__button--white:active {
  --bi-btn-fg: var(--bi-white);
  --bi-btn-bg: var(--color-primary-scuro, #031b3b);
  --bi-btn-border: 1px solid var(--bi-white);
}
@media (prefers-reduced-motion: no-preference) {
  .bi__button { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
  .bi__button-icon { transition: transform 0.15s ease; }
  .bi__button:hover .bi__button-icon { transform: translateX(4px); }
  .bi__button:active { transform: scale(0.98); }
  .bi__button--white:active { transform: none; }
}