/* ============================================================
   Design system di filipporossi.it — stile V2 «Voce» (scelto da Filippo il 25/10/2026)
   Riferimento: melrobbins.com. Apertura scura con ritratto, fondo bianco, accento giallo
   (mai per i testi), Inter Tight per i titoli e Inter per il testo, bottoni a pillola.
   Lo usano il canvas del builder e il sito pubblico. Le classi cyl-* restano (blocchi del builder);
   le classi fr-* sono i componenti del sito.
   ============================================================ */

@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fr-notte: #121212;
  --fr-inchiostro: #161616;
  --fr-bianco: #ffffff;
  --fr-carta: #f6f5f1;
  --fr-linea: #e3e3e3;
  --fr-grigio: #4a4a4a;
  --fr-grigio-chiaro: #d7d7d7;
  --fr-giallo: #ffd84d;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titoli: "Inter Tight", "Inter", system-ui, sans-serif;
  --container: 1200px;
  --space-section: clamp(56px, 8vw, 104px);
  --gutter: clamp(20px, 4vw, 40px);

  /* nomi storici del builder, mappati sui colori del sito */
  --cyl-white: var(--fr-bianco);
  --cyl-black: var(--fr-inchiostro);
  --cyl-yellow: var(--fr-giallo);
  --cyl-paper: var(--fr-carta);
  --cyl-mist: var(--fr-carta);
  --cyl-line: var(--fr-linea);
  --cyl-black-80: var(--fr-grigio);
  --accent: var(--fr-giallo);
  --accent-soft: #fff5cc;
  --tracking-tight: -0.02em;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fr-bianco); }

.cyl-page, .fr-testata, .fr-piede {
  font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--fr-inchiostro);
  -webkit-font-smoothing: antialiased;
}
.cyl-page { margin: 0; background: var(--fr-bianco); }
.cyl-page *, .cyl-page *::before, .cyl-page *::after, .fr-testata *, .fr-piede * { box-sizing: border-box; }
:where(.cyl-page) img { max-width: 100%; height: auto; display: block; }
:where(.cyl-page, .fr-testata, .fr-piede) a { color: inherit; }
:where(.cyl-page, .fr-testata, .fr-piede) a:focus-visible, :where(.cyl-page, .fr-testata, .fr-piede) summary:focus-visible { outline: 3px solid var(--fr-giallo); outline-offset: 3px; border-radius: 6px; }

/* ---------- Struttura ---------- */
.cyl-section { padding: var(--space-section) var(--gutter); }
.cyl-section--paper, .cyl-section--mist { background: var(--fr-carta); }
.cyl-section--black { background: var(--fr-notte); color: var(--fr-bianco); }
.cyl-section--accent { background: var(--fr-giallo); color: var(--fr-inchiostro); }
.cyl-container { max-width: var(--container); margin: 0 auto; }
/* specificità doppia: deve vincere sui margin: 0 di titoli e paragrafi */
.cyl-stack.cyl-stack > * + * { margin-top: 20px; }
.cyl-grid { display: grid; gap: 24px; }
.cyl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cyl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .cyl-grid--2, .cyl-grid--3 { grid-template-columns: 1fr; } }

/* ---------- Tipografia ---------- */
.cyl-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-grigio); }
.cyl-section--black .cyl-eyebrow { color: var(--fr-grigio-chiaro); }
.cyl-h1, .cyl-h2, .cyl-h3 { font-family: var(--font-titoli); margin: 0; letter-spacing: var(--tracking-tight); }
.cyl-h1 { font-weight: 700; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.03; }
.cyl-h2 { font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; }
.cyl-h3 { font-weight: 700; font-size: clamp(20px, 2vw, 22px); line-height: 1.25; letter-spacing: -.01em; }
.cyl-lead { margin: 0; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--fr-grigio); max-width: 46ch; }
.cyl-section--black .cyl-lead { color: var(--fr-grigio-chiaro); }
.cyl-text { margin: 0; max-width: 64ch; }
.cyl-text a, .cyl-link { text-decoration: underline; text-underline-offset: 3px; }
.cyl-text a:hover, .cyl-link:hover { text-decoration-thickness: 2px; }

/* ---------- Bottoni a pillola ---------- */
.cyl-btn, .fr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border: 2px solid var(--fr-inchiostro); border-radius: 999px; background: var(--fr-inchiostro); color: var(--fr-bianco);
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
}
.cyl-btn:hover, .fr-btn:hover { background: #333; border-color: #333; }
.cyl-btn:active, .fr-btn:active { transform: scale(.97); }
.cyl-btn--accent, .fr-btn--giallo { background: var(--fr-giallo); border-color: var(--fr-giallo); color: var(--fr-inchiostro); }
.cyl-btn--accent:hover, .fr-btn--giallo:hover { background: #ffe680; border-color: #ffe680; }
.cyl-btn--outline, .fr-btn--contorno { background: transparent; color: inherit; border-color: currentColor; }
.cyl-btn--outline:hover, .fr-btn--contorno:hover { background: var(--fr-inchiostro); color: var(--fr-bianco); border-color: var(--fr-inchiostro); }
.cyl-section--black .cyl-btn:not(.cyl-btn--accent) { background: var(--fr-bianco); border-color: var(--fr-bianco); color: var(--fr-inchiostro); }

/* ---------- Componenti del builder, nel nuovo stile ---------- */
.cyl-card { background: var(--fr-bianco); border: 1px solid var(--fr-linea); border-radius: 14px; padding: 28px; }
.cyl-card > * + * { margin-top: 14px; }
.cyl-list { list-style: none; margin: 0; padding: 0; }
.cyl-list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--fr-linea); }
.cyl-list li:last-child { border-bottom: 1px solid var(--fr-linea); }
.cyl-shape { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--fr-giallo); flex: none; margin-top: 7px; }
.cyl-quote { margin: 0; }
.cyl-quote p { margin: 0; font: 700 clamp(26px, 3.2vw, 36px)/1.2 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.cyl-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--fr-grigio); }
.cyl-section--black .cyl-quote cite { color: var(--fr-grigio-chiaro); }
.cyl-stat { font: 800 clamp(44px, 5vw, 58px)/1 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.cyl-faq details { border-top: 1px solid var(--fr-linea); padding: 18px 0; }
.cyl-faq details:last-child { border-bottom: 1px solid var(--fr-linea); }
.cyl-faq summary { cursor: pointer; font: 700 19px var(--font-titoli); list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center; }
.cyl-faq summary::after { content: "+"; font-weight: 400; }
.cyl-faq details[open] summary::after { content: "−"; }
.cyl-faq details > p { margin: 12px 0 0; max-width: 64ch; }
.cyl-nubble { min-height: 120px; }

/* ============================================================
   Componenti del sito (fr-)
   ============================================================ */

/* Intestazione: nome a sinistra, menu bianco a pillola a destra; sul telefono un menu che si apre */
.fr-testata { position: relative; z-index: 40; background: var(--fr-notte); color: var(--fr-bianco); }
.fr-testata__riga { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fr-testata__nome { font: 800 19px var(--font-titoli); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.fr-menu { display: flex; align-items: center; gap: 4px; background: var(--fr-bianco); color: var(--fr-inchiostro); border-radius: 12px; padding: 4px 6px; list-style: none; margin: 0; }
.fr-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; }
.fr-menu a:hover, .fr-menu a[aria-current="page"] { background: var(--fr-carta); }
.fr-menu .fr-menu__iscriviti { background: var(--fr-giallo); font-weight: 600; }
.fr-menu .fr-menu__iscriviti:hover { background: #ffe680; }
.fr-menu-telefono { display: none; }
/* Tendina «Contenuti»: si apre al clic */
.fr-menu__gruppo { position: relative; list-style: none; }
.fr-menu__gruppo summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.fr-menu__gruppo summary::-webkit-details-marker { display: none; }
.fr-menu__gruppo summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.fr-menu__gruppo details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fr-menu__gruppo summary:hover, .fr-menu__gruppo details[open] > summary { background: var(--fr-carta); }
.fr-sottomenu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: var(--fr-bianco); color: var(--fr-inchiostro); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25); animation: fr-tendina .18s ease-out; }
.fr-sottomenu a { width: 100%; }
@keyframes fr-tendina { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .fr-sottomenu { animation: none; } .fr-menu__gruppo summary::after { transition: none; } }
@media (max-width: 960px) {
  .fr-menu__gruppo summary { width: 100%; justify-content: space-between; }
  .fr-menu-telefono .fr-sottomenu { position: static; box-shadow: none; min-width: 0; padding: 0 0 4px 12px; animation: none; }
}
@media (max-width: 960px) {
  .fr-testata__riga > .fr-menu { display: none; }
  .fr-menu-telefono { display: block; position: relative; }
  .fr-menu-telefono > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--fr-bianco); color: var(--fr-inchiostro); font-weight: 600; font-size: 15px; }
  .fr-menu-telefono > summary::-webkit-details-marker { display: none; }
  .fr-menu-telefono .fr-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; flex-direction: column; align-items: stretch; min-width: 230px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
}

