/* ==========================================================
   MAKE YOUR AURA — THE AFTERNOON SITE
   Sales page. Dark-first. Font locali, zero dipendenze esterne.
   Palette: brand-identity.md
   Animazioni: references/animazioni.md
   ========================================================== */

/* ---------- Font (locali, niente Google) ---------- */
@font-face { font-family:'Poppins'; src:url('../../fonts/poppins-300.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/poppins-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ---------- Token ---------- */
:root{
  --nero:#0A0A0B;
  --nero-2:#101013;
  --blu:#5B3BFF;
  /* variante schiarita: il blu pieno su nero, in grande, resta troppo cupo */
  --blu-chiaro:#8F79FF;
  --ambra:#FFB347;
  --bianco:#F7F7F5;
  --grigio:#8A8F98;

  --filo:rgba(247,247,245,.12);
  --filo-f:rgba(247,247,245,.26);
  /* testo secondario: alzato da .72 a .86 — a 300 di peso su nero si leggeva male */
  --bianco-70:rgba(247,247,245,.86);

  --sans:'Poppins','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --ease-draw:cubic-bezier(.62,0,.12,1);

  --gutter:clamp(20px,5vw,72px);
  --box:1240px;
  --respiro:clamp(84px,11vw,168px);
}

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

body{
  margin:0;
  background:var(--nero);
  color:var(--bianco);
  /* peso 400, non 300: su fondo nero il 300 è troppo sottile per leggere */
  font:400 17.5px/1.66 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.06}
p{margin:0 0 1em}

.wrap{max-width:var(--box);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative;padding-block:var(--respiro)}

/* ---------- Tipi ricorrenti ---------- */
.etichetta{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio);margin:0 0 18px;
}
.h2{font-size:clamp(30px,4.6vw,54px);margin:0 0 20px}
.h2--grande{font-size:clamp(34px,5.4vw,64px)}
.mini{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);margin:0 0 20px}
.occhiello{color:var(--bianco-70);max-width:62ch;font-size:clamp(16px,1.6vw,19px)}
.occhiello--c{margin-inline:auto;text-align:center}
.micro{font-size:13px;color:var(--grigio);margin:12px 0 0}
.micro--c{text-align:center}
.nota{color:var(--grigio)}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-block;background:var(--ambra);color:#0A0A0B;
  font-weight:800;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  transition:transform 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft), background 200ms;
  box-shadow:0 0 0 0 rgba(255,179,71,0);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px -10px rgba(255,179,71,.6)}
.btn--grande{font-size:17px;padding:18px 36px}
.btn--pieno{display:block;text-align:center;width:100%}
.btn--nav{padding:11px 20px;font-size:14px}

.tondo{
  width:52px;height:52px;border-radius:50%;background:transparent;
  border:1px solid var(--filo-f);color:var(--bianco);font-size:19px;cursor:pointer;
  transition:background 200ms,border-color 200ms,transform 200ms var(--ease-soft);
}
.tondo:hover{background:rgba(247,247,245,.07);border-color:var(--bianco);transform:translateY(-2px)}
.tondo:disabled{opacity:.3;cursor:default;transform:none}

/* ---------- Il marchio ---------- */
.marchio{display:inline-block;text-decoration:none;line-height:1}

/* l'aura dietro il marchio: gli stessi due fuochi del logo, blu a sinistra
   e ambra a destra. `isolation` tiene il bagliore dentro il marchio, se no
   finirebbe dietro al fondo della barra e sparirebbe. */
.marchio--aura{position:relative;z-index:0;isolation:isolate;padding:6px 18px}
.marchio--aura::before,
.marchio--aura::after{
  content:"";position:absolute;z-index:-1;top:50%;width:62%;aspect-ratio:1/1;
  border-radius:50%;filter:blur(26px);pointer-events:none;
  translate:0 -50%;
}
.marchio--aura::before{left:-6%;background:radial-gradient(circle,rgba(91,59,255,.85),transparent 68%)}
.marchio--aura::after{right:-6%;background:radial-gradient(circle,rgba(255,179,71,.6),transparent 70%)}
html.js .marchio--aura::before{animation:alone-drift 21s ease-in-out infinite}
html.js .marchio--aura::after{animation:alone-drift 28s ease-in-out infinite reverse}
@media (prefers-reduced-motion:reduce){
  html.js .marchio--aura::before,html.js .marchio--aura::after{animation:none}
}
.marchio__su{
  display:block;font-size:13px;font-weight:400;letter-spacing:.445em;
  text-transform:lowercase;color:var(--bianco);margin-bottom:4px;
  /* "make your" spanning full width of AURA: brand-identity.md */
  text-indent:.445em;
}
.marchio__giu{display:block;font-size:38px;font-weight:800;letter-spacing:-.02em}
@media (max-width:760px){
  .marchio__su{font-size:10px;margin-bottom:3px}
  .marchio__giu{font-size:28px}
}
@media (max-width:420px){
  .marchio__su{font-size:8px}
  .marchio__giu{font-size:22px}
}

