/* =====================================================================
   L'ABC del Sonno — Anna Biginato
   Design system + componenti + responsive
   Palette ufficiale del marchio (documento Marchio e palette).
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Rosso / salmone del marchio */
  --red:      #ED4443;   /* rosso primario */
  --red-mid:  #B52B33;
  --red-dark: #881523;
  --salmon:   #F58985;   /* salmone del logo (cuore) */

  /* Scala "coral" (nomi storici, valori nuovi): azioni e accenti */
  --coral-050: #FEF2EF;
  --coral-100: #F9DBCF;
  --coral-200: #F7B1A7;
  --coral-300: #F79C94;
  --coral-400: #F58985;   /* salmone — icone, numeri, cuori */
  --coral-500: #ED4443;   /* rosso — pulsanti e azioni */
  --coral-600: #D4383A;   /* hover */
  --coral-700: #B52B33;

  /* Famiglie della palette */
  --peach:  #F7B1A7;  --peach-bg:  #FCEBE5;
  --yellow: #F4CE73;  --yellow-bg: #FBF3DC;  --yellow-dark: #A97F0F;
  --cream:  #F6E3AE;  --cream-bg:  #FDF7E7;  --gold: #EFB92B;
  --blue:   #74B0D1;  --blue-bg:   #E6F1F7;  --blue-mid: #4986B0; --blue-dark: #0D6697;
  --mint:   #779D72;  --mint-bg:   #E8F0E6;  --sage: #779D72;     --green-mid: #4B6751; --green-dark: #243B31;
  --red-bg: #FDE3E2;

  /* Neutrali (blu notte del marchio) */
  --ink:     #1F232B;
  --ink-soft:#3A3F48;
  --muted:   #6B717B;
  --line:    #ECE7E2;
  --line-2:  #E0DAD3;
  --paper:   #FFFFFF;
  --cream-section: #FAF7F3;   /* sfondo sezioni alternate */
  --hero-bg: #FCEFE9;         /* tinta chiarissima del rosa di palette */

  /* Tipografia */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe UI", cursive;

  /* Raggi / ombre / spazi */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --shadow-sm: 0 6px 18px -10px rgba(31,35,43,.28);
  --shadow-md: 0 22px 44px -26px rgba(31,35,43,.32);
  --shadow-lg: 0 34px 70px -34px rgba(31,35,43,.40);
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 118px); position: relative; }
.section--cream { background: var(--cream-section); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }

/* ---------- Tipografia ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--coral-500);
}
.eyebrow--muted { color: var(--muted); }
.section-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 58px); }
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.12;
  letter-spacing: -.02em; color: var(--ink); margin-top: .5rem;
}
.section-lead { color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.18rem); margin-top: .9rem; max-width: 60ch; }
.display {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.9rem, 8.5vw, 6.2rem); line-height: .98;
  letter-spacing: -.03em; color: var(--ink);
}
.display b { font-weight: 300; } /* keep hairline */
.hand { font-family: var(--font-hand); font-weight: 700; line-height: 1; }
.text-coral { color: var(--coral-500); }
p a, .link-inline { color: var(--coral-600); font-weight: 700; box-shadow: inset 0 -2px 0 var(--coral-200); }
p a:hover { box-shadow: inset 0 -8px 0 var(--coral-100); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 800; font-size: 1rem;
  padding: .92rem 1.6rem; border-radius: var(--r-pill);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s;
  will-change: transform; text-align: center; line-height: 1.1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--coral-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--coral-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--white { background: #fff; color: var(--coral-600); box-shadow: var(--shadow-sm); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--coral-600); padding-inline: .4rem; }
.btn--ghost:hover { color: var(--coral-700); }
.btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--outline:hover { border-color: var(--coral-400); color: var(--coral-600); transform: translateY(-2px); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; justify-content: center; }
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: var(--r-pill); text-transform: uppercase;
}
.badge svg { width: 1em; height: 1em; flex: none; }
.badge--sage  { background: var(--mint-bg);  color: var(--green-mid); }
.badge--coral { background: var(--coral-100); color: var(--coral-700); }
.badge--blue  { background: var(--blue-bg);  color: var(--blue-dark); }
.badge--dot::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background: currentColor; opacity:.9; }
.tag {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: .92rem; color: var(--ink-soft);
  padding: .55rem 1rem; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background:#fff;
}
.tag-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Decorations (line-art) ---------- */
.deco { position: absolute; color: var(--line-2); opacity: .5; pointer-events: none; z-index: 0; }
.deco svg { width: 100%; height: 100%; }
.deco--soft { color: #E6D9D3; opacity: .6; }
.deco--white { color: #fff; opacity: .28; }

/* Decorazioni a immagine (elementi del mockup: papavero, luna, sole, stelle…) */
.deco-img { position: absolute; pointer-events: none; z-index: 0; opacity: .55; }
.deco-img img { width: 100%; height: auto; }
.deco-img--faint { opacity: .35; }
.has-deco { position: relative; }
.has-deco > .container { position: relative; z-index: 1; }
/* Qualsiasi contenuto (non decorazione) dentro un blocco con decori sta sopra i decori */
.has-deco > *:not(.deco):not(.deco-img) { position: relative; z-index: 1; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.site-header.is-stuck { border-color: var(--line); box-shadow: 0 8px 24px -20px rgba(60,45,35,.5); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 40px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.9rem); }
.nav__links { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.5rem); }
.nav__link {
  font-weight: 700; font-size: .98rem; color: var(--ink-soft);
  padding: .5rem .2rem; position: relative; transition: color .2s;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--coral-600); }
.nav__link[aria-current="page"]::after {
  content:""; position:absolute; left:.2rem; right:.2rem; bottom:.1rem; height:2px;
  background: var(--coral-400); border-radius: 2px;
}
.nav__cta { display: inline-flex; }
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width: 22px; height: 2.4px; background: var(--ink); border-radius: 3px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle span::before { position: absolute; transform: translateY(-7px); }
.nav__toggle span::after  { position: absolute; transform: translateY(7px); }
.nav__toggle span { position: relative; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: rotate(45deg); }
body.menu-open .nav__toggle span::after  { transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); position: relative; overflow: hidden; }
.hero__top { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 96px) clamp(22px, 3vw, 40px); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero__title { margin: 1.1rem 0 1.1rem; }
.hero__lead { color: var(--ink-soft); font-size: clamp(1.05rem, 1.8vw, 1.28rem); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.9rem; }
.hero__aside { display: flex; justify-content: center; }

/* Stats band */
.stats {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-2);
  margin-top: clamp(40px, 6vw, 74px);
  background: var(--hero-bg);
}
.stats__grid > .stat { position: relative; z-index: 2; background: var(--hero-bg); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: clamp(26px,4vw,40px) clamp(6px,2vw,24px); }
.stat + .stat { border-left: 1px solid var(--line-2); }
.stat__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--coral-500); letter-spacing:-.02em; line-height:1; }
.stat__label { color: var(--muted); font-size: .96rem; margin-top: .5rem; }

/* ---------- Review card (custom) ---------- */
.review-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: clamp(20px, 2.4vw, 28px); width: 100%; max-width: 400px; border: 1px solid var(--line);
}
.review-card--float { position: relative; }
.review-card__head { display: flex; align-items: center; gap: .85rem; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--peach-bg); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: var(--coral-600); font-size: 1.05rem;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.review-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.15; }
.review-card__meta { color: var(--muted); font-size: .86rem; }
.review-card__quote {
  margin-top: 1rem; color: var(--ink-soft); font-style: italic; font-size: 1.02rem;
  padding-left: .95rem; border-left: 3px solid var(--coral-300);
}
.review-card__foot { margin-top: 1.1rem; }

/* Rating (cuori) — la larghezza è guidata da --hs; il "mezzo voto" è un
   ritaglio (overflow hidden) del cuore pieno, che mantiene SEMPRE la
   dimensione intera: max-width:none evita che il reset lo riscali. */
