/* ==========================================================================
   WIS — Women in Safety · wis.sugo.agency
   Design system "WIS — Women in Safety" (Claude Design):
   vino #7B2B47 · crema #F2E7EF · rosa #EBB4D2 · inchiostro #14110F
   Jost (riga piana) + Playfair Display corsivo (riga emotiva)
   Prima il telefono: tutto parte da 390px e cresce.
   ========================================================================== */

:root {
  --vino: #7B2B47;
  --vino-scuro: #5C1F35;
  --notte: #24101A;
  --crema: #F2E7EF;
  --crema-chiara: #FAF4F8;
  --rosa: #EBB4D2;
  --rosa-tenue: #F6DDEA;
  --inchiostro: #14110F;

  --font-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;

  --raggio-s: 14px;
  --raggio-m: 20px;
  --raggio-l: 28px;
  --pillola: 999px;

  --ease-out: cubic-bezier(.16, .84, .32, 1);
  --ease-dolce: cubic-bezier(.65, 0, .35, 1);

  --margine: clamp(20px, 5.2vw, 56px);
  --largo: 1200px;
  --testata: 64px;

  /* stella a 18 punte: maschera delle foto (motivo del design system) */
  --stella: polygon(50% 0%, 57.64% 6.67%, 67.1% 3.02%, 72% 11.89%, 82.14% 11.7%, 83.71% 21.72%, 93.3% 25%, 91.35% 34.95%, 99.24% 41.32%, 94% 50%, 99.24% 58.68%, 91.35% 65.05%, 93.3% 75%, 83.71% 78.28%, 82.14% 88.3%, 72% 88.11%, 67.1% 96.98%, 57.64% 93.33%, 50% 100%, 42.36% 93.33%, 32.9% 96.98%, 28% 88.11%, 17.86% 88.3%, 16.29% 78.28%, 6.7% 75%, 8.65% 65.05%, 0.76% 58.68%, 6% 50%, 0.76% 41.32%, 8.65% 34.95%, 6.7% 25%, 16.29% 21.72%, 17.86% 11.7%, 28% 11.89%, 32.9% 3.02%, 42.36% 6.67%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata) + 16px);
}
body {
  margin: 0;
  background: var(--crema);
  color: var(--vino);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }
.sez--crema :focus-visible, .sez--chiara :focus-visible, .sez--rosa :focus-visible, .articolo :focus-visible { outline-color: var(--vino); }
::selection { background: var(--rosa); color: var(--vino-scuro); }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--crema); color: var(--vino); padding: 10px 18px;
  border-radius: var(--pillola); font-weight: 500; text-decoration: none; transition: top .2s;
}
.salta:focus { top: 12px; }
.contenitore { width: min(100% - 2 * var(--margine), var(--largo)); margin-inline: auto; }
.stretto { max-width: 42rem; }
.centro { text-align: center; margin-inline: auto; }

/* ---------- Tipografia del brand ---------- */
.occhiello {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 20px;
}
.occhiello::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.centro .occhiello, .occhiello.centro { justify-content: center; }

/* Titolo a due voci: riga piana (sans) + riga emotiva (serif corsivo) */
.titolo { font-size: clamp(2.15rem, 7.6vw, 4.1rem); font-weight: 300; line-height: 1.05; }
.titolo--xl { font-size: clamp(2.75rem, 12vw, 6.6rem); line-height: 1; }
.titolo--m { font-size: clamp(1.85rem, 5.8vw, 3rem); }
.titolo > span, .titolo > em { display: block; }
.titolo em, em.corsivo, .corsivo {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em;
}
.titolo em { color: var(--accento, inherit); }
.lead { font-size: clamp(1.12rem, 2.7vw, 1.34rem); line-height: 1.55; max-width: 38rem; }
.titolo + .lead, .titolo + p { margin-top: 22px; }
.piccolo { font-size: .9rem; line-height: 1.55; }
.fonte { font-size: .82rem; opacity: .78; }
.fonte a { text-decoration: underline; }

/* ---------- Sezioni ---------- */
.sez { position: relative; padding-block: clamp(80px, 13vw, 150px); }
.sez--stretta { padding-block: clamp(56px, 9vw, 96px); }
.sez--vino { background: var(--vino); color: var(--crema); --accento: var(--rosa); }
.sez--notte { background: var(--notte); color: var(--crema); --accento: var(--rosa); }
.sez--inchiostro { background: var(--inchiostro); color: var(--crema); --accento: var(--rosa); }
.sez--crema { background: var(--crema); color: var(--vino); --accento: var(--vino); }
.sez--chiara { background: var(--crema-chiara); color: var(--vino); --accento: var(--vino); }
.sez--rosa { background: var(--rosa); color: var(--vino-scuro); --accento: var(--vino); }
.testa-sez { margin-bottom: clamp(40px, 6vw, 68px); }
.testa-sez .lead { margin-top: 22px; }
.testa-sez.centro .lead { margin-inline: auto; }