/* ============================================================
   ALONE — l'aura che respira. È il glow del logo.
   ============================================================ */
.alone{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.alone i{position:absolute;display:block;aspect-ratio:1/1;border-radius:50%;filter:blur(70px)}
.alone .a1{width:56%;left:-14%;top:-20%;background:radial-gradient(circle,rgba(91,59,255,.30),transparent 68%)}
.alone .a2{width:42%;right:-12%;bottom:-22%;background:radial-gradient(circle,rgba(255,179,71,.14),transparent 70%)}
.alone--tenue .a1{background:radial-gradient(circle,rgba(91,59,255,.16),transparent 70%)}
.alone--tenue .a2{background:radial-gradient(circle,rgba(255,179,71,.08),transparent 72%)}
html.js .alone .a1{animation:alone-drift 21s ease-in-out infinite}
html.js .alone .a2{animation:alone-drift 28s ease-in-out infinite reverse}
@keyframes alone-drift{
  0%,100%{transform:translateZ(0) scale(1)}
  50%{transform:translate3d(4%,-3%,0) scale(1.1)}
}
.wrap,.hero__in{position:relative;z-index:1}

/* ============================================================
   LINEA DI LETTURA
   ============================================================ */
.lettura{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;display:none}
html.js .lettura{display:block}
.lettura i{display:block;height:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--blu),var(--ambra))}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;background:rgba(10,10,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color 300ms}
/* tre colonne uguali: così il marchio sta davvero al centro della pagina,
   non al centro dello spazio che avanza */
