/* Sito pubblico Mondo Gemelli. I valori vengono da tokens.css (stessi token dell'app e del mockup).
   Revisione «taste» (2026-10): campi di colore pieni al posto di bordi, ombre e sfumature; titoli grandi e brevi;
   movimento vario ma sobrio, solo transform e opacity, tutto dentro prefers-reduced-motion:no-preference. */
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url("font/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("font/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("font/nunito-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url("font/fredoka-latin-600-normal.woff2") format("woff2")}

/* Palette del sito, dai colori di Sara su Instagram e dal logo originale:
   crema (fondo), verde petrolio (azione e campi), pesca (campi caldi), arancio terracotta (gemello A, piccoli dettagli),
   marrone del logo come inchiostro. Niente rosa o prugna. */
.mg{
  --mg-crema:var(--base-superficie);
  --mg-crema-calda:color-mix(in oklab,var(--base-superficie) 84%,var(--pelle-base));
  --mg-pesca:color-mix(in oklab,var(--pelle-base) 56%,var(--base-superficie));
  --mg-petrolio:var(--logo-colore-a);
  --mg-petrolio-profondo:color-mix(in oklab,var(--logo-colore-a) 70%,#03191b);
  --mg-petrolio-campo:color-mix(in oklab,var(--logo-colore-a) 80%,#03191b);
  --mg-terracotta:var(--base-gemello-a);
  --mg-inchiostro:var(--logo-colore-b);
  --mg-inchiostro-tenue:color-mix(in oklab,var(--logo-colore-b) 80%,var(--base-superficie));
  --mg-su-scuro:var(--base-superficie);
  --mg-margine:clamp(16px,2.2vw,32px);
  --mg-r:28px;
  --mg-ease-out:cubic-bezier(.22,1,.36,1);
  --mg-ease-expo:cubic-bezier(.16,1,.3,1);
  --mg-ease-in-out:cubic-bezier(.76,0,.24,1);
  --t-corpo:clamp(16px,.95rem + .3vw,18px);
  --t-lead:clamp(19px,1.05rem + .5vw,24px);
  --t-dichiarazione:clamp(22px,1rem + 1.2vw,34px);
  --t-sezione:clamp(30px,1.2rem + 2.4vw,56px);
  --t-display:clamp(40px,1.4rem + 4.6vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.mg{margin:0;background:var(--mg-crema);color:var(--mg-inchiostro);font-family:var(--font-testo);font-size:var(--t-corpo);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;text-rendering:optimizeLegibility}
.mg h1,.mg h2,.mg h3,.mg h4{font-family:var(--font-titoli);font-weight:var(--peso-titolo);line-height:1.08;margin:0 0 var(--s-4);hyphens:none;overflow-wrap:normal;text-wrap:balance}
.mg h1{font-size:var(--t-display);line-height:1;letter-spacing:-.025em;max-width:16ch}
.mg h2{font-size:var(--t-sezione);letter-spacing:-.02em;margin-bottom:var(--s-5)}
.mg h3{font-size:var(--t-lead);letter-spacing:-.01em}
.mg h4{font-size:clamp(19px,.9rem + .4vw,22px)}
.mg p{margin:0 0 var(--s-4);max-width:62ch;text-wrap:pretty}
.mg a{color:var(--mg-petrolio-profondo);text-underline-offset:.18em;text-decoration-thickness:.08em}
.mg a:hover{color:var(--mg-inchiostro)}
.mg img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--mg-petrolio);outline-offset:3px}
::selection{background:var(--mg-petrolio);color:var(--mg-su-scuro)}

/* Una sola cornice: margini stretti e uguali, griglia a 12 colonne. */
.contenitore{max-width:1520px;margin:0 auto;padding:0 var(--mg-margine)}
.contenitore.stretto{max-width:1520px}
.contenitore.stretto>*{max-width:62ch}
.contenitore.stretto>h1,.contenitore.stretto>h2{max-width:20ch}
.salta{position:absolute;left:-9999px}
.salta:focus{left:var(--s-4);top:var(--s-4);background:var(--mg-crema);padding:var(--s-2) var(--s-4);z-index:10}

.mg{--logo-a:var(--logo-colore-a);--logo-b:var(--logo-colore-b)}
.logo-a{fill:var(--logo-a)}
.logo-b{fill:var(--logo-b)}
.testata-logo{transform-origin:left center;flex:0 1 auto;min-width:0;display:flex;align-items:center;min-height:44px}
.testata-logo .logo{height:40px;width:121px;display:block}
.piede-logo .logo{height:auto;width:min(100%,560px);display:block}

.barra-annuncio{background:var(--mg-petrolio-profondo);color:var(--mg-su-scuro);text-align:center;padding:8px var(--mg-margine);font-size:15px;font-weight:var(--peso-forte)}

/* Testata: una barra semplice sul fondo crema, nessuna linea. */
.testata-sito{position:sticky;top:0;z-index:5;background:var(--mg-crema);isolation:isolate}
.testata-riga{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-2);padding-bottom:var(--s-2);position:relative}
.testata-riga .nav-desktop,.testata-riga .cta-testata{display:none}
.menu-mobile{flex:none}
.menu-mobile>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:48px;min-width:48px;padding:0 var(--s-4);border-radius:999px;background:var(--mg-crema-calda);cursor:pointer;font-weight:var(--peso-forte);color:var(--mg-inchiostro);user-select:none}
.menu-mobile>summary::-webkit-details-marker{display:none}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s}
.hamburger{position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}
.menu-mobile[open] .hamburger{background:transparent}
.menu-mobile[open] .hamburger::before{transform:translateY(6px) rotate(45deg)}
.menu-mobile[open] .hamburger::after{transform:translateY(-6px) rotate(-45deg)}
/* Il menu aperto galleggia davvero sopra la pagina: qui l'ombra è ammessa. */
.nav-mobile{position:absolute;left:0;right:0;top:100%;background:var(--mg-crema);box-shadow:0 18px 30px color-mix(in oklab,var(--mg-inchiostro) 18%,transparent);padding:var(--s-2) var(--mg-margine) var(--s-5);display:flex;flex-direction:column} /* taste-skill-ignore: menu sovrapposto */
.nav-mobile a:not(.cta){display:flex;align-items:center;min-height:52px;padding:0 var(--s-2);color:var(--mg-inchiostro);font-family:var(--font-titoli);font-weight:var(--peso-titolo);font-size:22px;text-decoration:none}
.nav-mobile a[aria-current="page"]{color:var(--mg-petrolio-profondo)}
.nav-mobile .cta{margin-top:var(--s-4)}

/* Pulsanti: pieni, completamente arrotondati, un solo colore. */
.cta{display:flex;width:100%;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:var(--s-2) var(--s-5);border-radius:999px;font-weight:var(--peso-numero);font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.mg .cta-primario{background:var(--mg-petrolio);color:var(--mg-su-scuro)}
.mg .cta-primario:hover{background:var(--mg-petrolio-profondo);color:var(--mg-su-scuro)}
.mg .cta-secondario{background:var(--mg-crema-calda);color:var(--mg-inchiostro)}
.mg .cta-secondario:hover{background:var(--mg-pesca);color:var(--mg-inchiostro)}
.azioni{display:flex;flex-direction:column;gap:var(--s-3);margin:var(--s-5) 0}

/* Campi di colore: ogni sezione può cambiare fondo, con il suo inchiostro. */
.campo-petrolio{background:var(--mg-petrolio-campo);color:var(--mg-su-scuro);--logo-a:var(--mg-su-scuro);--logo-b:var(--mg-su-scuro)}
.mg .campo-petrolio a:not(.cta){color:var(--mg-su-scuro)}
.mg .campo-petrolio .cta-primario{background:var(--mg-su-scuro);color:var(--mg-petrolio-profondo)}
.mg .campo-petrolio .cta-primario:hover{background:var(--mg-pesca);color:var(--mg-inchiostro)}
.mg .campo-petrolio .cta-secondario{background:var(--mg-petrolio-profondo);color:var(--mg-su-scuro)}
.campo-pesca{background:var(--mg-pesca)}
.campo-crema{background:var(--mg-crema-calda)}

/* Eroe delle pagine interne: titolo a sinistra, frase e azione a destra, sul campo petrolio. */
.eroe{padding:clamp(48px,7vw,120px) 0 clamp(48px,6vw,104px)}
.eroe-riga{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:end}
.eroe .maschera{overflow:clip;padding-bottom:.08em;margin-bottom:var(--s-4)}
.eroe .maschera>h1{margin:0}
.eroe-testo>:last-child{margin-bottom:0}
.lead{font-size:var(--t-lead);line-height:1.38}
.dichiarazione{font-family:var(--font-titoli);font-weight:var(--peso-titolo);font-size:var(--t-dichiarazione);line-height:1.2;letter-spacing:-.01em}
.mg p.dichiarazione{max-width:28ch}
.eroe .dichiarazione{font-size:var(--t-lead);line-height:1.3}
.mg .eroe p.dichiarazione{max-width:46ch}
.occhiello{font-size:15px;font-weight:var(--peso-forte);color:var(--mg-inchiostro-tenue)}
.campo-petrolio .occhiello{color:var(--mg-su-scuro)}

/* Eroe della home: il titolo grande e il logo illustrato su due dischi, uno per gemello. */
.eroe-home{padding:clamp(40px,5vw,88px) 0 clamp(56px,6vw,112px);overflow:clip}
.eroe-home .eroe-riga{align-items:center}
.eroe-figura{position:relative;margin:0;justify-self:center;width:min(100%,560px);aspect-ratio:1}
.eroe-figura .disco{position:absolute;border-radius:50%;display:block}
.disco-a{inset:6% 0 2% 4%;background:var(--mg-pesca)}
.disco-b{width:30%;aspect-ratio:1;right:-2%;top:-1%;background:var(--mg-petrolio)}
.disco-c{width:13%;aspect-ratio:1;left:2%;bottom:6%;background:var(--mg-terracotta)}
.eroe-figura .cornice{position:absolute;inset:9.5% 3.5% 5.5% 7.5%;border-radius:50%;overflow:clip;background:var(--mg-crema);padding:12%;box-sizing:border-box}
/* Il logo illustrato è un quadrato con fondo crema: sta tutto dentro il cerchio (angoli compresi), nessuna lettera tagliata. */
.eroe-figura img{display:block;width:100%;height:100%;object-fit:contain}

.ritratto{margin:0;justify-self:center;width:min(100%,420px)}
.ritratto .cornice{overflow:clip;border-radius:var(--mg-r)}
.ritratto img{width:100%}
.ritratto figcaption{font-size:15px;margin-top:var(--s-3)}

.sezione{padding:clamp(72px,9vw,160px) 0}
.sezione:not([class*="campo-"])+.sezione:not([class*="campo-"]){padding-top:0}
.sezione-accento{background:var(--mg-pesca)}
.griglia{display:grid;grid-template-columns:1fr;gap:var(--s-4);margin:var(--s-5) 0;padding:0;list-style:none}
.centrato{text-align:center}
.intestazione-sezione{display:grid;gap:var(--s-4);margin-bottom:var(--s-6)}
.intestazione-sezione h2{margin:0}
.intestazione-sezione p{margin:0}

/* Schede: superficie piena un tono sopra il fondo, niente bordi né ombre. */
.card{background:var(--mg-crema-calda);border-radius:var(--mg-r);padding:var(--s-5);height:100%;min-width:0}
.campo-pesca .card,.sezione-accento .card{background:var(--mg-crema)}
.campo-petrolio .card{background:var(--mg-petrolio-profondo)}
.card-titolo a{color:inherit;text-decoration:none;display:inline-block;min-height:44px;padding:var(--s-1) 0}
.card-titolo a::after,.voce-foglio h3 a::after{content:"→";display:inline-block;margin-left:.3em}
.card-testo>:last-child,.card-testo p:last-child{margin-bottom:0}
.passi{padding:0}
.chip{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0}
.chip li{background:var(--mg-pesca);border-radius:999px;padding:8px 14px;font-size:15px;font-weight:var(--peso-forte);color:var(--mg-inchiostro)}
.elenco-spunte,.elenco-numerato{padding-left:var(--s-5)}
.elenco-numerato li,.elenco-spunte li{margin-bottom:var(--s-2)}
.elenco-spunte li::marker{color:var(--mg-terracotta)}
.categoria{margin-top:var(--s-6)}
.vai-a ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;padding:0;margin:0}
.vai-a p{margin-bottom:var(--s-2)}
.categoria{scroll-margin-top:var(--s-6)}
.prodotto-piede{display:flex;flex-direction:column;gap:var(--s-2);align-items:stretch;font-weight:var(--peso-forte)}
.prodotto-piede a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;background:var(--mg-crema);text-decoration:none;padding:0 var(--s-4)}
.prezzo{color:var(--mg-inchiostro);font-variant-numeric:tabular-nums}
.data{font-size:15px;color:var(--mg-inchiostro-tenue)}
.nota{font-size:15px;color:var(--mg-inchiostro-tenue)}
.campo-petrolio .nota{color:var(--mg-su-scuro)}
.articolo .voce{padding-left:var(--s-4)}
.articolo>p:last-child a{display:inline-flex;align-items:center;min-height:44px}

