/* PocoPoco — stile del sito. Gli stessi colori e lo stesso carattere dell'app (DM Sans, licenza OFL). Sempre in tema chiaro. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sfondo: #F5F3F4;
  --bianco: #fff;
  --inchiostro: #151515;
  --tenue: #6C696C;
  --linea: rgba(21, 21, 21, .08);
  --rosa: #FF1493;
  --menta: #1E997D;
  --azzurro: #ABDCE3;
  --confetto: #FBD0E1;
  --giallo: #FAD503;
  --crema: #F4E6DD;
  --arancio: #F8935B;
  --blu: #205DDC;
  --piu: #00A899;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --raggio: 32px;
  --margine: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--sfondo); }
body {
  margin: 0; background: var(--sfondo); color: var(--inchiostro);
  font: 400 18px/1.55 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
b, strong { font-weight: 600; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--margine); }

/* Testata */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.marchio img { width: 40px; height: 40px; border-radius: 22.4%; }
.destra { display: flex; align-items: center; gap: 12px; }
/* Menu delle sezioni, come su Misuro e Tenstack: da 961 px la testata resta fissa in alto e prende un fondo di vetro appena la pagina
   scorre; sotto i 961 px i link non ci sono (il selettore delle lingue occupa il posto) */
.testata-barra { z-index: 60; transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.testata-barra.scorre { background-color: rgba(245, 243, 244, .62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(21, 21, 21, .07), 0 8px 24px rgba(21, 21, 21, .05); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .testata-barra.scorre { background-color: rgba(245, 243, 244, .96); } }
.sezioni { display: none; }
@media (min-width: 961px) {
  html { scroll-padding-top: 84px; }
  .testata-barra { position: sticky; top: 0; }
  .sezioni { display: flex; gap: 20px; font-size: 14.5px; margin-right: 10px; }
  .sezioni a { text-decoration: none; color: var(--tenue); white-space: nowrap; }
  .sezioni a:hover { color: var(--inchiostro); }
}
/* tra 961 e 1199 px il pulsante «Presto su App Store» lascia il posto ai link */
@media (min-width: 961px) and (max-width: 1199px) { .destra .tasto { display: none; } }
.lingue { display: flex; gap: 2px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.lingue a { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--tenue); padding: 6px 11px; border-radius: 999px; letter-spacing: .02em; }
.lingue a[aria-current="true"] { background: var(--inchiostro); color: var(--sfondo); }
.lingue a:not([aria-current]):hover { color: var(--inchiostro); }

/* Pulsanti */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px;
  border-radius: 999px; font: 600 17px/1 var(--font); text-decoration: none; border: 0; cursor: default;
  background: var(--inchiostro); color: var(--sfondo);
}
.tasto.chiaro { background: var(--bianco); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; }
.tasto.chiaro:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(21,21,21,.22); }
.tasto.presto { cursor: default; }
.tasto small { font-size: 12px; font-weight: 500; opacity: .7; display: block; line-height: 1.1; }
.tasto svg { width: 22px; height: 22px; fill: currentColor; }
.tasto.mini { min-height: 40px; padding: 0 18px; font-size: 14px; }
.tasto.mini svg { width: 18px; height: 18px; }

