/* ==========================================================================
   site.css — tutti gli stili di ProntoPoliurea (si carica dopo bootstrap.min.css)

   1. Token: font e variabili --pp-*. È l'unica sezione con valori fissi: il
      resto del file usa solo queste variabili.
   2. Tema di Bootstrap: le classi di Bootstrap con i valori del sito.
   3. Testo e titoli.
   4. Regole del template MVC.
   5. Componenti: solo ciò che Bootstrap non ha (header, footer, hero, card…).
   ========================================================================== */

/* ==========================================================================
   1. TOKEN — colori, font, misure
   Valori letti da Figma (file 5Jp6MmU2EnFXGx3JDl6BAR, frame 1:2 a 1920px).

   Dimensioni dei testi: più piccole di Figma, che a 1920 ha paragrafi a 30px e
   h1 a 80px (scelta dell'utente del 6/11/2026). A 1366 sono vicine a Figma in proporzione.
   Fluide, lineari tra 375px e 1920px di viewport:
     clamp(MIN, A + Bvw, MAX)   B = (MAX - MIN) / 1545 * 100
                                A = MIN - (MAX - MIN) * 375 / 1545   (in rem, /16)
   ========================================================================== */

/* Font serviti dal sito (non da Google): set latino, file variabili 300–800.
   Se il file cambia, cambia il nome (versione di Google nel nome). Il layout
   precarica Outfit con lo stesso URL. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin-v15.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-latin-v20.woff2") format("woff2");
}

:root {
  /* --- Colori ------------------------------------------------------------ */
  --pp-color-primary: #dc7637;              /* arancione (Figma ne usa 3 quasi uguali: unificati) */
  --pp-color-primary-rgb: 220, 118, 55;
  --pp-color-primary-hover: #c66a32;        /* arancione scurito del 10% (hover dei bottoni) */
  --pp-color-primary-dark: #b05e2c;         /* scurito del 20%: bottoni premuti, hover dei link (4,7:1 su bianco) */
  --pp-color-primary-dark-rgb: 176, 94, 44;
  --pp-color-primary-light: #eaad87;        /* schiarito del 40%: hover dei link su scuro (5,8:1) */
  --pp-color-primary-light-rgb: 234, 173, 135;
  --pp-color-primary-text-emphasis: #582f16;     /* tinte per i componenti "subtle" di Bootstrap */
  --pp-color-primary-bg-subtle: #f8e3d7;
  --pp-color-primary-border-subtle: #f1c8af;
  --pp-color-primary-bg-subtle-dark: #2c180b;
  --pp-color-primary-border-subtle-dark: #844721;

  --pp-color-dark: #3d3a39;                 /* header, fascia «Metodo», footer, voci con la spunta */
  --pp-color-dark-rgb: 61, 58, 57;
  --pp-color-dark-hover-rgb: 49, 46, 46;    /* scuro scurito del 20% (hover di .link-dark) */
  --pp-color-text: #2f2f32;                 /* testo su chiaro */
  --pp-color-text-rgb: 47, 47, 50;
  --pp-color-white: #fff;
  --pp-color-white-rgb: 255, 255, 255;
  --pp-color-divider: rgba(255, 255, 255, 0.4);   /* linea del footer */

  --pp-focus-ring-color: var(--pp-color-primary); /* pieno: al 25% non arriva a 3:1 */

  /* --- Font -------------------------------------------------------------- */
  --pp-font-base: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pp-font-alt: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pp-fw-light: 300;
  --pp-fw-regular: 400;
  --pp-fw-bold: 700;
  --pp-fw-extrabold: 800;

  /* --- Dimensioni dei testi (375px → 1920px) ---------------------------- */
  --pp-fs-h1: clamp(2.125rem, 1.67rem + 1.942vw, 4rem);          /* 34 → 64 */
  --pp-fs-h2: clamp(1.875rem, 1.481rem + 1.683vw, 3.5rem);       /* 30 → 56 */
  --pp-fs-h2-accent: 0.93em;                                     /* riga in ExtraBold dell'h2 */
  --pp-fs-h3: clamp(1.75rem, 1.447rem + 1.294vw, 3rem);          /* 28 → 48 */
  --pp-fs-h3-small: max(1.5rem, 0.75em);                         /* mai sotto 24px (contrasto su arancione) */
  --pp-fs-h4: clamp(1.25rem, 1.189rem + 0.259vw, 1.5rem);        /* 20 → 24 */
  --pp-fs-h5: clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem);     /* 18 → 22 */
  --pp-fs-h6: clamp(0.9375rem, 0.907rem + 0.129vw, 1.0625rem);   /* 15 → 17 */
  --pp-fs-lead: clamp(1.25rem, 1.159rem + 0.388vw, 1.625rem);    /* 20 → 26 */
  --pp-fs-body: clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem);   /* 18 → 22 */
  --pp-fs-footer: clamp(1rem, 0.97rem + 0.129vw, 1.125rem);      /* 16 → 18 */
  --pp-fs-sm: clamp(0.8125rem, 0.797rem + 0.065vw, 0.875rem);    /* 13 → 14 */
  --pp-fs-label: clamp(1.1875rem, 1.142rem + 0.194vw, 1.375rem); /* 19 → 22, PRIMA/DOPO in grassetto */
  --pp-fs-btn: 1.1875rem;                                        /* 19, grassetto: testo grande per WCAG */
  --pp-fs-btn-sm: 1.1875rem;                                     /* non più piccolo: bianco su arancione */
  --pp-fs-btn-lg: 1.375rem;                                      /* 22 */

  /* --- Interlinea -------------------------------------------------------- */
  --pp-lh-tight: 0.9;      /* h1 */
  --pp-lh-heading: 1;      /* titoli: in Figma 100% */
  --pp-lh-alt: 1.2;        /* titoli in Inter (h5, h6) */
  --pp-lh-body: 1.3;       /* paragrafi: in Figma 100%, ma le righe risultano schiacciate */
  --pp-lh-footer: 1.55;
  --pp-lh-ui: 1.5;         /* bottoni e componenti */

  /* --- Raggi, bordi, ombre ---------------------------------------------- */
  --pp-radius-label: 0.375rem;                                   /* 6: etichette PRIMA/DOPO */
  --pp-radius-photo: 1rem;                                       /* 16: cornici delle foto */
  --pp-radius-card: clamp(1.25rem, 1.007rem + 1.036vw, 2.25rem); /* 20 → 36: card */
  --pp-border-photo: clamp(0.1875rem, 0.142rem + 0.194vw, 0.375rem); /* 3 → 6: bordo arancione delle foto */
  --pp-shadow-soft: 0 0 1rem rgba(var(--pp-color-primary-rgb), 0.35);     /* ombra leggera di default: 16px */
  --pp-shadow-glow: 0 0 1.9375rem rgba(var(--pp-color-primary-rgb), 0.9); /* alone in hover e focus: 31px */
  --pp-transition-glow: box-shadow 0.4s ease;                    /* passaggio morbido tra ombra e alone */

  /* --- Spazi e griglia --------------------------------------------------- */
  --pp-section-py: clamp(3.5rem, 3.136rem + 1.553vw, 5rem);      /* 56 → 80: spazio verticale delle sezioni */
  --pp-section-2-py: calc(var(--pp-section-py) * 2);             /* 112 → 160: il doppio di --pp-section-py */
  --pp-footer-pt: clamp(3.5rem, 2.529rem + 4.142vw, 7.5rem);     /* 56 → 120: spazio sopra il footer */
  --pp-container-max: clamp(1320px, 84.375vw, 1620px);           /* come Bootstrap fino a ~1564px, poi 1596 + gutter */

  /* --- Header e footer (Figma × 0,8, come i testi) ---------------------- */
  --pp-header-py: clamp(0.625rem, 0.443rem + 0.777vw, 1.375rem);    /* 10 → 22 */
  --pp-header-inner-max: clamp(30rem, 45.7vw, 54.8125rem);          /* a 1920 i bottoni stanno a x 517 e 1394, come in Figma */
  --pp-logo-header-w: clamp(4.5rem, 4.075rem + 1.812vw, 6.25rem);   /* 72 → 100 (Figma 126) */
  --pp-logo-footer-w: clamp(7.5rem, 6.954rem + 2.33vw, 9.75rem);    /* 120 → 156 (Figma 194) */

  /* --- Sezioni della home ------------------------------------------------ */
  --pp-hero-py: clamp(3rem, 1.786rem + 5.178vw, 8rem);              /* 48 → 128: a 1920 hero alta circa 466 (Figma 583 × 0,8) */
  --pp-hero-overlay-opacity: 0.85;
  --pp-hero-photo-brightness: 0.65;                                 /* con velo all'85%: bianco almeno 3,08:1 su tutta la foto (senza: 2,63:1) */
  --pp-logo-hero-w: clamp(9.375rem, 12.66vw, 15.1875rem);           /* fino a 243 (Figma 304 × 0,8) */
  --pp-section-icon-w: clamp(3.25rem, 2.552rem + 2.977vw, 6.125rem); /* 52 → 98 (Figma 122 × 0,8): alta come l'h2 su due righe */
  --pp-band-py: clamp(3rem, 2.272rem + 3.107vw, 6rem);              /* 48 → 96: fascia scura */
  --pp-monogram-w: clamp(14rem, 22.8vw, 27.375rem);                 /* fino a 438, come Figma */
  --pp-check-step: 0.1875rem;                                       /* 3: sfalsamento delle voci con la spunta */
  --pp-text-measure: 34em;                                          /* larghezza massima dei paragrafi: circa 70 caratteri per riga */

  /* «Per ogni esigenza» */
  --pp-hscroll-py: min(var(--pp-section-py), 7svh);                 /* spazio sopra e sotto, come le altre sezioni; meno sugli schermi bassi */
  --pp-hscroll-intro-gap: clamp(1.5rem, 1.136rem + 1.553vw, 3rem);  /* 24 → 48: tra il testo e le card */
  --pp-hscroll-gap: clamp(1rem, 0.272rem + 3.107vw, 4rem);          /* 16 → 64: spazio tra le card (Figma circa 80) */
  --pp-hscroll-card-w: min(85vw, clamp(20rem, 26vw, 31.25rem), 80vh); /* 320 → 500: su desktop se ne vedono circa tre; su telefono si intravede la card dopo */
  --pp-hscroll-card-h: calc(var(--pp-hscroll-card-w) / 0.9);        /* proporzione delle card in Figma, 701 × 779 */
  --pp-hscroll-h3-min: 1.75rem;                                     /* 28: titolo delle card, non più piccolo */
  --pp-hscroll-h3: max(var(--pp-hscroll-h3-min), min(var(--pp-fs-h3), calc(var(--pp-hscroll-card-w) * 0.075))); /* in proporzione alla card */
  --pp-hscroll-shadow-space: 2rem;                                  /* nella fila a mano: spazio perché l'ombra non venga tagliata */

  /* Foto: misure in proporzione allo schermo, come Figma a 1920. */
  --pp-photos-w: clamp(24rem, 33vw, 39.625rem);                     /* blocco PRIMA/DOPO: fino a 634 */
  --pp-ratio-photo-portrait: 139.7%;                                /* cornici PRIMA/DOPO: 384 × 536 */
  --pp-ratio-photo-wide: 63.9%;                                     /* cornice operai: 911 × 582 */
  --pp-photo-skew: 3.8deg;                                          /* inclinazione della cornice degli operai */
  --pp-photo-skew-cover: 1.07;                                      /* ingrandimento perché la foto copra gli angoli */
  --pp-solution-photo-w: 47.45vw;                                   /* 911/1920 */
  --pp-solution-photo-inset: calc(7.5vw - 0.75rem);                 /* il bordo destro della foto a x = 816 su 1920 */
}


