/* =========================================================
   CARD DEL CATALOGO /demo — la card è solo la cover.
   A sinistra cosa fa l'automazione (titolo) e il vantaggio,
   a destra un oggetto disegnato in CSS (js/demo-covers.js).
   Lo sfondo viene dalle palette .cover-macro-* di demos.css.
   Tutto è in em: la scala la decide .tile-scene in base
   alla larghezza della card (unità cq).
========================================================= */

.demo-tile {
  --tile-accent: #E6B17A;
  --tile-ink: #fff;
  --tile-serif: 'DM Serif Display', Georgia, serif;
  --tile-hand: 'Caveat', cursive;
  --tile-red: #D92D20;
  display: block; position: relative;
  border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16); }
.demo-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.tile-cover { position: relative; height: 100%; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; }
.tile-scene { position: absolute; inset: 0; font-size: clamp(9px, 3.3cqw, 22px); }

/* Accento per settore (stesso tono del vecchio "punch") */
.tile-cover.cover-macro-ristorazione { --tile-accent: #E89478; }
.tile-cover.cover-macro-automotive { --tile-accent: #E89D5A; }
.tile-cover.cover-macro-servizi-casa { --tile-accent: #F5DFC8; }
.tile-cover.cover-macro-beauty-benessere { --tile-accent: #E8A89A; }
.tile-cover.cover-macro-sport-fitness { --tile-accent: #F5B77A; }
.tile-cover.cover-macro-eventi { --tile-accent: #F2C6A0; }
.tile-cover.cover-macro-sanitario { --tile-accent: #B45B1A; --tile-ink: #2E4A3F; }

/* ---------- Testo ---------- */
.tile-text { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 47%; z-index: 5; color: var(--tile-ink); }
.tile-cover.no-obj .tile-text { width: 70%; }
.tile-text h3 {
  font-family: var(--tile-serif); font-weight: 400;
  font-size: 1.9em; line-height: 1.04; letter-spacing: -0.005em;
  color: var(--tile-ink); text-wrap: balance; margin: 0;
}
.tile-benefit { margin: 0.6em 0 0; font-size: 0.88em; font-weight: 700; line-height: 1.3; color: var(--tile-accent); }

/* Simbolo del settore per le demo senza oggetto */
.tile-glyph {
  position: absolute; right: -6%; bottom: -10%; width: 46%; height: auto; aspect-ratio: 1;
  fill: none; stroke: var(--tile-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.12;
}

/* ---------- Oggetto ---------- */
.tile-obj { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 39%; z-index: 3; }
.tile-obj.free { inset: 0; width: auto; transform: none; right: 0; }
.tile-obj .sm-only { display: none; }

/* Carta: conto, fattura, preventivo */
.tile-obj .paper { position: relative; background: #FFFDF8; color: var(--ink); border-radius: 0.45em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); padding: 0.9em 1em 0.8em; }
.tile-obj .paper h4 { font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; font-weight: 800; margin: 0 0 0.6em; }
.tile-obj .paper.brand-booking h4 { color: #003B95; }
.tile-obj .row { position: relative; display: flex; justify-content: space-between; gap: 0.8em; font-size: 0.7em; white-space: nowrap; color: #4B5563; padding: 0.42em 0; border-bottom: 1px dashed #E5E7EB; }
.tile-obj .row.plus { color: var(--green); font-weight: 800; background: #ECFDF3; margin: 0 -0.6em; padding: 0.42em 0.6em; border-radius: 0.3em; border: 0; }
.tile-obj .row .ring { position: absolute; inset: -35% -8%; width: 116%; height: 170%; overflow: visible; fill: none; stroke: var(--tile-red); stroke-width: 3; stroke-linecap: round; }
.tile-obj .row .ring path { vector-effect: non-scaling-stroke; }
.tile-obj .tot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; margin-top: 0.5em; font-size: 0.75em; font-weight: 800; white-space: nowrap; }
.tile-obj .tot b { font-family: var(--tile-serif); font-weight: 400; font-size: 1.7em; }
.tile-obj .paper-wrap { position: relative; }
.tile-obj .tilt-right { transform: rotate(4deg); }
.tile-obj .tilt-left { transform: rotate(-4deg); }
.tile-obj .torn {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.7em) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1em 0.7em repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.7em) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1em 0.7em repeat-x;
  border-radius: 0.45em 0.45em 0 0; padding-bottom: 1.4em;
}
.tile-obj .stamp { position: absolute; z-index: 2; right: -0.6em; top: -0.9em; transform: rotate(6deg); background: var(--green); color: #fff; font-size: 0.62em; font-weight: 800; padding: 0.35em 0.65em; border-radius: 0.3em; box-shadow: 0 0.3em 0.7em rgba(0,0,0,.3); white-space: nowrap; }

/* Chat dal telefono della struttura: verde a destra = noi, bianco a sinistra = ospite */
.tile-obj .thread { display: flex; flex-direction: column; gap: 0.5em; }
.tile-obj .bubble { max-width: 100%; padding: 0.55em 0.75em 0.4em; border-radius: 0.75em; font-size: 0.82em; line-height: 1.35; color: #111B21; box-shadow: 0 0.5em 1.2em rgba(0,0,0,.3); }
.tile-obj .bubble.guest { background: #fff; align-self: flex-start; border-top-left-radius: 0.15em; }
.tile-obj .bubble.us { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 0.15em; }
.tile-obj .bubble time { display: block; text-align: right; font-size: 0.72em; color: #667781; margin-top: 0.15em; }
.tile-obj .bubble time.late { color: var(--tile-red); font-weight: 800; }

/* Notifiche */
.tile-obj .notif { background: rgba(255,255,255,.95); color: #111; border-radius: 0.9em; padding: 0.65em 0.8em; display: grid; grid-template-columns: 2em 1fr auto; gap: 0.1em 0.6em; align-items: center; box-shadow: 0 0.7em 1.6em rgba(0,0,0,.35); }
.tile-obj .notif + .notif { margin-top: 0.5em; }
.tile-obj .notif .ic { grid-row: span 2; width: 2em; height: 2em; border-radius: 0.45em; display: grid; place-items: center; font-size: 0.85em; font-weight: 800; color: #fff; }
.tile-obj .notif strong { font-size: 0.78em; }
.tile-obj .notif time { font-size: 0.62em; color: #6B7280; }
.tile-obj .notif p { grid-column: 2 / 4; margin: 0; font-size: 0.78em; color: #374151; line-height: 1.3; }
.tile-obj .notif.money { outline: 0.15em solid var(--tile-accent); }
.tile-obj .notif.money p { font-weight: 800; color: var(--green); font-size: 0.95em; }

/* Cartellino del prezzo */
.tile-obj .tag-wrap { position: absolute; right: 7%; top: 12%; width: 34%; }
.tile-obj .string { position: absolute; left: 50%; top: -60%; width: 1px; height: 70%; background: rgba(255,255,255,.55); }
.tile-obj .pricetag {
  position: relative; aspect-ratio: 1 / 1.1; background: #FFF8EC; transform: rotate(-9deg); border-radius: 0.6em;
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 14%;
  filter: drop-shadow(0 1em 1.4em rgba(0,0,0,.35));
}
.tile-obj .pricetag::before { content: ""; position: absolute; top: 7%; left: 50%; width: 9%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #134239; }
.tile-obj .pricetag .old { font-family: var(--tile-serif); font-size: 1.5em; color: #8A8F98; position: relative; }
.tile-obj .pricetag .old::after { content: ""; position: absolute; left: -12%; right: -12%; top: 52%; height: 0.14em; background: var(--tile-red); transform: rotate(-12deg); border-radius: 1em; }
.tile-obj .pricetag .new { font-family: var(--tile-hand); font-size: 3.1em; font-weight: 700; color: var(--green); line-height: 0.95; transform: rotate(-4deg); }
.tile-obj .pricetag small { font-size: 0.58em; font-weight: 700; letter-spacing: 0.08em; color: #8A8F98; margin-top: 0.4em; text-transform: uppercase; }

/* Mucchio di curriculum */
.tile-obj .pile { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; }
.tile-obj .cv { position: absolute; width: 50%; aspect-ratio: 1 / 1.38; background: #fff; border-radius: 0.3em; box-shadow: 0 0.3em 1em rgba(0,0,0,.28); padding: 7%; overflow: hidden; color: #334155; }
.tile-obj .cv-head { display: flex; align-items: center; gap: 0.5em; padding-bottom: 0.45em; border-bottom: 0.12em solid var(--green); }
.tile-obj .cv .av {
  flex: none; width: 32%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 41%, #E7BFA0 0 19%, transparent 20%), radial-gradient(circle at 50% 35%, #7A5640 0 25%, transparent 26%), radial-gradient(ellipse 62% 42% at 50% 100%, #3F5A73 0 97%, transparent 100%), #DCE6EE;
}
.tile-obj .cv .ph-wrap { flex: 1; }
.tile-obj .cv-head b { display: block; font-size: 0.82em; color: var(--ink); line-height: 1.15; }
.tile-obj .cv-head small { display: block; font-size: 0.6em; color: #64748B; font-weight: 600; }
.tile-obj .cv h5 { font-size: 0.48em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); font-weight: 800; margin: 0.9em 0 0.25em; }
.tile-obj .cv p { margin: 0; font-size: 0.64em; font-weight: 700; color: var(--ink); }
.tile-obj .cv p.hl { background: rgba(230,177,122,.5); margin: 0 -0.3em; padding: 0.1em 0.3em; border-radius: 0.2em; }
.tile-obj .cv i { display: block; height: 0.26em; background: #E5E7EB; border-radius: 1em; margin: 0.35em 0; }
.tile-obj .cv i.s { width: 65%; }
.tile-obj .cv .ph { display: block; height: 0.38em; width: 80%; background: #CBD5E1; border-radius: 1em; }
.tile-obj .cv .ph + .ph { width: 55%; margin-top: 0.3em; background: #E2E8F0; }
.tile-obj .pile .cv:nth-child(1) { right: 2%;  bottom: -28%; transform: rotate(-14deg); }
.tile-obj .pile .cv:nth-child(2) { right: 24%; bottom: -34%; transform: rotate(9deg); }
.tile-obj .pile .cv:nth-child(3) { right: -14%; bottom: -14%; transform: rotate(22deg); }
.tile-obj .pile .cv:nth-child(4) { right: 38%; bottom: -30%; transform: rotate(-24deg); }
.tile-obj .pile .cv:nth-child(5) { right: -4%;  bottom: -6%;  transform: rotate(4deg); }
.tile-obj .pile .cv:nth-child(6) { right: 14%; bottom: 2%;   transform: rotate(-7deg); }
.tile-obj .pile .cv:nth-child(7) { right: -16%; bottom: 10%; transform: rotate(-19deg); }
.tile-obj .pile .cv:nth-child(8) { right: 32%; bottom: 0%;   transform: rotate(12deg); }
.tile-obj .pile .cv.chosen { right: 8%; bottom: 5%; transform: rotate(-4deg); z-index: 4; width: 66%; overflow: visible; box-shadow: 0 1.2em 2.4em rgba(0,0,0,.45); }
.tile-obj .cv-tag { position: absolute; top: -7%; right: -12%; z-index: 2; background: var(--tile-accent); color: var(--ink); font-family: var(--tile-hand); font-size: 1.5em; font-weight: 700; line-height: 1; padding: 0.15em 0.4em 0.2em; transform: rotate(8deg); box-shadow: 0 0.2em 0.5em rgba(0,0,0,.25); }

/* Schedine impilate */
.tile-obj .sheets { position: relative; display: grid; }
.tile-obj .sheet { grid-area: 1 / 1; position: relative; background: #fff; border-radius: 0.4em; box-shadow: 0 0.6em 1.4em rgba(0,0,0,.35); padding: 0.8em 0.9em 2.5em; }
.tile-obj .sheet:nth-child(1) { transform: rotate(-9deg) translate(-6%, 4%); }
.tile-obj .sheet:nth-child(2) { transform: rotate(-4deg) translate(-3%, 2%); }
.tile-obj .sheet:nth-child(3) { transform: rotate(2deg); }
.tile-obj .sheet:nth-child(4) { transform: rotate(6deg) translate(3%, -2%); }
.tile-obj .sheet h4 { font-size: 0.58em; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; font-weight: 800; margin: 0; }
.tile-obj .sheet dl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.25em 0.7em; margin: 0.55em 0 0; align-items: baseline; }
.tile-obj .sheet dt { font-size: 0.5em; color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tile-obj .sheet dd { margin: 0; line-height: 1.2; font-size: 0.66em; font-weight: 800; color: var(--ink); }
.tile-obj .sheet .ok { position: absolute; right: 0.8em; bottom: 0.8em; color: #16A34A; border: 0.13em solid #16A34A; border-radius: 0.3em; font-size: 0.62em; font-weight: 800; padding: 0.2em 0.5em; transform: rotate(-6deg); letter-spacing: 0.04em; text-transform: uppercase; }

/* Recensione con risposta */
.tile-obj .review { background: #fff; color: var(--ink); border-radius: 0.7em; padding: 0.75em 0.9em; box-shadow: 0 0.9em 2em rgba(0,0,0,.35); }
.tile-obj .review .top { display: flex; align-items: center; gap: 0.55em; }
.tile-obj .review .score { background: #003B95; color: #fff; font-weight: 800; font-size: 0.9em; padding: 0.22em 0.42em; border-radius: 0.35em 0.35em 0.35em 0; }
.tile-obj .review .name { font-size: 0.72em; font-weight: 700; }
.tile-obj .review .name span { display: block; font-weight: 500; color: #6B7280; font-size: 0.9em; }
.tile-obj .review q { display: block; font-size: 0.78em; margin-top: 0.45em; color: #374151; quotes: "«" "»"; }
.tile-obj .reply { margin-top: 0.6em; background: #F1F5F9; border-left: 0.22em solid #003B95; border-radius: 0.3em; padding: 0.45em 0.6em; font-size: 0.7em; color: #334155; }
.tile-obj .reply b { display: block; font-size: 0.9em; color: #003B95; margin-bottom: 0.1em; }

/* Chiamata */
.tile-obj .phone { background: #0B1220; border-radius: 1.4em; padding: 1.1em 0.9em 1em; text-align: center; color: #fff; box-shadow: 0 1em 2.4em rgba(0,0,0,.5); border: 0.25em solid #1F2937; }
.tile-obj .phone .ring-ic { width: 2.2em; height: 2.2em; margin: 0 auto 0.45em; border-radius: 50%; background: #1F2937; display: grid; place-items: center; box-shadow: 0 0 0 0.35em rgba(34,197,94,.18); }
.tile-obj .phone .ring-ic svg { width: 52%; height: 52%; color: #86EFAC; }
.tile-obj .phone .lbl { font-size: 0.62em; opacity: 0.65; letter-spacing: 0.06em; text-transform: uppercase; }
.tile-obj .phone .t { font-family: var(--tile-serif); font-size: 2.3em; line-height: 1.05; margin: 0.1em 0 0.25em; }
.tile-obj .phone .live { display: inline-flex; align-items: center; gap: 0.4em; background: rgba(34,197,94,.16); color: #86EFAC; font-size: 0.68em; font-weight: 700; padding: 0.3em 0.7em; border-radius: 99px; }
.tile-obj .phone .live::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: #22C55E; }

/* Tabellone camere */
.tile-obj .board { background: #FFFDF8; border-radius: 0.5em; padding: 0.8em 0.9em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); color: var(--ink); }
.tile-obj .board h4 { font-size: 0.6em; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; font-weight: 800; margin: 0 0 0.55em; display: flex; justify-content: space-between; gap: 0.6em; }
.tile-obj .rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; }
.tile-obj .room { border-radius: 0.3em; padding: 0.35em 0; text-align: center; font-size: 0.72em; font-weight: 800; background: #F1F5F9; color: #475569; }
.tile-obj .room.done { background: #DCFCE7; color: #166534; }
.tile-obj .room.moved { background: var(--tile-accent); color: var(--ink); outline: 0.15em dashed #B45309; }
.tile-obj .legend { display: flex; gap: 0.8em; margin-top: 0.55em; font-size: 0.55em; color: #64748B; font-weight: 600; }
.tile-obj .legend span { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.tile-obj .legend i { width: 0.8em; height: 0.8em; border-radius: 0.2em; background: #F1F5F9; display: inline-block; }
.tile-obj .legend i.done { background: #DCFCE7; }
.tile-obj .legend i.moved { background: var(--tile-accent); }

/* Profilo Instagram */
.tile-obj .ig { background: #fff; border-radius: 1em; padding: 0.7em; box-shadow: 0 1em 2.2em rgba(0,0,0,.45); color: var(--ink); transform: rotate(4deg); }
.tile-obj .ig .head { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.55em; }
.tile-obj .ig .av { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: conic-gradient(#F59E0B, #EC4899, #8B5CF6, #F59E0B); padding: 0.15em; }
.tile-obj .ig .av::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #D9E7DF; border: 0.12em solid #fff; box-sizing: border-box; }
.tile-obj .ig .h { font-size: 0.68em; font-weight: 800; }
.tile-obj .ig .h span { display: block; font-weight: 600; color: var(--green); }
.tile-obj .ig .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2em; }
.tile-obj .ig .tiles i { aspect-ratio: 1; display: block; border-radius: 0.15em; position: relative; overflow: hidden; }
.tile-obj .ig .tiles i:nth-child(1) { background: linear-gradient(160deg, #F6C28B, #7DB9C9); }
.tile-obj .ig .tiles i:nth-child(1)::after { content: ""; position: absolute; left: 58%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #FDE68A; }
.tile-obj .ig .tiles i:nth-child(2) { background: linear-gradient(160deg, #9CB37A, #5E7A4B); }
.tile-obj .ig .tiles i:nth-child(3) { background: linear-gradient(160deg, #E7D3B1, #C08A5B); }
.tile-obj .ig .acts { display: flex; gap: 0.6em; margin-top: 0.45em; color: var(--ink); }
.tile-obj .ig .acts svg { width: 1.05em; height: 1.05em; }
.tile-obj .ig .cap { font-size: 0.58em; margin-top: 0.4em; color: #334155; }
.tile-obj .ig .cap b { color: var(--ink); }

/* Foglio singolo (contratto, ricetta, scheda) */
.tile-obj .sheets.single .sheet { transform: rotate(3deg); }

/* Agenda del giorno */
.tile-obj .calendar { background: #fff; color: var(--ink); border-radius: 0.6em; padding: 0.7em 0.8em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); }
.tile-obj .cal-head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; }
.tile-obj .cal-day { background: var(--tile-red); color: #fff; border-radius: 0.35em; padding: 0.2em 0.45em; letter-spacing: 0.04em; }
.tile-obj .slot { position: relative; display: grid; grid-template-columns: 2.9em 1fr auto; align-items: center; gap: 0.5em; font-size: 0.7em; padding: 0.38em 0.5em; border-radius: 0.35em; margin-top: 0.28em; background: #F1F5F9; color: #475569; border-left: 0.25em solid #CBD5E1; }
.tile-obj .slot time { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-obj .slot span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.tile-obj .slot em { font-style: normal; font-size: 0.82em; font-weight: 800; padding: 0.1em 0.4em; border-radius: 99px; background: #fff; }
.tile-obj .slot.new { background: #ECFDF3; color: #166534; border-left-color: var(--green); font-weight: 700; }
.tile-obj .slot.new em { color: var(--green); }
.tile-obj .slot.free { background: transparent; border: 1px dashed #CBD5E1; border-left-width: 0.25em; color: #94A3B8; }
.tile-obj .slot.moved { background: #FFF4E6; color: #92400E; border-left-color: var(--tile-accent); }
.tile-obj .slot.late { background: #FEF2F2; color: #991B1B; border-left-color: var(--tile-red); }

/* Mail */
.tile-obj .mail { position: relative; background: #fff; color: var(--ink); border-radius: 0.6em; padding: 0.8em 0.9em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); }
.tile-obj .mail-label { position: absolute; right: -0.5em; top: -0.8em; transform: rotate(5deg); background: var(--green); color: #fff; font-size: 0.6em; font-weight: 800; padding: 0.3em 0.6em; border-radius: 0.3em; box-shadow: 0 0.3em 0.7em rgba(0,0,0,.3); white-space: nowrap; }
.tile-obj .mail-from { display: flex; align-items: center; gap: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #E5E7EB; }
.tile-obj .mail-av { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: #DBEAFE; color: #1D4ED8; display: grid; place-items: center; font-size: 0.8em; font-weight: 800; }
.tile-obj .mail-from b { display: block; font-size: 0.72em; }
.tile-obj .mail-from small { display: block; font-size: 0.58em; color: #6B7280; }
.tile-obj .mail-subject { font-size: 0.74em; font-weight: 800; margin: 0.5em 0 0.3em; }
.tile-obj .mail p { margin: 0.15em 0 0; font-size: 0.64em; color: #475569; line-height: 1.35; }
.tile-obj .mail-att { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.55em; font-size: 0.6em; font-weight: 700; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 0.3em; padding: 0.25em 0.5em; }
.tile-obj .mail-att::before { content: "PDF"; font-size: 0.8em; font-weight: 800; background: #B42318; color: #fff; border-radius: 0.2em; padding: 0 0.3em; }

/* Lista di controllo */
.tile-obj .checklist { background: #FFFDF8; color: var(--ink); border-radius: 0.5em; padding: 0.8em 0.9em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); }
.tile-obj .checklist h4 { font-size: 0.6em; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; font-weight: 800; margin: 0 0 0.45em; }
.tile-obj .checklist ul { list-style: none; margin: 0; padding: 0; }
.tile-obj .checklist li { display: grid; grid-template-columns: 1.1em 1fr auto; align-items: center; gap: 0.5em; font-size: 0.7em; padding: 0.38em 0; border-bottom: 1px dashed #E5E7EB; }
.tile-obj .checklist li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.tile-obj .checklist li i { width: 1.1em; height: 1.1em; border-radius: 0.25em; border: 0.14em solid #CBD5E1; display: grid; place-items: center; }
.tile-obj .checklist li em { font-style: normal; font-size: 0.85em; font-weight: 800; color: #6B7280; }
.tile-obj .checklist li.done { color: #6B7280; }
.tile-obj .checklist li.done i { background: var(--green); border-color: var(--green); }
.tile-obj .checklist li.done i::after { content: ""; width: 0.3em; height: 0.55em; border: solid #fff; border-width: 0 0.14em 0.14em 0; transform: rotate(45deg) translate(-0.04em, -0.06em); }
.tile-obj .checklist li.due em { color: #B45309; }
.tile-obj .checklist li.due i { border-color: #F59E0B; }
.tile-obj .checklist li.late { color: #991B1B; font-weight: 700; }
.tile-obj .checklist li.late em { color: #fff; background: var(--tile-red); border-radius: 99px; padding: 0.1em 0.45em; }
.tile-obj .checklist li.late i { border-color: var(--tile-red); }

/* Cruscotto */
.tile-obj .stats { background: #fff; color: var(--ink); border-radius: 0.6em; padding: 0.8em 0.9em; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); }
.tile-obj .stats h4 { font-size: 0.6em; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; font-weight: 800; margin: 0; }
.tile-obj .stats-value { font-family: var(--tile-serif); font-size: 2.2em; line-height: 1.05; margin-top: 0.15em; }
.tile-obj .stats-delta { display: inline-block; font-size: 0.66em; font-weight: 800; color: #166534; background: #DCFCE7; border-radius: 99px; padding: 0.15em 0.55em; }
.tile-obj .stats-delta.down { color: #991B1B; background: #FEE2E2; }
.tile-obj .stats-bars { display: flex; align-items: flex-end; gap: 0.3em; height: 3em; margin-top: 0.6em; }
.tile-obj .stats-bars i { flex: 1; background: #CBD5E1; border-radius: 0.2em 0.2em 0 0; }
.tile-obj .stats-bars i.last { background: var(--green); }
.tile-obj .stats-note { margin: 0.45em 0 0; font-size: 0.6em; color: #6B7280; }

/* Scheda annuncio o prodotto */
.tile-obj .listing { background: #fff; color: var(--ink); border-radius: 0.6em; overflow: hidden; box-shadow: 0 1em 2.2em rgba(0,0,0,.42); transform: rotate(-3deg); }
.tile-obj .listing-photo { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.tile-obj .listing-photo span { font-size: 2.6em; line-height: 1; filter: drop-shadow(0 0.15em 0.2em rgba(0,0,0,.2)); }
.tile-obj .listing-photo em { position: absolute; left: 0.5em; top: 0.5em; font-style: normal; font-size: 0.58em; font-weight: 800; background: var(--green); color: #fff; padding: 0.25em 0.55em; border-radius: 99px; }
.tile-obj .listing-body { padding: 0.55em 0.7em 0.65em; }
.tile-obj .listing-body b { display: block; font-size: 0.72em; line-height: 1.25; }
.tile-obj .listing-body strong { display: block; font-family: var(--tile-serif); font-weight: 400; font-size: 1.25em; margin-top: 0.1em; }
.tile-obj .listing-tags { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.35em; }
.tile-obj .listing-tags span { font-size: 0.56em; font-weight: 700; background: #F1F5F9; color: #475569; border-radius: 0.3em; padding: 0.15em 0.45em; }

/* Card piccole: resta solo il dettaglio che conta */
@container (max-width: 520px) {
  .tile-obj .sm-hide { display: none; }
  .tile-obj .sm-only { display: inline; }
  .tile-obj-chat { width: 45%; right: 3.5%; }
  .tile-cover:has(.tile-obj-chat) .tile-text { width: 43%; }
  .tile-obj .bubble { font-size: 0.86em; padding: 0.45em 0.65em 0.35em; }
  .tile-obj .thread { gap: 0.4em; }
  .tile-obj .paper, .tile-obj .board { font-size: 0.88em; padding-left: 0.8em; padding-right: 0.8em; }
  .tile-obj .legend { gap: 0.5em; }
  .tile-obj .slot { grid-template-columns: 2.9em 1fr; }
  .tile-obj .slot em { display: none; }
}

/* ---------- Griglie ---------- */
.demos-results .demos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* «Da dove partire»: la prima grande, le altre due impilate */
.demos-results .demos-grid.demos-grid-featured { grid-template-columns: 2fr 1fr; gap: 22px; }
.demos-grid-featured .demo-tile:first-child { grid-row: span 2; }
.demos-grid-featured .demo-tile:first-child .tile-cover { aspect-ratio: auto; }
.demos-grid-featured .demo-tile:first-child .tile-scene { font-size: clamp(12px, 2.9cqw, 30px); }

@media (max-width: 1100px) {
  .demos-results .demos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .demos-results .demos-grid,
  .demos-results .demos-grid.demos-grid-featured { grid-template-columns: 1fr; gap: 18px; }
  .demos-grid-featured .demo-tile:first-child { grid-row: auto; }
  .demos-grid-featured .demo-tile:first-child .tile-cover { aspect-ratio: 16 / 10; }
  .tile-scene,
  .demos-grid-featured .demo-tile:first-child .tile-scene { font-size: clamp(11px, 4cqw, 17px); }
  .tile-text h3 { font-size: 1.55em; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-tile, .demo-tile:hover { transition: none; transform: none; }
}

/* Il catalogo usa tutta la larghezza utile: 3 card per riga fino a 1440px */
.wrap.demos-results { max-width: 1440px; }

/* Righe di carta: l'importo resta sempre intero, l'etichetta cede spazio */
.tile-obj .row > span:first-child,
.tile-obj .tot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile-obj .row > span:nth-child(2),
.tile-obj .tot > b { flex: none; }