@charset "utf-8";
/* ==========================================================================
   RettaAsilo, foglio di stile unico del sito
   Direzione artistica: universo del nido, giallo pastello e azzurro cielo,
   forme tonde e rassicuranti. Motivo ricorrente: archi di pastello a cera,
   mattoncini di legno impilati, stelline usate come spunte.
   Tema chiaro su tutte le pagine, nessuna variante scura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Caratteri tipografici
   Baloo 2 per i titoli (grazia rotonda, allegra e leggibile in corpo grande),
   Nunito per il testo corrente (aperto, morbido, comodo anche in corpo piccolo).
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap");

/* --------------------------------------------------------------------------
   2. Azzeramento moderno
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   3. Variabili: palette approvata e valori derivati
   -------------------------------------------------------------------------- */
:root {
  /* palette del sito */
  --bg: #FFFDF5;          /* fondo di pagina, crema latte */
  --surf: #FFFFFF;        /* superficie delle schede */
  --ink: #26241A;         /* testo principale */
  --mut: #6B6857;         /* testo secondario */
  --pri: #9C6A0A;         /* giallo miele scuro: azioni, numeri, bordi */
  --acc: #4EA3D9;         /* azzurro cielo: decorazioni e superfici */
  --line: #EDE7D5;        /* filetti e bordi chiari */

  /* derivate del giallo miele */
  --pri-scuro: #7E5407;
  --pri-cupo: #5E3E05;
  --pri-chiaro: #E8B94A;
  --pri-velo: #FDF4DE;
  --pri-velo2: #F9E7BE;
  --pri-velo3: #FBEFD3;

  /* derivate dell azzurro */
  --acc-scuro: #1F6C9E;
  --acc-cupo: #16527A;
  --acc-chiaro: #BFE1F5;
  --acc-velo: #EDF6FC;
  --acc-velo2: #D8ECF9;

  /* superfici e filetti di appoggio */
  --crema: #FBF3E2;
  --crema-forte: #F6EAD0;
  --line-forte: #E1D6B9;
  --segnala: #B04A22;      /* solo per avvisi e campi obbligatori */
  --segnala-velo: #FBEDE6;

  /* raggi: tutto tondo, niente spigoli vivi */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 38px;
  --r-tondo: 999px;

  /* ombre: mattoncino pieno piu alone caldo */
  --omb-blocco: 0 5px 0 var(--line-forte);
  --omb-blocco-blu: 0 5px 0 var(--acc-chiaro);
  --omb-carta: 0 5px 0 var(--line-forte), 0 18px 30px -20px rgba(38, 36, 26, .45);
  --omb-alta: 0 6px 0 var(--line-forte), 0 26px 44px -24px rgba(38, 36, 26, .45);
  --omb-morbida: 0 14px 30px -22px rgba(38, 36, 26, .55);

  /* spaziature */
  --sp-1: .35rem;
  --sp-2: .6rem;
  --sp-3: .9rem;
  --sp-4: 1.3rem;
  --sp-5: 1.8rem;
  --sp-6: 2.4rem;
  --sp-7: 3.2rem;
  --sp-8: 4.4rem;
  --sp-9: clamp(3.4rem, 2.2rem + 4vw, 6.2rem);

  /* misure */
  --largo: 1180px;
  --stretto: 760px;
  --gronda: clamp(1.1rem, .6rem + 2.2vw, 2.2rem);

  /* scala tipografica fluida */
  --t-xs: .8125rem;
  --t-s: clamp(.875rem, .85rem + .12vw, .94rem);
  --t-base: clamp(1rem, .97rem + .18vw, 1.075rem);
  --t-m: clamp(1.08rem, 1.02rem + .3vw, 1.22rem);
  --t-l: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --t-xl: clamp(1.45rem, 1.28rem + .9vw, 1.95rem);
  --t-2xl: clamp(1.85rem, 1.5rem + 1.7vw, 2.7rem);
  --t-3xl: clamp(2.15rem, 1.65rem + 2.5vw, 3.35rem);

  /* famiglie */
  --f-tit: "Baloo 2", "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --f-testo: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   4. Fondo di pagina e tipografia di base
   Il fondo porta una pioggia leggerissima di coriandoli e due aloni pastello:
   e la texture propria del sito, disegnata solo con gradienti.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--f-testo);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 88% 4%, rgba(78, 163, 217, .13) 0 190px, rgba(78, 163, 217, 0) 191px),
    radial-gradient(circle at 4% 34%, rgba(232, 185, 74, .16) 0 150px, rgba(232, 185, 74, 0) 151px),
    radial-gradient(circle, rgba(156, 106, 10, .085) 2.2px, rgba(156, 106, 10, 0) 2.7px);
  background-size: auto, auto, 52px 52px;
  background-attachment: fixed, fixed, scroll;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-tit); font-weight: 700; line-height: 1.16; letter-spacing: .002em;
  color: var(--ink); text-wrap: balance;
}

strong, b { font-weight: 700; }
a { text-decoration-thickness: .09em; text-underline-offset: .18em; }
::selection { background: var(--pri-velo2); color: var(--ink); }

