/* ══════════ stile.css — Mamma Sì, Ma Anche Donna! · preset dr-int21 ══════════
   Dal preset: fondo chiaro, serif bold centrato con la parola sottolineata, card bianche a bordo sottile,
   pill che aggiornano la card, video verticale coi sottotitoli, carosello a foto con badge, card sfumata,
   FAQ in card, footer scuro. Di questo store: latte rosato, cipria, rossetto, prugna, il filo rosso. */
:root {
  --fondo: #FBF4F0; --cipria: #F3D9D3; --cipria-2: #F8E8E3; --rossetto: #C8344A; --prugna: #3B1F2C; --oro: #C9A36A;
  --testo: #3B1F2C; --tenue: #7A5A63; --accento: #C8344A; --ris: #C8344A;
  --evid: rgba(232, 160, 170, .55); --mano-colore: #C8344A;
  --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23C8344A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --corpo: 18.5px; --riga: 1.55;
  --font-titolo: "Fraunces", Georgia, serif; --font-corpo: "Figtree", system-ui, sans-serif;
  --bottone-fondo: var(--prugna); --bottone-testo: #fff; --raggio: 999px;
  --ombra: 0 18px 40px -22px rgba(59, 31, 44, .45);
}
html { font-size: 17.5px; }
body { background: var(--fondo); }
main > section { background-color: var(--fondo); }
.testata { font-size: 16px; }
::selection { background: var(--cipria); }

