/* Sezione Due Colonne — valori letti dai nodi del file `bluenergy ui v2`, non stimati.

   DESKTOP — `Disposizione=2×2 sfalsata, Tema=Scuro` (3349:6656), radice 1920
     radice        fondo `Primary` #004278, padding 140 sopra, 160 ai lati
     gabbia        1600 · intro 524 · stacco 128 · colonna card 948
     intro         colonna, gap 24: H2 48/58 · sottotitoli 25/35 · body m 20/30 · button
     card          456 × 320, padding 32 (`spacing/gap-xl`), radius 0
                   bordo 1px rgba(196,198,210,0.3)
                   ombra 0 24px 48px -12px rgba(0,27,68,0.15)
                   dentro: gap 16 · icona 24 (33 fino al 28/09, §69) · H3 32/40 Navy · body s 18/28 Dark gray
                   in fondo: `cta secondaria` 14/21 SemiBold UPPER, tracking 0.7, Navy
     griglia       due colonne, gap 32, colonna destra sfalsata di 48 (`spacing/gap-2xl`)
     padding sotto 394 nel disegno — ma **quel surplus non è di questo modulo**: è lo spazio
                   su cui il `Banner Immagine` si sovrappone, e a valle lo dipinge lui col
                   proprio «Mezzo sfondo». Qui il padding sotto è 140 come sopra.

   MOBILE — reference `3527:1589`, radice 390
     radice        padding 48 sopra e sotto, 24 ai lati (`section/padding-xl`)
     stacco        48 fra intestazione e card
     intro         gap 24 fra i testi, 32 prima del bottone
     tipografia    H2 mobile 32/37 · sottotitoli mobile 18/25 · body m **invariata** 20/30
     bottone       `Dimensione=Small`: padding 8/16, testo invariato
     card          una colonna a piena larghezza, gap 24, altezza HUG (niente 320)
                   dentro: **tutto invariato** — icona 24, H3 32/40, body s 18/28
     sfalsamento   **non c'è**: è un dispositivo desktop, lo dichiara la reference

   REGOLA — dal `:shadow` si leggono solo gli effetti, mai le misure. `Card 1:shadow` è un
   rettangolo fratello che esiste per disegnare un'ombra: il suo raggio non è quello della
   card, che ha `cornerRadius: 0`. Trappola già pagata una volta su `card-grid`.

   Quello che Figma **non** dice, e che abbiamo deciso qui: i due estremi disegnati sono
   1920 e 390, e i difetti vivono in mezzo. Le tre soglie sotto sono nostre, misurate
   sull'unico vincolo che conta — quanto si può stringere una card prima che il titolo da
   28px si spezzi. La reference mobile prova che 342 basta; sotto i ~300 no. */

/* --- Colori -----------------------------------------------------------------------------
   Passano dalle variabili del tema `bluenergy2026`, la cui palette coincide col design
   system. 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.

   `#f0f3fa`, il fondo card del tema Chiaro, non è `light_blue` (#e7ebf6): è un altro
   azzurro. ✅ Dal 24/09 ha una controparte nel tema — `primary_20` → `--color-primary-20`,
   aggiunto dal team tema insieme a `primary_10`, `gray_20`, `gray_40`. Ora passa di lì. */
