/* ============================================================================
   Endoplan — portale: base, font, stati hover e regole responsive.
   Il resto della grafica sta negli style inline delle pagine generate
   (fedeli al progetto originale): qui c'è solo ciò che l'HTML non può fare
   da sé — hover, menu, drawer e i cambi di layout per larghezza schermo.
   Breakpoint: 1180px = la barra di navigazione diventa hamburger (era 1040: col
               menu a 16px la riga non ci stava piu' e l'header andava a capo)
               900px  = le colonne affiancate si impilano
   ========================================================================== */

/* --- Inter + Epilogue self-hosted: nessuna richiesta ai server Google ------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/epilogue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/epilogue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   FONDAMENTA (30 lug 2026) — colore, testo, spazio.

   Nascono dal confronto misurato con flo.health: il portale usava 27 misure di
   carattere diverse in 2.731 dichiarazioni, con il 43% del testo sotto i 14px,
   e cambiava argomento ogni 193px. Non era troppo testo: era testo piccolo e
   fitto, senza gerarchia. Da qui in avanti si passa SEMPRE da queste classi:
   se un testo "ha bisogno" di una misura che non c'è, è sbagliato il ruolo,
   non la misura.

   Scala: 44 / 28 / 19 / 18 / 16 / 13 / 12 — sette misure, una per ruolo.
   Spazio: multipli di 4 (4 8 12 16 24 32 48 64 96), niente valori a occhio.
   ========================================================================== */
:root {
  /* Colore: dodici nomi al posto dei 38 esadecimali sparsi nel generatore.
     I VALORI non stanno più qui: sono quelli dell'app, che arrivano da
     `tema.css` (generato da estrai-tema.mjs → tema-app.mjs). Il sito non ha
     più una sua idea di che colore è una card: la chiede al prodotto.

     Le tre eccezioni sono dichiarate qui sotto: sono i colori che il sito ha
     tarato PER IL CONTRASTO su carta crema, e sull'app non esiste il problema
     perché lì lo stesso ruolo sta su superfici diverse. */
  --ep-ground: var(--app-grad3);     /* fondo della pagina */
  --ep-paper: var(--app-card-bg);    /* carta delle schede */
  --ep-ink: var(--app-text);         /* testo principale */
  --ep-ink-soft: var(--app-muted);   /* testo secondario */
  /* Era rgba(17,17,17,0.14): un filetto NERO. L'app usa un perimetro lilla
     appena accennato e lascia il lavoro all'ombra — è la differenza fra una
     card e un rettangolo disegnato. */
  --ep-line: var(--app-card-stroke); /* perimetro delle schede */
  --ep-filo: var(--app-hairline);    /* separatore DENTRO una scheda (0.07) */
  --ep-lilla: var(--app-purple);     /* accento chiaro (pallini, decori) */
  --ep-lilla-deep: #6B4EA8;          /* ⚠ NON app: `deepPurple` è #6E4E97, qui serve più scuro per l'AA su crema */
  --ep-lilla-tint: var(--app-lilac-tint);   /* fondo tenue lilla */
  --ep-verde: var(--app-green);      /* accento verde (etichette) */
  --ep-verde-deep: #4F5C3B;          /* ⚠ NON app: `greenDeep` è #5E6B46, qui serve più scuro per l'AA su crema */
  --ep-verde-tint: var(--app-sage-tint);    /* fondo tenue verde */
  --ep-notte: #12101C;               /* ⚠ NON app: fondo scuro delle fasce editoriali del sito */

  /* Spazio */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
}

/* --- I sette ruoli del testo ------------------------------------------------ */
/* Il titolo di pagina SCENDE da 56 a 44px: il problema non era che fosse
   piccolo, era il rapporto 4:1 con un corpo da 13,5. Ora è 2,4:1. */
