/* Home V2 (desktop): sezioni nuove, schede di s09, anchor. Generato a mano.
   Le regole delle sezioni nuove valgono a ogni larghezza (il telefono V2 non e' ancora cominciato);
   le schede di s09 solo da 768 px in su, cosi' la s09 del telefono resta quella congelata. */
:root {
  --crema-v2: #f5f4ec;           /* il crema delle foto della Home al confine */
  --cielo-v2: #dfe8f2;
  --kreo-giallo: #f9c608;
  --kreo-viola: #3e11fd;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ancora { height: 0; }

/* ---------------------------------------------------------------- pezzi comuni */
.st .fascia-v2 { height: calc(var(--h) * var(--u)); background: var(--c); }
.st .filo-v2 { height: 1px; background: rgba(172,156,141,0.6); }
.st .filo-v2.filo-scuro { background: rgb(172,156,141); }
.st .filo-v2.filo-chiaro { background: rgba(212,187,162,0.28); }
.st .filo-v2.filo-lista { background: rgba(88, 100, 120, .16); }
.st .filo-v2-v { width: 1px !important; height: calc(var(--h) * var(--u)); background: rgba(172,156,141,0.6); }
.st .filo-v2-v.filo-chiaro { background: rgba(212,187,162,0.22); }
.st .foto-v2 { display: block; height: calc(var(--h) * var(--u)); overflow: hidden; }
.st .foto-v2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tipo-display.chiaro { color: rgb(239,236,233); }
#per-chi-e h2, #per-chi-e h3, #dimensioni h2, #health-coaching h2, #health-coaching h3, #chi-sono h2, #chi-sono h3 { margin: 0; }

/* ---------------------------------------------------------------- Per chi è */
.elenco-v2 { list-style: none; margin: 0; padding: 0; }
.voce-v2 { list-style: none; display: grid; grid-template-columns: calc(34 * var(--u)) 1fr; color: rgb(31,23,21); }
.voce-v2 span:first-child { color: rgb(97,12,39); }
.hanno-v2 { font-weight: 500; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Le 6 dimensioni: lettere grandi, niente numeri */
.dimensioni-v2 { list-style: none; margin: 0; padding: 0; }
.dimensione-v2 { list-style: none; }
.lettera-v2 { display: block; height: calc(118 * var(--u)); font-family: var(--font-titoli); font-weight: 400; color: rgb(212,187,162);
  font-size: calc(130 * var(--u)); line-height: 1; letter-spacing: -.01em; margin-left: calc(-4 * var(--u)); }
.nome-v2 { margin: 0; font-family: var(--font-testo); font-weight: 500; color: rgb(239,236,233); font-size: calc(19.5 * var(--u));
  line-height: 1.3; letter-spacing: .005em; }
.testo-v2 { margin: calc(8 * var(--u)) 0 0; font-family: var(--font-testo); color: #d5dad4; font-size: calc(15 * var(--u));
  line-height: 1.45; letter-spacing: .003em; }

/* ---------------------------------------------------------------- Health Coaching */
.cerchio-v2 { display: grid; place-items: center; height: calc(58 * var(--u)); border-radius: 50%; background: var(--c); }
.cerchio-v2 svg { width: 44%; height: 44%; fill: none; stroke: rgb(74,63,58); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Chi sono: la foto si sostituisce cambiando il file */
.foto-chi-sono { --fuoco: 50% 22%; }
.foto-chi-sono img { object-position: var(--fuoco); }
.numero-v2 { color: rgb(31,23,21); letter-spacing: .04em; }

/* ---------------------------------------------------------------- Kreo Agency: credito, accenti del marchio Kreo */
.logo-kreo { display: block; color: #141414; line-height: 0; }
.logo-kreo svg { width: 100%; height: auto; }
.st .cta.cta-kreo { background: var(--kreo-viola) !important; color: #fff; justify-content: space-between;
  padding: 0 calc(22 * var(--u)) 0 calc(26 * var(--u)); white-space: nowrap; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(62, 17, 253, .22); }
.st .cta.cta-kreo:hover { background: #2f06d6 !important; }

/* ---------------------------------------------------------------- s09: la fascia dei tre percorsi diventa tre schede */
@media (min-width: 768px) {
  #s09 .divisore-s09 { display: none; }
  #s09 .percorso-s09 { --y: 690 !important; --w: 420 !important; height: calc(300 * var(--u));
    display: grid; grid-template-columns: calc(64 * var(--u)) 1fr; grid-template-rows: auto auto 1fr; column-gap: calc(22 * var(--u));
    align-items: center; text-align: left; box-sizing: border-box; padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(24 * var(--u));
    background: #faf9f5; border: 1px solid rgba(172,156,141,0.6); border-radius: calc(4 * var(--u));
    box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(60, 70, 60, .05); transition: box-shadow .2s, border-color .2s; }
  #s09 .percorso-s09:nth-of-type(1) { --x: 102.4 !important; }
  #s09 .percorso-s09:nth-of-type(2) { --x: 558 !important; }
  #s09 .percorso-s09:nth-of-type(3) { --x: 1013.6 !important; }
  #s09 .percorso-s09:hover { border-color: rgba(172,156,141,0.6); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(60, 70, 60, .1); }
  #s09 .cerchio-s09 { width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: 0; }
  #s09 .titolo-s09 { margin: 0; display: flex; flex-direction: column-reverse; align-items: flex-start;
    font-size: calc(31 * var(--u)); line-height: 1; letter-spacing: .01em; }
  #s09 .titolo-s09 br { display: none; }
  #s09 .durata-s09 { margin-top: calc(10 * var(--u)); font-family: var(--font-testo); font-size: calc(12.5 * var(--u));
    letter-spacing: .3em; text-transform: uppercase; color: #4a4f48; }
  #s09 .payoff-s09 { grid-column: 1 / -1; align-self: start; margin-top: calc(22 * var(--u)); padding-top: calc(20 * var(--u));
    border-top: 1px solid rgb(172,156,141); border-image: linear-gradient(90deg, #8d9685 calc(42 * var(--u)), transparent 0) 1;
    font-family: var(--font-titoli); color: rgb(31,23,21); font-size: calc(22 * var(--u)); line-height: 1.2; letter-spacing: -.02em; }
  #s09 .link-s09 { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; justify-content: space-between;
    padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid rgb(172,156,141); text-decoration: none; color: #3a3f3a;
    font-family: var(--font-testo); font-size: calc(12 * var(--u)); letter-spacing: .3em; text-transform: uppercase; }
  #s09 .link-s09 svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; }
  #s09 .link-s09::after { content: ""; position: absolute; inset: 0; }          /* tutta la scheda e' cliccabile */
  #s09 .percorso-s09:hover .link-s09 { color: rgb(31,23,21); border-bottom-color: currentColor; }
}
/* la foto Kreo entra dal crema di s11 senza bordo */
.st .foto-kreo img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }