@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/rubik-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/rubik-latin-800-italic.woff2) format("woff2")}

:root{
  --bosco:#1F5A40;
  --lime:#8DC63F;
  --panna:#FAFAF7;
  --giallo:#F6C344;
  --inchiostro:#16352A;
  --foglio:#FFFFFF;
  --caffe:#5A3721;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Rubik",system-ui,sans-serif;
  color:var(--inchiostro);
  background:var(--panna);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--bosco);outline-offset:3px;border-radius:6px}

/* ---------- Testata ---------- */
/* sul telefono l'apertura passa anche sotto la barra in alto (niente fascia bianca): il colore di fondo in cima è quello dell'apertura */
:root{padding-top:0!important;background:#ACC2B3}
.top{position:fixed;inset:0 0 auto 0;z-index:20;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;pointer-events:none}
.wordmark{pointer-events:auto;display:inline-block}
.wordmark img{width:120px}

/* ---------- Apertura ---------- */
.hero{
  position:relative;
  height:100vh;height:100svh;min-height:560px;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 100%,#EEF1E8 0%,rgba(238,241,232,0) 60%),
    var(--panna);
}
.stage{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(31,90,64,.34) 0%,rgba(31,90,64,.14) 14%,rgba(141,198,63,.10) 26%,rgba(141,198,63,0) 46%),
    radial-gradient(90% 40% at 50% 0%,rgba(141,198,63,.22),rgba(141,198,63,0) 70%);
}

/* foto del rotolo: si vede subito e su qualsiasi telefono (il contenitore la posiziona, la foto si anima) */
.poster-wrap{
  position:absolute;z-index:1;
  left:50%;top:55%;
  height:min(34vh, 86vw);height:min(34svh, 86vw);
  translate:-50% -50%;
  pointer-events:none;
}
.poster{height:100%;width:auto;max-width:none;will-change:transform,opacity}
/* la pozza di caffè sul piano, davanti al rotolo (modo foto) */
.floor-stain{position:absolute;z-index:-1;left:-4%;bottom:-25%;width:122%;aspect-ratio:2.4}   /* il rotolo vero è snello: la pozza resta grande quanto prima */
.floor-stain span{position:absolute;inset:0;background:center/100% 100% no-repeat}
.floor-stain .fs-halo{background-image:url(../img/macchia-alone.webp)}
.floor-stain .fs-puddle{inset:12% 14%;background-image:url(../img/macchia-caffe.webp)}

