/* ==========================================================================
   SUNPRIME — Design tokens & base
   Fonte: Sunprime_Handoff_AgenziaSviluppo_v3_Maggio2026.docx (sez. 4)
   ========================================================================== */

/* Roobert — font del progetto Figma "SUNPRIME (Copy)".
   Un solo variable font (sottoinsieme latino, 135 KB) copre tutti i pesi 300–900.
   Assi disponibili: wght 300–900, ital 0–11, MONO 0–100 (sans → semi-mono → mono). */
@font-face {
  font-family: "Roobert";
  src: url("../assets/fonts/roobert-vf.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colori brand — valori autoritativi da Figma "SUNPRIME (Copy)",
     variabili COLOR PALETTE del frame HOMEPAGE 20 (2593:1436) */
  --c-blue: #0043FF;   /* COLOR PALETTE/BLUE */
  --c-navy: #000D33;   /* COLOR PALETTE/BLUE DARK */
  --c-lime: #F6FF97;   /* COLOR PALETTE/YELLOW */
  --c-white: #FFFFFF;
  /* Il bianco attenuato del sistema. 0.84 non e' un gusto: e' il minimo che
     tiene 4,5:1 sul blu #0043FF, che e' il fondo peggiore del sito (sul navy
     bastava 0,56). Sotto questo valore un testo secondario sulla lastra blu
     scende sotto la soglia WCAG, ed e' successo su cinque pagine. */
  --c-white-soft: rgba(255, 255, 255, 0.84);
  --c-gray: #ADB5BD;   /* COLOR PALETTE/GRAY */
  --c-orange: #F26B43;
  --c-blue-rgb: 0, 67, 255;
  --c-navy-rgb: 0, 13, 51;

  /* Colori di stato. Il brand non ne aveva: servono per moduli, messaggi e
     tabelle, dove "verde/rosso" e' una convenzione che il lettore si aspetta.
     Ogni tinta e' scelta per stare sopra il 4,5:1 sia sul bianco sia sul
     proprio fondo tenue al 10%, cosi' vale anche per il testo di corpo.
       errore     #B3261E  6,54:1 su bianco  5,53:1 sul proprio fondo
       successo   #146B2C  6,63:1            5,71:1
       attenzione #7A5200  6,92:1            5,98:1
       informativo = --c-blue  6,47:1        (nessun colore nuovo) */
  --c-error: #B3261E;
  --c-success: #146B2C;
  --c-warning: #7A5200;
  --c-info: var(--c-blue);
  --c-error-soft: rgba(179, 38, 30, 0.10);
  --c-success-soft: rgba(20, 107, 44, 0.10);
  --c-warning-soft: rgba(122, 82, 0, 0.10);
  --c-info-soft: rgba(0, 67, 255, 0.08);

  /* Profondita': tre gradini, non uno per componente. L'ombra serve a dire che
     un elemento galleggia sopra la pagina, non a decorarlo. */
  --shadow-1: 0 1px 2px rgba(0, 13, 51, 0.06), 0 2px 8px rgba(0, 13, 51, 0.05);
  --shadow-2: 0 14px 34px rgba(0, 13, 51, 0.14);
  --shadow-3: 0 24px 60px rgba(0, 6, 26, 0.55);

  /* Superfici/testo derivati (solo tinte neutre di supporto, no gradienti) */
  --c-ink: var(--c-navy);
  --c-ink-soft: rgba(0, 13, 51, 0.64);
  --c-line: rgba(0, 13, 51, 0.12);
  --c-line-on-dark: rgba(255, 255, 255, 0.16);
  --c-sep: rgba(255, 255, 255, 0.22);   /* linee di separazione su fondo scuro (Figma) */
  --c-surface: #FFFFFF;
  --c-surface-alt: #F4F5FA;

  /* Tipografia */
  --font-display: "Roobert", "Inter", system-ui, sans-serif;
  --font-body: "Roobert", "Inter", system-ui, sans-serif;

  /* Layout */
  /* Canvas Figma: frame 1920 con gutter 80px → contenuto 1760px */
  --content-max: 1920px;
  --pad-desktop: 80px;
  --pad-mobile: 24px;

  /* Scala di spacing coerente (base 4pt) — usare i token, non valori arbitrari */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Ritmo verticale delle sezioni: fluido (respira sui grandi schermi, si stringe sui piccoli) */
  --section-gap: clamp(3.5rem, 6.4vw, 7rem);   /* ~56px → 112px */
  --section-gap-mobile: clamp(3.5rem, 6.4vw, 7rem);

  /* Radius (0 per blocchi/sezioni, 4-8px input, pill per badge) */
  /* ---- Misure del Figma (canvas 1920) ----
     Vivevano dentro .page-chisiamo, ma le proporzioni dell'apertura e i raggi
     delle lastre valgono per tutto il sito: la pagina Chi siamo era solo la
     prima a usarle. N = valore / 1920 * 100. */
  --radius-panel: 40px;   /* raggio superiore delle lastre che salgono */
  --radius-card: 20px;
  --radius-media: 41px;

  --fs-96: clamp(52px, 5vw, 96px);
  --fs-64: clamp(34px, 3.3333vw, 64px);
  --fs-48: clamp(28px, 2.5vw, 48px);
  --fs-44: clamp(28px, 2.2917vw, 44px);
  --fs-40: clamp(24px, 2.0833vw, 40px);
  --fs-32: clamp(20px, 1.6667vw, 32px);
  --fs-28: clamp(18px, 1.4583vw, 28px);
  --fs-24: clamp(16px, 1.25vw, 24px);
  --fs-20: clamp(15px, 1.0417vw, 20px);

  --radius-input: 8px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Riempimenti e aperture delle card a filo blu (catena, benefici, passaggi,
     percorsi): curva senza scatto iniziale e durata lunga. Erano solo su Chi
     siamo; ora le stesse card vivono anche sulle altre pagine. */
  --ease-morbido: cubic-bezier(.33, .02, .24, 1);
  --durata-riempimento: .78s;
}

* { box-sizing: border-box; }

/* Niente rimbalzo dello scroll: oltre il bordo superiore si vedeva la striscia
   bianca del fondo pagina. `overscroll-behavior-y: none` toglie l'elastico; il
   colore scuro sul canvas fa da rete se il browser non lo supporta. */
html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background-color: #05071c;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Gutter orizzontale fluido: 24px → 80px senza salti di breakpoint */
  padding-inline: clamp(var(--pad-mobile), 5.5vw, var(--pad-desktop));
}