/* Apertura scura con ritratto */
.fr-apertura { position: relative; overflow: hidden; background: var(--fr-notte); color: var(--fr-bianco); min-height: min(640px, 86svh); display: flex; align-items: center; }
.fr-apertura__foto { position: absolute; right: 0; top: 0; width: 62%; height: 100%; object-fit: cover; object-position: 45% 20%; }
.fr-apertura::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--fr-notte) 38%, rgba(18,18,18,.85) 48%, rgba(18,18,18,0) 70%); }
.fr-apertura__testo { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter); }
.fr-apertura__testo > * { max-width: 600px; }
.fr-apertura h1 { margin: 0; font: 700 clamp(40px, 5.4vw, 66px)/1.03 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.fr-apertura p { margin: 20px 0 0; font-size: clamp(18px, 1.6vw, 19px); line-height: 1.55; color: var(--fr-grigio-chiaro); max-width: 42ch; }
.fr-apertura .fr-btn { margin-top: 28px; }
@media (max-width: 800px) {
  /* sul telefono il testo sta sopra, su fondo pieno, e la foto sotto: mai testo sul viso */
  .fr-apertura { flex-direction: column; align-items: stretch; min-height: 0; }
  .fr-apertura::before { display: none; }
  .fr-apertura__foto { position: relative; order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-position: 40% 15%; }
  .fr-apertura__testo { padding-top: 32px; padding-bottom: 36px; }
}

/* Intestazione di sezione centrata */
.fr-titolo-sezione { text-align: center; margin: 0 auto 32px; max-width: 46ch; }
.fr-titolo-sezione h2 { margin: 0; font: 700 clamp(28px, 3.2vw, 36px)/1.12 var(--font-titoli); letter-spacing: -.01em; }
.fr-titolo-sezione p { margin: 8px 0 0; color: var(--fr-grigio); font-size: 17px; }

/* Porte «Da dove vuoi cominciare?» */
.fr-porte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fr-porta { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 140px; padding: 22px; border: 1px solid var(--fr-linea); border-radius: 14px; text-decoration: none; background: var(--fr-bianco); transition: border-color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out; }
.fr-porta:hover { border-color: var(--fr-inchiostro); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.fr-porta svg { width: 30px; height: 30px; }
.fr-porta b { display: block; font: 700 18px/1.25 var(--font-titoli); }
.fr-porta small { display: block; margin-top: 2px; font-size: 14px; color: var(--fr-grigio); }
@media (max-width: 900px) { .fr-porte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fr-porte { grid-template-columns: 1fr; } .fr-porta { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; } }

/* Due colonne testo + foto */
.fr-doppia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.fr-doppia img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.fr-doppia--rovescia > :first-child { order: 2; }
@media (max-width: 800px) { .fr-doppia { grid-template-columns: 1fr; } .fr-doppia--rovescia > :first-child { order: 0; } }

/* Il motto */
.fr-motto { text-align: center; }
.fr-motto blockquote { margin: 0 auto; max-width: 24ch; font: 700 clamp(28px, 3.8vw, 44px)/1.18 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.fr-motto blockquote::before { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--fr-giallo); margin: 0 auto 26px; }
.fr-motto cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--fr-grigio-chiaro); }

/* Schede dei contenuti */
.fr-schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fr-scheda { text-decoration: none; display: block; }
.fr-scheda img { aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; width: 100%; }
.fr-scheda small { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-grigio); }
.fr-scheda b { display: block; margin-top: 4px; font: 700 19px/1.3 var(--font-titoli); }
.fr-scheda:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) { .fr-schede { grid-template-columns: 1fr; } }

/* Riquadro newsletter giallo */
.fr-newsletter { background: var(--fr-giallo); border-radius: 18px; padding: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
.fr-newsletter h2 { margin: 0; font: 800 clamp(24px, 2.6vw, 30px)/1.15 var(--font-titoli); letter-spacing: -.01em; }
.fr-newsletter p { margin: 8px 0 0; font-size: 17px; }
.fr-newsletter__scelte { display: flex; flex-wrap: wrap; gap: 12px; }
.fr-newsletter__scelte .fr-btn { flex: 1 1 200px; }
@media (max-width: 800px) { .fr-newsletter { grid-template-columns: 1fr; } }

/* Collegamento con freccia */
.fr-freccia { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--fr-giallo); }
.fr-freccia::after { content: "→"; transition: transform 160ms ease-out; }
.fr-freccia:hover::after { transform: translateX(4px); }

/* Piè di pagina */
.fr-piede { background: var(--fr-notte); color: var(--fr-grigio-chiaro); }
.fr-piede__riga { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.fr-piede b { display: block; color: var(--fr-bianco); font: 800 18px var(--font-titoli); letter-spacing: .04em; text-transform: uppercase; }
.fr-piede p { margin: 10px 0 0; font-size: 15px; max-width: 36ch; }
.fr-piede ul { list-style: none; margin: 0; padding: 0; }
.fr-piede li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; }
.fr-piede li a:hover { color: var(--fr-bianco); text-decoration: underline; }
.fr-piede__fondo { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter) 28px; border-top: 1px solid #2a2a2a; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 800px) { .fr-piede__riga { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .fr-menu-telefono .fr-menu a { width: 100%; } }

/* Le domande di Filippo (Home, 26/10): i quattro riquadri affiancati delle «porte», con dentro icona, domanda in grassetto,
   due righe di pensiero e «Approfondisci» */
