/* =========================================================================
   Asia Martini — Ostetrica
   Direzione visiva: "l'alba e il filo"
   Palette ricavata dalle fotografie: indaco notturno + luce albicocca.
   ========================================================================= */

:root{
  /* colore */
  --notte:        #1B1D38;
  --notte-2:      #24274A;
  --indaco:       #3A3F6B;
  --indaco-tenue: #6C71A0;
  --nebbia:       #E9E6F0;
  --luce:         #FCFAF7;
  --carta:        #F4EEE7;
  --alba:         #E08B5C;
  --alba-chiara:  #F6D2B4;
  --rosa:         #D9A296;
  --salvia:       #6E8C7D;
  --testo:        #24263F;
  --testo-tenue:  #575A79;
  --bordo:        #DCD5CC;

  /* tipografia */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --corpo:   'Karla', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* misure */
  --largo:   1180px;
  --stretto: 720px;
  --gutter:  clamp(1.25rem, 5vw, 3.5rem);
  --arco:    clamp(1.5rem, 3vw, 2rem);

  /* ritmo verticale */
  --sezione-y: clamp(4.5rem, 11vw, 8.5rem);

  --ombra-morbida: 0 1px 2px rgba(27,29,56,.05), 0 12px 32px -12px rgba(27,29,56,.18);
  --ombra-alta:    0 2px 4px rgba(27,29,56,.06), 0 28px 60px -24px rgba(27,29,56,.30);

  --transizione: 420ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset essenziale ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--luce);
  color:var(--testo);
  font-family:var(--corpo);
  font-size:clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul,ol,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }

::selection{ background:var(--alba-chiara); color:var(--notte); }

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

/* ---------- tipografia ---------- */
.display,h1,h2,h3,.citazione-testo{
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:'SOFT' 55, 'WONK' 1, 'opsz' 96;
  line-height:1.08;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.55rem, 1.4rem + 5.1vw, 5rem); }
h2{ font-size:clamp(2rem, 1.35rem + 2.9vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 1.15rem + .7vw, 1.6rem); line-height:1.2; }

em.risalto{
  font-style:italic;
  font-variation-settings:'SOFT' 90, 'WONK' 1, 'opsz' 120;
  color:var(--alba);
}

.occhiello{
  font-family:var(--corpo);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--indaco-tenue);
  display:flex;
  align-items:center;
  gap:.7rem;
}
.occhiello::before{
  content:'';
  width:1.8rem; height:2px;
  background:var(--alba);
  border-radius:2px;
  flex:none;
}
.occhiello--chiaro{ color:var(--alba-chiara); }

.sommario{
  font-size:clamp(1.05rem, 1rem + .35vw, 1.28rem);
  line-height:1.6;
  color:var(--testo-tenue);
  max-width:46ch;
}
.testo-lungo p + p{ margin-top:1.1em; }

