/* ============================================================================
   NOEMI MICHELINI — Psicologa · TNPEE
   Foglio di stile completo
   ----------------------------------------------------------------------------
   Indice
   01. Token          — colori, tipografia, spazi, ombre
   02. Reset e base
   03. Tipografia
   04. Layout e contenitori
   05. Motivi grafici — grana, archi, quattro punti
   06. Bottoni e link
   07. Intestazione e navigazione
   08. Hero
   09. Barra credenziali
   10. Le due aree
   11. Chi sono
   12. Percorso in quattro passi
   13. Dove ricevo
   14. FAQ
   15. Blog
   16. Contatti e modulo
   17. Piè di pagina
   18. Barra mobile
   19. Utilità e accessibilità
   20. Stampa
   ========================================================================== */

/* ---------------------------------------------------------------- 01. TOKEN */

:root{
  /* Neutri caldi — sabbia chiarissima, luce di stanza con la finestra aperta.
     Il sito è volutamente a tema chiaro: niente versione scura. */
  --ground:      #F7F3ED;
  --surface:     #FFFDF9;
  --surface-2:   #F2ECE2;
  --warm:        #F3EDE2;
  --mint:        #EBF1EB;
  --ink:         #23261F;
  --ink-soft:    #5A5F58;
  --ink-faint:   #676D65;
  --line:        #E3DCD0;
  --line-strong: #CCC3B4;

  /* Accento 1 — area adulti */
  --adult:       #2C5F66;
  --adult-deep:  #1E464C;
  --adult-wash:  #DFEAE6;

  /* Accento 2 — area età evolutiva */
  --child:       #8A5A16;
  --child-deep:  #6C4510;
  --child-wash:  #F8E9D2;

  --on-accent:   #FFFDF9;

  /* Colori del marchio — usati solo nel logo e nel motivo a quattro punti */
  --mark-green:  #4FBE94;
  --mark-yellow: #FBD65E;
  --mark-pink:   #FF68C0;
  --mark-orange: #F1875D;

  /* Tipografia */
  --serif: "Faustina", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Karla", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(.82rem, .80rem + .10vw, .88rem);
  --step-0:  clamp(1.04rem, 1.00rem + .18vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.14rem + .34vw, 1.42rem);
  --step-2:  clamp(1.50rem, 1.34rem + .62vw, 1.92rem);
  --step-3:  clamp(1.86rem, 1.56rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.30rem, 1.70rem + 2.50vw, 4.00rem);

  /* Spazi — scala di 4 px */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem;   --s-12: 3rem;  --s-16: 4rem;

  --wrap: 1180px;
  --radius: 3px;
  --radius-pill: 999px;
  --arch: 48% 48% 4px 4px / 32% 32% 4px 4px;

  --shadow-sm: 0 1px 2px rgba(58,44,26,.05);
  --shadow:    0 1px 2px rgba(58,44,26,.05), 0 8px 24px -12px rgba(58,44,26,.16);
  --shadow-lg: 0 2px 4px rgba(58,44,26,.06), 0 18px 40px -20px rgba(58,44,26,.26);

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

  color-scheme: light;   /* il sito è solo chiaro, anche su dispositivi in tema scuro */
}

/* ------------------------------------------------------- 02. RESET E BASE */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* ------------------------------------------------------- 03. TIPOGRAFIA */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.14;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.01em;
}
p{ margin:0; }
strong,b{ font-weight:600; }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}

.lede{ font-size:var(--step-1); line-height:1.55; color:var(--ink-soft); }

.ph{ /* dato ancora da compilare */
  color:var(--child);
  font-weight:600;
  border-bottom:1.5px dotted currentColor;
  white-space:nowrap;
}

/* ------------------------------------------- 04. LAYOUT E CONTENITORI */

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
@media (max-width:600px){ .wrap{ width:min(100% - 1.75rem, var(--wrap)); } }

section{ scroll-margin-top:5.5rem; }

