/* Genitori Calmi — sistema grafico «dal tramonto alla notte» (14/9/2026)
   Restyling chiesto da Glauco: nome con la G maiuscola, foto di bambini, fiabe in primo piano.
   Vale per le pagine nuove (/, /fiabe, /fiaba, /leggi). Le pagine delle prove in corso
   (kit, nido, grazie, checkout) restano su base.css fino alla fine della prova (16/9).
   Colori: blu notte come firma, giallo luna per l'azione, nebbia lavanda come fondo,
   carta calda per le schede e il racconto. Titoli Young Serif, testo Figtree, fiabe Literata. */

:root {
  --notte: #1E2A52;
  --notte-fonda: #131A36;
  --notte-chiara: #34457D;
  --luna: #F4C35A;
  --luna-cupa: #D9A43A;
  --luna-velo: #FCEFCB;
  --pesca: #EE9F7E;
  --pesca-velo: #FBE4D9;
  --salvia: #557F61;
  --salvia-velo: #E1EBE3;
  --nebbia: #EFEFF6;
  --nebbia-scura: #E2E3EF;
  --carta: #FFFDF8;
  --inchiostro: #1C2240;
  --tenue: #565D7E;
  --linea: #D6D8E8;

  --titoli: "Young Serif", Georgia, "Times New Roman", serif;
  --testo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --racconto: "Literata", Georgia, "Times New Roman", serif;

  --largo: 1120px;
  --stretto: 680px;
  --raggio: 22px;
  --ombra: 0 1px 2px rgba(19, 26, 54, .06), 0 10px 30px rgba(19, 26, 54, .08);
  --ombra-alta: 0 2px 6px rgba(19, 26, 54, .08), 0 26px 60px rgba(19, 26, 54, .20);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nebbia);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--notte-chiara); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--luna); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- testo ---------- */
h1, h2, h3 {
  font-family: var(--titoli); font-weight: 400; line-height: 1.1;
  letter-spacing: -.012em; margin: 0 0 .5em; color: var(--notte); text-wrap: balance;
}
h1 { font-size: clamp(34px, 7.2vw, 58px); }
h2 { font-size: clamp(28px, 4.8vw, 42px); }
h3 { font-size: clamp(20px, 2.8vw, 24px); line-height: 1.2; }
p { margin: 0 0 1em; }
.occhiello {
  display: block; margin: 0 0 14px;
  font: 600 12.5px/1.2 var(--testo); letter-spacing: .14em; text-transform: uppercase; color: var(--notte-chiara);
}
.introduzione { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; color: var(--tenue); max-width: 34em; }
.piccolo { font-size: 14px; line-height: 1.5; color: var(--tenue); }
.centro { text-align: center; }
.centro .introduzione { margin-left: auto; margin-right: auto; }