/* ==========================================================================
   2. TEMA DI BOOTSTRAP — Bootstrap 5.3.3 con i valori di ProntoPoliurea
   Collega i token alle variabili --bs-*, così le classi di Bootstrap
   (bg-primary, text-primary, btn-primary, bg-body, rounded-*,
   data-bs-theme="dark"…) nascono già con colori e misure del sito.
   Nessun valore fisso qui: solo var(--pp-*).

   Regola per il futuro: i componenti di Bootstrap non ancora usati (form,
   nav-pills, dropdown, pagination, accordion, btn-outline-*…) hanno colori di
   focus/attivo scritti fissi e usano l'interlinea del body (1.3): chi li
   introduce aggiunge qui il loro override.
   ========================================================================== */

/* --- Tema chiaro ---------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--pp-color-primary);
  --bs-primary-rgb: var(--pp-color-primary-rgb);
  --bs-primary-text-emphasis: var(--pp-color-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--pp-color-primary-bg-subtle);
  --bs-primary-border-subtle: var(--pp-color-primary-border-subtle);
  --bs-dark: var(--pp-color-dark);
  --bs-dark-rgb: var(--pp-color-dark-rgb);

  --bs-body-font-family: var(--pp-font-base);
  --bs-body-font-size: var(--pp-fs-body);
  --bs-body-font-weight: var(--pp-fw-light);
  --bs-body-line-height: var(--pp-lh-body);
  --bs-body-color: var(--pp-color-text);
  --bs-body-color-rgb: var(--pp-color-text-rgb);

  /* Link nel testo: colore del testo, niente arancione (3,1:1 su bianco). */
  --bs-link-color: var(--pp-color-text);
  --bs-link-color-rgb: var(--pp-color-text-rgb);
  --bs-link-hover-color: var(--pp-color-primary-dark);
  --bs-link-hover-color-rgb: var(--pp-color-primary-dark-rgb);

  --bs-focus-ring-color: var(--pp-focus-ring-color);

  --bs-border-radius-sm: var(--pp-radius-label);  /* rounded-1, etichette */
  --bs-border-radius-lg: var(--pp-radius-photo);  /* rounded-3, foto */
  --bs-border-radius-xxl: var(--pp-radius-card);  /* rounded-5, card */
}