.band{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.band--surface{ background:var(--surface); border-block:1px solid var(--line); }
.band--warm{ background:var(--warm); border-block:1px solid var(--line); }
.band--mint{ background:var(--mint); border-block:1px solid var(--line); }

.band-head{ max-width:60ch; margin-bottom:clamp(2rem, 4vw, 3rem); }
.band-head h2{ font-size:var(--step-3); margin-top:var(--s-3); }
.band-head p{ color:var(--ink-soft); margin-top:var(--s-4); font-size:var(--step-1); line-height:1.55; }

/* ------------------------------------- 05. MOTIVI GRAFICI DISTINTIVI */

/* Grana leggerissima su tutta la pagina: toglie il "digitale" e scalda. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Quattro punti: il motivo ripreso dalle tessere del marchio.
   Marca l'inizio delle sezioni principali. */
.dots{ display:flex; gap:.4rem; align-items:center; margin-bottom:var(--s-4); }
.dots i{ width:7px; height:7px; border-radius:50%; display:block; }
.dots i:nth-child(1){ background:var(--mark-green); }
.dots i:nth-child(2){ background:var(--mark-yellow); }
.dots i:nth-child(3){ background:var(--mark-pink); }
.dots i:nth-child(4){ background:var(--mark-orange); }

/* Cornice ad arco: la forma che rende riconoscibile il sito.
   Si usa per le fotografie e per i riquadri che le sostituiscono. */
.arch{
  position:relative;
  border-radius:var(--arch);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, var(--child-wash) 0%, transparent 58%),
    radial-gradient(100% 80% at 10% 90%, var(--adult-wash) 0%, transparent 62%),
    var(--surface-2);
  border:1px solid var(--line);
  display:grid; place-items:center;
  isolation:isolate;
}
.arch::after{ /* trama a puntini, coerente con la grana */
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(currentColor .6px, transparent .6px);
  background-size:7px 7px; color:var(--ink-faint); opacity:.16;
}
.arch img{ width:100%; height:100%; object-fit:cover; }
.arch--portrait{ aspect-ratio:4/5; }
.arch--square{ aspect-ratio:1/1; }
.arch--wide{ aspect-ratio:16/10; border-radius:24% 24% 4px 4px / 14% 14% 4px 4px; }

.arch-label{
  position:relative; z-index:1;
  text-align:center; max-width:22ch; padding:var(--s-4);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--ink-faint); line-height:1.9;
}

/* ---------------------------------------------- 06. BOTTONI E LINK */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:var(--step-0); font-weight:600;
  padding:.82em 1.5em;
  border:1.5px solid transparent; border-radius:var(--radius-pill);
  text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .18s var(--ease),
             box-shadow .2s var(--ease);
}
.btn-primary{ background:var(--adult); color:var(--on-accent); border-color:var(--adult); }
.btn-primary:hover{ background:var(--adult-deep); border-color:var(--adult-deep); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-child{ background:var(--child); color:var(--on-accent); border-color:var(--child); }
.btn-child:hover{ background:var(--child-deep); border-color:var(--child-deep); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:.1em;
}
.link-arrow span{ transition:transform .2s var(--ease); }
.link-arrow:hover span{ transform:translateX(4px); }

/* -------------------------------- 07. INTESTAZIONE E NAVIGAZIONE */

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:99; background:var(--surface); padding:.6rem 1rem; border-radius:6px; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

/* --- Fascia superiore: le informazioni che la gente cerca per prime ------- */
.topbar{
  background:var(--adult); color:var(--on-accent);
  font-size:.82rem; letter-spacing:.01em;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; padding-block:.5rem; flex-wrap:wrap;
}
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.topbar .ico{ width:1.05em; height:1.05em; opacity:.9; }
.topbar span{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:inherit; text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .2s var(--ease);
}
.topbar a:hover{ border-color:currentColor; }
.topbar .claim{
  font-weight:700;
  background:rgba(255,255,255,.14);
  padding:.14rem .7rem; border-radius:var(--radius-pill);
}
@media (max-width:760px){
  .topbar-inner{ justify-content:center; padding-block:.42rem; }
  .topbar-left span:not(.claim){ display:none; }
  .topbar-right{ display:none; }
}

/* --- Barra principale ------------------------------------------------------ */
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); padding-block:.7rem; }

.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink); }
.brand svg{ flex:none; width:50px; height:50px; }
.brand .brand-text{
  display:flex; flex-direction:column; line-height:1.1;
  padding-left:.8rem; border-left:1px solid var(--line-strong);
}
.brand b{ font-family:var(--serif); font-size:1.32rem; font-weight:600; letter-spacing:-.005em; }
.brand small{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin-top:.22rem;
}
@media (max-width:420px){
  .brand svg{ width:42px; height:42px; }
  .brand b{ font-size:1.12rem; }
  .brand small{ letter-spacing:.14em; }
}