.tcs {
  --tcs-navy: var(--color-primary, #004278);
  --tcs-corporate: var(--color-secondary, #467fbd);
  --tcs-text: var(--color-dark-gray, #434750);
  --tcs-white: var(--color-white, #ffffff);
  --tcs-card-light: var(--color-primary-20, #f0f3fa);
  /* Le icone delle card sono disegnate in `Secondary`, non in navy: letto negli SVG
     esportati (`fill="#467FBD"`), non dedotto dal rendering. Prima erano navy. */
  --tcs-icon: var(--color-secondary, #467fbd);
  --tcs-card-border: rgba(196, 198, 210, 0.3);
  --tcs-card-shadow: 0 24px 48px -12px rgba(0, 27, 68, 0.15);

  /* I quattro colori del contenuto della card hanno variabili proprie e non usano
     direttamente `--tcs-navy` / `--tcs-text` / `--tcs-icon`: `Variante=Con sfondo` li
     ribalta tutti e quattro a bianco insieme, e così lo stato si scrive in un blocco solo.
     Non si ridefinisce `--tcs-navy` sulla card hovered — `--tcs-card-bg` lo legge a sua
     volta, e il riferimento diventerebbe circolare.
     Servono anche perché `.tcs__card-title` e `.tcs__card-desc` sono usate **anche** dai
     passi dell'elenco numerato, che non stanno dentro una card: lì queste variabili
     arrivano dal root e restano quelle di partenza. */
  --tcs-card-title-c: var(--tcs-navy);
  --tcs-card-desc-c: var(--tcs-text);
  --tcs-card-icon-c: var(--tcs-icon);
  --tcs-card-cta-c: var(--tcs-navy);
  /* `Gradient Overlay` di `Con sfondo`: `Primary` al 60% a sinistra, trasparente a destra. */
  /* Era `rgba(0, 47, 108, …)`, il navy vecchio: sfuggito al controllo del 24/09, che cercava
     solo gli esadecimali. La versione che segue il token e' in `@supports` qui sotto — su una
     proprieta' custom due dichiarazioni di fila non farebbero da rete. */
  --tcs-card-scrim: linear-gradient(90deg, rgba(0, 66, 120, 0.6) 0%, rgba(0, 66, 120, 0) 100%);

  --tcs-max: 1600px;
  --tcs-gap: 32px;

  /* Orizzontale: `section/padding-xl`, 160 a 1920 → 24 a 390. Stessa clamp degli altri
     moduli: i due estremi disegnati sono i capi di una scala continua, non due stati. */
  --tcs-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
  /* Verticale: 140 a 1920 → 48 a 390, letti su componente e reference.
     ⚠️ L'ancora mobile **non è la stessa nelle due disposizioni**: la reference `2×2
     sfalsata` dà 48, quella `Elenco numerato` dà 64. Non è una scala derivata da un token,
     sono due numeri disegnati, e il file vince: la seconda clamp sta più sotto, sotto
     `.tcs--elenco_numerato`. Segnalato a Cristina come probabile svista — stesso modulo,
     stesso asse, due valori. */
  --tcs-pad-v: clamp(48px, 24.55px + 6.013vw, 140px);

  /* `Secondary` al 30%: il numero è un peso visivo, non un testo da leggere per primo.
     L'opacità sta sul colore e non sull'elemento — `opacity` creerebbe un contesto di
     impilamento per un effetto che si ottiene con l'alpha. */
  --tcs-step-num: var(--color-secondary, #467fbd);
  --tcs-font: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--tcs-font);
  color: var(--tcs-text);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .tcs {
    --tcs-card-scrim: linear-gradient(90deg, color-mix(in srgb, var(--color-primary, #004278) 60%, transparent) 0%, transparent 100%);
  }
}

/* Il modulo dichiara il proprio `box-sizing` invece di ereditarlo dal reset del tema:
   `magazine` si appoggiava a quello e il conto dei padding cambiava fra i due portali. */
.tcs,
.tcs *,
.tcs *::before,
.tcs *::after { box-sizing: border-box; }

/* --- Tema ------------------------------------------------------------------------------
   L'asse `Tema` cambia i colori e nient'altro — lo dichiara il componente, ed è il motivo
   per cui qui sono quattro custom property e non un secondo blocco di regole.

   `--tcs-focus` esiste perché l'anello di focus del bottone cade **fuori** dal bottone,
   cioè sul fondo della sezione: `currentColor` sarebbe navy su navy, invisibile proprio
   dove serve. Dentro le card invece `currentColor` va bene, perché lì il fondo è chiaro. */
.tcs--scuro {
  background: var(--tcs-navy);
  --tcs-intro-title: var(--tcs-white);
  --tcs-intro-text: var(--tcs-white);
  --tcs-card-bg: var(--tcs-white);
  --tcs-focus: var(--tcs-white);
  /* Bordo del bottone in hover e premuto: bianco sul navy, vedi gli stati in fondo. */
  --tcs-btn-edge: var(--tcs-white);
}
/* `Tema = Gradiente` (23/09): lo stesso gradiente degli hero e di `AppPromo`, orizzontale,
   matrice identita' in Figma. Il markup gli mette **anche** `.tcs--scuro`, perche' il
   gradiente e' lo scuro con un'altra fill; questa regola sta dopo e a pari specificita',
   quindi vince sul navy pieno senza alzarla — ed e' l'unica cosa che cambia. */
.tcs--gradiente {
  background: linear-gradient(90deg, var(--tcs-navy) 0%, var(--tcs-corporate) 100%);
}

.tcs--chiaro {
  background: var(--tcs-white);
  --tcs-intro-title: var(--tcs-navy);
  --tcs-intro-text: var(--tcs-text);
  --tcs-card-bg: var(--tcs-card-light);
  --tcs-focus: var(--tcs-navy);
}
/* `Tema = Azzurro` (28/09): il chiaro a superfici scambiate — fondo `Primary 20`, card
   bianche, testi invariati. Viene da «Perché installare un impianto fotovoltaico?» su
   `fotovoltaico`, dove in Figma e' ancora un **override di fill** sull'istanza `Chiaro`: la
   radice ridipinta `#f0f3fa` e le tre `Card Step Numerata` ridipinte bianche. Lo schema di
   `AppPromo` e di `Percorso Consigli`: segnalato alla grafica perche' lo dichiari come valore
   di `Tema`, e allora questa diventa la traduzione di un asse invece che di un override. Stesso meccanismo del gradiente — il markup mette anche
   `.tcs--chiaro`, questa regola sta dopo e a pari specificita'.

   Il contrasto non cambia di classe: card e fondo restano a 1,11:1 (e' la stessa coppia di
   colori, scambiata), e il `Dark gray` si scambia anche lui — 9,3:1 sulle card bianche,
   8,4:1 sull'intro azzurra, contro l'inverso del chiaro. Calcolati il 28/09. */
.tcs--azzurro {
  background: var(--tcs-card-light);
  --tcs-card-bg: var(--tcs-white);
}

/* --- Impianto --------------------------------------------------------------------------
   Lo split 524 / 128 / 948 è dichiarato in percentuale della gabbia, non in pixel.

   In pixel reggerebbe solo a 1920: a 1500 l'intro resterebbe 524 e le due card
   scenderebbero a 240 l'una. In percentuale i tre pesi restano quelli disegnati a ogni
   larghezza — 524/1600 = 32.75%, 128/1600 = 8% — e il punto in cui si rompe si sposta
   abbastanza in basso da poterlo governare con una soglia sola. */
.tcs__inner {
  max-width: calc(var(--tcs-max) + 2 * var(--tcs-gutter));
  margin: 0 auto;
  padding: var(--tcs-pad-v) var(--tcs-gutter);
  display: flex;
  align-items: flex-start;
  gap: 8%;
}

.tcs__intro {
  flex: 0 0 32.75%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* --- Griglia delle card ----------------------------------------------------------------
   `align-items: start` e non lo `stretch` di default: con lo sfalsamento, una card
   stirata alla riga andrebbe a coprire i 48px di scarto della vicina, che sono la ragione
   per cui la riga è alta 368 invece di 320.

   `min-width: 0` sulle celle: un elemento di griglia ha `min-width: auto`, cioè non può
   diventare più stretto del proprio contenuto. Su `magazine` questo ha fatto crescere una
   card fino a 2065px dentro un contenitore da 741. */
.tcs__cards {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--tcs-gap);
}

.tcs__cell { min-width: 0; }

/* Lo sfalsamento della colonna destra: `spacing/gap-2xl`. Vale sulle celle pari, quindi
   segue il numero di card senza che nessuno lo conti. */
.tcs__cell:nth-child(even) { margin-top: 48px; }

/* --- La card ---------------------------------------------------------------------------
   `min-height` e non `height`: il criterio 1.4.12 chiede che il testo sopravviva a una
   spaziatura aumentata, e un'altezza fissa lo taglia. I 320 disegnati restano il
   pavimento, non il soffitto.

   `space-between` più `gap: 32`: il gap è la distanza minima fra corpo e CTA — quella
   della reference mobile, dove la card non ha altezza fissa — e lo `space-between`
   distribuisce quello che avanza quando la card è più alta del contenuto. Insieme
   descrivono entrambi gli stati con una regola sola. */
.tcs__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 320px;
  padding: 32px;
  background: var(--tcs-card-bg);
  border: 1px solid var(--tcs-card-border);
  box-shadow: var(--tcs-card-shadow);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease;
}

/* --- Lo stato hover: `Variante=Con sfondo` ----------------------------------------------
   Le due varianti del componente `Card + hover` non sono due contenuti fra cui scegliere:
   sono i due stati di una card sola — lo dice il nome del frame che le tiene. Cambiano
   insieme cinque cose: compare la foto, ci va sopra un velo navy, e titolo, descrizione,
   icona e CTA passano al bianco.

   ⚠️ **Lo stato esiste solo se la card ha un'immagine**, ed è una divergenza dichiarata.
   In Figma la foto è dentro la variante, uguale per tutte; qui è un campo, perché quattro
   card che raccontano quattro cose diverse non condividono una foto. E senza foto non
   resta niente da mostrare: un fondo pieno navy funzionerebbe sul tema Chiaro e sul tema
   Scuro — dove la sezione **è** navy — farebbe sparire la card dentro il fondo.

   `:focus-within` accanto a `:hover`: l'unico elemento focalizzabile della card è la CTA,
   e chi arriva con la tastiera deve vedere lo stesso stato di chi arriva col mouse. Non
   serve invece niente per il criterio 1.4.13: qui non compare **contenuto** nuovo, solo
   colori e uno sfondo, quindi non c'è niente da poter chiudere con Esc.

   Su touch lo stato non si attiva mai, e va bene: nessun contenuto vive lì dentro. */

.tcs__card-bg,
.tcs__card-scrim {
  position: absolute;
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* Il -1px è di Figma: foto e velo stanno a `inset: -1px`, cioè **coprono il bordo** della
   card. Il blocco contenitore di un figlio assoluto è il *padding box*, quindi le due
   misure valgono 100% + i due pixel di bordo. Vanno scritte: su un elemento rimpiazzato
   `width: auto` significa «la larghezza intrinseca dell'immagine» e `right` viene ignorato.

   `z-index` negativi: dentro il contesto di impilamento aperto da `isolation: isolate`, un
   figlio con z-index negativo si dipinge **dopo** lo sfondo della card e **prima** del
   contenuto in flusso. È lo stesso impianto di `card-grid`. */
.tcs__card-bg {
  z-index: -2;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}
.tcs__card-scrim {
  z-index: -1;
  background: var(--tcs-card-scrim);
}

.tcs__card--hover:hover,
.tcs__card--hover:focus-within {
  /* La CTA in hover resta bianca: sul fondo fotografico il `Primary scuro` del §70 sparirebbe. */
  --tcs-cta-hover: var(--tcs-white);
  --tcs-card-title-c: var(--tcs-white);
  --tcs-card-desc-c: var(--tcs-white);
  --tcs-card-icon-c: var(--tcs-white);
  --tcs-card-cta-c: var(--tcs-white);
  /* Il bordo sparisce perché in Figma la foto gli passa sopra. Trasparente e non assente:
     un `border-width: 0` cambierebbe le misure della card al passaggio del mouse. */
  border-color: transparent;
}
.tcs__card--hover:hover .tcs__card-bg,
.tcs__card--hover:focus-within .tcs__card-bg,
.tcs__card--hover:hover .tcs__card-scrim,
.tcs__card--hover:focus-within .tcs__card-scrim {
  opacity: 1;
}

.tcs__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Il colore si dà con `color`, **mai** con `fill`.

   Le icone del set non sono omogenee: alcune sono disegnate a `fill`, altre a solo
   `stroke` con la radice a `fill="none"` (`luce`, `lucchetto`, `scudo`, `calendario`).
   Una regola `fill: currentColor` sull'`<svg>` vince sull'attributo di presentazione e
   riempirebbe di tinta piena proprio quelle quattro. I path portano già
   `fill="currentColor"` o `stroke="currentColor"` dove serve: qui basta dire quale sia
   il colore corrente.

   La classe sta sull'`<svg>` e non su un involucro: la macro la mette lì. */
/* 24 dal 28/09: col set ridisegnato (§69) le istanze nelle card sono 24, non più 33. */
.tcs__icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--tcs-card-icon-c);
}

/* Il tema dichiara font e dimensioni direttamente su `h3` e `p`: una regola sull'elemento
   batte l'ereditarietà dal contenitore, quindi qui vanno ridichiarate o si perdono. */
.tcs__card-title {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tcs-card-title-c);
  text-transform: none;
}

.tcs__card-desc {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55556;
  color: var(--tcs-card-desc-c);
}

/* --- Intro -----------------------------------------------------------------------------
   Stessa difesa dalla specificità del tema, stati dei link compresi. */
.tcs__title {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.20833;
  color: var(--tcs-intro-title);
  text-transform: none;
}

.tcs__subtitle {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tcs-intro-text);
}

/* `richtext`: il redattore può incollare più paragrafi, quindi lo stile va dichiarato
   anche sui figli — il contenuto qui non è nostro. */
.tcs__description {
  font-family: var(--tcs-font);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tcs-intro-text);
}
.tcs__description p,
.tcs__description li {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.tcs__description > *:last-child { margin-bottom: 0; }

/* --- Bottone: `button`, Variante=White, Dimensione=Standard ----------------------------
   Tutti gli stati in un blocco solo: `a:hover` vale (0,1,1) e batte una classe singola.
   Tenerli separati è il modo in cui divergono alla modifica successiva. */
.tcs__button,
.tcs__button:link,
.tcs__button:visited,
.tcs__button:hover,
.tcs__button:focus,
.tcs__button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--tcs-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;
  color: var(--tcs-navy);
  background: var(--tcs-white);
  border: 1px solid var(--tcs-navy);
  border-radius: 0;
  /* `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);
}
.tcs__button-label { line-height: 1.3125; }
.tcs__button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 13.333px;
  height: 21px;
}
.tcs__button-arrow-svg { display: block; width: 13.333px; height: 13.333px; }
/* Neutralizzando gli stili del tema si porta via anche l'indicatore di focus: chi toglie,
   rimette. Qui l'anello cade sul fondo della sezione, non sul bottone — vedi `--tcs-focus`. */
.tcs__button:focus-visible {
  outline: 2px solid var(--tcs-focus);
  outline-offset: 2px;
}

/* --- CTA secondaria dentro la card ----------------------------------------------------- */
.tcs__cta,
.tcs__cta:link,
.tcs__cta:visited,
.tcs__cta:hover,
.tcs__cta:focus,
.tcs__cta:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tcs-font);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tcs-card-cta-c);
}
/* Proprietà di impianto fuori dal blocco qui sopra: quello contiene `:link` e vale (0,2,0),
   e una lista di stati non è il posto dove dire dove sta un elemento.
   `align-self` perchè la card è una colonna flex senza `align-items`, quindi il default
   `stretch` allargava il link a tutta la card: l'area cliccabile arrivava fino al bordo
   destro e l'anello di focus con lei. In Figma la `cta secondaria` è larga quanto il suo
   contenuto (229), ed è quello che deve essere anche qui. */
.tcs__cta { align-self: flex-start; }

/* Testo e freccia su una riga sola: senza altezza esplicita l'`<svg>` porta con sé lo
   spazio del baseline e scende di un paio di pixel rispetto alle maiuscole. */
.tcs__cta-label { line-height: 1.5; }
.tcs__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 21px;
}
.tcs__cta-arrow-svg { display: block; width: 16px; height: 16px; }
.tcs__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- Elenco numerato -------------------------------------------------------------------
   Il secondo valore di `Disposizione`: al posto della griglia, una colonna di
   `Card Step Numerata`. Cambia **solo la colonna destra** — intro, gabbia, split e temi
   sono gli stessi, e per questo qui non si ridichiara niente di tutto quello.

   Tre differenze rispetto alla card della griglia, tutte lette sul componente e non dedotte:
     - **niente bordo e niente ombra.** La card della griglia ne ha entrambi, il passo no.
     - **la descrizione è `body m` 20/30**, non `body s` 18/28.
     - **niente icona e niente link**: il passo ha numero, titolo e descrizione, e basta.

   ⚠️ Nel tema chiaro il passo resta `#f0f3fa` su fondo bianco **senza bordo né ombra**:
   1,11:1 fra card e fondo, cioè la separazione la fa solo la tinta. È così nel disegno —
   l'istanza chiara è l'Impronta Carbonica — e non è una violazione (1.4.11 riguarda i
   componenti di interfaccia, e qui il testo sta a 11,65:1), ma è il punto debole della
   combinazione ed è segnalato. */
.tcs__passi {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tcs-gap);
}
.tcs__passo { min-width: 0; }