.rating { --hs: 15px; display: inline-flex; align-items: center; gap: .34rem; }
.rating__heart { width: var(--hs); height: calc(var(--hs) * 1.22); position: relative; color: var(--coral-100); }
.rating__heart svg { width: 100%; height: 100%; }
.rating__fill {
  position: absolute; inset: 0; overflow: hidden; color: var(--coral-400);
}
.rating__fill svg { width: var(--hs); max-width: none; height: 100%; }
.rating--sm { --hs: 13px; gap: .28rem; }
.rating__value { font-weight: 800; color: var(--ink-soft); font-size: .9rem; margin-left: .4rem; }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.about__media { position: relative; }
.about__img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3.4; object-fit: cover; background: var(--peach-bg); }
.about__stamp { position: absolute; left: 18px; bottom: 18px; background: rgba(234,251,236,.94); backdrop-filter: blur(4px); }
.about__stamp b { color: var(--sage); }
.pull {
  color: var(--coral-600); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.4; margin: 1.4rem 0; letter-spacing: -.01em;
}
.about__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem,2.6vw,1.9rem); letter-spacing: -.01em; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 1rem; }

/* ---------- Percorsi (cards colorate) ---------- */
.percorsi__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 22px);
}
.percorso {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px,2.2vw,26px); display: flex; flex-direction: column; gap: .6rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position: relative; overflow: hidden;
}
.percorso::before { content:""; position:absolute; inset:0 0 auto 0; height: 5px; background: var(--acc, var(--coral-300)); opacity:.9; }
.percorso:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.percorso__chip {
  width: 52px; height: 52px; border-radius: 16px; background: var(--acc-bg, var(--coral-050));
  display: grid; place-items: center; color: var(--acc-ink, var(--coral-600)); margin-bottom: .4rem;
}
.percorso__chip svg { width: 26px; height: 26px; }
.percorso__chip img { width: 28px; height: 28px; object-fit: contain; }
.percorso__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.percorso__age { font-weight: 600; font-size: .95rem; color: var(--muted); margin-top: -.2rem; }
.percorso__text { color: var(--muted); font-size: .95rem; }
.percorso__link { margin-top: auto; font-weight: 800; color: var(--acc-ink, var(--coral-600)); font-size: .92rem; display: inline-flex; gap:.35rem; align-items:center; padding-top:.6rem; }
.percorso__link svg { width: 14px; height: 14px; flex: none; transition: transform .2s var(--ease); }
.percorso__link:hover svg { transform: translateX(3px); }

/* accent presets */
.acc-mint  { --acc: var(--mint);  --acc-bg: var(--mint-bg);  --acc-ink: var(--green-mid); }
.acc-blue  { --acc: var(--blue);  --acc-bg: var(--blue-bg);  --acc-ink: var(--blue-dark); }
.acc-peach { --acc: var(--peach); --acc-bg: var(--peach-bg); --acc-ink: var(--red-mid); }
.acc-yellow{ --acc: var(--yellow);--acc-bg: var(--yellow-bg);--acc-ink: var(--yellow-dark); }
.acc-red   { --acc: var(--red);   --acc-bg: var(--red-bg);   --acc-ink: var(--red-dark); }

/* ---------- Steps (come funziona) ---------- */
.works__grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(30px,5vw,64px); align-items: start; }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.4rem 0; align-items: start; }
.step + .step { border-top: 1px solid var(--line); }
.step__num {
  width: 62px; height: 62px; border-radius: 50%; background: var(--coral-050);
  display: grid; place-items: center; flex: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 2.2rem; color: var(--coral-500); line-height: 1;
}
.step__num img { height: 30px; width: auto; }
.step__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; }
.step__text { color: var(--muted); font-size: .98rem; margin-top: .25rem; }
.outcome {
  background: var(--cream-section); border-radius: var(--r-lg); padding: clamp(22px,2.6vw,30px);
  border: 1px solid var(--line); align-self: stretch;
}
.outcome__title { font-weight: 800; font-size: .82rem; letter-spacing:.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.outcome__item { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.outcome__item + .outcome__item { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px dashed var(--line-2); }
.outcome__dot { width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: .15rem; background: var(--blue-bg); display:grid; place-items:center; color: var(--blue-dark); }
.outcome__dot svg { width: 15px; height: 15px; }
.outcome__k { font-family: var(--font-display); font-weight: 600; }
.outcome__v { color: var(--muted); font-size: .92rem; }

/* ---------- Testimonials (masonry stagger) ---------- */
.tst { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px,2vw,26px); align-items: start; }
.tst .review-card { max-width: none; }
.tst__col { display: flex; flex-direction: column; gap: clamp(16px,2vw,26px); }
.tst__col--2 { margin-top: clamp(28px, 5vw, 64px); }
.tst__more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--coral-600); margin-top: 1.6rem; }
.tst__more:hover { color: var(--coral-700); }