.t-h1 { margin: 0; font-size: clamp(34px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.t-h2 { margin: 0; font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
/* Una scheda non è mai più LEGGERA della sezione che la contiene: più piccola sì
   (19 contro 28), più leggera no — era la gerarchia rovesciata della home. */
.t-h3 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.t-body { margin: 0; font-size: clamp(17px, 1.5vw, 18px); line-height: 1.6; font-weight: 400; }
.t-small { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; }
.t-note { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 400; }
.t-label { margin: 0; font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
/* L'ottavo ruolo, e l'unico in grazie di tutto il portale: la citazione della
   Mente. È deliberato — lì dentro parla una voce, non l'interfaccia. */
.t-quote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 21px; line-height: 1.55; }
/* La riga di lettura: 62-68 caratteri. Sotto i 45 l'occhio ricomincia troppo
   presto (la home stava a 48), sopra i 75 si perde il ritorno a capo.
   NB: 52ch e non 64 — l'unita' `ch` misura la larghezza dello zero, che in Inter
   e' molto piu' larga della lettera media: 64ch davano 80 caratteri veri. */
.t-measure { max-width: 52ch; }
.c-soft { color: var(--ep-ink-soft); }
.c-verde { color: var(--ep-verde-deep); }
.c-lilla { color: var(--ep-lilla-deep); }

/* --- Il respiro ------------------------------------------------------------- */
/* 96px sopra e sotto ogni sezione: con questi, e con un solo titolo per sezione,
   la distanza fra due titoli sta sopra i 450px richiesti. */
.sec { padding: var(--sp-24) 0; }
.sec-first { padding: var(--sp-16) 0 var(--sp-24); }   /* la prima: l'header è già sopra */
.sec-band { padding: var(--sp-16) 0; }                 /* fasce a fondo pieno: separa il colore */
@media (max-width: 899px) {
  .sec { padding: var(--sp-16) 0; }
  .sec-first { padding: var(--sp-12) 0 var(--sp-16); }
  .sec-band { padding: var(--sp-12) 0; }

  /* LA TESTA DI PAGINA RESPIRA (31 lug 2026) — «qua è tutto appiccicato, dai
     più aria». Su telefono le tre pile della hero usavano le stesse distanze
     del desktop, dove però il titolo sta su una riga o due: a 34px e su tre
     righe, occhiello, titolo, testo, pulsante e nota si toccavano tutti.
     Qui le distanze salgono di un gradino della scala (16→24, 32→48, 12→16) e
     l'interlinea del titolo si apre: 1,08 è una misura da 44px, a 34 le righe
     si scontrano fra accenti e virgolette basse. */
  .sec-first .t-h1 { line-height: 1.16; }
  .sec-first .stack-3 { gap: var(--sp-4); }
  .sec-first .stack-4 { gap: var(--sp-6); }
  .sec-first .stack-8 { gap: var(--sp-12); }
}
/* Le distanze DENTRO una sezione: sempre a griglia, mai margini uno per uno. */
.stack-2 { display: grid; gap: var(--sp-2); }
.stack-3 { display: grid; gap: var(--sp-3); }
.stack-4 { display: grid; gap: var(--sp-4); }
.stack-6 { display: grid; gap: var(--sp-6); }
.stack-8 { display: grid; gap: var(--sp-8); }
/* Testa di sezione: titolo, occhiello e riga d'appoggio, sempre uguale. */
.sec-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  /* Era 300: un peso leggero sotto i 28px non è elegante, è sbiadito — e il
     grosso del testo del portale sta sotto quella misura. */
  font-weight: 400;
  color: var(--ep-ink);
  line-height: 1.6;
  background: var(--ep-ground);
}
/* Lo sfondo sfumato è un layer fisso dietro tutto: `background-attachment:fixed`
   su iOS fa scattare lo scroll e a volte disegna la sfumatura sbagliata.

   È lo SFONDO DI SCHERMATA DELL'APP (components/ScreenGradient.tsx, tappe
   grad1/grad2/grad3): bianco in alto → lilla tenue → grigio chiaro. Prima il
   sito aveva una sua sfumatura molto più carica (#F8EDF6 → #EAD9F0): su 390px
   di telefono un lilla pieno regge, su 1400px di desktop diventa una parete
   viola su cui le card crema affogano. Qui la profondità la fanno le ombre. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--app-sfondo);
  pointer-events: none;
}

/* Il contenitore di pagina: `clip` taglia i decori che sporgono di lato SENZA
   diventare un contenitore di scorrimento — con `hidden` l'header appiccicato
   non si appiccicava più (il position:sticky non aveva niente a cui agganciarsi). */
.page { min-height: 100vh; position: relative; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: #5E6B46; text-decoration: none; }
a:hover { color: #111; }
button { font-family: inherit; cursor: pointer; }
::selection { background: #E3D4F7; }
:focus-visible { outline: 2px solid #A77FE0; outline-offset: 2px; }

/* L'alone dietro alla pagina: come quello della schermata Analisi nell'app,
   vaga lento e respira invece di fare avanti-indietro. */
@keyframes epfloat {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-5vmax, 3vmax) scale(1.08); }
  50%  { transform: translate(-2vmax, 7vmax) scale(0.96); }
  75%  { transform: translate(4vmax, 3vmax) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes epbreath { 0%, 100% { transform: scale(0.94); opacity: .5; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ep-blob { animation: none !important; }
}

/* Ancore sotto l'header appiccicato (che su desktop porta anche la sotto-barra) */
[id] { scroll-margin-top: 120px; }
@media (max-width: 1179px) {
  [id] { scroll-margin-top: 78px; }
  [data-sub] [id] { scroll-margin-top: 122px; }
  [data-sub] .progress { top: 109px; }
}

/* `hidden` deve vincere sugli style inline (drawer e avviso lingua) */
[hidden] { display: none !important; }

/* --- Contenitore standard -------------------------------------------------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4.5vw, 28px); }

/* --- Card che si solleva al passaggio del mouse ---------------------------- */
/* Solo dove esiste un mouse: sul telefono l'effetto "hover" rimane appiccicato
   al dito dopo il tocco. */
/* Al passaggio la card sale di un livello: dall'elevazione `card` a quella
   `raisedField` — nell'app è il materiale dei campi che "escono" dalla pagina.
   Non è un'ombra inventata per il web: è il gradino sopra, già tarato. */
@media (hover: hover) {
  .lift { transition: box-shadow .22s ease, transform .22s ease; }
  .lift:hover { box-shadow: var(--om-raised-field); transform: translateY(-2px); }
}

/* --- Navigazione: menu a tendina ------------------------------------------ */
.navitem { position: relative; }
.navitem > .menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 290px; padding: 10px;
  background: var(--ep-paper); border: 1px solid var(--ep-line); border-radius: var(--r-lg);
  box-shadow: var(--om-raised-field); display: grid; gap: 2px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.navitem:hover > .menu,
.navitem:focus-within > .menu,
.navitem[data-open="1"] > .menu { opacity: 1; visibility: visible; transform: none; }
.menu a { display: block; padding: 11px 13px; border-radius: 14px; }
.menu a:hover { background: #F4ECF8; }
.menu a b { display: block; font-size: 16px; font-weight: 700; color: var(--ep-ink); }
.menu a small { font-size: 13px; color: var(--ep-ink-soft); }
.navlink { padding: 9px 12px; border-radius: 999px; font-weight: 600; font-size: 16px; color: var(--ep-ink); opacity: .82; }
.navlink:hover, .navlink[aria-current="page"] { opacity: 1; background: rgba(255, 253, 249, 0.7); }
.navbtn {
  border: none; background: none; padding: 9px 12px; border-radius: 999px; font-weight: 600;
  font-size: 16px; color: var(--ep-ink); opacity: .82; display: flex; align-items: center; gap: 6px;
}
.navbtn:hover { opacity: 1; background: rgba(255, 253, 249, 0.7); }

/* --- Cambi di layout per larghezza (prima li faceva il JavaScript) -------- */
.only-wide { display: flex; }
.only-narrow { display: none; }
@media (max-width: 1179px) {
  .only-wide { display: none; }
  .only-narrow { display: grid; }
  /* La sotto-barra RESTA anche su telefono: dice dove sei e porta alle pagine
     sorelle senza aprire il menu (specifica mobile, schermata 03). */
  .subbar { font-size: 13px; }
}

.g-metodo { grid-template-columns: 220px minmax(0, 1fr); }
.g-side-right { grid-template-columns: minmax(0, 1fr) 320px; }
.g-chi { grid-template-columns: 300px minmax(0, 1fr); }
.g-storia { grid-template-columns: 200px minmax(0, 1fr); }
.g-blog { grid-template-columns: 220px minmax(0, 1fr); }
.g-homeb { grid-template-columns: minmax(0, 1fr) 300px; }
.sticky { position: sticky; top: 120px; }
.portrait { height: auto; }
.blog-body { padding: 20px 24px 20px 0; }

/* Ricetta: il punteggio sta nella colonna di fianco su desktop e subito sotto
   il titolo su telefono (prima finiva in fondo alla pagina, dopo i passaggi). */
.g-ricetta { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "intro side" "rest side"; }
.rec-intro { grid-area: intro; }
.rec-side { grid-area: side; }
.rec-rest { grid-area: rest; }

@media (max-width: 899px) {
  .g-metodo, .g-side-right, .g-chi, .g-storia, .g-blog, .g-homeb { grid-template-columns: 1fr; }
  .g-ricetta { grid-template-columns: 1fr; grid-template-areas: "intro" "side" "rest"; }
  .sticky { position: static; }
  .portrait { height: clamp(240px, 52vw, 360px); }
  .blog-body { padding: 0 20px 22px; }
}

/* --- Telefono: header su una riga sola ------------------------------------- */
/* Con le pillole IT/EN la barra andava a capo: 97px di header appiccicato su
   812 di schermo. Su telefono la scelta lingua resta in fondo alla pagina. */
@media (max-width: 1179px) {
  .langswitch { display: none; }
  .solo-desktop-inline { display: none; }
  header { backdrop-filter: none !important; background: rgba(248, 237, 246, 0.97) !important; }
}

/* SU TELEFONO «SCARICA» STA IN UN POSTO SOLO (31 lug 2026).
   Sotto i 900px compare la barra fissa in basso, che porta già il pulsante:
   quello nell'header era lo STESSO invito una seconda volta, a 20px dall'altro
   in verticale. Con header appiccicato + barra fissa se ne andavano 153px di
   schermo per dire due volte la stessa cosa, ed era metà del motivo per cui
   mockup e testo non stavano insieme.

   Il taglio è legato ESATTAMENTE al punto in cui compare la barra (899px), non
   a un valore scelto a occhio: sopra quella soglia la barra non c'è e il
   pulsante nell'header è l'unico, quindi resta. Chi arriva col menu a tutta
   pagina lo trova comunque: il drawer ha la sua `.drawer-cta`.
   Se un giorno la barra in basso sparisce, questa regola va tolta insieme.
   Insieme al pulsante se n'e' andata la regola che lo stringeva sotto i 400px:
   stava tutta dentro il campo in cui adesso non si vede, era codice morto. */
@media (max-width: 899px) {
  .cta-header { display: none !important; }
}

/* --- Telefono: meno lavoro per la scheda grafica --------------------------- */
/* Un cerchio sfumato di 56vmax con blur animato all'infinito fa scattare lo
   scorrimento sui telefoni: resta, ma fermo. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .ep-blob { animation: none !important; }
}

/* --- Telefono: cose da toccare col dito ----------------------------------- */
/* Liste di link (footer, fonti, sommario): su telefono servono righe alte
   almeno ~40px, altrimenti si sbaglia il link. */
.fcol, .linklist { display: grid; gap: 8px; }
@media (max-width: 899px) {
  .fcol, .linklist { gap: 0; }
  .fcol a, .linklist a { padding: 10px 0; }
  .arrowlink { display: inline-block; padding: 8px 0; }
  footer button[data-lang] { padding: 10px 6px !important; }
  .fbrand { padding: 8px 0; }
  /* iOS ingrandisce la pagina quando il testo del campo è sotto i 16px */
  input { font-size: 16px !important; }
  /* Footer: le tre liste di link su due colonne, altrimenti su telefono
     diventa una colonna lunghissima (1300px, piu' di uno schermo e mezzo). */
  .fgrid { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
}

/* --- Telefono: i segnaposto delle foto occupano meno schermo --------------- */
/* Finché le foto non ci sono, i riquadri a righe si mangiano tutta la pagina
   sul telefono: qui restano, ma piu' bassi. Quando arrivano le immagini vere
   basta togliere queste due regole. */
@media (max-width: 899px) {
  .ph { height: 108px !important; }
  .ph-big { height: 190px !important; }
}

/* Sommario "In questa pagina": colonna su desktop, striscia di chip che scorre
   su telefono (prima erano sei righe alte 20px prima del contenuto). */
.toc { display: grid; gap: 8px; padding-left: 14px; border-left: 1.5px solid var(--app-border-soft); }
@media (max-width: 899px) {
  .toc {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
    border-left: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc > span { display: none; }
  .toc a {
    flex: none; padding: 9px 15px; border: 1px solid var(--app-border-soft);
    border-radius: 999px; background: var(--ep-paper); white-space: nowrap;
  }
}

/* --- Nota "da completare": segnaposto visibile, come sul resto del sito --- */
.todo {
  background: #FFF6D6; border: 1px dashed #C8A93A; border-radius: 14px;
  padding: 12px 16px; font-size: 13px; font-weight: 400; color: #6B5714; line-height: 1.5;
}

/* --- Dettagli FAQ --------------------------------------------------------- */
details summary::-webkit-details-marker { display: none; }
details[open] summary span:first-child { background: var(--ep-lilla); border-color: var(--ep-lilla); }

/* --- Form (footer e professionisti) --------------------------------------- */
input::placeholder { color: #9A9A9A; }
.form-msg { margin: 8px 0 0; font-size: 13px; color: #5E6B46; font-weight: 400; }

/* ==========================================================================
   VERSIONE MOBILE (specifica "Navigazione da sito", 15 schermate a 390px)
   Gerarchia pensata per il pollice: un blocco per volta, CTA sempre in basso,
   testo 16px, cose da toccare da 44-52px.
   ========================================================================== */

/* --- Telaio del telefono attorno agli screenshot dell'app ----------------- */
.phone { display: block; width: 100%; margin: 0 auto; }
/* Telaio scuro, come un telefono vero: la scocca nera fa da cornice e la
   schermata dentro si stacca. Gli screenshot tengono la barra di stato —
   quello spazio in alto serve all'equilibrio della schermata. */
.phone-bezel {
  display: block; padding: 11px; border-radius: 44px;
  background: linear-gradient(150deg, #5A545F 0%, #1B1822 24%, #0C0A11 60%, #3A3442 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 22px 44px rgba(90, 60, 120, 0.22);
}
.phone-screen {
  display: block; position: relative; width: 100%; aspect-ratio: 390 / 844;
  overflow: hidden; border-radius: 33px; background: #F8EDF6;
}
.phone-screen img { width: 100%; height: auto; }
/* Quando la schermata è tagliata, il fondo sfuma invece di finire netto.
   Il taglio è una PROPORZIONE, non un'altezza in pixel: erano 430px (e 466 su
   telefono) tarati su una larghezza sola, e appena il telefono si rimpicciolisce
   quei pixel diventano spazio vuoto sotto la schermata invece che un taglio.
   390/559 è esattamente il rapporto che davano i 430px a 300px di larghezza. */
.phone-fade {
  height: auto; aspect-ratio: 390 / 559; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0) 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0) 97%);
}

/* NB: su telefono la misura del telaio NON si scrive in pixel — sta più in
   basso, nel blocco «copiato da Flo», ed è legata all'altezza dello schermo
   (`svh`) perché il problema è quanto schermo RESTA per le scritte, non quanto
   è larga la pagina. Era largo 300px: con la proporzione 390/844 diventava alto
   670, e fra header appiccicato e barra fissa restavano 130px — il mockup e il
   suo testo non si vedevano mai insieme. */

/* --- Home: griglia delle funzioni ---------------------------------------- */
/* LE FUNZIONI IN HOME — righe, non schede (30 lug 2026).
   Sei riquadri uguali erano un muro: nessuno dei sei pesava piu' degli altri,
   la griglia lasciava buchi a certe larghezze e su telefono diventava una fila
   di sei blocchi identici. Ora le funzioni stanno in TRE momenti — quello che
   segni, quello che ne viene fuori, e la Mente — e dentro ogni momento sono
   righe separate da un filetto. Una riga non ha altezza da pareggiare, non
   lascia celle vuote e si comporta uguale a 375 e a 1280: cambia solo dove sta
   l'etichetta del gruppo, di lato su schermo largo e sopra sul telefono. */
.g-funz { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.funz-testa { display: grid; gap: var(--sp-2); }
.funz-righe { display: grid; }
.funz-riga { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--ep-line); }
.funz-riga:first-child { border-top: none; padding-top: 0; }
/* Su schermo largo la colonna delle righe arriva a 912px: senza questo la
   descrizione correva per 110 caratteri, il doppio della misura di lettura. */
.funz-riga p { max-width: 52ch; }
.funz-dot { display: block; width: 9px; height: 9px; border-radius: 50%; margin-top: 9px; flex: none; }
.funz-mente { background: var(--ep-notte); color: #F3EFF9; border-radius: 20px; padding: var(--sp-6); }
@media (max-width: 899px) {
  .g-funz { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* Il filetto sopra la prima riga torna: senza l'etichetta di lato serve
     qualcosa che dica dove comincia il gruppo. */
  .funz-riga:first-child { border-top: 1px solid var(--ep-line); padding-top: var(--sp-4); }
}

/* --- Metodo: le tre idee in sintesi -------------------------------------- */
.sintesi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 40px; }
@media (max-width: 899px) { .sintesi { grid-template-columns: 1fr; } }

/* --- Pulsante a piena larghezza (telefono) ------------------------------- */
.cta-full {
  display: flex; align-items: center; justify-content: center; height: 54px;
  border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--app-pill-grad-from), var(--app-pill-grad-to)); box-shadow: var(--om-grad-pill);
}
.cta-full:hover { color: #fff; }

/* --- App: blocco schermata + testo --------------------------------------- */
/* I blocchi di /app.html. Le misure stavano negli style inline: da lì non si
   potevano cambiare su telefono (un attributo `style` batte il foglio), e
   servivano per copiare Flo. Ora sono classi. */
.app-block {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 3vw, 36px); align-items: center; padding: 22px;
}
.app-foto { width: 100%; max-width: 300px; margin: 0 auto; }
.app-tit { margin: 8px 0 0; font-weight: 300; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.02em; line-height: 1.2; }
.app-corpo { margin: 14px 0 0; font-size: 16px; line-height: 1.65; max-width: 60ch; }
.app-link { margin: 14px 0 0; font-size: 14px; }
.app-link a { font-weight: 700; }
@media (max-width: 899px) { .app-block { grid-template-columns: 1fr; } }

/* Il giro dentro l'app (home): stesse misure, stessa ragione. */
.tour-tit { margin-top: 8px; }
.tour-corpo { margin-top: 12px; max-width: 46ch; }

/* --- Community: card grande su desktop, riga compatta su telefono -------- */
@media (max-width: 899px) {
  .com-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
  .com-thumb { width: 70px; height: 70px !important; border-radius: 18px; flex: none; }
  .com-thumb code { display: none; }
  .com-body { padding: 0 !important; min-width: 0; }
  .com-note { display: none; }
}

/* --- Approfondimenti: solo il primo articolo porta l'immagine ------------ */
@media (max-width: 899px) {
  .g-blog:not(:first-of-type) .ph { display: none; }
}

/* --- Articolo: barra di avanzamento della lettura ------------------------ */
.progress { position: sticky; top: 64px; z-index: 40; height: 3px; background: var(--ep-filo); margin-bottom: 18px; }
.progress i { display: block; height: 3px; width: 0; background: var(--ep-lilla); }
@media (min-width: 1180px) { .progress { top: 108px; } }

/* --- Glossario: indice alfabetico ---------------------------------------- */
.alfabeto { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.alfabeto::-webkit-scrollbar { display: none; }
.alfabeto a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; font-size: 14px; font-weight: 700; color: #111;
  background: var(--ep-paper); border: 1px solid var(--ep-line); flex: none;
}
.alfabeto a:hover { background: #111; color: #fff; }

/* --- Barra fissa in basso (solo telefono) -------------------------------- */
.bottombar { display: none; }
@media (max-width: 899px) {
  .bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ep-paper) 96%, transparent); border-top: 1px solid rgba(120, 90, 150, 0.18);
  }
  body { padding-bottom: 88px; }
}

/* --- Menu a tutta pagina (le tendine desktop diventano gruppi aperti) ---- */
.drawer {
  border-top: 1px solid rgba(120, 90, 150, 0.16); background: var(--ep-paper);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.drawer-top { display: none; }
.drawer-body { padding: 18px clamp(18px, 4.5vw, 28px) 26px; display: grid; gap: 22px; }
.drawer-cta {
  display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 999px;
  font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--app-pill-grad-from), var(--app-pill-grad-to)); box-shadow: var(--om-grad-pill);
}
.drawer-cta:hover { color: #fff; }
@media (max-width: 1179px) {
  .drawer {
    position: fixed; inset: 0; z-index: 80; max-height: none; height: 100dvh;
    border-top: 0; display: flex; flex-direction: column;
  }
  .drawer-top {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 14px clamp(18px, 4.5vw, 28px); border-bottom: 1px solid rgba(120, 90, 150, 0.16);
  }
  .drawer-body { flex: 1; overflow-y: auto; }
}

/* --- Storie: la card scura -------------------------------------------- */
.storia-scura .portrait { display: none; }
.storia-scura { grid-template-columns: 1fr !important; }

/* --- Telefono: misure di lettura e cose da toccare ---------------------- */
@media (max-width: 899px) {
  .lettura p { font-size: 17px; }
  .lettura h2 { font-size: 21px; }
  .toc { margin-bottom: 4px; }
}

/* ==========================================================================
   DEMO "componi un piatto" (home, sezione #prova)
   Ripresa dalla landing e riportata nel linguaggio del portale: niente emoji,
   pallino colorato per banda, nessun blocco a pagamento.
   ========================================================================== */
.demo {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
  grid-template-areas: "scelte piatto" "scelte coda"; align-items: start;
  background: var(--ep-paper); border: 1px solid var(--ep-line);
  border-radius: 26px; padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--om-card);
}
@media (max-width: 760px) { .demo { grid-template-columns: 1fr; gap: var(--sp-6); } }

.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.d-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ep-line); border-radius: 999px; background: var(--ep-ground);
  font-size: 15px; font-weight: 600; color: var(--ep-ink); transition: background .14s, border-color .14s;
}
.d-chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.d-chip:hover { border-color: rgba(17, 17, 17, 0.34); }
.d-chip.on { background: var(--ep-lilla-tint); border-color: var(--ep-lilla); color: var(--ep-lilla-deep); }

/* Il piatto è un INCAVO, non un tratteggio: nell'app i campi in cui si mette
   un valore usano `pressedWell` — un'ombra interna uniforme, senza offset.
   Le pillole dentro sono `pillRaised`, lo stesso materiale delle pill bianche
   dei sintomi nel Tracker: escono dalla superficie che le contiene. */
.demo-plate {
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  min-height: 96px; margin-top: 12px; padding: 14px;
  border: none; border-radius: var(--r-lg);
  background: var(--app-surface-alt); box-shadow: var(--om-pressed-well);
}
.p-item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: none; border-radius: var(--r-pill); background: var(--app-surface);
  box-shadow: var(--om-pill-raised);
  font-size: 15px; font-weight: 600; color: var(--ep-ink);
}
.p-item .rm { font-size: 17px; line-height: 1; color: var(--ep-ink-soft); }
.p-item:hover .rm { color: var(--ep-ink); }

.demo-score { display: flex; align-items: center; gap: 16px; }
.demo-num { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.demo-band {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

.demo > .stack-6 { grid-area: scelte; }
.demo-vivo { grid-area: piatto; }
.demo-coda { grid-area: coda; }
.demo-piu { padding-top: 16px; border-top: 1px solid var(--ep-line); }
.demo-piu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.demo-piu-chips span {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--ep-ground); border: 1px solid var(--ep-line);
  font-size: 13px; font-weight: 600; color: var(--ep-ink-soft);
}

/* Il consiglio è una mossa da toccare: si applica da sola e mostra quanto vale */
/* La pill d'azione dei consigli: nell'app è `pillAccent` — fondo lilla pieno
   con testo indaco. Non è una superficie, è un accento SOPRA la pagina. */
.demo-mossa {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border: none; border-radius: var(--r-lg);
  background: var(--app-pill-accent); color: var(--app-pill-accent-text);
  box-shadow: var(--om-soft-button);
  transition: transform .18s ease, box-shadow .18s ease;
}
.demo-mossa:hover { box-shadow: var(--om-raised-field); transform: translateY(-1px); }
.demo-mossa:active { transform: none; }
.demo-mossa-testo { display: grid; gap: 3px; min-width: 0; flex: 1; }
.demo-mossa-testo b { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
/* Su fondo lilla pieno il grigio secondario sparisce: si scurisce l'indaco
   invece di spegnerlo (stessa mossa dell'app sui testi sopra pillAccent). */
.demo-mossa-testo small { font-size: 13px; line-height: 1.45; color: var(--app-pill-accent-text); opacity: .78; }
.demo-mossa-bonus {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 999px; background: var(--ep-verde); color: #fff;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* I quattro classici da cui partire: stessa pillola, un filo più marcata */
.d-ricetta { font-weight: 700; background: var(--ep-paper); }
.d-ricetta.on { background: var(--ep-verde-tint); border-color: var(--ep-verde); color: var(--ep-verde-deep); }

/* ==========================================================================
   ANALISI — le letture delle registrazioni (home, fascia scura)
   Grafici fatti con dei div: restano nitidi e si adattano alla larghezza.
   ========================================================================== */
.letture { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
.lettura-card {
  margin: 0; display: grid; gap: 16px; padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; background: rgba(255, 255, 255, 0.04);
}
.lettura-manca { border-style: dashed; background: none; }
.lettura-testa { display: flex; gap: 12px; align-items: flex-start; }
.lettura-pallino { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 7px; }
.lettura-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lettura-conf {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  background: rgba(185, 154, 226, 0.18); color: #D8C8F0;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

.graf { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.28); }
.graf-tit { color: rgba(243, 239, 249, 0.72); font-weight: 600; }
.graf-tit span { color: rgba(243, 239, 249, 0.4); font-weight: 400; }
.graf-nota { color: rgba(243, 239, 249, 0.5); }
.graf-riga { display: grid; grid-template-columns: 9em 1fr 2.4em; align-items: center; gap: 10px; }
.graf-et { font-size: 12.5px; color: rgba(243, 239, 249, 0.72); }
.graf-barra { display: block; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.graf-barra i { display: block; height: 100%; border-radius: 999px; }
.graf-val { font-size: 14px; font-weight: 800; color: #F3EFF9; font-variant-numeric: tabular-nums; text-align: right; }
.graf-colonne { display: flex; align-items: flex-end; gap: 12px; height: 132px; }
.graf-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.graf-col i { display: block; width: 100%; max-width: 42px; border-radius: 8px 8px 4px 4px; }
.graf-col .graf-val { text-align: center; }

/* ==========================================================================
   IL GIRO DENTRO L'APP (home)
   Il telefono resta fermo a sinistra e cambia schermata mentre scorri i
   blocchi. Su telefono niente colonna ferma: ogni blocco porta la sua.
   ========================================================================== */
.tour { display: grid; grid-template-columns: min(400px, 32vw, calc((100vh - 170px) / 2.164)) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tour-telefono { position: sticky; top: 92px; }
.tour-telefono .phone-screen { background: #12101C; }
.tour-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; will-change: transform; }
.tour-img img { width: 100%; height: auto; }
.tour-img.on { opacity: 1; }
.tour-blocco { min-height: 96vh; display: flex; flex-direction: column; justify-content: center; }
/* All'ultimo blocco serve spazio SOTTO, altrimenti la pagina finisce prima che
   arrivi al centro del telefono e resta più in basso. */
.tour-testi { padding-bottom: 22vh; }
.tour-mobile { display: none; }

@media (prefers-reduced-motion: reduce) { .tour-img { transition: none; } }

/* ==========================================================================
   SU TELEFONO IL BLOCCO-SCHERMATA È COPIATO DA FLO (31 lug 2026)

   Andrea: «segui Flo pedissequamente, nelle proporzioni, nella forma che
   contiene il mockup, dimensioni font, spazi». Misurato sullo screenshot di
   flo.health, riportato in px CSS su un telefono da 402×874:

     mockup            183 × 395  (il 45% dell'altezza dello schermo)
     stacco sotto      32
     titolo            20px, grassetto, nero, centrato, interlinea 1.25
     stacco            20
     testo             17px, interlinea 1.41, grigio, centrato

   Le due differenze da Flo sono dichiarate, non dimenticate:
   · l'occhiello (HOME, PIANO…) da noi c'è e in Flo no — Flo mette un titolo di
     sezione UNA volta in cima, noi diciamo di che schermata si tratta ogni
     volta. Sta sopra il titolo, piccolo, attaccato.
   · il telaio del telefono su telefono NON è più scuro. La regola di casa
     («telaio scuro, provato chiaro e rimesso scuro») valeva a 300px di
     larghezza; a 183px quella scocca nera da 11px con raggio 44 diventa un
     bordo grasso che si mangia la schermata. Flo non ha telaio: ha una cornice
     chiara sottile e un'ombra. Su DESKTOP il telaio scuro resta.
   ========================================================================== */
@media (max-width: 899px) {
  .tour { grid-template-columns: 1fr; gap: 0; }
  .tour-telefono { display: none; }
  .tour-testi { padding-bottom: 0; }

  /* La cornice alla Flo: chiara, sottile, un filo di perimetro e l'ombra
     dell'app (`raisedField`, quella dei campi che escono dalla pagina). */
  .phone-bezel {
    padding: 4px; border-radius: 26px;
    background: var(--app-surface);
    box-shadow: 0 0 0 1px var(--app-card-stroke), var(--om-raised-field);
  }
  .phone-screen { border-radius: 22px; }
  /* 52svh di telaio = 183px di larghezza su un iPhone: la misura di Flo.
     Il conto è (altezza − cornice) × 390/844 + cornice, con 8px di cornice. */
  .phone { max-width: max(170px, calc((52vh - 8px) * 0.4621 + 8px)); }
  .phone { max-width: max(170px, calc((52svh - 8px) * 0.4621 + 8px)); }

  .tour-blocco { min-height: 0; display: block; text-align: center; }
  .tour-blocco + .tour-blocco { margin-top: 72px; padding-top: 8px; }
  .tour-mobile { display: block; width: 100%; margin: 0 auto 32px; }

  /* stessa impaginazione per i blocchi della pagina "L'app" */
  .app-block { text-align: center; gap: 32px; padding: 26px 20px; }
  .app-foto { max-width: none; }

  /* Le misure del testo di Flo, dentro i due blocchi e solo lì. */
  .tour-blocco .t-label, .app-block .t-label { margin-bottom: 6px; }
  .tour-tit, .app-tit {
    margin-top: 0; font-size: 21px; line-height: 1.25;
    font-weight: 700; letter-spacing: -0.01em;
  }
  .tour-corpo, .app-corpo {
    margin: 20px auto 0; font-size: 17px; line-height: 1.45; max-width: 34em;
  }
  .app-link { margin-top: 20px; font-size: 16px; }
}

/* ==========================================================================
   L'ENDORING VERO, ricostruito (hero)
   Le proporzioni e i colori vengono da components/ScoreRing.tsx dell'app:
   100 tacche, picco sul valore, colore per fascia.
   ========================================================================== */
.anello { position: relative; width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 1; }
.anello svg { display: block; width: 100%; height: 100%; }
/* L'anello sta SOPRA lo screenshot vero, esattamente dove sta nell'app: centro
   al 50% / 34,48% della finestra, lato 61,4% della larghezza. Misure prese sui
   pixel dello screenshot, non a occhio. Nell'immagine l'anello stampato è stato
   cancellato riga per riga con il colore di sfondo della sua stessa riga. */
.anello-sopra {
  position: absolute; max-width: none; margin: 0;
  transform: translate(-50%, -50%); pointer-events: none;
}


/* ==========================================================================
   FONTI · «da dove vengono i numeri» — le tre banche dati.

   Com'era: tre card crema, senza ombra, con una barra salvia da 4px in cima e
   `height:100%`. Il risultato era quello della segnalazione — la card più
   corta restava mezza vuota, e senza profondità sembravano tre rettangoli
   disegnati. Nell'app non esiste una card senza ombra, e non esiste una barra
   colorata sul bordo: il colore lo porta un medaglione (`sageTint`).
   ========================================================================== */
.banche { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); align-items: start; }
.banca { padding: 22px 24px; }
.banca-bollo {
  display: block; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%;
  background: var(--app-sage-tint); box-shadow: inset 0 0 0 1px var(--app-card-sage);
  position: relative;
}
.banca-bollo::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--app-sage);
}
/* `balance` distribuisce le righe invece di lasciarne una orfana: il titolo
   dell'USDA passa da quattro righe sfrangiate a tre pari. */
.banca-tit { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* ==========================================================================
   ANIMAZIONI
   Lo stato "nascosto" lo mette il JavaScript (classe .rivela): senza JS la
   pagina resta leggibile, e chi ha chiesto meno movimento non vede niente.
   ========================================================================== */
.rivela { opacity: 0; transform: translateY(18px); }
.rivela.dentro {
  opacity: 1; transform: none;
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
  transition-delay: inherit;
}

/* Card impilate che sfumano uscendo dall'alto: è l'effetto delle StackCard del
   tracker (endoplan-app/apps/mobile/components/StackCard.tsx). Qui il CSS mette
   solo le condizioni — trasformazione e opacità le scrive portal.js fotogramma
   per fotogramma, agganciate allo scorrimento, quindi NIENTE transizione o
   l'animazione arriverebbe sempre in ritardo sul dito. */
.impila { transition: none !important; will-change: transform, opacity; }

/* L'header si assottiglia quando la pagina scorre: meno ingombro, più stacco */
header { transition: box-shadow .25s ease, background-color .25s ease; }
header.compatto { box-shadow: var(--om-card-soft); }
header.compatto > div:first-child { min-height: 56px; }
header > div:first-child { transition: min-height .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .rivela, .rivela.dentro { opacity: 1; transform: none; transition: none; }
  .impila { transform: none !important; opacity: 1 !important; will-change: auto; }
  header, header > div:first-child { transition: none; }
}

/* La demo: l'ingrediente che entra nel piatto si fa notare, quelli già lì no */
@keyframes ep-entra {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
.p-item.nuovo { animation: ep-entra .42s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .p-item.nuovo { animation: none; } }

/* --------------------------------------------------------------------------
   LE LINEE DELLA MENTE
   Nella fascia scura «Una mente che osserva con te» c'era un solo cerchio
   fermo. Ora sono tre, e galleggiano: giri lentissimi (26-34 secondi), niente
   che salti all'occhio — la sezione parla di una mente che osserva in silenzio,
   il movimento deve essere quello di un respiro. Chi ha chiesto meno movimento
   nel sistema operativo li vede fermi.
   -------------------------------------------------------------------------- */
.mente-onde { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.mente-onde i { position:absolute; display:block; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.12); will-change:transform }
.mente-onde i:nth-child(1) { width:600px; height:600px; top:-320px; right:-240px;
  animation:onda-a 16s ease-in-out infinite alternate }
.mente-onde i:nth-child(2) { width:430px; height:430px; top:-120px; right:-40px;
  border-color:rgba(185,154,226,0.22); animation:onda-b 20s ease-in-out infinite alternate }
.mente-onde i:nth-child(3) { width:540px; height:540px; bottom:-330px; left:-200px;
  border-color:rgba(255,255,255,0.08); animation:onda-c 18s ease-in-out infinite alternate }
@keyframes onda-a { from { transform:translate3d(0,0,0) scale(1) }
                    to   { transform:translate3d(-50px,42px,0) scale(1.07) } }
@keyframes onda-b { from { transform:translate3d(0,0,0) scale(1) }
                    to   { transform:translate3d(48px,-38px,0) scale(1.09) } }
@keyframes onda-c { from { transform:translate3d(0,0,0) scale(1) }
                    to   { transform:translate3d(44px,-46px,0) scale(1.06) } }
@media (prefers-reduced-motion: reduce) { .mente-onde i { animation:none } }

/* --------------------------------------------------------------------------
   LE LINEE DI TUTTO IL SITO
   In quasi ogni fascia c'era un cerchio sottile, fermo, a fare da sfondo.
   Ora galleggiano tutti: tre andature diverse (16-20 secondi) così due linee
   vicine non vanno mai a tempo. Il movimento si vede, ma resta un respiro:
   sono linee da 1,5px, non entrano in gara col testo. Chi ha chiesto meno
   movimento nel sistema operativo le vede ferme.
   -------------------------------------------------------------------------- */
.linea { will-change:transform }
/* cinque andature, con partenze sfalsate: due linee sulla stessa pagina non
   devono mai marciare a tempo, se no si vede il trucco */
.linea-1 { animation:linea-a 17s ease-in-out -3s infinite alternate }
.linea-2 { animation:linea-b 21s ease-in-out -9s infinite alternate }
.linea-3 { animation:linea-c 19s ease-in-out -6s infinite alternate }
.linea-4 { animation:linea-d 23s ease-in-out -14s infinite alternate }
.linea-5 { animation:linea-e 18s ease-in-out -11s infinite alternate }
@keyframes linea-a { from { transform:translate3d(0,0,0) scale(1) }
                     to   { transform:translate3d(-54px,42px,0) scale(1.07) } }
@keyframes linea-b { from { transform:translate3d(0,0,0) scale(1) }
                     to   { transform:translate3d(48px,-46px,0) scale(1.09) } }
@keyframes linea-c { from { transform:translate3d(0,0,0) scale(1) }
                     to   { transform:translate3d(40px,48px,0) scale(1.06) } }
@keyframes linea-d { from { transform:translate3d(0,0,0) scale(1) }
                     to   { transform:translate3d(-44px,-40px,0) scale(1.08) } }
@keyframes linea-e { from { transform:translate3d(0,0,0) scale(1) }
                     to   { transform:translate3d(52px,36px,0) scale(1.05) } }
@media (prefers-reduced-motion: reduce) { .linea { animation:none } }

/* --------------------------------------------------------------------------
   IL GIRO DENTRO L'APP — telefono grande, e l'interfaccia scorre dentro
   Prima la schermata stava tutta dentro il riquadro, rimpicciolita al punto
   che i testi non si leggevano. Ora il telefono e' piu' largo, il riquadro
   mostra una FINESTRA piu' corta dello schermo, e scorrendo la pagina
   l'interfaccia scorre dentro il telefono (lo fa portal.js).
   In basso il telefono sfuma invece di finire: non e' a tutto schermo, cosi'
   sotto resta aria per il testo. E i blocchi sono alti quasi uno schermo
   intero: mentre passi su una schermata la pagina sembra rallentare, poi
   riprende, poi rallenta di nuovo sulla successiva. Nessuno scroll rubato:
   la rotellina resta quella del browser, cambia solo quanta strada c'e'.
   -------------------------------------------------------------------------- */
/* l'altezza la detta lo SCHERMO, non la proporzione: cosi' il telefono ci sta
   sempre dentro, su un portatile come su un monitor grande. Quello che avanza
   dell'immagine e' la corsa che si fa scorrendo. */
/* il mockup si vede intero: niente finestra, niente sfumatura in basso */
@media (max-width: 899px) { .tour-blocco { min-height: 0; } }

/* --------------------------------------------------------------------------
   LA DEMO SUL TELEFONO — il punteggio non deve mai uscire di schermo
   Sul telefono le due colonne si impilano: le pastiglie degli ingredienti
   diventano una lista lunghissima e «Il tuo piatto» col punteggio finisce
   sotto, fuori vista. Cosi' tocchi un ingrediente e non vedi succedere
   niente — che e' proprio il contrario del punto della demo.
   Qui il piatto e il punteggio salgono in cima e ci RESTANO (sticky):
   scorri le pastiglie, tocchi, e il numero si muove sotto gli occhi.
   Le pastiglie diventano piu' compatte, cosi' ne entrano tre per riga.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .demo { display: flex; flex-direction: column; gap: 0; }
  .demo-coda { order: 1; margin-top: 4px; }

  /* IL PIATTO RESTA IN VISTA MENTRE SCEGLI
     Sta incollato in alto, ma allineato: stesso margine laterale delle
     pastiglie sotto, non a tutta larghezza — se no sembra un cassetto piu'
     largo della card. Lo sfondo e' opaco e c'e' un filo sotto, cosi' copre
     quello che gli scorre dietro. L'etichetta sta SOPRA il piatto (una volta
     l'avevo messa di fianco per sbaglio) e il piatto non taglia niente: se
     gli ingredienti crescono, cresce anche lui. */
  .demo-vivo {
    order: -1; position: sticky; top: 64px; z-index: 20;
    margin: 0; padding: 14px 28px 12px;   /* 28 = i 14 della card + i 14 delle pastiglie */
    background: var(--ep-paper);
    box-shadow: 0 8px 12px -10px rgba(120, 90, 150, 0.5);
  }
  .demo-vivo::after {
    content: ""; display: block; height: 1px; margin: 12px -28px -12px;
    background: var(--ep-line);
  }
  .demo-vivo > div:first-child { display: block; }
  .demo-vivo .demo-plate {
    min-height: 44px; max-height: none; overflow: visible;
    margin-top: 8px; padding: 10px; box-shadow: none;
    border: 1px solid var(--ep-line); background: var(--ep-ground);
  }
  .demo-vivo .demo-empty { font-size: 13px; }
  .demo-vivo .demo-score { gap: 12px; margin-top: 12px; }
  .demo-vivo .demo-num { font-size: 26px !important; }
  .demo-vivo .demo-mossa { margin-top: 10px; padding: 11px 13px; gap: 10px; }
  .demo-anello { width: 74px; height: 74px; }

  .d-chip { min-height: 36px; padding: 0 11px; font-size: 13.5px; gap: 6px; }
  .demo-chips { gap: 7px; margin-top: 10px; }
  .demo > .stack-6 { padding: 14px 14px 0; }
  .demo-coda { padding: 0 14px 16px; }
  .demo-piu { padding-top: 12px; }
}


/* --------------------------------------------------------------------------
   LA BARRA DI STATO, DISEGNATA DA NOI
   Le catture vengono dal telefono di Andrea: dentro c'è l'ora vera (le 3:28
   di notte) e una batteria diversa in ogni foto. Non è contenuto dell'app —
   è cornice, come il telaio — quindi la ridisegniamo noi, uguale per tutte:
   9:41, isola, tacche, wi-fi, batteria. Il colore di fondo lo campiona
   aggiorna-schermate.mjs dalla cattura stessa, così non si vede la giuntura.
   -------------------------------------------------------------------------- */
.phone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 6%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 7.5%; z-index: 3; pointer-events: none;
  font-size: clamp(8px, 3.1cqw, 15px);
}
.phone-screen { container-type: inline-size; }
.phone-ora { font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.phone-isola {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  width: 30%; height: 62%; border-radius: 999px; background: #000;
}
.phone-segni { display: inline-flex; align-items: center; gap: 5px; }
.phone-segni svg { display: block; width: auto; height: 0.72em; }

/* --------------------------------------------------------------------------
   IL GIRO SUL TELEFONO
   Sul desktop il telefono sta fermo a sinistra e i testi gli scorrono
   accanto. Sul telefono non c'era niente di tutto questo: una pila di
   schermate ferme, una per blocco. Ora fa la stessa cosa in verticale —
   il telefono si incolla in alto, i testi gli passano sotto, e l'interfaccia
   scorre dentro lo schermo. Stesso identico meccanismo del desktop: il
   JavaScript non cambia di una riga.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* MOSTRA A SCORRIMENTO: il mockup si vede intero, la didascalia gli sta
     sopra su una velatura chiara, le schermate si cambiano da sole ogni 4
     secondi (o col pallino). Legare la corsa allo scroll qui non funzionava:
     il telefono era piu' alto dello schermo e la didascalia finiva dietro. */
  .tour { display: block; }
  .tour-mobile, .tour-testi { display: none; }
  .tour-telefono {
    /* RELATIVE, non static: la didascalia e' posizionata in assoluto dentro
       questo blocco. Con `static` si ancorava al primo antenato posizionato e
       finiva a meta' pagina, sopra la Community. */
    position: relative; display: block; width: min(84vw, 340px); margin: 0 auto;
  }
  .tour-img { transition: opacity .55s ease; }

  .tour-didascalia {
    position: absolute; left: 4%; right: 4%; bottom: 4.5%; z-index: 4;
    padding: 16px 16px 18px; border-radius: 22px; text-align: center;
    background: rgba(255, 253, 249, 0.9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(60, 40, 90, 0.22);
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    transform: translateY(8px);
  }
  .tour-didascalia.viva { opacity: 1; transform: none; }
  .tour-didascalia .t-label { font-size: 11px; }
  .tour-didascalia .tour-tit { font-size: 21px; line-height: 1.2; margin-top: 4px; }
  .tour-didascalia .tour-corpo { font-size: 14px; line-height: 1.45; margin-top: 8px; max-width: none; }
  .phone-screen { position: relative; }

  .tour-pallini { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .tour-pallini button {
    width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
    background: rgba(120, 90, 150, 0.28); transition: width .25s ease, background .25s ease;
  }
  .tour-pallini button.on { width: 22px; background: var(--ep-lilla); }
}


/* --------------------------------------------------------------------------
   L'ANELLO DEL PUNTEGGIO NELLA DEMO
   Non è l'Endo-Ring (quello ha cento tacche e vive solo in home): è il
   cerchietto che nell'app circonda i numeri — una traccia chiara e un arco
   che cresce dal dodici in punto, col colore della fascia.
   -------------------------------------------------------------------------- */
.demo-anello { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; flex: none; }
.demo-anello svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.demo-anello .d-traccia { fill: none; stroke: var(--ep-filo); stroke-width: 8; }
.demo-anello .d-arco { fill: none; stroke: var(--ep-verde); stroke-width: 8; stroke-linecap: round;
  transition: stroke .25s ease; }
.demo-anello .demo-num { position: relative; font-size: 30px; line-height: 1; }

/* --- la card fissa in cima, sul telefono: respiro e nessuna ombra a caso -- */
@media (max-width: 899px) {
  /* ⚠️ QUI c'era un blocco con `padding !important` e `margin: 0 -14px
     !important` che sbordava dalla card e VINCEVA su ogni correzione scritta
     più sopra: è stato il motivo per cui il finto builder è rimasto rotto per
     tre giri. Le regole buone stanno tutte nel blocco «IL PIATTO RESTA IN
     VISTA MENTRE SCEGLI». Non rimetterne di nuove quaggiù. */
  .demo { padding: 0 !important; }
  .demo > .stack-6, .demo-coda { padding: 0 14px; }
  .demo > .stack-6 { padding-top: 12px; }
  .demo-coda { padding-bottom: 16px; }
}

/* Sul telefono il mockup e' quasi a tutta larghezza e l'anello si legge un
   filo basso: lo alzo del 5,4% della sua altezza (cioe' l'1,6% dell'altezza
   della schermata). Sul desktop resta dov'era, alla misura vera. */

/* --------------------------------------------------------------------------
   L'HERO SUL TELEFONO
   Dal titolo al pulsante «Scarica l'app» si prende tutta l'altezza che c'e'
   fra l'intestazione e la barra fissa in basso: e' la prima cosa che si vede
   e deve respirare. «Come nasce il punteggio» comincia DOPO quella soglia,
   cosi' si capisce che c'e' altro sotto e non sembra tutto ammucchiato.
   Le due misure sottratte sono l'intestazione (67px) e la barra bassa (73px);
   --hero-coda e' quanto occupano il pulsante e i suoi stacchi.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero-prima {
    --hero-coda: 160px;
    /* la barra in basso ora arriva dopo: qui non va più sottratta */
    min-height: calc(100dvh - 64px - var(--hero-coda));
    display: flex; flex-direction: column; justify-content: center;
  }
  /* il pulsante a tutta larghezza, il link sotto: cosi' la soglia e' netta */
  .hero-azioni { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-azioni > a:first-child { justify-content: center; }
}

/* le linee a nastro: stessa andatura dei cerchi, ma sono curve aperte */
.curva { pointer-events: none; max-width: none; }

/* --------------------------------------------------------------------------
   STORIE — il segnaposto del ritratto non deve fare il padrone
   Era 4/5 a tutta larghezza: sul telefono diventava una card enorme a righe,
   più grande del racconto che dovrebbe accompagnare. Finché non ci sono i
   ritratti veri resta un riquadro piccolo; quando arriveranno basterà
   togliere il tetto.
   -------------------------------------------------------------------------- */
.portrait { max-width: 230px; }
@media (max-width: 899px) {
  .portrait { width: 88px; max-width: 88px; aspect-ratio: 1 / 1; border-radius: 18px; }
  .portrait code { display: none; }
}

/* Su desktop «Cominciamo a rispondere.» sta su una riga sola: e' la promessa
   del titolo, spezzarla la indebolisce. Sul telefono no, se no sborda. */
@media (min-width: 900px) { .hero-riga2 { white-space: nowrap; } }

/* --------------------------------------------------------------------------
   INTESTAZIONE SUL TELEFONO — leggera, non una fascia
   Fra intestazione appiccicata e barra fissa in basso restava una finestra
   piccolissima. Qui l'intestazione diventa solo logo a sinistra e panino a
   destra, su fondo trasparente: si vede la pagina scorrere sotto e lo schermo
   respira. Quando si scorre prende un velo, se no il logo sparisce sopra le
   schermate scure.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  header {
    background: transparent !important; -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important; border-bottom: 0 !important; box-shadow: none !important;
  }
  header.compatto {
    background: color-mix(in srgb, var(--ep-ground) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  }
  /* la barra in basso arriva solo dopo il pulsante dell'hero */
  .bottombar { transform: translateY(110%); transition: transform .3s ease; }
  .bottombar.mostra { transform: none; }
  body { padding-bottom: 0; }
  body.con-barra { padding-bottom: 88px; }
}

/* --------------------------------------------------------------------------
   HERO — occhiello in alto, titolo al centro, descrizione staccata
   L'occhiello «Per chi convive con l'endometriosi» dice a CHI parliamo: sta
   in cima e sottovoce, non deve competere col titolo. Nel blocco centrato i
   margini automatici fanno il lavoro: l'occhiello si appoggia in alto, la
   descrizione in basso, il titolo resta dov'era, in mezzo.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero-occhiello .t-label { font-size: 11px; letter-spacing: 0.14em; }
  .hero-occhiello i { transform: scale(0.82); }
  .hero-prima .hero-occhiello { margin-bottom: auto; }
  /* centrata nello spazio fra il titolo e il pulsante, non appoggiata in fondo */
  .hero-prima .hero-descrizione { margin-top: auto; margin-bottom: auto; padding-top: 16px; }
}

/* --------------------------------------------------------------------------
   LE CARD DELLE DOMANDE FREQUENTI
   Si aprivano di scatto. Ora la risposta scende e il segno + ruota: il gesto
   dice «si sta aprendo», non «è comparso qualcosa».
   -------------------------------------------------------------------------- */
main details { transition: background-color .2s ease, box-shadow .25s ease; }
main details[open] { box-shadow: var(--om-card-soft); }
main details > summary { transition: color .18s ease; cursor: pointer; }
main details > summary::-webkit-details-marker { display: none; }
main details[open] > summary ~ * { animation: faq-apri .3s cubic-bezier(.22,1,.36,1); }
@keyframes faq-apri {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { main details[open] > summary ~ * { animation: none; } }

/* --------------------------------------------------------------------------
   L'APERTURA DEL MENU
   Il pannello compariva di colpo (l'attributo `hidden` che va via). Ora
   scende: il pannello scivola da sotto l'intestazione e le voci arrivano una
   dopo l'altra, con un ritardo minimo — abbastanza da far leggere l'ordine,
   non tanto da far aspettare.
   -------------------------------------------------------------------------- */
.drawer:not([hidden]) { animation: drawer-giu .26s cubic-bezier(.22,1,.36,1); transform-origin: top center; }
@keyframes drawer-giu {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.985); }
  to   { opacity: 1; transform: none; }
}
.drawer:not([hidden]) .drawer-body > * { animation: drawer-voce .3s cubic-bezier(.22,1,.36,1) backwards; }
.drawer:not([hidden]) .drawer-body > *:nth-child(1) { animation-delay: .04s; }
.drawer:not([hidden]) .drawer-body > *:nth-child(2) { animation-delay: .09s; }
.drawer:not([hidden]) .drawer-body > *:nth-child(3) { animation-delay: .14s; }
.drawer:not([hidden]) .drawer-body > *:nth-child(4) { animation-delay: .19s; }
.drawer:not([hidden]) .drawer-body > *:nth-child(n+5) { animation-delay: .23s; }
@keyframes drawer-voce {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* il panino diventa una X mentre il menu si apre */
[data-burger] { transition: transform .26s cubic-bezier(.22,1,.36,1); }
[data-burger][aria-expanded="true"] { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .drawer:not([hidden]), .drawer:not([hidden]) .drawer-body > * { animation: none; }
  [data-burger][aria-expanded="true"] { transform: none; }
}

/* Il secondo alone, verde e piu' basso, gira al contrario del primo: due
   masse che si incrociano piano danno la profondita' dello sfondo animato
   dell'Analisi in app, che con un solo cerchio non veniva. */
@keyframes epfloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(6vmax, -4vmax) scale(1.1); }
  66%  { transform: translate(2vmax, -8vmax) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ep-blob-2 { animation: none !important; } }