.tcs__step {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 32px;
  background: var(--tcs-card-bg);
}

/* `flex: none` perché il numero non deve mai stringersi: è la colonna fissa della riga.
   `line-height` 60 su un corpo 72 è voluto — è il text style `numeri` del file. */
.tcs__numero {
  margin: 0;
  flex: none;
  font-family: "Barlow Condensed", var(--tcs-font);
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 0.83333;
  color: var(--tcs-step-num);
  opacity: 0.3;
  /* L'a capo scritto nel campo (01/10): «Scope» sopra «01». Con un numero di una riga non
     cambia niente. */
  white-space: pre-line;
}

.tcs__step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* `body m`, non `body s`: è l'unico testo del modulo che cambia stile fra le due
   disposizioni, e sotto la soglia resta 20/30 perché i body non scendono. */
.tcs__step-desc {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tcs-text);
}
/* `body s` 18/28 Regular: lo `Style` di `Text/Corpo` esposto nel passo, scelto per istanza
   (campo `passi_description_style`). Su `fotovoltaico` i tre passi lo usano; il default del
   componente resta body m. Come body m, non scende sotto la soglia. */
.tcs__step-desc--body_s {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55556;
}

/* L'ancora mobile di questa disposizione — vedi la nota su `--tcs-pad-v`. */
.tcs--elenco_numerato { --tcs-pad-v: clamp(64px, 44.63px + 4.967vw, 140px); }

