/* ============================================================
   carlotosi.it, VARIANTE MODERNA (proposta B, 20/07/2026)
   Minimalismo contemporaneo: bianco e aria, testata fissa,
   card morbide, verde e indaco. Mai rosso. Dal 26/09/2026 niente teal
   (decisione di Carlo): tasti d'offerta su verde chiaro, tasti di servizio
   su lavanda, testo piccolo in nero o indaco.
   Stessi contenuti della versione LITE: cambia solo la veste.
   ============================================================ */

/* ---------- schermata d'ingresso (solo Home, una volta a sessione) ----------
   Animazione CSS pura: funziona anche senza JavaScript. Lo script in index.html
   la salta se già vista nella sessione e rimuove l'overlay a fine animazione.
   Sfondo verde tenue -> la dissolvenza verso la Home si nota. */
.intro {
  --logo-w: min(620px, 86vw);      /* logo nuovo 2026: largo e basso (12:1) */
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  background: #FFFFFF;   /* tinta unita, niente sfumature */
  /* permanenza lunga (2,9s) poi dissolvenza lenta (1,4s) */
  animation: intro-esci 1.4s ease 2.9s forwards;
}
.intro img {
  width: var(--logo-w);
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  animation: intro-entra 0.85s ease 0.15s forwards;
}
/* "SRL, unipersonale" largo quanto il logo (Carlo, 26/09): una lettera per
   span, distribuite su tutta la larghezza; lo span vuoto è lo spazio fra le parole */