/* ---------- Testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 60;
  background: var(--vino); color: var(--crema);
  border-bottom: 1px solid rgba(242, 231, 239, .12);
}
.testata__in { height: var(--testata); display: flex; align-items: center; gap: 10px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; border-radius: 12px; }
.marchio__logo { width: auto; height: 42px; flex: none; transform-origin: 70% 90%; transition: transform .6s var(--ease-out); }
.marchio:hover .marchio__logo { transform: rotate(-6deg) scale(1.04); }
.piede .marchio__logo { height: 56px; }
.marchio__nome { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1; white-space: nowrap; }
@media (max-width: 519.98px) { .testata .marchio__nome { display: none; } }


.esci {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px;
  border-radius: var(--pillola); border: 1px solid rgba(242, 231, 239, .5);
  background: transparent; color: var(--crema); font-size: .86rem; font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.esci:hover { background: var(--crema); color: var(--vino); }
.esci svg { width: 15px; height: 15px; }

.menu-btn {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  position: relative; cursor: pointer; flex: none; margin-right: -8px;
}
.menu-btn__riga { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.menu-btn__riga:nth-child(1) { top: 17px; }
.menu-btn__riga:nth-child(2) { top: 26px; }
.menu-aperto .menu-btn__riga:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-aperto .menu-btn__riga:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.nav ul { list-style: none; }
@media (max-width: 1079.98px) {
  .nav {
    position: fixed; inset: var(--testata) 0 0 0; z-index: 59;
    display: flex; flex-direction: column; gap: 32px;
    background: var(--vino); padding: 36px var(--margine) calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .menu-aperto .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-aperto body { overflow: hidden; }
  .nav ul { display: grid; gap: 4px; }
  .nav a:not(.btn) { display: block; font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 300; line-height: 1.2; text-decoration: none; padding: 6px 0; }
  .nav a[aria-current="page"] { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--rosa); }
  .nav__nota { font-size: .92rem; opacity: .8; margin: 0; }
}
@media (min-width: 1080px) {
  .menu-btn { display: none; }
  .nav { display: flex; align-items: center; gap: 30px; margin-right: 6px; }
  .nav ul { display: flex; gap: 28px; }
  .nav a:not(.btn) { position: relative; text-decoration: none; font-size: .98rem; padding: 6px 0; }
  .nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
  }
  .nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { font-family: var(--font-serif); font-style: italic; color: var(--rosa); }
  .nav .btn { min-height: 42px; padding: 10px 20px; font-size: .94rem; }
  .nav__nota { display: none; }
}

/* ---------- Bottoni e pillole ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 26px; border-radius: var(--pillola);
  font-weight: 500; font-size: 1.02rem; line-height: 1.2; text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: filter .2s var(--ease-out), transform .14s var(--ease-out), background-color .2s, color .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--crema { background: var(--crema); color: var(--vino); }
.btn--vino { background: var(--vino); color: var(--crema); }
.btn--rosa { background: var(--rosa); color: var(--vino-scuro); }
.btn--linea { background: transparent; border-color: currentColor; }
.btn--linea:hover { filter: none; background: rgba(242, 231, 239, .1); }
.sez--crema .btn--linea:hover, .sez--chiara .btn--linea:hover { background: rgba(123, 43, 71, .07); }
.btn__doppio { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; }
.btn__sotto { font-size: .78rem; font-weight: 400; opacity: .82; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.pillola {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--raggio-l);
  background: var(--crema); color: var(--vino); border: 1px solid var(--vino);
  font-weight: 500; font-size: .92rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.pillola--mini { padding: 4px 12px; font-size: .78rem; }
.pillola--vuota { background: transparent; color: inherit; border-color: currentColor; }
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Aiuto fisso (telefono) ---------- */
.aiuto-fisso {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px 8px 8px;
  background: var(--crema); color: var(--vino); border-radius: var(--pillola);
  text-decoration: none; box-shadow: 0 12px 26px -10px rgba(20, 17, 15, .55);
  transition: transform .45s var(--ease-out), opacity .3s;
}
.aiuto-fisso__num {
  flex: none; display: grid; place-items: center; width: 64px; height: 44px; border-radius: var(--pillola);
  background: var(--vino); color: var(--crema); font-weight: 500; font-size: 1.12rem; letter-spacing: .02em;
}
.aiuto-fisso__testo { display: flex; flex-direction: column; line-height: 1.2; font-size: .8rem; }
.aiuto-fisso__testo strong { font-weight: 500; font-size: .98rem; }
.aiuto-fisso.nascosto { transform: translateY(140%); opacity: 0; pointer-events: none; }
.menu-aperto .aiuto-fisso { opacity: 0; pointer-events: none; }
@media (min-width: 1080px) { .aiuto-fisso { display: none; } }

/* ---------- Stella (maschera foto) e duotono ---------- */
.stella { clip-path: var(--stella); aspect-ratio: 1; overflow: hidden; }
.stella img { width: 100%; height: 100%; object-fit: cover; }
.duotono { position: relative; background: var(--vino); isolation: isolate; }
.duotono img { mix-blend-mode: luminosity; filter: contrast(1.08) brightness(1.06); }
.duotono::after { content: ""; position: absolute; inset: 0; background: var(--rosa); mix-blend-mode: soft-light; opacity: .4; pointer-events: none; }

/* ---------- Animazioni d'ingresso ---------- */
.js [data-svela] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-svela].visto { opacity: 1; transform: none; }
.righe > span, .righe > em { display: block; }
.js .righe > span, .js .righe > em { overflow: hidden; padding: 0 .12em .1em 0; margin-bottom: -.1em; }
.js .righe > * > span { display: block; transform: translateY(108%); transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 60ms); }
.js .righe.visto > * > span { transform: none; }

/* ==========================================================================
   HOME
   ========================================================================== */