/* --- Tema scuro (header, fascia «Metodo», footer) ------------------------- */
/* Bootstrap qui rimette colori propri (link azzurri, sfondo #212529…): vanno riscritti. */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--pp-color-dark);
  --bs-body-bg-rgb: var(--pp-color-dark-rgb);    /* .bg-body legge la versione -rgb */
  --bs-body-color: var(--pp-color-white);
  --bs-body-color-rgb: var(--pp-color-white-rgb);
  --bs-emphasis-color: var(--pp-color-white);
  --bs-emphasis-color-rgb: var(--pp-color-white-rgb);

  --bs-link-color: var(--pp-color-white);
  --bs-link-color-rgb: var(--pp-color-white-rgb);
  --bs-link-hover-color: var(--pp-color-primary-light);
  --bs-link-hover-color-rgb: var(--pp-color-primary-light-rgb);

  --bs-primary-text-emphasis: var(--pp-color-primary-light);
  --bs-primary-bg-subtle: var(--pp-color-primary-bg-subtle-dark);
  --bs-primary-border-subtle: var(--pp-color-primary-border-subtle-dark);
  --bs-border-color: var(--pp-color-divider);   /* anche la linea dell'hr */

  /* La variabile da sola non cambia il colore del testo del contenitore. */
  color: var(--bs-body-color);
}