/* --- Indicatori (01/10) ------------------------------------------------------------------
   Dalla fascia `gruppo` di `transizione-energetica`, «Progetti di mitigazione climatica»:
   disegnata a mano, nessun componente. Letta il 01/10:

     sezione       fondo `Primary 20` (qui: `Tema = Azzurro`), padding 100 / 160
     intro         testo 754, H2 48/58 Navy · body m 20/30 Dark gray
     colonna       816, indicatori in colonna con gap 24
     indicatore    nessun fondo, padding 32/60/32/32, gap 24: icona 128 `Secondary` ·
                   valore `numeri` 72/60 · gap 12 · frase body m bold 20/30 Navy

   Dal 02/10 sera la fascia è la variante `Disposizione = Indicatori` di `Sezione Due Colonne`
   col blocco `Indicatore` (§87), e ha la sua mobile reference: padding 50/24, intro e
   indicatori a 40, indicatori a 40 fra loro, **icona 64 sopra il testo** a 16, valore sempre
   72. I valori sopra sono quelli del componente.

   Divergenze dal frame, tutte per farlo stare nel set:
   1. **lo split**: il frame fa 779 + 48 + 816 = 1643, cioè esce di 43 dalla gabbia. Qui la
      colonna degli indicatori resta 816 (51%) e lo stacco 48 (3%); l'intro prende il resto,
      736 — 18 meno del testo disegnato;
   2. **titolo e testo sono staccati di 24**, come nell'intro di tutte le disposizioni, non di
      48 come nel frame: è la colonna che rende il set un modulo solo;
   3. **la frase è body m bold su tutti e due**: nel frame lo è sul primo indicatore, sul
      secondo è body m. Dove i due divergono vale il primo, come per i pilastri;
   4. il padding verticale scende a **50 a 390**, come nella mobile reference. */