/* --------------------------------------------------------------------------
   5. Contenitori, sezioni, utility
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--largo); margin-inline: auto; padding-inline: var(--gronda); }
.wrap-stretto { width: 100%; max-width: var(--stretto); margin-inline: auto; padding-inline: var(--gronda); }
.sezione { position: relative; padding-block: var(--sp-9); }

/* fascia bianca piena, staccata dal fondo da due filetti tondi */
.sezione--bianca { background: var(--surf); border-block: 2px solid var(--line); }

/* fascia crema, per alternare il ritmo verticale */
.sezione--crema { background: var(--crema); border-block: 2px solid var(--line); }

/* fascia azzurra chiarissima, per i blocchi di respiro */
.sezione--cielo { background: linear-gradient(180deg, var(--acc-velo) 0%, var(--bg) 100%); }

/* fascia con l arco di pastello disegnato in alto */
.sezione--arco { overflow: hidden; }
.sezione--arco::before {
  content: ""; position: absolute; inset-inline: -10%; top: -120px; height: 240px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 100%,
  var(--pri-velo2) 0 14px, transparent 14px 28px,
  var(--acc-velo2) 28px 42px, transparent 42px 56px); opacity: .75; pointer-events: none;
}
.centro { text-align: center; }

.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* campo trappola del modulo, fuori schermo */
.hp { position: absolute; left: -9999px; }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) {
  .griglia-2, .griglia-3, .griglia-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
}

/* scheda generica: mattoncino bianco con bordo tondo e base piena */
.scheda {
  background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-carta); padding: var(--sp-5);
}

/* --------------------------------------------------------------------------
   6. Intestazioni di sezione
   -------------------------------------------------------------------------- */
.intestazione-sezione { max-width: 44rem; margin-bottom: var(--sp-6); }
.intestazione-sezione--centrata { margin-inline: auto; text-align: center; }

.occhiello {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-tit); font-weight: 600;
  font-size: var(--t-s); letter-spacing: .08em; text-transform: uppercase; color: var(--pri-cupo);
  background: var(--pri-velo); border: 2px solid var(--pri-velo2); border-radius: var(--r-tondo);
  padding: .3rem .95rem .3rem .8rem;
}
.occhiello::before {
  content: ""; width: 15px; height: 15px; background: var(--pri);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.titolo-sezione { font-size: var(--t-2xl); margin-top: var(--sp-3); }
.intro-sezione { font-size: var(--t-m); color: var(--mut); margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   7. Decorazioni proprie del sito, tutte in CSS puro
   -------------------------------------------------------------------------- */

/* parola evidenziata dentro un titolo, con l arco di pastello sotto */
.arco { font-style: normal; position: relative; display: inline-block; color: var(--pri-cupo); }
.arco::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; bottom: -.22em; height: .34em;
  border-radius: 0 0 60% 60% / 0 0 100% 100%; border-bottom: .17em solid var(--pri-chiaro);
  border-inline: .05em solid transparent;
}
.arco--cielo { color: var(--acc-cupo); }
.arco--cielo::after { border-bottom-color: var(--acc); }

/* arcobaleno di separazione fra due blocchi */
.arcobaleno {
  height: 18px; border-radius: var(--r-tondo); background: linear-gradient(90deg,
  var(--pri-chiaro) 0 25%, var(--acc-chiaro) 25% 50%,
  var(--pri-velo2) 50% 75%, var(--acc) 75% 100%); margin-block: var(--sp-5);
}

/* stellina usata come spunta davanti a un elemento di elenco */
.stelle { display: grid; gap: var(--sp-2); }
.stelle li { position: relative; padding-left: 2rem; }
.stelle li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 18px; height: 18px;
  background: var(--pri);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stelle--cielo li::before { background: var(--acc-scuro); }

/* pastiglia con un valore breve o una parola chiave */
.pastiglia {
  display: inline-block; font-family: var(--f-tit); font-weight: 600; font-size: var(--t-s);
  color: var(--pri-cupo); background: var(--pri-velo); border: 2px solid var(--pri-velo2);
  border-radius: var(--r-tondo); padding: .12rem .8rem;
}
.pastiglia--cielo { color: var(--acc-cupo); background: var(--acc-velo); border-color: var(--acc-velo2); }
.pastiglia--segnala { color: var(--segnala); background: var(--segnala-velo); border-color: #F0D5C8; }

/* mattoncini impilati: tre blocchi colorati, decorazione da mettere sopra un titolo */
.mattoncini { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
.mattoncini span { width: 26px; height: 14px; border-radius: 5px; background: var(--pri-chiaro); }
.mattoncini span:nth-child(2) { background: var(--acc); width: 16px; }
.mattoncini span:nth-child(3) { background: var(--pri); width: 10px; }
.mattoncini--centrati { justify-content: center; }

/* bordo a festone, la coda tonda che chiude testata e piede */
.festone { position: relative; }
.festone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background-image: radial-gradient(circle at 11px 0, var(--surf) 11px, transparent 11.5px);
  background-size: 22px 22px; background-repeat: repeat-x; pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Accessibilita: salto al contenuto e fuoco visibile
   -------------------------------------------------------------------------- */
.salta-al-contenuto {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 200;
  background: var(--pri-cupo); color: #FFFFFF; font-family: var(--f-tit); font-weight: 600;
  padding: .7rem 1.4rem; border-radius: 0 0 var(--r-m) var(--r-m); transition: top .18s ease;
}
.salta-al-contenuto:focus { top: 0; }
:focus-visible { outline: 3px solid var(--acc-scuro); outline-offset: 3px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   9. Testata e navigazione
   -------------------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 100; background: var(--surf); border-bottom: 2px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(38, 36, 26, .7);
}
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background-image: radial-gradient(circle at 10px 0, var(--surf) 9px, transparent 9.5px);
  background-size: 20px 20px; background-repeat: repeat-x; pointer-events: none;
}
.testata__interno { display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; padding-block: .55rem; }

.marchio {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--f-tit); font-size: 1.22rem; font-weight: 700; color: var(--ink); flex: 0 0 auto;
}
.marchio__sigla {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  background: var(--pri); color: #FFFFFF; font-size: 1.02rem; letter-spacing: .01em;
  box-shadow: 0 3px 0 var(--pri-cupo);
}
.marchio__nome b { color: var(--pri-cupo); font-weight: 700; }
.nav { display: none; margin-left: auto; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: .2rem; }
}
.nav__link {
  position: relative; display: inline-block; padding: .5rem .7rem; border-radius: var(--r-tondo);
  text-decoration: none; font-weight: 700; font-size: var(--t-s); color: var(--ink);
  transition: background-color .18s ease, color .18s ease;
}
.nav__link:hover { background: var(--pri-velo); color: var(--pri-cupo); }
.nav__link.is-attivo { background: var(--acc-velo); color: var(--acc-cupo); }
.nav__link.is-attivo::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 18px; height: 5px;
  transform: translateX(-50%); border-radius: var(--r-tondo); background: var(--acc);
}
.testata__azione { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1060px) { .testata__azione { margin-left: var(--sp-3); } }