/* --- Valori fissi di Bootstrap da riscrivere ------------------------------ */
.btn {
  --bs-btn-font-family: var(--pp-font-base);
  --bs-btn-font-size: var(--pp-fs-btn);
  --bs-btn-font-weight: var(--pp-fw-bold);
  --bs-btn-line-height: var(--pp-lh-ui);
}

/* Ripetuti dopo .btn: altrimenti la regola sopra annullerebbe le loro dimensioni. */
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-font-size: var(--pp-fs-btn-sm);
}

.btn-lg,
.btn-group-lg > .btn {
  --bs-btn-font-size: var(--pp-fs-btn-lg);
}

.btn-primary {
  --bs-btn-color: var(--pp-color-white);
  --bs-btn-bg: var(--pp-color-primary);
  --bs-btn-border-color: var(--pp-color-primary);
  --bs-btn-hover-color: var(--pp-color-white);
  --bs-btn-hover-bg: var(--pp-color-primary-hover);
  --bs-btn-hover-border-color: var(--pp-color-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--pp-color-primary-rgb);
  --bs-btn-active-color: var(--pp-color-white);
  --bs-btn-active-bg: var(--pp-color-primary-dark);
  --bs-btn-active-border-color: var(--pp-color-primary-dark);
  --bs-btn-disabled-color: var(--pp-color-white);
  --bs-btn-disabled-bg: var(--pp-color-primary);
  --bs-btn-disabled-border-color: var(--pp-color-primary);
}

