/* Docenti360 — sito. Font ospitati da noi (nessuna richiesta a Google). */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #0b1b3a;
  --navy-2: #12285a;
  --blu: #3d63ff;
  --verde: #0faf7a;
  --arancio: #ff6b42;
  --ambra: #f5a623;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eaeffb;
  --testo: #0f1b33;
  --muto: #56627d;
  --linea: #dbe2f1;
  --ombra: 0 1px 2px rgba(11, 27, 58, 0.06), 0 12px 32px -12px rgba(11, 27, 58, 0.18);
  --raggio: 22px;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --corpo: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --bg: #070f22;
    --surface: #0f1a35;
    --surface-2: #162449;
    --testo: #eaf0ff;
    --muto: #9eacd0;
    --linea: #22325c;
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -14px rgba(0, 0, 0, 0.6);
  }
}
:root[data-tema="scuro"] {
  --bg: #070f22;
  --surface: #0f1a35;
  --surface-2: #162449;
  --testo: #eaf0ff;
  --muto: #9eacd0;
  --linea: #22325c;
  --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -14px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blu); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.stretto { width: min(780px, 100% - 40px); margin-inline: auto; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--ambra); color: #1b1200; padding: 10px 16px; border-radius: 10px; font-weight: 700; z-index: 99; }
.salta:focus { left: 12px; }