/* ---------- impianto ---------- */
.contenitore { max-width: var(--largo); margin: 0 auto; padding: 0 22px; }
.stretto { max-width: var(--stretto); margin: 0 auto; padding: 0 22px; }
.sezione { padding: clamp(56px, 9vw, 104px) 0; }
.sezione-carta { background: var(--carta); }
.sezione-notte {
  position: relative; overflow: hidden; color: #E6E8F4;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(244, 195, 90, .14), transparent 62%),
    linear-gradient(180deg, var(--notte) 0%, var(--notte-fonda) 100%);
}
.sezione-notte h1, .sezione-notte h2, .sezione-notte h3 { color: #FFF8EA; }
.sezione-notte .occhiello { color: var(--luna); }
.sezione-notte .introduzione, .sezione-notte .piccolo { color: #BFC4DE; }
.sezione-notte a { color: var(--luna-velo); }
.sezione-notte > * { position: relative; }
.stelle::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, #FFF 50%, transparent 51%),
    radial-gradient(1px 1px at 132px 88px, #FFF 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 198px 18px, #FCEFCB 50%, transparent 51%),
    radial-gradient(1px 1px at 70px 160px, #FFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 250px 130px, #FFF 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 60px, #FCEFCB 50%, transparent 51%);
  background-size: 320px 190px;
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 30;
  background: rgba(239, 239, 246, .88);
  -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid rgba(214, 216, 232, .8);
}
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; }
.logo {
  display: inline-flex; align-items: center; gap: .2em; white-space: nowrap;
  font-family: var(--titoli); font-size: 23px; line-height: 1; color: var(--notte); text-decoration: none; letter-spacing: -.01em;
}
.logo svg { width: .66em; height: .66em; transform: translateY(-.24em); flex: none; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a:not(.bottone) { color: var(--inchiostro); text-decoration: none; font-weight: 500; font-size: 15.5px; }
.menu a:not(.bottone):hover { color: var(--notte-chiara); }
.menu .bottone { padding: 10px 18px; min-height: 42px; font-size: 15px; }
@media (max-width: 760px) { .menu .solo-largo { display: none; } .logo { font-size: 21px; } }

/* ---------- pulsanti ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font: 600 17px/1.15 var(--testo); text-decoration: none; border: 0; border-radius: 999px;
  padding: 16px 28px; min-height: 56px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bottone:active { transform: translateY(1px); }
.bottone-luna { background: var(--luna); color: var(--notte-fonda); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px rgba(217, 164, 58, .32); }
.bottone-luna:hover { background: #F7CE70; }
.bottone-notte { background: var(--notte); color: #FFF8EA; box-shadow: 0 10px 24px rgba(30, 42, 82, .22); }
.bottone-notte:hover { background: var(--notte-chiara); }
.bottone-vuoto { background: transparent; color: var(--notte); box-shadow: inset 0 0 0 1.5px var(--linea); }
.bottone-vuoto:hover { box-shadow: inset 0 0 0 1.5px var(--notte-chiara); }
.sezione-notte .bottone-vuoto { color: #FFF8EA; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.bottone-largo { width: 100%; }
.bottone .tenue-nel-bottone { font-weight: 500; opacity: .72; }
.bottone[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sotto-bottone { font-size: 14px; color: var(--tenue); margin: 10px 0 0; }

/* ---------- apertura (hero) ---------- */
.apertura { padding: clamp(26px, 5vw, 64px) 0 clamp(48px, 8vw, 96px); }
.apertura .contenitore { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .apertura .contenitore { grid-template-columns: 1.08fr .92fr; } }
.apertura h1 { margin-bottom: .38em; }
.apertura .introduzione { margin-bottom: 26px; }

/* la foto ad arco: la finestra della cameretta */
.arco { position: relative; border-radius: 999px 999px 28px 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--notte); box-shadow: var(--ombra-alta); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.arco-cornice { position: relative; max-width: 460px; margin: 0 auto; width: 100%; }
.bollino {
  position: absolute; left: -10px; bottom: 34px; z-index: 2; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; background: var(--luna); color: var(--notte-fonda);
  box-shadow: 0 14px 30px rgba(19, 26, 54, .25); transform: rotate(-8deg);
  font: 600 13px/1.15 var(--testo);
}
.bollino strong { display: block; font: 400 27px/1 var(--titoli); margin: 2px 0; }

/* ---------- passi ---------- */
.passi { display: grid; gap: 16px; counter-reset: passo; margin-top: 34px; }
@media (min-width: 820px) { .passi { grid-template-columns: repeat(3, 1fr); } }
.passo { background: var(--carta); border-radius: var(--raggio); padding: 26px 24px 22px; box-shadow: var(--ombra); }
.passo::before {
  counter-increment: passo; content: counter(passo);
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  background: var(--luna-velo); color: var(--notte); font: 700 19px/1 var(--testo);
}
.passo h3 { margin-bottom: .35em; }
.passo p { margin: 0; color: var(--tenue); }

/* ---------- schede e griglie ---------- */
.griglia { display: grid; gap: 18px; }
@media (min-width: 760px) { .griglia-2 { grid-template-columns: repeat(2, 1fr); } .griglia-3 { grid-template-columns: repeat(3, 1fr); } }
.scheda { background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.scheda h3 { margin: 0; }
.scheda p { margin: 0; color: var(--tenue); }
.scheda .vai { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; }
.scheda .vai::after { content: " →"; }
.prezzo { font: 600 15.5px/1 var(--testo); color: var(--notte); }
.etichetta {
  align-self: flex-start; font: 600 11.5px/1 var(--testo); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; background: var(--salvia-velo); color: var(--salvia);
}
.etichetta-luna { background: var(--luna-velo); color: #7A5A12; }
.scheda-foto { padding: 0; overflow: hidden; }
.scheda-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.scheda-foto .dentro { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* elenco con lune piccole */
.elenco-lune { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.elenco-lune li { position: relative; padding-left: 30px; }
.elenco-lune li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset -4px -1px 0 0 var(--luna); transform: rotate(-20deg);
}

/* ---------- due colonne con foto ---------- */
.affianco { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 880px) { .affianco { grid-template-columns: 1fr 1fr; } .affianco-inverso > :first-child { order: 2; } }
.foto-tonda { border-radius: 28px; overflow: hidden; box-shadow: var(--ombra-alta); }
.foto-tonda img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---------- prezzo ---------- */
.riquadro-prezzo { background: var(--carta); border-radius: 28px; box-shadow: var(--ombra-alta); padding: clamp(24px, 4vw, 40px); color: var(--inchiostro); }
.riquadro-prezzo .cifra { font: 400 clamp(46px, 8vw, 64px)/1 var(--titoli); color: var(--notte); }
.riquadro-prezzo .cifra small { font: 500 16px var(--testo); color: var(--tenue); margin-left: 6px; }

/* ---------- domande ---------- */
.domande details { background: var(--carta); border-radius: 16px; box-shadow: var(--ombra); margin-bottom: 10px; padding: 0 22px; }
.domande summary { list-style: none; cursor: pointer; position: relative; padding: 18px 34px 18px 0; font-weight: 600; font-size: 17px; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: 0; top: 13px; font: 400 27px/1 var(--titoli); color: var(--notte-chiara); transition: transform .2s ease; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { color: var(--tenue); margin: 0 0 18px; }

/* ---------- modulo email ---------- */
.campo { width: 100%; font: 400 17px/1.3 var(--testo); padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--linea); background: #FFF; color: var(--inchiostro); }
.campo:focus { outline: none; border-color: var(--notte-chiara); box-shadow: 0 0 0 4px rgba(52, 69, 125, .14); }

/* ---------- piede ---------- */
.piede { background: var(--notte-fonda); color: #B6BAD4; padding: 52px 0 40px; font-size: 14.5px; }
.piede .logo { color: #FFF8EA; font-size: 26px; }
.piede a { color: #E3E5F3; }
.piede .collegamenti { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0; }
.piede .legale { font-size: 12.5px; line-height: 1.55; color: #8C91B0; max-width: 62em; margin: 0; }

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