.nav__in{max-width:var(--box);margin-inline:auto;padding:16px var(--gutter);
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.nav__sx{justify-self:start}
.nav__dx{justify-self:end;display:flex;align-items:center;gap:18px}
.nav .marchio{justify-self:center}
.stelle{color:var(--ambra);font-size:13px;letter-spacing:.14em}
.nav .btn--nav{opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.nav--cta{border-bottom-color:var(--filo)}
.nav--cta .btn--nav{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .nav .btn--nav{opacity:1;transform:none;pointer-events:auto}
@media (max-width:640px){ .stelle{display:none} }

/* ============================================================
   HERO — centrato, con l'orbita
   ============================================================ */
.hero{padding-block:clamp(44px,6vw,80px) clamp(60px,8vw,110px);overflow:hidden;text-align:center}
.hero__in{max-width:1140px;margin-inline:auto;padding-inline:var(--gutter)}
/* niente limite in caratteri: le righe sono già spezzate a mano nell'HTML.
   Il 17ch di prima strozzava il titolo e lo mandava a capo da solo. */
.titolo{font-size:clamp(31px,4.6vw,54px);margin:0 auto 28px}
.sotto{font-size:clamp(17px,1.75vw,20.5px);color:var(--bianco-70);
  max-width:60ch;margin:0 auto 34px}
.sotto b{font-weight:600;color:var(--bianco)}
.hero__azione{margin-bottom:clamp(30px,5vw,56px)}
.hero__didascalia{margin:clamp(26px,4vw,44px) auto 0;max-width:58ch;
  font-size:15.5px;color:var(--grigio)}
.hero__didascalia b{display:block;color:var(--bianco);font-weight:600;
  font-size:19px;margin-bottom:6px}

/* ----------------------------------------------------------
   L'ORBITA — i siti girano attorno all'asse del corpo,
   in prospettiva: passano davanti, poi spariscono dietro la schiena.
   Il "dietro" è vero 3D, non un trucco di z-index: le carte con
   profondità negativa vengono disegnate dietro la figura da sole.
   ---------------------------------------------------------- */
.orbita-box{
  --raggio:clamp(175px,31vw,390px);
  --carta:clamp(60px,9vw,112px);
  --io:clamp(250px,36vw,440px);
  --incl:17deg;              /* l'anello è inclinato: davanti passa basso, dietro alto */
  --giu:clamp(84px,14.5vw,178px);  /* quanto si abbassa l'anello: altezza pancia */
  --giro:38s;
  /* spazio in più in fondo: le carte che passano davanti scendono sotto i piedi
     e senza questo finirebbero sopra la didascalia */
  --coda:calc(var(--giu) * 0.62);
  position:relative;width:100%;
  height:calc(var(--io) * 1.25 + 60px + var(--coda));
  margin-inline:auto;
}
.orbita{
  position:absolute;inset:0;
  /* prospettiva corta = stacco di grandezza forte tra davanti e dietro */
  perspective:820px;perspective-origin:50% 42%;
  transform-style:preserve-3d;
}
/* l'inclinazione sta fuori dalla rotazione, se no l'anello ondeggia.
   --giu abbassa l'anello all'altezza della pancia, così la faccia resta libera */
.orbita__inclina{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateY(var(--giu)) rotateX(var(--incl))}
.orbita__scena{position:absolute;inset:0;transform-style:preserve-3d}
html.js .orbita__scena{animation:gira3d var(--giro) linear infinite}
@keyframes gira3d{ from{rotate:y 0deg} to{rotate:y 360deg} }

/* il segnaposto porta la carta sul cerchio, alla sua profondità */
.orbita__p{position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--a)) translateZ(var(--raggio))}

/* la carta annulla rotazione e inclinazione: resta sempre di fronte a chi guarda,
   così le schermate non si vedono mai riflesse o storte */
.orbita__s{position:absolute;left:calc(var(--carta)/-2);top:calc(var(--carta)*-0.7);
  width:var(--carta);border-radius:7px;overflow:hidden;
  border:1px solid rgba(247,247,245,.22);background:#000;
  box-shadow:0 18px 50px -20px #000;
  transform:rotateY(calc(-1 * var(--a))) rotateX(calc(-1 * var(--incl)))}
html.js .orbita__s{
  animation:contro3d var(--giro) linear infinite, profondita var(--giro) linear infinite;
  /* la seconda animazione è sfasata dall'angolo della carta: ognuna si schiarisce
     quando è davanti e si spegne quando passa dietro la schiena */
  animation-delay:0s, calc(var(--ai) * -1 * (var(--giro) / 360));
}
@keyframes contro3d{ from{rotate:y 0deg} to{rotate:y -360deg} }
@keyframes profondita{
  0%   {opacity:1}
  50%  {opacity:.2}
  100% {opacity:1}
}
.orbita__s img{aspect-ratio:1360/2048;object-fit:cover;object-position:top}

/* Claudio: fermo sull'asse, a profondità zero, e grande.
   Sta sopra la coda, così resta dov'era anche se il riquadro si è allungato */
.orbita__io{position:absolute;left:50%;bottom:var(--coda);
  width:var(--io);margin-left:calc(var(--io) / -2);
  transform:translateZ(0);pointer-events:none}
.orbita__io img{filter:drop-shadow(0 26px 60px rgba(0,0,0,.92))}

@media (max-width:620px){
  .orbita-box{--raggio:clamp(128px,38vw,200px);--carta:clamp(50px,13vw,74px);
    --io:clamp(200px,52vw,280px);--incl:19deg;--giu:clamp(54px,13vw,96px)}
  .orbita{perspective:620px}
}

/* ============================================================
   MOTION — coreografia (solo con JS; senza JS tutto visibile)
   ============================================================ */
html.js .rv{
  opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 900ms var(--ease),transform 900ms var(--ease),filter 900ms var(--ease);
  transition-delay:var(--d,0ms);
}
html.js .rv.in{opacity:1;transform:none;filter:none}

/* righe che salgono — solo sui titoli */
html.js .riga{display:block;overflow:hidden;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
/* la riga che taglia mozzerebbe l'ovale disegnato a mano: gli si fa spazio sopra e sotto */
html.js .riga:has(.cerchio){padding-top:.40em;margin-top:-.40em;padding-bottom:.34em;margin-bottom:-.34em}
html.js .riga>span{display:inline-block;transform:translateY(140%);
  transition:transform 950ms var(--ease);transition-delay:var(--d,0ms)}
html.js .riga.in>span,html.js .in .riga>span{transform:translateY(0)}
.riga:nth-child(2){--d:70ms} .riga:nth-child(3){--d:140ms}
.riga:nth-child(4){--d:210ms} .riga:nth-child(5){--d:280ms}

/* evidenziatore */
.marca{
  background-image:linear-gradient(transparent 62%,rgba(91,59,255,.55) 0);
  background-repeat:no-repeat;background-size:100% 100%;
  padding-inline:.06em;
}
html.js .marca{background-size:0% 100%;transition:background-size 700ms var(--ease-draw) 320ms}
html.js .marca.in,html.js .in .marca{background-size:100% 100%}

/* cerchio disegnato a mano */
.cerchio{position:relative;white-space:nowrap;font-style:normal;padding-inline:.08em}
.cerchio svg{position:absolute;left:50%;top:54%;width:calc(100% + .9em);height:172%;
  transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.cerchio path{stroke:var(--blu);stroke-width:2.6;fill:none;stroke-linecap:round}
.cerchio--ambra path{stroke:var(--ambra)}
html.js .cerchio path{stroke-dasharray:1;stroke-dashoffset:1}
html.js .cerchio.in path,html.js .in .cerchio path{stroke-dashoffset:0;transition:stroke-dashoffset 950ms var(--ease-draw) 420ms}

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .riga>span{opacity:1;transform:none;filter:none;transition:none}
  html.js .marca{background-size:100% 100%;transition:none}
  html.js .cerchio path{stroke-dashoffset:0;transition:none}
  html.js .alone i,html.js .orbita__scena,html.js .orbita__s{animation:none}
}
@media (max-width:760px){
  /* niente blur animato sui telefoni: è il lavoro più pesante che possano fare */
  html.js .rv{filter:none;transition:opacity 900ms var(--ease),transform 900ms var(--ease);transition-delay:var(--d,0ms)}
  .alone i{filter:blur(48px)}
}

/* ============================================================
   OBIEZIONI
   ============================================================ */
.quattro{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.ob{padding:30px;border:1px solid var(--filo);border-radius:14px;background:rgba(247,247,245,.02)}
.ob h3{font-size:19px;margin:0 0 12px;color:var(--ambra)}
.ob p{margin:0;color:var(--bianco-70);font-size:16px}
@media (max-width:760px){ .quattro{grid-template-columns:1fr} }

/* ============================================================
   PRODOTTO
   ============================================================ */
.moduli{list-style:none;margin:56px 0 0;padding:0}
.mod{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,52px);
  padding:32px 0;border-top:1px solid var(--filo)}
.mod:last-child{border-bottom:1px solid var(--filo)}
.mod__n{font-size:clamp(30px,4vw,46px);font-weight:800;color:transparent;
  -webkit-text-stroke:1px var(--filo-f);line-height:1}
.mod h3{font-size:clamp(21px,2.4vw,28px);margin:0 0 10px}
.mod p{margin:0;color:var(--bianco-70);max-width:62ch}

/* ============================================================
   COSTO
   ============================================================ */
.costo{background:var(--nero-2);border-block:1px solid var(--filo);text-align:center}

/* tre colonne centrate — cifra enorme, poi l'etichetta, poi la riga di spiegazione */
.conti{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px);
  margin:56px 0 66px;align-items:start}
.conto{text-align:center}

/* ⚠️ classi esplicite: una regola su `.conto span` colpirebbe anche
   `.conta`, che è lo span del numero, e lo rimpicciolirebbe. */
.conto__c{display:block;font-size:clamp(62px,9.6vw,126px);font-weight:800;
  line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-bottom:18px}
.conto__c i{font-style:normal;font-size:.46em;vertical-align:.58em;
  margin-right:.03em;opacity:.6}
.conto:nth-child(1) .conto__c{color:var(--ambra)}
.conto:nth-child(2) .conto__c{color:var(--bianco)}
.conto:nth-child(3) .conto__c{color:var(--blu-chiaro)}
.conto__t{display:block;font-style:normal;font-weight:600;
  font-size:clamp(17px,1.9vw,21px);color:var(--bianco);
  letter-spacing:-.015em;line-height:1.28;margin-bottom:9px}
.conto__d{display:block;font-size:15px;color:var(--grigio);line-height:1.5;
  max-width:26ch;margin-inline:auto}

.colpo{font-size:clamp(27px,4.2vw,50px);font-weight:800;line-height:1.18;
  letter-spacing:-.025em;max-width:20ch;margin:0 auto 30px}

@media (max-width:660px){
  .conti{grid-template-columns:1fr;gap:48px}
  .conto__c{font-size:clamp(76px,23vw,108px)}
}

/* ============================================================
   SLIDER
   ============================================================ */
.vetrina{overflow:hidden}
.slider{margin-top:46px;overflow-x:auto;scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab}
.slider::-webkit-scrollbar{display:none}
.slider.trascino{cursor:grabbing;scroll-snap-type:none}
.slider__pista{display:flex;gap:20px;padding-inline:max(var(--gutter),calc((100vw - 880px)/2))}
.slider figure{margin:0;flex:0 0 min(78vw,420px);scroll-snap-align:center;
  border-radius:14px;overflow:hidden;border:1px solid var(--filo);background:#000}
.slider img{aspect-ratio:1360/2048;object-fit:cover;object-position:top;pointer-events:none}
.slider figcaption{padding:14px 16px;font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}
.slider__sotto{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.slider__nav{display:flex;gap:12px}
.slider__conta{margin:0;font-size:13px;color:var(--grigio);letter-spacing:.1em}
.slider__conta b{color:var(--bianco)}

/* ============================================================
   PER CHI
   ============================================================ */
.due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px)}
.lista{list-style:none;margin:0;padding:0}
.lista li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--filo);
  color:var(--bianco-70);font-size:16px}
