@import url("font.css");

/* ==========================================================================
   Francesca Rinaldi — Ostetrica e IBCLC
   Palette del brand: EA6FA9 Sweet Peony / 642643 Crimson Violet
                      3C232C Midnight Violet / FBEAEE Lavender Blush
   Font: Montserrat (titoli) / Lora (sottotitoli) / Hind Madurai (testo)
   I font sono ospitati qui, non su Google: un sito sanitario non manda
   l'IP dei visitatori a terzi senza motivo.
   ========================================================================== */

:root{
  --peony:#EA6FA9;
  --crimson:#642643;
  --midnight:#3C232C;
  --blush:#FBEAEE;
  --carta:#FFFDFD;
  --testo:#3C232C;
  --tenue:#7A6069;
  --bordo:#EFDCE2;

  --tit:"Montserrat",system-ui,sans-serif;
  --sot:"Lora",Georgia,serif;
  --txt:"Hind Madurai",system-ui,sans-serif;

  --w:64rem;
  --r:.75rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--txt);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--testo);
  background:var(--carta);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--crimson)}

h1,h2,h3{font-family:var(--tit);font-weight:700;line-height:1.2;color:var(--crimson);margin:0 0 .6em}
h1{font-size:clamp(1.9rem,5.2vw,3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem)}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1.15em}

/* Le aree di sicurezza servono su iPhone con il notch e su Android con i gesti:
   in orizzontale il notch mangia i lati, in verticale la barra home mangia il fondo. */
.w{
  max-width:var(--w);margin:0 auto;
  padding-left:calc(1.5rem + env(safe-area-inset-left));
  padding-right:calc(1.5rem + env(safe-area-inset-right));
}
.stretta{max-width:44rem}

/* iOS ingrandisce la pagina se un campo ha il testo sotto i 16px */
input,select,textarea{font-family:inherit;font-size:1.0625rem}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:3rem}
textarea{min-height:8rem}

/* la casella di consenso: quadrata, e il bersaglio da toccare e' tutta la riga */
input[type=checkbox]{
  width:1.35rem;height:1.35rem;min-height:0;flex:none;
  accent-color:var(--crimson);margin:.15rem .55rem 0 0;
}
label.consenso{display:flex;align-items:flex-start;padding:.5rem 0;cursor:pointer}
button,.btn,nav.menu a,.scheda a.piu{min-height:2.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center}

/* ---------- barra in alto ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,253,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
}
.top .w{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.marchio{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--tit);font-weight:700;font-size:1.02rem;
  color:var(--crimson);text-decoration:none;line-height:1.25;
}
.marchio img{width:2.7rem;height:auto;flex:none}
.marchio .ruolo{display:block;font-family:var(--txt);font-weight:400;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--peony)}
@media(max-width:26rem){.marchio{font-size:.94rem;gap:.5rem}.marchio img{width:2.3rem}}

nav.menu{display:flex;gap:1.6rem;align-items:center}
nav.menu a{font-size:.95rem;text-decoration:none;color:var(--testo);padding:.2rem 0;border-bottom:2px solid transparent}
nav.menu a:hover,nav.menu a[aria-current]{border-bottom-color:var(--peony);color:var(--crimson)}
.apri{display:none;background:none;border:0;font-size:1.6rem;color:var(--crimson);cursor:pointer;padding:.2rem .4rem;line-height:1}

@media(max-width:56rem){
  .apri{display:block}
  nav.menu{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--carta);border-bottom:1px solid var(--bordo);
    padding:.5rem 1.5rem 1.25rem;
    display:none;
  }
  nav.menu.aperto{display:flex}
  nav.menu a{padding:.7rem 0;border-bottom:1px solid var(--bordo)}
}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-block;font-family:var(--tit);font-weight:600;font-size:.98rem;
  padding:.85rem 1.6rem;border-radius:100px;text-decoration:none;
  background:var(--crimson);color:#fff;border:2px solid var(--crimson);
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--midnight);border-color:var(--midnight)}
.btn.vuoto{background:transparent;color:var(--crimson)}
.btn.vuoto:hover{background:var(--crimson);color:#fff}
.btn.wa{background:#fff;color:var(--crimson);border-color:var(--bordo)}
.btn.wa:hover{background:var(--blush);border-color:var(--peony);color:var(--crimson)}
.pulsanti{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- sezioni ---------- */
section{padding:4.5rem 0}
section.rosa{background:var(--blush)}
section.scura{background:var(--crimson);color:#fff}
section.scura h2,section.scura h3{color:#fff}
section.scura a{color:#fff}
.occhiello{
  font-family:var(--txt);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--peony);margin:0 0 .7rem;font-weight:600;
}
section.scura .occhiello{color:var(--blush);opacity:.85}

/* ---------- apertura ---------- */
.hero{padding:3.5rem 0 4rem;background:linear-gradient(180deg,var(--blush) 0%,var(--carta) 100%)}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero p.paga{font-family:var(--sot);font-style:italic;font-size:1.3rem;color:var(--peony);margin:0 0 .8rem}
.hero p.gancio{font-size:1.15rem;color:var(--tenue);max-width:34rem}
.hero figure{margin:0}
.hero img{border-radius:var(--r);box-shadow:0 1.5rem 3rem rgba(100,38,67,.16)}
/* solo il ritratto e' tondo: le foto dello studio restano rettangolari */
.hero figure.tonda img{border-radius:50%}
@media(max-width:56rem){
  .hero .w{grid-template-columns:1fr;gap:2rem}
  .hero figure{order:-1}
  .hero figure.tonda{max-width:15rem;margin:0 auto}
}

/* ---------- griglie ---------- */
.griglia{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:56rem){.g2,.g3{grid-template-columns:1fr}}

.scheda{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--r);
  padding:1.8rem;display:flex;flex-direction:column;
}
.scheda h3{color:var(--crimson)}
.scheda .dove{font-size:.85rem;color:var(--peony);font-weight:600;margin:0 0 .8rem}
.scheda p{color:var(--tenue);flex:1}
.scheda a.piu{font-family:var(--tit);font-weight:600;font-size:.92rem;text-decoration:none;margin-top:.5rem}
.scheda a.piu:after{content:" →"}

/* ---------- elenco percorsi dentro le pagine ---------- */
.percorso{border-top:2px solid var(--blush);padding:2.5rem 0}
.percorso:first-of-type{border-top:0;padding-top:1rem}
.percorso .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem}
.percorso .meta span{
  font-size:.82rem;background:var(--blush);color:var(--crimson);
  padding:.28rem .8rem;border-radius:100px;font-weight:600;
}
.percorso ul{margin:0 0 1.2rem;padding-left:1.2rem;color:var(--tenue)}
.percorso ul li{margin-bottom:.4rem}