.tcs--indicatori { --tcs-pad-v: clamp(50px, 37.25px + 3.268vw, 100px); }
.tcs--indicatori .tcs__inner { gap: 3%; }
.tcs--indicatori .tcs__intro { flex: 0 0 46%; }

.tcs__indicatori {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tcs__indicatore {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 60px 32px 32px;
}
/* `Secondary`, come le icone delle card. Sul navy (tema scuro) il `Secondary` fa 2,5:1 col
   fondo, sotto il 3:1 di un elemento grafico: lì va bianco. */
.tcs__ind-icona {
  display: block;
  flex: none;
  width: 128px;
  height: 128px;
  color: var(--tcs-icon);
}
.tcs--scuro .tcs__ind-icona { color: var(--tcs-white); }
.tcs__ind-testi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Valore e frase hanno il colore dei titoli dell'intro: Navy sui temi chiari, bianco sul navy. */
.tcs__ind-valore {
  margin: 0;
  font-family: "Barlow Condensed", var(--tcs-font);
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 0.83333;
  color: var(--tcs-intro-title);
}
.tcs__ind-testo {
  margin: 0;
  font-family: var(--tcs-font);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tcs-intro-title);
}

@media (prefers-reduced-motion: reduce) {
  .tcs__button-arrow,
  .tcs__cta-arrow,
  .tcs__card,
  .tcs__card-bg,
  .tcs__card-scrim { transition: none; }
}

/* --- Soglie ----------------------------------------------------------------------------
   Nessuna delle tre viene da Figma, e non può venirne: un file di disegno tiene due
   estremi, i difetti vivono in mezzo. Sono misurate sul vincolo vero, cioè quanto si può
   stringere una card prima che il titolo da 28px si spezzi. La reference mobile dimostra
   che 342 basta; sotto i ~300 comincia a rompersi.

   1280 — l'intro esce di fianco e passa sopra.
     Affiancata, la colonna card vale il 59.25% della gabbia. A 1280 la gabbia è 1074,
     quindi ogni card sta a 302: è l'ultimo valore accettabile. Sotto, l'intro va sopra a
     piena larghezza e le card si riprendono tutto lo spazio.
   840 — le card passano a una colonna.
     Sempre in due colonne, a 840 la card scende a 323 e continua a calare. Una colonna
     sola è la stessa scelta della reference mobile, presa 70px prima della soglia.
   768 — il mobile disegnato.
     Qui cambia la tipografia, non la disposizione: quella è già cambiata sopra. */

@media (max-width: 1280px) {
  .tcs__inner { display: block; }
  /* Il cappello a piena larghezza avrebbe righe da 1000px: oltre le 100 battute la
     lettura si perde. Il tetto è nostro, Figma non ha un caso intermedio da leggere. */
  .tcs__intro {
    max-width: 720px;
    margin-bottom: 48px;
  }
  /* Lo sfalsamento serviva a bilanciare l'intro di fianco. Senza, è solo un buco. */
  .tcs__cell:nth-child(even) { margin-top: 0; }
  /* Con l'intro sopra, il rientro di 32 degli indicatori li staccherebbe dal bordo del testo. */
  .tcs__indicatore { padding-left: 0; }
}

@media (max-width: 840px) {
  .tcs__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .tcs__title { font-size: 3.2rem; line-height: 1.15625; }
  .tcs__subtitle { font-size: 1.8rem; line-height: 1.38889; }
  /* `body m` non cambia: la descrizione resta 20/30 anche in mobile. Lo dice la reference,
     ed è l'unico dei tre testi a non avere una controparte `mobile`. */

  /* `Dimensione=Small`, come su `Hero - Generic`. Il testo resta 16/21. */
  .tcs__button,
  .tcs__button:link,
  .tcs__button:visited,
  .tcs__button:hover,
  .tcs__button:focus,
  .tcs__button:active {
    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;
  }
  /* La reference stacca il bottone di 32 dai testi, non di 24 come gli altri. */
  .tcs__button { margin-top: 8px; }

  /* Altezza HUG: la card si prende quella del contenuto. */
  .tcs__card { min-height: 0; }

  /* Elenco numerato — dalla sua reference mobile.
     Il numero **resta a sinistra** e non passa sopra: impilandolo si guadagnano 64px di
     larghezza ma si perde la lettura a colonna dei passi, che è il senso del modulo.
     A 294 di contenuto il numero a 72 con 48 di stacco lascerebbe 170 al testo: scendono
     tutti e due insieme. */
  .tcs--elenco_numerato .tcs__step { padding: 24px; gap: 16px; }
  .tcs--elenco_numerato .tcs__numero { font-size: 4.8rem; line-height: 0.875; }
  /* Un numero lungo — «Scope 01», 106px a 48 — lascerebbe al testo 172px a 390: dodici righe
     per la descrizione. Il testo chiede almeno 200px, e se non li ha **va sotto il numero**.
     «01» (46px) non arriva alla soglia e resta di fianco, come nella reference. */
  .tcs--elenco_numerato .tcs__step { flex-wrap: wrap; }
  .tcs--elenco_numerato .tcs__step-body { flex: 1 1 200px; }

  /* `Sezione Due Colonne — Mobile reference / Indicatori`: icona 64 **sopra** il testo, a 16 —
     affiancata lascerebbe al testo 198px e «61%» andrebbe a capo. Valore a 72 come a desktop. */
  .tcs--indicatori .tcs__intro { margin-bottom: 40px; }
  .tcs__indicatori { gap: 40px; }
  .tcs__indicatore { flex-direction: column; padding: 0; gap: 16px; }
  .tcs__ind-icona { width: 64px; height: 64px; }
  /* `H3` → `H3 mobile` (22/28) su **tutte e due** le disposizioni. Fino al 28/09 valeva solo
     per l'elenco numerato: la reference `2×2 sfalsata` teneva il titolo della card a 32, e
     a 32 dentro una card da 342 andava a tre righe. La grafica l'ha portata a `H3 mobile`
     (§71, punto 4, 28/09), come l'elenco numerato dello stesso set. */
  .tcs__card-title { font-size: 2.2rem; line-height: 1.27273; }
}