.hero__copy{
  position:absolute;z-index:3;
  left:16px;right:16px;top:calc(clamp(78px,11svh,104px) + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__title{
  font-weight:800;font-style:italic;color:var(--bosco);
  font-size:clamp(40px,11vw,92px);
  line-height:.95;letter-spacing:-.035em;
}
.hero__title .line{display:block;overflow:hidden;padding:.03em .1em .08em}
.hero__title .line>span{display:block}
.js .hero__title{visibility:hidden}
.js .hero__sub,.js .hero__copy .btn{opacity:0}
.hero__title .cup{display:inline;font-style:normal;font-size:.72em;letter-spacing:0;vertical-align:.08em}
.hero__sub{
  margin-top:14px;max-width:32ch;
  font-size:clamp(16px,4.2vw,20px);line-height:1.4;color:var(--inchiostro);
  text-shadow:0 0 12px var(--panna),0 0 4px var(--panna);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 30px;
  background:var(--giallo);color:var(--inchiostro);
  font-weight:700;font-size:18px;text-decoration:none;
  border-radius:999px;
  box-shadow:0 7px 0 -2px #c99a24,0 16px 28px -14px rgba(31,90,64,.6);
  transition:box-shadow .15s;
}

/* telefono: il pulsante in basso, il rotolo in mezzo */
.hero__copy .btn{position:absolute;left:50%;top:calc(100svh - 112px - clamp(78px,11svh,104px) - env(safe-area-inset-bottom));translate:-50% 0;white-space:nowrap}

/* ---------- Il foglio della prova ---------- */
.sheet-wrap{position:absolute;z-index:2;inset:0;pointer-events:none}
.sheet{
  position:absolute;left:0;top:0;width:0;height:0;
  background-color:var(--foglio);
  background-image:url(../img/tessuto.webp);
  box-shadow:0 18px 40px -22px rgba(22,53,42,.45);
  opacity:0;
}

.sheet__drop{
  position:absolute;z-index:4;left:50%;top:44%;
  width:26px;height:34px;margin:-17px 0 0 -13px;
  background:radial-gradient(circle at 35% 62%,#8a5a38 0%,var(--caffe) 55%,#3a2214 100%);
  border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
  clip-path:polygon(50% 0,100% 62%,92% 88%,50% 100%,8% 88%,0 62%);
  opacity:0;
}
.sheet__stain{
  position:absolute;z-index:1;left:50%;top:44%;
  width:64%;aspect-ratio:1.25;
}
.sheet__stain span{position:absolute;inset:0;background:center/100% 100% no-repeat}
/* macchie già disegnate come immagini: niente calcoli pesanti mentre si anima */
.sheet__stain .stain__halo{background-image:url(../img/macchia-alone.webp)}
.sheet__stain .stain__puddle{inset:6% 7%;background-image:url(../img/macchia-assorbita.webp)}
.sheet__stain .stain__shine{
  inset:28% 52% 58% 30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.32),transparent);
}

.captions{
  list-style:none;position:absolute;z-index:4;left:0;right:0;
  bottom:clamp(36px,7svh,70px);
  text-align:center;pointer-events:none;
}
.cap{
  position:absolute;left:16px;right:16px;bottom:0;
  font-weight:700;font-style:italic;
  font-size:clamp(24px,6.4vw,40px);line-height:1.12;letter-spacing:-.02em;
  color:var(--bosco);opacity:0;
}
.cap strong{background:linear-gradient(transparent 62%,rgba(141,198,63,.55) 62%)}
.cap{text-shadow:0 1px 0 var(--panna),0 0 18px var(--panna)}

.scroll-hint{
  position:absolute;z-index:4;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));translate:-50% 0;
  display:flex;align-items:center;gap:8px;
  padding:7px 14px 7px 12px;border-radius:999px;
  background:var(--bosco);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.02em;opacity:0;
  box-shadow:0 8px 20px -10px rgba(22,53,42,.6);
}
.scroll-hint::before{
  content:"";width:9px;height:9px;margin-top:-4px;
  border-right:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);
  transform:rotate(45deg);
  animation:hint 1.4s ease-in-out infinite;
}
@keyframes hint{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.6}50%{transform:translateY(4px) rotate(45deg);opacity:1}}