/* Home: il foglio con le ragioni per unirsi, sul campo petrolio. */
.ragioni{display:grid;gap:var(--s-6);align-items:start}
.ragioni-testo p{max-width:46ch}
.foglio{background:var(--mg-crema);color:var(--mg-inchiostro);border-radius:var(--mg-r);padding:clamp(24px,3.4vw,56px);list-style:none;margin:0;display:grid;gap:clamp(24px,2.6vw,40px)}
.mg .campo-petrolio .foglio a{color:var(--mg-petrolio-profondo)}
.voce-foglio{display:grid;gap:var(--s-2)}
.voce-foglio h3{margin:0}
.voce-foglio p{margin:0}
.voce-foglio h3 a{text-decoration:none}

/* Home: la cartolina di risposta, appoggiata sul campo pesca e un poco inclinata. */
.risposta{display:grid;gap:var(--s-6);align-items:center}
.cartolina{background:var(--mg-crema);border-radius:var(--mg-r);padding:clamp(28px,3.6vw,56px);transform:rotate(-1.5deg);max-width:640px}
.cartolina p{max-width:none;font-size:var(--t-lead);line-height:1.38}
.risposta-testo h2{font-size:clamp(26px,1rem + 1.8vw,46px)}
.risposta-testo .dichiarazione{margin:0}
.cartolina .cta{width:100%}