/* ---------- citazioni ---------- */
.voce{
  background:#fff;border:1px solid var(--bordo);border-left:4px solid var(--peony);
  border-radius:var(--r);padding:1.7rem;
}
.voce p{font-family:var(--sot);font-style:italic;font-size:1.06rem;color:var(--testo)}
.voce footer{font-family:var(--txt);font-style:normal;font-size:.85rem;color:var(--peony);font-weight:600}

.frase{
  font-family:var(--sot);font-style:italic;
  font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.45;
  color:var(--crimson);border-left:4px solid var(--peony);
  padding-left:1.5rem;margin:2.5rem 0;
}

/* ---------- fatti ---------- */
.fatti{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.fatti b{display:block;font-family:var(--tit);font-size:2rem;color:var(--peony);line-height:1.1}
.fatti span{font-size:.92rem;color:var(--tenue)}
@media(max-width:44rem){.fatti{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- richiamo finale ---------- */
.richiamo{background:var(--crimson);color:#fff;text-align:center}
.richiamo p{color:var(--blush);max-width:36rem;margin-left:auto;margin-right:auto}
.richiamo .btn{background:#fff;color:var(--crimson);border-color:#fff}
.richiamo .btn:hover{background:var(--blush);border-color:var(--blush)}
.richiamo .pulsanti{justify-content:center}

/* ---------- barra azioni fissa (solo mobile) ----------
   Su telefono le due cose che deve poter fare sempre sono: scriverle su WhatsApp
   e prenotare la videochiamata. Senza questa barra deve tornare in cima ogni volta.
   Il padding in fondo tiene conto della barra home dell'iPhone e dei gesti Android. */
.barra-mobile{display:none}

@media(max-width:56rem){
  .barra-mobile{
    display:grid;grid-template-columns:1fr 1.4fr;gap:.6rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,253,253,.97);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--bordo);
    padding:.65rem calc(1rem + env(safe-area-inset-right)) .65rem calc(1rem + env(safe-area-inset-left));
    padding-bottom:calc(.65rem + env(safe-area-inset-bottom));
    box-shadow:0 -.5rem 1.5rem rgba(60,35,44,.07);
  }
  .barra-mobile a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:3rem;border-radius:100px;text-decoration:none;
    font-family:var(--tit);font-weight:600;font-size:.92rem;line-height:1.2;
  }
  .barra-mobile .bm-wa{background:#fff;color:var(--crimson);border:2px solid var(--bordo)}
  .barra-mobile .bm-cta{background:var(--crimson);color:#fff}

  /* spazio in fondo alla pagina, se no la barra copre il footer */
  body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}

  /* il menu a tendina non deve finire sotto la barra */
  nav.menu{max-height:calc(100vh - 4.25rem - 5rem);overflow-y:auto}
}

/* ---------- fondo pagina ---------- */
footer.fondo{background:var(--midnight);color:#D9C7CD;padding:3.5rem 0 2rem;font-size:.92rem}
footer.fondo a{color:var(--blush)}
footer.fondo h4{font-family:var(--tit);color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 .9rem}
.fondo-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-bottom:2.5rem}
@media(max-width:56rem){.fondo-griglia{grid-template-columns:1fr;gap:2rem}}
.fondo-griglia p{margin:0 0 .4rem}
.legale{border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;font-size:.82rem;color:#A98F98;line-height:1.7}
.da-fare{background:#8B6D00;color:#fff;padding:.1rem .45rem;border-radius:.25rem;font-size:.78rem;font-weight:600}

/* ---------- eventi (aperitivi e colazioni tra mamme) ---------- */
.evento{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--r);
  padding:1.5rem 1.7rem;display:flex;gap:1.4rem;align-items:flex-start;
}
.evento .quando{
  flex:none;text-align:center;background:var(--blush);border-radius:var(--r);
  padding:.7rem .9rem;min-width:4.6rem;
}
.evento .quando b{display:block;font-family:var(--tit);font-size:1.5rem;color:var(--crimson);line-height:1}
.evento .quando span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--peony);font-weight:600;margin-top:.2rem}
.evento h3{margin-bottom:.35rem}
.evento p{color:var(--tenue);margin:0 0 .6rem}
.evento .dettaglio{font-size:.88rem;color:var(--peony);font-weight:600;margin:0}
.evento.esaurito{opacity:.75}
.niente-eventi{
  background:#fff;border:1px dashed var(--bordo);border-radius:var(--r);
  padding:1.7rem;color:var(--tenue);margin:0;
}
@media(max-width:36rem){.evento{flex-direction:column;gap:.9rem}.evento .quando{display:inline-block}}

/* ---------- carosello delle testimonianze ----------
   Senza JavaScript le testimonianze restano tutte visibili, una sotto l'altra:
   la classe .acceso la mette il codice solo quando il carosello parte davvero,
   cosi' nessuno resta con una pagina vuota se qualcosa non carica. */
.carosello .cs-pista{display:grid;gap:1.5rem}

/* Le schede stanno una sopra l'altra e si alterna quale e' visibile.
   Prima usavo uno scorrimento con transform: piu' fragile (bastava un
   overflow nel posto sbagliato per far sparire tutto) e impossibile da
   verificare in anteprima. Cosi' l'altezza del riquadro segue da sola la
   scheda attiva, senza doverla calcolare a mano. */
.carosello.acceso{position:relative}
.carosello.acceso .cs-pista{display:block}
/* La scheda non attiva e' display:none, non "trasparente": se per qualsiasi
   motivo l'animazione non parte, quella attiva resta comunque piena e
   leggibile. La dissolvenza e' solo decorazione, non regola la visibilita'. */
.carosello.acceso .cs-pista > *{display:none}
.carosello.acceso .cs-pista > .attiva{display:block;animation:cs-entra .35s ease}
/* niente 'both': senza fill-mode, se l'animazione non parte la scheda resta
   comunque opaca. Con 'both' resterebbe congelata sul fotogramma iniziale,
   cioe' trasparente: lo stesso difetto di prima con un altro vestito. */
@keyframes cs-entra{from{opacity:0}to{opacity:1}}
.carosello.acceso .voce{margin:0}
.carosello.acceso .voce p{font-size:1.12rem;line-height:1.7}

.cs-comandi{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.6rem}
.cs-freccia{
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bordo);background:#fff;color:var(--crimson);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.cs-freccia:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}
.cs-freccia:focus-visible{outline:2px solid var(--peony);outline-offset:2px}
.cs-punti{display:flex;gap:0;align-items:center}
/* Il pulsante resta 2,75rem (il minimo per essere toccabile con il dito, come
   tutti gli altri del sito); il pallino visibile lo disegna ::before.
   Rimpicciolire il pulsante avrebbe fatto un bersaglio da 10px: sul telefono
   non lo prende nessuno. */
.cs-punto{
  flex:0 0 auto;
  width:2.75rem;height:2.75rem;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cs-punto::before{
  content:"";width:.62rem;height:.62rem;border-radius:50%;
  background:var(--bordo);transition:background .2s,transform .2s;
}
.cs-punto.attivo::before{background:var(--peony);transform:scale(1.4)}
.cs-punto:hover::before{background:var(--peony)}
.cs-punto:focus-visible{outline:2px solid var(--peony);outline-offset:-6px;border-radius:50%}

@media(prefers-reduced-motion:reduce){
  .carosello.acceso .cs-pista > .attiva{animation:none}
  .cs-punto::before{transition:none}
}

/* firma di chi ha fatto il sito: presente ma discreta, sotto le note legali */
.legale .firma{margin-top:1rem;font-size:.78rem;color:#8B7078}
.legale .firma a{font-size:inherit;color:#8B7078;text-decoration:underline;text-underline-offset:2px}
.legale .firma .firma-voce{white-space:nowrap}
.legale .firma .firma-voce + .firma-voce::before{content:" - "}
@media (max-width:520px){
  .legale .firma .firma-voce{display:block}
  .legale .firma .firma-voce + .firma-voce::before{content:none}
}
.legale .firma a:hover{color:var(--blush)}

/* riquadro di richiamo dentro il testo: serve aria sotto quanto sopra,
   se no il titolo della sezione successiva ci finisce addosso */
.riquadro{
  background:var(--blush);border-radius:var(--r);
  padding:1.5rem 1.7rem;margin:2.5rem 0 3rem;
}
.riquadro p:last-child{margin-bottom:0}
/* e un po' di respiro fra un riquadro e il titolo che segue */
.riquadro + h2{margin-top:0}