/* ---- 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à. */
/* Il bottone è `Variante=White`: in hover si riempie di `Primary` con testo e freccia
   bianchi, premuto va a `Primary scuro`. Su `Tema = Scuro` e `Gradiente` sta sul navy, e
   vale «Controlli su fondo navy» del §70 (§72, 28/09): **il bordo diventa bianco** e tiene la
   forma del pulsante. `--tcs-btn-edge` lo dichiara solo `.tcs--scuro`: sui temi chiari non
   esiste, e valgono i fallback della tabella su fondo chiaro (bordo uguale al fondo). */
.tcs__button:hover {
  color: var(--tcs-white);
  background: var(--tcs-navy);
  border-color: var(--tcs-btn-edge, var(--tcs-navy));
}
.tcs__button:active {
  color: var(--tcs-white);
  background: var(--color-primary-scuro, #031b3b);
  border-color: var(--tcs-btn-edge, var(--color-primary-scuro, #031b3b));
}
/* `cta secondaria` nelle card: `Primary scuro` e sottolineatura in hover, premuto come hover.
   Sulla card fotografica in hover resta bianca — vedi `--tcs-cta-hover` più su. */
.tcs__cta:hover,
.tcs__cta:active { color: var(--tcs-cta-hover, var(--color-primary-scuro, #031b3b)); }
.tcs__cta:hover .tcs__cta-label { text-decoration: underline; text-underline-offset: 3px; }
.tcs__cta:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .tcs__button { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .tcs__button-arrow,
  .tcs__cta-arrow { transition: transform 0.15s ease; }
  .tcs__cta { transition: color 0.15s ease; }
  .tcs__button:hover .tcs__button-arrow,
  .tcs__cta:hover .tcs__cta-arrow { transform: translateX(4px); }
}