.nav{ display:flex; align-items:center; gap:.3rem; }
.nav a:not(.btn){
  font-size:.94rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  padding:.48rem .8rem; border-radius:var(--radius-pill);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--adult-deep); background:var(--adult-wash); }
.nav a:not(.btn).is-current{ color:var(--adult-deep); background:var(--adult-wash); font-weight:600; }
.nav .btn{ padding:.6em 1.25em; font-size:.92rem; color:var(--on-accent); margin-left:.6rem; }
.nav .btn .ico{ width:1.1em; height:1.1em; }

/* --- Menù su telefono ------------------------------------------------------ */
.nav-toggle{
  display:none; align-items:center; gap:.55rem;
  background:transparent; border:1.5px solid var(--line-strong);
  color:var(--ink); border-radius:var(--radius-pill);
  padding:.5rem .95rem; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nav-toggle:hover{ border-color:var(--ink); }
.nav-toggle .bars{ display:block; width:18px; height:12px; position:relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars i{
  content:""; position:absolute; left:0; right:0; height:1.8px; border-radius:2px;
  background:currentColor; transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle .bars::before{ top:0; }
.nav-toggle .bars i{ top:5.1px; }
.nav-toggle .bars::after{ bottom:0; }
.nav-toggle[aria-expanded="true"] .bars::before{ transform:translateY(5.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i{ opacity:0; }
.nav-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-5.1px) rotate(-45deg); }

.nav-panel{ display:none; }

@media (max-width:900px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-panel{
    display:block; overflow:hidden; max-height:0;
    border-top:1px solid transparent;
    transition:max-height .38s var(--ease), border-color .38s var(--ease);
    background:var(--surface);
  }
  .nav-panel.is-open{ max-height:32rem; border-top-color:var(--line); }
  .nav-panel ul{ list-style:none; margin:0; padding:.6rem 0 1rem; }
  .nav-panel li + li{ border-top:1px solid var(--line); }
  .nav-panel a{
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem .2rem; text-decoration:none; color:var(--ink); font-weight:500;
  }
  .nav-panel a::after{ content:"→"; color:var(--adult); opacity:.6; }
  .nav-panel .panel-cta{ display:flex; gap:.6rem; padding:.4rem 0 1.2rem; }
  .nav-panel .panel-cta .btn{ flex:1; font-size:.94rem; padding:.7em 1em; }
}

/* ------------------------------------------------------- 08. HERO */

.hero{ padding-block:clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); position:relative; }
/* Alone caldo dietro al primo schermo: la luce che entra dalla finestra */
.hero::before{
  content:""; position:absolute; inset:-20% -10% 0 -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(45% 55% at 78% 18%, rgba(251,214,94,.20) 0%, transparent 70%),
    radial-gradient(40% 50% at 12% 8%,  rgba(79,190,148,.14) 0%, transparent 72%);
}
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:2.5rem; } }

.hero h1{ font-size:var(--step-4); letter-spacing:-.02em; margin:var(--s-4) 0 0; }
.hero h1 em{ font-style:italic; color:var(--adult); }
.hero .lede{ max-width:34ch; margin-top:var(--s-4); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--s-8); }
.hero-note{ margin-top:var(--s-4); font-size:var(--step--1); color:var(--ink-faint); }
.hero-note b{ color:var(--adult); font-weight:700; }