.apri-menu {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .35rem .9rem;
  border: 2px solid var(--line-forte); border-radius: var(--r-tondo); background: var(--surf);
  font-family: var(--f-tit); font-weight: 600;
}
@media (min-width: 1060px) { .apri-menu { display: none; } }
.apri-menu__barre { position: relative; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.apri-menu__barre::before, .apri-menu__barre::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .2s ease, top .2s ease;
}
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { top: 0; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { top: 0; transform: rotate(-45deg); }

/* pannello di navigazione a scomparsa */
.menu-mobile {
  display: none; background: var(--crema); border-top: 2px solid var(--line);
  padding-block: var(--sp-4) var(--sp-5);
}
.menu-mobile.is-aperto { display: block; }
@media (min-width: 1060px) { .menu-mobile, .menu-mobile.is-aperto { display: none; } }
.menu-mobile__lista { display: grid; gap: .3rem; margin-bottom: var(--sp-4); }
.menu-mobile__lista a {
  display: block; padding: .8rem 1rem; border-radius: var(--r-m); background: var(--surf);
  border: 2px solid var(--line); text-decoration: none; font-family: var(--f-tit); font-weight: 600;
}
.menu-mobile__lista a:hover { border-color: var(--pri-chiaro); background: var(--pri-velo); }
body.menu-aperto { overflow: hidden; }

/* --------------------------------------------------------------------------
   10. Bottoni: pillola con base piena, si abbassa alla pressione
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px;
  padding: .7rem 1.55rem; border-radius: var(--r-tondo); border: 2px solid transparent;
  font-family: var(--f-tit); font-weight: 700; font-size: 1.02rem; line-height: 1.2; text-align: center;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background-color .18s ease;
}

.btn--primario {
  background: var(--pri); border-color: var(--pri-cupo); color: #FFFFFF;
  box-shadow: 0 5px 0 var(--pri-cupo);
}
.btn--primario:hover { background: var(--pri-scuro); }
.btn--primario:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pri-cupo); }

.btn--secondario {
  background: var(--surf); border-color: var(--acc); color: var(--acc-cupo);
  box-shadow: 0 5px 0 var(--acc-chiaro);
}
.btn--secondario:hover { background: var(--acc-velo); }
.btn--secondario:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--acc-chiaro); }

.btn--fantasma {
  background: var(--surf); border-color: var(--line-forte); color: var(--ink);
  box-shadow: 0 4px 0 var(--line);
}
.btn--fantasma:hover { background: var(--crema); }
.btn--piccolo { min-height: 44px; padding: .4rem 1.05rem; font-size: .95rem; }
.btn--blocco { width: 100%; }

/* --------------------------------------------------------------------------
   11. Hero: apertura della home
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-8) var(--sp-9);
  background:
    radial-gradient(circle at 82% 12%, var(--acc-velo2) 0 240px, transparent 241px),
    radial-gradient(circle at 8% 82%, var(--pri-velo2) 0 200px, transparent 201px),
    var(--bg);
}
.hero::after {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -170px; height: 320px;
  border-radius: 50%; border-top: 22px solid var(--pri-velo2); box-shadow: 0 -22px 0 var(--acc-velo2);
  pointer-events: none;
}
.hero__interno { position: relative; z-index: 1; display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 980px) {
  .hero__interno { grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); }
}

.hero__eyebrow {
  display: inline-block; font-family: var(--f-tit); font-weight: 600; font-size: var(--t-s);
  color: var(--acc-cupo); background: var(--surf); border: 2px dashed var(--acc);
  border-radius: var(--r-tondo); padding: .3rem 1rem; margin-bottom: var(--sp-4);
}
.hero__titolo { font-size: var(--t-3xl); font-weight: 800; }
.hero__sub { font-size: var(--t-m); color: var(--mut); margin-top: var(--sp-4); max-width: 34rem; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero__punti { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.hero__punti li { position: relative; padding-left: 2.1rem; font-weight: 600; }
.hero__punti li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 20px; height: 20px;
  background: var(--pri);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hero__visuale { position: relative; }

/* tabellone delle presenze, elemento visivo principale della home */
.tabellone {
  background: var(--surf); border: 3px solid var(--line-forte); border-radius: var(--r-xl);
  box-shadow: var(--omb-alta); overflow: hidden;
}
.tabellone__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, var(--pri-velo) 0%, var(--surf) 100%);
  border-bottom: 2px dashed var(--line-forte);
}
.tabellone__nome { font-family: var(--f-tit); font-weight: 700; font-size: var(--t-l); }
.tabellone__mese { font-size: var(--t-s); color: var(--mut); font-weight: 600; }
.tabellone__righe { padding: var(--sp-3) var(--sp-4); display: grid; gap: .45rem; }
.tabellone__riga {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: .5rem .7rem; border-radius: var(--r-m); background: var(--bg); border: 2px solid var(--line);
}
.tabellone__bimbo { font-weight: 700; font-size: var(--t-s); }
.tabellone__giorni { display: flex; gap: 4px; }
.giorno { width: 17px; height: 17px; border-radius: 6px; background: var(--line); border: 1px solid var(--line-forte); }
.giorno--presente { background: var(--acc-chiaro); border-color: var(--acc); }
.giorno--assente { background: var(--surf); border-style: dashed; }