/* Home: gli ultimi articoli come indice, data a sinistra e titolo grande a destra. */
.indice{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.indice li{display:grid;gap:var(--s-1)}
.indice a{font-family:var(--font-titoli);font-weight:var(--peso-titolo);font-size:clamp(22px,1rem + 1.2vw,36px);line-height:1.15;text-decoration:none;color:var(--mg-inchiostro)}

.da-validare{border-left:6px solid var(--mg-terracotta);background:var(--mg-crema-calda);border-radius:0 var(--mg-r) var(--mg-r) 0;padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;color:var(--mg-inchiostro)}
.campo-petrolio .da-validare{background:var(--mg-crema)}
.da-validare-etichetta{font-weight:var(--peso-numero);font-size:15px;color:var(--gemello-a-testo)}

/* Newsletter (spenta per ora) */
.newsletter{background:var(--mg-pesca);padding:clamp(56px,7vw,112px) 0}
.newsletter-riga{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center}
.newsletter-form label{display:block;font-weight:var(--peso-forte);margin-bottom:var(--s-2)}
.newsletter-campi{display:flex;flex-direction:column;gap:var(--s-2)}
.newsletter-campi input{width:100%;min-width:0;min-height:52px;border-radius:999px;border:2px solid var(--bordo-forte);padding:0 var(--s-4);font:inherit;font-size:16px;background:var(--mg-crema);color:var(--mg-inchiostro)}

/* Footer: il retro della pagina, sul petrolio profondo, con il nome a tutta larghezza. */
.piede{background:var(--mg-petrolio-profondo);color:var(--mg-su-scuro);padding:clamp(56px,7vw,112px) 0 var(--s-5)}
.piede{--logo-a:var(--mg-su-scuro);--logo-b:var(--mg-su-scuro)}
.mg .piede a{color:var(--mg-su-scuro)}
.piede h3{font-size:var(--t-corpo);margin-bottom:var(--s-3)}
.piede ul{list-style:none;padding:0;margin:0}
.piede li a{display:inline-flex;align-items:center;min-height:44px}
.piede-firma{margin:0 0 clamp(40px,5vw,80px)}
.piede-firma .piede-logo{margin:0;max-width:none}
.piede-griglia{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.piede .avviso{font-size:15px}
.piede-legale{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-5);margin-top:var(--s-6);font-size:15px}
.piede-legale a{display:inline-flex;align-items:center;min-height:44px}

/* 390px+: telefoni grandi */
@media (min-width:390px){
  .mg{--mg-margine:20px}
}
/* 768px+: tablet */
@media (min-width:768px){
  .mg{--mg-margine:clamp(24px,2.2vw,32px)}
  .testata-logo .logo{height:48px;width:145px}
  .cta{display:inline-flex;width:auto}
  .azioni{flex-direction:row;flex-wrap:wrap}
  .griglia-2,.griglia-3,.griglia-4{grid-template-columns:repeat(2,1fr)}
  .griglia{gap:var(--s-5)}
  .prodotto-piede{flex-direction:row;justify-content:space-between;align-items:center}
  .newsletter-campi{flex-direction:row}
  .newsletter-campi input{flex:1}
  .piede-griglia{grid-template-columns:repeat(2,1fr)}
  .piede-griglia>div:first-child{grid-column:1/-1}
  .indice li{grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:baseline;gap:var(--s-5)}
}
/* 1024px+: desktop */
@media (min-width:1024px){
  .menu-mobile{display:none}
  .testata-riga .nav-desktop{display:flex;flex-wrap:wrap;gap:var(--s-1)}
  .testata-riga .cta-testata{display:inline-flex}
  .testata-riga{gap:var(--s-5);padding-top:var(--s-3);padding-bottom:var(--s-3)}
  .nav-desktop a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;color:var(--mg-inchiostro);font-weight:var(--peso-forte);font-size:15px;text-decoration:none}
  .nav-desktop a:hover{background:var(--mg-crema-calda);color:var(--mg-inchiostro)}
  .nav-desktop a[aria-current="page"]{background:var(--mg-pesca)}
  .eroe-riga{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,80px)}
  .eroe-pagina .eroe-riga{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .eroe-pagina .eroe-testo{padding-bottom:.4em}
  .eroe-pagina h1{font-size:clamp(40px,1.2rem + 3.4vw,80px)}
  .eroe-home .eroe-figura{justify-self:end}
  .ritratto{width:100%}
  .griglia-3{grid-template-columns:repeat(3,1fr)}
  .sezione .contenitore.stretto:not(.articolo):has(>h2){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,62ch);column-gap:clamp(32px,4vw,80px);align-items:start}
  .sezione .contenitore.stretto:not(.articolo):has(>h2)>*{grid-column:2}
  .sezione .contenitore.stretto:not(.articolo):has(>h2)>h2{grid-column:1;grid-row:1/span 12;max-width:none}
  .griglia-4{grid-template-columns:repeat(4,1fr)}
  .intestazione-sezione{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:clamp(32px,4vw,80px)}
  .ragioni{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,80px)}
  .ragioni-testo{position:sticky;top:120px}
  .risposta{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,4vw,80px)}
  .cartolina{justify-self:end;width:100%}
  .newsletter-riga{grid-template-columns:1.2fr 1fr;gap:var(--s-6)}
  .piede-griglia{grid-template-columns:minmax(0,46ch) auto auto;justify-content:space-between;gap:var(--s-6)}
  .piede-griglia>div:first-child{grid-column:auto}
}
.card-copertina{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--mg-r) - 8px);margin-bottom:var(--s-3)}
/* Pagina di lettura: colonna centrata, titolo grande ma entro due-tre righe. */
.contenitore.stretto.articolo{max-width:calc(68ch + 2 * var(--mg-margine))}
.contenitore.stretto.articolo>*{max-width:none}
.articolo h1{font-size:clamp(36px,1rem + 3.4vw,76px);max-width:18ch}
.articolo .data{margin-bottom:var(--s-5)}
.articolo-copertina{width:100%;border-radius:var(--mg-r);margin:var(--s-4) 0}
.articolo-testo img{border-radius:var(--mg-r);margin:var(--s-4) auto}
.articolo-testo figure{margin:var(--s-4) 0}
.articolo-testo blockquote{border-left:6px solid var(--mg-petrolio);margin:var(--s-4) 0;padding-left:var(--s-4);color:var(--mg-inchiostro-tenue)}
.articolo-testo h2,.articolo-testo h3{margin-top:var(--s-6)}
/* Sillabazione solo nel corpo lungo degli articoli e solo su telefono, dove la colonna è stretta: mai nei titoli. */
@media (max-width:767px){.articolo-testo p,.articolo-testo li{hyphens:auto}}
/* Storie: invito nel blog e modulo «Racconta la tua storia» */
.racconta{margin-top:var(--s-6);padding:clamp(24px,3vw,48px);border-radius:var(--mg-r);background:var(--mg-pesca)}
.racconta>p{font-family:var(--font-titoli);font-weight:var(--peso-titolo);font-size:clamp(22px,1rem + 1vw,30px);line-height:1.2;margin:0}
.racconta .azioni{margin:var(--s-4) 0 0}
.modulo{display:flex;flex-direction:column;gap:var(--s-4)}
.campo label{display:block;font-weight:var(--peso-forte);margin-bottom:var(--s-2)}
.campo input[type=text],.campo input[type=email],.campo textarea{width:100%;min-width:0;min-height:48px;border-radius:var(--r-pulsante);border:2px solid var(--bordo-forte);padding:var(--s-2) var(--s-4);font:inherit;font-size:16px;background:var(--superficie-alta);color:var(--testo)}
.campo textarea{border-radius:var(--r-card);resize:vertical;min-height:12rem}
.campo input[type=file]{font:inherit;max-width:100%}
.campo .nota{margin:var(--s-2) 0 0}
.facoltativo{font-weight:400;color:var(--testo-tenue)}
.campo-spunta{display:flex;gap:var(--s-3);align-items:flex-start}
.campo-spunta input{width:24px;height:24px;flex:none;margin:2px 0 0;accent-color:var(--primario)}
.campo-spunta label{font-weight:400}
.campo-trappola{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: campo trappola nascosto, non una linea */
.da-definire{background:var(--gemello-a-tenue);padding:0 4px;border-radius:4px}
.da-definire-blocco{background:var(--gemello-a-tenue);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);font-size:var(--t-piccolo)}
.gruppo-scelta{border:2px solid var(--bordo);border-radius:var(--r-card);padding:var(--s-4);margin:0;display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.gruppo-scelta legend{font-weight:var(--peso-forte);padding:0 var(--s-2)}
.campo-annidato{margin-left:calc(24px + var(--s-3))}
.blocco-foto{background:var(--mg-crema-calda);border-radius:var(--r-card);padding:var(--s-3) var(--s-4)}
.blocco-foto>summary{cursor:pointer;font-weight:var(--peso-forte);min-height:44px;display:flex;align-items:center;gap:var(--s-2)}
.blocco-foto[open]{display:flex;flex-direction:column;gap:var(--s-4)}
.avviso-ok,.avviso-errore{border-radius:var(--r-card);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-5)}
.avviso-ok{background:var(--primario-tenue)}
.avviso-errore{border:2px solid var(--gemello-a);background:var(--gemello-a-tenue)}
.avviso-errore ul{margin:0;padding-left:var(--s-5)}
.paginazione{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;margin:var(--s-5) 0}
.paginazione a{display:inline-flex;align-items:center;min-height:44px}
.errore{padding:clamp(72px,9vw,160px) 0}
.errore-codice{font-family:var(--font-titoli);font-size:clamp(64px,2rem + 8vw,160px);line-height:1;font-weight:var(--peso-titolo);color:var(--mg-petrolio);margin:0 0 var(--s-4)}
.errore-azioni{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.errore-azioni a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4)}
/* Barra di avanzamento della lettura: esiste solo dove lo scroll può guidarla (vedi blocco movimento). */
.avanzamento{display:none}
/* ---- Movimento: vario ma sobrio. Solo transform e opacity, nessun JavaScript (la CSP vieta gli script).
   Ingresso dell'eroe al caricamento (finito entro 1,2 s); comparse legate allo scroll diverse per tipo di contenuto
   (titoli che salgono, righe del foglio che entrano di lato, schede che si posano, cartolina che si inclina,
   frase che passa da 45% a pieno, ritratto che si assesta, nome del piede che cresce); risposte sotto la mano
   su pulsanti, link, schede e menu; i dischi dei gemelli respirano piano.
   Tutto dentro prefers-reduced-motion: no-preference: chi chiede meno movimento vede la pagina già composta. */