/* ---------- impalcatura ---------- */
.contenitore{
  width:100%;
  max-width:var(--largo);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sezione{ padding-block:var(--sezione-y); }
.sezione[id]{ scroll-margin-top:5.5rem; }
.fondo-carta{ background:var(--carta); }
.fondo-notte{ background:var(--notte); color:var(--nebbia); }
.fondo-notte h2,.fondo-notte h3{ color:var(--luce); }
.fondo-notte .sommario{ color:#B9BCD8; }

.salta-al-contenuto{
  position:absolute; left:.75rem; top:-4rem;
  z-index:200;
  background:var(--notte); color:var(--luce);
  padding:.7rem 1.1rem; border-radius:.6rem;
  text-decoration:none;
  transition:top 200ms ease;
}
.salta-al-contenuto:focus{ top:.75rem; }

/* ---------- bottoni ---------- */
.bottone{
  --sfondo:var(--notte);
  --testo-bottone:var(--luce);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.92rem 1.6rem;
  background:var(--sfondo);
  color:var(--testo-bottone);
  border:1px solid var(--sfondo);
  border-radius:999px;
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease, background-color 260ms ease, color 260ms ease;
}
.bottone:hover{ transform:translateY(-2px); box-shadow:var(--ombra-alta); }
.bottone:active{ transform:translateY(0); }
.bottone .freccia{ transition:transform 260ms cubic-bezier(.22,.61,.36,1); }
.bottone:hover .freccia{ transform:translateX(3px); }

.bottone--alba{ --sfondo:var(--alba); --testo-bottone:var(--notte); }
.bottone--vuoto{
  --sfondo:transparent;
  --testo-bottone:var(--luce);
  border-color:rgba(233,230,240,.42);
}
.bottone--vuoto:hover{ background:rgba(233,230,240,.10); }
.bottone--scuro-vuoto:hover{ background:rgba(27,29,56,.05); }
.bottone--mini{ padding:.6rem 1.15rem; font-size:.86rem; }

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

/* =========================================================================
   TESTATA
   ========================================================================= */
.testata{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem var(--gutter);
  transition:background-color var(--transizione), box-shadow var(--transizione), padding var(--transizione);
}
/* velo scuro finche' la testata sta sopra l'eroe: tiene leggibili
   sia il marchio sia il testo che ci scorre sotto */
.testata::before{
  content:''; position:absolute;
  left:0; right:0; top:0; bottom:-1.8rem;
  z-index:-2;
  background:linear-gradient(180deg, rgba(27,29,56,.94) 0%, rgba(27,29,56,.66) 52%, rgba(27,29,56,0) 100%);
  pointer-events:none;
  transition:opacity var(--transizione);
}
.testata.is-attaccata::before{ opacity:0; }
.testata::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(252,250,247,.82);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  opacity:0;
  transition:opacity var(--transizione), border-color var(--transizione);
}
.testata.is-attaccata{ padding-block:.6rem; }
.testata.is-attaccata::after{ opacity:1; border-bottom-color:var(--bordo); }

.marchio{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--luce);
  margin-right:auto;
  transition:color var(--transizione);
}
.testata.is-attaccata .marchio{ color:var(--notte); }
.marchio-segno{ width:1.55rem; flex:none; }
.marchio-testo{ display:flex; flex-direction:column; line-height:1.08; }
.marchio-nome{
  font-family:var(--display);
  font-size:1.06rem;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 40;
  letter-spacing:-.01em;
}
.marchio-ruolo{
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  opacity:.66; font-style:normal;
}

.navigazione{ display:flex; align-items:center; gap:.35rem; }
.navigazione a{
  position:relative;
  padding:.5rem .8rem;
  font-size:.93rem;
  font-weight:500;
  text-decoration:none;
  color:rgba(252,250,247,.86);
  border-radius:.5rem;
  transition:color var(--transizione);
}
.testata.is-attaccata .navigazione a{ color:var(--testo-tenue); }
.navigazione a::after{
  content:''; position:absolute;
  left:.8rem; right:.8rem; bottom:.28rem; height:2px;
  background:var(--alba); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 300ms cubic-bezier(.22,.61,.36,1);
}
.navigazione a:hover::after,.navigazione a.is-corrente::after{ transform:scaleX(1); }
.testata.is-attaccata .navigazione a:hover,
.testata.is-attaccata .navigazione a.is-corrente{ color:var(--notte); }
.navigazione a:hover,.navigazione a.is-corrente{ color:var(--luce); }

.testata .bottone{ --sfondo:var(--alba); --testo-bottone:var(--notte); }

.apri-menu{
  display:none;
  width:2.75rem; height:2.75rem;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid rgba(252,250,247,.3);
  border-radius:999px;
  color:var(--luce);
  cursor:pointer;
  transition:color var(--transizione), border-color var(--transizione);
}
.testata.is-attaccata .apri-menu{ color:var(--notte); border-color:rgba(27,29,56,.22); }
.apri-menu span{
  display:block; width:1.05rem; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform 300ms cubic-bezier(.22,.61,.36,1), opacity 200ms ease;
}
.apri-menu span + span{ margin-top:.28rem; }
.apri-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(.39rem) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.apri-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.39rem) rotate(-45deg); }

/* con il pannello aperto la testata torna "sopra lo scuro" */
body.menu-aperto .testata::before,
body.menu-aperto .testata::after{ opacity:0; }
body.menu-aperto .testata.is-attaccata .marchio{ color:var(--luce); }
body.menu-aperto .testata.is-attaccata .apri-menu{
  color:var(--luce);
  border-color:rgba(252,250,247,.3);
}