section[data-section] {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* Stile mono del Figma: asse MONO a 100.
   La sola larghezza non bastava a fissare corpo e tracking (20.2px di avanzamento
   per carattere sono compatibili sia con 21px+0.33em sia con 32px+0.04em).
   Il rapporto larghezza/altezza dei glifi scioglie l'ambiguità: 17.7 nel Figma
   contro 25.4 con 0.33em → il corpo è 32px e il tracking quasi nullo. */
.eyebrow,
.stat-callout .label,
.tab-trigger .n,
.milestone-point,
.featured-card .idx {
  font-variation-settings: "MONO" 100, "wght" 500;
}

.eyebrow {
  font-size: clamp(13px, 1.5625vw, 30px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-blue);
}
/* Feedback cliente: l'occhiello di sezione in lime era troppo. Il testo e'
   bianco; del lime resta la tacca, che e' l'accento del marchio ridotto al
   minimo e non compete con il titolo che segue. */
.eyebrow.on-dark { color: var(--c-white); }
.eyebrow.eyebrow-plain { color: var(--c-white); }

/* Le classi .h1/.h2/.h3 portano tutta la tipografia del titolo, non solo il
   corpo. Prima davano la sola dimensione, e il resto — famiglia, peso,
   interlinea 1,08, crenatura — arrivava dal selettore h1,h2,h3,h4: bastava
   metterle su un elemento che titolo non e' (un <p class="h1">, o le righe
   della scala tipografica in questo documento) perche' l'interlinea tornasse
   a quella del corpo, 1,5, e il titolo si slabbrasse. Una classe che dice
   «questo e' un titolo» deve renderlo un titolo. */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.h1 { font-size: clamp(34px, 4.4vw, 56px); }
.h2 { font-size: clamp(28px, 3.4vw, 42px); }
.h3 { font-size: clamp(20px, 2vw, 26px); }
.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--c-ink-soft); line-height: 1.55; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--c-blue); color: var(--c-white); }
.btn-primary:hover { background: #0036d6; }
/* CTA piena blu (Figma: "Scopri di più" nelle Soluzioni — 190×45, radius 10) */
.btn-blue {
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.btn-blue:hover { background: #0036d6; }
.btn-lime { background: var(--c-lime); color: var(--c-navy); }
.btn-lime:hover { background: #E9F56B; }

/* CTA Figma: bordo e testo bianchi su fondo trasparente; in hover il giallo
   riempie il pulsante scorrendo da sinistra verso destra. */
.btn-ghost {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  color: var(--c-white);
  border: 1px solid var(--c-white);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { color: var(--c-navy); border-color: var(--c-lime); }
.btn-ghost:hover::before,
.btn-ghost:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .btn-ghost::before { transition: none; }
}
.btn-white { background: var(--c-white); color: var(--c-navy); }
/* Pulsante CTA con raggio Figma (rounded-12), non pill pieno */
/* Figma nodo GET IN TOUCH — 193×53, radius 12, testo 14px tracking 0.7px */
.btn-cta { border-radius: 12px; min-width: clamp(150px, 10vw, 193px); min-height: clamp(44px, 2.76vw, 53px); font-size: clamp(12px, 0.73vw, 14px); letter-spacing: 0.7px; }
.btn-white:hover { background: #eef0f6; }
.btn-outline { background: transparent; color: currentColor; border-color: currentColor; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.pill-badge {
  display: inline-flex;
  align-self: flex-start;
  flex: none;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill-badge.tetto { background: rgba(var(--c-blue-rgb), 0.1); color: var(--c-blue); }
.pill-badge.terra { background: rgba(var(--c-navy-rgb), 0.08); color: var(--c-navy); }
.pill-badge.agri { background: rgba(246, 255, 151, 0.35); color: #5c6600; }
.pill-badge.bess { background: var(--c-navy); color: var(--c-white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--c-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-input);
  z-index: 200;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Le sezioni sono sempre visibili: nessuna animazione reveal-on-scroll
   per garantire che il contenuto non dipenda da IntersectionObserver. */

/* L'attributo hidden deve vincere sempre.
   `.empty-state { display: grid }` ha la stessa specificita' di `[hidden]`
   ma sta nel foglio dell'autore, quindi vinceva lui: lo stato vuoto
   «Nessun articolo trovato» restava visibile senza che si fosse cercato
   niente. Vale per ogni componente che dichiara un display proprio. */
[hidden] { display: none !important; }