.lista li::before{position:absolute;left:0;top:13px;font-size:15px;font-weight:800}
.lista--si li::before{content:"✓";color:var(--ambra)}
.lista--no li::before{content:"✕";color:var(--grigio)}
@media (max-width:760px){ .due{grid-template-columns:1fr} }

/* ============================================================
   RECENSIONI
   ============================================================ */
.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.rec{margin:0;padding:30px;border:1px solid var(--filo);border-radius:14px;background:rgba(247,247,245,.02)}
.rec .stelle{font-size:13px;margin-bottom:16px}
.rec blockquote{margin:0 0 20px;font-size:17px;line-height:1.55}
.rec figcaption{font-size:13px;font-weight:500}
.rec figcaption span{display:block;color:var(--grigio);font-weight:300;margin-top:3px}
@media (max-width:860px){ .tre{grid-template-columns:1fr} }

/* ============================================================
   CHI SONO
   ============================================================ */
.due--chi{grid-template-columns:.85fr 1.15fr;align-items:center}
.chi__foto img{filter:drop-shadow(0 30px 70px rgba(0,0,0,.7))}
.chi__testo p{color:var(--bianco-70);max-width:56ch}
.chi__chiusa{font-size:clamp(20px,2.4vw,27px);font-weight:800;color:var(--bianco);
  letter-spacing:-.02em;line-height:1.25;margin-top:30px;padding-top:26px;border-top:1px solid var(--filo)}