/* ---------- intestazione ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--navy) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.testata .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.marchio { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.marchio img { width: 36px; height: 36px; border-radius: 10px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a, .nav summary { color: #dbe5ff; text-decoration: none; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 0.97rem; cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav a:hover, .nav summary:hover, .nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav details { position: relative; }
.nav .menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; background: var(--surface); color: var(--testo); border: 1px solid var(--linea); border-radius: 16px; padding: 8px; box-shadow: var(--ombra); display: grid; gap: 2px; }
.nav .menu a { color: var(--testo); border-radius: 10px; padding: 11px 14px; }
.nav .menu a small { display: block; color: var(--muto); font-weight: 400; font-size: 0.85rem; }
.nav .menu a:hover { background: var(--surface-2); }
.nav .cta { background: var(--arancio); color: #fff; padding: 10px 18px; margin-left: 8px; }
.nav .cta:hover { background: #ff825f; }
.hamb { display: none; margin-left: auto; background: none; border: 1.5px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 12px; padding: 9px 14px; font: 700 0.95rem var(--corpo); cursor: pointer; }
@media (max-width: 900px) {
  .hamb { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: var(--navy); flex-direction: column; align-items: stretch; padding: 14px 20px 22px; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .nav.aperto { display: flex; }
  .nav details .menu { position: static; box-shadow: none; background: rgba(255,255,255,0.06); border-color: transparent; margin: 4px 0 6px; }
  .nav details .menu a { color: #fff; }
  .nav details .menu a small { color: #b5c3ea; }
  .nav .cta { margin: 8px 0 0; text-align: center; }
}

/* ---------- eroe ---------- */
.eroe { background: var(--navy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.eroe::before { /* le tre strisce del marchio */
  content: ""; position: absolute; inset: -20% -10% -20% 38%; z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 14%, var(--arancio) 14% 27%, transparent 27% 31%, var(--verde) 31% 44%, transparent 44% 48%, var(--blu) 48% 61%, transparent 61%);
  opacity: 0.92; transform: skewX(-6deg);
}
.eroe::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 8% 0%, rgba(61,99,255,0.35), transparent 60%), linear-gradient(90deg, var(--navy) 38%, rgba(11,27,58,0.55) 62%, transparent); }
.eroe .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding-block: 76px 84px; }
.eroe .occhiello { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd9a1; margin-bottom: 20px; }
.eroe .occhiello::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--ambra); }
.eroe h1 em { font-style: normal; color: var(--ambra); }
.eroe .sotto { margin-top: 22px; font-size: 1.22rem; max-width: 34em; color: #d6e0fb; }
.bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; font: 700 1rem var(--corpo); text-decoration: none; border: 2px solid transparent; transition: transform 0.15s, background 0.15s; cursor: pointer; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primario { background: var(--arancio); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 107, 66, 0.8); }
.btn-primario:hover { background: #ff825f; }
.btn-chiaro { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-chiaro:hover { background: rgba(255, 255, 255, 0.18); }
.btn-scuro { background: var(--navy); color: #fff; }
.btn-linea { background: transparent; color: var(--testo); border-color: var(--linea); }
.btn-linea:hover { border-color: var(--blu); }
.btn svg { width: 20px; height: 20px; flex: none; }
.eroe .nota { margin-top: 18px; font-size: 0.95rem; color: #aebde6; }

.telefoni { position: relative; height: 520px; }
.telefono { position: absolute; width: 215px; aspect-ratio: 9 / 19.4; background: #111a33; border-radius: 34px; padding: 8px; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.7); border: 1px solid rgba(255,255,255,0.14); }
.telefono img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; }
.telefono.a { left: 2%; top: 70px; transform: rotate(-7deg); z-index: 1; }
.telefono.b { left: 30%; top: 0; z-index: 3; width: 232px; }
.telefono.c { right: 0; top: 90px; transform: rotate(7deg); z-index: 2; }
@media (max-width: 900px) {
  .eroe::before { inset: 52% -30% -10% -30%; opacity: 0.55; }
  .eroe::after { background: linear-gradient(180deg, var(--navy) 55%, transparent); }
  .eroe .wrap { grid-template-columns: 1fr; padding-block: 54px 40px; }
  .telefoni { height: 420px; }
  .telefono { width: 160px; }
  .telefono.b { width: 175px; left: 28%; }
  .telefono.a { left: 0; top: 60px; }
  .telefono.c { top: 70px; }
}

/* ---------- sezioni ---------- */
section { padding-block: 84px; }
.sez-testa { max-width: 46rem; margin-bottom: 44px; }
.sez-testa .occhiello { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blu); margin-bottom: 12px; display: block; }
.sez-testa p { color: var(--muto); font-size: 1.12rem; margin-top: 16px; }
.sez-alt { background: var(--surface); }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.due { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { section { padding-block: 60px; } .tre, .due { grid-template-columns: 1fr; } }

.pregi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-block: 1px solid var(--linea); background: var(--surface); }
.pregio { padding: 30px 28px; border-right: 1px solid var(--linea); }
.pregio:last-child { border-right: 0; }
.pregio h3 { margin-bottom: 8px; }
.pregio p { color: var(--muto); font-size: 0.98rem; }
@media (max-width: 900px) { .pregi { grid-template-columns: 1fr; } .pregio { border-right: 0; border-bottom: 1px solid var(--linea); } .pregio:last-child { border-bottom: 0; } }

.scheda { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 30px; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.scheda::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--colore, var(--blu)); }
.scheda p { color: var(--muto); }
.scheda ul { margin: 0; padding-left: 1.15em; color: var(--muto); display: grid; gap: 6px; }
.scheda .piede { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.icona { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--colore, var(--blu)) 16%, transparent); color: var(--colore, var(--blu)); }
.icona svg { width: 28px; height: 28px; }

.stato { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muto); }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stato.vivo { color: #0a7d57; background: color-mix(in srgb, var(--verde) 16%, transparent); }
.stato.sviluppo { color: #c2410c; background: color-mix(in srgb, var(--arancio) 16%, transparent); }
.stato.presto { color: #8a5a00; background: color-mix(in srgb, var(--ambra) 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .stato.vivo { color: #4ee0ae; } :root:not([data-tema="chiaro"]) .stato.sviluppo { color: #ff9a7a; } :root:not([data-tema="chiaro"]) .stato.presto { color: #ffd07a; } }

/* galleria schermate */
.galleria { display: flex; gap: 22px; overflow-x: auto; padding: 8px 20px 28px; scroll-snap-type: x mandatory; padding-inline: max(20px, calc((100vw - 1160px) / 2)); scroll-padding-inline: max(20px, calc((100vw - 1160px) / 2)); }
.galleria figure { margin: 0; flex: none; width: 240px; scroll-snap-align: start; }
.galleria .telefono { position: static; width: 100%; transform: none; background: #111a33; }
.galleria figcaption { margin-top: 14px; font-weight: 600; font-size: 0.98rem; }
.galleria figcaption small { display: block; font-weight: 400; color: var(--muto); font-size: 0.9rem; margin-top: 2px; }

/* tabella di marcia */
.marcia { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; background: var(--surface); }
.marcia a, .marcia div.riga { display: grid; grid-template-columns: 54px 1fr auto; gap: 18px; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.marcia > :last-child { border-bottom: 0; }
.marcia a:hover { background: var(--surface-2); }
.marcia .num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--linea); }
.marcia strong { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.marcia span.desc { color: var(--muto); font-size: 0.96rem; }
@media (max-width: 700px) { .marcia a, .marcia div.riga { grid-template-columns: 38px 1fr; } .marcia .stato { grid-column: 2; } }

/* principi IA */
.principi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: p; }
.principio { padding-top: 22px; border-top: 3px solid var(--testo); }
.principio h3 { margin-bottom: 8px; }
.principio p { color: var(--muto); }
@media (max-width: 900px) { .principi { grid-template-columns: 1fr; } }

/* faq */
.faq { display: grid; gap: 12px; max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--linea); border-radius: 16px; padding: 4px 22px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--blu); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muto); padding-bottom: 18px; }

