@import url('../fonts/fonts.css');

/* ============================================================
   PALETTE — per cambiare look, sostituisci i valori qui sotto.
   Le tre proposte sono in fondo al file, già pronte da copiare.
   Attuale: KHIR — blu notte, oro, crema (i colori dei tuoi quaderni).
   ============================================================ */
:root{
  --sfondo:        #F6EFE1;
  --sfondo-alt:    #FDFAF3;
  --sfondo-caldo:  #EEE2CA;
  --scuro:         #131E32;
  --scuro-chiaro:  #233252;
  --accento:       #C6A46B;
  --accento-scuro: #7A5C1F;
  --testo:         #131E32;
  --testo-tenue:   #5B6479;
  --bordo:         #E3D8C2;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --sezione: clamp(4rem, 10vw, 7.5rem);
  --raggio: 14px;
  --ombra: 0 10px 40px rgba(19, 30, 50, .10);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--sfondo);
  color:var(--testo);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--scuro);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 7vw, 4rem); }
h2{ font-size:clamp(1.75rem, 4.6vw, 2.75rem); }
h3{ font-size:clamp(1.2rem, 2.6vw, 1.5rem); }

p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

a{ color:var(--scuro); text-decoration-color:var(--accento); text-underline-offset:3px; }
a:hover{ color:var(--scuro-chiaro); }

:focus-visible{
  outline:3px solid var(--accento-scuro);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--scuro); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.sezione{ padding-block:var(--sezione); }
.sezione--alt{ background:var(--sfondo-alt); }
.sezione--scura{ background:var(--scuro); color:#fff; }
.sezione--scura h2,.sezione--scura h3{ color:#fff; }
.stretta{ max-width:62ch; }
.centro{ text-align:center; margin-inline:auto; }

.occhiello{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accento-scuro);
  margin:0 0 1rem;
}
.sezione--scura .occhiello{ color:var(--accento); }

/* ---------- Pulsanti ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.2;
  padding:.95rem 1.6rem;
  border:1.5px solid var(--scuro);
  border-radius:999px;
  background:var(--scuro); color:#fff;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{ background:var(--scuro-chiaro); border-color:var(--scuro-chiaro); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--scuro); }
.btn--ghost:hover{ background:var(--scuro); color:#fff; }
.btn--chiaro{ background:#fff; border-color:#fff; color:var(--scuro); }
.btn--chiaro:hover{ background:var(--accento); border-color:var(--accento); color:var(--scuro); }
.btn--largo{ width:100%; }

.azioni{ display:flex; flex-wrap:wrap; gap:.75rem; }

.link-sotto{
  display:inline-block; margin-top:1.25rem;
  font-size:.95rem; color:var(--testo-tenue);
  text-decoration:none; border-bottom:1px solid var(--accento); padding-bottom:2px;
}
.link-sotto:hover{ color:var(--scuro); }

/* ---------- Fascia evento dal vivo ---------- */
.fascia-evento{
  display:block;
  background:var(--scuro);
  color:#fff;
  text-decoration:none;
  font-family:var(--sans);
  font-size:.9rem;
  line-height:1.45;
  transition:background .2s ease;
}
.fascia-evento:hover,
.fascia-evento:focus-visible{ background:var(--scuro-chiaro); }
.fascia-evento__in{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.4rem .9rem;
  padding-block:.7rem;
  text-align:center;
}
.fascia-evento__etichetta{
  font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accento);
  border:1px solid rgba(198,164,107,.45);
  border-radius:999px;
  padding:.2rem .65rem;
  white-space:nowrap;
}
.fascia-evento__titolo{ font-weight:600; }
.fascia-evento__quando{ color:var(--accento); }
.fascia-evento__cta{
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
@media (max-width:40rem){
  .fascia-evento{ font-size:.8rem; }
  .fascia-evento__in{ padding-block:.5rem; gap:.25rem .55rem; }
  .fascia-evento__etichetta{ font-size:.6rem; padding:.15rem .5rem; letter-spacing:.14em; }
  .fascia-evento__cta,
  .fascia-evento__esteso{ display:none; }
}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,239,225,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.header.is-scrolled{ border-bottom-color:var(--bordo); box-shadow:0 2px 20px rgba(19,30,50,.07); }

.header__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:68px;
}
.logo{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  color:var(--scuro); text-decoration:none; letter-spacing:.01em; white-space:nowrap;
}
.logo span{ display:block; font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accento-scuro); }