@media (max-width:760px){ .due--chi{grid-template-columns:1fr} .chi__foto{max-width:340px;margin-inline:auto} }

/* ============================================================
   ONESTÀ (niente rimborsi)
   ============================================================ */
.onesta{background:var(--nero-2);border-block:1px solid var(--filo);text-align:center}
.onesta p{color:var(--bianco-70);max-width:62ch;margin-inline:auto;font-size:clamp(16px,1.7vw,19px)}
.onesta__ultima{font-size:clamp(19px,2.3vw,26px)!important;font-weight:800;color:var(--bianco)!important;
  letter-spacing:-.02em;margin-top:34px}

/* ============================================================
   CHECKOUT
   ============================================================ */
.cassa{max-width:600px;margin-inline:auto;padding:clamp(28px,4vw,46px);
  border:1px solid var(--filo-f);border-radius:20px;background:rgba(16,16,19,.86);
  backdrop-filter:blur(10px);text-align:center}
.cassa__t{font-size:clamp(24px,3vw,34px);margin:0 0 10px}
.cassa__p{margin:0 0 30px}
.cassa__p b{font-size:44px;font-weight:800;color:var(--ambra);letter-spacing:-.03em}
.cassa__p span{color:var(--grigio);font-size:14px;margin-left:8px}
/* il riquadro dove Whop innesta il suo checkout */
.cassa__form{min-height:120px;margin-bottom:20px;text-align:left}
.cassa__form:empty::after{content:"Loading secure checkout\2026";
  display:block;padding:34px 0;text-align:center;font-size:14px;color:var(--grigio)}