.hero-inner{ animation:rise .6s var(--ease) both; }
@keyframes rise{ from{ opacity:.001; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------ 09. BARRA CREDENZIALI */

.trust{ background:var(--surface); border-block:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust-item{ padding:1.5rem 1.8rem; border-right:1px solid var(--line); }
.trust-item:first-child{ padding-left:0; }
.trust-item:last-child{ border-right:0; }
.trust-item b{ display:block; font-family:var(--serif); font-size:1.06rem; font-weight:600; margin-bottom:.15rem; }
.trust-item span{ display:block; font-size:.92rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:860px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item{ border-right:0; border-bottom:1px solid var(--line); padding:1.1rem 0; }
  .trust-item:last-child{ border-bottom:0; }
}

/* --------------------------------------------- 10. LE DUE AREE */

.doors{ display:grid; grid-template-columns:1fr 1px 1fr; border-top:1px solid var(--line); }
.doors .rule{ background:var(--line); }
@media (max-width:900px){
  .doors{ grid-template-columns:1fr; }
  .doors .rule{ height:1px; width:100%; }
}

.door{
  --tone:var(--adult); --tone-deep:var(--adult-deep); --wash:var(--adult-wash);
  position:relative;
  padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,3vw,3rem);
  transition:background .3s var(--ease);
}
.door:hover{ background:var(--wash); }
.door--bambini{ --tone:var(--child); --tone-deep:var(--child-deep); --wash:var(--child-wash); }
.door .eyebrow{ color:var(--tone); }
.door h3{ font-size:var(--step-2); margin:var(--s-3) 0 var(--s-4); max-width:17ch; }
.door p{ color:var(--ink-soft); max-width:44ch; }
.door ul{ list-style:none; padding:0; margin:var(--s-6) 0 var(--s-8); display:flex; flex-direction:column; gap:.55rem; }
.door li{ position:relative; padding-left:1.5rem; font-size:.99rem; }
.door li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.58rem; height:.58rem; border-radius:50%; border:1.8px solid var(--tone);
}
.door .link-arrow{ color:var(--tone-deep); }
.door-mark{ position:absolute; top:clamp(2rem,4vw,3.2rem); right:clamp(1.5rem,3vw,3rem); width:44px; height:44px; }
@media (max-width:520px){ .door-mark{ display:none; } }

.undecided{
  border-top:1px solid var(--line);
  background:var(--surface-2);
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.5rem,3vw,3rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-6);
}
.undecided b{ display:block; font-family:var(--serif); font-size:var(--step-1); font-weight:600; margin-bottom:.3rem; }
.undecided p{ color:var(--ink-soft); max-width:62ch; font-size:.99rem; }

/* ------------------------------------------------- 11. CHI SONO */

.about-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-text h2{ font-size:var(--step-3); margin:var(--s-3) 0 var(--s-6); }
.about-text p{ color:var(--ink-soft); max-width:58ch; }
.about-text p + p{ margin-top:var(--s-4); }
.about-text .lead-line{ color:var(--ink); font-size:var(--step-1); line-height:1.55; }
.about-text .link-arrow{ margin-top:var(--s-6); color:var(--adult); }

.credentials{
  list-style:none; padding:0; margin:var(--s-6) 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.credentials li{
  font-size:.84rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.35rem .9rem; background:var(--surface);
}

/* ---------------------------------- 12. PERCORSO IN QUATTRO PASSI */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 1.6rem; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); gap:2.2rem 1.6rem; } }
@media (max-width:620px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:2px solid var(--line-strong); padding-top:1.3rem; }
.step-n{
  display:block; font-family:var(--serif); font-size:2.4rem; font-weight:600;
  line-height:1; color:var(--adult); margin-bottom:var(--s-2);
  font-variant-numeric:tabular-nums;
}
.step h3{ font-family:var(--sans); font-size:1.1rem; font-weight:700; margin-bottom:var(--s-2); }
.step p{ font-size:.96rem; color:var(--ink-soft); }

/* --------------------------------------------- 13. DOVE RICEVO */

.places{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:900px){ .places{ grid-template-columns:1fr; } }
.place{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.place:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.place .tag{
  display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); margin-bottom:var(--s-3);
}
.place h3{ font-size:1.22rem; margin-bottom:var(--s-3); }
.place p{ font-size:.97rem; color:var(--ink-soft); }
.place .place-meta{ margin-top:var(--s-4); font-size:.88rem; color:var(--ink-faint); }
.place a{ color:var(--adult); }

/* ----------------------------------------------------- 14. FAQ */

.faq{ max-width:62rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.25rem 2.6rem 1.25rem 0;
  font-family:var(--serif); font-size:var(--step-1); font-weight:600; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:1.75rem;
  width:12px; height:12px;
  border-right:2px solid var(--adult); border-bottom:2px solid var(--adult);
  transform:rotate(45deg); transition:transform .22s var(--ease), top .22s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.9rem; }
.faq .answer{ padding:0 3rem 1.5rem 0; color:var(--ink-soft); max-width:68ch; }
.faq .answer p + p{ margin-top:var(--s-3); }
.faq .answer strong{ color:var(--ink); }