.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0; }
.nav__list a{
  font-size:.95rem; font-weight:500; color:var(--testo); text-decoration:none;
  padding:.25rem 0; border-bottom:1.5px solid transparent;
}
.nav__list a:hover{ color:var(--scuro); border-bottom-color:var(--accento); }

/* ---------- Selettore lingua (finestrella con le bandiere) ---------- */
/* Le bandiere sono disegnate in CSS: nessuna immagine da scaricare. */
.bandiera{
  display:block; width:20px; height:14px; flex:none;
  border-radius:2px; border:1px solid rgba(19,30,50,.15);
  background-size:100% 100%;
}
.bandiera--it{ background-image:linear-gradient(90deg,#008C45 0 33.33%,#F4F5F0 33.33% 66.66%,#CD212A 66.66% 100%); }
.bandiera--es{ background-image:linear-gradient(180deg,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%); }

.lingue{ position:relative; margin:0; line-height:1; }
.lingue > summary{
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .55rem; border-radius:999px;
  border:1.5px solid var(--bordo); background:var(--sfondo-alt);
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--testo); cursor:pointer; list-style:none; user-select:none;
  transition:border-color .18s ease;
}
.lingue > summary::-webkit-details-marker{ display:none; }
.lingue > summary::marker{ content:''; }
.lingue > summary:hover{ border-color:var(--accento); }
.lingue__freccia{ width:9px; height:9px; flex:none; transition:transform .2s ease; color:var(--testo-tenue); }
.lingue[open] > summary{ border-color:var(--accento); }
.lingue[open] .lingue__freccia{ transform:rotate(180deg); }

.lingue__menu{
  position:absolute; top:calc(100% + .45rem); right:0; z-index:120;
  min-width:11rem; margin:0; padding:.35rem; list-style:none;
  background:var(--sfondo-alt);
  border:1px solid var(--bordo); border-radius:10px;
  box-shadow:0 12px 30px rgba(19,30,50,.14);
}
.lingue__menu a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .65rem; border-radius:7px;
  font-size:.9rem; font-weight:500; letter-spacing:0;
  color:var(--testo); text-decoration:none; white-space:nowrap;
}
.lingue__menu a:hover{ background:var(--sfondo); color:var(--scuro); }
.lingue__menu a[aria-current]{ font-weight:600; color:var(--scuro); }
.lingue__menu a[aria-current]::after{
  content:'✓'; margin-left:auto; padding-left:.75rem; color:var(--accento-scuro); font-size:.85rem;
}
@media (prefers-reduced-motion: reduce){ .lingue__freccia{ transition:none; } }

/* Versione testuale, nel footer */
.lingue-testo{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; letter-spacing:.06em; }
.lingue-testo a{ color:var(--testo-tenue); text-decoration:none; }
.lingue-testo a[aria-current]{ color:var(--scuro); }
.lingue-testo span{ color:var(--bordo); }

.header__azioni{ display:flex; align-items:center; gap:1rem; }
.header .btn{ display:none; padding:.65rem 1.2rem; font-size:.92rem; }

.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:none; border:none; cursor:pointer;
}
.hamburger span{
  display:block; height:2px; background:var(--scuro); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-mobile{
  display:none;
  border-top:1px solid var(--bordo);
  background:var(--sfondo);
  padding:1rem var(--gutter) 1.75rem;
}
.menu-mobile.is-open{ display:block; }
.menu-mobile ul{ list-style:none; margin:0 0 1.25rem; padding:0; }
.menu-mobile li + li{ border-top:1px solid var(--bordo); }
.menu-mobile a{ display:block; padding:.85rem 0; font-size:1.05rem; font-weight:500; text-decoration:none; }

@media (min-width:62rem){
  .nav{ display:block; }
  .header .btn{ display:inline-flex; }
  .hamburger{ display:none; }
  .menu-mobile{ display:none !important; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,6rem); }
.hero__in{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }

.hero__titolo{ font-size:clamp(2rem, 4.2vw, 3.05rem); margin-bottom:1rem; }
.hero__sottotitolo{ font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--testo-tenue); max-width:46ch; }
.hero .azioni{ margin-top:1.75rem; }

.hero__foto{ position:relative; justify-self:center; width:min(100%,380px); }
.hero__foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:190px 190px 14px 14px;
}
.badge{
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
  background:var(--sfondo-alt); color:var(--scuro);
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:999px; box-shadow:var(--ombra); white-space:nowrap;
}