.tabellone__piede {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 3px solid var(--pri-velo2);
  background: var(--pri-velo);
}
.tabellone__voce { font-size: var(--t-s); color: var(--mut); font-weight: 600; }
.tabellone__totale { font-family: var(--f-tit); font-weight: 800; font-size: var(--t-xl); color: var(--pri-cupo); }

/* --------------------------------------------------------------------------
   12. Blocco problema
   -------------------------------------------------------------------------- */
.problema__interno { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) { .problema__interno { grid-template-columns: 1.15fr .85fr; } }
.problema__racconto p + p { margin-top: var(--sp-4); }
.problema__racconto > p:first-child::first-letter {
  float: left; font-family: var(--f-tit); font-weight: 800; font-size: 3.1rem; line-height: .85;
  color: var(--pri-cupo); margin: .12em .18em 0 0;
}

.sintomi {
  background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-carta); padding: var(--sp-5); border-top: 8px solid var(--acc);
}
.sintomi__titolo { font-size: var(--t-l); margin-bottom: var(--sp-3); }
.sintomo {
  position: relative; padding-left: 2.1rem; padding-block: .4rem; border-bottom: 1px dashed var(--line);
  font-size: var(--t-s);
}
.sintomo:last-child { border-bottom: 0; }
.sintomo::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 18px; height: 18px;
  border: 2px solid var(--line-forte); border-radius: 6px; background: var(--bg);
}

/* --------------------------------------------------------------------------
   13. Soluzione e passi del metodo
   -------------------------------------------------------------------------- */
.soluzione__testo { max-width: 42rem; }
.soluzione__testo p + p { margin-top: var(--sp-4); }
.passi { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 860px) { .passi { grid-template-columns: repeat(3, 1fr); } }

.passo {
  position: relative; background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-carta); padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.passo::before {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); top: -3px; height: 8px;
  border-radius: var(--r-tondo);
  background: linear-gradient(90deg, var(--pri-chiaro) 0 50%, var(--acc) 50% 100%);
}
.passo__numero {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px;
  background: var(--acc-velo); border: 2px solid var(--acc); color: var(--acc-cupo);
  font-family: var(--f-tit); font-weight: 800; font-size: 1.25rem; margin-bottom: var(--sp-3);
}
.passo__titolo { font-size: var(--t-l); margin-bottom: var(--sp-2); }
.passo__testo { color: var(--mut); font-size: var(--t-s); }

/* --------------------------------------------------------------------------
   14. Funzionalita
   -------------------------------------------------------------------------- */
.griglia-funzioni { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .griglia-funzioni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .griglia-funzioni { grid-template-columns: repeat(3, 1fr); } }

.funzione {
  position: relative; background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-blocco); padding: var(--sp-5) var(--sp-4);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.funzione:hover {
  transform: translateY(-4px); border-color: var(--pri-chiaro);
  box-shadow: 0 9px 0 var(--pri-velo2), 0 24px 34px -26px rgba(38, 36, 26, .5);
}
.funzione__indice {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px;
  background: var(--pri-velo); border: 2px solid var(--pri-chiaro); color: var(--pri-cupo);
  font-family: var(--f-tit); font-weight: 800; margin-bottom: var(--sp-3);
}
.funzione__titolo { font-size: var(--t-l); margin-bottom: var(--sp-2); }
.funzione__titolo::after {
  content: ""; display: block; width: 42px; height: 5px; margin-top: .5rem;
  border-radius: var(--r-tondo); background: var(--acc-chiaro);
}
.funzione__testo { color: var(--mut); font-size: var(--t-s); }