/* pannello mobile */
.pannello{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center;
  gap:.2rem;
  padding:6rem var(--gutter) 3rem;
  background:var(--notte);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 520ms cubic-bezier(.7,0,.2,1), visibility 0s linear 520ms;
}
.pannello.is-aperto{ transform:translateY(0); visibility:visible; transition-delay:0s; }
.pannello a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.55rem 0;
  font-family:var(--display);
  font-size:clamp(1.9rem,9vw,2.7rem);
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 90;
  color:var(--luce);
  text-decoration:none;
  border-bottom:1px solid rgba(233,230,240,.12);
  opacity:0; transform:translateY(14px);
}
.pannello.is-aperto a{ animation:entra-voce 500ms cubic-bezier(.22,.61,.36,1) forwards; }
.pannello.is-aperto a:nth-child(1){ animation-delay:120ms; }
.pannello.is-aperto a:nth-child(2){ animation-delay:180ms; }
.pannello.is-aperto a:nth-child(3){ animation-delay:240ms; }
.pannello.is-aperto a:nth-child(4){ animation-delay:300ms; }
.pannello.is-aperto a:nth-child(5){ animation-delay:360ms; }
.pannello.is-aperto a:nth-child(6){ animation-delay:420ms; }
/* i numeri si contano da soli: se una sezione resta vuota e sparisce dal
   menu, la numerazione non salta */
.pannello{ counter-reset:voce; }
.pannello a{ counter-increment:voce; }
.pannello-numero::before{ content:counter(voce, decimal-leading-zero); }
.pannello-numero{
  font-family:var(--corpo);
  font-size:.7rem; font-weight:700;
  letter-spacing:.18em;
  color:var(--alba);
}
@keyframes entra-voce{ to{ opacity:1; transform:translateY(0); } }

/* =========================================================================
   EROE
   ========================================================================= */
.eroe{
  position:relative;
  background:var(--notte);
  color:var(--nebbia);
  margin-top:-4.6rem;
  padding-top:4.6rem;
  overflow:hidden;
}
.eroe::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(224,139,92,.28), transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(58,63,107,.85), transparent 62%);
  pointer-events:none;
}
.eroe-griglia{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem);
}
.eroe-testo h1{ color:var(--luce); margin-top:1.4rem; }
.eroe-testo .sommario{ margin-top:1.6rem; color:#BFC2DD; }

.eroe-fatti{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:3.2rem;
  background:rgba(233,230,240,.14);
  border:1px solid rgba(233,230,240,.14);
  border-radius:1rem;
  overflow:hidden;
}
.eroe-fatti li{
  background:var(--notte);
  padding:1.05rem 1.15rem;
}
.eroe-fatti dt{
  font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--alba); margin-bottom:.35rem;
}
.eroe-fatti dd{ margin:0; font-size:.9rem; line-height:1.4; color:#C9CBE4; }

/* arco: il motivo che ritorna in tutto il sito */
.arco{
  position:relative;
  border-radius:999px 999px var(--arco) var(--arco);
  overflow:hidden;
  background:var(--indaco);
}
.arco img{ width:100%; height:100%; object-fit:cover; }
.arco::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(252,250,247,.18);
  pointer-events:none;
}
.eroe-figura{ position:relative; }
.eroe-figura .arco{
  aspect-ratio:3/4;
  box-shadow:var(--ombra-alta);
}
/* la foto e' un ritratto: il punto di fuoco e' il viso, nel terzo alto */
.eroe-figura .arco img{ object-position:50% 30%; }
.eroe-firma{
  position:absolute;
  left:-1.5rem; bottom:1.8rem;
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1.05rem .6rem .7rem;
  background:var(--luce);
  color:var(--notte);
  border-radius:999px;
  box-shadow:var(--ombra-alta);
  font-size:.82rem; font-weight:600;
}
.pallino-vivo{
  width:.5rem; height:.5rem; flex:none;
  border-radius:50%;
  background:var(--salvia);
  box-shadow:0 0 0 0 rgba(110,140,125,.6);
  animation:respiro 3.4s ease-in-out infinite;
}
@keyframes respiro{
  0%,100%{ box-shadow:0 0 0 0 rgba(110,140,125,.55); }
  50%    { box-shadow:0 0 0 .42rem rgba(110,140,125,0); }
}