/* Apertura */
.apertura { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(24px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.occhiello { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); margin: 0 0 18px; }
/* il claim sta sempre su due righe: la grandezza si adatta alla riga più lunga (--car = lettere) e alla colonna */
.apertura > div:first-child { container-type: inline-size; }
.apertura h1 { font-size: min(92px, calc(100cqw / (var(--car, 12) * .42))); white-space: nowrap; line-height: 1; letter-spacing: -.03em; font-weight: 400; margin: 0 0 24px; }
.apertura h1 .rg { display: block; width: max-content; }
h1 { font-size: clamp(46px, 7.4vw, 92px); line-height: .98; letter-spacing: -.03em; font-weight: 400; margin: 0 0 24px; text-wrap: balance; }
h1 b { font-weight: 600; }
.lead { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--tenue); margin: 0 0 32px; max-width: 30em; text-wrap: pretty; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.nota-store { margin: 14px 0 0; font-size: 14px; color: var(--tenue); }

/* Cornice del telefono */
.tel { position: relative; margin: 0; width: 100%; aspect-ratio: 468 / 908; }
.tel::before { content: ""; position: absolute; left: 7%; top: 3%; width: 86%; height: 94%; border-radius: 13.7% / 6.3%; box-shadow: 0 30px 50px -8px rgba(21,21,21,.22); }
.tel .schermo { position: absolute; left: 7.051%; top: 1.872%; width: 85.897%; height: 96.256%; border-radius: 13.7% / 6.3%; overflow: hidden; background: #151515; }
.tel .schermo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tel .cornice { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.telefoni { position: relative; aspect-ratio: 1 / 1.08; }
.telefoni .tel { position: absolute; width: 52%; }
.telefoni .t1 { left: 4%; top: 0; z-index: 2; }
.telefoni .t2 { right: 0; top: 14%; }

/* Sezioni */
section { padding: clamp(40px, 7vw, 88px) 0; }
h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.04em; font-weight: 400; margin: 0 0 16px; text-wrap: balance; }
h2 b { font-weight: 600; }
.intro { max-width: 40em; color: var(--tenue); font-size: clamp(18px, 2vw, 21px); margin: 0 0 clamp(28px, 4vw, 48px); text-wrap: pretty; }
.centro { text-align: center; }
.centro .intro { margin-left: auto; margin-right: auto; }

/* Tre passi */
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: p; }
.passo { background: var(--bianco); border-radius: var(--raggio); padding: 32px; counter-increment: p; }
.passo::before { content: counter(p); display: block; font-size: 112px; line-height: .8; letter-spacing: -.05em; font-weight: 600; margin: 0 0 36px -4px; color: var(--inchiostro); }
.passo:nth-child(1)::before { color: var(--azzurro); }
.passo:nth-child(2)::before { color: var(--giallo); }
.passo:nth-child(3)::before { color: var(--confetto); }
.passo h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0 0 10px; }
.passo p { margin: 0; color: var(--tenue); font-size: 17px; }