/* banda finale */
.banda { background: var(--navy); color: #fff; border-radius: 28px; padding: 54px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.banda::before { content: ""; position: absolute; right: -60px; top: -40px; bottom: -40px; width: 45%; z-index: -1; background: linear-gradient(115deg, transparent 0 20%, var(--arancio) 20% 40%, transparent 40% 46%, var(--verde) 46% 66%, transparent 66% 72%, var(--blu) 72% 92%, transparent 92%); transform: skewX(-6deg); opacity: 0.9; }
.banda p { color: #cdd8f6; margin-top: 12px; }
.banda .bottoni { margin-top: 0; justify-content: flex-end; }
@media (max-width: 900px) { .banda { grid-template-columns: 1fr; padding: 34px 26px; } .banda .bottoni { justify-content: flex-start; margin-top: 18px; } .banda::before { opacity: 0.35; width: 70%; } }

/* pagine interne */
.pagina-testa { background: var(--navy); color: #fff; padding-block: 64px 70px; position: relative; overflow: hidden; isolation: isolate; }
.pagina-testa::before { content: ""; position: absolute; right: -80px; top: 0; bottom: 0; width: 38%; z-index: -1; background: linear-gradient(115deg, transparent 0 25%, var(--colore, var(--arancio)) 25% 55%, transparent 55% 62%, color-mix(in srgb, var(--colore, var(--arancio)) 55%, transparent) 62% 85%, transparent 85%); transform: skewX(-6deg); opacity: 0.85; }
.pagina-testa .stato { margin-bottom: 18px; background: rgba(255,255,255,0.14); color: #ffe2b3; }
.pagina-testa h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); max-width: 18ch; }
.pagina-testa p { color: #d6e0fb; font-size: 1.2rem; max-width: 38em; margin-top: 20px; }
.briciole { font-size: 0.9rem; margin-bottom: 22px; color: #b5c3ea; }
.briciole a { color: #b5c3ea; }
.testo-lungo { max-width: 46rem; }
.testo-lungo h2 { font-size: 1.9rem; margin: 46px 0 14px; }
.testo-lungo h3 { margin: 26px 0 8px; }
.testo-lungo p, .testo-lungo li { color: var(--muto); }
.testo-lungo p + p { margin-top: 14px; }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.2em; display: grid; gap: 8px; margin: 14px 0; }
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: passo; }
.passo { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 28px; position: relative; }
.passo::before { counter-increment: passo; content: counter(passo); font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--colore, var(--blu)); opacity: 0.9; display: block; margin-bottom: 8px; }
.passo p { color: var(--muto); margin-top: 6px; }
@media (max-width: 900px) { .passi { grid-template-columns: 1fr; } }
.avviso { border-left: 5px solid var(--ambra); background: color-mix(in srgb, var(--ambra) 14%, var(--surface)); padding: 18px 22px; border-radius: 0 14px 14px 0; color: var(--testo); }
.avviso p { color: inherit; }

/* modulo */
.modulo { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 32px; box-shadow: var(--ombra); display: grid; gap: 18px; max-width: 40rem; }
.modulo label { font-weight: 700; font-size: 0.95rem; display: grid; gap: 7px; }
.modulo input[type="email"], .modulo input[type="text"], .modulo select, .modulo textarea { font: 400 1rem var(--corpo); color: var(--testo); background: var(--bg); border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px 15px; width: 100%; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blu) 25%, transparent); }
.modulo .spunta { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 0.92rem; color: var(--muto); }
.modulo .spunta input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--blu); }
.modulo .nascosto { position: absolute; left: -9999px; }
.modulo .btn { justify-self: start; }