.sparkles{position:absolute;z-index:3;left:50%;top:45%;width:min(62vw,300px);aspect-ratio:1.2;translate:-50% -50%;pointer-events:none}
.sparkles i{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0}
.sparkles i::before,.sparkles i::after{content:"";position:absolute;inset:0}
.sparkles i::before{background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(141,198,63,.35) 55%,rgba(141,198,63,0))}
.sparkles i::after{background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.sparkles i:nth-child(1){left:22%;top:30%}
.sparkles i:nth-child(2){left:68%;top:18%;width:24px;height:24px;margin:-12px 0 0 -12px}
.sparkles i:nth-child(3){left:50%;top:52%;width:46px;height:46px;margin:-23px 0 0 -23px}
.sparkles i:nth-child(4){left:82%;top:62%}
.sparkles i:nth-child(5){left:30%;top:78%;width:22px;height:22px;margin:-11px 0 0 -11px}
.sparkles i:nth-child(6){left:62%;top:86%;width:28px;height:28px;margin:-14px 0 0 -14px}
.sparkles i:nth-child(7){left:10%;top:58%;width:18px;height:18px;margin:-9px 0 0 -9px}
.next{min-height:80svh;display:grid;place-items:center;padding:40px 20px;color:var(--bosco)}

/* ---------- Computer: testo a sinistra, rotolo a destra ---------- */
@media (min-width:900px){
  .wordmark img{width:140px}
  .top{padding:calc(22px + env(safe-area-inset-top,0px)) 32px 22px}
  .hero__copy{
    left:max(48px, calc(50vw - 600px));right:auto;top:50%;
    translate:0 -50%;
    width:min(48vw, 640px);
    align-items:flex-start;text-align:left;
  }
  .hero__title{font-size:clamp(56px,5.6vw,92px)}
  .hero__title .line{padding-left:0}
  .hero__sub{margin-top:22px;font-size:21px}
  .hero__copy .btn{position:static;translate:none;margin-top:30px}
  .sparkles{scale:1.6}
  .scroll-hint{bottom:32px;font-size:14px;left:max(48px, calc(50vw - 600px));translate:none}
  .poster-wrap{left:70.5%;top:55%;height:52vh}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint::before{animation:none}
}

/* =====================================================================
   Sezioni della pagina, dopo l'apertura — il verde bosco è il colore principale
   ===================================================================== */
:root{--bosco-2:#174A34;--bosco-3:#123A29}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.sec{position:relative;padding:clamp(76px,12vw,140px) 0;color:#fff}
.h2{
  font-weight:800;font-style:italic;color:#fff;
  font-size:clamp(32px,7.4vw,60px);line-height:1;letter-spacing:-.03em;
  max-width:16ch;text-wrap:balance;
}
.center{text-align:center;margin-inline:auto}
.lead{margin-top:18px;max-width:42ch;font-size:clamp(17px,4.4vw,20px);line-height:1.5;color:rgba(255,255,255,.88)}
.lead.center{max-width:36ch}
.lead strong{font-weight:700;color:var(--lime)}

/* ---------- 2 · lo straccio ---------- */
.straccio{background:var(--bosco)}
/* l'onda dell'etichetta del rotolo: il passaggio dalla panna dell'apertura al verde */
.straccio::before{content:"";position:absolute;left:-10%;right:-10%;top:-1px;height:56px;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--panna);box-shadow:0 7px 0 0 var(--lime)}
.straccio__grid{display:grid;gap:48px;align-items:center}
.straccio__scene{position:relative;justify-self:center;width:min(100%,380px)}
.oven{position:relative;aspect-ratio:1/1.05;border-radius:22px;background:linear-gradient(160deg,#f2f4f1,#c9cfcb);box-shadow:inset 0 0 0 10px #e3e7e4,0 34px 50px -30px rgba(0,0,0,.6)}
.oven__glass{position:absolute;left:12%;right:12%;top:30%;bottom:12%;border-radius:12px;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),#1d2622}
.oven__handle{position:absolute;z-index:2;left:8%;right:8%;top:16%;height:14px;border-radius:7px;background:linear-gradient(#ffffff,#8f9893);box-shadow:0 4px 6px -2px rgba(0,0,0,.35)}
.rag{
  position:absolute;z-index:3;left:30%;top:calc(16% + 2px);width:34%;height:62%;
  transform-origin:50% 0;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,transparent 3px 9px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 3px,transparent 3px 9px),
    #d9d4c4;
  clip-path:polygon(0 0,100% 0,100% 88%,92% 94%,80% 90%,66% 98%,50% 92%,34% 100%,18% 93%,6% 97%,0 90%);
  box-shadow:inset 0 10px 10px -6px rgba(0,0,0,.25);
}
.rag::before{content:"";position:absolute;inset:0 0 auto;height:12%;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0))}
.rag__stain{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(110,84,52,.55),rgba(110,84,52,.25) 60%,rgba(110,84,52,0))}
.rag__stain.s1{left:10%;top:30%;width:55%;height:22%}
.rag__stain.s2{left:42%;top:55%;width:50%;height:26%;background:radial-gradient(closest-side,rgba(90,96,60,.5),rgba(90,96,60,.2) 60%,rgba(90,96,60,0))}
.rag__stain.s3{left:5%;top:70%;width:40%;height:18%}
.days{
  position:absolute;right:-6px;top:-18px;z-index:4;
  display:grid;justify-items:center;padding:12px 16px 10px;border-radius:16px;
  background:var(--giallo);color:var(--inchiostro);rotate:6deg;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5);
}
.days__label,.days__unit{font-size:13px;font-weight:700}
.days__n{font-weight:800;font-style:italic;font-size:48px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}

