/* ==========================================================================
   Sara Marenghi — landing curriculum
   Struttura e tipografia di workhap.com, colori di saramarenghi.com
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}

:root {
  --blu: #134693;          /* al posto del blu Workhap */
  --blu-chiaro: #e6ecf7;   /* cerchi delle icone */
  --arancio: #ff751f;      /* al posto di arancio e giallo Workhap */
  --notte: #1d1f3b;        /* testo dei titoli */
  --grigio: #4b4d63;       /* testo dei paragrafi */
  --lavanda: #eef0fa;      /* sezioni chiare alternate */
  --fondo: #f8f8fb;        /* apertura e "Ciao, sono Sara" */
  --card: #ffffff;
  --bianco: #ffffff;
  --pesca: #ffb88a;        /* arancio leggibile su blu (5,2:1) */
  --celeste: #d7e3f5;      /* testo secondario su blu */
  --bordo: #d9dcec;
  --evidenziatore: rgba(255, 117, 31, .55);
  --esci: cubic-bezier(.16, 1, .3, 1);

  --largo: 72rem;
  --stretto: 44rem;
  --raggio: 20px;
  --pillola: 999px;
  --ombra: 0 2px 6px rgba(29, 31, 59, .05), 0 12px 32px rgba(29, 31, 59, .08);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; scrollbar-color: var(--blu) var(--lavanda); }
::selection { background: var(--evidenziatore); color: var(--notte); }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  color: var(--grigio); background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--notte); margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5.4vw, 3.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -.035em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
strong { color: var(--notte); }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 8px; }
.pie :focus-visible, .sezione--blu :focus-visible { outline-color: var(--bianco); }
.salta { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bianco); color: var(--blu); padding: .75rem 1rem; font-weight: 700; }
.salta:focus { left: .5rem; top: .5rem; }