/* ============================================================
   FAQ
   ============================================================ */
.faq__l{margin-top:40px;border-top:1px solid var(--filo)}
.faq details{border-bottom:1px solid var(--filo)}
.faq summary{padding:22px 0;cursor:pointer;font-weight:500;font-size:17px;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ambra);font-size:22px;font-weight:300;transition:transform 260ms var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--bianco-70);max-width:66ch}

/* ============================================================
   PIÈ DI PAGINA
   ============================================================ */
.pie{padding-block:56px calc(56px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--filo);text-align:center;color:var(--grigio);font-size:13px}
.marchio--pie{margin-bottom:22px}
.pie p{margin:0 0 8px}
.pie__link a{color:var(--grigio);text-decoration:none;border-bottom:1px solid var(--filo)}
.pie__link a:hover{color:var(--bianco)}

/* ============================================================
   BARRA APPICCICOSA
   ============================================================ */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:rgba(10,10,11,.94);backdrop-filter:blur(14px);border-top:1px solid var(--filo);
  transform:translateY(110%);transition:transform 420ms var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.stickybar.in{transform:none}
.stickybar__in{max-width:var(--box);margin-inline:auto;padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.stickybar p{margin:0;font-size:14px}
.stickybar b{font-weight:800}
.stickybar span{color:var(--grigio);margin-left:10px}
@media (max-width:560px){ .stickybar span{display:none} .stickybar .btn{padding:12px 18px;font-size:14px} }
html:not(.js) .stickybar{display:none}

/* ============================================================
   PAGINE OTO — upsell e downsell dopo il pagamento
   ============================================================ */
.oto{min-height:100svh;display:grid;place-items:center;padding-block:clamp(50px,8vw,90px)}
.oto__in{max-width:760px;text-align:center}
.oto__t{font-size:clamp(30px,5.2vw,58px);margin:0 auto 30px;max-width:17ch}
.oto__t .marca{background-image:linear-gradient(transparent 62%,rgba(255,179,71,.45) 0)}
.oto__p{font-size:clamp(17px,1.8vw,20px);color:var(--bianco-70);max-width:56ch;margin:0 auto 20px}
.oto__p b{font-weight:600;color:var(--bianco)}
.oto__l{max-width:52ch;margin:34px auto 0;text-align:left}
.oto__l li{font-size:15.5px}
.oto__l b{color:var(--bianco);font-weight:600}

/* il riquadro dove l'app innesta accetta/rifiuta */
.oto__box{margin:42px auto 0;max-width:560px;min-height:120px}
.oto__box:empty::after{content:"Loading\2026";display:block;padding:34px 0;
  text-align:center;font-size:14px;color:var(--grigio)}

/* il checkout GHL incorporato.
   Alto quanto lo schermo: dopo il pagamento, dentro al riquadro carica
   l'upsell — e quello ha bisogno di tutto lo spazio, non di una finestrella.
   Il mio codice non può accorgersi del pagamento (è un altro dominio),
   quindi il riquadro è già grande in partenza. */
.cassa__form{position:relative;margin-bottom:8px;border-radius:14px;
  overflow:hidden;background:#fff;
  height:min(100svh - 90px, 1240px)}
.cassa__frame{display:block;width:100%;height:100%;border:0}

/* arrivando da un bottone, la sezione si allinea in cima
   così il riquadro riempie davvero la finestra */
#checkout{scroll-margin-top:0}
.checkout{padding-block:clamp(40px,6vw,70px)}
.checkout .cassa{max-width:820px;padding:clamp(18px,2.4vw,26px)}
.checkout .cassa__t{font-size:clamp(21px,2.6vw,28px)}
.checkout .cassa__p{margin-bottom:18px}
.checkout .cassa__p b{font-size:36px}
@media (max-width:640px){ .cassa__form{height:min(100svh - 60px, 1240px)} }