/* =========================================================================
   CHI SONO
   ========================================================================= */
.chi-griglia{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.chi-figura .arco{ aspect-ratio:3/4; background:var(--carta); }
.chi-didascalia{
  margin-top:.9rem;
  font-size:.78rem;
  color:var(--testo-tenue);
  line-height:1.45;
}
.chi-testo h2{ margin:1.3rem 0 1.5rem; }
.chi-testo .testo-lungo{ color:var(--testo-tenue); max-width:56ch; }

.formazione{
  margin-top:2.6rem;
  border-top:1px solid var(--bordo);
}
.formazione li{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:1.2rem;
  padding:1rem 0;
  border-bottom:1px solid var(--bordo);
  align-items:baseline;
}
.formazione-anno{
  font-size:.78rem; font-weight:700;
  letter-spacing:.1em;
  color:var(--alba);
  font-variant-numeric:tabular-nums;
}
.formazione-voce{ font-size:.97rem; line-height:1.45; }
.formazione-voce small{
  display:block;
  color:var(--testo-tenue);
  font-size:.83rem;
  margin-top:.12rem;
}
.etichetta-corso{
  display:inline-block;
  margin-left:.45rem;
  padding:.1rem .5rem;
  border-radius:999px;
  background:var(--nebbia);
  color:var(--indaco);
  font-size:.68rem; font-weight:700;
  letter-spacing:.06em;
  vertical-align:middle;
}

/* =========================================================================
   SERVIZI — "il filo"
   ========================================================================= */
.servizi-griglia{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.servizi-colonna{
  position:sticky;
  top:7rem;
}
.servizi-colonna h2{ margin:1.3rem 0 1.2rem; }
.servizi-colonna .sommario{ font-size:1.02rem; }
.servizi-figura{ margin-top:1.8rem; }
.servizi-figura .arco{ aspect-ratio:1/1; }
.servizi-stato{
  margin-top:1.8rem;
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; font-weight:600;
  letter-spacing:.04em;
  color:var(--testo-tenue);
  min-height:1.2rem;
}
.servizi-stato b{ color:var(--notte); font-weight:700; }

.filo{
  position:relative;
  padding-left:clamp(1.9rem,4vw,2.8rem);
}
.filo::before,.filo::after{
  content:'';
  position:absolute;
  left:.34rem;
  top:.9rem;
  width:2px;
  border-radius:2px;
}
.filo::before{
  bottom:.9rem;
  background:var(--bordo);
}
.filo::after{
  height:calc(var(--filo, 0) * (100% - 1.8rem));
  background:linear-gradient(180deg,var(--salvia),var(--alba));
  transition:height 220ms linear;
}
.tappa{
  position:relative;
  padding:0 0 clamp(2rem,3.6vw,2.9rem);
}
.tappa:last-child{ padding-bottom:0; }
.tappa-nodo{
  position:absolute;
  left:calc(-1 * clamp(1.9rem,4vw,2.8rem));
  top:.42rem;
  width:.95rem; height:.95rem;
  margin-left:-.115rem;
  border-radius:50%;
  background:var(--carta);
  border:2px solid var(--bordo);
  transition:border-color 320ms ease, background-color 320ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}
.tappa.is-vista .tappa-nodo{
  background:var(--alba);
  border-color:var(--alba);
  transform:scale(1.14);
}
.tappa-numero{
  font-size:.7rem; font-weight:700;
  letter-spacing:.16em;
  color:var(--indaco-tenue);
  font-variant-numeric:tabular-nums;
}
.tappa h3{ margin:.4rem 0 .55rem; }
.tappa p{ color:var(--testo-tenue); max-width:52ch; }
.tappa-elenco{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:.95rem;
}
.tappa-elenco li{
  padding:.28rem .72rem;
  border:1px solid var(--bordo);
  border-radius:999px;
  background:var(--luce);
  font-size:.8rem;
  color:var(--testo-tenue);
}

/* =========================================================================
   CITAZIONE
   ========================================================================= */
.citazione{
  position:relative;
  overflow:hidden;
  background:var(--notte);
  color:var(--luce);
  isolation:isolate;
}
.citazione-sfondo{
  position:absolute; inset:0; z-index:-1;
}
.citazione-sfondo img{
  width:100%; height:100%; object-fit:cover;
  opacity:.5;
}
.citazione-sfondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(27,29,56,.94) 12%, rgba(27,29,56,.58) 62%, rgba(27,29,56,.86));
}
.citazione-corpo{
  max-width:var(--stretto);
  padding-block:clamp(4rem,9vw,7rem);
}
.citazione-testo{
  font-size:clamp(1.65rem,1.1rem + 2.6vw, 2.9rem);
  font-style:italic;
  font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 120;
  line-height:1.18;
  margin-top:1.5rem;
}
.citazione-firma{
  margin-top:1.6rem;
  font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--alba-chiara);
}