@media (min-width:52rem){
  .hero__in{ grid-template-columns:1.15fr .85fr; }
  .hero__foto{ order:2; width:100%; }
}

/* ---------- Numeri ---------- */
.numeri{ background:var(--scuro); color:#fff; }
.numeri__griglia{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,4vw,2.5rem);
  padding-block:clamp(2.5rem,6vw,3.5rem);
  text-align:center;
}
.numeri dt{
  font-family:var(--serif); font-size:clamp(2rem,6vw,2.75rem); font-weight:600;
  line-height:1; color:#fff;
}
.numeri dd{
  margin:.6rem 0 0; font-size:.9rem; line-height:1.45;
  color:rgba(255,255,255,.82);
}
@media (min-width:46rem){ .numeri__griglia{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Elenco "ti riconosci" ---------- */
.specchio{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1px; background:var(--bordo); border-radius:var(--raggio); overflow:hidden; }
.specchio li{
  background:var(--sfondo-alt);
  padding:1.1rem clamp(1.1rem,3vw,1.75rem) 1.1rem 3.1rem;
  position:relative; font-size:1.02rem;
}
.specchio li::before{
  content:""; position:absolute; left:clamp(1.1rem,3vw,1.75rem); top:1.6rem;
  width:9px; height:9px; border-radius:50%; background:var(--accento);
}
.chiusa{ margin-top:2rem; font-family:var(--serif); font-size:1.2rem; color:var(--scuro); }

/* ---------- Metodo ---------- */
.movimenti{ display:grid; gap:1.25rem; margin-top:2.5rem; counter-reset:m; }
.movimento{
  background:var(--sfondo-alt); border:1px solid var(--bordo); border-radius:var(--raggio);
  padding:clamp(1.5rem,4vw,2rem); counter-increment:m;
}
.movimento h3{ display:flex; align-items:baseline; gap:.65rem; }
.movimento h3::before{
  content:counter(m); font-family:var(--sans); font-size:.78rem; font-weight:600;
  color:var(--accento-scuro); border:1.5px solid var(--accento);
  width:1.9rem; height:1.9rem; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
}
@media (min-width:46rem){ .movimenti{ grid-template-columns:1fr 1fr; } }

.nota{
  margin-top:2rem; padding:1.1rem 1.4rem;
  border-left:3px solid var(--accento);
  background:var(--sfondo-caldo);
  border-radius:0 var(--raggio) var(--raggio) 0;
  font-size:.98rem;
}

/* ---------- Fascia quiz ---------- */
.fascia-quiz{ background:var(--sfondo-caldo); }
.fascia-quiz .wrap{ display:grid; gap:1.5rem; align-items:center; padding-block:clamp(2.5rem,6vw,4rem); }
@media (min-width:52rem){ .fascia-quiz .wrap{ grid-template-columns:1fr auto; gap:3rem; } }

/* ---------- Servizi ---------- */
.servizi{ display:grid; gap:1.5rem; margin-top:3rem; }
.servizio{
  background:var(--sfondo-alt); border:1px solid var(--bordo); border-radius:var(--raggio);
  padding:clamp(1.5rem,4vw,2.25rem);
  display:flex; flex-direction:column;
}
.servizio__logo{ width:62px; height:62px; display:block; margin:0 0 1rem; }
.servizio__nome{
  font-family:var(--serif); font-size:clamp(1.45rem,3.2vw,1.8rem); font-weight:600;
  color:var(--scuro); margin:0 0 .25rem;
}
.servizio__tipo{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accento-scuro); margin:0 0 1.25rem;
}
/* seconda riga del formato, in tondo: non va urlata come l'etichetta */
.servizio__tipo span{
  display:block; margin-top:.35rem;
  text-transform:none; letter-spacing:.01em; font-weight:500;
  font-size:.82rem; color:var(--testo-tenue);
}
.servizio__claim{ font-family:var(--serif); font-size:1.15rem; color:var(--scuro); margin-bottom:1rem; }
.servizio h4{
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--testo-tenue); margin:1.5rem 0 .6rem;
}
.servizio ul{ margin:0; padding-left:1.15rem; }
.servizio li{ margin-bottom:.5rem; }
.servizio li:last-child{ margin-bottom:0; }
.servizio .btn{ margin-top:auto; align-self:flex-start; }
.servizio .btn:not(:only-of-type),
.servizio__coda{ margin-top:1.75rem; }
@media (min-width:62rem){ .servizi{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Chi sono ---------- */
.chisono__in{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.chisono__foto img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--raggio); }
.firma{
  margin-top:2rem; font-family:var(--serif); font-size:1.05rem; color:var(--scuro);
}
.qualifiche{ list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.qualifiche li{
  font-size:.82rem; font-weight:500;
  border:1px solid var(--bordo); background:var(--sfondo-alt);
  padding:.45rem .9rem; border-radius:999px;
}
@media (min-width:52rem){ .chisono__in{ grid-template-columns:.8fr 1.2fr; } }

/* ---------- Testimonianze ---------- */
.video-griglia{ display:grid; gap:1.25rem; margin-top:2.5rem; }
.video-card{
  background:var(--sfondo-alt); border:1px solid var(--bordo); border-radius:var(--raggio);
  overflow:hidden;
}
/* I video sono misti (verticali e orizzontali): schede della stessa forma,
   contain sul fondo scuro così non si taglia la faccia a nessuno. */
.video-card video{ width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; background:#1F2140; }
.video-card figcaption{
  padding:.85rem 1.1rem; font-size:.92rem; font-weight:500; color:var(--scuro);
}
@media (min-width:40rem){ .video-griglia{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:62rem){ .video-griglia{ grid-template-columns:repeat(4,1fr); } }

.shots{ margin-top:3rem; columns:2 150px; column-gap:1rem; }
.shots figure{ margin:0 0 1rem; break-inside:avoid; }
.shots img{
  width:100%; height:auto; border-radius:10px;
  border:1px solid var(--bordo); background:var(--sfondo-alt);
}
@media (min-width:46rem){ .shots{ columns:3 220px; } }
@media (min-width:72rem){ .shots{ columns:4 230px; } }

/* ---------- FAQ ---------- */
.faq{ max-width:48rem; margin:2.5rem auto 0; }
.faq details{
  border-bottom:1px solid var(--bordo);
  background:transparent;
}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--scuro);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:0 0 auto;
  font-family:var(--sans); font-size:1.5rem; font-weight:400; line-height:1;
  color:var(--accento-scuro); transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq summary:hover{ color:var(--scuro-chiaro); }
.faq__risposta{ padding:0 0 1.5rem; color:var(--testo-tenue); max-width:62ch; }

/* ---------- Contatti ---------- */
.contatti{ background:var(--scuro); color:#fff; }
.contatti h2{ color:#fff; }
.contatti p{ color:rgba(255,255,255,.85); }
.canali{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1px; background:rgba(255,255,255,.18); border-radius:var(--raggio); overflow:hidden; }
.canali a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem clamp(1.1rem,3vw,1.6rem);
  background:var(--scuro); color:#fff; text-decoration:none; font-weight:500;
  transition:background-color .18s ease;
}
.canali a:hover{ background:var(--scuro-chiaro); }
.canali small{ display:block; font-weight:400; font-size:.8rem; color:rgba(255,255,255,.65); }
.canali a::after{ content:"\2192"; color:var(--accento); flex:0 0 auto; }
@media (min-width:46rem){ .canali{ grid-template-columns:1fr 1fr; } }

/* ---------- Footer ---------- */
.footer{ background:var(--sfondo-alt); border-top:1px solid var(--bordo); padding-block:3rem 2rem; font-size:.9rem; }
.footer__in{ display:grid; gap:1.5rem; }
.footer__social{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer__social a{ color:var(--testo-tenue); text-decoration:none; font-weight:500; }
.footer__social a:hover{ color:var(--scuro); }
.footer__legale{ color:var(--testo-tenue); display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; }
.footer__legale a{ color:var(--testo-tenue); }
@media (min-width:52rem){
  .footer__in{ grid-template-columns:1fr auto; align-items:center; }
}

/* ---------- Barra CTA mobile ---------- */
.barra-mobile{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:rgba(246,239,225,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--bordo);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .3s ease;
}
.barra-mobile.is-in{ transform:translateY(0); }
@media (min-width:62rem){ .barra-mobile{ display:none; } }

/* ---------- Comparsa in scroll ---------- */
.fade{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.fade.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .fade{ opacity:1; transform:none; transition:none; }
  .barra-mobile{ transition:none; }
}

/* ---------- Pagine di testo (privacy, termini, 404) ---------- */
.testo{ max-width:68ch; margin-inline:auto; }
.testo h2{ margin-top:2.5rem; font-size:1.4rem; }
.testo ul{ padding-left:1.2rem; }

/* ============================================================
   ALTRE PALETTE — per provarle, incolla il blocco al posto
   dei valori di :root in cima.
   ------------------------------------------------------------
   B — Indaco e salvia (era attiva prima dei colori KHIR)
     --sfondo:#FBF8F4; --sfondo-alt:#FFFFFF; --sfondo-caldo:#F6E1E1;
     --scuro:#2E3272; --scuro-chiaro:#4A4FA3; --accento:#9CAF88;
     --accento-scuro:#5F7355; --testo:#26263B; --testo-tenue:#5B5E7A;
     --bordo:#E7E0D6;

   A — Terra e oro
     --sfondo:#FBF8F4; --sfondo-alt:#FFFFFF; --sfondo-caldo:#F2E7DC;
     --scuro:#4A3328; --scuro-chiaro:#6B4A38; --accento:#C89A5B;
     --accento-scuro:#9A7B3F; --testo:#3A2E26; --testo-tenue:#6E5F55;
     --bordo:#E7DCCE;

   C — Prugna e verde profondo
     --sfondo:#FDFBF7; --sfondo-alt:#FFFFFF; --sfondo-caldo:#F1EBF0;
     --scuro:#4A3357; --scuro-chiaro:#644773; --accento:#C9A227;
     --accento-scuro:#2F5D50; --testo:#2E2433; --testo-tenue:#5E5366;
     --bordo:#E6DDE6;
   ============================================================ */

/* ============================================================
   QUIZ
   ============================================================ */
.quiz-body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.quiz-body main{ flex:1; display:flex; align-items:center; }

.quiz{ width:100%; max-width:46rem; margin-inline:auto; padding:clamp(2rem,6vw,4rem) var(--gutter); }

.barra{ height:4px; background:var(--bordo); border-radius:999px; overflow:hidden; }
.barra__pieno{ height:100%; width:0; background:var(--accento-scuro); border-radius:999px; transition:width .35s ease; }
.passo{ margin:.75rem 0 2.5rem; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--testo-tenue); }

.domanda{ font-family:var(--serif); font-size:clamp(1.5rem,4.2vw,2.1rem); font-weight:600; color:var(--scuro); line-height:1.2; margin:0 0 1.75rem; text-wrap:balance; }

.risposte{ display:grid; gap:.75rem; }
.risposta{
  display:block; width:100%; text-align:left;
  font-family:var(--sans); font-size:1.02rem; line-height:1.5; color:var(--testo);
  background:var(--sfondo-alt); border:1.5px solid var(--bordo); border-radius:var(--raggio);
  padding:1.05rem 1.25rem; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.risposta:hover{ border-color:var(--accento); transform:translateY(-1px); }
.risposta:active{ transform:none; }

.quiz-nav{ margin-top:2rem; }
.indietro{
  background:none; border:none; padding:.5rem 0; cursor:pointer;
  font-family:var(--sans); font-size:.92rem; color:var(--testo-tenue);
}
.indietro:hover{ color:var(--scuro); }
.indietro[hidden]{ display:none; }

.esito__profilo{ font-family:var(--serif); font-size:clamp(1.8rem,5vw,2.6rem); color:var(--scuro); margin:.5rem 0 1.25rem; }
.esito__box{
  margin:2rem 0; padding:1.5rem clamp(1.25rem,4vw,2rem);
  background:var(--sfondo-caldo); border-radius:var(--raggio);
}
.esito__box h3{ font-size:1.1rem; margin-bottom:.5rem; }
.esito .azioni{ margin-top:2rem; }
.riparti{ margin-top:1.5rem; }

.quiz-head{ padding:1.25rem 0; border-bottom:1px solid var(--bordo); background:var(--sfondo); }
.quiz-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.quiz-head .lingue{ margin:0; }

/* ===== PAGINE DI TESTO (privacy, termini, 404) ===== */
.pagina{ max-width:46rem; margin:0 auto; padding:var(--sezione) var(--gutter); }
.pagina h1{ font-size:clamp(1.9rem,5vw,2.6rem); margin-bottom:1.5rem; }
.pagina h2{ font-size:1.25rem; margin:2.5rem 0 .75rem; }
.pagina p, .pagina li{ color:var(--testo-tenue); }
.pagina ul{ padding-left:1.25rem; }
.pagina li{ margin-bottom:.5rem; }
.pagina .aggiornato{ font-size:.9rem; margin-bottom:2.5rem; }
.pagina--centro{ text-align:center; }