.eroe { padding-block: clamp(36px, 7vw, 96px) clamp(72px, 11vw, 130px); overflow: hidden; }
.eroe__griglia { display: grid; gap: 44px; align-items: center; }
.eroe__testo .pillola { margin-bottom: 26px; }
.eroe .titolo { margin-bottom: 24px; }
.eroe .titolo--xl { font-size: clamp(2.75rem, 11vw, 5.6rem); }
.eroe .lead { margin-bottom: 30px; }
.eroe__visual { position: relative; width: min(100%, 520px); margin-inline: auto; }
.eroe__stella { width: 100%; }
.eroe__stella img { transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.carico .eroe__stella img { transform: scale(1); }
.eroe__bolla {
  position: absolute; right: -3%; top: 3%; width: 34%; min-width: 104px; height: auto;
  filter: drop-shadow(0 12px 22px rgba(20, 17, 15, .28));
}
.eroe__hashtag { position: absolute; left: 4%; bottom: 10%; box-shadow: 0 10px 24px -10px rgba(20, 17, 15, .5); }
.js .eroe__stella { opacity: 0; transform: rotate(-10deg) scale(.92); transition: opacity 1.1s var(--ease-out), transform 1.6s var(--ease-out); }
.js .carico .eroe__stella { opacity: 1; transform: none; }
.js .eroe__bolla { opacity: 0; transform: translateY(14px) scale(.9); transform-origin: 20% 90%; transition: opacity .7s var(--ease-out) .7s, transform .9s var(--ease-out) .7s; }
.js .carico .eroe__bolla { opacity: 1; transform: none; }
.js .eroe__hashtag { opacity: 0; transform: translateX(-12px); transition: opacity .7s var(--ease-out) 1s, transform .9s var(--ease-out) 1s; }
.js .carico .eroe__hashtag { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .eroe__griglia { grid-template-columns: 1.08fr .92fr; gap: 56px; }
}

/* Barra dei numeri utili */
.numeri-utili { background: var(--crema); color: var(--vino); }
.numeri-utili__in { display: grid; gap: 1px; background: rgba(123, 43, 71, .16); border-block: 1px solid rgba(123, 43, 71, .16); }
.numero-utile { background: var(--crema); display: flex; align-items: center; gap: 18px; padding: 22px 4px; text-decoration: none; }
.numero-utile__cifra { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 2.3rem; line-height: 1; min-width: 86px; }
.numero-utile__testo { line-height: 1.4; font-size: .98rem; }
.numero-utile__testo strong { display: block; font-weight: 500; font-size: 1.04rem; }
.numero-utile:hover .numero-utile__cifra { color: var(--vino-scuro); }
@media (min-width: 760px) {
  .numeri-utili__in { grid-template-columns: repeat(3, 1fr); border-block: 0; background: transparent; gap: 0; }
  .numero-utile { padding: 30px 26px; border-left: 1px solid rgba(123, 43, 71, .16); }
  .numero-utile:first-child { border-left: 0; padding-left: 0; }
}

/* Il progetto: tre obiettivi */
.manifesto { display: grid; gap: 48px; }
.manifesto__testo p { font-size: 1.12rem; }
.obiettivi { list-style: none; display: grid; gap: 14px; }
.obiettivo { border-top: 1px solid rgba(123, 43, 71, .2); padding-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.obiettivo__num { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; opacity: .7; padding-top: 6px; }
.obiettivo h3 { font-size: 1.9rem; font-weight: 300; }
.obiettivo p { grid-column: 2; margin: 0; }
@media (min-width: 900px) {
  .manifesto { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
}

/* Sette pilastri */
.pilastri { list-style: none; display: grid; counter-reset: pil; border-top: 1px solid rgba(242, 231, 239, .2); }
.pilastro { border-bottom: 1px solid rgba(242, 231, 239, .2); }
.pilastro a { display: grid; grid-template-columns: 52px 1fr 24px; gap: 4px 14px; align-items: baseline; padding: 22px 0; text-decoration: none; }
.pilastro__num { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--rosa); line-height: 1; }
.pilastro__nome { font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 300; line-height: 1.15; }
.pilastro__desc { grid-column: 2; font-size: .98rem; line-height: 1.5; opacity: .86; }
.pilastro__freccia { grid-row: 1; grid-column: 3; width: 22px; height: 22px; align-self: center; transition: transform .35s var(--ease-out); }
.pilastro a:hover .pilastro__freccia { transform: translateX(5px); }
.pilastro a:hover .pilastro__nome { font-family: var(--font-serif); font-style: italic; }
@media (min-width: 900px) {
  .pilastri { grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .pilastro:nth-child(-n+2) { border-top: 1px solid rgba(242, 231, 239, .2); }
}

/* Mito / fatto: carte da girare */
.miti {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--margine) 18px; margin-inline: calc(-1 * var(--margine));
  scroll-padding-inline: var(--margine); scrollbar-width: none; list-style: none;
}
.miti::-webkit-scrollbar { display: none; }
.miti > li { scroll-snap-align: start; }
@media (min-width: 900px) {
  .miti { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 0; margin: 0; gap: 22px; }
}
/* La carta è un div in 3D; il pulsante trasparente sopra riceve il tocco
   (un <button> come contenitore 3D in WebKit appiattisce le facce). */
.mito { position: relative; aspect-ratio: 4 / 5; perspective: 1400px; border-radius: var(--raggio-l); }
.mito__giro {
  position: absolute; inset: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .8s var(--ease-dolce);
}
.mito.girata .mito__giro { transform: rotateY(180deg); }
.mito__faccia {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 6.5%, 32px); border-radius: var(--raggio-l);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mito__faccia p { margin: 0; }
.mito__faccia .mito__testo { margin-top: auto; }
.mito__faccia .pillola { align-self: flex-start; }
/* Scambio delle facce a metà giro: non dipende da backface-visibility,
   che senza accelerazione grafica alcuni motori ignorano. */
.mito__fronte, .mito__retro { transition: visibility 0s linear .4s; }
.mito__retro { visibility: hidden; }
.mito.girata .mito__fronte { visibility: hidden; }
.mito.girata .mito__retro { visibility: visible; }
.mito__tocco {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: transparent; border-radius: var(--raggio-l); cursor: pointer;
}
.mito__fronte { background: var(--vino); color: var(--crema); }
.mito__retro { background: var(--crema-chiara); color: var(--vino); transform: rotateY(180deg); border: 1px solid rgba(123, 43, 71, .2); }
.mito__fronte .pillola { background: var(--crema); }
.mito__testo { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 6.4vw, 1.95rem); line-height: 1.16; margin-top: auto; }
.mito__fatto { font-size: 1.04rem; line-height: 1.55; margin-top: 4px; }
.mito__fatto strong { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.mito__gira { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; opacity: .8; }
.mito__gira svg { width: 16px; height: 16px; }
.mito__retro .mito__gira { margin-top: auto; }
.mito:hover .mito__fronte .mito__gira { opacity: 1; }
.mito__tocco:focus-visible { outline: 2px solid var(--vino); outline-offset: 4px; }
.miti-nota { display: flex; align-items: center; gap: 10px; font-size: .9rem; opacity: .8; margin: 6px 0 0; }
@media (min-width: 900px) { .miti-nota--telefono { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mito__giro { transition: none; }
}

/* Ti riconosci? */
.riconosci { display: grid; gap: 40px; }
.test { border: 0; margin: 0; padding: 0; min-width: 0; }
.test__voci { display: grid; gap: 10px; }
.test__voce {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--raggio-m); cursor: pointer;
  background: var(--crema-chiara); border: 1px solid rgba(123, 43, 71, .16);
  transition: background .25s, border-color .25s, transform .14s var(--ease-out);
}
.test__voce:active { transform: scale(.985); }
.test__voce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.test__casella {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--vino);
  display: grid; place-items: center; margin-top: 1px; transition: background .25s;
}
.test__casella svg { width: 14px; height: 14px; stroke: var(--crema); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease-out); }
.test__voce input:checked ~ .test__casella { background: var(--vino); }
.test__voce input:checked ~ .test__casella svg { opacity: 1; transform: none; }
.test__voce:has(input:checked) { background: var(--rosa-tenue); border-color: var(--vino); }
.test__voce input:focus-visible ~ .test__casella { outline: 2px solid var(--vino); outline-offset: 3px; }
.test__esito {
  margin-top: 18px; padding: 24px; border-radius: var(--raggio-l);
  background: var(--vino); color: var(--crema); --accento: var(--rosa);
}
.test__esito p:last-of-type { margin-bottom: 0; }
.test__esito .titolo { font-size: 1.6rem; margin-bottom: 12px; }
.test__esito .azioni { margin-top: 18px; }
.test__esito[data-stato="vuoto"] { background: transparent; color: var(--vino); border: 1px dashed rgba(123, 43, 71, .35); }
@media (min-width: 900px) {
  .riconosci { grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
  .riconosci__testa { position: sticky; top: calc(var(--testata) + 40px); }
}

/* Il vocabolario della violenza */
.vocabolario { list-style: none; display: grid; gap: clamp(26px, 5vw, 40px); max-width: 46rem; margin-inline: auto; }
.frase { display: grid; gap: 10px; justify-items: start; }
.frase:nth-child(even) { justify-items: end; text-align: right; }
.frase__bolla {
  position: relative; margin: 0; max-width: 34rem;
  padding: 18px 22px; border-radius: 26px 26px 26px 8px;
  background: rgba(242, 231, 239, .07); border: 1px solid rgba(242, 231, 239, .2);
  font-size: clamp(1.12rem, 3.6vw, 1.42rem); line-height: 1.4;
  transition: opacity .6s var(--ease-out), color .6s;
}
.frase:nth-child(even) .frase__bolla { border-radius: 26px 26px 8px 26px; }
/* La barratura e' lo sfondo del testo: con box-decoration-break ogni riga
   di testo ha la sua riga, anche quando la frase va a capo. */
.frase__testo {
  background-image: linear-gradient(var(--rosa), var(--rosa));
  background-repeat: no-repeat; background-position: left 0 top 57%; background-size: 100% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.frase:nth-child(even) .frase__testo { background-position: right 0 top 57%; }
.js .frase .frase__testo { background-size: 0% 2px; transition: background-size .75s var(--ease-dolce) .15s; }
.js .frase.colpita .frase__testo { background-size: 100% 2px; }
.frase__timbro {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  color: var(--rosa); line-height: 1.1;
}
.frase__timbro::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.frase:nth-child(even) .frase__timbro { flex-direction: row-reverse; }
.js .frase .frase__timbro { opacity: 0; transform: translateY(8px) rotate(-2deg); transition: opacity .6s var(--ease-out) .55s, transform .8s var(--ease-out) .55s; }
.js .frase.colpita .frase__timbro { opacity: 1; transform: rotate(-2deg); }
.js .frase.colpita .frase__bolla { opacity: .62; }
.forme { margin-top: clamp(56px, 9vw, 96px); text-align: center; }
.forme .pillole { justify-content: center; margin-top: 22px; }
.forme .pillola { background: transparent; color: var(--crema); border-color: rgba(242, 231, 239, .45); }
.mantra { margin-top: clamp(48px, 8vw, 80px); text-align: center; }
.mantra p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.9rem); line-height: 1.18; margin: 0; }
.mantra p:nth-child(2) { color: var(--rosa); }