/* =========================================================================
   RECENSIONI
   ========================================================================= */
.recensioni-intro{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.recensioni-intro h2{ margin-top:1.2rem; max-width:16ch; }
.recensioni-nota{
  max-width:34ch;
  font-size:.9rem;
  color:var(--testo-tenue);
}
/* Colonne, non griglia: le testimonianze hanno lunghezze molto diverse
   (da tre righe a una lettera intera) e una griglia lascerebbe sotto le
   piu' corte dei buchi grandi quanto le piu' lunghe. Cosi' si impacchettano
   da sole. Due colonne e non tre: sono testi da leggere, e a un terzo di
   pagina le righe diventerebbero troppo strette. */
.recensioni{
  columns:2;
  column-gap:clamp(1rem,2vw,1.5rem);
}
.recensione{
  break-inside:avoid;
  margin-bottom:clamp(1rem,2vw,1.5rem);
  display:flex; flex-direction:column;
  gap:1rem;
  padding:clamp(1.5rem,2.4vw,2rem);
  background:var(--luce);
  border:1px solid var(--bordo);
  border-radius:1.35rem;
  box-shadow:var(--ombra-morbida);
  transition:transform 360ms cubic-bezier(.22,.61,.36,1), box-shadow 360ms ease;
}
.recensione:hover{ transform:translateY(-4px); box-shadow:var(--ombra-alta); }
.stelle{ display:flex; gap:.16rem; color:var(--alba); }
.recensione blockquote{
  font-size:1.02rem;
  line-height:1.58;
  color:var(--testo);
  /* chi scrive va a capo per separare i pensieri: senza questo il testo
     si appiattisce in un unico blocco */
  white-space:pre-line;
}
/* Testimonianze lunghe.
   Il taglio lo mette app.js, e solo dove il testo esce davvero: cosi' se
   JavaScript non parte la lettera resta intera e leggibile, invece di
   restare mozzata senza modo di aprirla. */
.recensione blockquote.is-troncata{
  max-height:calc(12 * 1.58em);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);
          mask-image:linear-gradient(to bottom,#000 74%,transparent);
}
.apri-testimonianza{
  align-self:flex-start;
  font:inherit; font-size:.84rem; font-weight:600;
  color:var(--indaco);
  background:none; border:0;
  padding:0 0 .1rem;
  border-bottom:1.5px solid var(--alba);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:color 240ms ease;
}
.apri-testimonianza:hover{ color:var(--alba); }
.apri-testimonianza .segno{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1);
}
.apri-testimonianza[aria-expanded="true"] .segno{ transform:rotate(180deg); }

.recensione figcaption{
  margin-top:auto;
  padding-top:.4rem;
  display:flex; align-items:center; gap:.7rem;
  border-top:1px solid var(--bordo);
}
.iniziale{
  width:2.2rem; height:2.2rem; flex:none;
  display:grid; place-items:center;
  border-radius:999px 999px .35rem .35rem;
  background:var(--nebbia);
  color:var(--indaco);
  font-family:var(--display);
  font-size:.95rem;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 40;
}
.recensione-chi{ line-height:1.25; }
.recensione-chi strong{ display:block; font-size:.92rem; font-weight:700; }
.recensione-chi span{ font-size:.78rem; color:var(--testo-tenue); }