/* --------------------------------------------------------------------------
   15. Vantaggi
   -------------------------------------------------------------------------- */
.vantaggi { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .vantaggi { grid-template-columns: repeat(2, 1fr); } }

.vantaggio {
  background: var(--surf); border: 2px solid var(--line); border-left: 10px solid var(--acc-chiaro);
  border-radius: var(--r-m); padding: var(--sp-4); box-shadow: var(--omb-morbida);
}
.vantaggio:nth-child(even) { border-left-color: var(--pri-chiaro); }
.vantaggio__titolo { font-size: var(--t-m); margin-bottom: var(--sp-2); }
.vantaggio__testo { color: var(--mut); font-size: var(--t-s); }

/* --------------------------------------------------------------------------
   16. Prova sociale
   -------------------------------------------------------------------------- */
.prove { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .prove { grid-template-columns: repeat(3, 1fr); } }

.prova {
  position: relative; background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-carta); padding: var(--sp-6) var(--sp-4) var(--sp-4);
}
.prova::before {
  content: ""; position: absolute; top: -16px; left: var(--sp-4); width: 34px; height: 34px;
  border-radius: 12px; background: var(--pri-chiaro); box-shadow: 14px 0 0 var(--acc-chiaro);
}
.prova__testo { font-size: var(--t-s); }
.prova__firma { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 2px dashed var(--line); }
.prova__nome { font-family: var(--f-tit); font-weight: 700; }
.prova__ruolo { font-size: var(--t-xs); color: var(--mut); }

.nota-scenari {
  margin-top: var(--sp-4); font-size: var(--t-s); color: var(--mut); background: var(--acc-velo);
  border: 2px dashed var(--acc-chiaro); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4);
}

/* --------------------------------------------------------------------------
   17. Prezzi
   -------------------------------------------------------------------------- */
.prezzi { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .prezzi { grid-template-columns: repeat(3, 1fr); } }

.piano {
  position: relative; background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-carta); padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.piano--evidenza {
  border: 3px solid var(--pri);
  box-shadow: 0 7px 0 var(--pri-velo2), 0 28px 44px -26px rgba(38, 36, 26, .5);
  background: linear-gradient(180deg, var(--pri-velo) 0%, var(--surf) 190px);
}
@media (min-width: 900px) { .piano--evidenza { transform: translateY(-14px); } }

.piano__nastro {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--pri); color: #FFFFFF; font-family: var(--f-tit); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; padding: .3rem 1rem;
  border-radius: var(--r-tondo); box-shadow: 0 3px 0 var(--pri-cupo);
}
.piano__nome { font-size: var(--t-l); }
.piano__prezzo { display: flex; align-items: baseline; gap: .45rem; }
.piano__cifra { font-family: var(--f-tit); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.6vw, 3.1rem); color: var(--pri-cupo); line-height: 1; }
.piano__periodo { font-size: var(--t-s); color: var(--mut); font-weight: 600; }
.piano__descrizione { font-size: var(--t-s); color: var(--mut); }
.piano__lista { display: grid; gap: .55rem; font-size: var(--t-s); }
.piano__lista li { position: relative; padding-left: 1.9rem; }
.piano__lista li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px;
  background: var(--acc-scuro);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.piano .btn { margin-top: auto; }

.nota-prezzi {
  margin-top: var(--sp-5); font-size: var(--t-s); color: var(--mut); text-align: center;
  max-width: 46rem; margin-inline: auto;
}

/* --------------------------------------------------------------------------
   18. Domande frequenti a fisarmonica
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--sp-2); }
.faq__voce { background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.faq__voce:has(.faq__domanda[aria-expanded="true"]) { border-color: var(--pri-chiaro); }

.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
  min-height: 56px; padding: var(--sp-3) var(--sp-4); text-align: left; font-family: var(--f-tit);
  font-weight: 700; font-size: var(--t-m); color: var(--ink);
}
.faq__domanda:hover { background: var(--pri-velo); }

.faq__segno {
  position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  background: var(--acc-velo); border: 2px solid var(--acc-chiaro);
}
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 3px;
  background: var(--acc-cupo); border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.faq__segno::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__domanda[aria-expanded="true"] .faq__segno::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__risposta { padding: 0 var(--sp-4) var(--sp-4); color: var(--mut); font-size: var(--t-s); }
.faq__risposta p + p { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   19. Schede articolo, indice del blog e blocco "Da leggere anche"
   -------------------------------------------------------------------------- */
