/* ==========================================================================
   SuperEasyWeb — oggetti.css
   Le simulazioni del BRIEF §3: Mockup (mini-siti in DOM), Configuratore,
   Sticker UI, Confronto, Numeri, Store. Tutto DOM + CSS + SVG, nessun raster.
   Il JS è in oggetti.js (SEW.mockup, SEW.configuratore, SEW.confronto, SEW.numeri, SEW.store).
   ========================================================================== */

/* ==========================================================================
   1. Mockup: mini-sito scalabile. Unità in em; 1em = larghezza/32 (container query).
   --scala moltiplica la larghezza base di 320px. Hover: tilt 3D + zoom 1.02.
   ========================================================================== */
.mockup {
  --scala: 1;
  --tx: 0deg; --ty: 0deg; --zoom: 1;
  --mk-fondo: #f4f4f4; --mk-carta: #fff; --mk-1: #0b6e7a; --mk-2: #d4f03c; --mk-testo: #0d2b30; --mk-chiaro: #fff;
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(320px * var(--scala)));
  background: var(--mk-fondo);
  color: var(--mk-testo);
  border-radius: var(--r-in);
  box-shadow: var(--ombra-card);
  overflow: clip;
  transform: perspective(1000px) rotateX(var(--ty)) rotateY(var(--tx)) scale(var(--zoom));
  transition: transform var(--speed-slow) var(--ease-out);
  will-change: transform;
}
.mockup--finestra { aspect-ratio: 4 / 5; }
.mockup--finestra .mk { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.mockup--finestra .mk::-webkit-scrollbar { display: none; }
.mockup.is-tilt { --zoom: 1.02; transition: transform var(--speed-fast) linear; }
.mk {
  font-family: var(--f-corpo);
  font-size: calc(100cqw / 32);
  line-height: 1.3;
  color: var(--mk-testo);
  text-align: left;
}
.mk * { box-sizing: border-box; }
.mk h5, .mk p, .mk ul { margin: 0; padding: 0; list-style: none; }

/* nav */
.mk__nav { display: flex; align-items: center; gap: .8em; height: 3.4em; padding: 0 1.4em; }
.mk__logo { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--mk-1); flex: 0 0 auto; }
.mk--pieno .mk__logo, .mk--scuro .mk__logo { background: var(--mk-2); }
.mk__marca { font-weight: 800; font-size: .95em; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__voci { margin-left: auto; display: flex; gap: .9em; font-size: .68em; font-weight: 600; opacity: .75; white-space: nowrap; }
.mk__voci span:nth-child(3) { display: none; }
@container (min-width: 380px) { .mk__voci span:nth-child(3) { display: inline; } }

/* hero */
.mk__hero { position: relative; display: grid; gap: 1em; padding: 1.4em 1.4em 1.8em; align-items: center; min-height: 10em; }
.mk__hero b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2em;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.mk__hero p { font-size: .8em; margin-top: .6em; opacity: .85; max-width: 26em; }
.mk__btn {
  display: inline-flex; align-items: center; gap: .5em;
  height: 2.4em; padding: 0 1.2em; margin-top: 1em;
  border-radius: 999px;
  background: var(--mk-1); color: var(--mk-chiaro);
  font-size: .75em; font-weight: 700; white-space: nowrap;
}
.mk__btn--2 { background: var(--mk-2); color: var(--mk-testo-2, var(--mk-testo)); }
.mk__figura { display: flex; align-items: center; justify-content: center; }
.mk__figura svg { width: 100%; max-width: 12em; height: auto; }
.mk--split .mk__hero { grid-template-columns: 1.25fr 1fr; }
.mk--centro .mk__hero { text-align: center; justify-items: center; }
.mk--centro .mk__hero p { margin-inline: auto; }
.mk--centro .mk__figura { position: absolute; inset: 0; z-index: 0; opacity: .16; }
.mk--centro .mk__figura svg { max-width: 18em; }
.mk--centro .mk__hero-testo { position: relative; z-index: 1; }
.mk--pieno .mk__hero, .mk--pieno .mk__nav { background: var(--mk-1); color: var(--mk-chiaro); }
.mk--pieno .mk__hero { grid-template-columns: 1.3fr .8fr; border-radius: 0 0 1.4em 1.4em; margin-bottom: .4em; }
.mk--pieno .mk__btn { background: var(--mk-2); color: var(--mk-testo-2, var(--mk-testo)); }
.mk--figura-sopra .mk__hero { grid-template-rows: auto auto; padding-top: .4em; }
.mk--figura-sopra .mk__figura { order: -1; width: 100%; aspect-ratio: 16 / 8; border-radius: .9em; background: var(--mk-2); overflow: hidden; }
.mk--figura-sopra .mk__figura svg { max-width: 60%; }

/* blocchi */
.mk__blocchi { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; padding: 0 1.4em 1.4em; }
.mk__blocco { background: var(--mk-carta); border-radius: .9em; padding: 1em; min-width: 0; }
.mk__blocco h5 { font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin-bottom: .8em; }
.mk__listino, .mk__galleria, .mk__form, .mk__blog, .mk__servizi { grid-column: 1 / -1; }
.mk__listino li { display: flex; justify-content: space-between; gap: 1em; font-size: .8em; padding: .35em 0; }
.mk__listino li + li { border-top: .1em solid rgba(0, 0, 0, .06); }
.mk--scuro .mk__listino li + li { border-top-color: rgba(255, 255, 255, .08); }
.mk__listino li b { font-weight: 700; white-space: nowrap; }
.mk__orari li { display: flex; justify-content: space-between; font-size: .72em; padding: .2em 0; }
.mk__orari li span:last-child { font-weight: 700; }
.mk__servizi ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mk__servizi li { display: grid; gap: .4em; font-size: .72em; font-weight: 600; }
.mk__servizi li::before { content: ""; width: 2em; height: 2em; border-radius: .6em; background: var(--mk-1); opacity: .9; }
.mk__servizi li:nth-child(2)::before { background: var(--mk-2); }
.mk__servizi li:nth-child(3)::before { background: var(--mk-1); opacity: .5; }
.mk__galleria ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.mk__galleria li { aspect-ratio: 1; border-radius: .6em; background: var(--mk-1); overflow: hidden; }
.mk__galleria li:nth-child(1) { background: linear-gradient(135deg, var(--mk-1), color-mix(in srgb, var(--mk-1) 55%, #fff)); }
.mk__galleria li:nth-child(2) { background: radial-gradient(circle at 30% 30%, var(--mk-2) 30%, var(--mk-1) 31%); }
.mk__galleria li:nth-child(3) { background: repeating-linear-gradient(45deg, var(--mk-1) 0 .6em, color-mix(in srgb, var(--mk-1) 70%, #fff) .6em 1.2em); }
.mk__galleria li:nth-child(4) { background: radial-gradient(circle at 70% 70%, var(--mk-1) 35%, var(--mk-2) 36%); }
.mk__galleria li:nth-child(5) { background: linear-gradient(180deg, var(--mk-2), color-mix(in srgb, var(--mk-2) 60%, var(--mk-1))); }
.mk__galleria li:nth-child(6) { background: repeating-radial-gradient(circle at 50% 50%, var(--mk-1) 0 .5em, color-mix(in srgb, var(--mk-1) 65%, #fff) .5em 1em); }
.mk__form { display: grid; gap: .5em; }
.mk__form h5 { margin-bottom: .2em; }
.mk__campo { height: 2.2em; border-radius: .5em; background: rgba(0, 0, 0, .06); display: flex; align-items: center; padding: 0 .8em; font-size: .72em; opacity: .7; }
.mk--scuro .mk__campo { background: rgba(255, 255, 255, .1); }
.mk__campo--alto { height: 3.6em; align-items: flex-start; padding-top: .6em; }
.mk__form .mk__btn { margin-top: .3em; justify-self: start; }
.mk__prenota .mk__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin-bottom: .7em; }
.mk__prenota .mk__cal i { aspect-ratio: 1; border-radius: .3em; background: rgba(0, 0, 0, .06); }
.mk--scuro .mk__prenota .mk__cal i { background: rgba(255, 255, 255, .1); }
.mk__prenota .mk__cal i.is-sel { background: var(--mk-1); }
.mk__prenota .mk__cal i.is-oggi { background: var(--mk-2); }
.mk__prenota .mk__btn { margin-top: 0; font-size: .68em; height: 2.2em; }
.mk__mappa { position: relative; min-height: 7em; overflow: hidden;
  background-color: var(--mk-carta);
  background-image:
    linear-gradient(rgba(0, 0, 0, .07) .12em, transparent .12em),
    linear-gradient(90deg, rgba(0, 0, 0, .07) .12em, transparent .12em),
    linear-gradient(rgba(0, 0, 0, .04) .08em, transparent .08em),
    linear-gradient(90deg, rgba(0, 0, 0, .04) .08em, transparent .08em);
  background-size: 2.4em 2.4em, 2.4em 2.4em, .8em .8em, .8em .8em;
}
.mk--scuro .mk__mappa { background-image: linear-gradient(rgba(255, 255, 255, .1) .12em, transparent .12em), linear-gradient(90deg, rgba(255, 255, 255, .1) .12em, transparent .12em); background-size: 2.4em 2.4em; }
.mk__mappa::before { content: ""; position: absolute; left: 10%; top: 40%; width: 120%; height: .9em; background: var(--mk-2); opacity: .6; transform: rotate(-18deg); border-radius: 1em; }
.mk__mappa h5 { position: relative; z-index: 1; }
.mk__pin { position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; border-radius: 50% 50% 50% 0; background: var(--mk-1); transform: translate(-50%, -80%) rotate(-45deg); box-shadow: 0 .3em .6em rgba(0, 0, 0, .2); }
.mk__pin::after { content: ""; position: absolute; inset: .45em; border-radius: 50%; background: #fff; }
.mk__recensioni ul { display: grid; gap: .6em; }
.mk__recensioni li { font-size: .72em; }
.mk__stelle { display: block; width: 5.6em; height: 1em; margin-bottom: .2em; background: var(--mk-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 1.12em 1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 1.12em 1em repeat-x; }
.mk__blog ul { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.mk__blog li { display: grid; gap: .4em; font-size: .72em; font-weight: 600; }
.mk__blog li::before { content: ""; aspect-ratio: 16 / 9; border-radius: .5em; background: linear-gradient(135deg, var(--mk-1), var(--mk-2)); }
.mk__blog li:nth-child(2)::before { background: linear-gradient(225deg, var(--mk-2), var(--mk-1)); }
.mk__blog li span { font-weight: 500; opacity: .7; }
.mk__piede { display: flex; justify-content: space-between; gap: 1em; padding: 1em 1.4em; font-size: .62em; opacity: .7; }

/* blocchi opzionali: visibili solo se accesi (aggiornati da SEW.mockup.aggiorna) */
.mk [data-servizio]:not(.is-on) { display: none; }
.mockup > [data-servizio]:not(.is-on) { display: none; }
.mk [data-servizio].is-on { animation: mk-entra .55s var(--ease-gentle) both; }
.mk__galleria.is-on li { animation: mk-pop .5s var(--ease-bounce) both; animation-delay: calc(var(--n, 0) * 60ms + 120ms); }
@keyframes mk-entra { from { opacity: 0; transform: translateY(1.2em) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* tasto WhatsApp flottante (figlio di .mockup: resta fisso mentre il mini-sito scorre) */
.mk__wa {
  position: absolute;
  right: 1.2em; bottom: 1.2em;
  z-index: 3;
  width: 3.4em; height: 3.4em;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 .4em 1em rgba(0, 0, 0, .22);
  font-size: calc(100cqw / 32);
}
.mk__wa::after {
  content: ""; position: absolute; inset: .8em; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.2 14.8l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 0 1 12 4zm-3 4.5c-.2 0-.5 0-.7.3s-1 1-1 2.4 1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7s1.7-.7 1.9-1.4.2-1.2.2-1.4-.3-.3-.6-.4l-2-1c-.3-.1-.5-.2-.7.2l-.9 1.1c-.2.2-.3.2-.6.1-1.2-.5-2.2-1.2-3-2.4-.2-.4.2-.4.6-1.2.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.2 14.8l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 0 1 12 4zm-3 4.5c-.2 0-.5 0-.7.3s-1 1-1 2.4 1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7s1.7-.7 1.9-1.4.2-1.2.2-1.4-.3-.3-.6-.4l-2-1c-.3-.1-.5-.2-.7.2l-.9 1.1c-.2.2-.3.2-.6.1-1.2-.5-2.2-1.2-3-2.4-.2-.4.2-.4.6-1.2.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk__wa.is-on { animation: mk-wa .7s var(--ease-bounce) both; }
@keyframes mk-wa { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk [data-servizio].is-on, .mk__galleria.is-on li, .mk__wa.is-on { animation: none; }
}

/* griglia di mockup (pagina template) */
.mockup-griglia { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mockup-scheda { display: grid; gap: 14px; }
.mockup-scheda__testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mockup-scheda__nome { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }

/* ==========================================================================
   2. Configuratore (in una .browser). Markup generato da SEW.configuratore().
   ========================================================================== */
.configuratore { position: relative; }
/* prima che il JS costruisca il markup, il contenitore riserva circa lo spazio finale: niente scatto di layout (CLS) */
.configuratore[data-auto]:not(.is-pronto) { min-height: 660px; }
@media (max-width: 1100px) { .configuratore[data-auto]:not(.is-pronto) { min-height: calc(600px + 72vw); } }
@media (max-width: 640px) { .configuratore[data-auto]:not(.is-pronto) { min-height: calc(720px + 95vw); } }
.configuratore__corpo {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(200px, 1fr) minmax(260px, 1.35fr);
  gap: var(--gap);
  padding: var(--gap);
  background: var(--sfondo);
}
.configuratore__pannello { background: var(--carta); border-radius: var(--r-in); padding: 16px; min-width: 0; }
.configuratore__pannello h4 { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.configuratore__pannello h4 i { width: 8px; height: 8px; border-radius: 50%; background: var(--blu); }
.configuratore__schede { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.configuratore__schede > * { min-width: 0; }
.scheda {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px 8px 8px;
  border-radius: 12px;
  background: var(--sfondo);
  color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  text-align: left;
  transition: background var(--speed-normal) var(--ease-hover), color var(--speed-normal) var(--ease-hover), transform var(--speed-fast) var(--ease-out);
}
.scheda:hover { background: #e9e9e9; }
.scheda:active { transform: scale(.98); }
.scheda[aria-checked="true"] { background: var(--ink); color: var(--carta); }
.scheda__colore { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; }
.scheda__colore::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.scheda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.configuratore__servizi .chip-gruppo { gap: 6px; }
.configuratore__servizi .chip { height: 36px; font-size: 14px; gap: 8px; padding: 0 12px 0 4px; }
.configuratore__servizi .chip::before { width: 26px; height: 26px; }
.configuratore__anteprima { display: grid; grid-template-rows: auto 1fr; padding: 16px; }
.configuratore__cornice { position: relative; min-height: 380px; }
.configuratore__cornice .mockup { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.configuratore__cornice .mockup.is-cambio { animation: mk-cambio .45s var(--ease-out) both; }
@keyframes mk-cambio { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.configuratore__piede {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--carta); border-radius: var(--r-in); padding: 12px 16px;
}
.configuratore__nota { font-size: 14px; color: var(--testo-2); }
.fascia { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.fascia__segmenti { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sfondo); }
.fascia__segmenti span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--testo-2);
  transition: background var(--speed-normal) var(--ease-hover), color var(--speed-fast) var(--ease-hover), transform var(--speed-normal) var(--ease-bounce);
}
.fascia__segmenti span.is-attiva { background: var(--blu); color: var(--carta); transform: scale(1.04); }
.fascia__segmenti span.is-passata { color: var(--ink); }

/* cursore-sticker della sequenza automatica */
/* intro della home: dal 01/10/2026 in components.css (.apertura) */

.cursore {
  position: absolute; left: 0; top: 0; z-index: 8;
  width: 30px; height: 34px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(13, 43, 48, .3));
  transform-origin: 6px 4px;
}
.cursore[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cursore { display: none; } }
.cursore svg { width: 100%; height: 100%; }
.cursore__eco { position: absolute; left: 6px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blu); opacity: 0; transform: translate(-50%, -50%); }
.cursore.is-clic .cursore__eco { animation: eco .5s var(--ease-out) both; }
@keyframes eco { from { opacity: .6; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(6); } }

.configuratore figcaption, .oggetto__didascalia { margin-top: 12px; font-size: 14px; color: var(--testo-2); }
.tile--blu .oggetto__didascalia, .tile--blu .configuratore figcaption { color: #e3f4f2; }
.tile--ink .oggetto__didascalia, .tile--ink .configuratore figcaption { color: rgba(255, 255, 255, .78); }

@media (max-width: 1100px) {
  .configuratore__corpo { grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr); }
  .configuratore__anteprima { grid-column: 1 / -1; }
  .configuratore__cornice { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .configuratore__corpo { grid-template-columns: 1fr; }
  .configuratore__schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configuratore__cornice { aspect-ratio: 4 / 4.4; }
  .configuratore__pannello { padding: 14px; }
}

/* ==========================================================================
   3. Sticker UI (CSS/SVG). Posizione e --shift si danno inline; il transform lo governa components.css.
   ========================================================================== */
.sticker--whatsapp {
  max-width: 250px;
  padding: 12px 16px 12px 16px;
  border-radius: 18px 18px 18px 4px;
  background: #dcf8c6;
  color: #10261a;
  font-size: 15px; font-weight: 500; line-height: 1.35;
  box-shadow: var(--ombra-card);
  rotate: -3deg;
}
.sticker--whatsapp::after {
  content: attr(data-ora) " \2713\2713";
  display: block; margin-top: 4px; text-align: right;
  font-size: 11px; color: #4b8f6a; letter-spacing: .02em;
}
.sticker--whatsapp:not([data-ora])::after { content: "20:41 \2713\2713"; }
.sticker--toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: var(--carta); color: var(--ink);
  box-shadow: var(--ombra-nav);
  font-size: 14px; line-height: 1.25;
  rotate: 2deg;
  white-space: nowrap;
}
.sticker--toast::before {
  content: ""; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--lime);
  -webkit-mask: none; mask: none;
  position: relative;
}
.sticker--toast b { display: block; font-weight: 700; }
.sticker--toast span { display: block; color: var(--testo-2); font-size: 13px; }
.sticker--stelle {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 18px 0 14px;
  border-radius: 999px;
  background: var(--carta); color: var(--ink);
  box-shadow: var(--ombra-card);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  rotate: -4deg;
}
.sticker--stelle::before {
  content: ""; width: 96px; height: 18px; background: var(--blu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
}
.sticker--badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px 0 14px;
  border-radius: 999px;
  background: var(--ink); color: var(--carta);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  box-shadow: var(--ombra-nav);
  rotate: 3deg;
}
.sticker--badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); animation: pulsa 1.8s var(--ease-in-out) infinite; }
.sticker--pin { width: 64px; height: 64px; rotate: -8deg; }
.sticker--pin::before {
  content: ""; position: absolute; left: 12px; top: 0; width: 40px; height: 40px;
  border-radius: 50% 50% 50% 0; background: var(--blu);
  transform: rotate(-45deg);
  box-shadow: var(--ombra-card);
}
.sticker--pin::after { content: ""; position: absolute; left: 24px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--carta); }
.sticker--pin i { position: absolute; left: 20px; bottom: 6px; width: 24px; height: 8px; border-radius: 50%; background: rgba(13, 43, 48, .25); filter: blur(2px); }
.sticker--chiama {
  display: inline-flex; align-items: center; gap: 12px;
  height: 72px; padding: 0 30px 0 22px;
  border-radius: 999px;
  background: var(--blu); color: var(--carta);
  font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(11, 110, 122, .35);
  rotate: -5deg;
  white-space: nowrap;
}
.sticker--chiama::before {
  content: ""; width: 30px; height: 30px; background: var(--carta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sticker--lime { background: var(--lime); color: var(--ink); box-shadow: 0 16px 40px rgba(13, 43, 48, .18); }
.sticker--lime::before { background: var(--ink); }
@media (max-width: 767px) {
  .sticker--whatsapp { max-width: 200px; font-size: 14px; }
  .sticker--chiama { height: 56px; font-size: 20px; padding: 0 22px 0 16px; }
  .sticker--chiama::before { width: 22px; height: 22px; }
}

/* ==========================================================================
   4. Confronto: tre colonne, quattro righe, barre che si riempiono nello scroll
   ========================================================================== */
.confronto {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 10px var(--gap);
  align-items: center;
}
.confronto > * { grid-column: var(--c); grid-row: var(--rg); }
.confronto__banda { grid-column: 4; grid-row: 1 / span var(--righe); background: var(--cielo); border-radius: var(--r-in); align-self: stretch; margin: -10px 0; }
.tile--cielo .confronto__banda, .tile--carta .confronto__banda { background: var(--carta); }
.tile--cielo .confronto__banda { box-shadow: var(--ombra-card); }
.confronto__testa { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.1; padding: 16px 12px 10px; position: relative; z-index: 1; }
.confronto__testa--sew { color: var(--blu-testo); }
.confronto__etichetta { font-weight: 600; line-height: 1.2; padding: 8px 0; }
.confronto__etichetta small { display: block; font-size: 12px; font-weight: 500; color: var(--testo-2); margin-top: 2px; }
.confronto__cella { position: relative; z-index: 1; padding: 8px 12px; }
.confronto__barra { display: block; height: 14px; border-radius: 999px; background: rgba(13, 43, 48, .1); overflow: hidden; }
.confronto__barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: rgba(13, 43, 48, .45); transform: scaleX(var(--v, 0)); transform-origin: left; }
.confronto__cella--sew .confronto__barra i { background: var(--blu); }
.confronto__cella--sew .confronto__barra { background: rgba(11, 110, 122, .15); }
.confronto__valore { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.confronto__cella--sew .confronto__valore { color: var(--blu-testo); }
.confronto__piede { grid-column: 1 / -1; font-size: 13px; color: var(--testo-2); padding-top: 4px; }
.confronto__cella:last-of-type { padding-bottom: 16px; }
@media (max-width: 640px) {
  .confronto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .confronto > * { grid-column: var(--c-m, var(--c)); grid-row: var(--rg-m, var(--rg)); }
  .confronto__etichetta { padding: 14px 0 2px; }
  .confronto__etichetta small { display: inline; margin-left: 6px; }
  .confronto__vuota { display: none; }
  .confronto__banda { grid-column: 3; grid-row: 1 / span var(--righe-m); }
  .confronto__testa { font-size: 15px; padding: 12px 8px 6px; }
  .confronto__cella { padding: 4px 8px; }
  .confronto__valore { font-size: 12px; }
}

/* ==========================================================================
   5. Numeri: card bianche ruotate con count-up e retro (flip)
   ========================================================================== */
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(16px, 2.5vw, 36px); padding: 10px 6px; }
.numeri .card-ruotata { min-height: 200px; }
.numeri .flip > * { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.numeri .numero { font-size: clamp(44px, 5vw, 60px); }
.numeri .flip__fronte p { font-weight: 600; line-height: 1.3; }
.numeri .flip__retro p { font-size: 15px; line-height: 1.4; }
@media (max-width: 767px) { .numeri { grid-template-columns: 1fr 1fr; gap: 14px; } .numeri .card-ruotata { min-height: 170px; } .numeri .numero { font-size: 40px; } }

/* ==========================================================================
   6. Store: moduli-interruttore + riquadro Fascia che sale
   ========================================================================== */
.store { display: grid; gap: var(--gap); align-items: start; }
.store__griglia { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.store__modulo {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; align-items: start;
  padding: 18px 18px 18px 20px;
  border-radius: var(--r-in);
  background: var(--carta); color: var(--ink);
  text-align: left;
  transition: background var(--speed-normal) var(--ease-hover), color var(--speed-normal) var(--ease-hover), transform var(--speed-fast) var(--ease-out), box-shadow var(--speed-normal) var(--ease-hover);
}
.store__modulo:hover { transform: translateY(-2px); box-shadow: var(--ombra-card); }
.store__modulo:active { transform: scale(.985); }
.store__modulo[aria-pressed="true"] { background: var(--ink); color: var(--carta); }
.store__icona { grid-column: 1; width: 40px; height: 40px; border-radius: 12px; background: var(--cielo); color: var(--blu-testo); display: inline-flex; align-items: center; justify-content: center; transition: background var(--speed-normal) var(--ease-hover), color var(--speed-normal) var(--ease-hover); }
.store__modulo[aria-pressed="true"] .store__icona { background: var(--lime); color: var(--ink); }
.store__interruttore { grid-column: 2; grid-row: 1; width: 44px; height: 26px; border-radius: 999px; background: rgba(13, 43, 48, .14); position: relative; transition: background var(--speed-normal) var(--ease-hover); }
.store__interruttore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--carta); transition: transform var(--speed-normal) var(--ease-bounce), background var(--speed-normal); }
.store__modulo[aria-pressed="true"] .store__interruttore { background: var(--blu); }
.store__modulo[aria-pressed="true"] .store__interruttore::after { transform: translateX(18px); background: var(--lime); }
.store__nome { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.store__descr { grid-column: 1 / -1; font-size: 14px; color: var(--testo-2); line-height: 1.4; }
.store__modulo[aria-pressed="true"] .store__descr { color: rgba(255, 255, 255, .78); }
.store__fascia { position: sticky; top: calc(var(--nav-h) + 30px); background: var(--carta); border-radius: var(--r-in); padding: 22px; display: grid; gap: 14px; }
.store__fascia h4 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.01em; margin: 0; }
.store__livelli { display: grid; gap: 6px; }
.store__livello {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 52px; padding: 0 16px;
  border-radius: 12px;
  background: var(--sfondo); color: var(--testo-2);
  font-weight: 600;
  transition: background var(--speed-normal) var(--ease-hover), color var(--speed-normal) var(--ease-hover), transform var(--speed-normal) var(--ease-bounce);
}
.store__livello small { font-size: 12px; font-weight: 500; }
.store__livello.is-passato { background: var(--cielo); color: var(--ink); }
.store__livello.is-attivo { background: var(--blu); color: var(--carta); transform: scale(1.03); }
.store__livello.is-attivo small { color: #e3f4f2; }
.store__conteggio { font-size: 14px; color: var(--testo-2); }
.store__conteggio b { color: var(--ink); }
.tile--cielo .store__fascia, .tile--carta .store__fascia { box-shadow: var(--ombra-card); }
.tile--cielo .store__modulo { box-shadow: none; }
@media (min-width: 900px) {
  .store { grid-template-columns: 1fr minmax(240px, 300px); }
}
@media (max-width: 899px) {
  .store__fascia { position: static; }
}