/* ============================================================
   SICA ALIMENTARI — «LA CASSETTA»
   Palette campionata dal logo con Pillow, non scelta a occhio.
   ============================================================ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('font/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('font/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --petrolio:#265867;      /* 45.906 px campionati — onde del logo */
  --petrolio-cupo:#173B47;
  --oro:#F5D070;           /* 66.827 px campionati — cornice e nastro */
  --bronzo:#9E6B1B;        /* 34.272 px campionati */
  --cielo:#A7D4EF;         /* 75.965 px campionati */
  --panna:#F7F3EA;
  --panna-alta:#FDFBF7;
  --inchiostro:#0B1418;    /* 16,82:1 su panna */
  --rosso:#B3282E;         /* SOLO nella porta alimentari */
  --ghiaccio:10px;         /* il vuoto fra le cassette, sempre uguale */
  --raggio:5px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--panna);color:var(--inchiostro);
  font-family:'Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,.serif{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;
  font-variation-settings:'opsz' 100,'SOFT' 40;
}

/* ── LA CASSETTA: la gabbia ──────────────────────────────── */
.banco{
  max-width:1360px;margin:0 auto;padding:var(--ghiaccio);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ghiaccio);
}
.cassetta{
  background:var(--panna-alta);border-radius:var(--raggio);
  padding:clamp(22px,3.4vw,54px);position:relative;overflow:hidden;
  border:1px solid rgba(38,88,103,.10);
}
.cassetta > *{position:relative;z-index:1}
.cassetta--scura{background:var(--petrolio);color:var(--panna);border-color:transparent}
.cassetta--scura h2{color:#fff}
/* anche le cassette scure respirano: una luce che deriva, lentissima */
.cassetta--scura::after{
  content:'';position:absolute;inset:-45%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 32% 38%,rgba(167,212,239,.13),transparent 52%),
             radial-gradient(circle at 72% 74%,rgba(245,208,112,.10),transparent 50%);
  animation:deriva 22s ease-in-out infinite;will-change:transform;
}
@keyframes deriva{
  0%,100%{transform:translate3d(-5%,-2%,0)}
  50%    {transform:translate3d(5%,3%,0)}
}
@media (prefers-reduced-motion:reduce){.cassetta--scura::after{animation:none}}
.cassetta--cielo{background:linear-gradient(160deg,#D3E9F7,#A7D4EF)}
.c12{grid-column:span 12}.c9{grid-column:span 9}.c8{grid-column:span 8}
.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}
.c4{grid-column:span 4}.c3{grid-column:span 3}

/* filo d'oro: il segno che tiene insieme le cassette */
.filo{width:44px;height:3px;background:var(--oro);border-radius:2px;margin-bottom:20px}
.cassetta--scura .filo{background:var(--oro)}

.occhiello{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--bronzo);margin-bottom:12px;
}
.cassetta--scura .occhiello{color:var(--oro)}
h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
h3{font-size:19px;font-weight:600;margin-bottom:6px}
p{margin:0 0 12px;max-width:62ch}
.cassetta--scura p{color:#DCE9EC}
.piccolo{font-size:15px;opacity:.78}

/* ── TESTATA ─────────────────────────────────────────────── */
.testata{
  position:sticky;top:0;z-index:60;background:rgba(23,59,71,.94);
  backdrop-filter:blur(10px);color:var(--panna);
  border-bottom:1px solid rgba(245,208,112,.28);
}
.testata .dentro{
  max-width:1360px;margin:0 auto;padding:9px 18px;
  display:flex;align-items:center;gap:16px;
}
.testata img{height:44px;width:auto}
.marchio{font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:.01em}
.marchio small{display:block;font-family:'Figtree',sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-top:1px}
.testata nav{margin-left:auto;display:flex;gap:22px;font-size:14.5px}
.testata nav a{text-decoration:none;opacity:.85}
.testata nav a:hover{opacity:1;color:var(--oro)}
@media (max-width:860px){.testata nav{display:none}}

/* ── APERTURA — non è una pagina, è un mondo ─────────────── */
.apertura{
  grid-column:span 12;border-radius:var(--raggio);overflow:hidden;position:relative;isolation:isolate;
  background:linear-gradient(168deg,#3A7A8E 0%,#2C6274 32%,#173B47 68%,#0D242C 100%);
  color:var(--panna);padding:clamp(34px,5vw,78px);
  min-height:min(86vh,760px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;
}
.apertura-testo,.apertura .stemma{position:relative;z-index:3}

/* il mare */
.mare{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.sole{
  position:absolute;top:-14%;right:6%;width:min(56vw,640px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(245,208,112,.42) 0%,rgba(245,208,112,.16) 38%,transparent 66%);
  animation:respira 11s ease-in-out infinite;will-change:transform,opacity;
  transform:translate3d(0,calc(var(--par,0)*-.22px),0);
}
@keyframes respira{
  0%,100%{opacity:.85;transform:translate3d(0,calc(var(--par,0)*-.22px),0) scale(1)}
  50%    {opacity:1;  transform:translate3d(0,calc(var(--par,0)*-.22px),0) scale(1.07)}
}

.onda{position:absolute;left:0;width:240%;display:block;will-change:transform}
.onda path{fill:currentColor}
.onda-3{bottom:-2%;height:34%;color:rgba(167,212,239,.11);animation:scorri-onda 34s linear infinite}
.onda-2{bottom:-4%;height:28%;color:rgba(167,212,239,.16);animation:scorri-onda 23s linear infinite reverse}
.onda-1{bottom:-6%;height:22%;color:rgba(11,30,38,.42);  animation:scorri-onda 15s linear infinite}
@keyframes scorri-onda{
  from{transform:translate3d(0,calc(var(--par,0)*.10px),0)}
  to  {transform:translate3d(-50%,calc(var(--par,0)*.10px),0)}
}

/* le bolle che salgono */
.bolle{position:absolute;inset:0}
.bolle i{
  position:absolute;left:var(--x);bottom:-30px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.72),rgba(167,212,239,.14));
  border:1px solid rgba(255,255,255,.22);
  transform:scale(var(--s));opacity:0;
  animation:sali 15s linear infinite;animation-delay:var(--d);will-change:transform,opacity;
}
@keyframes sali{
  0%  {transform:translate3d(0,0,0) scale(var(--s));opacity:0}
  8%  {opacity:.55}
  78% {opacity:.42}
  100%{transform:translate3d(26px,-78vh,0) scale(var(--s));opacity:0}
}

/* la luce che passa sull'oro dello stemma — ritagliata sul logo, non un rettangolo */
.stemma{position:relative;animation:galleggia 8.5s ease-in-out infinite;will-change:transform}
.lustro{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  -webkit-mask-image:url('assets/logo-sica-520.webp');mask-image:url('assets/logo-sica-520.webp');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.lustro::before{
  content:'';position:absolute;top:-32%;left:-64%;width:42%;height:164%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translate3d(0,0,0) skewX(-16deg);
  animation:lustro-passa 7.5s ease-in-out infinite;will-change:transform;
}
@keyframes lustro-passa{
  0%,58%  {transform:translate3d(0,0,0) skewX(-16deg)}
  84%,100%{transform:translate3d(420%,0,0) skewX(-16deg)}
}
@keyframes galleggia{
  0%,100%{transform:translate3d(0,0,0) rotate(-.7deg)}
  50%    {transform:translate3d(0,-13px,0) rotate(.7deg)}
}

/* il testo che sale all'apertura */
.sale{animation:emerge .95s cubic-bezier(.2,.85,.3,1) both;animation-delay:var(--r,0s)}
h1 .sale{display:block;text-wrap:balance}
/* lo stemma fa DUE cose: sale all'apertura, poi galleggia per sempre */
.stemma.sale{
  animation:emerge .95s cubic-bezier(.2,.85,.3,1) var(--r,0s) both,
            galleggia 8.5s ease-in-out 1.3s infinite;
}
@keyframes emerge{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .sole,.onda,.bolle i,.lustro::before,.stemma,.sale{animation:none!important}
  .sale{opacity:1;transform:none}
  .bolle{display:none}
}
.apertura h1{
  font-size:clamp(33px,5.1vw,66px);color:#fff;margin-bottom:18px;
  font-variation-settings:'opsz' 144,'SOFT' 30;letter-spacing:-.022em;
}
.apertura .sotto{font-size:clamp(16px,1.55vw,19.5px);color:#D7E7EB;max-width:46ch;margin-bottom:30px}
.apertura .sotto b{color:var(--oro);font-weight:600}
.stemma{justify-self:center;filter:drop-shadow(0 26px 46px rgba(0,0,0,.42))}
.stemma img{width:min(340px,74vw)}
@media (max-width:900px){
  .apertura{grid-template-columns:1fr;text-align:left}
  .stemma{order:-1;justify-self:start}
  .stemma img{width:min(200px,50vw)}
}

/* ── LE DUE PORTE ────────────────────────────────────────── */
.porte{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.porte{grid-template-columns:1fr}}
.porta{
  display:block;text-decoration:none;padding:17px 19px;border-radius:var(--raggio);
  background:rgba(255,255,255,.07);border:1px solid rgba(245,208,112,.42);
  color:#fff;transition:transform .22s cubic-bezier(.2,.8,.3,1),background .22s;
}
.porta:hover{transform:translateY(-3px);background:rgba(245,208,112,.16)}
.porta .t{font-family:'Fraunces',serif;font-size:19px;font-weight:600;display:block}
.porta .d{font-size:13.5px;color:#CFE2E7;margin-top:3px;display:block}
.porta--rossa{border-color:rgba(232,150,150,.5)}
.porta--rossa:hover{background:rgba(179,40,46,.24)}

/* ── IL NASTRO: scorre sempre, non si ferma mai ──────────── */
.nastro{
  grid-column:span 12;background:var(--oro);color:#2B1F05;border-radius:var(--raggio);
  overflow:hidden;padding:11px 0;white-space:nowrap;
}
.nastro .scorre{display:inline-flex;gap:0;animation:scorri 46s linear infinite;will-change:transform}
.nastro span{
  padding:0 22px;font-size:13.5px;font-weight:600;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.nastro span::after{content:'·';margin-left:22px;opacity:.45}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.nastro .scorre{animation-duration:220s}}

/* ── LA FIRMA: il peso che scrive il messaggio ───────────── */
.firma{grid-column:span 12;background:var(--panna-alta)}
.firma-griglia{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.6vw,48px);align-items:start}
@media (max-width:900px){.firma-griglia{grid-template-columns:1fr}}

.bilancia{margin:26px 0 8px}
.peso-mostra{
  font-family:'Fraunces',serif;font-size:clamp(42px,6.4vw,74px);font-weight:600;
  color:var(--petrolio);line-height:1;font-variant-numeric:tabular-nums;
  font-variation-settings:'opsz' 144;
}
.peso-mostra small{font-size:.34em;color:var(--bronzo);margin-left:6px;font-weight:600}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;
  margin:14px 0 4px;cursor:grab;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--petrolio) var(--riemp,0%),rgba(38,88,103,.16) var(--riemp,0%));
}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(38,88,103,.16)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--petrolio)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;margin-top:-12px;
  background:radial-gradient(circle at 34% 30%,#FFF0C4,var(--oro) 60%,#D9A93F);
  border:2px solid #fff;box-shadow:0 3px 12px rgba(38,88,103,.42);
}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  background:radial-gradient(circle at 34% 30%,#FFF0C4,var(--oro) 60%,#D9A93F);
}
.tacche{display:flex;justify-content:space-between;font-size:12px;color:var(--bronzo);
  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.sagoma{
  background:linear-gradient(170deg,#EAF4FA,#D6E9F4);border-radius:var(--raggio);
  padding:16px 18px;display:flex;align-items:center;justify-content:center;min-height:236px;
  border:1px solid rgba(38,88,103,.12);
}
.sagoma{position:relative;overflow:hidden}
.sagoma::before{
  content:'';position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(ellipse 40% 30% at 30% 40%,rgba(255,255,255,.55),transparent 60%),
             radial-gradient(ellipse 35% 25% at 72% 66%,rgba(255,255,255,.42),transparent 62%);
  animation:acqua 16s ease-in-out infinite;will-change:transform}
@keyframes acqua{0%,100%{transform:translate3d(-4%,-2%,0)}50%{transform:translate3d(4%,3%,0)}}
@media (prefers-reduced-motion:reduce){.sagoma::before{animation:none}}
.sagoma svg{width:100%;max-width:470px;height:auto;overflow:visible;position:relative;z-index:1}
#filetto{transform-origin:50% 50%;transition:transform .34s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){#filetto{transition:none}}

.pastiglie{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.pastiglia{
  font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:100px;
  border:1px solid rgba(38,88,103,.24);background:#fff;color:var(--petrolio);
  font-variant-numeric:tabular-nums;
  /* SOLO luce e opacità: la pastiglia non si muove di un pixel */
  transition:opacity .3s,background-color .3s,color .3s,border-color .3s,box-shadow .3s;
}
.pastiglia.spenta{opacity:.26}
.pastiglia.accesa{background:var(--petrolio);color:#fff;border-color:var(--petrolio);
  box-shadow:0 3px 14px rgba(38,88,103,.26)}

.tagli{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 18px}
@media (max-width:620px){.tagli{grid-template-columns:repeat(2,1fr)}}
.taglio{
  border:1px solid rgba(38,88,103,.24);background:#fff;border-radius:var(--raggio);
  padding:12px 10px;text-align:center;cursor:pointer;font-family:inherit;font-size:14px;
  color:var(--petrolio);transition:background-color .25s,color .25s,border-color .25s;
}
.taglio b{display:block;font-weight:600;font-size:15px}
.taglio small{display:block;font-size:12px;opacity:.7;margin-top:2px}
.taglio[aria-pressed=true]{background:var(--petrolio);color:#fff;border-color:var(--petrolio)}
.taglio[aria-pressed=true] small{opacity:.85;color:#CFE2E7}

.messaggio{
  background:var(--petrolio-cupo);color:#EAF3F5;border-radius:var(--raggio);
  padding:18px 20px;font-size:15.5px;line-height:1.55;position:relative;
  border-left:3px solid var(--oro);min-height:92px;
}
.messaggio .eti{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--oro);font-weight:600;display:block;margin-bottom:7px}
.cursore{display:inline-block;width:2px;height:1em;background:var(--oro);
  vertical-align:-2px;animation:lampeggia 1.05s steps(2) infinite}
@keyframes lampeggia{50%{opacity:0}}

/* ── PULSANTI ────────────────────────────────────────────── */
.bottone{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#1FA855;color:#fff;font-weight:600;font-size:16px;
  padding:14px 22px;border-radius:100px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
  box-shadow:0 4px 16px rgba(31,168,85,.3);
}
.bottone:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,168,85,.4)}
.bottone svg{width:19px;height:19px;fill:currentColor;flex:none}
.bottone--oro{background:var(--oro);color:#2B1F05;box-shadow:0 4px 16px rgba(245,208,112,.34)}
.bottone--oro:hover{box-shadow:0 8px 24px rgba(245,208,112,.44)}

/* ── GRIGLIE DI PRODOTTO: mai uno sotto l'altro ──────────── */
.prodotti{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
@media (min-width:760px){.prodotti{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.prodotti--4{grid-template-columns:repeat(4,1fr)}}
.prodotto{
  background:#fff;border:1px solid rgba(38,88,103,.14);border-radius:var(--raggio);
  padding:15px;display:flex;flex-direction:column;gap:7px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.prodotto:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(38,88,103,.14)}
.prodotto .nome{font-family:'Fraunces',serif;font-size:17px;font-weight:600;line-height:1.15}
.prodotto .misure{font-size:13px;color:var(--bronzo);font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.45}
.prodotto .vuoto{
  aspect-ratio:4/3;border-radius:4px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#EDF4F8,#EDF4F8 9px,#E3EEF4 9px,#E3EEF4 18px);
  color:var(--petrolio);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;opacity:.55;border:1px dashed rgba(38,88,103,.28);
}
.prodotto .chiedi{
  margin-top:auto;font-size:13.5px;font-weight:600;color:var(--petrolio);
  text-decoration:none;border-top:1px solid rgba(38,88,103,.12);padding-top:9px;
}
.prodotto .chiedi:hover{color:var(--bronzo)}

/* ── I QUATTRO TAGLI (sezione) ───────────────────────────── */
.elenco-tagli{display:grid;gap:9px;margin-top:16px}
.elenco-tagli li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:11px 14px;background:#fff;border-radius:var(--raggio);
  border:1px solid rgba(38,88,103,.12);
}
.elenco-tagli .n{font-family:'Fraunces',serif;color:var(--oro);font-weight:700;font-size:15px}
.elenco-tagli b{font-weight:600}
.elenco-tagli span{font-size:14.5px;opacity:.8}

/* ── PASSI ───────────────────────────────────────────────── */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
@media (max-width:700px){.passi{grid-template-columns:1fr}}
.passo{background:#fff;border:1px solid rgba(38,88,103,.12);border-radius:var(--raggio);padding:16px}
.passo .n{font-family:'Fraunces',serif;font-size:30px;color:var(--oro);font-weight:700;line-height:1}
.passo b{display:block;margin:6px 0 3px;font-weight:600}
.passo span{font-size:14.5px;opacity:.8}

/* ── ITALIA ──────────────────────────────────────────────── */
.italia{display:grid;place-items:center;padding:6px 0}
.italia svg{width:100%;max-width:210px;height:auto}

/* ── FAQ ─────────────────────────────────────────────────── */
details{border-bottom:1px solid rgba(38,88,103,.14);padding:2px 0}
details summary{
  cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;
  font-family:'Fraunces',serif;font-size:17.5px;font-weight:600;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:'+';position:absolute;right:2px;top:13px;color:var(--oro);
  font-size:23px;font-weight:400;transition:transform .25s;
}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 15px;font-size:15.5px;opacity:.85}

/* ── PIEDE ───────────────────────────────────────────────── */
.piede{
  grid-column:span 12;background:var(--petrolio-cupo);color:#C9DCE1;
  border-radius:var(--raggio);padding:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px;font-size:14.5px;
}
@media (max-width:820px){.piede{grid-template-columns:1fr}}
.piede img{height:74px;width:auto;margin-bottom:12px}
.piede b{color:#fff;display:block;margin-bottom:7px;font-weight:600}
.piede a{color:var(--oro);text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede .legale{
  grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
  font-size:13px;opacity:.72;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}

/* ── LA CASSETTA CHE ENTRA (L2) ──────────────────────────── */
.entra{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .62s cubic-bezier(.2,.8,.3,1),transform .62s cubic-bezier(.2,.8,.3,1)}
.entra.dentro-vista{opacity:1;transform:none}
.entra[data-verso=sx]{transform:translate3d(-20px,10px,0)}
.entra[data-verso=dx]{transform:translate3d(20px,10px,0)}
.entra.dentro-vista[data-verso]{transform:none}
@media (prefers-reduced-motion:reduce){
  .entra{opacity:1!important;transform:none!important;transition:none}
}

/* ── da telefono la cassetta è una colonna sola ──────────── */
@media (max-width:900px){
  .c9,.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}
}

/* segnaposto dichiarati, per la bozza */
.mancante{
  background:rgba(179,40,46,.07);border:1px dashed rgba(179,40,46,.42);
  border-radius:4px;padding:9px 12px;font-size:13.5px;color:#8A1F24;margin:10px 0;
}
.mancante b{color:#8A1F24}