/* Carousel (hero + generic) */
.rc-carousel { position: relative; }
.rc-carousel .review-card { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rc-fade-enter { opacity: 0; transform: translateY(8px); }
.rc-dots { display: flex; gap: .4rem; justify-content: center; margin-top: 1rem; }
.rc-dot { width: 8px; height: 8px; padding: 0; border: 0; flex: none; border-radius: 50%; background: var(--coral-200); transition: transform .3s, background .3s; }
.rc-dot.is-active { background: var(--coral-400); transform: scale(1.3); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,20px); align-items: start; }
.faq__item { background: var(--cream-section); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s, background .2s; }
.faq__item.is-open { border-color: var(--coral-200); background: var(--coral-050); }
.faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.3rem; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; }
.faq__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; position: relative; transition: background .2s; }
.faq__icon::before, .faq__icon::after { content:""; position: absolute; width: 12px; height: 2.4px; background: var(--coral-500); border-radius: 2px; transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__item.is-open .faq__icon { background: var(--coral-200); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a-inner { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--coral-400); color: #fff; text-align: center; overflow: hidden; }
.cta-band .section-title, .cta-band h2 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem,4vw,2.7rem); letter-spacing:-.02em; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 54ch; margin: 1rem auto 2rem; font-size: 1.06rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #DCDFE5; padding-block: clamp(48px,6vw,72px) 2rem; }
.footer a { color: #DCDFE5; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(26px,4vw,48px); }
.footer__brand img { height: 46px; opacity: .98; }
.footer__tag { color: #AEB4BD; margin-top: 1rem; max-width: 34ch; font-size: .96rem; }
.footer__h { font-family: var(--font-display); font-weight: 600; font-size: .96rem; color:#fff; margin-bottom: 1rem; letter-spacing:.02em; }
.footer__list li + li { margin-top: .6rem; }
.footer__list a { color: #C3C8D0; font-size: .96rem; }
.footer__list a:hover { color:#fff; }
.footer__contact a { display: inline-flex; align-items: center; gap:.55rem; color:#D0D4DB; font-size:.96rem; }
.footer__contact li + li { margin-top:.7rem; }
.footer__contact svg { width: 17px; height: 17px; color: var(--coral-400); flex:none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: clamp(34px,4vw,52px); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap:.6rem 1.4rem; justify-content: space-between; align-items:center; color:#8B929C; font-size:.86rem; }
.footer__bottom a { color:#8B929C; } .footer__bottom a:hover{color:#fff;}
.socials { display:flex; gap:.6rem; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display:grid; place-items:center; transition: background .2s, transform .2s; }
.socials a:hover { background: var(--coral-500); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field > label { font-weight: 700; font-size: .94rem; color: var(--ink-soft); }
.field .req { color: var(--coral-500); }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--ink);
  padding: .85rem 1rem; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 140px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--coral-400); box-shadow: 0 0 0 4px var(--coral-050); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { color: var(--muted); font-size: .88rem; }
.form-alert { padding: .9rem 1.1rem; border-radius: 12px; font-weight: 700; font-size: .95rem; display:none; }
.form-alert.is-show { display:block; }
.form-alert--ok { background: var(--mint-bg); color: var(--green-mid); }
.form-alert--err { background: var(--coral-100); color: var(--coral-700); }

/* Panel / card generic */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,40px); box-shadow: var(--shadow-sm); }
.panel--cream { background: var(--cream-section); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,52px); align-items: start; }
.grid-2--prenota { grid-template-columns: 1.4fr .9fr; }
.info-list li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .55rem 0; color: var(--ink-soft); }
.info-list svg { width: 20px; height: 20px; color: var(--coral-500); margin-top: .2rem; flex:none; }

/* Contact tiles */
.contact-tiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 1.4rem; }
.contact-tile { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem 1.3rem; display:flex; gap:.9rem; align-items:center; min-width:0; transition: box-shadow .2s, transform .2s, border-color .2s; }
.contact-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); border-color: var(--coral-200); }
.contact-tile__ic { width: 44px; height:44px; border-radius: 12px; background: var(--coral-050); color: var(--coral-600); display:grid; place-items:center; flex:none; }
.contact-tile__ic svg { width: 22px; height:22px; }
.contact-tile > span:last-child { min-width:0; }
.contact-tile b { display:block; font-family: var(--font-display); }
.contact-tile span span, .contact-tile > span > span { color: var(--muted); font-size:.9rem; white-space:nowrap; }

/* Calendly */
.calendly-wrap { border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background:#fff; box-shadow: var(--shadow-sm); min-height: 680px; }
.calendly-inline-widget { min-height: 680px; }
.calendly-fallback { padding: clamp(28px,4vw,48px); text-align:center; }

/* Page hero (interne) */
.page-hero { background: var(--hero-bg); padding-block: clamp(46px,6vw,86px); }
.page-hero .display { font-size: clamp(2.3rem, 6vw, 4.2rem); }
.breadcrumb { color: var(--muted); font-size:.9rem; font-weight:700; }
.breadcrumb a:hover { color: var(--coral-600); }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }
.post { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post__cover { aspect-ratio: 16/10; display:grid; place-items:center; color:#fff; }
.post__cover svg { width: 64px; height:64px; opacity:.9; }
.post__body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post__cat { font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--coral-500); }
.post__title { font-family: var(--font-display); font-weight:600; font-size:1.14rem; line-height:1.25; }
.post__text { color: var(--muted); font-size:.95rem; }
.post__more { margin-top:auto; font-weight:800; color: var(--coral-600); padding-top:.6rem; }

/* ---------- Admin ---------- */
.admin-bar { background: var(--cream-section); border-bottom:1px solid var(--line); }
.admin-note { background: var(--blue-bg); border:1px solid rgba(116,176,209,.35); color:var(--blue-dark); border-radius: var(--r-md); padding: 1rem 1.2rem; font-size:.95rem; }
.admin-note b { color:var(--blue-dark); }
.rev-admin-list { display:grid; gap: 1rem; }
.rev-row { display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.2rem; }
.rev-row__main { min-width:0; }
.rev-row__name { font-family: var(--font-display); font-weight:600; }
.rev-row__quote { color: var(--muted); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rev-row__actions { display:flex; gap:.5rem; }
.icon-btn { width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line-2); display:grid; place-items:center; background:#fff; transition: border-color .2s, color .2s, background .2s; }
.icon-btn:hover { border-color: var(--coral-400); color: var(--coral-600); }
.icon-btn--danger:hover { border-color: var(--coral-500); background: var(--coral-050); color: var(--coral-700); }
.icon-btn svg { width:18px; height:18px; }
.toolbar { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.chip-count { background: var(--coral-100); color: var(--coral-700); font-weight:800; padding:.3rem .7rem; border-radius: var(--r-pill); font-size:.85rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
  .percorsi__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: repeat(2,1fr); }
  .contact-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { justify-content: flex-start; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .works__grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2--prenota { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .tst { grid-template-columns: 1fr; }
  .tst__col--2 { margin-top: 0; }

  /* Mobile nav */
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .6rem var(--gutter) 1.4rem; box-shadow: var(--shadow-md);
    transform: translateY(-120%); transition: transform .35s var(--ease); z-index: 55;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  body.menu-open .nav__menu { transform: translateY(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: .95rem .2rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav__link[aria-current="page"]::after { display:none; }
  .nav__cta { margin-top: 1rem; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line-2); }
  .percorsi__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions .btn--ghost { width: auto; }
  .rev-row { grid-template-columns: 1fr; }
  .rev-row__actions { justify-content: flex-end; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Extra utilities & placeholders ---------- */
.skip-link {
  position: absolute; left: 12px; top: 8px; z-index: 200;
  background: var(--coral-500); color: #fff; font-weight: 800;
  padding: .6rem 1rem; border-radius: 10px; transform: translateY(-140%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); clip: auto; width: auto; height: auto; margin: 0; }

/* Photo placeholder (sostituibile con foto reale) */
.img-ph {
  width: 100%; aspect-ratio: 4/3.4; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  background: linear-gradient(150deg, var(--coral-200), var(--peach) 45%, var(--cream) 100%);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.img-ph__art { position: absolute; inset: auto -6% -14% auto; width: 62%; color: #fff; opacity: .5; }
.img-ph__art svg { width: 100%; }
.img-ph__tag {
  position: relative; z-index: 1; background: rgba(255,255,255,.9); color: var(--coral-700);
  font-weight: 800; font-size: .82rem; letter-spacing: .04em; padding: .5rem .95rem;
  border-radius: var(--r-pill); backdrop-filter: blur(3px);
}
.lead-narrow { max-width: 62ch; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.section-cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top: 2.2rem; }
.divider-note { color: var(--muted); font-size:.92rem; margin-top:1rem; }

/* Feature list icon rows */
.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
@media (max-width: 900px){ .feature-grid{ grid-template-columns:1fr; } }
.feature { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px,2.4vw,28px); }
.feature__ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem; color:#fff; }
.feature__ic svg { width:26px; height:26px; }
.feature h3 { font-family: var(--font-display); font-weight:600; font-size:1.14rem; margin-bottom:.4rem; }
.feature p { color: var(--muted); font-size:.96rem; }

/* Detailed percorso block */
.pdetail { display:grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,44px); padding: clamp(26px,3vw,40px); border:1px solid var(--line); border-radius: var(--r-xl); background:#fff; align-items:start; }
.pdetail + .pdetail { margin-top: clamp(18px,2vw,26px); }
.pdetail__badge { width: 96px; height:96px; border-radius: 24px; display:grid; place-items:center; color: var(--acc-ink, var(--coral-600)); }
.pdetail__badge svg { width:46px; height:46px; }
.pdetail__age { font-weight: 600; font-size: 1rem; color: var(--muted); }
.pdetail h3 { font-family: var(--font-display); font-weight:700; font-size: clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.01em; margin:.2rem 0 .6rem; }
.pdetail ul { margin-top:1rem; display:grid; gap:.6rem; }
.pdetail li { display:grid; grid-template-columns:auto 1fr; gap:.7rem; color: var(--ink-soft); }
.pdetail li svg { width:20px; height:20px; color: var(--acc-ink, var(--coral-500)); margin-top:.15rem; }
@media (max-width: 640px){ .pdetail{ grid-template-columns:1fr; } .pdetail__badge{width:72px;height:72px;} }

/* ---------- Rifiniture (feedback v2) ---------- */
.about__stamp { font-size: .7rem; padding: .45rem .75rem; gap: .4rem; }
a.about__stamp:hover { background: var(--mint-bg); box-shadow: var(--shadow-sm); }
.pdetail__badge img { width: 46px; height: 46px; object-fit: contain; }
.post__cover img { width: 60px; height: 60px; object-fit: contain; }
.img-ph__art img { width: 100%; height: auto; }

/* ---------- Testimonianze home: disposizione orizzontale sfalsata ---------- */
.tsth { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.tsth .review-card { max-width: none; }
.tsth__item--1 { grid-column: 1 / span 4; }
.tsth__item--2 { grid-column: 5 / span 4; }
.tsth__cta     { grid-column: 10 / span 3; align-self: center; margin-top: 0; }
.tsth__item--3 { grid-column: 3 / span 4; }
.tsth__item--4 { grid-column: 8 / span 4; }
@media (max-width: 900px) {
  .tsth { grid-template-columns: 1fr; }
  .tsth__item--1, .tsth__item--2, .tsth__item--3, .tsth__item--4 { grid-column: 1; }
  .tsth__cta { grid-column: 1; order: 10; margin-top: .6rem; }
}


/* ---------- Aggiunte contenuti v6 ---------- */
.percorso__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.9rem; flex-wrap:wrap; }
.percorso__price { font-family: var(--font-display); font-weight:700; font-size:1.35rem; color: var(--acc-ink, var(--coral-600)); white-space:nowrap; }
.percorso__link { font-weight: 800; color: var(--acc-ink, var(--coral-600)); font-size:.9rem; display:inline-flex; gap:.3rem; align-items:center; white-space:nowrap; }
.percorso__link svg { width: 14px; height: 14px; flex:none; transition: transform .2s var(--ease); }
.percorso__link:hover svg { transform: translateX(3px); }

.pdetail__inc-title { font-family: var(--font-display); font-weight:600; font-size:.95rem; margin:1.2rem 0 .6rem; color: var(--ink); }
.pdetail__foot { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.pdetail__price { font-family: var(--font-display); font-weight:700; font-size:1.6rem; color: var(--acc-ink, var(--coral-600)); white-space:nowrap; }

.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .feature-grid--3 { grid-template-columns: 1fr; } }
.feature__lettera { width:56px; height:56px; margin-bottom:.6rem; color: var(--coral-500); }
.feature__lettera svg { width:100%; height:100%; }

.footer__disclaimer { border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(28px,3.5vw,44px); padding-top:1.4rem; color:#AEB4BD; font-size:.85rem; font-style:italic; max-width:70ch; }


/* Papavero della hero: a cavallo della fascia statistiche, dietro di esse */
.hero { --stats-h: 132px; }
.hero__poppy { position: absolute; left: 52%; bottom: calc(var(--stats-h) - 70px); z-index: 0; }
@media (max-width: 900px){ .hero__poppy { left: auto; right: 6%; bottom: auto; top: 40%; width: 150px !important; height: 145px !important; } }


/* ---- Mobile: decorazioni sempre dietro il testo e più discrete ---- */
@media (max-width: 700px){
  .has-deco > .deco, .has-deco > .deco-img { z-index: 0 !important; }
  .page-hero .deco, .hero .deco, .cta-band .deco { opacity: .28; }
  .page-hero .deco { max-width: 34vw; height: auto; }
}


/* ---- Hero: layer decorazioni sempre DIETRO il contenuto ---- */
.hero__decos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__decos .deco { position: absolute; }
.hero__top { position: relative; z-index: 2; }
.hero .stats { position: relative; z-index: 3; }
/* papavero più in alto (chiesto): a cavallo ma spostato verso l'alto */
.hero__poppy { left: 53%; bottom: auto; top: 44%; }
@media (max-width: 900px){
  .hero__poppy { left: auto; right: 5%; top: 34%; width: 150px !important; height: 145px !important; }
}


/* ---- Hero: contenuto sopra, decorazioni dietro (sparse dentro hero__top) ---- */
.hero__top { position: relative; }
.hero__top > .deco { z-index: 0; }
.hero__top > .container { position: relative; z-index: 1; }
.hero .stats { position: relative; z-index: 1; }
/* papavero a cavallo della fascia stats, ma tenuto un po' più su */
.hero__top > .deco.hero-poppy { z-index: 0; }
@media (max-width: 760px){
  /* su mobile riduco: niente decori grandi addosso al testo, solo accenti discreti */
  .hero__top > .deco { opacity: .5; }
  .hero__top > .deco:nth-of-type(2),  /* nuvola */
  .hero__top > .deco:nth-of-type(3),  /* papavero */
  .hero__top > .deco:nth-of-type(7) { /* zzz */ display: none; }
}

/* ---------- Seminari e collaborazioni (home) ---------- */
.collab { display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px); align-items:center;
  background: var(--blue-bg); border-radius: var(--r-xl); padding: clamp(24px,4vw,52px); }
.collab__art { width:120px; height:120px; color: var(--blue-dark); opacity:.9; flex:none; }
.collab__art svg { width:100%; height:100%; }
.collab__body .section-lead { margin-top:.6rem; }
@media (max-width: 760px){ .collab { grid-template-columns:1fr; text-align:left; } .collab__art { width:76px; height:76px; } }

/* ---------- Contatti: scelta destinatario ---------- */
.audience { display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px,2.5vw,28px); }
.audience__card { display:flex; flex-direction:column; gap:.5rem; padding: clamp(22px,3vw,34px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.audience__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--coral-200); }
.audience__card--blue:hover { border-color: var(--blue); }
.audience__ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background: var(--coral-050); color: var(--coral-600); margin-bottom:.3rem; }
.audience__ic svg { width:26px; height:26px; }
.audience__card--blue .audience__ic { background: var(--blue-bg); color: var(--blue-dark); }
.audience__card h3 { font-family: var(--font-display); font-weight:600; font-size:1.2rem; }
.audience__card p { color: var(--muted); }
.audience__go { margin-top:auto; font-weight:800; color: var(--coral-600); display:inline-flex; gap:.4rem; align-items:center; padding-top:.4rem; }
.audience__card--blue .audience__go { color: var(--blue-dark); }
.audience__go svg { width:14px; height:14px; }
@media (max-width: 700px){ .audience { grid-template-columns:1fr; } }

/* ---------- Modifiche rev1 ---------- */
/* Evidenziazione testo (Chi sono) */
mark.hl { background: linear-gradient(transparent 55%, var(--yellow) 55%); color: inherit; padding: 0 .1em; }

/* Hero: citazione singola statica al posto del carosello */
.hero__quote { background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: clamp(24px,3vw,36px); max-width:400px; margin:0; }
.hero__quote blockquote { font-family: var(--font-display); font-weight:500; font-size:1.15rem; line-height:1.5; margin:.8rem 0; color: var(--ink); }
.hero__quote figcaption { color: var(--muted); font-size:.9rem; font-weight:600; }

/* Recensioni complete affiancate (home) */
.rfull-grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(18px,2.5vw,28px); align-items:start; }
.rfull { background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: clamp(22px,3vw,34px); margin:0; display:flex; flex-direction:column; gap:1rem; }
.rfull__head { display:flex; gap:.8rem; align-items:center; }
.rfull__ava { width:46px; height:46px; border-radius:50%; background: var(--coral-100); color: var(--coral-700); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; flex:none; }
.rfull__name { font-family: var(--font-display); font-weight:600; }
.rfull__child { color: var(--muted); font-size:.88rem; }
.rfull__quote { margin:0; padding-left:1rem; border-left:3px solid var(--coral-200); font-style:italic; color: var(--ink-soft); line-height:1.6; }
@media (max-width: 820px){ .rfull-grid { grid-template-columns:1fr; } }

/* Esito: punti in colonna, distribuiti su tutta l'altezza del riquadro */
.outcome { display:flex; flex-direction:column; }
.outcome__grid { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem; }

/* ---------- Modifiche rev2 ---------- */
/* Grassetto uniforme nel testo Chi sono (stessa dimensione del corpo) */
.prose .em { font-weight: 700; color: var(--ink); font-size: inherit; }

/* Titoli lunghi che devono stare su una riga sola su schermi ampi */
@media (min-width: 780px){
  .section-title--nowrap { white-space: nowrap; }
}

/* ---------- Modifiche rev3 ---------- */
/* Tag Chi sono più evidenti (accento coral) */
.tag--accent { background: var(--coral-050); border-color: var(--coral-200); color: var(--coral-700); }

/* Statistiche home più evidenti: dato con più peso e colore pieno */
.stat__num { font-weight: 600; }
.stat__label { color: var(--ink-soft); font-weight: 600; }

/* Titolo card "Asili nido e studi professionali" su una riga */
@media (min-width: 620px){
  .audience__title--nowrap { white-space: nowrap; }
}

/* ---------- Modifiche rev5: titoli e sottotitoli su una riga (desktop) ---------- */
/* Su schermi ampi eliminiamo i limiti di larghezza che spezzavano i titoli
   anche con spazio laterale disponibile, e teniamo titoli e sottotitoli "header"
   su una riga sola (ogni frase separata da <br> resta intera).
   Su mobile/tablet il testo va comunque a capo, perché fisicamente necessario. */
@media (min-width: 1000px){
  /* niente più clip a 720px: il titolo usa tutto lo spazio disponibile */
  .section-head { max-width: none; }
  /* SOLO i titoli delle intestazioni a tutta larghezza vanno su una riga.
     NON i .section-title dentro layout a colonne (es. "Chi sono" con foto a
     fianco): lì il nowrap gonfierebbe la colonna di testo e schiaccerebbe
     l'immagine. */
  .section-head .section-title { white-space: nowrap; }

  /* sottotitoli "header" (occhiello + titolo + 1-2 frasi brevi):
     ogni frase resta su una riga; NON tocchiamo i .section-lead lunghi
     dei paragrafi descrittivi, che devono restare a capo */
  .section-head .section-lead.lead-narrow,
  .page-hero .section-lead.lead-narrow { max-width: none; white-space: nowrap; }

  /* titoli hero di pagina su una riga */
  .page-hero .display { white-space: nowrap; }
  /* hero molto lunghi: font adattato per stare comunque su una riga */
  .page-hero .display--fit { font-size: clamp(1.9rem, 3.1vw, 2.5rem); }
}