/* testata fissa, come INT21 */
.testata { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(59,31,44,.07); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--prugna); font: 800 1.02rem/1 var(--font-titolo); }
.logo svg { width: 30px; color: var(--rossetto); }
.logo i { color: var(--rossetto); font-weight: 800; }
.testata-prezzo { font: 800 .95rem/1 var(--font-corpo); color: #fff; background: var(--rossetto); padding: 9px 14px; border-radius: 999px; text-decoration: none; }

section { position: relative; }
.guscio { width: min(100% - 40px, 36rem); margin: 0 auto; }
.centro { text-align: center; }
.corpo { font-size: 1.03rem; margin-top: 14px; color: var(--testo); }
.corpo.centro { margin-left: auto; margin-right: auto; }
.titolo { font: 800 clamp(2rem, 8.6vw, 3.2rem)/1.06 var(--font-titolo); letter-spacing: -.02em; color: var(--prugna); }
.titolo em { font-style: italic; color: var(--rossetto); font-weight: 800; }
.occhiello { font: 800 .95rem/1 var(--font-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--rossetto); margin-bottom: 12px; }
.chiusa { margin-top: 22px; font-size: 1.12rem; line-height: 1.45; }
.card { background: #fff; border: 1px solid rgba(59,31,44,.1); border-radius: 26px; box-shadow: var(--ombra); position: relative; }
.bottone { box-shadow: 0 14px 26px -12px rgba(59,31,44,.6); transition: transform .2s; }
.bottone:active { transform: scale(.97); }
.bottone-rossetto { background: var(--rossetto); margin-top: 26px; }
.bottone-pieno { width: 100%; margin-top: 20px; font-size: 1.1rem; }
.rischio { font-size: 1rem; color: var(--tenue); }
.rischio s { opacity: .7; } .rischio b { color: var(--rossetto); font-size: 1.15em; }
.gigante { color: var(--prugna); font-weight: 900; }
.nota { font-weight: 700; }

/* le foto (segnaposto in anteprima: luce del mattino, cipria e pesca) */
.foto { position: relative; overflow: hidden; background:
  radial-gradient(60% 50% at 70% 25%, rgba(255,246,236,.95), transparent 70%),
  radial-gradient(50% 60% at 25% 75%, rgba(200,52,74,.28), transparent 70%),
  radial-gradient(80% 70% at 50% 55%, #EBC3B6, #D99A8C 75%, #B9707A); }
.foto::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); mix-blend-mode: overlay; pointer-events: none; }
.foto-etichetta { position: absolute; left: 12px; bottom: 12px; z-index: 2; font: 600 1.15rem/1.1 "Caveat", cursive; color: var(--prugna); background: rgba(255,255,255,.82); padding: 6px 11px; border-radius: 10px; }

/* ══ APERTURA ══ */
#apertura { padding: 26px 0 0; overflow: hidden; text-align: center; }
.archi { position: absolute; inset: 0 0 auto; height: 620px; pointer-events: none; background:
  radial-gradient(120% 70% at 110% 0%, var(--cipria) 0 38%, transparent 38.3%),
  radial-gradient(90% 60% at -20% 30%, var(--cipria-2) 0 30%, transparent 30.3%); opacity: .9; }
.ap-testo { position: relative; width: min(100% - 32px, 40rem); margin: 0 auto; }
.pre { display: inline-block; font: 700 .98rem/1.25 var(--font-corpo); color: var(--rossetto); background: #fff; border: 1.5px solid var(--cipria); padding: 7px 14px; border-radius: 999px; }
.headline { margin-top: 14px; font-family: var(--font-titolo); color: var(--prugna); letter-spacing: -.025em; }
.headline > span { display: block; }
.h-l1 { font-weight: 900; font-size: clamp(2.45rem, 11.4vw, 4.6rem); line-height: .98; }
.h-l1 em { font-style: italic; color: var(--rossetto); }
.h-l2 { font-weight: 800; font-size: clamp(1.9rem, 8.6vw, 3.4rem); line-height: 1.05; margin-top: .12em; color: var(--rossetto); }
.filo-sotto { position: relative; display: inline-block; }
.filo-sotto svg { position: absolute; left: -2%; width: 104%; bottom: -.22em; height: .38em; overflow: visible; }
.filo-sotto path { fill: none; stroke: var(--rossetto); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.3s .4s cubic-bezier(.6,.1,.2,1); }
.v6-pronto .filo-sotto path { stroke-dashoffset: 0; }
@keyframes disegna { to { stroke-dashoffset: 0; } }
.h-l3 { font: 600 clamp(1.3rem, 5.6vw, 2rem)/1.2 var(--font-titolo); margin-top: .45em; color: var(--tenue); }
.h-l3 i { font-style: italic; font-weight: 800; color: var(--prugna); }
.sub { margin: 16px auto 0; font-size: 1.06rem; line-height: 1.5; max-width: 32rem; }
#apertura .bottone { margin-top: 18px; width: 100%; max-width: 380px; font-size: 1.1rem; }
.specchio { position: relative; width: min(100% - 56px, 380px); margin: 24px auto 0; }
.foto-specchio { aspect-ratio: 4/4.6; border-radius: 999px 999px 28px 28px; border: 7px solid #fff; box-shadow: 0 0 0 1.5px var(--oro), var(--ombra); animation: respira 7s ease-in-out infinite alternate; }
.foto-specchio .foto-etichetta { left: 50%; transform: translateX(-50%); white-space: nowrap; }
@keyframes respira { from { background-position: 0 0, 0 0, 0 0; filter: saturate(1); } to { background-position: 10px -12px, -8px 10px, 0 0; filter: saturate(1.12); } }
.badge-tondo { position: absolute; top: 16px; right: -10px; z-index: 3; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--rossetto); color: #fff; font: 900 1.3rem/1 var(--font-titolo); border: 3px solid #fff; box-shadow: var(--ombra); transform: rotate(10deg); }
.badge-tondo.piccolo { width: 60px; height: 60px; font-size: 1.05rem; top: -18px; right: 14px; left: auto; }
.nastro { margin-top: 28px; background: var(--prugna); color: #fff; overflow: hidden; padding: 13px 0; }
.nastro-scorre { display: flex; gap: 34px; width: max-content; animation: scorre 26s linear infinite; font: 700 1rem/1 var(--font-corpo); }
.nastro-scorre span::before { content: "✦"; color: var(--oro); margin-right: 12px; }
@keyframes scorre { to { transform: translateX(-50%); } }

/* ══ PROBLEMA ══ */
#problema { padding: 76px 0 70px; }
#problema .titolo { font-size: clamp(1.9rem, 8.2vw, 3rem); font-style: italic; }
.note-tel { margin: 26px auto 0; max-width: 340px; background: #FFFDF7; border-radius: 22px; box-shadow: var(--ombra); border: 1px solid rgba(59,31,44,.08); padding: 18px 20px 14px; transform: rotate(-1.5deg); }
.note-testa { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #eee2d8; padding-bottom: 8px; font: 800 1.35rem/1 var(--font-corpo); color: #C98B2B; }
.note-testa small { font-size: .9rem; color: var(--tenue); font-weight: 500; }
.note-lista { list-style: none; padding: 6px 0 0; }
.note-lista li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px dashed #eee2d8; font-size: 1.03rem; }
.note-lista li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 19px; height: 19px; border-radius: 50%; border: 2px solid #D3B9AE; }
.note-lista li.fatto { color: var(--tenue); text-decoration: line-through; text-decoration-color: rgba(122,90,99,.5); }
.note-lista li.fatto::before { background: #D3B9AE; }
.note-lista li.io { opacity: .38; font-weight: 700; border-bottom: 0; transition: opacity 1s; }
.note-lista li.io .nota { font-size: 1.3rem; margin-left: 8px; opacity: 1; }
.note-tel.acceso li.io { opacity: 1; color: var(--rossetto); }
.note-tel.acceso li.io::before { border-color: var(--rossetto); }
.note-lista li.v-entra { animation: voce .5s both; }
@keyframes voce { from { opacity: 0; transform: translateX(-12px); } }

/* ══ BIG IDEA ══ */
#bigidea { padding: 80px 0; background: #fff; }
#bigidea .gigante { font-size: clamp(2.3rem, 10.5vw, 4.6rem); text-align: center; }
.biglietto { margin: 32px auto 0; max-width: 360px; display: flex; align-items: stretch; background: var(--cipria-2); border-radius: 18px; position: relative; box-shadow: var(--ombra); overflow: hidden;
  -webkit-mask: radial-gradient(circle 12px at 68% 0, transparent 98%, #000) top/100% 51% no-repeat, radial-gradient(circle 12px at 68% 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle 12px at 68% 0, transparent 98%, #000) top/100% 51% no-repeat, radial-gradient(circle 12px at 68% 100%, transparent 98%, #000) bottom/100% 51% no-repeat; }
.big-sx { flex: 0 0 68%; padding: 18px 18px 18px 20px; border-right: 2px dashed rgba(59,31,44,.25); text-align: left; }
.big-sx small { font: 800 .8rem/1 var(--font-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.big-sx b { display: block; font: 800 1.5rem/1.1 var(--font-titolo); margin: 6px 0 10px; }
.big-req { font-size: 1rem; }
.big-req .barrato { font-weight: 800; }
.big-timbro { flex: 1; display: grid; place-items: center; text-align: center; padding: 8px; font: 900 .98rem/1.05 var(--font-titolo); color: var(--rossetto); text-transform: uppercase; }
.big-timbro { transform: rotate(-12deg) scale(1.6); opacity: 0; transition: transform .45s cubic-bezier(.3,1.6,.5,1) .9s, opacity .2s .9s; }
.biglietto.timbrato .big-timbro { transform: rotate(-12deg) scale(1); opacity: 1; }
.big-timbro::before { content: ""; position: absolute; width: 86px; height: 86px; border: 3px double var(--rossetto); border-radius: 50%; }
#bigidea .corpo { margin-top: 28px; }
.nota-riga { text-align: right; margin-top: 4px; }

/* ══ NEMICO ══ */
#nemico { padding: 80px 0; }
.calcolo { margin-top: 26px; padding: 22px 20px; }
.calcolo label { font: 800 1.2rem/1.2 var(--font-titolo); display: block; }
.calcolo-riga { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; }
.calcolo input[type=range] { flex: 1; accent-color: var(--rossetto); height: 32px; }
.calcolo output { font: 800 1.05rem/1 var(--font-corpo); color: var(--rossetto); min-width: 84px; text-align: right; }
.calcolo-r1 { font-size: 1.12rem; margin-top: 8px; }
.calcolo-r1 .num { font: 900 2.4rem/1 var(--font-titolo); color: var(--prugna); }
.calcolo-r2 { font-size: 1.05rem; margin-top: 8px; padding-top: 12px; border-top: 1px dashed #eadbd4; }
.calcolo-r2 b { font: 900 1.6rem/1 var(--font-titolo); }

/* ══ MECCANISMO ══ */
#meccanismo { padding: 80px 0; background: linear-gradient(#fff, var(--fondo)); }
.fili { width: 100%; max-width: 420px; margin: 18px auto 0; overflow: visible; }
.filo { fill: none; stroke: #D9BFC2; stroke-width: 4; stroke-linecap: round; transition: stroke .5s, stroke-width .5s; }
.filo.attivo { stroke: var(--rossetto); stroke-width: 6; }
.nodo { fill: var(--prugna); }
.pill-fili { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pill { position: relative; background: #fff; border: 1.5px solid #E8D3CF; border-radius: 18px; padding: 18px 6px 12px; font: 800 1rem/1.15 var(--font-titolo); color: var(--prugna); cursor: pointer; transition: border-color .3s, background .3s, transform .3s; }
.pill-n { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--cipria); color: var(--rossetto); font: 800 .85rem/26px var(--font-corpo); }
.pill.attiva { border-color: var(--rossetto); background: var(--cipria-2); transform: translateY(-3px); }
.pill.attiva .pill-n { background: var(--rossetto); color: #fff; }
.card-filo { margin-top: 26px; padding: 30px 22px 22px; border: 2px solid var(--rossetto); min-height: 236px; }
.badge-sporge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--rossetto); color: #fff; font: 800 .82rem/1 var(--font-corpo); letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.filo-pannello { display: none; }
.filo-pannello.attivo { display: block; animation: pannello .45s both; }
@keyframes pannello { from { opacity: 0; transform: translateY(10px); } }
.filo-pannello h3 { font: 800 1.6rem/1.15 var(--font-titolo); }
.filo-pannello p { margin-top: 10px; font-size: 1.03rem; }
.lucchetto { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px !important; padding: 9px 14px; border-radius: 12px; background: var(--fondo); font-size: 1rem !important; color: var(--tenue); }


/* ══ BENEFICI ══ */
#benefici { padding: 70px 0; background: var(--cipria-2); }
.card-otterrai { padding: 30px 22px 10px; }
.beneficio { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid #F0E2DD; }
.beneficio:first-of-type { border-top: 0; }
.icona-q { width: 52px; height: 52px; border-radius: 14px; background: var(--cipria-2); display: grid; place-items: center; font-size: 1.5rem; }
.beneficio h3 { font: 800 1.32rem/1.18 var(--font-titolo); }
.beneficio p { margin-top: 8px; font-size: 1.02rem; }
.video-v { margin: 30px auto 0; width: min(100%, 320px); background: #fff; padding: 9px; border-radius: 30px; box-shadow: var(--ombra); }
.foto-video { aspect-ratio: 9/16; border-radius: 22px; background:
  radial-gradient(45% 30% at 50% 58%, rgba(255,230,220,.9), transparent 70%),
  radial-gradient(70% 45% at 50% 100%, #8E4A5A, transparent 70%),
  linear-gradient(#E9CFC5, #C99187 60%, #8E5463); }
.sottotitoli { position: absolute; left: 12px; right: 12px; top: 4%; z-index: 2; text-align: center; min-height: 4.8em; }
.st { position: absolute; left: 0; right: 0; top: 0; display: inline; font: 800 1.35rem/1.25 var(--font-corpo); color: #fff; padding: 6px 10px; background: rgba(59,31,44,.78); border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.st.attivo { opacity: 1; transform: none; position: relative; }
.muto { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(59,31,44,.7); display: grid; place-items: center; }
.muto svg { width: 20px; }
.foto-video .foto-etichetta { bottom: 58px; }

/* ══ SOGNO · carosello ══ */
#sogno { padding: 80px 0 70px; }
.carosello { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px 20px 22px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carosello::-webkit-scrollbar { display: none; }
.sett { flex: 0 0 80%; max-width: 340px; scroll-snap-align: center; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid rgba(59,31,44,.08); box-shadow: var(--ombra); }
.sett .foto { aspect-ratio: 4/3.3; }
.foto-s2 { background: radial-gradient(60% 50% at 30% 30%, rgba(255,240,220,.9), transparent 70%), radial-gradient(80% 70% at 60% 70%, #E7B79A, #C7836B 70%, #9C5A55); }
.foto-s3 { background: radial-gradient(55% 45% at 70% 30%, rgba(255,250,240,.95), transparent 70%), radial-gradient(80% 70% at 40% 60%, #E5C6B6, #C99C8A 70%, #8F6A6E); }
.foto-s4 { background: radial-gradient(50% 40% at 60% 35%, rgba(255,236,214,.95), transparent 70%), radial-gradient(80% 70% at 50% 70%, #DDA59A, #B4646F 70%, #6E3448); }
.pillola { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: var(--prugna); font: 800 .82rem/1 var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.sett-testo { padding: 18px 20px 22px; }
.sett h3 { font: 800 1.4rem/1.15 var(--font-titolo); }
.sett p { margin-top: 8px; font-size: 1rem; color: var(--testo); }
.puntini { display: flex; justify-content: center; gap: 6px; }
.puntini i { width: 8px; height: 8px; border-radius: 99px; background: #E3C9C5; transition: width .3s, background .3s; }
.puntini i.on { width: 26px; background: var(--rossetto); }

/* ══ PRODOTTO ══ */
#prodotto { padding: 70px 0 80px; background: #fff; }
.card-sfumata { padding: 32px 22px 26px; border-radius: 30px; background: linear-gradient(160deg, #FBE3DD, #F7EDE9 55%, #FDF8F5); }
.card-sfumata .titolo { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.pill-bianche { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.pill-bianche li { background: #fff; border-radius: 18px; padding: 13px 16px 13px 46px; position: relative; font-weight: 700; font-size: 1rem; line-height: 1.3; box-shadow: 0 6px 16px -12px rgba(59,31,44,.4); }
.pill-bianche li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--rossetto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.targhette { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.targhette span { background: var(--prugna); color: #fff; border-radius: 12px; padding: 9px 14px; font: 800 1rem/1.1 var(--font-corpo); }
.targhette small { display: block; font-size: .78rem; font-weight: 500; opacity: .8; }
.telefoni { position: relative; height: 380px; margin-top: 30px; }
.tel { position: absolute; top: 20px; width: 182px; aspect-ratio: 9/18.5; border-radius: 30px; background: #1E1418; padding: 8px; box-shadow: 0 30px 50px -24px rgba(59,31,44,.6); }
.tel-a { left: 50%; margin-left: -170px; transform: rotate(-8deg); z-index: 2; }
.tel-b { left: 50%; margin-left: -10px; top: 40px; transform: rotate(7deg); }
.schermo { width: 100%; height: 100%; border-radius: 23px; overflow: hidden; position: relative; }
.copertina-guida { background: linear-gradient(170deg, var(--rossetto), #8E2337); color: #fff; padding: 26px 14px; display: flex; flex-direction: column; gap: 10px; }
.cop-tag { font: 800 .7rem/1 var(--font-corpo); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.cop-titolo { font: 900 1.45rem/1 var(--font-titolo); }
.cop-titolo i { color: #FFD9DE; }
.cop-filo { width: 90px; } .cop-filo path { fill: none; stroke: var(--oro); stroke-width: 3; stroke-linecap: round; }
.cop-usp { font-size: .78rem; line-height: 1.3; margin-top: auto; opacity: .92; }
.pagina-guida { background: #FFFBF8; padding: 22px 14px; display: flex; flex-direction: column; gap: 8px; }
.pagina-guida small { font: 800 .7rem/1 var(--font-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--rossetto); }
.pagina-guida b { font: 900 1.4rem/1 var(--font-titolo); color: var(--prugna); }
.riga-finta { display: block; height: 7px; border-radius: 4px; background: #EEDFD9; }
.riga-finta.corta { width: 60%; }
.pg-box { margin: 6px 0; padding: 14px 10px; border-radius: 12px; background: var(--cipria); font: 700 .8rem/1.2 var(--font-corpo); color: var(--prugna); text-align: center; }

/* ══ BONUS ══ */
#bonus { padding: 80px 0; }
.bonus-lista { display: grid; gap: 18px; margin-top: 28px; }
.bonus { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px; align-items: center; }
.cop { aspect-ratio: 3/4.2; border-radius: 6px 12px 12px 6px; padding: 12px 10px; color: #fff; display: flex; flex-direction: column; gap: 6px; position: relative; box-shadow: inset 6px 0 0 rgba(0,0,0,.14), 0 14px 24px -14px rgba(59,31,44,.7); }
.cop span { font: 800 .62rem/1 var(--font-corpo); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.cop b { font: 900 1rem/1.05 var(--font-titolo); }
.cop svg { width: 36px; margin-top: auto; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cop-b1 { background: linear-gradient(160deg, #4C2A3E, #2A1622); } .cop-b1 svg path { fill: var(--oro); stroke: none; }
.cop-b2 { background: linear-gradient(160deg, #D8707E, #B2384C); }
.cop-b3 { background: linear-gradient(160deg, #C9A36A, #9A7340); }
.bonus h3 { font: 800 1.25rem/1.15 var(--font-titolo); }
.bonus p { font-size: .98rem; margin-top: 6px; line-height: 1.4; }
.bonus-prezzo { margin-top: 10px !important; display: flex; align-items: center; gap: 10px; }
.bonus-prezzo s { color: var(--tenue); font-size: 1.05rem; }
.bonus-prezzo b { background: var(--rossetto); color: #fff; font: 900 .9rem/1 var(--font-corpo); letter-spacing: .1em; padding: 7px 11px; border-radius: 999px; }

/* ══ TESTIMONIANZE ══ */
#testimonianze { padding: 80px 0 70px; background: #fff; }
.voci blockquote { flex: 0 0 84%; max-width: 360px; scroll-snap-align: center; margin: 0; background: var(--fondo); border-radius: 24px; padding: 24px 20px 20px; border: 1px solid rgba(59,31,44,.07); display: flex; flex-direction: column; }
.voci blockquote::before { content: "★★★★★"; color: var(--oro); letter-spacing: .14em; font-size: 1rem; }
.voci blockquote p { margin-top: 10px; font-size: 1.02rem; line-height: 1.5; flex: 1; }
.voci footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 1rem; color: var(--tenue); }
.voci footer b { color: var(--prugna); }
.faccia { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.2rem/1 var(--font-titolo); border: 3px solid #fff; box-shadow: 0 4px 10px -4px rgba(59,31,44,.5); background: linear-gradient(140deg, #D99A8C, #B9707A); }
.f2 { background: linear-gradient(140deg, #C9A36A, #9A7340); } .f3 { background: linear-gradient(140deg, #8E4A5A, #4C2A3E); }
.f4 { background: linear-gradient(140deg, #E2A08F, #C8344A); } .f5 { background: linear-gradient(140deg, #B98C7E, #7A5A63); }
.f6 { background: linear-gradient(140deg, #D8707E, #8E2337); } .f7 { background: linear-gradient(140deg, #C7836B, #9C5A55); }
.f8 { background: linear-gradient(140deg, #A07A86, #5A3546); } .f9 { background: linear-gradient(140deg, #E0B48A, #B9707A); }

/* ══ OFFERTA ══ */
#offerta { padding: 80px 0; background: linear-gradient(var(--fondo), var(--cipria-2)); }
.card-offerta { margin-top: 40px; padding: 38px 22px 24px; border: 2px solid var(--rossetto); }
.off-testa { display: flex; gap: 14px; align-items: center; }
.off-cop { flex: 0 0 76px; aspect-ratio: 3/4.2; border-radius: 4px 9px 9px 4px; background: linear-gradient(170deg, var(--rossetto), #8E2337); color: #fff; padding: 9px 7px; display: flex; flex-direction: column; font: 900 .78rem/1 var(--font-titolo); box-shadow: inset 4px 0 0 rgba(0,0,0,.15), 0 10px 18px -10px rgba(59,31,44,.7); }
.off-cop i { color: #FFD9DE; margin-top: 2px; }
.off-testa h3 { font: 800 1.35rem/1.1 var(--font-titolo); }
.off-cosa { font-size: 1rem; margin-top: 6px; color: var(--tenue); line-height: 1.35; }
.off-prezzo { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.off-prezzo .gigante { color: var(--rossetto); font-size: clamp(3.6rem, 18vw, 5.4rem); }
.off-prezzo s { font: 700 1.6rem/1 var(--font-titolo); color: var(--tenue); }
.off-unico { font-size: 1rem; color: var(--tenue); }
.off-unico .nota { display: block; margin-top: 6px; }
.regalo { margin-top: 18px; background: var(--cipria-2); border-radius: 16px; padding: 14px 16px; }
.regalo-tag { font: 800 .95rem/1 var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--rossetto); }
.regalo ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.regalo li { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; }
.regalo li s { color: var(--tenue); font-weight: 500; }
.scarsita { margin-top: 16px; text-align: center; font-size: 1rem; }
.scarsita b { color: var(--rossetto); }
.copie { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.copie i { width: 22px; height: 8px; border-radius: 4px; background: #E3C9C5; }
.copie i.ultima { background: var(--rossetto); animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.pagamenti { text-align: center; font-size: .98rem; color: var(--tenue); margin-top: 12px; }

/* ══ GARANZIA ══ */
#garanzia { padding: 80px 0; background: var(--prugna); color: #fff; }
#garanzia .titolo { color: #fff; } #garanzia .titolo em { color: #FFB3BE; }
#garanzia .corpo { color: #F6E6EA; }
#garanzia mark { --evid: rgba(200,52,74,.75); color: #fff; }
.sigillo { position: relative; width: 170px; height: 170px; margin: 0 0 24px; }
.sigillo svg { width: 100%; height: 100%; animation: gira 22s linear infinite; }
.sigillo text { font: 800 15.5px/1 "Figtree", sans-serif; letter-spacing: .14em; fill: var(--oro); }
.sigillo-n { position: absolute; inset: 34px; border-radius: 50%; background: var(--rossetto); display: grid; place-content: center; text-align: center; color: #fff; }
.sigillo-n b { font: 900 2.6rem/1 var(--font-titolo); }
.sigillo-n small { font: 700 .9rem/1 var(--font-corpo); text-transform: uppercase; letter-spacing: .12em; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ══ DOMANDE ══ */
#domande { padding: 80px 0; }
#domande details { background: #fff; border: 1px solid rgba(59,31,44,.1); border-radius: 18px; padding: 0 18px; margin-top: 12px; }
#domande .titolo + details { margin-top: 26px; }
#domande summary { font: 800 1.12rem/1.3 var(--font-titolo); color: var(--prugna); padding-right: 34px; }
#domande summary::after { content: ""; width: 12px; height: 12px; border-right: 3px solid var(--rossetto); border-bottom: 3px solid var(--rossetto); transform: rotate(45deg); top: 1.25em; right: 6px; }
#domande details[open] summary::after { transform: rotate(-135deg); }
#domande details > p { font-size: 1.02rem; }

/* ══ CONGEDO ══ */
#congedo { padding: 60px 0 0; background: #fff; }
.foto-congedo { aspect-ratio: 4/4.4; border-radius: 30px; }
.congedo-pannello { position: relative; z-index: 2; margin: -70px 12px 0; background: #fff; border-radius: 26px; padding: 26px 20px 22px; box-shadow: var(--ombra); text-align: center; }
.congedo-pannello .gigante { font-size: clamp(2.1rem, 9.5vw, 3.8rem); }
.piede { margin-top: 70px; background: var(--prugna); color: #EBD9DE; padding: 40px 22px 110px; text-align: center; }
.piede-logo { font: 800 1.4rem/1 var(--font-titolo); color: #fff; margin-bottom: 14px; }
.piede-logo i { color: #FFB3BE; }
.piede p { font-size: 16.5px; line-height: 1.5; }
.disclaimer { margin: 14px auto 0; max-width: 34rem; opacity: .8; }

/* ══ COMPUTER ══ */
@media (min-width: 900px) {
  .testata { padding: 16px 48px; }
  #apertura { padding-top: 54px; }
  .specchio { width: 420px; }
  .bonus-lista { grid-template-columns: repeat(3, 1fr); }
  .bonus { grid-template-columns: 1fr; text-align: center; }
  .bonus .cop { width: 140px; margin: 0 auto; }
  .bonus-prezzo { justify-content: center; }
  .bonus-lista, #benefici .guscio, #prodotto .guscio { width: min(100% - 80px, 66rem); }
  #benefici .guscio { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
  #prodotto .guscio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .carosello { justify-content: safe center; }
  .sett { flex-basis: 300px; }
  .voci blockquote { flex-basis: 340px; }
}

[data-barra-acquisto] { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(59,31,44,.45); border: 1px solid rgba(59,31,44,.08); }
.barra-prezzo s { color: var(--tenue); } .barra-prezzo b { font: 900 1.4rem/1 var(--font-titolo); color: var(--rossetto); }
[data-barra-acquisto] .bottone { background: var(--rossetto); }
@media (prefers-reduced-motion: reduce) { .filo-sotto path { stroke-dashoffset: 0; } .big-timbro { opacity: 1; transform: rotate(-12deg); } .note-lista li.io { opacity: 1; } }

/* icone in codice (le emoji non ci sono su tutti i telefoni) */
.icona-q svg { width: 26px; height: 26px; fill: none; stroke: var(--rossetto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lucchetto::before, .pg-box::before, .regalo-tag::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.lucchetto::before, .pg-box::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10h12v11H6zM8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); }
.regalo-tag { display: flex; align-items: center; gap: 8px; }
.regalo-tag::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h18v4H3zM5 13h14v8H5zM12 9v12M12 9C9 3 5 6 8 9M12 9c3-6 7-3 4 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.pg-box { display: flex; gap: 6px; justify-content: center; align-items: center; }
/* l'evidenziatore copre tutta l'altezza della riga */
mark { background-position: 0 55%; padding: .04em .12em; }
mark.in-vista { background-size: 100% 1.15em; }
.testata + main section { scroll-margin-top: 64px; }

/* i media veri */
.foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.foto-specchio .foto-img { object-position: 50% 30%; }
.foto-congedo .foto-img { object-position: 50% 25%; }
.foto-s1 .foto-img { object-position: 30% 30%; }
.faccia { overflow: hidden; padding: 0; }
.faccia img { width: 100%; height: 100%; object-fit: cover; display: block; }