/* =========================================================================
   DOVE
   ========================================================================= */
.dove-griglia{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
  gap:clamp(1rem,2vw,1.4rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
}
.sede{
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,2.2vw,1.8rem);
  background:var(--luce);
  border:1px solid var(--bordo);
  border-radius:1.35rem;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1), box-shadow 360ms ease;
}
.sede:hover{ transform:translateY(-3px); box-shadow:var(--ombra-morbida); }
.sede h3{ margin-bottom:.25rem; }
.sede-struttura{
  font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--indaco-tenue);
  margin-bottom:.85rem;
}
.sede address{
  font-style:normal;
  color:var(--testo-tenue);
  line-height:1.5;
  font-size:.94rem;
}
.sede-orari{
  margin-top:1.1rem;
  padding-top:.5rem;
  border-top:1px solid var(--bordo);
}
.sede-orari li{
  display:flex; justify-content:space-between; gap:.9rem;
  padding:.42rem 0;
  font-size:.84rem;
  line-height:1.35;
}
.sede-orari li span:first-child{ color:var(--testo); font-weight:600; flex:none; }
.sede-orari li span:last-child{
  color:var(--testo-tenue);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.sede-azioni{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;
  margin-top:auto;
  padding-top:1.2rem;
}
.sede-azioni a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.86rem; font-weight:600;
  color:var(--indaco);
  text-decoration:none;
  border-bottom:1.5px solid var(--alba);
  padding-bottom:.1rem;
  transition:color 240ms ease;
}
.sede-azioni a:hover{ color:var(--alba); }

/* =========================================================================
   CONTATTI
   ========================================================================= */