.intro .ragione {
  width: var(--logo-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: "Radio Canada", "Segoe UI", Calibri, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  color: #37378A;
  opacity: 0;
  animation: intro-entra 0.85s ease 0.5s forwards;
}
.intro.saltata { display: none; }
@keyframes intro-entra { to { opacity: 1; transform: none; } }
@keyframes intro-esci  { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

@font-face {
  font-family: "Radio Canada";
  src: url("assets/fonts/RadioCanada-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Radio Canada";
  src: url("assets/fonts/RadioCanada-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Radio Canada";
  src: url("assets/fonts/RadioCanada-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Radio Canada";
  src: url("assets/fonts/RadioCanada-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-titoli: "Radio Canada", "Segoe UI", Calibri, Arial, sans-serif;
  --font-corpo:  "Radio Canada", "Segoe UI", Calibri, Arial, sans-serif;

  /* Palette CARLO 2026 (senza rosso) */
  --verde:        #45A144;
  --verde-chiaro: #DCF0DC;
  --verde-soft:   #F3FAF3;
  --verde-hover:  #E9F6E9;
  --lavanda-soft: #F4F4FB;
  --indaco:       #4444A1;
  --indaco-scuro: #37378A;
  --lavanda:      #DCDCF0;
  /* il teal #408E6B è uscito dal brand il 26/09/2026: al suo posto il verde
     brand nei decori e il nero o l'indaco nel testo piccolo (il verde su bianco
     fa 3,3:1 e si legge solo grande) */
  --ink:          #000000;
  --ink2:         #444444;
  --ink3:         #666666;
  --bordo:        #E7E7E7;
  --bianco:       #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 106.25%; scroll-behavior: smooth; }   /* 17 px se il browser è a 16 */

/* sopra i 640 px la testata resta fissa: il link che prende il focus non deve finirci sotto */
@media (min-width: 641px) { html { scroll-padding-top: 8rem; } }

/* "Salta al contenuto": fuori schermo, compare col focus da tastiera */
.salta {
  position: absolute;
  left: -9999px;
  top: 0.6rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--verde-chiaro);
  color: var(--ink);
  font-family: var(--font-titoli);
  text-decoration: none;
}
.salta:focus { left: 1rem; }

body {
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bianco);   /* tinta unita, niente sfumature */
  line-height: 1.7;
}

::selection { background: var(--verde-chiaro); }

.contenitore {
  max-width: 48rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ---------- testata fissa ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bianco);   /* stessa tinta della pagina: nessuna banda visibile */
  max-width: none;
  padding-top: 1.2rem;
}

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 48rem;
  margin: 0 auto;
}

.testata img {
  width: 225px;
  height: auto;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* menu in alto come una pulsantiera (Carlo, 26/09): sei tasti tutti della stessa
   larghezza, su una riga sotto il logo; su telefono due file da tre.
   Accanto al logo non ci stavano sei tasti uguali senza rimpicciolire il testo. */
.testata { flex-direction: column; align-items: stretch; gap: 1rem; }

header nav > ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}

header nav > ul > li > a {
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 0.86rem;
  padding: 0.4rem 0.3rem;
}

/* Tasti (regole di Carlo del 26/09/2026): Home e offerta su verde chiaro,
   servizio su lavanda. Testo indaco (6:1 e più). Niente contorni né
   sottolineature (Carlo): la pagina aperta si riconosce dal testo più marcato. */
nav a {
  font-family: var(--font-titoli);
  font-size: 0.84rem;
  color: var(--indaco);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
}

nav a:hover, nav a:focus-visible { text-decoration: underline; }

/* servizio: Cosa faccio, Chi sono, Contatti */
header nav > ul > li:not(.con-sotto) > a { background: var(--lavanda); }

/* Home e offerta (Monitor FX, Monitor CFO e le loro sottovoci) */
header nav > ul > li:first-child > a,
header nav li.con-sotto > a,
header nav ul.sotto a { background: var(--verde-chiaro); }

/* "page" = la pagina aperta; "true" = la voce di area quando si è in una sua sottopagina */
nav a[aria-current] { font-weight: 500; }

/* ---------- menu in alto: voci con sottovoci (Monitor FX, Monitor CFO) ----------
   Si aprono al passaggio del mouse o con la tastiera (focus-within), solo dove
   c'è il mouse e lo schermo è largo. Su telefono restano chiuse: si arriva alle
   sottopagine dal menu interno dell'area. Esc chiude la tendina aperta: menu.js
   mette la classe "chiusa", che si toglie quando mouse e focus escono dalla voce. */
nav li.con-sotto { position: relative; }

nav ul.sotto {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 13rem;
  padding: 0.45rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

@media (hover: hover) and (min-width: 641px) {
  nav li.con-sotto:hover > ul.sotto,
  nav li.con-sotto:focus-within > ul.sotto { display: flex; }
  nav li.con-sotto.chiusa > ul.sotto { display: none; }
}

nav ul.sotto { gap: 0.25rem; }

nav ul.sotto a {
  display: block;
  white-space: nowrap;
  padding: 0.35rem 0.8rem;
}

/* ---------- tasti grandi: pagine Monitor FX e Monitor CFO (Carlo, 26/09) ----------
   Un tasto per voce, verde chiaro, con due righe di spiegazione.
   Tutto il riquadro è cliccabile. */
.tasti-grandi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.tasti-grandi a {
  display: block;
  background: var(--verde-chiaro);
  border-radius: 16px;
  padding: 1.3rem 1.2rem 1.4rem;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tasti-grandi a:hover {
  background: var(--verde-chiaro);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.tasti-grandi .nome {
  display: block;
  font-family: var(--font-titoli);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--indaco);
}

.tasti-grandi .nome small { font-size: 0.72em; font-weight: 400; color: var(--ink2); white-space: nowrap; }

.tasti-grandi .spiega { display: block; margin-top: 0.7rem; font-size: 0.92rem; }

.tasti-grandi .vai {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-titoli);
  font-size: 0.9rem;
  color: var(--indaco);
}

.tasti-grandi a:hover .vai,
.tasti-grandi a:focus-visible .vai { text-decoration: underline; }

@media (max-width: 640px) {
  .tasti-grandi { grid-template-columns: 1fr; }
}

/* ---------- menu interno di area (Monitor FX, Monitor CFO), sopra il titolo ---------- */
.sottomenu ul { gap: 0.5rem; margin-bottom: 2.6rem; }

/* sono tutte pagine d'offerta: verde chiaro */
.sottomenu a {
  padding: 0.3rem 0.9rem;
  background: var(--verde-chiaro);
}


.filetto {
  border: 0;
  height: 2px;
  background: var(--verde);   /* tinta piena, niente sfumature */
  margin: 1.2rem 0 0;
}

header .filetto { max-width: none; }

/* ---------- tipografia ---------- */
main { padding: 3.8rem 0 1rem; }

h1 {
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: 2.7rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  /* tinta piena: niente background-clip:text + color:transparent,
     che su un browser senza supporto farebbe sparire il titolo.
     2,7rem = testo grande: 3,26:1 basta per WCAG AA large. */
  color: var(--verde);
}

.sottotitolo {
  color: var(--ink2);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.4;
  margin-top: 1.6rem;
  max-width: 40rem;
}

h2 {
  font-family: var(--font-titoli);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 300;
  margin: 3.8rem 0 1.3rem;
}

h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--verde);   /* tinta piena, niente sfumature */
  margin-bottom: 0.55rem;
}

h3 {
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem;
}

p + p { margin-top: 1.2rem; }

a { color: var(--indaco); transition: background-color 0.15s ease; }

a:hover, a:focus-visible { background-color: var(--verde-chiaro); }

/* il logo in testata non si evidenzia al passaggio del mouse */
.testata a:hover, .testata a:focus-visible { background: none; }

b, strong { font-weight: 500; }

/* ---------- voci con spunta ---------- */
.voci { list-style: none; margin: 0.8rem 0 0; }

.voci > li {
  position: relative;
  padding: 0.65rem 0.8rem 0.65rem 2.35rem;
  margin: 0 -0.8rem 0.85rem;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.voci > li:hover { background: var(--verde-hover); }

.voci > li::before {
  content: "✓";
  content: "✓" / "";   /* i lettori di schermo non la leggono */
  position: absolute;
  left: 0.55rem;
  top: 0.72rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--verde-chiaro);
  color: var(--indaco);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voci b, .voci strong { font-weight: 500; }

/* ---------- passi numerati ---------- */
.passi { list-style: none; counter-reset: passo; margin: 0.8rem 0 0; }

.passi > li {
  counter-increment: passo;
  position: relative;
  padding: 0.65rem 0.8rem 0.65rem 2.6rem;
  margin: 0 -0.8rem 0.85rem;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.passi > li:hover { background: var(--verde-hover); }

.passi > li::before {
  content: counter(passo);
  position: absolute;
  left: 0.55rem;
  top: 0.62rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--lavanda);
  color: var(--indaco);
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- card servizi in home ---------- */
.due-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  margin-top: 2.8rem;
}

.servizio {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 1.8rem 1.8rem 1.9rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.servizio:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
  border-color: var(--verde);
}

.servizio .etichetta {
  display: inline-block;
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indaco);
  background: var(--verde-chiaro);   /* etichette d'offerta: tutte verde chiaro (Carlo, 26/09) */
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

.servizio h2 { margin: 1rem 0 0.6rem; font-size: 1.35rem; font-weight: 400; }

.servizio h2::before { display: none; }

.servizio p { color: var(--ink2); font-size: 0.92rem; }
.servizio .claim + p { margin-top: 0.9rem; }

.servizio a.rimando {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-titoli);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--indaco);
  background: var(--verde-chiaro);   /* tasto d'offerta */
  text-decoration: none;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
}

.servizio a.rimando:hover, .servizio a.rimando:focus-visible { text-decoration: underline; background: var(--verde-chiaro); }

/* Report FX in home: scheda a tutta larghezza sotto le due */
.servizio.fascia { margin-top: 1.8rem; }

/* ---------- nota legale ---------- */
.nota {
  border-top: 1px solid var(--bordo);
  margin-top: 3.6rem;
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--ink2);
}