.fr-domande { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fr-domanda { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--fr-linea); border-radius: 14px; background: var(--fr-bianco); transition: border-color 160ms ease-out, box-shadow 160ms ease-out; }
.fr-domanda:hover { border-color: var(--fr-inchiostro); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.fr-domanda svg { width: 30px; height: 30px; margin-bottom: 6px; }
.fr-domanda__cornice { margin: 0; font-size: 14px; font-weight: 600; color: var(--fr-grigio); }
.fr-domanda h3 { margin: 0; font: 700 18px/1.28 var(--font-titoli); }
.fr-domanda p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fr-grigio); flex: 1; }
.fr-domanda .fr-freccia { align-self: flex-start; font-size: 15px; }
@media (max-width: 1000px) { .fr-domande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fr-domande { grid-template-columns: 1fr; } }

/* Motto su più righe con la firma */
.fr-motto blockquote span { display: block; }

/* Etichetta accanto all'icona dei riquadri delle domande */
.fr-domanda__testa { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fr-domanda__testa svg { margin: 0; flex: none; }
.fr-domanda__testa span { font: 700 15px/1.2 var(--font-titoli); letter-spacing: .01em; }

/* Motto: la firma P.P. in corsivo, spostata verso destra sotto le righe */
.fr-motto__corpo { margin: 0 auto; width: fit-content; max-width: 100%; }
.fr-motto__corpo figcaption { margin-top: 18px; text-align: right; padding-right: 8%; font-style: italic; font-size: 17px; font-weight: 500; color: var(--fr-grigio-chiaro); }
.fr-domanda .fr-domanda__cornice { flex: none; }

/* Colonna di lettura per le pagine di racconto (Chi sono): sottotitoli e paragrafi, larghezza comoda */
.fr-lettura { max-width: 720px; margin: 0 auto; }
.fr-lettura h2 { margin: 0 0 8px; font: 700 clamp(28px, 3.2vw, 36px)/1.12 var(--font-titoli); letter-spacing: -.01em; }
.fr-lettura h3 { margin: 40px 0 10px; font: 700 clamp(20px, 2vw, 23px)/1.25 var(--font-titoli); }
.fr-lettura h3::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fr-giallo); margin-bottom: 14px; }
.fr-lettura p { margin: 0; font-size: 18px; line-height: 1.7; color: #2b2b2b; }
.fr-lettura figure { margin: 40px 0 0; }
.fr-lettura figure img { border-radius: 14px; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.fr-luoghi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.fr-luoghi figure { margin: 0; }
.fr-luoghi img { border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.fr-luoghi figcaption { margin-top: 8px; font-size: 15px; color: var(--fr-grigio); }
@media (max-width: 560px) { .fr-luoghi { grid-template-columns: 1fr; } }

/* Brani dai libri (Home, blocco contenuti) */
.fr-brani { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.fr-brano { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: var(--fr-carta); }
.fr-brano__presenta { margin: 0; font-size: 15px; font-weight: 600; color: var(--fr-grigio); }
.fr-brano blockquote { margin: 0; flex: 1; font: 500 18px/1.55 var(--font); color: var(--fr-inchiostro); }
.fr-brano blockquote::before { content: ""; display: block; width: 32px; height: 5px; border-radius: 3px; background: var(--fr-giallo); margin-bottom: 14px; }
.fr-brano figcaption { font-size: 14px; color: var(--fr-grigio); }
.fr-brano figcaption cite { font-style: italic; font-weight: 600; color: var(--fr-inchiostro); }
@media (max-width: 900px) { .fr-brani { grid-template-columns: 1fr; } }

/* Brani: copertina del libro accanto alla fonte, con il collegamento per acquistarlo */
.fr-brano__libro { display: flex; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid #e6e3dc; }
.fr-brano__libro img { width: 84px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.15); flex: none; }
.fr-brano__libro figcaption { display: flex; flex-direction: column; gap: 2px; }
.fr-brano__libro .fr-freccia { font-size: 15px; align-self: flex-start; }

/* La mia storia a capitoli (Chi sono, 27/10): periodo in grande, testo, foto che si alterna a destra e a sinistra,
   entrata morbida mentre si scorre (solo dove il browser la supporta e senza «riduci movimento») */
.fr-capitoli { max-width: var(--container); margin: 0 auto; display: grid; gap: clamp(56px, 8vw, 104px); }
.fr-capitolo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.fr-capitolo:nth-child(even) > figure { order: -1; }
.fr-capitolo__periodo { display: block; margin-bottom: 10px; font: 800 clamp(44px, 6vw, 76px)/1 var(--font-titoli); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--fr-inchiostro); }
.fr-capitolo h3 { margin: 0 0 14px; font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--font-titoli); letter-spacing: -.01em; }
.fr-capitolo p { margin: 0; font-size: 18px; line-height: 1.7; color: #2b2b2b; }
.fr-capitolo p + p { margin-top: 14px; }
.fr-capitolo figure { margin: 0; }
.fr-capitolo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.fr-capitolo--solo-testo { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
.fr-capitolo--solo-testo p { text-align: left; }
.fr-capitolo--scuro { background: var(--fr-notte); color: var(--fr-bianco); border-radius: 20px; padding: clamp(28px, 5vw, 56px); }
.fr-capitolo--scuro p { color: var(--fr-grigio-chiaro); }
.fr-capitolo--scuro .fr-capitolo__periodo { -webkit-text-stroke-color: var(--fr-giallo); }
@media (max-width: 800px) {
  .fr-capitolo { grid-template-columns: 1fr; }
  .fr-capitolo:nth-child(even) > figure { order: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fr-capitolo { animation: fr-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .fr-capitolo img { animation: fr-avvicina linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes fr-entra { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fr-avvicina { from { transform: scale(1.06); } to { transform: scale(1); } }
.fr-capitolo figure { overflow: hidden; border-radius: 16px; }

/* «Ho sbagliato molto» (Chi sono): titolo grande e centrato, testo sotto, centrato */
.fr-errori { text-align: center; }
.fr-errori h2 { margin: 0 auto; max-width: 18ch; font: 800 clamp(34px, 5vw, 60px)/1.05 var(--font-titoli); letter-spacing: -.02em; }
.fr-errori h2::after { content: ""; display: block; width: 64px; height: 6px; border-radius: 3px; background: var(--fr-giallo); margin: 28px auto 0; }
.fr-errori p { margin: 28px auto 0; max-width: none; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.6; color: #2b2b2b; }
.fr-errori .fr-errori__chiusa { margin: 44px auto 0; max-width: 26ch; text-wrap: balance; font: 800 clamp(34px, 5vw, 60px)/1.05 var(--font-titoli); letter-spacing: -.02em; color: var(--fr-inchiostro); }

/* «Come lavoro oggi» (Chi sono, 27/10): tre riquadri numerati, con icona, frase in evidenza e testo */
.fr-modi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); counter-reset: fr-modo; }
.fr-modo { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); border: 1px solid var(--fr-linea); border-radius: 20px; background: var(--fr-bianco); counter-increment: fr-modo; transition: translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.fr-modo::before { content: "0" counter(fr-modo); position: absolute; top: clamp(18px, 2.4vw, 28px); right: clamp(20px, 2.6vw, 30px); font: 800 clamp(76px, 7vw, 100px)/.8 var(--font-titoli); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px #c9c9c9; pointer-events: none; transition: -webkit-text-stroke-color .35s, color .35s; }
.fr-modo:hover { translate: 0 -6px; border-color: var(--fr-inchiostro); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); }
.fr-modo:hover::before { color: var(--fr-giallo); -webkit-text-stroke-color: var(--fr-giallo); }
.fr-modo__icona { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fr-giallo); color: var(--fr-inchiostro); }
.fr-modo__icona svg { width: 30px; height: 30px; stroke-width: 1.8; }
.fr-modo h3 { position: relative; margin: 22px 0 0; font: 700 clamp(22px, 2.2vw, 26px)/1.2 var(--font-titoli); letter-spacing: -.01em; }
.fr-modo__frase { position: relative; margin: 14px 0 0; padding-left: 14px; border-left: 4px solid var(--fr-giallo); font: 600 18px/1.45 var(--font-titoli); color: var(--fr-inchiostro); }
.fr-modo p:not(.fr-modo__frase) { position: relative; margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: #2b2b2b; }
.fr-modo .fr-freccia { position: relative; margin-top: auto; padding-top: 22px; align-self: flex-start; }
.fr-modi-chiusa { max-width: 720px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center; font-size: 19px; line-height: 1.7; color: #2b2b2b; }
@media (max-width: 900px) { .fr-modi { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fr-modo { animation: fr-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .fr-modo:nth-child(2) { animation-range: entry 8% entry 65%; }
    .fr-modo:nth-child(3) { animation-range: entry 16% entry 75%; }
  }
}

/* Testi centrati: si va a capo solo dove la frase ha senso compiuto (Filippo, 27/10).
   Sul computer una .fr-riga per riga; dove non c'è spazio, un .fr-unita per riga. */
.fr-a-capo .fr-riga { display: block; }
.fr-a-capo .fr-unita { white-space: nowrap; }
.fr-modi-chiusa.fr-a-capo { max-width: none; }
@media (max-width: 860px) { .fr-a-capo .fr-unita { display: block; white-space: nowrap; } }
@media (max-width: 420px) { p.fr-a-capo { font-size: 16.5px !important; } }
@media (max-width: 360px) { p.fr-a-capo { font-size: 15px !important; } }

/* Pagina Esperienze (27/10): schede con dati pratici, sedi, voci dei partecipanti, chiusura */
.fr-esperienza { align-items: start; }
.fr-esperienza .fr-esperienza__per { margin-top: 2px; font-size: 16px; color: var(--fr-grigio); }
.fr-esperienza .fr-esperienza__frase { margin-top: 16px; padding-left: 14px; border-left: 4px solid var(--fr-giallo); font: 600 19px/1.4 var(--font-titoli); color: var(--fr-inchiostro); }
.fr-esperienza__dati { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--fr-linea); }
.fr-esperienza__dati > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fr-linea); }
.fr-esperienza__dati dt { font: 700 13px/1.5 var(--font-titoli); text-transform: uppercase; letter-spacing: .06em; color: var(--fr-inchiostro); padding-top: 2px; }
.fr-esperienza__dati dd { margin: 0; font-size: 16px; line-height: 1.55; color: #2b2b2b; }
.fr-esperienza .fr-freccia { display: inline-flex; margin-top: 22px; }
.fr-esperienza figure { position: sticky; top: 96px; }
@media (max-width: 800px) { .fr-esperienza figure { position: static; } }
@media (max-width: 480px) { .fr-esperienza__dati > div { grid-template-columns: 1fr; gap: 2px; } }
.fr-modo h3 + p { margin-top: 12px; }
.fr-sedi { list-style: none; margin: 8px 0 0; padding: 0; }
.fr-sedi li { padding: 16px 0 16px 22px; border-top: 1px solid var(--fr-linea); position: relative; }
.fr-sedi li::before { content: ""; position: absolute; left: 0; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--fr-giallo); }
.fr-sedi h3 { margin: 0; font: 700 19px/1.3 var(--font-titoli); }
.fr-sedi p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: #2b2b2b; }
.fr-voci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
/* quattro voci: due per due sul computer, così nessuna resta sola */
@media (min-width: 901px) { .fr-voci:has(> figure:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fr-voci figure { margin: 0; padding: clamp(24px, 3vw, 32px); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.fr-voci blockquote { margin: 0; font: 500 clamp(18px, 1.6vw, 20px)/1.5 var(--font-titoli); color: var(--fr-bianco); }
.fr-voci figcaption { font-size: 15px; color: var(--fr-giallo); }
.cyl-section--black .fr-titolo-sezione h2 { color: var(--fr-bianco); }
@media (max-width: 900px) { .fr-voci { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.fr-scegli { max-width: 820px; margin: 0 auto; text-align: center; }
.fr-scegli h2 { margin: 0; font: 800 clamp(32px, 4.4vw, 52px)/1.08 var(--font-titoli); letter-spacing: -.02em; }
.fr-scegli p { margin: 20px 0 0; font-size: clamp(18px, 1.7vw, 20px); line-height: 1.65; color: #2b2b2b; }
.fr-scegli .fr-btn { margin-top: 28px; }
.fr-apertura .fr-a-capo { max-width: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fr-voci figure { animation: fr-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@media (max-width: 360px) { .fr-apertura h1 { font-size: 34px; } }
@media (max-width: 360px) { .fr-titolo-sezione h2 { font-size: 22px; } }
/* titoli d'apertura spezzati a mano: sul telefono ogni pezzo deve stare intero su una riga */
@media (max-width: 420px) { .fr-apertura h1.fr-a-capo { font-size: 34px; } }
@media (max-width: 360px) { .fr-apertura h1.fr-a-capo { font-size: 29px; } }
@media (max-width: 400px) { .fr-titolo-sezione h2.fr-a-capo { font-size: 26px; } }
@media (max-width: 360px) { .fr-titolo-sezione h2.fr-a-capo { font-size: 22px; } }
@media (max-width: 340px) { p.fr-a-capo { font-size: 14px !important; } }

/* ---- Pagine «Contenuti» (28/10): apertura senza foto, argomenti e pillole con citazione, libri ---- */
.fr-intro { background: var(--fr-notte); color: var(--fr-bianco); padding: clamp(64px, 10vw, 120px) var(--gutter); }
.fr-intro__testo { max-width: 880px; margin: 0 auto; text-align: center; }
.fr-intro__etichetta { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-giallo); }
.fr-intro h1 { margin: 16px 0 0; font: 700 clamp(36px, 5.4vw, 64px)/1.06 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.fr-intro p { margin: 24px auto 0; font-size: clamp(18px, 1.7vw, 20px); line-height: 1.6; color: #d9d9d9; max-width: none; }
.fr-social { margin: 22px 0 0 !important; font-size: 16px !important; display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.fr-scegli--scuro h2 { color: var(--fr-bianco); }
.fr-scegli--scuro p { color: #d9d9d9 !important; }
.fr-libri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.fr-libro { display: flex; flex-direction: column; gap: 10px; }
.fr-libro img, .fr-libro__segnaposto { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.16); transition: transform .25s ease-out, box-shadow .25s; }
.fr-libro:hover img, .fr-libro:hover .fr-libro__segnaposto { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.fr-libro__segnaposto { display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(160deg, #2a2a2a, var(--fr-notte)); color: var(--fr-bianco); font: 700 18px/1.2 var(--font-titoli); border-bottom: 5px solid var(--fr-giallo); }
.fr-libro h3 { margin: 6px 0 0; font: 700 18px/1.25 var(--font-titoli); }
.fr-libro p { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; color: var(--fr-grigio); }
.fr-libro .fr-freccia { align-self: flex-start; font-size: 15px; }
@media (max-width: 1024px) { .fr-libri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fr-libri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fr-intro h1.fr-a-capo { font-size: 32px; } }
@media (max-width: 360px) { .fr-intro h1.fr-a-capo { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .fr-libro img, .fr-libro__segnaposto { transition: none; } }
@media (max-width: 420px) { .fr-scegli h2.fr-a-capo { font-size: 30px; } }
@media (max-width: 360px) { .fr-scegli h2.fr-a-capo { font-size: 26px; } }
.fr-apertura .fr-intro__etichetta { margin-bottom: 14px; }
/* Aperture delle pagine Contenuti: foto più stretta e colonna di testo più corta, così il testo non copre i volti */
@media (min-width: 961px) {
  .fr-apertura--contenuti .fr-apertura__foto { width: 54%; }
  .fr-apertura--contenuti::before { background: linear-gradient(90deg, var(--fr-notte) 46%, rgba(18,18,18,.8) 52%, rgba(18,18,18,0) 64%); }
  .fr-apertura--contenuti .fr-apertura__testo > * { max-width: min(540px, 44vw); }
  .fr-apertura--contenuti h1 { font-size: clamp(38px, 4.2vw, 56px); }
}
/* Contenuti, 28/10 sera (Filippo: «sembra una pagina di quaderno!»): fasce a tutta larghezza chiare e scure a turno,
   numero grande che resta fermo accanto al testo, citazioni come frasi in evidenza, foto da bordo a bordo che scorrono
   più lente, nastro giallo di parole, barra di lettura. Il movimento c'è solo con JavaScript e senza movimento ridotto. */
.fr-argomenti-sezione { overflow: clip; }
.fr-argomenti { margin: 0; padding: 0; list-style: none; }
.fr-argomento { padding: clamp(64px, 9vw, 128px) var(--gutter); background: var(--fr-bianco); color: var(--fr-inchiostro); }
.fr-argomento--scuro { background: var(--fr-notte); color: var(--fr-bianco); }
.fr-argomento__dentro { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.fr-argomento__testa { position: sticky; top: 40px; align-self: start; }
.fr-argomento__numero { display: block; font: 800 clamp(88px, 12vw, 176px)/.85 var(--font-titoli); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--fr-inchiostro); }
.fr-argomento--scuro .fr-argomento__numero { color: var(--fr-giallo); -webkit-text-stroke: 0; }
.fr-argomento h2 { margin: 18px 0 0; font: 700 clamp(26px, 3vw, 36px)/1.12 var(--font-titoli); letter-spacing: -.01em; }
.fr-argomenti--pillole .fr-argomento h2 { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fr-grigio); }
.fr-argomenti--pillole .fr-argomento--scuro h2 { color: var(--fr-giallo); }
.fr-argomento__corpo { max-width: 680px; }
.fr-argomento__corpo > p { margin: 20px 0 0; font-size: 18px; line-height: 1.7; color: #2b2b2b; }
.fr-argomento--scuro .fr-argomento__corpo > p { color: #d9d9d9; }
.fr-argomento__corpo > p:first-child { margin-top: 0; }
.fr-argomento__corpo > p a { color: inherit; text-decoration-color: var(--fr-giallo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fr-argomento__corpo > .fr-argomento__domanda { font: 700 clamp(26px, 3.2vw, 40px)/1.18 var(--font-titoli); letter-spacing: -.015em; color: var(--fr-inchiostro); }
.fr-argomento--scuro .fr-argomento__corpo > .fr-argomento__domanda { color: var(--fr-bianco); }
.fr-citazione { margin: 36px 0 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--fr-giallo); }
.fr-citazione blockquote { margin: 0; font: 600 clamp(20px, 2.1vw, 25px)/1.45 var(--font-titoli); font-style: italic; letter-spacing: -.005em; }
.fr-citazione figcaption { margin-top: 14px; font-size: 14px; color: var(--fr-grigio); }
.fr-citazione cite { font-weight: 600; color: inherit; }
.fr-argomento--scuro .fr-citazione figcaption { color: var(--fr-grigio-chiaro); }
.fr-argomento__corpo > .fr-argomento__prova { margin-top: 32px; padding: 20px 24px; border-radius: 14px; background: var(--fr-giallo); color: var(--fr-inchiostro); font-size: 17px; }
.fr-argomento--scuro .fr-argomento__corpo > .fr-argomento__prova { color: var(--fr-inchiostro); }
/* foto da bordo a bordo: l'immagine è più alta della finestra e scorre più lenta della pagina */
.fr-argomenti__foto { position: relative; width: min(880px, calc(100% - 2 * var(--gutter))); height: clamp(220px, 38vw, 440px); margin: clamp(48px, 7vw, 96px) auto; overflow: hidden; border-radius: 18px; background: var(--fr-carta); }
.fr-argomenti__foto img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
/* coppia di foto verticali sfalsate su fondo carta */
.fr-argomenti__coppia { background: var(--fr-carta); padding: clamp(56px, 8vw, 112px) var(--gutter); }
.fr-argomenti__coppia-dentro { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 4vw, 56px); align-items: start; }
.fr-coppia__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.fr-coppia__foto:nth-child(2) { margin-top: clamp(32px, 8vw, 96px); }
/* nastro giallo di parole che scorre */
.fr-nastro { overflow: hidden; background: var(--fr-giallo); color: var(--fr-inchiostro); padding: 18px 0; }
.fr-nastro__pista { display: flex; width: max-content; }
.fr-nastro__pista span { font: 800 clamp(22px, 3vw, 38px)/1 var(--font-titoli); letter-spacing: -.01em; white-space: nowrap; padding-right: .9em; }
.fr-nastro__pista span::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .9em; border-radius: 50%; background: var(--fr-inchiostro); vertical-align: .18em; }
/* barra di lettura in alto */
.fr-barra-lettura { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--fr-giallo); transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }
html:not(.fr-js) .fr-barra-lettura { display: none; }
@media (max-width: 860px) {
  .fr-argomento__dentro { grid-template-columns: 1fr; gap: 20px; }
  .fr-argomento__testa { position: static; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .fr-argomento__numero { font-size: 72px; }
  .fr-argomento h2 { margin: 0; }
  .fr-citazione { padding-left: 20px; }
}
@media (max-width: 360px) { .fr-argomento__corpo > .fr-argomento__domanda { font-size: 23px; } .fr-argomento__numero { font-size: 60px; } }
@media (prefers-reduced-motion: no-preference) {
  .fr-nastro__pista { animation: fr-nastro 38s linear infinite; }
  .fr-js .fr-svela { opacity: 0; transform: translateY(40px); transition: opacity .8s ease-out, transform .8s cubic-bezier(.2,.7,.2,1); }
  .fr-js .fr-svela.fr-visto { opacity: 1; transform: none; }
  .fr-js .fr-argomento.fr-svela { opacity: 1; transform: none; }
  .fr-js .fr-argomento.fr-svela .fr-argomento__numero { opacity: 0; transform: translateY(60px); transition: opacity .9s ease-out, transform 1s cubic-bezier(.2,.7,.2,1); }
  .fr-js .fr-argomento.fr-svela .fr-argomento__corpo { opacity: 0; transform: translateY(40px); transition: opacity .9s .15s ease-out, transform 1s .15s cubic-bezier(.2,.7,.2,1); }
  .fr-js .fr-argomento.fr-visto .fr-argomento__numero, .fr-js .fr-argomento.fr-visto .fr-argomento__corpo { opacity: 1; transform: none; }
  .fr-js .fr-coppia__foto:nth-child(2) { transition-delay: .15s; }
  .fr-js .fr-libro:nth-child(2) { transition-delay: .08s; } .fr-js .fr-libro:nth-child(3) { transition-delay: .16s; }
  .fr-js .fr-libro:nth-child(4) { transition-delay: .24s; } .fr-js .fr-libro:nth-child(5) { transition-delay: .32s; }
}
@keyframes fr-nastro { to { transform: translateX(-50%); } }
/* Chi sono ed Esperienze, 28/10 (Filippo: lo stesso movimento delle pagine Contenuti): un capitolo su due è una fascia
   scura a tutta larghezza. Il fondo esce dal contenitore con un'ombra piena tagliata ai lati (clip-path), senza cambiare l'HTML. */
.fr-capitoli > .fr-capitolo:nth-child(even) { position: relative; background: var(--fr-notte); color: var(--fr-bianco); border-radius: 0; padding: clamp(56px, 8vw, 104px) 0; box-shadow: 0 0 0 100vmax var(--fr-notte); clip-path: inset(0 -100vmax); }
.fr-capitoli > .fr-capitolo:nth-child(even) p { color: var(--fr-grigio-chiaro); }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-capitolo__periodo { color: var(--fr-giallo); -webkit-text-stroke: 0; }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__per { color: var(--fr-grigio-chiaro); }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__frase { color: var(--fr-bianco); }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__dati, .fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__dati > div { border-color: rgba(255,255,255,.18); }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__dati dt { color: var(--fr-giallo); }
.fr-capitoli > .fr-capitolo:nth-child(even) .fr-esperienza__dati dd { color: #d9d9d9; }
.fr-capitoli > .fr-capitolo:nth-child(even) a { color: var(--fr-bianco); }
/* il numero o l'etichetta grande diventa più grande, come nelle pagine Contenuti */
.fr-capitolo__periodo { font-size: clamp(56px, 8vw, 112px); }
@media (max-width: 360px) { .fr-libro h3 { font-size: 16px; overflow-wrap: anywhere; } }

/* Home, 29/10 (Filippo): le etichette dei quattro riquadri (Per i giovani, Per i genitori, Per i manager, Consapevolezza di sé)
   in un altro colore e più grandi: fascetta gialla con testo scuro, leggibile in tutti e due i temi */
.fr-domanda__testa span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--fr-giallo); color: var(--fr-inchiostro); font-size: 19px; line-height: 1.15; }
/* l'etichetta resta su una riga: se accanto all'icona non ci sta, va sotto l'icona */
.fr-domanda__testa { flex-wrap: wrap; row-gap: 10px; }
.fr-domanda__testa span { white-space: nowrap; }
/* con le etichette più grandi, quattro riquadri affiancati solo da 1101 px in su */
@media (max-width: 1100px) { .fr-domande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fr-domande { grid-template-columns: 1fr; } }
/* tutte e quattro uguali: icona sopra, etichetta sotto */
.fr-domanda__testa { flex-direction: column; align-items: flex-start; }

/* Home, 29/10 (Filippo): nei riquadri dei libri la frase di presentazione in evidenza e più grande, il brano del libro
   più piccolo e in corsivo; il trattino giallo passa sopra la frase */
.fr-brano__presenta { font: 700 clamp(19px, 1.7vw, 21px)/1.3 var(--font-titoli); color: var(--fr-inchiostro); }
.fr-brano__presenta::before { content: ""; display: block; width: 32px; height: 5px; border-radius: 3px; background: var(--fr-giallo); margin-bottom: 14px; }
.fr-brano blockquote { font-size: 16px; font-weight: 400; font-style: italic; color: var(--fr-grigio); }
.fr-brano blockquote::before { content: none; }

/* 29/10 (Filippo): strisce gialle di parole più strette, «belle ma un po' ingombranti» */
.fr-nastro { padding: 10px 0; }
.fr-nastro__pista span { font-size: clamp(16px, 1.8vw, 22px); }

/* Per i genitori, 29/10 (Filippo): i quattro volumi di «Educare all'amore per la vita». Le copertine sono libri in
   prospettiva su fondo trasparente: niente ritaglio né cornice, solo un'ombra che segue la forma */
.fr-libri--educare { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; }
.fr-libri--educare .fr-libro img { aspect-ratio: 343 / 468; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.14)); }
.fr-libri--educare .fr-libro:hover img { box-shadow: none; }
.fr-libri--educare .fr-libro p { flex: none; font-size: 14px; font-weight: 600; }
.fr-libri--educare .fr-libro h3 { flex: 1; }
@media (max-width: 1024px) { .fr-libri--educare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Per i genitori, 29/10 (Filippo): accanto a ogni citazione la copertina del libro e il link per acquistarlo */
.fr-citazione--libro { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 28px; align-items: start; }
.fr-citazione__libro { display: flex; flex-direction: column; gap: 10px; }
.fr-citazione__libro img { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .25s ease-out; }
.fr-citazione__libro a:hover img { transform: translateY(-3px); }
.fr-citazione__libro .fr-freccia { font-size: 14px; line-height: 1.35; align-self: flex-start; }
.fr-argomento--scuro .fr-citazione__libro .fr-freccia { color: var(--fr-bianco); }
@media (max-width: 640px) {
  .fr-citazione--libro { grid-template-columns: 1fr; gap: 18px; }
  .fr-citazione__libro { flex-direction: row; align-items: center; gap: 16px; }
  .fr-citazione__libro img { width: 72px; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .fr-citazione__libro img { transition: none; } }
.fr-citazione__invito { display: flex; flex-direction: column; gap: 4px; }
.fr-citazione__invito span { font-size: 13px; font-weight: 600; color: var(--fr-grigio); }
.fr-argomento--scuro .fr-citazione__invito span { color: var(--fr-grigio-chiaro); }
/* 29/10: copertine definitive piatte (dai file del grafico) al posto delle immagini in prospettiva: tornano cornice e ombra
   dei libri, con le proporzioni vere della collana (più strette dei 5/7 delle altre copertine) */
.fr-libri--educare .fr-libro img { aspect-ratio: 800 / 1286; object-fit: cover; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.16); filter: none; }
.fr-libri--educare .fr-libro:hover img { box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.fr-libri--educare { max-width: 960px; }

/* Per i manager, 29/10 (Filippo): l'evento straordinario del Professional Master Training, fascia scura a tutta larghezza
   con foto e dati essenziali, prima dell'invito alla newsletter */
.fr-evento { background: var(--fr-notte); color: var(--fr-bianco); padding: clamp(56px, 8vw, 104px) var(--cyl-gutter, 24px); }
.fr-evento__dentro { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.fr-evento__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 18px; }
.fr-evento__etichetta { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--fr-giallo); color: var(--fr-inchiostro); font: 700 14px/1.2 var(--font-titoli); letter-spacing: .02em; }
.fr-evento h2 { margin: 18px 0 14px; font: 800 clamp(30px, 4vw, 48px)/1.05 var(--font-titoli); letter-spacing: -.02em; }
.fr-evento p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: #d9d9d9; }
.fr-evento__dati { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.fr-evento__dati li { padding-left: 16px; border-left: 3px solid var(--fr-giallo); font-size: 16px; line-height: 1.45; color: #d9d9d9; }
.fr-evento__dati b { display: block; color: var(--fr-bianco); font-size: 14px; letter-spacing: .02em; }
@media (max-width: 800px) {
  .fr-evento__dentro { grid-template-columns: 1fr; }
  .fr-evento__foto img { aspect-ratio: 4 / 3; }
}
/* 29/10: logo del PMT (blu su trasparente) su un riquadro bianco, sopra l'etichetta */
.fr-evento__logo { display: inline-block; margin-bottom: 22px; padding: 14px 20px; border-radius: 14px; background: var(--fr-bianco); }
.fr-evento__logo img { display: block; width: clamp(150px, 16vw, 200px); height: auto; }
.fr-evento__testo .fr-evento__etichetta { display: table; }

/* Per i ragazzi, 29/10: accanto alla citazione dal quarto volume di «Educare» la copertina ha le proporzioni della collana */
.fr-citazione__libro--educare img { aspect-ratio: 800 / 1286; }

/* Per i manager, 29/10 (Filippo): sotto il riquadro del PMT le copertine dei 28 volumi in miniatura; un tocco le ingrandisce */
.fr-volumi { max-width: 1120px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid rgba(255, 255, 255, .14); }
.fr-volumi__titolo { margin: 0 0 6px; font: 800 clamp(24px, 3vw, 34px)/1.15 var(--font-titoli); letter-spacing: -.01em; }
.fr-volumi__nota { margin: 0 0 24px !important; font-size: 15px !important; color: #bdbdbd !important; }
.fr-volumi__griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.fr-volumi__libro { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: var(--fr-bianco); cursor: zoom-in; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .25s ease, box-shadow .25s ease; }
.fr-volumi__libro img { display: block; width: 100%; height: auto; }
.fr-volumi__libro:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.fr-volumi__libro:active { transform: scale(.97); }
.fr-volumi__libro:focus-visible { outline: 3px solid var(--fr-giallo); outline-offset: 3px; }
@media (max-width: 900px) { .fr-volumi__griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fr-volumi__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-volumi__vista { width: min(92vw, 560px); max-height: 94vh; padding: 0; border: 0; border-radius: 12px; background: var(--fr-bianco); color: var(--fr-inchiostro); overflow: visible; }
.fr-volumi__vista::backdrop { background: rgba(0, 0, 0, .82); }
.fr-volumi__vista img { display: block; width: 100%; max-height: calc(94vh - 52px); object-fit: contain; border-radius: 12px 12px 0 0; }
.fr-volumi__didascalia { margin: 0 !important; padding: 12px 16px; text-align: center; font: 700 15px/1.3 var(--font-titoli) !important; color: var(--fr-inchiostro) !important; }
.fr-volumi__chiudi, .fr-volumi__freccia { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--fr-giallo); color: var(--fr-inchiostro); font: 400 32px/1 var(--font-titoli); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.fr-volumi__chiudi { top: -14px; right: -14px; }
.fr-volumi__freccia { top: 50%; translate: 0 -50%; }
.fr-volumi__freccia--prima { left: -24px; }
.fr-volumi__freccia--dopo { right: -24px; }
.fr-volumi__chiudi:focus-visible, .fr-volumi__freccia:focus-visible { outline: 3px solid var(--fr-bianco); outline-offset: 2px; }
@media (max-width: 640px) { .fr-volumi__freccia--prima { left: 6px; } .fr-volumi__freccia--dopo { right: 6px; } .fr-volumi__chiudi { top: 6px; right: 6px; } }
@media (prefers-reduced-motion: reduce) { .fr-volumi__libro { transition: none; } .fr-volumi__libro:hover { transform: none; } }

/* Contatti e Newsletter, 29/10: modulo a sinistra, strade e contenuti a destra; etichette sempre visibili, campi alti 48px */
.fr-modulo-blocco { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.fr-modulo { display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 40px); border-radius: 18px; background: var(--fr-bianco); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.fr-modulo h2, .fr-modulo-accanto h2 { margin: 0 0 4px; font: 800 clamp(24px, 2.8vw, 32px)/1.15 var(--font-titoli); letter-spacing: -.01em; }
.fr-campo { display: grid; gap: 6px; }
.fr-campo label { font: 700 15px/1.3 var(--font-titoli); color: var(--fr-inchiostro); }
.fr-campo label span { font-weight: 400; color: #5a5a5a; }
.fr-campo input, .fr-campo select, .fr-campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid #cfcac0; border-radius: 10px; background: var(--fr-bianco); color: var(--fr-inchiostro); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; box-sizing: border-box; transition: border-color .2s ease, box-shadow .2s ease; }
.fr-campo textarea { resize: vertical; min-height: 150px; }
.fr-campo input:focus-visible, .fr-campo select:focus-visible, .fr-campo textarea:focus-visible { outline: none; border-color: var(--fr-inchiostro); box-shadow: 0 0 0 3px var(--fr-giallo); }
.fr-campo--spunta { grid-template-columns: 24px 1fr; align-items: start; gap: 12px; }
.fr-campo--spunta input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--fr-inchiostro); }
.fr-campo--spunta label { font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; }
.fr-campo--spunta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fr-modulo .fr-btn { justify-self: start; min-height: 48px; border: 0; cursor: pointer; }
.fr-modulo__nota { margin: 0; font-size: 14px; color: #5a5a5a; }
.fr-modulo__esito { margin: 0; padding: 12px 14px; border-left: 4px solid var(--fr-giallo); border-radius: 6px; background: var(--fr-carta); font-size: 15px; line-height: 1.5; }
.fr-modulo-accanto p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; color: #2b2b2b; }
.fr-modulo-strade { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; }
.fr-modulo-strade li { padding-left: 16px; border-left: 3px solid var(--fr-giallo); font-size: 16px; line-height: 1.5; color: #2b2b2b; }
.fr-modulo-strade b { display: block; margin-bottom: 2px; font: 700 16px/1.3 var(--font-titoli); color: var(--fr-inchiostro); }
.fr-modulo-strade .fr-freccia { display: inline-block; padding: 4px 0; }
.fr-modulo__altra { margin-top: 28px !important; }
@media (max-width: 860px) { .fr-modulo-blocco { grid-template-columns: 1fr; } }

/* Privacy e Cookie, 29/10: testo lungo leggibile, elenchi, tabella che scorre da sola sul telefono */
.fr-legale__titolo { margin: 10px 0 0; font: 800 clamp(34px, 4.6vw, 54px)/1.06 var(--font-titoli); letter-spacing: -.02em; }
.fr-legale__sotto { margin-top: 18px !important; font-size: 19px !important; }
.fr-legale__data { margin-top: 12px !important; font-size: 15px !important; color: #5a5a5a !important; }
.fr-legale h2 { margin: 48px 0 12px; font-size: clamp(22px, 2.4vw, 27px); }
.fr-legale h2:first-child { margin-top: 0; }
.fr-legale p + p, .fr-legale ul + p, .fr-legale p + ul { margin-top: 14px; }
.fr-legale h3 { margin-top: 28px; }
.fr-legale ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 18px; line-height: 1.65; color: #2b2b2b; }
.fr-legale a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.fr-legale code { font-size: 15px; background: var(--fr-carta); padding: 1px 6px; border-radius: 4px; }
.fr-legale__tabella { overflow-x: auto; margin-top: 8px; border: 1px solid #e3dfd6; border-radius: 12px; }
.fr-legale__tabella:focus-visible { outline: 3px solid var(--fr-giallo); outline-offset: 2px; }
.fr-legale table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.fr-legale th, .fr-legale td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3dfd6; }
.fr-legale th { background: var(--fr-carta); font: 700 15px/1.3 var(--font-titoli); }
.fr-legale tr:last-child td { border-bottom: 0; }
.fr-da-completare { background: #ffe9a8; color: #5b3d00; padding: 0 4px; border-radius: 4px; font-weight: 700; }
@media (max-width: 640px) {
  .fr-legale__tabella { overflow: visible; border: 0; }
  .fr-legale table { min-width: 0; }
  .fr-legale thead { display: none; }
  .fr-legale table, .fr-legale tbody, .fr-legale tr, .fr-legale td { display: block; width: auto; }
  .fr-legale tr { margin-bottom: 14px; border: 1px solid #e3dfd6; border-radius: 12px; overflow: hidden; }
  .fr-legale td { border-bottom: 1px solid #efebe3; }
  .fr-legale tr td:last-child { border-bottom: 0; }
  .fr-legale td::before { content: attr(data-voce); display: block; margin-bottom: 2px; font: 700 13px/1.3 var(--font-titoli); color: #5a5a5a; text-transform: uppercase; letter-spacing: .04em; }
}

/* Piè di pagina, 29/10 (Filippo: «migliorerei un po' il footer»): firma con i social, tre colonne con titolo, fondo comodo da toccare */
.fr-piede__riga { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-top: clamp(48px, 6vw, 72px); gap: 32px 40px; }
.fr-piede__titolo { margin: 0 0 6px; font: 700 13px/1.3 var(--font-titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--fr-giallo); }
.fr-piede li a { min-height: 40px; }
.fr-piede__social { display: flex; gap: 10px; margin-top: 20px !important; }
.fr-piede__social a { display: grid !important; place-items: center; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: 1px solid #3a3a3a; color: var(--fr-bianco); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.fr-piede__social a:hover { background: var(--fr-giallo); border-color: var(--fr-giallo); color: var(--fr-inchiostro); transform: translateY(-2px); text-decoration: none !important; }
.fr-piede__legali { display: flex; flex-wrap: wrap; gap: 0 20px; }
.fr-piede__legali a { display: inline-flex; align-items: center; min-height: 44px; }
.fr-piede__fondo { align-items: center; }
@media (max-width: 1000px) { .fr-piede__riga { grid-template-columns: 1fr 1fr 1fr; } .fr-piede__firma { grid-column: 1 / -1; } }
@media (max-width: 640px) { .fr-piede__riga { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .fr-piede__riga { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fr-piede__social a { transition: none; } .fr-piede__social a:hover { transform: none; } }

/* Moduli collegati, 29/10: campo trappola fuori dallo schermo, spazio per la verifica di Turnstile, esito colorato */
.fr-trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fr-modulo { position: relative; }
.fr-modulo__verifica { min-height: 65px; }
.fr-modulo .fr-btn[disabled] { opacity: .7; cursor: progress; }
.fr-modulo__esito:focus { outline: none; }
.fr-modulo__esito--ok { border-left-color: #2e7d4f; background: #eaf5ee; }
.fr-modulo__esito--errore { border-left-color: #b3261e; background: #fbeceb; }
.fr-campo--spunta label span { font-weight: 700; color: var(--fr-inchiostro); }

/* Selettore della lingua, 29/10: piccola tendina accanto al menu (sul telefono accanto a «Menu») */
.fr-lingua { position: relative; margin-left: auto; }
.fr-testata__riga > .fr-menu + .fr-lingua { margin-left: 0; }
.fr-lingua > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: var(--fr-bianco); font: 700 14px/1 var(--font-titoli); letter-spacing: .06em; }
.fr-lingua > summary::-webkit-details-marker { display: none; }
.fr-lingua > summary:hover, .fr-lingua[open] > summary { background: var(--fr-bianco); color: var(--fr-inchiostro); }
.fr-lingua ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 160px; border-radius: 14px; background: var(--fr-bianco); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.fr-lingua a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--fr-inchiostro); text-decoration: none; font-size: 15px; }
.fr-lingua a:hover { background: var(--fr-carta); }
.fr-lingua a[aria-current="true"] { font-weight: 700; }

/* Traduzioni, 29/10: in inglese, spagnolo e francese alcuni pezzi di frase sono più lunghi dell'italiano; sul telefono,
   se un pezzo non sta nella riga, va a capo al suo interno invece di uscire dallo schermo */
@media (max-width: 600px) { html:not([lang="it"]) .fr-unita { white-space: normal; } }
.fr-testata__riga > .fr-menu { margin-left: auto; }

/* Pagina «non trovata» (30/10/2026, strumenti/pagina-404.mjs): fondo notte come l'apertura, un grande 404 solo
   disegnato sul fondo, le strade del sito come riquadri da toccare (44px minimo), niente foto. */
.fr-errore { position: relative; overflow: hidden; background: var(--fr-notte); color: var(--fr-bianco); min-height: min(720px, 88svh); display: flex; align-items: center; }
.fr-errore__numero { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: 72px; z-index: 0; font: 800 clamp(140px, 18vw, 260px)/1 var(--font-titoli); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgba(255, 216, 77, .28); pointer-events: none; user-select: none; }
.fr-errore__testo { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 72px var(--gutter) 80px; }
.fr-errore__testo > * { max-width: 640px; }
.fr-errore h1 { margin: 0; font: 700 clamp(38px, 5vw, 62px)/1.05 var(--font-titoli); letter-spacing: var(--tracking-tight); }
.fr-errore__giallo { color: var(--fr-giallo); }
.fr-errore p { margin: 22px 0 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--fr-grigio-chiaro); max-width: 46ch; }
.fr-errore__strade { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fr-errore__strada { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; color: var(--fr-bianco); font-weight: 600; text-decoration: none; transition: border-color .2s, background-color .2s, transform .2s; }
.fr-errore__strada span:last-child { color: var(--fr-giallo); transition: transform .2s; }
.fr-errore__strada:hover, .fr-errore__strada:focus-visible { border-color: var(--fr-giallo); background: rgba(255, 216, 77, .06); }
.fr-errore__strada:hover span:last-child { transform: translateX(4px); }
.fr-errore__strada:active { transform: scale(.98); }
.fr-errore__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.fr-errore__azioni .fr-freccia { color: var(--fr-bianco); }
/* sotto i 1000px il numero finirebbe sotto il testo: resta l'etichetta «Errore 404» */
@media (max-width: 1000px) { .fr-errore__numero { display: none; } }
@media (max-width: 640px) {
  .fr-errore { min-height: 0; }
  .fr-errore__testo { padding: 40px var(--gutter) 56px; }
  .fr-errore__strade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fr-errore__strada, .fr-errore__strada span:last-child { transition: none; } .fr-errore__strada:hover span:last-child, .fr-errore__strada:active { transform: none; } }

/* Pagina «grazie» della newsletter (30/10/2026, strumenti/pagina-grazie.mjs): stessa scena della 404, con una spunta disegnata. */
.fr-errore--grazie .fr-errore__numero { top: 50%; bottom: auto; transform: translateY(-50%); width: clamp(150px, 17vw, 240px); color: rgba(255, 216, 77, .45); -webkit-text-stroke: 0; }
.fr-errore--grazie .fr-errore__numero svg { display: block; width: 100%; height: auto; }