.griglia-articoli { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .griglia-articoli { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .griglia-articoli { grid-template-columns: repeat(3, 1fr); } }

.articolo-card {
  display: flex; flex-direction: column; background: var(--surf); border: 2px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--omb-blocco); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.articolo-card:hover { transform: translateY(-4px); box-shadow: var(--omb-alta); }
.articolo-card__media { position: relative; border-bottom: 4px solid var(--pri-velo2); }
.articolo-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.articolo-card__corpo { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.articolo-card__meta { font-size: var(--t-xs); color: var(--mut); }
.articolo-card__titolo { font-size: var(--t-m); line-height: 1.28; }
.articolo-card__titolo a { text-decoration: none; }
.articolo-card__titolo a:hover { color: var(--pri-cupo); text-decoration: underline; }
.articolo-card__testo { font-size: var(--t-s); color: var(--mut); }
.articolo-card__link { margin-top: auto; padding-top: var(--sp-2); }
.articolo-card__link a { font-family: var(--f-tit); font-weight: 700; color: var(--acc-cupo); text-decoration: none; }
.articolo-card__link a::after { content: " \203A"; }
.articolo-card__link a:hover { text-decoration: underline; }
.da-leggere { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 4px dotted var(--line-forte); }
.da-leggere__titolo { font-size: var(--t-xl); margin-bottom: var(--sp-5); }
.da-leggere__titolo::after {
  content: ""; display: block; width: 96px; height: 8px; margin-top: .6rem;
  border-radius: var(--r-tondo);
  background: linear-gradient(90deg, var(--pri-chiaro) 0 33%, var(--acc) 33% 66%, var(--pri-velo2) 66% 100%);
}
/* dentro l articolo le tre schede stanno su una riga sola da 900 px in su */
.da-leggere .griglia-articoli { grid-template-columns: 1fr; }
@media (min-width: 900px) { .da-leggere .griglia-articoli { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   20. Pagina articolo
   -------------------------------------------------------------------------- */
.articolo { padding-block: var(--sp-6) var(--sp-8); }

.briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--t-xs);
  color: var(--mut); margin-bottom: var(--sp-4);
}
.briciole a { color: var(--acc-cupo); }
.briciole > * + *::before { content: "\203A"; margin-right: .45rem; color: var(--line-forte); }
.briciole span[aria-current] { color: var(--mut); }
.articolo__titolo { font-size: var(--t-2xl); font-weight: 800; }

.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem var(--sp-3); margin-top: var(--sp-3);
  font-size: var(--t-s); color: var(--mut);
}
.meta-articolo a { color: var(--acc-cupo); font-weight: 700; }
.figura { margin-block: var(--sp-5); }
.figura img { width: 100%; border: 3px solid var(--surf); border-radius: var(--r-l); box-shadow: var(--omb-alta); }
.credito-foto { margin-top: .6rem; font-size: var(--t-xs); color: var(--mut); font-style: italic; }

.chapo {
  position: relative; font-size: var(--t-m); font-weight: 600; background: var(--pri-velo);
  border: 2px solid var(--pri-velo2); border-left: 10px solid var(--pri-chiaro);
  border-radius: var(--r-m); padding: var(--sp-4); margin-bottom: var(--sp-5);
}

.sommario {
  background: var(--acc-velo); border: 2px dashed var(--acc-chiaro); border-radius: var(--r-m);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.sommario__titolo { font-size: var(--t-m); margin-bottom: var(--sp-2); }
.sommario ol { padding-left: 1.2rem; font-size: var(--t-s); }

/* corpo redazionale: misura di lettura fra 62 e 72 caratteri */
.prosa { max-width: 68ch; }
.prosa > * + * { margin-top: var(--sp-4); }
.prosa h2 { font-size: var(--t-xl); margin-top: var(--sp-7); padding-top: var(--sp-2); position: relative; }
.prosa h2::before {
  content: ""; position: absolute; top: -14px; left: 0; width: 58px; height: 9px;
  border-radius: var(--r-tondo);
  background: linear-gradient(90deg, var(--pri) 0 55%, var(--acc) 55% 100%);
}
.prosa h3 { font-size: var(--t-l); margin-top: var(--sp-5); color: var(--pri-cupo); }
.prosa p { line-height: 1.78; }
.prosa a { color: var(--acc-cupo); font-weight: 600; }
.prosa a:hover { color: var(--pri-cupo); }
.prosa ul, .prosa ol { padding-left: 1.4rem; display: grid; gap: .55rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.9rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 15px; height: 15px;
  background: var(--pri-chiaro);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.prosa ol li::marker { font-family: var(--f-tit); font-weight: 700; color: var(--pri-cupo); }

.prosa blockquote {
  margin-inline: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); background: var(--surf);
  border: 2px solid var(--line); border-left: 10px solid var(--acc); border-radius: var(--r-m);
  font-size: var(--t-m); font-style: italic; box-shadow: var(--omb-morbida);
}

.prosa table {
  font-size: var(--t-s); background: var(--surf); border: 2px solid var(--line);
  border-radius: var(--r-m); overflow: hidden;
}
.prosa th, .prosa td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
.prosa thead th { background: var(--pri-velo); font-family: var(--f-tit); font-weight: 700; color: var(--pri-cupo); }
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even) { background: var(--bg); }
.prosa caption { caption-side: bottom; padding-top: .6rem; font-size: var(--t-xs); color: var(--mut); text-align: left; }
.prosa figure { margin-inline: 0; }
.prosa figcaption { margin-top: .5rem; font-size: var(--t-xs); color: var(--mut); font-style: italic; }

.prosa code {
  font-family: "Consolas", "Menlo", "Courier New", monospace; font-size: .92em;
  background: var(--crema-forte); border: 1px solid var(--line-forte); border-radius: 6px;
  padding: .1em .38em;
}

/* riquadro riassuntivo dentro il testo */
.riquadro {
  position: relative; margin-block: var(--sp-6); padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surf); border: 2px solid var(--pri-chiaro); border-radius: var(--r-l);
  box-shadow: var(--omb-carta);
}
.riquadro__titolo {
  position: absolute; top: -16px; left: var(--sp-4); background: var(--pri); color: #FFFFFF;
  font-family: var(--f-tit); font-weight: 700; font-size: var(--t-s); padding: .2rem .9rem;
  border-radius: var(--r-tondo); box-shadow: 0 3px 0 var(--pri-cupo);
}