.link-primary:hover,
.link-primary:focus {
  color: rgba(var(--pp-color-primary-dark-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: rgba(var(--pp-color-primary-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: rgba(var(--pp-color-primary-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark:hover,
.link-dark:focus {
  color: rgba(var(--pp-color-dark-hover-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: rgba(var(--pp-color-dark-hover-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: rgba(var(--pp-color-dark-hover-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

/* Etichette PRIMA/DOPO: almeno 19px in grassetto (bianco su arancione = testo grande). */
.badge {
  --bs-badge-font-size: var(--pp-fs-label);
  --bs-badge-font-weight: var(--pp-fw-bold);
}

/* Bootstrap mette opacity .25 e il colore del testo: qui la linea segue --bs-border-color
   (sul tema scuro: bianco al 40%, come la linea del footer in Figma). */
hr {
  color: var(--bs-border-color);
  opacity: 1;
}

/* Raggio delle card dai token, compreso quello interno: senza, card-img-top esce dagli angoli. */
.card {
  --bs-card-border-radius: var(--bs-border-radius-xxl);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-xxl) - var(--bs-card-border-width));
}

/* Senza bordo il raggio interno è uguale a quello esterno. (Non si può mettere
   --bs-card-border-width: 0: in calc() uno 0 senza unità rende invalido il raggio.) */
.card.border-0 {
  --bs-card-inner-border-radius: var(--bs-card-border-radius);
}

/* Contenitore: 1320px come Bootstrap fino a ~1564px, poi cresce fino a 1620px a 1920.
   (Le media query non accettano variabili: 1400px è il breakpoint xxl di Bootstrap.) */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--pp-container-max);
  }
}


/* ==========================================================================
   3. TESTO E TITOLI
   Font, dimensione, peso e colore del body arrivano dalla sezione 2
   (--bs-body-*). Qui: uno stile fisso per ogni titolo, valido sia per il tag
   sia per la classe omonima di Bootstrap (h2, .h2), così livello semantico e
   aspetto restano indipendenti (es. <h3 class="h6">). Ogni stile dichiara
   tutte le proprietà (famiglia, peso, dimensione, interlinea, colore,
   maiuscolo), così <h3 class="h6"> non eredita nulla dall'h3.
   ========================================================================== */

/* --- Colori dei titoli per contesto --------------------------------------- */
/* I contenitori ridefiniscono le variabili: vince sempre il contenitore più vicino. */
:root,
[data-bs-theme="light"] {
  --pp-h1-color: var(--pp-color-text);
  --pp-h2-color: var(--pp-color-text);
  --pp-h2-accent-color: var(--pp-color-primary);
  --pp-h3-color: var(--pp-color-text);
  --pp-h4-color: var(--pp-color-primary);
  --pp-h5-color: var(--pp-color-dark);
  --pp-h6-color: var(--pp-color-text);
}

/* Su scuro: titoli bianchi, accenti arancioni (arancione su scuro = 3,6:1, solo testo grande). */
[data-bs-theme="dark"] {
  --pp-h1-color: var(--pp-color-white);
  --pp-h2-color: var(--pp-color-white);
  --pp-h2-accent-color: var(--pp-color-primary);
  --pp-h3-color: var(--pp-color-white);
  --pp-h4-color: var(--pp-color-primary);
  --pp-h5-color: var(--pp-color-white);
  --pp-h6-color: var(--pp-color-white);
}

/* Su arancione: tutto bianco, accenti compresi. Dopo il tema scuro, così vince se stanno sullo stesso elemento. */
.bg-primary,
.text-bg-primary {
  --pp-h1-color: var(--pp-color-white);
  --pp-h2-color: var(--pp-color-white);
  --pp-h2-accent-color: var(--pp-color-white);
  --pp-h3-color: var(--pp-color-white);
  --pp-h4-color: var(--pp-color-white);
  --pp-h5-color: var(--pp-color-white);
  --pp-h6-color: var(--pp-color-white);
}

/* --- Titoli ----------------------------------------------------------------- */
/* Su schermi stretti una parola lunga («impermeabilizzare.») va a capo invece di uscire dal riquadro. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  overflow-wrap: break-word;
}

/* h1: «Soluzioni per tetti…», Light con la parola in strong in ExtraBold. */
h1,
.h1 {
  font-family: var(--pp-font-base);
  font-weight: var(--pp-fw-light);
  font-size: var(--pp-fs-h1);
  line-height: var(--pp-lh-tight);
  color: var(--pp-h1-color);
  text-transform: none;
}

h1 strong,
.h1 strong {
  font-weight: var(--pp-fw-extrabold);
}

/* h2: titoli di sezione. La parte in strong va a capo, ExtraBold maiuscolo, arancione. */
h2,
.h2 {
  font-family: var(--pp-font-base);
  font-weight: var(--pp-fw-light);
  font-size: var(--pp-fs-h2);
  line-height: var(--pp-lh-heading);
  color: var(--pp-h2-color);
  text-transform: none;
}

h2 strong,
.h2 strong {
  display: block;
  font-size: var(--pp-fs-h2-accent);
  font-weight: var(--pp-fw-extrabold);
  text-transform: uppercase;
  color: var(--pp-h2-accent-color);
}

/* h3: titoli delle card, ExtraBold maiuscolo. Il sottotitolo in small va a capo, Light. */
h3,
.h3 {
  font-family: var(--pp-font-base);
  font-weight: var(--pp-fw-extrabold);
  font-size: var(--pp-fs-h3);
  line-height: var(--pp-lh-heading);
  color: var(--pp-h3-color);
  text-transform: uppercase;
}

h3 small,
.h3 small {
  display: block;
  font-size: var(--pp-fs-h3-small);
  font-weight: var(--pp-fw-light);
  text-transform: none;
}

/* h4: frasi in evidenza («Non sempre è necessario demolire.»), Bold arancione. */
h4,
.h4 {
  font-family: var(--pp-font-base);
  font-weight: var(--pp-fw-bold);
  font-size: var(--pp-fs-h4);
  line-height: var(--pp-lh-heading);
  color: var(--pp-h4-color);
  text-transform: none;
}

/* h5: voci dell'elenco con le spunte, Inter Bold maiuscolo. */
h5,
.h5 {
  font-family: var(--pp-font-alt);
  font-weight: var(--pp-fw-bold);
  font-size: var(--pp-fs-h5);
  line-height: var(--pp-lh-alt);
  color: var(--pp-h5-color);
  text-transform: uppercase;
}

/* h6: titoli dei passi del metodo, Inter Bold. */
h6,
.h6 {
  font-family: var(--pp-font-alt);
  font-weight: var(--pp-fw-bold);
  font-size: var(--pp-fs-h6);
  line-height: var(--pp-lh-alt);
  color: var(--pp-h6-color);
  text-transform: none;
}

/* --- Testo ------------------------------------------------------------------ */
/* Bootstrap usa "bolder", che partendo dal Light (300) darebbe solo 400. */
b,
strong {
  font-weight: var(--pp-fw-bold);
}

.lead {
  font-size: var(--pp-fs-lead);
  font-weight: var(--pp-fw-light);
}

small,
.small {
  font-size: var(--pp-fs-sm);
}


/* ==========================================================================
   4. REGOLE DEL TEMPLATE MVC
   Adattate: tolta html { font-size: 14px } sotto i 768px (rimpiccioliva tutti
   i rem dei token); anello di focus con i colori del sito invece del blu fisso;
   tolte le regole per il footer assoluto del template (il footer in fondo alla
   pagina ora lo fanno le classi di Bootstrap sul body).
   ========================================================================== */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* ==========================================================================
   5. COMPONENTI — solo ciò che Bootstrap non ha
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */
.site-header {
  padding-block: var(--pp-header-py);
}

/* I bottoni non stanno ai bordi del contenitore ma vicino al logo, come in Figma. */
.site-header__inner {
  max-width: var(--pp-header-inner-max);
}

.site-header__logo {
  width: var(--pp-logo-header-w);
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding-top: var(--pp-footer-pt);
  font-size: var(--pp-fs-footer);
  line-height: var(--pp-lh-footer);
}

.site-footer__logo {
  width: var(--pp-logo-footer-w);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* --- Sezioni della home: spazi e icone ------------------------------------ */
.site-section {
  padding-block: var(--pp-section-py);
}

.site-section-2 {
  padding-block: var(--pp-section-2-py);
}

.site-band {
  padding-block: var(--pp-band-py);
}

.site-band__monogram {
  width: var(--pp-monogram-w);
}

.section-icon {
  flex: none;
  width: var(--pp-section-icon-w);
}

/* --- Hero ------------------------------------------------------------------ */
.site-hero {
  padding-block: var(--pp-hero-py);
}

/* Foto scurita sotto il velo: le tegole sono chiare e il titolo bianco scenderebbe sotto 3:1. */
.site-hero__photo {
  filter: brightness(var(--pp-hero-photo-brightness));
}

.site-hero__overlay {
  --bs-bg-opacity: var(--pp-hero-overlay-opacity);
}

.site-hero__logo {
  width: var(--pp-logo-hero-w);
}

/* --- Cornici delle foto: bordo arancione, angoli arrotondati --------------- */
.photo-frame {
  overflow: hidden;
  border: var(--pp-border-photo) solid var(--pp-color-primary);
  border-radius: var(--pp-radius-photo);
}

/* Foto e card: ombra leggera, alone pieno al passaggio del mouse o al focus
   (per il focus le foto hanno tabindex="0" nell'HTML; le card no, da tastiera si sposta la fila). */
.photo-frame,
.hscroll-track .card {
  box-shadow: var(--pp-shadow-soft);
  transition: var(--pp-transition-glow);
}

.photo-frame:hover,
.photo-frame:focus,
.hscroll-track .card:hover {
  box-shadow: var(--pp-shadow-glow);
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame,
  .hscroll-track .card {
    transition: none;
  }
}

.photo-frame--portrait .ratio {
  --bs-aspect-ratio: var(--pp-ratio-photo-portrait);
}

.photo-frame--wide .ratio {
  --bs-aspect-ratio: var(--pp-ratio-photo-wide);
}

/* Cornice inclinata: la foto si raddrizza dentro e si ingrandisce quanto basta a coprire gli angoli. */
.photo-frame--skew {
  transform: skewX(var(--pp-photo-skew));
}

.photo-frame--skew img {
  transform: skewX(calc(-1 * var(--pp-photo-skew))) scale(var(--pp-photo-skew-cover));
}

/* --- Paragrafi: oltre questa larghezza una riga di testo si legge male ------ */
.text-measure {
  max-width: var(--pp-text-measure);
}

/* Da lg (992px, breakpoint di Bootstrap: le media query non accettano variabili) */
@media (min-width: 992px) {
  /* Elenco con le spunte: voci sfalsate, seguendo la foto inclinata che sta accanto. Sotto lg restano allineate. */
  .check-list li {
    margin-left: calc(var(--i, 0) * var(--pp-check-step));
  }

  /* Foto PRIMA/DOPO sovrapposte, posizioni e proporzioni come in Figma (blocco 634 × 845). */
  .problem-photos {
    display: block;
    position: relative;
    width: var(--pp-photos-w);
    aspect-ratio: 634 / 845;
    margin: 0 0 0 auto;
  }

  .problem-photos__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 60.6%;
    margin-top: 0;
    padding: 0;
  }

  .problem-photos__item--dopo {
    top: 36.5%;
    left: 39.4%;
  }

  /* Foto degli operai larga più della colonna: esce dal bordo sinistro dello schermo. */
  .solution-photo {
    display: flex;
    justify-content: flex-end;
  }

  .solution-photo .photo-frame {
    flex: none;
    width: var(--pp-solution-photo-w);
    margin-right: var(--pp-solution-photo-inset);
  }
}

/* Da xl (1200px): l'accento dell'h2 resta su una riga. Tra 1200 e 1399px il contenitore è largo solo 1140:
   «POLIUREA A SPRUZZO» sporge di pochi pixel nel margine vuoto, invece di andare a capo. */
@media (min-width: 1200px) {
  .site-section h2 strong,
  .site-section-2 h2 strong {
    white-space: nowrap;
  }
}

/* --- «Una soluzione per ogni esigenza» -------------------------------------- */
/* Di base (niente JavaScript, animazioni ridotte, schermo basso): fila di card che si scorre a mano. */
.hscroll {
  padding-block: var(--pp-section-py);
}

.hscroll-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--pp-hscroll-card-w);
  grid-template-rows: 1fr auto;     /* foto e testo: stessa altezza in tutte le card */
  column-gap: var(--pp-hscroll-gap);
  margin-inline: calc(-0.5 * var(--bs-gutter-x));
  padding: var(--pp-hscroll-shadow-space) calc(0.5 * var(--bs-gutter-x));
  overflow-x: auto;
  scroll-padding-inline: calc(0.5 * var(--bs-gutter-x));
  scroll-snap-type: x proximity;
}

.hscroll-track .card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  scroll-snap-align: start;
}

.hscroll-track .card-img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 701 / 531;
  object-fit: cover;
}

/* Agganciata (classe aggiunta da site.js): la sezione resta ferma, le card si dimensionano sull'altezza che resta
   sotto titolo e testo. overflow: clip e non hidden, che renderebbe il blocco scorrevole: Tab e Ctrl+F sposterebbero
   scrollLeft sommandosi al translateX. Niente overflow su html, body o main: romperebbe position: sticky. */
.hscroll.is-pinned {
  padding-block: 0;
}

.is-pinned .hscroll-pin {
  position: sticky;
  top: max(0px, calc(100svh - var(--hscroll-pin-h, 100svh))); /* in fondo allo schermo: l'altezza la imposta site.js */
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100svh;
  padding-block: var(--pp-hscroll-py);
  overflow: clip;
}

/* La fascia sopra resta ferma insieme al blocco: si agganciano nello stesso momento, uno attaccato all'altra. */
.is-holding > .site-band {
  position: sticky;
  top: calc(max(0px, 100svh - var(--hscroll-pin-h, 100svh)) - var(--hscroll-band-h, 0px));
}

.is-pinned .hscroll-stage {
  display: flex;
  flex: 0 1 var(--pp-hscroll-card-h); /* alta quanto una card, si riduce se lo schermo è basso */
  align-items: center;
  min-height: 0;
  margin-top: var(--pp-hscroll-intro-gap);
  container-type: size;
}

.is-pinned .hscroll-track {
  flex: 0 0 100%;
  min-width: 0;                     /* senza, la fila si allarga quanto le card e non resta nulla da far scorrere */
  grid-auto-columns: min(105cqh, var(--pp-hscroll-card-w));    /* su schermi bassi la larghezza segue l'altezza disponibile */
  height: 100%;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

.is-pinned .hscroll-track .card-img-top {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

/* Titolo delle card in proporzione alla card e, quando è agganciata, all'altezza disponibile: la fascia di testo non
   ruba spazio alla foto. È l'unica eccezione allo stile fisso dell'h3. */
.hscroll-track h3 {
  font-size: var(--pp-hscroll-h3);
}

.is-pinned .hscroll-track h3 {
  font-size: max(var(--pp-hscroll-h3-min), min(var(--pp-hscroll-h3), 8cqh));
}

.hscroll .lead {
  text-wrap: pretty;
}