/* magazine */
.griglia-articoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.articolo { background: var(--surface); border: 1px dashed var(--linea); border-radius: var(--raggio); padding: 26px; display: grid; gap: 10px; align-content: start; min-height: 190px; }
.articolo .tema { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--colore, var(--blu)); }
.articolo p { color: var(--muto); }
@media (max-width: 900px) { .griglia-articoli { grid-template-columns: 1fr; } }

/* piè di pagina */
.piede-sito { background: var(--navy); color: #c3d0f2; padding-block: 56px 36px; margin-top: 0; }
.piede-sito .griglia { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.piede-sito h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.piede-sito ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.piede-sito a { color: #c3d0f2; text-decoration: none; }
.piede-sito a:hover { color: #fff; text-decoration: underline; }
.piede-sito .marchio { margin-bottom: 14px; }
.piede-sito .sotto-piede { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; }
@media (max-width: 900px) { .piede-sito .griglia { grid-template-columns: 1fr 1fr; } .piede-sito .griglia > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- Il Raccoglitore (colore proprio: arancio del suo logo) ---------- */
:root { --racc: #f76707; --racc-scuro: #c2410c; }
.logo-racc { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 6px 16px -8px rgba(247, 103, 7, 0.6); flex: none; }
.sez-racc { background: color-mix(in srgb, var(--racc) 8%, var(--bg)); border-block: 1px solid color-mix(in srgb, var(--racc) 18%, var(--linea)); }
.vetrina { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.vetrina .marchio-racc { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.vetrina h2 { margin-bottom: 14px; }
.vetrina p.lead { color: var(--muto); font-size: 1.12rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.chip { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; background: color-mix(in srgb, var(--racc) 15%, var(--surface)); color: var(--racc-scuro); border: 1px solid color-mix(in srgb, var(--racc) 28%, transparent); }
.btn-racc { background: var(--racc); color: #fff; box-shadow: 0 10px 24px -10px rgba(247, 103, 7, 0.8); }
.btn-racc:hover { background: #ff7b24; }
.anteprima { position: relative; padding-bottom: 46px; }
.finestra { background: var(--surface); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--ombra); overflow: hidden; }
.finestra .barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--linea); }
.finestra .barra i { width: 11px; height: 11px; border-radius: 50%; }
.finestra .barra i:nth-child(1) { background: #ff5f57; } .finestra .barra i:nth-child(2) { background: #febc2e; } .finestra .barra i:nth-child(3) { background: #28c840; }
.finestra .indirizzo { margin-left: 10px; flex: 1; background: var(--surface); border: 1px solid var(--linea); border-radius: 8px; padding: 4px 12px; font-size: 0.8rem; color: var(--muto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finestra img { width: 100%; height: auto; }
.anteprima .mini { position: absolute; right: -14px; bottom: 0; width: 148px; background: #1d1d1f; border-radius: 22px; padding: 6px; box-shadow: 0 24px 44px -14px rgba(0, 0, 0, 0.55); border: 1px solid rgba(255,255,255,0.12); transform: rotate(3deg); }
.anteprima .mini img { border-radius: 17px; width: 100%; height: auto; }
@media (max-width: 900px) {
  .vetrina { grid-template-columns: 1fr; gap: 34px; }
  .anteprima .mini { width: 112px; right: 6px; }
}