/* ---------------------------------------------------- 15. BLOG */

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:900px){ .posts{ grid-template-columns:1fr; } }
.post{ display:flex; flex-direction:column; gap:.7rem; text-decoration:none; }
.post .arch--wide{ transition:transform .3s var(--ease); }
.post:hover .arch--wide{ transform:translateY(-3px); }
.post-cat{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--tone,var(--adult)); }
.post--child{ --tone:var(--child); }
.post--adult{ --tone:var(--adult); }
.post h3{ font-size:1.16rem; line-height:1.3; }
.post .meta{ font-size:.85rem; color:var(--ink-faint); }
.post:hover h3{ text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------- 16. CONTATTI E MODULO */

.contact{ background:var(--adult); color:var(--on-accent); border-top:1px solid var(--line); }
.contact .eyebrow{ color:currentColor; opacity:.72; }
.contact h2{ font-size:var(--step-3); margin-bottom:var(--s-4); }
.contact .intro{ opacity:.92; max-width:46ch; font-size:var(--step-1); line-height:1.55; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-direct{ margin-top:var(--s-8); display:flex; flex-direction:column; gap:.6rem; font-size:.98rem; list-style:none; padding:0; }
.contact-direct a{ color:inherit; font-weight:600; text-decoration:none; border-bottom:1.5px solid currentColor; }
.contact-note{ margin-top:var(--s-6); font-size:.9rem; opacity:.82; max-width:44ch; }

.form{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-lg);
}
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--s-4); }
.field label{ font-size:.86rem; font-weight:600; letter-spacing:.02em; }
.field .hint{ font-weight:400; color:var(--ink-faint); }
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:.7rem .85rem; transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus{ outline:none; border-color:var(--adult); box-shadow:0 0 0 3px var(--adult-wash); }
textarea{ min-height:118px; resize:vertical; }

fieldset{ border:0; padding:0; margin:0 0 var(--s-4); }
legend{ padding:0; font-size:.86rem; font-weight:600; margin-bottom:var(--s-2); }
.radios{ display:flex; flex-wrap:wrap; gap:.5rem; }
.radio{ position:relative; }
.radio input{ position:absolute; opacity:0; width:0; height:0; }
.radio span{
  display:block; padding:.5rem .95rem; font-size:.9rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  transition:border-color .15s, background .15s, color .15s;
}
.radio input:checked + span{ border-color:var(--adult); background:var(--adult-wash); color:var(--adult-deep); font-weight:600; }
.radio input:focus-visible + span{ outline:2.5px solid var(--adult); outline-offset:2px; }

.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); margin-bottom:var(--s-6); }
.consent input{ flex:none; width:auto; margin-top:.25rem; accent-color:var(--adult); }
.consent a{ color:var(--adult); }

.form-note{ margin-top:var(--s-3); font-size:.8rem; color:var(--ink-faint); text-align:center; }
.form-msg{
  margin-top:var(--s-4); padding:1rem; font-size:.92rem; border-radius:var(--radius);
  background:var(--adult-wash); border:1px solid var(--adult); color:var(--adult-deep);
}
.form-msg[data-state="error"]{ background:#FBE9E3; border-color:#A33B2A; color:#7E2B1E; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------- 17. PIÈ DI PAGINA */

.site-footer{ background:var(--surface); border-top:1px solid var(--line); padding:3.5rem 0 7rem; font-size:.92rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr; gap:2rem; } }
.foot-grid h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin:0 0 var(--s-3); }
.foot-grid p,.foot-grid li{ color:var(--ink-soft); line-height:1.75; }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid a{ text-decoration:none; }
.foot-grid a:hover{ text-decoration:underline; }
.foot-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:var(--s-3); }
.foot-brand svg{ width:38px; height:38px; flex:none; }
.foot-name{ font-family:var(--serif); font-size:1.28rem; color:var(--ink); font-weight:600; }
.legal{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between;
  color:var(--ink-faint); font-size:.84rem;
}
.legal nav{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* --------------------------------------------- 18. BARRA MOBILE */

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:.6rem;
  background:var(--surface); border-top:1px solid var(--line);
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
}
.mobile-bar .btn{ flex:1; font-size:.95rem; padding:.7em 1em; }
@media (max-width:900px){ .mobile-bar{ display:flex; } }