/* Teaser Mongolfiera */
.teaser-m { overflow: hidden; }
.teaser-m__griglia { display: grid; gap: 40px; align-items: center; }
.numero-grande { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 18px; }
.numero-grande__cifra { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(5.5rem, 26vw, 10rem); line-height: .9; color: var(--rosa); font-variant-numeric: lining-nums; }
.numero-grande__testo { font-size: 1.1rem; line-height: 1.35; max-width: 11rem; }
.ripartizione { display: flex; height: 14px; border-radius: var(--pillola); overflow: hidden; gap: 3px; margin-bottom: 12px; max-width: 30rem; }
.ripartizione span { display: block; height: 100%; transform-origin: left; transition: transform 1.4s var(--ease-out); }
.ripartizione__donne { flex: 34; background: var(--crema); border-radius: var(--pillola) 0 0 var(--pillola); }
.ripartizione__minori { flex: 58; background: var(--rosa); border-radius: 0 var(--pillola) var(--pillola) 0; transition-delay: .25s !important; }
.js .ripartizione span { transform: scaleX(0); }
.js .visto .ripartizione span, .js .ripartizione.visto span { transform: none; }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .98rem; margin-bottom: 30px; }
.legenda li { display: inline-flex; align-items: center; gap: 9px; }
.legenda i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legenda .donne i { background: var(--crema); }
.legenda .minori i { background: var(--rosa); }
.legenda strong { font-weight: 500; }
.teaser-m__visual { position: relative; width: min(64%, 320px); margin-inline: auto; }
.teaser-m__visual svg { width: 100%; height: auto; overflow: visible; }
.galleggia { animation: galleggia 7s var(--ease-dolce) infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes galleggia {
  from { transform: translateY(6px) rotate(-1.4deg); }
  to { transform: translateY(-10px) rotate(1.4deg); }
}
@media (min-width: 900px) { .teaser-m__griglia { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* Per chi sta intorno */
.intorno { display: grid; gap: 44px; align-items: center; }
.passi { list-style: none; display: grid; gap: 26px; counter-reset: passo; }
.passo { display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; }
.passo__num { grid-row: span 2; font-family: var(--font-serif); font-style: italic; font-size: 2.6rem; line-height: .9; }
.passo h3 { font-size: 1.55rem; font-weight: 400; }
.passo p { margin: 0; }
.intorno__foto { width: min(74%, 440px); margin-inline: auto; }
@media (min-width: 900px) { .intorno { grid-template-columns: .9fr 1.1fr; gap: 80px; } .intorno__foto { order: -1; } }

/* Sostegno (striscia sponsor) */
.sostegno { display: grid; gap: 26px; align-items: center; padding: clamp(28px, 5vw, 48px); border-radius: var(--raggio-l); background: var(--crema-chiara); border: 1px solid rgba(123, 43, 71, .18); }
.sostegno__nome { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 300; line-height: 1.12; margin: 6px 0 0; }
.sostegno__nome em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
@media (min-width: 900px) { .sostegno { grid-template-columns: 1fr auto; gap: 48px; } }

/* Segui WIS */
.segui { text-align: center; }
.segui__handle { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 8.5vw, 4.6rem); line-height: 1.1; margin: 18px 0 24px; overflow-wrap: anywhere; }
.social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.social .btn { min-height: 48px; padding: 12px 24px; }
.segui .pillole { justify-content: center; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.griglia-post { display: grid; gap: 34px 24px; }
@media (min-width: 640px) { .griglia-post { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .griglia-post { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card__link { display: block; text-decoration: none; border-radius: var(--raggio-l); }
.post-card .copertina { transition: transform .5s var(--ease-out); }
.post-card__link:hover .copertina { transform: translateY(-4px) rotate(-.6deg); }
.post-card__meta { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; font-size: .86rem; }
.post-card__estratto { margin: 0; font-size: .98rem; line-height: 1.55; }
.post-card[hidden] { display: none; }

/* Copertina tipografica in 4:5, come i post di Instagram.
   Il margine interno e' in % (della larghezza): le unita' cqi valgono solo per i figli,
   misurate sullo spazio interno della copertina. --k rimpicciolisce i titoli lunghi
   (lo calcola genera_blog.py), cosi' il testo resta grande ma non esce mai. */
.copertina {
  container-type: inline-size; position: relative; aspect-ratio: 4 / 5; border-radius: var(--raggio-l);
  display: flex; flex-direction: column; padding: 8% 8% 7%;
  background: var(--vino); color: var(--crema); --accento: var(--rosa);
}
.copertina--crema { background: var(--crema-chiara); color: var(--vino); --accento: var(--vino); border: 1px solid rgba(123, 43, 71, .2); }
.copertina--notte { background: var(--notte); color: var(--crema); --accento: var(--rosa); }
.copertina--rosa { background: var(--rosa); color: var(--vino-scuro); --accento: var(--vino); }
.copertina__logo { width: 24cqi; height: auto; align-self: flex-start; }
.copertina__titolo { margin: auto 0 0; padding-top: 6cqi; font-size: calc(12.6cqi * var(--k, 1)); font-weight: 400; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.copertina__titolo span, .copertina__titolo em { display: block; }
.copertina__titolo em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accento); margin-top: .08em; }
.copertina__firma { margin-top: 6cqi; font-size: 4.6cqi; font-weight: 500; line-height: 1.2; }
/* sul telefono le copertine in griglia sono orizzontali: meno altezza, testo sempre grande */
@media (max-width: 639.98px) {
  .griglia-post .copertina { aspect-ratio: 5 / 4; padding: 7% 7% 6%; }
  .griglia-post .copertina__logo { width: 19cqi; }
  .griglia-post .copertina__titolo { padding-top: 4cqi; font-size: calc(11.4cqi * var(--k, 1)); }
  .griglia-post .copertina__firma { margin-top: 4cqi; font-size: 4.2cqi; }
}

.filtri { display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--margine) 14px; margin: 0 calc(-1 * var(--margine)) 30px; scrollbar-width: none; }
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; padding: 9px 18px; border-radius: var(--pillola); border: 1px solid rgba(123, 43, 71, .35);
  background: transparent; color: var(--vino); font-size: .92rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.filtro:hover { border-color: var(--vino); }
.filtro[aria-pressed="true"] { background: var(--vino); color: var(--crema); border-color: var(--vino); }
.filtro small { font-weight: 400; opacity: .7; margin-left: 4px; }
@media (min-width: 900px) { .filtri { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0 0 40px; } }
.blog-vuoto { padding: 40px 0; text-align: center; }

/* Articolo */
.articolo-testa { padding-block: clamp(28px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.articolo-testa__griglia { display: grid; gap: 32px; align-items: end; }
.articolo-testa .copertina { width: min(100%, 460px); }
.articolo-testa__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: .92rem; margin-top: 18px; }
.briciole { font-size: .86rem; margin-bottom: 22px; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.briciole li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .6; }
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
@media (max-width: 899.98px) { .articolo-testa .copertina { display: none; } }
@media (min-width: 900px) { .articolo-testa__griglia { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.articolo-testa__meta .pillola { background: var(--crema); }

.articolo { background: var(--crema-chiara); color: var(--vino); padding-block: clamp(56px, 9vw, 110px); }
.articolo__corpo { max-width: 40rem; margin-inline: auto; font-size: 1.1rem; line-height: 1.75; }
.articolo__corpo > p:first-child { font-size: 1.28rem; line-height: 1.6; }
.articolo__corpo h2 { font-size: clamp(1.7rem, 5vw, 2.25rem); font-weight: 300; margin: 2.2em 0 .7em; }
.articolo__corpo h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.articolo__corpo ul { list-style: none; display: grid; gap: 10px; margin: 0 0 1.4em; }
.articolo__corpo ul li { position: relative; padding-left: 28px; }
.articolo__corpo ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 10px; background: var(--rosa); clip-path: var(--stella); transform: scale(1.4); }
.articolo__corpo blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--rosa);
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 4.4vw, 1.75rem); line-height: 1.3;
}
.articolo__corpo blockquote p { margin: 0; }
.frasi-tossiche { display: grid; gap: 10px; margin: 0 0 1.4em; list-style: none; }
.frasi-tossiche li { padding: 14px 18px !important; border-radius: 22px 22px 22px 6px; background: var(--crema); border: 1px solid rgba(123, 43, 71, .16); }
.frasi-tossiche li::before { display: none; }
.mito-fatto { display: grid; gap: 12px; margin: 0 0 1.6em; padding: 22px; border-radius: var(--raggio-l); background: var(--crema); border: 1px solid rgba(123, 43, 71, .16); }
.mito-fatto p { margin: 0; }
.mito-fatto .mito-fatto__mito { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.3; }
.mito-fatto .pillola { justify-self: start; }
.firma-cta { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid rgba(123, 43, 71, .2); font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; }

.box-aiuto {
  max-width: 40rem; margin: clamp(48px, 8vw, 72px) auto 0; padding: clamp(26px, 5vw, 38px);
  border-radius: var(--raggio-l); background: var(--vino); color: var(--crema); --accento: var(--rosa);
}
.box-aiuto .titolo { font-size: clamp(1.6rem, 5vw, 2.1rem); margin-bottom: 14px; }
.box-aiuto p { margin-bottom: 20px; }
.condividi { max-width: 40rem; margin: 40px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.condividi__titolo { width: 100%; font-size: .92rem; margin: 0 0 4px; }
.condividi .btn { min-height: 46px; padding: 10px 18px; font-size: .94rem; }
.correlati { padding-block: clamp(64px, 10vw, 110px); }
.navigazione-post { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; }

/* ==========================================================================
   LA MONGOLFIERA
   ========================================================================== */
.ascesa { position: relative; background: var(--inchiostro); color: var(--crema); --accento: var(--rosa); }
.ascesa__palco { position: relative; }
.ascesa__cielo { display: none; }
.ascesa__capitoli { position: relative; }
.capitolo { padding: 72px var(--margine); max-width: 46rem; }
.capitolo .titolo { margin-bottom: 18px; }
.capitolo p { font-size: 1.08rem; }
.capitolo__primo .titolo { font-size: clamp(3rem, 14vw, 7rem); }
.scorri { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; opacity: .85; margin-top: 8px; }
.scorri svg { width: 18px; height: 18px; animation: scorri 2.2s var(--ease-dolce) infinite; }
@keyframes scorri { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.equipaggio { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.membro { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; }
.membro__num { grid-row: span 2; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .9; color: var(--accento); min-width: 1.4em; }
.membro__nome { font-size: 1.04rem; line-height: 1.3; }
.membro__punti { display: flex; flex-wrap: wrap; gap: 4px; }
.membro__punti i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; display: block; }

/* modalità scena (JS attivo, movimento consentito) */
.js-ascesa .ascesa { height: 560vh; height: 560svh; }
.js-ascesa .ascesa__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--inchiostro); transition: color .6s; }
.js-ascesa .ascesa__cielo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.js-ascesa .ascesa__capitoli { position: absolute; inset: 0; pointer-events: none; }
.js-ascesa .capitolo {
  position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  padding: 0 var(--margine); max-width: 40rem; opacity: 0; visibility: hidden; will-change: opacity, transform;
  transform: translateY(var(--sp, 0px));
}
.js-ascesa .capitolo.attivo { visibility: visible; pointer-events: auto; }
.js-ascesa .capitolo .titolo { font-size: clamp(1.85rem, min(7.6vw, 5.2vh), 3.6rem); margin-bottom: 12px; }
.js-ascesa .capitolo__primo .titolo { font-size: clamp(2.7rem, min(13vw, 9vh), 6.6rem); }
.js-ascesa .capitolo p { font-size: clamp(.98rem, 2.2vh, 1.12rem); line-height: 1.5; margin-bottom: .6em; }
.js-ascesa .membro__num { font-size: clamp(2.1rem, 5.6vh, 3.4rem); }
.js-ascesa .equipaggio { gap: 10px; }
.ascesa__palco.alba { color: var(--vino); --accento: var(--vino); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .js-ascesa .capitolo { top: 50%; bottom: auto; transform: translateY(calc(-50% + var(--sp, 0px))); left: max(var(--margine), calc((100vw - var(--largo)) / 2)); right: auto; width: min(44%, 36rem); padding: 0; }
}
.ascesa__palco .legenda { margin: 10px 0 0; }
.legenda .minori--alba i { background: #B8507F; }

/* elementi del disegno */
.punto { transition: fill .8s; }
.punto--donna { fill: var(--crema); }
.punto--minore { fill: var(--rosa); }
.alba .punto--donna { fill: var(--vino-scuro); }
.alba .punto--minore { fill: #B8507F; }
.ascesa__sole { fill: var(--rosa-tenue); }
.pallone-fiamma { fill: var(--rosa); }
.alba .pallone-fiamma { fill: #B8507F; }
.pallone-linea { fill: none; stroke: var(--crema); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .8s; }
.pallone-cesto { fill: var(--crema); transition: fill .8s; }
.alba .pallone-linea { stroke: var(--vino); }
.alba .pallone-cesto { fill: var(--vino); }
.ascesa--statica .pallone-cesto, .ascesa--statica .pallone-corde { opacity: 1; }

/* statico: niente movimento o niente JS */
.ascesa--statica .ascesa__cielo { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; padding-top: 40px; }

.a-bordo { display: grid; gap: 14px; list-style: none; }
.a-bordo__voce { padding: 26px; border-radius: var(--raggio-l); background: var(--crema-chiara); border: 1px solid rgba(123, 43, 71, .16); }
.a-bordo__voce h3 { font-size: 1.6rem; font-weight: 300; margin-bottom: 10px; }
.a-bordo__voce h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.a-bordo__voce p { margin: 0; }
.a-bordo__icona { width: 46px; height: 46px; margin-bottom: 18px; color: var(--vino); }
@media (min-width: 700px) { .a-bordo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .a-bordo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.verita { display: grid; gap: 40px; }
.tappe { list-style: none; display: grid; gap: 0; border-left: 1px solid rgba(242, 231, 239, .3); margin-left: 8px; }
.tappa { position: relative; padding: 0 0 30px 30px; }
.tappa:last-child { padding-bottom: 0; }
.tappa::before { content: ""; position: absolute; left: -7px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 5px var(--notte); }
.tappa h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: 6px; }
.tappa p { margin: 0; opacity: .92; }
@media (min-width: 900px) { .verita { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ==========================================================================
   SPONSOR
   ========================================================================== */
.fondo { display: grid; gap: 36px; align-items: start; }
.fondo__carta {
  position: relative; overflow: hidden; padding: clamp(28px, 6vw, 48px); border-radius: var(--raggio-l);
  background: var(--crema-chiara); color: var(--vino); border: 1px solid rgba(123, 43, 71, .2);
}
.fondo__carta .occhiello { margin-bottom: 14px; }
.fondo__nome { font-size: clamp(2rem, 7vw, 3.1rem); font-weight: 300; line-height: 1.05; margin-bottom: 18px; }
.fondo__nome em { font-family: var(--font-serif); font-style: italic; font-weight: 500; display: block; }
.fondo__stella { position: absolute; right: -60px; bottom: -60px; width: 220px; color: var(--rosa); opacity: .4; }
.fondo__carta > :not(.fondo__stella) { position: relative; z-index: 1; }
.fondo__stella polygon { fill: currentColor; }
.fatti { list-style: none; display: grid; gap: 0; }
.fatto { padding: 20px 0; border-top: 1px solid rgba(242, 231, 239, .22); display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.fatto:last-child { border-bottom: 1px solid rgba(242, 231, 239, .22); }
.fatto__segno { width: 22px; height: 22px; margin-top: 3px; color: var(--rosa); }
.fatto__segno polygon { fill: currentColor; }
.fatto p { margin: 0; }
.fatto strong { font-weight: 500; }
@media (min-width: 900px) { .fondo { grid-template-columns: .9fr 1.1fr; gap: 72px; } }

/* Il filo del sostegno */
.filo { position: relative; max-width: 980px; margin-inline: auto; }
.filo__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.filo__traccia { fill: none; stroke: rgba(123, 43, 71, .16); stroke-width: 2; }
.filo__linea { fill: none; stroke: var(--vino); stroke-width: 2.5; stroke-linecap: round; }
.filo__testa { fill: var(--rosa); stroke: var(--vino); stroke-width: 2; }
.filo__nodi { list-style: none; display: grid; gap: clamp(56px, 12vw, 120px); position: relative; }
.nodo { position: relative; padding-left: 56px; }
.nodo__punto {
  position: absolute; left: 12px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--crema); border: 2px solid rgba(123, 43, 71, .35); transition: background .5s, border-color .5s, transform .6s var(--ease-out);
}
.nodo.acceso .nodo__punto { background: var(--rosa); border-color: var(--vino); transform: scale(1.18); }
.nodo__carta { padding: 24px; border-radius: var(--raggio-l); background: var(--crema-chiara); border: 1px solid rgba(123, 43, 71, .16); }
.nodo__carta .occhiello { margin-bottom: 10px; }
.nodo__carta h3 { font-size: clamp(1.55rem, 5vw, 2.1rem); font-weight: 300; margin-bottom: 10px; }
.nodo__carta h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.nodo__carta p { margin: 0; }
.nodo--finale .nodo__carta { background: var(--vino); color: var(--crema); border-color: var(--vino); }
.js .nodo .nodo__carta { opacity: .25; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .nodo.acceso .nodo__carta { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .filo__nodi { gap: 90px; }
  .nodo { width: calc(50% - 44px); padding-left: 0; }
  .nodo:nth-child(odd) { margin-right: auto; }
  .nodo:nth-child(even) { margin-left: auto; }
  .nodo__punto { left: auto; top: 26px; }
  .nodo:nth-child(odd) .nodo__punto { right: -56px; }
  .nodo:nth-child(even) .nodo__punto { left: -56px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .nodo .nodo__carta { opacity: 1; transform: none; }
}

.rende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.rende__voce { padding: 22px 18px; border-radius: var(--raggio-l); border: 1px solid rgba(242, 231, 239, .22); }
.rende__voce .rende__cifra { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2.8rem, 12vw, 4.4rem); line-height: 1; color: var(--rosa); margin-bottom: 10px; opacity: 1; }
.rende__voce h3 { font-size: clamp(1.1rem, 4vw, 1.45rem); font-weight: 400; margin-bottom: 6px; line-height: 1.2; }
.rende__voce p { margin: 0; opacity: .9; font-size: .95rem; line-height: 1.5; }
@media (min-width: 900px) { .rende { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .rende__voce { padding: 28px; } }

/* Testa della pagina sponsor: tutta su Intesa Sanpaolo */
.eroe-intesa .titolo--xl { font-size: clamp(2.5rem, 10.6vw, 4.5rem); }
@media (max-width: 899.98px) { .eroe-intesa .sigillo { width: min(58%, 300px); } }
.numeri-intesa { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0 12px; max-width: 34rem; }
.numeri-intesa li { border-top: 1px solid rgba(242, 231, 239, .32); padding-top: 14px; }
.numeri-intesa p { margin: 0; }
.numeri-intesa__cifra { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2.8rem, 12vw, 4.2rem); line-height: 1; color: var(--rosa); margin-bottom: 10px !important; white-space: nowrap; }
.numeri-intesa__cifra small { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: .95rem; color: var(--crema); letter-spacing: .02em; }
.numeri-intesa li > p:last-child { font-size: .95rem; line-height: 1.45; }
.eroe-intesa .fonte { color: var(--crema); }

/* Sigillo "Grazie" nella testa della pagina sponsor */
.sponsor-eroe__griglia { display: grid; gap: 40px; align-items: center; }
.sigillo { position: relative; width: min(72%, 380px); margin-inline: auto; aspect-ratio: 1; }
.sigillo__stella { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.sigillo__stella polygon { fill: var(--crema); }
.sigillo__testo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--vino); }
.sigillo__testo span { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 11vw, 4.2rem); line-height: 1; }
.sigillo__testo small { display: block; font-family: var(--font-sans); font-style: normal; font-size: clamp(.78rem, 2.6vw, .95rem); margin-top: 10px; letter-spacing: .02em; line-height: 1.4; }
@media (min-width: 900px) { .sponsor-eroe__griglia { grid-template-columns: 1.15fr .85fr; gap: 64px; } }

.modi { display: grid; gap: 14px; list-style: none; counter-reset: modo; }
.modo { padding: 26px; border-radius: var(--raggio-l); background: var(--crema-chiara); border: 1px solid rgba(123, 43, 71, .16); display: grid; gap: 8px; }
.modo__num { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; opacity: .7; }
.modo h3 { font-size: 1.55rem; font-weight: 300; }
.modo p { margin: 0; }
@media (min-width: 900px) { .modi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* ==========================================================================
   PIEDE
   ========================================================================== */
.piede { background: var(--notte); color: var(--crema); padding-block: clamp(64px, 10vw, 110px) 34px; --accento: var(--rosa); }
.piede__alto { display: grid; gap: 40px; }
.piede__marchio .marchio { margin-bottom: 18px; }
.piede__marchio p { max-width: 26rem; font-size: .98rem; opacity: .9; }
.piede h2 { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; opacity: .8; }
.piede ul { list-style: none; display: grid; gap: 10px; }
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede__num { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.3rem; margin-right: 8px; color: var(--rosa); }
.piede__sicurezza { margin-top: 48px; padding: 22px 24px; border-radius: var(--raggio-m); border: 1px solid rgba(242, 231, 239, .2); font-size: .94rem; display: grid; gap: 6px; }
.piede__sicurezza strong { font-weight: 500; }
.piede__sicurezza p { margin: 0; opacity: .9; }
.piede__basso { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(242, 231, 239, .16); display: grid; gap: 8px; font-size: .84rem; opacity: .78; }
.piede__basso p { margin: 0; }
@media (min-width: 900px) {
  .piede__alto { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
  .piede__basso { grid-template-columns: 1fr auto; }
}

/* 404 */
.pagina-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; }

/* Movimento ridotto: tutto fermo e leggibile */
@media (prefers-reduced-motion: reduce) {
  .js [data-svela], .js .righe > * > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .galleggia, .scorri svg { animation: none; }
  .js .eroe__stella, .js .eroe__bolla, .js .eroe__hashtag { opacity: 1; transform: none; transition: none; }
  .eroe__stella img { transform: none; transition: none; }
  .js .frase .frase__timbro { opacity: 1; transform: rotate(-2deg); transition: none; }
  .js .frase .frase__testo { background-size: 100% 2px; transition: none; }
  .js .ripartizione span { transform: none; transition: none; }
}