@media screen and (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Eroe: il titolo sale da dietro la sua linea, poi frase, pulsanti e figura. */
  .eroe .maschera>h1{animation:mg-sali 900ms var(--mg-ease-expo) 120ms both}
  .eroe .maschera+.lead,.eroe .maschera+.dichiarazione,.eroe-pagina .eroe-testo>:first-child{animation:mg-emergi 520ms var(--mg-ease-out) 420ms both}
  .eroe-home .azioni,.eroe-pagina .eroe-testo>:nth-child(2){animation:mg-emergi 520ms var(--mg-ease-out) 520ms both}
  .eroe-figura .cornice{animation:mg-assesta 1100ms var(--mg-ease-expo) 100ms both}
  .disco-a{animation:mg-disco 800ms var(--mg-ease-expo) 150ms both,mg-respira 12s ease-in-out 1.2s infinite}
  .disco-b{animation:mg-disco 800ms var(--mg-ease-expo) 300ms both,mg-orbita-b 14s ease-in-out 1.2s infinite}
  .disco-c{animation:mg-disco 800ms var(--mg-ease-expo) 420ms both,mg-orbita-c 11s ease-in-out 1.2s infinite}
  .ritratto .cornice{animation:mg-emergi 700ms var(--mg-ease-out) 300ms both}
  .articolo>h1{animation:mg-emergi 760ms var(--mg-ease-expo) 80ms both}
  .articolo>.data{animation:mg-emergi 520ms var(--mg-ease-out) 320ms both}

  /* Pulsanti, link, schede: risposte piccole e rapide. */
  .cta,.prodotto-piede a,.menu-mobile>summary{transition:transform 140ms var(--mg-ease-out),background-color 180ms ease,color 180ms ease}
  .cta:active,.prodotto-piede a:active,.menu-mobile>summary:active{transform:scale(.97)}
  .mg a{transition:color 180ms ease,text-decoration-color 180ms ease}
  .card{transition:background-color 220ms ease}
  .card:has(a:hover),.card:focus-within{background:var(--mg-pesca)}
  .campo-pesca .card:has(a:hover),.campo-pesca .card:focus-within{background:var(--mg-crema-calda)}
  .card-titolo a::after,.voce-foglio h3 a::after{transition:transform 320ms var(--mg-ease-out)}
  .card-titolo a:hover::after,.card-titolo a:focus-visible::after,.voce-foglio h3 a:hover::after,.voce-foglio h3 a:focus-visible::after{transform:translateX(6px)}
  .nav-desktop a{transition:background-color 180ms ease}
  :focus-visible{transition:outline-offset 140ms var(--mg-ease-out)}
  .indice a{transition:color 180ms ease}
  .indice a:hover{color:var(--mg-petrolio-profondo)}

  /* Menu del telefono: scende dal bottone, poi le voci una dopo l'altra. */
  .menu-mobile[open] .nav-mobile{animation:mg-menu 240ms var(--mg-ease-out) both}
  .menu-mobile[open] .nav-mobile>*{animation:mg-emergi 300ms var(--mg-ease-out) both}
  .menu-mobile[open] .nav-mobile>:nth-child(2){animation-delay:50ms}
  .menu-mobile[open] .nav-mobile>:nth-child(3){animation-delay:100ms}
  .menu-mobile[open] .nav-mobile>:nth-child(4){animation-delay:150ms}
  .menu-mobile[open] .nav-mobile>:nth-child(5){animation-delay:200ms}
  .menu-mobile[open] .nav-mobile>:nth-child(6){animation-delay:250ms}

  /* Comparse legate allo scroll, solo dove il browser le supporta: senza supporto il contenuto è già lì. */
  @supports (animation-timeline:view()){
    .testata-sito .testata-logo{animation:mg-testata linear both;animation-timeline:scroll();animation-range:0 160px}
    /* Titoli di sezione: si accendono entrando e si attenuano uscendo, seguendo lo scroll in entrambi i sensi. */
    .sezione h2{animation:mg-titolo-percorso linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .intestazione-sezione p{animation:mg-titolo linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .voce-foglio{animation:mg-di-lato linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .voce-foglio:nth-child(2){animation-range:entry 10% entry 90%}
    .voce-foglio:nth-child(3){animation-range:entry 20% entry 100%}
    .voce-foglio:nth-child(4){animation-range:entry 30% cover 40%}
    .griglia>*{animation:mg-posa linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .griglia>:nth-child(4n+2){animation-range:entry 8% entry 78%}
    .griglia>:nth-child(4n+3){animation-range:entry 16% entry 86%}
    .griglia>:nth-child(4n+4){animation-range:entry 24% entry 94%}
    /* La cartolina si inclina entrando, si raddrizza al centro e riparte dall'altra parte uscendo. */
    .cartolina{animation:mg-cartolina-percorso linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .sezione .dichiarazione:not(.frase),.campo-pesca .dichiarazione:not(.frase){animation:mg-inchiostro linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
    .articolo-copertina,.articolo-testo img{animation:mg-emergi-scroll linear both,mg-lento linear both;animation-timeline:view(),view();animation-range:entry 0% entry 70%,cover 0% cover 100%}
    /* Ritratto: la foto scorre più lenta della sua cornice (parallasse interno). */
    .ritratto img{animation:mg-ritratto-percorso linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .indice li{animation:mg-titolo linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .indice li:nth-child(2){animation-range:entry 12% entry 92%}
    .indice li:nth-child(3){animation-range:entry 24% cover 30%}
    .chip li{animation:mg-chip linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .chip li:nth-child(2n){animation-range:entry 10% entry 70%}
    .chip li:nth-child(3n){animation-range:entry 20% entry 80%}
    .elenco-spunte li,.elenco-numerato li{animation:mg-di-lato linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .piede-firma .piede-logo{animation:mg-firma linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .da-validare{animation:mg-emergi-scroll linear both;animation-timeline:view();animation-range:entry 0% entry 60%}

    /* Eroe della home: parallasse leggero. Illustrazione e dischi scorrono a velocità diverse dal testo, che sale e sfuma. */
    .eroe-home{view-timeline:--eroe block;overflow:clip}
    .eroe-home .eroe-testo{animation:mg-eroe-testo linear both;animation-timeline:--eroe;animation-range:exit 0% exit 100%}
    .eroe-figura .cornice{animation:mg-assesta 1100ms var(--mg-ease-expo) 100ms both,mg-parallasse-cornice linear both;animation-timeline:auto,--eroe;animation-range:normal,exit 0% exit 100%}
    .disco-a{animation:mg-disco 800ms var(--mg-ease-expo) 150ms both,mg-respira 12s ease-in-out 1.2s infinite,mg-parallasse-a linear both;animation-timeline:auto,auto,--eroe;animation-range:normal,normal,exit 0% exit 100%}
    .disco-b{animation:mg-disco 800ms var(--mg-ease-expo) 300ms both,mg-orbita-b 14s ease-in-out 1.2s infinite,mg-parallasse-b linear both;animation-timeline:auto,auto,--eroe;animation-range:normal,normal,exit 0% exit 100%}
    .disco-c{animation:mg-disco 800ms var(--mg-ease-expo) 420ms both,mg-orbita-c 11s ease-in-out 1.2s infinite,mg-parallasse-c linear both;animation-timeline:auto,auto,--eroe;animation-range:normal,normal,exit 0% exit 100%}
    /* Eroi delle pagine interne: il titolo sale un po' più veloce della pagina mentre esce. */
    .eroe-pagina{view-timeline:--eroe-pagina block}
    .eroe-pagina .maschera{animation:mg-esce-alto linear both;animation-timeline:--eroe-pagina;animation-range:exit 0% exit 100%}

    /* Campo petrolio della home: la fascia si allarga entrando, il foglio si apre come un foglio piegato. */
    .campo-che-si-apre{position:relative;isolation:isolate}
    .campo-che-si-apre::before,.campo-che-si-apre::after{content:"";position:absolute;top:0;bottom:0;width:2.2%;z-index:-1;background:var(--mg-crema);animation:mg-tende linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .campo-che-si-apre::before{left:0;transform-origin:0 50%}
    .campo-che-si-apre::after{right:0;transform-origin:100% 50%}
    .campo-che-si-apre .foglio{transform-origin:50% 0;animation:mg-apri linear both;animation-timeline:view();animation-range:entry 0% cover 35%}

    /* Dichiarazione parola per parola: ogni parola si accende in sequenza sulla linea del tempo della frase. */
    .frase{view-timeline:--frase block}
    .parola{display:inline-block;animation:mg-parola linear both;animation-timeline:--frase;animation-range:cover 60% cover 70%}
    .parola:nth-child(1){animation-range:cover 8.2% cover 17.2%}
    .parola:nth-child(2){animation-range:cover 10.4% cover 19.4%}
    .parola:nth-child(3){animation-range:cover 12.6% cover 21.6%}
    .parola:nth-child(4){animation-range:cover 14.8% cover 23.8%}
    .parola:nth-child(5){animation-range:cover 17.0% cover 26.0%}
    .parola:nth-child(6){animation-range:cover 19.2% cover 28.2%}
    .parola:nth-child(7){animation-range:cover 21.4% cover 30.4%}
    .parola:nth-child(8){animation-range:cover 23.6% cover 32.6%}
    .parola:nth-child(9){animation-range:cover 25.8% cover 34.8%}
    .parola:nth-child(10){animation-range:cover 28.0% cover 37.0%}
    .parola:nth-child(11){animation-range:cover 30.2% cover 39.2%}
    .parola:nth-child(12){animation-range:cover 32.4% cover 41.4%}
    .parola:nth-child(13){animation-range:cover 34.6% cover 43.6%}
    .parola:nth-child(14){animation-range:cover 36.8% cover 45.8%}
    .parola:nth-child(15){animation-range:cover 39.0% cover 48.0%}
    .parola:nth-child(16){animation-range:cover 41.2% cover 50.2%}
    .parola:nth-child(17){animation-range:cover 43.4% cover 52.4%}
    .parola:nth-child(18){animation-range:cover 45.6% cover 54.6%}
    .parola:nth-child(19){animation-range:cover 47.8% cover 56.8%}
    .parola:nth-child(20){animation-range:cover 50.0% cover 59.0%}
    .parola:nth-child(21){animation-range:cover 52.2% cover 61.2%}
    .parola:nth-child(22){animation-range:cover 54.4% cover 63.4%}
    .parola:nth-child(23){animation-range:cover 56.6% cover 65.6%}
    .parola:nth-child(24){animation-range:cover 58.8% cover 67.8%}
    .parola:nth-child(25){animation-range:cover 61.0% cover 70.0%}
    .parola:nth-child(26){animation-range:cover 63.2% cover 72.2%}
    .parola:nth-child(27){animation-range:cover 65.4% cover 74.4%}
    .parola:nth-child(28){animation-range:cover 67.6% cover 76.6%}
    .parola:nth-child(29){animation-range:cover 69.8% cover 78.8%}
    .parola:nth-child(30){animation-range:cover 72.0% cover 81.0%}

    /* Prodotti e schede a tre colonne: la colonna centrale scorre appena più veloce delle altre. */
    @media (min-width:1024px){
      .griglia-3>:nth-child(3n+2){animation:mg-posa linear both,mg-colonna linear both;animation-timeline:view(),view();animation-range:entry 8% entry 78%,cover 0% cover 100%}
    }

    /* Articoli: barra di avanzamento della lettura legata allo scroll della pagina. */
    .avanzamento{display:block;position:fixed;top:0;left:0;right:0;height:4px;z-index:20;background:var(--mg-terracotta);transform-origin:0 50%;animation:mg-avanzamento linear both;animation-timeline:scroll(root)}
  }
}
@keyframes mg-sali{from{transform:translateY(105%)}to{transform:none}}
@keyframes mg-emergi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mg-emergi-scroll{from{opacity:.1;transform:translateY(20px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{opacity:1;transform:none}}
@keyframes mg-assesta{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes mg-disco{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mg-respira{0%,100%{transform:none}50%{transform:scale(1.025)}}
@keyframes mg-orbita-b{0%,100%{transform:none}50%{transform:translate(-14px,10px)}}
@keyframes mg-orbita-c{0%,100%{transform:none}50%{transform:translate(10px,-8px)}}
@keyframes mg-menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mg-testata{from{transform:none}to{transform:scale(.88)}}
@keyframes mg-titolo{from{opacity:.1;transform:translateY(.6em);animation-timing-function:cubic-bezier(.16,1,.3,1)}to{opacity:1;transform:none}}
@keyframes mg-di-lato{from{opacity:.1;transform:translateX(-24px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{opacity:1;transform:none}}
@keyframes mg-posa{from{opacity:.1;transform:translateY(32px) scale(.96);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{opacity:1;transform:none}}
@keyframes mg-cartolina{from{opacity:.1;transform:translateY(80px) rotate(4deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}to{opacity:1;transform:rotate(-1.5deg)}}
@keyframes mg-inchiostro{from{opacity:.45}to{opacity:1}}
@keyframes mg-ritratto{from{transform:scale(1.14)}to{transform:none}}
@keyframes mg-chip{from{opacity:.1;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes mg-firma{from{opacity:.3;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes mg-titolo-percorso{0%{opacity:.1;transform:translateY(.6em);animation-timing-function:cubic-bezier(.16,1,.3,1)}30%,80%{opacity:1;transform:none}100%{opacity:.45;transform:translateY(-.15em)}}
@keyframes mg-cartolina-percorso{0%{opacity:.1;transform:translateY(80px) rotate(4deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}45%{opacity:1;transform:rotate(-1.5deg)}100%{opacity:1;transform:translateY(-24px) rotate(-3deg)}}
@keyframes mg-ritratto-percorso{from{transform:scale(1.16) translateY(-5%)}to{transform:scale(1.12) translateY(5%)}}
@keyframes mg-lento{from{translate:0 -16px}to{translate:0 16px}}
@keyframes mg-eroe-testo{from{opacity:1;transform:none}to{opacity:.25;transform:translateY(-48px)}}
@keyframes mg-parallasse-cornice{from{translate:0 0}to{translate:0 90px}}
@keyframes mg-parallasse-a{from{translate:0 0}to{translate:0 60px}}
@keyframes mg-parallasse-b{from{translate:0 0}to{translate:0 150px}}
@keyframes mg-parallasse-c{from{translate:0 0}to{translate:0 -50px}}
@keyframes mg-esce-alto{from{opacity:1;transform:none}to{opacity:.4;transform:translateY(-56px)}}
@keyframes mg-tende{from{transform:none}to{transform:scaleX(0)}}
@keyframes mg-apri{from{opacity:.3;transform:perspective(1400px) rotateX(-16deg) scaleY(.94)}to{opacity:1;transform:none}}
@keyframes mg-parola{from{opacity:.15;transform:translateY(.18em)}to{opacity:1;transform:none}}
@keyframes mg-colonna{from{translate:0 14px}to{translate:0 -14px}}
@keyframes mg-avanzamento{from{transform:scaleX(0)}to{transform:none}}