/* ------------------------------- 19. UTILITÀ E ACCESSIBILITÀ */

:focus-visible{ outline:2.5px solid var(--adult); outline-offset:3px; border-radius:2px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tabular{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ------------------------------------- 21. ICONE E MOTIVI RIPETUTI */

/* Set di icone a tratto continuo, 1.6, terminali arrotondati.
   Sono definite una sola volta come <symbol> e richiamate con <use>. */
.ico{
  width:1.35em; height:1.35em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.25em;
}
.ico--lg{ width:2rem; height:2rem; stroke-width:1.4; }
.ico--adult{ color:var(--adult); }
.ico--child{ color:var(--child); }

.trust-item{ display:flex; gap:.9rem; align-items:flex-start; }
.trust-item .ico{ margin-top:.28rem; color:var(--adult); }
.trust-item .trust-text{ min-width:0; }

.place-icon{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center; margin-bottom:var(--s-4);
  background:var(--adult-wash); color:var(--adult);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.place:hover .place-icon{ transform:scale(1.07) rotate(-4deg); }
.place--child .place-icon{ background:var(--child-wash); color:var(--child); }

.step-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:var(--s-2); }
.step-head .ico{ color:var(--adult); }
.step-n{ margin-bottom:0; }

.contact-direct li{ display:flex; align-items:center; gap:.6rem; }
.contact-direct .ico{ opacity:.85; }

/* --------------------------------- 22. ANIMAZIONI E TRANSIZIONI */

/* --- Comparsa progressiva allo scorrimento ---------------------------------
   Nulla viene nascosto finché il JavaScript non è attivo: la classe
   .js-anim viene aggiunta da main.js. Se lo script non parte, o se il
   dispositivo chiede meno animazioni, il sito resta interamente visibile. */
.js-anim [data-reveal]{
  opacity:.001;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.js-anim [data-reveal].is-visible{ opacity:1; transform:none; }

/* Ritardi a cascata: gli elementi di una fila entrano uno dopo l'altro */
.js-anim [data-reveal][data-delay="1"]{ transition-delay:.08s; }
.js-anim [data-reveal][data-delay="2"]{ transition-delay:.16s; }
.js-anim [data-reveal][data-delay="3"]{ transition-delay:.24s; }
.js-anim [data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* --- Entrata del primo schermo, al caricamento ----------------------------- */
.hero-inner > *{ animation:rise .7s var(--ease) both; }
.hero-inner > *:nth-child(1){ animation-delay:.02s; }
.hero-inner > *:nth-child(2){ animation-delay:.10s; }
.hero-inner > *:nth-child(3){ animation-delay:.18s; }
.hero-inner > *:nth-child(4){ animation-delay:.26s; }
.hero-inner > *:nth-child(5){ animation-delay:.34s; }
.hero .arch{ animation:archIn .9s var(--ease) both .12s; }

@keyframes rise{
  from{ opacity:.001; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
@keyframes archIn{
  from{ opacity:.001; transform:translateY(18px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* --- Sottolineatura che cresce sotto i link di testo ----------------------- */
.link-arrow{
  border-bottom:0;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1.5px;
  transition:background-size .32s var(--ease);
}
.link-arrow:hover{ background-size:0 1.5px; background-position:100% 100%; }
.nav a:not(.btn){
  position:relative; padding-bottom:.15rem;
  background-image:linear-gradient(var(--adult), var(--adult));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1.5px;
  transition:color .18s var(--ease), background-size .28s var(--ease);
}
.nav a:not(.btn):hover,
.nav a:not(.btn).is-current{ background-size:100% 1.5px; }
.nav a.is-current{ color:var(--ink); }

/* --- Intestazione che si compatta scorrendo -------------------------------- */
.site-header{ transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.is-scrolled{ box-shadow:0 6px 20px -16px rgba(58,44,26,.5); }
.site-header.is-scrolled .brand svg{ transform:scale(.88); }
.brand svg{ transition:transform .3s var(--ease); }

/* Barra di avanzamento della lettura, sottilissima */
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg, var(--mark-green), var(--mark-yellow), var(--mark-orange), var(--mark-pink));
  transition:width .12s linear;
}

/* --- Le due aree: il bordo che si accende ---------------------------------- */
.door::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--tone); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.door:hover::before{ transform:scaleY(1); }
@media (max-width:900px){ .door::before{ width:100%; height:3px; bottom:auto; transform:scaleX(0); transform-origin:left; } .door:hover::before{ transform:scaleX(1); } }

/* --- FAQ: la risposta scende invece di apparire di scatto ------------------ */
.faq details[open] .answer{ animation:openAnswer .35s var(--ease) both; }
@keyframes openAnswer{
  from{ opacity:.001; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}

/* --- Quattro punti: respirano appena all'apertura della sezione ------------ */
.js-anim [data-reveal].is-visible .dots i{ animation:pop .5s var(--ease) both; }
.js-anim [data-reveal].is-visible .dots i:nth-child(1){ animation-delay:.05s; }
.js-anim [data-reveal].is-visible .dots i:nth-child(2){ animation-delay:.13s; }
.js-anim [data-reveal].is-visible .dots i:nth-child(3){ animation-delay:.21s; }
.js-anim [data-reveal].is-visible .dots i:nth-child(4){ animation-delay:.29s; }
@keyframes pop{
  0%  { transform:scale(0); }
  70% { transform:scale(1.25); }
  100%{ transform:scale(1); }
}

/* --- Bottoni: piccola onda al passaggio del mouse -------------------------- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% 120%, rgba(255,255,255,.22), transparent 70%);
  opacity:0; transition:opacity .3s var(--ease);
}
.btn-primary:hover::after{ opacity:1; }

/* --- Modulo: il messaggio di risposta entra dolcemente --------------------- */
.form-msg{ animation:rise .4s var(--ease) both; }

/* --- Rispetto assoluto di "riduci animazioni" ------------------------------ */
@media (prefers-reduced-motion: reduce){
  .js-anim [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero-inner > *, .hero .arch, .form-msg, .faq details[open] .answer,
  .js-anim [data-reveal].is-visible .dots i{ animation:none !important; }
  .progress{ display:none; }
}

/* ------------------------- 23. PAGINE INTERNE, SERVIZI, BLOG */

/* --- Testata delle pagine interne ----------------------------------------- */
.page-hero{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem); position:relative; }
.page-hero::before{
  content:""; position:absolute; inset:-30% -10% 0 -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 60% at 80% 10%, rgba(251,214,94,.16) 0%, transparent 70%);
}
.page-hero h1{ font-size:var(--step-4); margin:var(--s-3) 0 var(--s-4); letter-spacing:-.02em; max-width:18ch; }
.page-hero .lede{ max-width:56ch; }

.breadcrumb{ font-size:.84rem; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--adult); }
.breadcrumb span[aria-hidden]{ opacity:.5; }

/* --- Blocco servizio: alternanza testo / illustrazione -------------------- */
.service{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.service + .service{ margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line); }
.service:nth-child(even) .service-media{ order:-1; }
@media (max-width:860px){ .service{ grid-template-columns:1fr; } .service:nth-child(even) .service-media{ order:0; } }
.service h2{ font-size:var(--step-2); margin:var(--s-3) 0 var(--s-4); }
.service p{ color:var(--ink-soft); }
.service p + p{ margin-top:var(--s-3); }
.service-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--child-wash); color:var(--child-deep);
  font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:var(--radius-pill);
}
.service-badge--adult{ background:var(--adult-wash); color:var(--adult-deep); }

/* --- Elenchi con icona ----------------------------------------------------- */
.icon-list{ list-style:none; padding:0; margin:var(--s-6) 0 0; display:flex; flex-direction:column; gap:.85rem; }
.icon-list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink-soft); }
.icon-list .ico{ color:var(--adult); margin-top:.22rem; }
.icon-list b{ color:var(--ink); }

/* Griglia di segnali: "quando rivolgersi" */
.signals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.signal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; display:flex; gap:.9rem; align-items:flex-start;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.signal:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.signal .ico{ color:var(--child); margin-top:.15rem; }
.signal p{ font-size:.96rem; color:var(--ink-soft); }
.signal b{ display:block; color:var(--ink); font-family:var(--serif); font-size:1.05rem; margin-bottom:.2rem; }

/* --- Riquadri di richiamo -------------------------------------------------- */
.callout{
  border-left:3px solid var(--adult); background:var(--adult-wash);
  padding:1.2rem 1.4rem; border-radius:0 var(--radius) var(--radius) 0;
  margin:var(--s-8) 0;
}
.callout--child{ border-left-color:var(--child); background:var(--child-wash); }
.callout b{ display:block; font-family:var(--serif); font-size:1.12rem; margin-bottom:.35rem; }
.callout p{ color:var(--ink-soft); font-size:.97rem; }

/* --- Corpo degli articoli --------------------------------------------------- */
.article{ max-width:44rem; margin-inline:auto; padding-block:0 clamp(3rem,6vw,5rem); }
.article-meta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; font-size:.86rem; color:var(--ink-faint); margin-bottom:var(--s-6); }
.article-meta .cat{
  background:var(--child-wash); color:var(--child-deep);
  font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.25rem .7rem; border-radius:var(--radius-pill);
}
.article h2{ font-size:var(--step-2); margin:var(--s-12) 0 var(--s-4); }
.article h3{ font-size:1.22rem; margin:var(--s-8) 0 var(--s-3); }
.article p{ color:var(--ink-soft); }
.article p + p{ margin-top:var(--s-4); }
.article ul, .article ol{ margin:var(--s-4) 0 0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.5rem; color:var(--ink-soft); }
.article li strong{ color:var(--ink); }
.article .intro-p{ font-size:var(--step-1); line-height:1.6; color:var(--ink); }
.article blockquote{
  margin:var(--s-8) 0; padding:0 0 0 1.4rem; border-left:3px solid var(--child);
  font-family:var(--serif); font-size:var(--step-1); font-style:italic; color:var(--ink);
}
.article-foot{
  margin-top:var(--s-12); padding-top:var(--s-6); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
}

/* --- Elenco del blog -------------------------------------------------------- */
.post-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; }
.post-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.post-card .thumb{
  aspect-ratio:16/9; display:grid; place-items:center; border-bottom:1px solid var(--line);
  background:radial-gradient(90% 120% at 25% 10%, var(--child-wash) 0%, transparent 70%), var(--surface-2);
}
.post-card .thumb .ico{ width:2.4rem; height:2.4rem; color:var(--child); opacity:.8; }
.post-card .body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.post-card h3{ font-size:1.16rem; line-height:1.3; }
.post-card p{ font-size:.94rem; color:var(--ink-soft); flex:1; }
.post-card .meta{ font-size:.82rem; color:var(--ink-faint); }