.contatti-griglia{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start;
}
.contatti-testo h2{ margin:1.3rem 0 1.3rem; }
.canali{ margin-top:2.4rem; display:grid; gap:.55rem; }
.canale{
  display:flex; align-items:center; gap:1rem;
  padding:.95rem 1.15rem;
  border:1px solid rgba(233,230,240,.18);
  border-radius:1rem;
  text-decoration:none;
  color:var(--nebbia);
  transition:background-color 260ms ease, border-color 260ms ease, transform 260ms cubic-bezier(.22,.61,.36,1);
}
.canale:hover{ background:rgba(233,230,240,.07); border-color:rgba(233,230,240,.34); transform:translateX(3px); }
.canale-icona{
  width:2.3rem; height:2.3rem; flex:none;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(224,139,92,.16);
  color:var(--alba-chiara);
}
.canale-testo{ line-height:1.28; }
.canale-testo strong{ display:block; font-size:.96rem; font-weight:600; }
.canale-testo span{ font-size:.78rem; color:#9EA2C4; }
.canale .freccia{ margin-left:auto; color:#9EA2C4; }

/* modulo */
.modulo{
  padding:clamp(1.6rem,3vw,2.4rem);
  background:rgba(252,250,247,.05);
  border:1px solid rgba(233,230,240,.16);
  border-radius:1.5rem;
}
.campi{ display:grid; gap:1.15rem; }
.coppia{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo label{
  font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:#A9ADCE;
}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:.8rem .1rem;
  background:transparent;
  border:0;
  border-bottom:1.5px solid rgba(233,230,240,.26);
  color:var(--luce);
  border-radius:0;
  transition:border-color 240ms ease;
}
.campo textarea{ resize:vertical; min-height:6rem; line-height:1.55; }
.campo select{
  -webkit-appearance:none; appearance:none;
  padding-right:1.6rem;
  background-image:linear-gradient(45deg,transparent 50%,#A9ADCE 50%),linear-gradient(135deg,#A9ADCE 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.15rem, calc(100% - 7px) 1.15rem;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.campo select option{ background:var(--notte); color:var(--luce); }
.campo input::placeholder,.campo textarea::placeholder{ color:#7B7FA6; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-bottom-color:var(--alba);
}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--alba); outline-offset:4px;
}
.campo-errore{
  font-size:.78rem;
  color:var(--rosa);
  letter-spacing:0; text-transform:none; font-weight:500;
  min-height:0;
}
.campo [aria-invalid="true"]{ border-bottom-color:var(--rosa); }

.consenso{
  display:flex; gap:.75rem; align-items:flex-start;
  margin-top:.4rem;
}
.consenso input{
  width:1.15rem; height:1.15rem; flex:none;
  margin-top:.22rem;
  accent-color:var(--alba);
  cursor:pointer;
}
.consenso label{
  font-size:.82rem; font-weight:400;
  letter-spacing:0; text-transform:none;
  color:#A9ADCE; line-height:1.5;
}
.consenso a{ color:var(--alba-chiara); }

.modulo .bottone{ width:100%; justify-content:center; margin-top:1.6rem; }
.avviso-privacy{
  margin-top:1.1rem;
  font-size:.78rem;
  color:#8B8FB4;
  line-height:1.5;
}
.esito{
  margin-top:1rem;
  padding:.9rem 1.1rem;
  border-radius:.85rem;
  font-size:.88rem;
  display:none;
}
.esito.is-visibile{ display:block; }
.esito.is-ok{ background:rgba(110,140,125,.2); color:#CDE3D6; }
.esito.is-ko{ background:rgba(217,162,150,.16); color:#F1CFC7; }

/* =========================================================================
   PIEDE
   ========================================================================= */
.piede{
  background:var(--notte);
  color:#8B8FB4;
  border-top:1px solid rgba(233,230,240,.12);
  padding-block:2.6rem;
  font-size:.84rem;
}
.piede-riga{
  display:flex; flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center; justify-content:space-between;
}
.piede .marchio{ color:var(--luce); margin-right:0; }
.piede-legale{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.piede a{ text-decoration:none; transition:color 240ms ease; }
.piede a:hover{ color:var(--alba-chiara); }
.piede-dati{
  display:flex; flex-wrap:wrap;
  gap:.3rem 1.4rem;
  margin-top:1.2rem;
  font-size:.78rem;
}
.piede-nota{
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(233,230,240,.1);
  font-size:.76rem;
  line-height:1.6;
  max-width:70ch;
}

/* =========================================================================
   RIVELAZIONE ALLO SCORRIMENTO
   ========================================================================= */
.rivela{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 760ms cubic-bezier(.22,.61,.36,1), transform 760ms cubic-bezier(.22,.61,.36,1);
}
.rivela.is-visto{ opacity:1; transform:none; }
.rivela[data-ritardo="1"]{ transition-delay:90ms; }
.rivela[data-ritardo="2"]{ transition-delay:180ms; }
.rivela[data-ritardo="3"]{ transition-delay:270ms; }

/* Senza JavaScript il testo si vede. La classe js la mette uno script in
   linea nella <head>, e la toglie se app.js non parte entro 3 secondi:
   senza questa regola la pagina resterebbe quasi vuota. */
html:not(.js) .rivela{ opacity:1; transform:none; }

/* hidden vince sempre: il modulo e la sua alternativa si scambiano cosi' */
[hidden]{ display:none !important; }

/* Al posto del modulo finche' app.js non e' pronto */
.modulo-alternativo{ align-self:center; max-width:30rem; color:#BFC2DD; font-size:1.05rem; line-height:1.6; }
.modulo-alternativo a{ color:var(--alba-chiara); font-weight:700; }

/* Senza JavaScript la testata non si apre e non si attacca: il menu a
   scomparsa e il cambio di colore allo scorrimento li fa app.js. La testata
   resta in cima, sopra l'eroe scuro dove il testo chiaro si legge, e sul
   telefono mostra le voci invece di un hamburger che non si aprirebbe. */
html:not(.js) .testata{ position:relative; }
@media (max-width:820px){
  html:not(.js) .testata{ flex-wrap:wrap; }
  html:not(.js) .apri-menu{ display:none; }
  html:not(.js) .navigazione{
    display:flex; flex-wrap:wrap; order:3; width:100%;
    margin-left:-.8rem; gap:0;
  }
  html:not(.js) .navigazione a{ padding:.35rem .8rem; font-size:.88rem; }
}

/* =========================================================================
   ADATTAMENTI
   ========================================================================= */
@media (max-width:1040px){
  /* Su schermo stretto la fotografia apre la pagina: e' la cosa piu'
     eloquente che abbiamo, e non deve finire sotto due schermate di testo. */
  .eroe-griglia{ grid-template-columns:1fr; gap:2.4rem; padding-block:1.6rem 3.4rem; }
  .eroe-figura{ order:-1; max-width:none; }
  /* quadrato: la testa sta tutta sotto l'arco e il titolo resta nella
     prima schermata del telefono */
  .eroe-figura .arco{ aspect-ratio:1/1; }
  .eroe-figura .arco img{ object-position:50% 25%; }
  .eroe-testo h1{ margin-top:1.1rem; }
  .eroe-testo .sommario{ margin-top:1.2rem; }
  .eroe-fatti{ margin-top:2.4rem; }
  .eroe-firma{ left:auto; right:1.2rem; }
  .chi-griglia,.servizi-griglia,.contatti-griglia{ grid-template-columns:1fr; }
  .chi-figura{ max-width:22rem; }
  .servizi-colonna{ position:static; }
  .servizi-figura{ display:none; }
  /* l'indicatore ha senso solo quando la colonna resta ferma a lato */
  .servizi-stato{ display:none; }
}

@media (max-width:820px){
  .navigazione,.testata > .bottone{ display:none; }
  .apri-menu{ display:flex; flex-direction:column; }
  .eroe-fatti{ grid-template-columns:1fr; }
  .recensioni{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter));
    padding:.5rem var(--gutter) 1.5rem;
    gap:.9rem;
    scrollbar-width:none;
    /* ogni scheda alta quanto il suo testo: senza, la piu' corta
       diventerebbe alta quanto la lettera piu' lunga */
    align-items:flex-start;
  }
  .recensioni::-webkit-scrollbar{ display:none; }
  .recensione{
    columns:auto;
    margin-bottom:0;
    flex:0 0 min(20rem,82vw);
    scroll-snap-align:center;
  }
  .recensione:hover{ transform:none; box-shadow:var(--ombra-morbida); }
  .coppia{ grid-template-columns:1fr; }
  .formazione li{ grid-template-columns:1fr; gap:.2rem; }
  .azioni .bottone{ flex:1 1 100%; justify-content:center; }
}

@media (max-width:520px){
  .eroe-figura{ max-width:none; }
  .eroe-firma{ right:.8rem; bottom:1rem; font-size:.76rem; }
  .citazione-sfondo img{ opacity:.34; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rivela{ opacity:1; transform:none; }
  .pannello a{ opacity:1; transform:none; }
}

@media print{
  .testata,.pannello,.eroe-figura,.citazione-sfondo,.modulo{ display:none; }
  body{ background:#fff; color:#000; }
}

/* =========================================================================
   PAGINE DI TESTO (privacy, cookie)
   ========================================================================= */
.pagina-testo{
  max-width:var(--stretto);
  margin-inline:auto;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(4rem,8vw,6rem);
}
.pagina-testo h1{
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.2rem);
  margin:1.2rem 0 1.4rem;
}
.pagina-testo h2{
  font-size:clamp(1.25rem,1.1rem + .7vw,1.55rem);
  margin:2.6rem 0 .7rem;
}
.pagina-testo p,.pagina-testo li{ color:var(--testo-tenue); }
.pagina-testo p + p{ margin-top:.9em; }
.pagina-testo ul{
  margin-top:.7rem;
  display:grid; gap:.45rem;
}
.pagina-testo ul li{ padding-left:1.15rem; position:relative; }
.pagina-testo ul li::before{
  content:''; position:absolute;
  left:0; top:.62em;
  width:.4rem; height:.4rem;
  border-radius:50%; background:var(--alba);
}
.pagina-testo a{ color:var(--indaco); }
.da-compilare{
  display:inline-block;
  padding:.05rem .45rem;
  border-radius:.3rem;
  background:var(--nebbia);
  color:var(--indaco);
  font-size:.86em; font-weight:700;
}
.torna{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:3rem;
  font-weight:600; text-decoration:none;
  color:var(--indaco);
}
.torna:hover{ color:var(--alba); }