/* involucro che rende scorrevole una tabella larga su schermo stretto */
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   21. Riquadro autore e profili
   -------------------------------------------------------------------------- */
.autore-box {
  display: grid; gap: var(--sp-4); align-items: start; margin-top: var(--sp-7); padding: var(--sp-5);
  background: var(--crema); border: 2px solid var(--line-forte); border-radius: var(--r-l);
  box-shadow: var(--omb-morbida);
}
@media (min-width: 620px) { .autore-box { grid-template-columns: 132px 1fr; } }

.autore-box__foto {
  width: 132px; height: 132px; object-fit: cover; border-radius: 50%; border: 5px solid var(--surf);
  box-shadow: 0 0 0 4px var(--pri-chiaro);
}
.autore-box__nome { font-family: var(--f-tit); font-weight: 700; font-size: var(--t-l); }
.autore-box__nome a { text-decoration: none; }
.autore-box__nome a:hover { text-decoration: underline; }
.autore-box__ruolo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--pri-cupo);
  font-weight: 700; margin-bottom: var(--sp-2);
}
.autore-box__bio { font-size: var(--t-s); color: var(--mut); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.social__link {
  display: inline-block; font-size: var(--t-xs); font-weight: 700; text-decoration: none;
  color: var(--acc-cupo); background: var(--surf); border: 2px solid var(--acc-chiaro);
  border-radius: var(--r-tondo); padding: .3rem .85rem; min-height: 34px; line-height: 1.7;
}
.social__link:hover { background: var(--acc-velo); border-color: var(--acc); }

/* --------------------------------------------------------------------------
   22. Sezione contatto e modulo
   -------------------------------------------------------------------------- */
.contatto__interno { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) { .contatto__interno { grid-template-columns: .9fr 1.1fr; } }
.contatto__promessa p + p { margin-top: var(--sp-3); }

.modulo {
  position: relative; background: var(--surf); border: 2px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--omb-alta); padding: var(--sp-5);
}
.modulo::before {
  content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); top: -4px; height: 9px;
  border-radius: var(--r-tondo);
  background: linear-gradient(90deg, var(--pri) 0 33%, var(--acc) 33% 66%, var(--pri-chiaro) 66% 100%);
}
.campi { display: grid; gap: var(--sp-3); }
.campi--due { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .campi--due { grid-template-columns: repeat(2, 1fr); } }
.campo { display: grid; gap: .35rem; }
.campo__etichetta { font-family: var(--f-tit); font-weight: 600; font-size: var(--t-s); }
.campo__obbligatorio { color: var(--segnala); }
.campo__aiuto { font-size: var(--t-xs); color: var(--mut); }

.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: .65rem .9rem; background: var(--bg);
  border: 2px solid var(--line-forte); border-radius: var(--r-m); font-size: var(--t-base);
  transition: border-color .16s ease, background-color .16s ease;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--pri-chiaro); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { background: var(--surf); border-color: var(--acc); }
.modulo__nota { margin-top: var(--sp-3); font-size: var(--t-xs); color: var(--mut); }
.alternativa {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 2px dashed var(--line);
  font-size: var(--t-s);
}
.alternativa a { color: var(--acc-cupo); font-weight: 700; }

/* --------------------------------------------------------------------------
   23. Pagine di servizio, legali e mappa del sito
   -------------------------------------------------------------------------- */
.pagina-testo { padding-block: var(--sp-6) var(--sp-8); }
.pagina-testo h1 { font-size: var(--t-2xl); margin-bottom: var(--sp-4); }

.mappa-gruppo {
  margin-top: var(--sp-4); background: var(--surf); border: 2px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--omb-blocco); padding: var(--sp-4);
}
.mappa-gruppo h2 { font-size: var(--t-l); margin-bottom: var(--sp-3); }
.mappa-gruppo ul { display: grid; gap: .5rem; }
.mappa-gruppo li { position: relative; padding-left: 1.7rem; }
.mappa-gruppo li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 12px; border-radius: 4px;
  background: var(--acc-chiaro);
}

/* --------------------------------------------------------------------------
   24. Piede di pagina
   -------------------------------------------------------------------------- */
.piede {
  position: relative; margin-top: var(--sp-8); background: var(--crema);
  border-top: 3px solid var(--line-forte); padding-top: var(--sp-7);
}
.piede::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 10px;
  background-image: linear-gradient(90deg,
  var(--pri-chiaro) 0 16.6%, var(--acc-chiaro) 16.6% 33.3%,
  var(--pri) 33.3% 50%, var(--acc) 50% 66.6%,
  var(--pri-velo2) 66.6% 83.3%, var(--acc-velo2) 83.3% 100%);
}
.piede__griglia { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-6); }
@media (min-width: 640px) { .piede__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .piede__griglia { grid-template-columns: 1.25fr .8fr .95fr .8fr 1.15fr; } }