/* --- Torna in alto ---------------------------------------------------------- */
.to-top{
  position:fixed; right:1.2rem; bottom:5.6rem; z-index:55;
  width:2.8rem; height:2.8rem; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--adult);
  border:1px solid var(--line-strong); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--adult); color:var(--on-accent); border-color:var(--adult); }
@media (min-width:901px){ .to-top{ bottom:1.6rem; } }

/* --- Animazioni aggiuntive --------------------------------------------------- */
/* Le icone si disegnano quando la sezione compare */
.js-anim [data-reveal].is-visible .ico--draw path,
.js-anim [data-reveal].is-visible .ico--draw circle{
  animation:traccia 1s var(--ease) both;
}
@keyframes traccia{
  from{ stroke-dasharray:90; stroke-dashoffset:90; opacity:.3; }
  to  { stroke-dasharray:90; stroke-dashoffset:0; opacity:1; }
}
/* Gli elementi di un elenco entrano uno dopo l'altro */
.js-anim [data-reveal].is-visible .stagger > *{ animation:rise .5s var(--ease) both; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(1){ animation-delay:.05s; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(2){ animation-delay:.11s; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(3){ animation-delay:.17s; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(4){ animation-delay:.23s; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(5){ animation-delay:.29s; }
.js-anim [data-reveal].is-visible .stagger > *:nth-child(6){ animation-delay:.35s; }
@media (prefers-reduced-motion: reduce){
  .js-anim [data-reveal].is-visible .ico--draw path,
  .js-anim [data-reveal].is-visible .ico--draw circle,
  .js-anim [data-reveal].is-visible .stagger > *{ animation:none !important; }
  .to-top{ transition:none; }
}

/* ------------------------------------------------- 20. STAMPA */

@media print{
  body::before,.site-header,.mobile-bar,.form,.hero-cta{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .band{ padding-block:1rem; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}