/* ---------- 3 · la prova ---------- */
.prova{background:var(--bosco-2)}
.pull{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,6vw,90px);margin-top:56px;max-width:760px;margin-inline:auto}
.pull__item{display:grid;justify-items:center;gap:16px;margin:0}
.pull__item figcaption{font-weight:700;font-style:italic;font-size:clamp(16px,4vw,21px);color:#fff}
.pull__item--rewip figcaption{color:var(--lime)}
.pull__sheet{position:relative;width:100%;aspect-ratio:3/4}
.carta .half{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:drop-shadow(0 16px 18px rgba(0,0,0,.25))}
.half--l{transform-origin:6% 2%;opacity:0}
.half--r{transform-origin:94% 2%;opacity:0}
.rewip{background:#fff url(../img/tessuto-v.webp) 0 0/180px 180px;border-radius:2px;
  box-shadow:0 22px 34px -20px rgba(0,0,0,.55)}
.wet{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 45%,rgba(140,160,166,.42),rgba(140,160,166,.18) 60%,rgba(140,160,166,0))}
/* le mollette che tengono e tirano il foglio */
.clip{position:absolute;z-index:3;top:-14px;width:16%;height:30px;border-radius:6px;background:linear-gradient(#a6d964,var(--lime));box-shadow:0 4px 8px -3px rgba(0,0,0,.45)}
.clip::after{content:"";position:absolute;left:20%;right:20%;top:48%;height:3px;border-radius:2px;background:rgba(22,53,42,.35)}
.clip--l{left:2%}
.clip--r{right:2%}
.rain{position:absolute;inset:0;pointer-events:none}
.rain i{position:absolute;top:30%;width:12px;height:16px;margin-left:-6px;opacity:0;
  background:radial-gradient(circle at 40% 35%,#fff,#cfe9f5 45%,#8cc2dc);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.rain i:nth-child(1){left:32%}
.rain i:nth-child(2){left:52%}
.rain i:nth-child(3){left:68%}
.prova__note{margin:52px auto 0;text-align:center;max-width:30ch;font-weight:700;font-style:italic;font-size:clamp(20px,5vw,28px);line-height:1.2;color:#fff}
.prova__note strong{color:var(--lime)}

/* ---------- 5 · sicuro in cucina ---------- */
.sicuro{background:var(--bosco)}
.sicuro__grid{display:grid;gap:40px;align-items:center}
.label-card{
  position:relative;overflow:hidden;border-radius:24px;padding:58px 26px 26px;
  background:var(--panna);color:var(--inchiostro);
  box-shadow:0 30px 50px -34px rgba(0,0,0,.7);
}
.label-card::before{ /* fascia verde con l'onda e la riga lime, come l'etichetta del rotolo */
  content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:96px;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(#24664A,#164431);box-shadow:0 6px 0 0 var(--lime);
}
.facts{position:relative;list-style:none;display:grid;gap:16px;margin-top:10px}
.facts li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(18px,4.6vw,21px);color:var(--bosco)}
.ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(31,90,64,.1);font-size:20px;color:var(--bosco)}
.facts__plus{position:relative;margin-top:22px;padding-top:16px;border-top:1px solid rgba(31,90,64,.15);font-size:15px;color:#4a6356}

/* ---------- 6 · acquisto ---------- */
.compra{background:radial-gradient(80% 60% at 50% 0%,rgba(141,198,63,.22),rgba(141,198,63,0) 70%),linear-gradient(180deg,var(--bosco-2),var(--bosco-3));text-align:center;overflow:hidden}
.compra__inner{display:grid;justify-items:center}
.compra__title{font-weight:800;font-style:italic;font-size:clamp(38px,9.6vw,84px);line-height:.98;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.compra__claim{margin-top:18px;font-weight:700;font-style:italic;font-size:clamp(20px,5.2vw,28px);color:var(--lime)}
.numbers{display:grid;gap:14px;margin:44px 0 0;width:min(100%,900px)}
.numbers div{display:grid;justify-items:center;gap:6px;padding:20px 16px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.numbers dt{font-weight:800;font-style:italic;color:#fff;font-size:clamp(44px,12vw,64px);line-height:.95;letter-spacing:-.04em}
.numbers dd{font-size:clamp(15px,4vw,18px);color:rgba(255,255,255,.82)}
.buy{display:grid;justify-items:center;gap:14px;margin-top:46px}
.buy__price{font-size:17px;color:rgba(255,255,255,.85)}
.buy__price b{font-weight:800;font-style:italic;font-size:28px;color:#fff}
.btn--big{min-height:66px;padding:0 44px;font-size:21px;box-shadow:0 8px 0 -2px #c99a24,0 22px 40px -16px rgba(0,0,0,.6)}
.btn--big:hover{box-shadow:0 8px 0 -2px #c99a24,0 0 0 6px rgba(246,195,68,.25),0 22px 40px -16px rgba(0,0,0,.6)}

/* ---------- piè di pagina ---------- */
.foot{background:var(--bosco-3);padding:44px 0 36px;border-top:1px solid rgba(255,255,255,.08)}
.foot__inner{display:grid;justify-items:center;gap:10px;text-align:center}
.foot__logo{width:150px}
.foot__claim{font-weight:700;font-style:italic;font-size:20px;color:var(--lime)}
.foot__small{margin-top:10px;font-size:13px;color:rgba(255,255,255,.6)}

@media (min-width:700px){
  .numbers{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media (min-width:900px){
  .straccio__grid{grid-template-columns:1.1fr .9fr;gap:72px}
  .sicuro__grid{grid-template-columns:1fr 1fr;gap:72px}
  .label-card{padding:70px 40px 34px}
}

/* ---------- equilibrio dei colori: si alternano panna e verde (il verde resta il colore forte) ---------- */
.straccio,.sicuro{background:var(--panna);color:var(--inchiostro)}
.straccio .h2,.sicuro .h2{color:var(--bosco)}
.straccio .lead,.sicuro .lead{color:var(--inchiostro)}
.straccio .lead strong,.sicuro .lead strong{color:var(--bosco)}
.straccio::before{display:none}
/* su panna il forno torna scuro, così si stacca */
.oven{background:linear-gradient(160deg,#2b3a33,#16231d);box-shadow:inset 0 0 0 10px #22302a,0 30px 50px -30px rgba(22,53,42,.6)}
.oven__glass{background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),#0e1814}
.oven__handle{background:linear-gradient(#e9ece8,#9aa39e)}
/* passaggio panna → verde: l'onda con la riga lime dell'etichetta */
.prova,.compra{padding-top:calc(clamp(76px,12vw,140px) + 40px)}
.prova::before,.compra::before{content:"";position:absolute;left:-10%;right:-10%;top:-1px;height:56px;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--panna);box-shadow:0 7px 0 0 var(--lime)}
/* la scheda "sicuro in cucina" torna verde su fondo panna, con la fascia panna in alto */
.label-card{background:linear-gradient(180deg,#24664A,#164431);color:#fff}
.label-card::before{background:var(--panna);box-shadow:0 6px 0 0 var(--lime)}
.facts li{color:#fff}
.ico{background:rgba(255,255,255,.12);color:var(--lime)}
.facts__plus{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.8)}
span.btn--big{cursor:default}