.piede__marchio {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-tit); font-weight: 700;
  font-size: 1.15rem; text-decoration: none; margin-bottom: var(--sp-2);
}
.piede__claim { font-size: var(--t-s); color: var(--mut); }
.piede__contatto { font-size: var(--t-s); margin-top: var(--sp-2); }
.piede__contatto a { color: var(--acc-cupo); font-weight: 700; }

.piede__titolo {
  font-size: var(--t-s); text-transform: uppercase; letter-spacing: .08em; color: var(--pri-cupo);
  margin-bottom: var(--sp-3);
}
.piede__lista { display: grid; gap: .45rem; font-size: var(--t-s); }
.piede__lista a { color: var(--ink); text-decoration: none; }
.piede__lista a:hover { color: var(--pri-cupo); text-decoration: underline; }

.piede__cookie {
  margin-top: var(--sp-3); min-height: 44px; padding: .45rem 1rem; font-size: var(--t-xs);
  font-family: var(--f-tit); font-weight: 700; color: var(--acc-cupo); background: var(--surf);
  border: 2px solid var(--acc-chiaro); border-radius: var(--r-tondo);
}
.piede__cookie:hover { background: var(--acc-velo); border-color: var(--acc); }

/* colonna ecosistema: cinque mattoncini colorati, non una lista grezza */
.ecosistema { display: grid; gap: .5rem; }
.ecosistema__link {
  display: grid; gap: .1rem; padding: .6rem .85rem; background: var(--surf);
  border: 2px solid var(--line); border-left: 8px solid var(--pri-chiaro); border-radius: var(--r-m);
  text-decoration: none; transition: transform .16s ease, border-color .16s ease;
}
.ecosistema__link:nth-child(even) { border-left-color: var(--acc); }
.ecosistema__link:hover { transform: translateX(4px); border-color: var(--pri-chiaro); }
.ecosistema__nome { font-family: var(--f-tit); font-weight: 700; font-size: var(--t-s); color: var(--ink); }
.ecosistema__desc { font-size: var(--t-xs); color: var(--mut); }

.piede__barra {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center;
  justify-content: space-between; padding-block: var(--sp-4); border-top: 2px solid var(--line-forte);
  font-size: var(--t-xs); color: var(--mut);
}
.piede__legale { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.piede__legale a { color: var(--mut); }

/* --------------------------------------------------------------------------
   25. Banner cookie
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 300;
  width: min(660px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surf); border: 3px solid var(--pri-chiaro); border-radius: var(--r-l);
  box-shadow: 0 6px 0 var(--pri-velo2), 0 30px 50px -24px rgba(38, 36, 26, .6); padding: var(--sp-4);
}
.cookie__titolo { font-family: var(--f-tit); font-weight: 700; font-size: var(--t-m); margin-bottom: var(--sp-2); }
.cookie__testo { font-size: var(--t-s); color: var(--mut); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.cookie__azioni .btn { flex: 1 1 190px; }

.cookie__personalizza {
  min-height: 44px; padding: .4rem .9rem; font-family: var(--f-tit); font-weight: 700;
  font-size: var(--t-s); color: var(--acc-cupo); text-decoration: underline;
  border-radius: var(--r-tondo);
}
.cookie__personalizza:hover { background: var(--acc-velo); }
.cookie__dettaglio { margin-top: var(--sp-3); font-size: var(--t-xs); }
.cookie__dettaglio table { border: 2px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.cookie__dettaglio th, .cookie__dettaglio td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
.cookie__dettaglio thead th { background: var(--crema); }
.cookie__dettaglio p { margin-top: var(--sp-2); color: var(--mut); }
.cookie__dettaglio a { color: var(--acc-cupo); font-weight: 700; }

/* --------------------------------------------------------------------------
   26. Adattamenti agli schermi stretti
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .testata__interno { min-height: 64px; }
  .marchio { font-size: 1.05rem; }
  .marchio__sigla { width: 38px; height: 38px; border-radius: 12px; }
  .hero { padding-block: var(--sp-6) var(--sp-7); }
  .hero__azioni .btn { width: 100%; }
  .tabellone__giorni { gap: 3px; }
  .giorno { width: 14px; height: 14px; border-radius: 5px; }
  .prova::before { left: var(--sp-3); }
  .cookie { bottom: 8px; padding: var(--sp-3); }
  .cookie__azioni .btn { flex: 1 1 100%; }
  .piede__barra { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .btn { padding-inline: 1.1rem; font-size: .96rem; }
  .tabellone__giorni { display: none; }
}

/* --------------------------------------------------------------------------
   27. Movimento ridotto e stampa
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .funzione:hover,
  .articolo-card:hover,
  .ecosistema__link:hover { transform: none; }
}

@media print {
  .testata, .menu-mobile, .cookie, .piede__cookie, .salta-al-contenuto { display: none !important; }
  body { background: #FFFFFF; }
  .prosa { max-width: none; }
  a { text-decoration: underline; }
}