/* Riquadri */
.riquadri { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.r { position: relative; border-radius: var(--raggio); padding: 32px; overflow: hidden; background: var(--bianco); min-height: 320px; display: flex; flex-direction: column; }
.r h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 0 0 10px; text-wrap: balance; }
.r p { margin: 0 0 24px; font-size: 17px; line-height: 1.45; max-width: 24em; text-wrap: pretty; }
.r.l4 { grid-column: span 4; } .r.l5 { grid-column: span 5; } .r.l6 { grid-column: span 6; } .r.l7 { grid-column: span 7; } .r.l8 { grid-column: span 8; }
.r.azzurro { background: var(--azzurro); } .r.giallo { background: var(--giallo); } .r.confetto { background: var(--confetto); }
.r.crema { background: var(--crema); } .r.nero { background: var(--inchiostro); color: var(--sfondo); } .r.menta { background: var(--menta); color: #fff; }
.r.nero p, .r.menta p { color: rgba(255,255,255,.78); }
.r.azzurro p, .r.giallo p, .r.confetto p, .r.crema p { color: rgba(21,21,21,.72); }
.r p, .r.bianco p { color: var(--tenue); }

.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 28px; }
.mosaico img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.cifra { margin-top: auto; padding-top: 24px; font-size: clamp(72px, 10vw, 128px); line-height: .9; letter-spacing: -.035em; font-weight: 500; }
.cifra small { display: block; font-size: 22px; letter-spacing: -.01em; font-weight: 500; margin-top: 12px; opacity: .7; }
.chip-riga { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.chip { border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 15px; background: rgba(255,255,255,.7); color: var(--inchiostro); }
.chip.piu { background: var(--inchiostro); color: var(--sfondo); }
.ritaglio { position: relative; margin-top: auto; margin-bottom: -32px; height: 340px; overflow: hidden; border-radius: 22px 22px 0 0; background: var(--sfondo); }
.ritaglio img { position: absolute; width: 100%; max-width: none; left: 0; top: 0; }
.taglio { margin: 28px -8px -140px; align-self: center; width: min(280px, 82%); }
.coppia { display: flex; gap: 14px; justify-content: center; margin: 28px 0 -150px; }
.coppia .tel { width: min(190px, 44%); }
.coppia .tel:nth-child(2) { margin-top: 36px; }

/* Widget (disegnato come quello vero) */
.widget { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.w-pic { position: relative; width: 150px; height: 150px; flex: none; border-radius: 30px; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: #1b3a40 center / cover no-repeat; box-shadow: 0 14px 30px -14px rgba(21,21,21,.5); }
.w-pic::before, .w-carta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(8,24,28,.88)); }
.w-pic > *, .w-carta > * { position: relative; }
.w-pill { align-self: flex-start; background: rgba(255,255,255,.92); color: var(--inchiostro); border-radius: 9px; font-size: 12px; font-weight: 700; padding: 3px 9px; }
.w-nome { font-weight: 600; font-size: 15px; line-height: 1.1; margin-bottom: 3px; }
.w-sub { font-size: 12px; font-weight: 500; opacity: .85; margin-bottom: 7px; white-space: nowrap; }
.w-barra { height: 7px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
.w-barra i { display: block; height: 100%; width: 63%; background: #fff; border-radius: 99px; }
/* il medio: una base di vetro con tre schede una accanto all'altra */
.w-med { flex: 1 1 300px; min-width: 0; max-width: 380px; height: 150px; border-radius: 30px; padding: 5px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 30px -14px rgba(21,21,21,.35); }
.w-carta { position: relative; border-radius: 0; overflow: hidden; color: #fff; background: center / cover; display: flex; flex-direction: column; justify-content: space-between; padding: 9px; }
.w-carta:first-child { border-radius: 25px 0 0 25px; }
.w-carta:last-child { border-radius: 0 25px 25px 0; }
.w-carta .w-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 7px; }
.w-carta .w-nome { font-size: 11.5px; margin-bottom: 2px; }
.w-carta .w-sub { font-size: 9.5px; margin-bottom: 5px; }
.w-carta .w-barra { height: 4px; }
.w-carta .w-barra i { width: var(--q); }
.r.nero h3 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.r.nero p { font-size: 19px; max-width: 30em; }
.promesse { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.promesse span { display: inline-flex; align-items: center; gap: 12px; border-radius: 16px; padding: 0 20px; height: 44px; font-weight: 600; font-size: 16px; color: var(--inchiostro); }
.promesse span:nth-child(1) { background: var(--azzurro); }
.promesse span:nth-child(2) { background: var(--giallo); }
.promesse span:nth-child(3) { background: var(--confetto); }
.lingue-elenco { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.lingue-elenco span { background: rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 16px; }

/* Schermate */
.galleria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.galleria figure { margin: 0; }
.galleria figcaption { margin-top: 72px; font-size: 16px; line-height: 1.35; color: var(--tenue); text-align: center; text-wrap: balance; }
.galleria figcaption b { display: block; color: var(--inchiostro); font-size: 18px; margin-bottom: 4px; }

/* Prezzo */
.fascia { background: var(--inchiostro); color: var(--sfondo); border-radius: 44px; padding: clamp(36px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.fascia h2 { margin: 0; }
.fascia p { margin: 0; color: rgba(245,243,244,.75); font-size: clamp(18px, 2vw, 21px); text-wrap: pretty; }
.elenco-no { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.elenco-no li { border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 15px; background: rgba(255,255,255,.12); color: var(--sfondo); }
.elenco-no li::before { content: "—  "; opacity: .55; }

/* Domande */
.domande { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
details { background: var(--bianco); border-radius: 24px; padding: 0 28px; }
summary { list-style: none; cursor: pointer; padding: 24px 0; font-weight: 600; font-size: 19px; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--sfondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 12l6 6 6-6' fill='none' stroke='%23151515' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px; transition: transform .25s; }
details[open] summary::after { transform: rotate(180deg); }
details p { margin: 0 0 24px; color: var(--tenue); font-size: 17px; max-width: 40em; }

/* Piede */
.piede { padding-block: 56px 64px; }
.piede-in { border-top: 1px solid var(--linea); padding-top: 36px; display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; justify-content: space-between; }
.piede .marchio { font-size: 18px; }
.piede .marchio img { width: 34px; height: 34px; }
.piede nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 500; font-size: 16px; }
.piede nav a { text-decoration: none; color: var(--tenue); }
.piede nav a:hover { color: var(--inchiostro); }
.piede .altra-riga { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.piede .altra-riga .piccolo { margin: 0; text-align: right; max-width: 52ch; }
.piede .altra { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 10px; max-width: 320px; text-decoration: none; color: var(--tenue); font-weight: 500; font-size: 15px; }
.piede .altra .da { flex-basis: 100%; font-size: 13px; color: var(--tenue); opacity: .8; }
.piede .altra img { width: 28px; height: 28px; border-radius: 22.4%; }
.piede .altra b { color: var(--inchiostro); font-weight: 600; }
.piede .altra:hover b { text-decoration: underline; }
@media (max-width: 760px) { .piede .altra-riga .piccolo { text-align: left; } }
.piccolo { font-size: 13.5px; line-height: 1.5; color: var(--tenue); max-width: 46em; margin: 28px 0 0; }

/* Pagine di testo (privacy, assistenza) */
.testo-pagina { max-width: 780px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.testo-pagina h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 14px; }
.testo-pagina .data { color: var(--tenue); font-size: 15px; margin: 0 0 40px; }
.testo-pagina .lead { margin-bottom: 40px; }
.blocco { background: var(--bianco); border-radius: 28px; padding: 28px 32px; margin: 0 0 12px; }
.blocco h2 { font-size: 24px; letter-spacing: -.025em; font-weight: 600; margin: 0 0 10px; line-height: 1.15; }
.blocco p, .blocco li { color: var(--tenue); font-size: 17px; }
.blocco p { margin: 0 0 10px; }
.blocco p:last-child { margin-bottom: 0; }
.blocco ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.blocco.evidenza { background: var(--confetto); }
.blocco.evidenza p { color: rgba(21,21,21,.8); }
.blocco a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Parallasse dei telefoni: la proprietà `translate` si somma alle altre trasformazioni; --py lo imposta lo script */
/* niente ombre né sfocature sugli elementi che si muovono; il livello del telefono si anima sul compositore */
.anim .tel { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
/* le sezioni fuori schermo non si disegnano finché non servono */
section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Movimento: si attiva solo se chi guarda non ha chiesto meno animazioni (la classe «anim» la mette lo script in testa) */
.anim .appare { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.anim .appare.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Personalizza: uno slider del colore che tinge fondo, scheda e pulsanti. I colori li scrive lo script (--c, --fondo, --chiaro, --scuro, --disco, --vetro, --su). */
.pers { --c: #FF4D8D; --fondo: #F7D5DF; --chiaro: #FF7AA7; --scuro: #E64578; --disco: #C7385A; --vetro: rgba(21,21,21,.38); --sfum: #3D9ECC; --su: #fff; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.pers.morbido, .pers.morbido * { transition: background-color .22s, color .22s; }
/* la scheda di anteprima cambia di colpo, titolo compreso: niente dissolvenza sul testo */
.pers.morbido .pc, .pers.morbido .pc * { transition: none; }
/* solo l'anteprima sta su una base smussata che si colora; il resto resta sullo sfondo chiaro */
.pers-base { background: var(--fondo); border-radius: 44px; padding: clamp(24px, 4vw, 48px); display: flex; align-items: center; justify-content: center; }
.pers-sx { max-width: 380px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.pc { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; color: var(--su);
  background: linear-gradient(to bottom left, var(--chiaro), var(--c) 50%, var(--scuro));
  }
/* la cornice chiara attorno alla scheda (la «base») porta l'ombra; il blocco colorato dentro non ne ha */
.pc-base { padding: 8px; border-radius: 36px; background: rgba(255,255,255,.7); box-shadow: 0 24px 50px -22px rgba(21,21,21,.5); }
/* come la scheda «solo colore» dell'app: un disco chiaro con due anelli in alto a destra, un disco scuro in basso a sinistra */
.pc-d1, .pc-r1, .pc-r2, .pc-d2 { position: absolute; border-radius: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.pc-d1 { left: 90%; top: 8%; width: 130%; background: rgba(255,255,255,.2); }
.pc-r1 { left: 90%; top: 8%; width: 150%; border: 1.5px solid rgba(255,255,255,.22); }
.pc-r2 { left: 90%; top: 8%; width: 189%; border: 1.5px solid rgba(255,255,255,.22); }
.pc-d2 { left: 0%; top: 100%; width: 112%; background: var(--disco); opacity: .28; }
.pc-pill { position: absolute; top: 16px; height: 36px; padding: 0 14px; display: grid; place-items: center; border-radius: 14px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pc-pill.chiara { left: 16px; background: rgba(255,255,255,.92); color: #151515; }
.pc-pill.vetro { right: 16px; background: var(--vetro); color: var(--su); }
.pc-testi { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 4px; }
.pc-testi b { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; font-weight: 600; line-height: 1.1; }
.pc-testi span { font-size: 15px; opacity: .85; }
.pc-barra { height: 8px; border-radius: 99px; background: rgba(255,255,255,.3); margin-top: 10px; overflow: hidden; }
.pc-barra i { display: block; height: 100%; width: 63%; background: #fff; border-radius: 99px; }
/* i pulsanti stanno sopra l'ombra della card (position + z-index), non sotto */
.pa { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-top: 28px; }
.pa span { height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.78); font-weight: 600; font-size: 15px; color: #151515; }
.pa span { min-width: 0; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa .pa-versa { background: var(--c); color: var(--su); }
.pers-dx { display: flex; flex-direction: column; gap: 14px; }
.ps-riga { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; align-items: center; }
.ps-campione { height: 56px; border-radius: 16px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21,21,21,.12); }
.ps { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; margin: 0; background: transparent; border-radius: 16px; cursor: pointer; touch-action: pan-y; }
.ps::-webkit-slider-runnable-track { height: 56px; border-radius: 16px; background: var(--grad); box-shadow: inset 0 0 0 1px rgba(21,21,21,.12); }
.ps::-moz-range-track { height: 56px; border-radius: 16px; background: var(--grad); box-shadow: inset 0 0 0 1px rgba(21,21,21,.12); }
.ps::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(21,21,21,.3); }
.ps::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(21,21,21,.3); }
/* con una foto scelta il pomello non c'è: riappare solo toccando lo slider */
.ps.senza::-webkit-slider-thumb { opacity: 0; }
.ps.senza::-moz-range-thumb { opacity: 0; }
.ps:focus-visible { outline: 3px solid var(--rosa); outline-offset: 4px; }
.pp-titolo { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: rgba(21,21,21,.6); }
.pp-griglia { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.pp { aspect-ratio: 1; border: 0; border-radius: 12px; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(21,21,21,.12); transition: transform .2s; }
.pp:hover { transform: scale(1.06); }
.pp.on { box-shadow: 0 0 0 3px var(--inchiostro); }
.pp:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
/* i quattro riquadri riempiono lo spazio fino in fondo: il loro bordo basso è allineato a quello dei pulsanti a sinistra */
.pers-voci { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 10px; }
.pv { background: #fff; border-radius: 22px; padding: 18px 20px; }
.pv h3 { font-size: 17px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0 0 6px; text-wrap: balance; }
.pv p { margin: 0; color: rgba(21,21,21,.66); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 960px) {
  .pers { grid-template-columns: 1fr; }
  .pers-base { border-radius: 32px; }
}
@media (max-width: 560px) {
  .pers-voci { grid-template-columns: 1fr; }
  .ps-riga { grid-template-columns: minmax(0, 1fr) 60px; }
  .pp-griglia { gap: 6px; }
  .pa { grid-template-columns: 1.35fr 1fr 1fr; gap: 6px; }
  .pa span { font-size: 13.5px; padding: 0 4px; }
}

/* la scelta della foto: la prima casella è «solo colore» (mostra il colore scelto), le altre sono foto di categoria */
.pf { aspect-ratio: 1; border: 0; border-radius: 12px; padding: 0; cursor: pointer; background: #ddd center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(21,21,21,.12); transition: transform .2s; }
.pf:hover { transform: scale(1.06); }
.pf.on { box-shadow: 0 0 0 3px var(--inchiostro); }
.pf:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.pf.solo { background: var(--c); position: relative; }
.pf.solo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--su); opacity: .8; }
/* una scheda con foto: la sfumatura in basso è della foto (--sfum), non del colore scelto; il testo è bianco */
.pc.foto { color: #fff; background-size: cover; background-position: center; }
.pc.foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--sfum) 0%, transparent) 48%, color-mix(in srgb, var(--sfum) 78%, transparent) 76%, var(--sfum)); }
.pc.foto .pc-d1, .pc.foto .pc-r1, .pc.foto .pc-r2, .pc.foto .pc-d2 { display: none; }
.pc.foto .pc-pill.vetro { background: rgba(21,21,21,.42); color: #fff; }

/* Tablet e telefono */
@media (max-width: 960px) {
  .apertura { grid-template-columns: 1fr; }
  /* su mobile i telefoni stanno sopra il claim, senza parallasse */
  .telefoni { max-width: 520px; margin: 0 auto; width: 100%; order: -1; }
  .anim .tel { transform: none; will-change: auto; }
  .passi { grid-template-columns: 1fr; }
  .passo::before { font-size: 88px; margin-bottom: 24px; }
  .r.l4, .r.l5, .r.l6, .r.l7, .r.l8 { grid-column: span 12; }
  .r { min-height: 0; }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .fascia { grid-template-columns: 1fr; border-radius: 32px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .testata { flex-wrap: wrap; }
  .destra .tasto { display: none; }
  .lingue a { padding: 6px 9px; }
  .r { padding: 26px; }
  /* i pulsanti sotto il claim: a tutta larghezza, con testo e icona più grandi */
  .azioni { gap: 10px; }
  .azioni .tasto { width: 100%; min-height: 62px; font-size: 20px; gap: 12px; }
  .azioni .tasto svg { width: 28px; height: 28px; }
  .azioni .tasto small { font-size: 13px; }
  .coppia { margin-bottom: -110px; }
  .taglio { margin-bottom: -90px; }
  details { padding: 0 22px; }
  .blocco { padding: 24px; }
}