.nota p + p { margin-top: 0.8rem; }

/* ---------- cronologia ---------- */
.cronologia { list-style: none; margin-top: 0.8rem; }

.cronologia > li {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0.8rem;
  margin: 0 -0.8rem;
  border-radius: 12px;
  border-bottom: 1px solid #EFEFEF;
  transition: background-color 0.15s ease;
}

.cronologia > li:hover { background: var(--verde-hover); }

.cronologia .anni {
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  font-size: 0.92rem;
}

.cronologia .cosa b { font-weight: 500; }
.cronologia .cosa span { color: var(--ink2); }

/* sottopunti a trattino dentro una voce */
.sottopunti { list-style: none; margin-top: 0.55rem; }

.sottopunti li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
  color: var(--ink2);
}

.sottopunti li::before {
  content: "-";
  content: "-" / "";
  position: absolute;
  left: 0;
  color: var(--ink);
}

/* battuta su Frida: frase a sinistra, foto grande (intera) a destra, bordo sfumato */
.frida-blocco {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-top: 3.4rem;
}

.frida-testo {
  flex: 1 1 40%;
  color: var(--ink3);
  font-size: 0.98rem;
}

.frida-foto {
  flex: 1 1 55%;
  width: 55%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  /* dissolvenza morbida del bordo sinistro e inferiore: la foto sfuma nella pagina */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 22%),
    linear-gradient(to top, transparent 0, #000 18%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 22%),
    linear-gradient(to top, transparent 0, #000 18%);
          mask-composite: intersect;
}

@media (max-width: 640px) {
  .frida-blocco { flex-direction: column; align-items: stretch; }
  .frida-foto { width: 100%; max-width: none; }
}

/* riferimento sotto la voce: dove e quando */
.voci .rif,
.cronologia .rif {
  display: block;
  font-weight: 400;
  font-size: 0.92em;
  color: var(--ink3);
  margin-top: 0.3rem;
}

/* ---------- contatti ---------- */
.recapiti { list-style: none; margin-top: 0.8rem; }

.recapiti > li {
  padding: 0.75rem 0.8rem;
  margin: 0 -0.8rem;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.recapiti > li:hover { background: var(--verde-hover); }

.recapiti .tipo {
  display: inline-block;
  width: 6.4rem;
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--indaco);
  font-size: 0.92rem;
}

a.linkedin { display: inline-block; line-height: 0; padding: 2px; }
a.linkedin svg { vertical-align: middle; }

/* ---------- anteprime ---------- */
.anteprime figure {
  margin: 2.6rem 0 0;
  transition: transform 0.18s ease;
}

.anteprime figure:hover { transform: translateY(-2px); }

.anteprime a.cornice {
  display: block;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.anteprime a.cornice:hover,
.anteprime a.cornice:focus-visible {
  border-color: var(--verde);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  background: none;
}

.anteprime img { display: block; width: 100%; height: auto; }

/* due anteprime affiancate (Monitor FX): lo spazio sopra lo dà la griglia */
.anteprime.due-colonne figure { margin-top: 0; }

.anteprime figcaption {
  font-size: 0.88rem;
  color: var(--ink2);
  margin-top: 0.8rem;
  padding: 0 0.2rem;
}

.anteprime figcaption b { font-weight: 500; color: var(--ink); }

/* ---------- invito finale ---------- */
.invito {
  margin-top: 4rem;
  background: var(--verde-soft);   /* tinta piena, niente sfumature */
  border-radius: 18px;
  padding: 2.1rem 2.2rem;
}

.invito h2::before { display: none; }

.invito p { max-width: 36rem; }

/* ---------- footer ---------- */
footer {
  margin-top: 5rem;
  padding: 0 0 3rem;
}

footer .filetto {
  height: 1px;
  background: var(--bordo);
  margin: 0 0 1.4rem;
}

footer p {
  font-size: 0.82rem;
  color: var(--ink3);
  max-width: 40rem;
}

footer p + p { margin-top: 0.7rem; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  html { font-size: 100%; }
  h1 { font-size: 2.1rem; }
  .testata { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .testata img { width: 230px; }
  header nav > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  header { position: static; }
  .due-colonne { grid-template-columns: 1fr; gap: 1.1rem; }
  .cronologia > li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* claim: riga sotto il nome (Monitor FX, Monitor CFO e le sottovoci) */
.claim {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--indaco);
  letter-spacing: 0.02em;
  margin-top: 0.55rem;
}
.claim + .sottotitolo { margin-top: 1.3rem; }

/* etichetta fra parentesi accanto al nome (Check FX, Monitor FX): non fa parte del nome */
h1 .qualifica { font-size: 0.5em; color: var(--ink2); letter-spacing: 0; }
.servizio .claim { font-size: 0.92rem; margin-top: 0.15rem; }