.da-sostituire {
  background: #ffe814; color: #1a1a00; padding: 0 .25em; border-radius: 3px;
  font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- enfasi nei titoli ---------- */
.evidenzia {
  position: relative; z-index: 0; white-space: nowrap;
}
.evidenzia::before {
  content: ""; position: absolute; z-index: -1;
  left: -.12em; right: -.12em; top: .02em; bottom: -.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 9 12 5l26 3 30-5 40 4 34-4 30 3 22-1 1 14-4 13 4 15-9 9-30-3-40 4-38-4-34 4-22-3-15 4 3-17-4-12 4-10Z' fill='%23ff751f'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.colore { color: var(--blu); }
.sottolinea {
  font-style: italic; padding-bottom: .06em;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- struttura ---------- */
.sezione { padding: clamp(4rem, 10vw, 7.5rem) 1.25rem; }
.sezione--lavanda { background: var(--lavanda); }
.sezione--fondo { background: var(--fondo); }
.sezione--blu { background: var(--blu); color: var(--bianco); }
.sezione--blu h1, .sezione--blu h2, .sezione--blu strong { color: var(--bianco); }
.contenuto { max-width: var(--stretto); margin-inline: auto; }
.contenuto--largo { max-width: var(--largo); margin-inline: auto; }
.intestazione { text-align: center; max-width: 54rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.intestazione p { font-size: 1.125rem; }

/* ---------- pulsanti a pillola ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding: .9rem 1.9rem;
  background: var(--arancio); color: var(--notte); border: 2px solid var(--arancio);
  border-radius: var(--pillola); font-size: 1.0625rem; font-weight: 600;
  text-decoration: none; text-align: center; transition: transform .2s var(--esci), box-shadow .2s var(--esci), background-color .15s ease;
}
.bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(29, 31, 59, .16); }
.bottone:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.bottone__icona { flex: 0 0 auto; width: 1.15em; height: 1.15em; transition: transform .25s var(--esci); }
.bottone:hover .bottone__icona { transform: translateX(4px); }
.bottone--blu { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.sotto-bottone { margin: .9rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--grigio); }
.sezione--blu .sotto-bottone { color: var(--celeste); }
.torna-pagina { color: var(--bianco); font-weight: 600; text-underline-offset: .2em; display: inline-block; padding-block: .5rem; }
.sezione--blu .bottone { width: 100%; max-width: 24rem; }

/* ---------- logo in alto ---------- */
.nav { background: var(--fondo); padding: 1.1rem 1.25rem; }
.nav__riga { max-width: var(--largo); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { display: inline-block; border-radius: 10px; }
.logo img { width: 3rem; height: 3rem; }

/* ---------- apertura ---------- */
.apertura {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem 0;
  background:
    repeating-radial-gradient(circle at 50% 78%, transparent 0 58px, rgba(19, 70, 147, .05) 58px 61px),
    var(--fondo);
}
.apertura h1 {
  position: relative; z-index: 1;
  max-width: 76rem; margin: 0 auto;
  font-size: clamp(2.6rem, 9.2vw, 7.25rem); font-weight: 900; line-height: .95;
  letter-spacing: -.03em; text-transform: uppercase;
}
.apertura__foto {
  width: min(82%, 30rem); margin: -.2em auto 0; position: relative; z-index: 2;
  -webkit-mask-image: url("img/sara-apertura-maschera.png"); mask-image: url("img/sara-apertura-maschera.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ---------- introduzione (seconda parte dell'apertura) ---------- */
.introduzione { background: var(--bianco); text-align: center; }
.introduzione__testo { font-size: clamp(1.25rem, 3vw, 1.625rem); line-height: 1.5; color: var(--notte); }
.introduzione__micro { margin: 2rem 0 0; font-size: 1rem; font-weight: 600; }
.introduzione__micro a { color: var(--blu); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.introduzione__icona { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.introduzione__micro a:hover { text-decoration: underline; }

/* ---------- ti riconosci? ---------- */
.situazioni__aiuto {
  margin: -1.5rem auto 1.75rem; text-align: center; font-size: 1rem; font-weight: 600; color: var(--grigio);
  min-height: 1.6em; transition: color .2s ease;
}
.situazioni__aiuto--attivo { color: var(--blu); }
.situazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.situazioni > li { display: flex; }
.situazione {
  width: 100%; margin: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--card); border: 2px solid transparent; border-radius: var(--raggio); padding: 1.1rem 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: border-color .2s ease, box-shadow .3s var(--esci), transform .3s var(--esci);
}
.situazione:hover { border-color: #c9cfe6; }
.situazione:active { transform: scale(.98); transition-duration: .08s; }
.situazione[aria-pressed="true"] { border-color: var(--blu); box-shadow: 0 10px 28px rgba(19, 70, 147, .14); }
.situazione__testo { color: var(--notte); font-size: 1.0625rem; line-height: 1.5; }
.numero {
  position: relative; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--blu-chiaro); color: var(--blu);
  font-weight: 800; font-size: .9375rem; font-variant-numeric: tabular-nums;
  transition: background-color .25s ease, color .25s ease;
}
.numero__cifra, .numero__spunta { grid-area: 1 / 1; transition: opacity .2s ease, scale .35s var(--esci); }
.numero__spunta { width: 1.35rem; height: 1.35rem; opacity: 0; scale: .4; }
.situazione[aria-pressed="true"] .numero { background: var(--arancio); color: var(--notte); }
.situazione[aria-pressed="true"] .numero__cifra { opacity: 0; scale: .4; }
.situazione[aria-pressed="true"] .numero__spunta { opacity: 1; scale: 1; }
.chiusura-sezione {
  transform-origin: 50% 60%;
  max-width: 46rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; text-align: center;
  font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 700; line-height: 1.4; color: var(--notte); letter-spacing: -.015em;
}
.evidenzia-testo {
  transition: background-size .8s var(--esci);
  background: linear-gradient(var(--evidenziatore), var(--evidenziatore)) no-repeat left bottom / 100% 42%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em;
}

/* ---------- con chi lavoro ---------- */
.card__numero { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; color: var(--blu); }
.nota-onesta {
  max-width: 46rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; text-align: center;
  background: var(--lavanda); border-radius: var(--raggio); padding: 1.25rem 1.5rem;
  color: var(--notte); font-size: 1.0625rem;
}

/* ---------- ciao, sono Sara ---------- */
.presentazione { display: grid; gap: 3.5rem; align-items: center; }
.presentazione h2 { font-size: clamp(2.2rem, 6vw, 3.25rem); margin-bottom: .15em; }
.presentazione__ruolo { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 700; color: var(--blu); }
.presentazione__grande { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.55; color: var(--grigio); }
.ritratto { position: relative; margin: 0 1.6rem 1.6rem 0; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--esci); }
.ritratto::before {
  content: ""; position: absolute; z-index: 0;
  inset: 1.6rem -1.6rem -1.6rem 1.6rem;
  border: 12px solid var(--arancio); border-radius: 30px;
}
.ritratto img { position: relative; z-index: 1; width: 100%; border-radius: var(--raggio); aspect-ratio: 935 / 1100; object-fit: cover; }
.ritratto__segni { position: absolute; z-index: 2; top: -2.6rem; right: -2.4rem; width: 4.2rem; height: 4.2rem; color: var(--blu); }

/* ---------- card con icona (griglia community Workhap) ---------- */
.griglia { display: grid; gap: 1.5rem; }
.card {
  background: var(--card); border-radius: var(--raggio); padding: 1.6rem 1.5rem 1.75rem;
  box-shadow: var(--ombra);
}
.sezione--lavanda .card { box-shadow: none; }
.icona {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; margin-bottom: 1.75rem;
  display: grid; place-items: center; background: var(--blu-chiaro); color: var(--blu);
}
.icona svg { width: 1.6rem; height: 1.6rem; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }

.centrato { text-align: center; }

/* ---------- pacchetti ---------- */
.pacchetti {
  background-color: var(--arancio);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='%23ffffff' fill-opacity='.2'%3E%3Cpath d='M40 60l110-26 22 74-110 26z'/%3E%3Cpath d='M330 250l84 30-30 96-84-30z'/%3E%3Cpath d='M92 330l62 14-12 50-62-14z'/%3E%3Cpath d='M380 40l46 22-22 44-46-22z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2'%3E%3Cpath d='M60 84l96-22M78 104l80-18'/%3E%3Cpath d='M346 280l54 20M336 304l54 20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
  color: var(--notte);
}
.pacchetti__intro { text-align: center; max-width: 40rem; margin: 0 auto clamp(3rem, 7vw, 4rem); }
.pacchetti__intro h2 { margin-bottom: .35em; }
.pacchetti__intro p { font-size: 1.25rem; color: var(--notte); margin: 0; }
.scelta { max-width: 46rem; margin: -1.25rem auto 3rem; text-align: center; }
.scelta__domanda { margin: 0 0 .85rem; font-size: 1.125rem; font-weight: 700; color: var(--notte); }
.scelta__opzioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.scelta__opzione {
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent;
  min-height: 3rem; padding: .75rem 1.25rem; border-radius: var(--pillola);
  color: var(--notte); background: rgba(255, 255, 255, .88); border: 2px solid var(--notte);
  transition: background-color .2s ease, color .2s ease, transform .25s var(--esci);
}
.scelta__opzione:hover { background: var(--bianco); }
.scelta__opzione:active { transform: scale(.97); transition-duration: .08s; }
.scelta__opzione[aria-pressed="true"] { background: var(--notte); color: var(--bianco); }
.listino { display: grid; gap: 3rem; max-width: 64rem; margin-inline: auto; align-items: stretch; }
.piano {
  position: relative; background: var(--lavanda); border-radius: 24px;
  padding: 2.75rem 1.5rem 2rem; text-align: left; display: flex; flex-direction: column;
  box-shadow: 0 18px 48px rgba(29, 31, 59, .18);
  isolation: isolate;
  transition: transform .55s var(--esci), box-shadow .55s var(--esci);
}
.piano::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--luce-x, 50%) var(--luce-y, 0%), rgba(255, 255, 255, .9), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) { .piano:hover::after { opacity: 1; } }
.piano--scelto { transform: translateY(-10px); box-shadow: 0 0 0 4px var(--notte), 0 28px 64px rgba(29, 31, 59, .32); }
.piano--in-secondo-piano { transform: scale(.96); }
.piano__fa-per-te {
  position: absolute; top: .9rem; right: .9rem; z-index: 1;
  background: var(--notte); color: var(--bianco); border-radius: var(--pillola);
  padding: .35rem .9rem; font-size: .875rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  opacity: 0; transform: rotate(4deg) scale(.6); transition: opacity .2s ease, transform .45s var(--esci);
}
.piano--scelto .piano__fa-per-te { opacity: 1; transform: rotate(4deg) scale(1); }
.piano__etichetta {
  position: absolute; top: -1.1rem; left: 1.5rem; transform: rotate(-3deg);
  background: var(--blu); color: var(--bianco); padding: .45rem 1rem;
  font-size: .9375rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.piano__indice { margin: 0 0 .25rem; text-align: center; font-size: .875rem; font-weight: 800; letter-spacing: .12em; color: var(--blu); }
.piano__nome { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .5rem; font-size: clamp(1.75rem, 4.2vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 1.25rem; text-align: center; }
.piano__pillola { border: 3px solid var(--blu); color: var(--blu); border-radius: var(--pillola); padding: .05em .45em .1em; }
.piano__prezzo { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1.25rem; }
.piano__cifra { font-size: clamp(3.75rem, 11vw, 5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--notte); }
.piano__nota { font-size: 1.125rem; line-height: 1.3; color: var(--notte); }
.piano__cifra .da-sostituire { font-size: .45em; letter-spacing: 0; vertical-align: middle; }
.piano__testo { color: var(--notte); font-size: 1.0625rem; margin-bottom: 1.75rem; }
.piano__perchi { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 2px solid var(--bordo); font-weight: 700; color: var(--blu); }
.piano .bottone { margin-top: auto; width: 100%; }
.nota-listino { text-align: center; margin: 3rem auto 0; font-size: 1.125rem; color: var(--notte); max-width: 44rem; }
.nota-listino p:last-child { margin: 0; }

/* ---------- domande frequenti (fisarmonica) ---------- */
.domanda { background: var(--lavanda); border-radius: var(--raggio); margin-bottom: .85rem; }
.domanda summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.2rem 4rem 1.2rem 1.4rem; font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--notte);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: ""; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background:
    linear-gradient(var(--notte), var(--notte)) center / .85rem 2.5px no-repeat,
    linear-gradient(var(--notte), var(--notte)) center / 2.5px .85rem no-repeat,
    var(--arancio);
  transition: transform .3s var(--esci);
}
.domanda::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size .4s var(--esci), content-visibility .4s allow-discrete;
}
.domanda[open]::details-content { block-size: auto; }
.domanda[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.domanda__risposta { margin: 0; padding: 0 1.4rem 1.35rem; color: var(--grigio); }

/* ---------- chiusura (blocco "Work with us" Workhap) ---------- */
.chiusura { background: var(--lavanda); }
.chiusura__griglia { max-width: 52rem; margin-inline: auto; text-align: center; }
.chiusura h2 { font-size: clamp(2rem, 4.8vw, 3.25rem); margin-bottom: .5em; }
.chiusura__testo { font-size: clamp(1.125rem, 2.4vw, 1.375rem); color: var(--notte); margin-bottom: 2rem; }
.chiusura__bottoni { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.chiusura__bottoni .bottone { width: 100%; max-width: 26rem; }
.chiusura .bottone span { font-size: 1.25em; line-height: 1; }

/* ---------- piè di pagina (come saramarenghi.com) ---------- */
.pie { background: var(--blu); color: var(--bianco); padding: 2.5rem 1.5rem; font-size: .875rem; font-weight: 500; }
.pie__griglia { max-width: var(--largo); margin-inline: auto; display: grid; gap: 1.75rem; }
.pie p { margin: 0; }
.pie__nome { font-size: 1.625rem; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.pie__ruolo { margin-top: .35rem !important; font-size: .875rem; }
.pie__contatti { display: grid; gap: .15rem; }
.pie__contatti span { color: var(--pesca); }
.pie__stacco { margin-top: 1.1rem !important; }
.pie a { color: var(--bianco); }
.pie__contatti a { text-decoration: none; display: inline-block; padding-block: .35rem; }
.pie__contatti a:hover { text-decoration: underline; }
.pie__link { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.pie__link a { text-decoration: underline; text-underline-offset: .2em; display: inline-block; padding-block: .45rem; }

/* ---------- pagine interne ---------- */
.pagina-semplice { padding: clamp(2.5rem, 8vw, 4.5rem) 1.25rem; background: var(--fondo); }
.pagina-semplice h1 { font-size: clamp(2.2rem, 7vw, 3.25rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.pagina-semplice h2 { margin-top: 2.25rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.pagina-semplice ul { padding-left: 1.25rem; }
.pagina-semplice li { margin-bottom: .5rem; }
.torna { display: inline-block; margin-bottom: 2rem; font-weight: 700; color: var(--blu); }
.sezione--blu h1 { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }

/* ==========================================================================
   Movimento e interazione
   Idea guida: l'evidenziatore della recruiter. La pennellata arancio passa
   sulla parola che conta, come su un CV. Gli stati nascosti esistono solo
   con la classe .js (aggiunta nell'head): senza JavaScript la pagina è
   completa e ferma. Le comparse le attiva assets/app.js quando un elemento
   entra nello schermo, quindi funzionano su tutti i browser.
   ========================================================================== */
@keyframes pennellata { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes pennellata-bis { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes sale-dal-bordo { from { transform: translateY(16%); } to { transform: none; } }
@keyframes parola-sale { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rivela { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes adesivo { from { opacity: 0; transform: rotate(-16deg) scale(1.5); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes timbro { 0% { scale: 1; } 40% { scale: 1.035; } 100% { scale: 1; } }
@keyframes dissolvenza { from { opacity: 0; } to { opacity: 1; } }

/* barra di lettura */
.avanzamento { position: fixed; inset: 0 0 auto; z-index: 60; height: 4px; pointer-events: none; }
.avanzamento span { display: block; height: 100%; background: var(--arancio); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.js) .avanzamento { display: none; }

/* apertura: pennellata (ripassabile al tocco) e foto che sale */
.apertura .evidenzia { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.apertura .evidenzia::before { animation: pennellata .8s var(--esci) .5s both; }
.apertura .evidenzia.bis::before { animation: pennellata-bis .6s var(--esci) both; }
.apertura .evidenzia.ter::before { animation: pennellata .6s var(--esci) both; }
.apertura__foto { animation: sale-dal-bordo 1.1s var(--esci) .15s both; }
.js .apertura__foto { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 6px); transition: translate .7s var(--esci); }

/* tratti dell'evidenziatore: parole colorate nei titoli e sottolineatura */
.js .traccia {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--evidenziatore), var(--evidenziatore)) no-repeat left 92% / 0% .26em;
  transition: background-size .9s var(--esci) .35s;
}
.js .visibile .traccia { background-size: 100% .26em; }
.js .introduzione .sottolinea { background-size: 0% .08em; transition: background-size .9s var(--esci) .45s; }
.js .introduzione .visibile .sottolinea { background-size: 100% .08em; }
.js .chiusura-sezione .evidenzia-testo { background-size: 0% 42%; }
.js .chiusura-sezione.visibile .evidenzia-testo { background-size: 100% 12%; }
.js .chiusura-sezione.chiusura-sezione--accesa .evidenzia-testo { background-size: 100% 42%; }

@media (prefers-reduced-motion: no-preference) {
  /* titolo: le parole salgono una dopo l'altra */
  .js .apertura h1 .parola { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .03em .12em; margin: -.06em -.03em -.12em; }
  .js .apertura h1 .parola > span { display: inline-block; animation: parola-sale .7s var(--esci) both; animation-delay: calc(60ms + var(--i) * 45ms); }
  .js .apertura h1 .parola--evidenzia { overflow: visible; }
  .js .apertura h1 .parola--evidenzia > span { animation-name: rivela; }
  .js .apertura .evidenzia::before { animation-delay: .8s; }

  /* comparse con tempi diversi */
  .js [data-rivela]:not(.visibile) { opacity: 0; }
  .js [data-rivela].visibile { animation: rivela .9s var(--esci) both; animation-delay: calc(var(--i, 0) * 75ms); }

  /* adesivo della promo e cornice del ritratto */
  .js .piano .piano__etichetta { opacity: 0; }
  .js .piano.visibile .piano__etichetta { animation: adesivo .65s var(--esci) .5s both; }
  .js .ritratto::before { translate: -1.6rem -1.6rem; transition: translate 1s var(--esci) .35s; }
  .js .ritratto.visibile::before { translate: 0 0; }
  .js .ritratto__segni { scale: 0; transform-origin: 0% 100%; transition: scale .5s var(--esci) .9s; }
  .js .ritratto.visibile .ritratto__segni { scale: 1; }

  /* la frase finale fa un piccolo "timbro" quando riconosci due situazioni */
  .chiusura-sezione--accesa { animation: timbro .5s var(--esci); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apertura__foto { animation: none; }
  .apertura .evidenzia::before, .apertura .evidenzia.bis::before, .apertura .evidenzia.ter::before { animation: dissolvenza .4s ease .2s both; }
  .js [data-rivela]:not(.visibile) { opacity: 0; }
  .js [data-rivela].visibile { animation: dissolvenza .5s ease both; }
  .bottone:hover, .bottone:active, .bottone:hover .bottone__icona,
  .situazione:active, .scelta__opzione:active, .piano--scelto, .piano--in-secondo-piano { transform: none; }
  .ritratto { transform: none; }
  .domanda::details-content { transition: none; }
}

/* ---------- telefoni stretti ---------- */
@media (max-width: 30rem) {
  .bottone { padding-inline: 1rem; font-size: 1rem; }
  .piano { padding-inline: 1.25rem; }
  .piano .bottone { font-size: .9375rem; padding-inline: .75rem; }
}

/* ---------- da tablet in su ---------- */
@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .nav { padding-block: 1.6rem; }
  .griglia--3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
  .griglia--3 > * { flex: 0 1 calc((100% - 4rem) / 3); }
  .situazioni { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .piano { padding-inline: 2.25rem; }
  .listino { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .pie { padding: 2rem 3.25rem; }
  .pie__griglia { grid-template-columns: 1.15fr 1.25fr 1fr; align-items: start; }
}
@media (min-width: 64rem) {
  .presentazione { grid-template-columns: 1.15fr .85fr; gap: 5rem; }
  .situazioni { grid-template-columns: repeat(4, 1fr); }
  .situazione { flex-direction: column; padding: 1.5rem 1.35rem 1.6rem; }
  .situazioni > li { height: 100%; }
}