a {
  text-decoration: none;
}

.file-name {
  text-transform: capitalize;
}

:root {
  color-scheme: light;

  /* Sfondo della barra di navigazione. Non una tinta piatta: tre strati sovrapposti sul
     blu notte di base.
     RIBALTATO il 2026-08-28 per agganciarlo al logo nuovo. Il marchio e' arancio a
     sinistra (la i) e viola a destra (la A); la barra era esattamente specchiata — viola
     a sinistra, ambra in alto a destra — quindi l'arancio della i finiva sopra il viola,
     dove si stacca poco. Ora l'alone caldo sta a sinistra dietro il marchio (si legge
     come la luce che esce dalla casa accesa) e il blu del marchio scende verso destra dietro
     il menu. L'ambra e' passata da rgba(251,191,36) — un giallo-oro — all'arancio vero del
     logo, rgba(251,146,60): erano due caldi diversi e per questo non "suonavano" insieme.
     Definito qui una volta sola perche' lo usano due regole diverse: la home dopo lo
     scroll e tutte le pagine interne.

     La versione viola (fino al 2026-08-31) e' conservata per intero in
     00_cestino/rollback-viola-blu-20260831/site.css: qui non si tiene piu' una copia dei
     valori vecchi perche' una sostituzione a tappeto la riscrive senza accorgersene, ed e'
     gia' successo.  */
  --nav-bg:
    linear-gradient(295deg, rgba(30, 64, 175, 0.55) 0%, rgba(37, 99, 235, 0.30) 42%, rgba(10, 26, 47, 0) 78%),
    radial-gradient(130% 200% at 8% -20%, rgba(251, 146, 60, 0.24) 0%, rgba(251, 146, 60, 0) 55%),
    rgba(10, 26, 47, 0.94);

  /* La riga luminosa sotto la barra, al posto del bordo grigio. Ribaltata insieme allo
     sfondo: arancio sotto il marchio, blu verso il menu, sfumata a zero ai due estremi
     cosi' non si vedono i tagli netti. */
  --nav-hairline: linear-gradient(90deg,
    rgba(251, 146, 60, 0) 0%,
    rgba(251, 146, 60, 0.45) 22%,
    rgba(96, 165, 250, 0.55) 68%,
    rgba(96, 165, 250, 0) 100%);
}

/* ORO — secondo colore del marchio, riservato all'ANALISI AI (deciso il 2026-09-01).
   Il blu dice "portale serio", l'arancio dice "premi qui": mancava un colore che dicesse
   "questo pezzo lo produciamo noi". E' l'oro della "i" del logo, e in tutto il settore aste
   italiano non lo usa nessuno — e' li' che sta la riconoscibilita' che il viola dava e il blu
   da solo non da'.

   Non va confuso con l'arancio della chiamata all'azione, che resta l'unico colore dei bottoni
   che convertono. Le due regole che li tengono separati:
     - l'ARANCIO riempie un bottone (arancio 25-30 gradi di tinta, testo scuro sopra);
     - l'ORO sottolinea un dato (ambra 38-46 gradi, e non e' mai un bottone da premere).
   Dove l'oro fa da fondo pieno — il bollino di un voto alto — il pezzo e' tondo e piccolo, non
   ha la forma di un bottone. */
:root {
  --ai-oro: #d97706;          /* ambra 600: icone e testo su fondo chiaro */
  --ai-oro-testo: #b45309;    /* ambra 700: titoli su fondo chiaro, contrasto 4.9:1 sul bianco */
  --ai-oro-chiaro: #fbbf24;   /* ambra 400: testo e bordi sul blu notte */
  /* Fondi pieni, non velature (2026-09-02): l'ambra al 7-13% di opacita' sul bianco dava
     un giallino slavato che faceva sembrare l'analisi AI una nota a margine invece che la
     cosa piu' preziosa della pagina. Ora sono i colori veri della scala ambra. */
  --ai-fondo: #fffbeb;        /* ambra 50 */
  --ai-fondo-forte: #fef3c7;  /* ambra 100 */
  --ai-bordo: #fbbf24;        /* ambra 400 */
  --ai-oro-scuro: #92400e;    /* ambra 800: titoli sul fondo caldo, contrasto 7.4:1 */
}

/* Font di tutto il sito. Inter Tight e' stato provato il 2026-08-24 e scartato: piu' stretto
   ma meno riconoscibile. Non riproporlo. */
body {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Riquadro largo e non quadrato: il marchio e' 1.288:1 (largo quanto una casa con la A
   accanto), quindi in un 70x70 verrebbe alto solo 54px. 79x61 gli ridà l'altezza che
   aveva il logo vecchio senza sforare la barra alta 64px del mobile. Era 92x61 fino al
   2026-09-11, quando il marchio era piu' largo (1.509:1): con il logo nuovo restavano
   13px di riquadro vuoto fra il marchio e la scritta. */
.brand-mark {
  width: 79px;
  height: 61px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand:hover .brand-mark {
  transform: scale(1.08);
  /* Ambra, non ciano: il ciano veniva dal logo neon vecchio e nel marchio nuovo
     non esiste piu' un solo pixel di quel colore. */
  filter: drop-shadow(0 8px 20px rgba(251, 146, 60, 0.45));
}

.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.brand-spark svg {
  width: 16px;
  height: 16px;
}

.brand-subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #60a5fa;
}

.brand--footer .brand-title {
  color: #f8fafc;
}

.brand--footer .brand-subtitle {
  color: rgba(147, 197, 253, 0.85);
}

.nav-link {
  color: #334155;
}

.nav-link:hover {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
}

.nav-ghost {
  color: #334155;
}

.nav-ghost:hover {
  color: #2563eb;
}

header:not(.is-scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

header:not(.is-scrolled) .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

header:not(.is-scrolled) .nav-ghost {
  color: rgba(255, 255, 255, 0.85);
}

header:not(.is-scrolled) .nav-ghost:hover {
  color: #fff;
}

header:not(.is-scrolled) .brand-title {
  color: #f8fafc;
}

header:not(.is-scrolled) .brand-subtitle {
  color: rgba(147, 197, 253, 0.9);
}

header:not(.is-scrolled) .site-nav {
  background: transparent;
  box-shadow: none;
}

header.is-scrolled .site-nav,
body:not(.is-home) header .site-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  border-bottom: 0;
  position: relative;
}

/* Il filo luminoso in fondo alla barra e' uno pseudo-elemento e non un border-bottom
   perche' un bordo non puo' essere sfumato da sinistra a destra. */
header.is-scrolled .site-nav::after,
body:not(.is-home) header .site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--nav-hairline);
  pointer-events: none;
}

body:not(.is-home) header .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

body:not(.is-home) header .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

body:not(.is-home) header .nav-ghost {
  color: rgba(255, 255, 255, 0.85);
}

body:not(.is-home) header .nav-ghost:hover {
  color: #fff;
}

body:not(.is-home) header .brand-title {
  color: #f8fafc;
}

body:not(.is-home) header .brand-subtitle {
  color: rgba(147, 197, 253, 0.85);
}

header.is-scrolled .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

header.is-scrolled .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

header.is-scrolled .nav-ghost {
  color: rgba(255, 255, 255, 0.85);
}

header.is-scrolled .nav-ghost:hover {
  color: #fff;
}

header.is-scrolled .brand-title {
  color: #f8fafc;
}

header.is-scrolled .brand-subtitle {
  color: rgba(147, 197, 253, 0.85);
}

/* === AI BRAIN CORE VISUAL === */

.hero-ai-brain {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: brain-float 4s ease-in-out infinite;
}

@keyframes brain-float {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-15px);
  }
}

.hero-ai-brain-core {
  position: relative;
  width: 120px;
  height: 120px;
}

.hero-ai-brain-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 25px rgba(96, 165, 250, 0.6));
  animation: brain-rotate 20s linear infinite;
}

@keyframes brain-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-ai-brain-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.6);
  animation: brain-pulse 2s ease-out infinite;
}

.hero-ai-brain-pulse--2 {
  animation-delay: 1s;
  border-color: rgba(59, 130, 246, 0.6);
}

@keyframes brain-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero-ai-brain-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #60a5fa;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.8);
  animation: label-blink 3s ease-in-out infinite;
}

@keyframes label-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* === AI PROPERTY CARDS === */

.hero-ai-property {
  position: absolute;
  width: 280px;
  background: rgba(8, 12, 26, 0.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 
    0 0 40px rgba(96, 165, 250, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: property-float 5s ease-in-out infinite;
}

.hero-ai-analyzing-label {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #60a5fa;
  text-transform: uppercase;
  white-space: nowrap;
  animation: analyzing-pulse 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes analyzing-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes property-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero-ai-property-img {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.hero-ai-property-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-ai-scan-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 12, 26, 0.4) 100%);
}

.hero-ai-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
  animation: ai-scan 3s linear infinite;
  box-shadow: 0 0 10px #60a5fa;
}

.hero-ai-scan-line--2 {
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  animation-delay: 1.5s;
  box-shadow: 0 0 10px #3b82f6;
}

@keyframes ai-scan {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.hero-ai-property-data {
  padding: 16px;
}

.hero-ai-property-location {
  font-size: 14px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
  margin-bottom: 12px;
}

.hero-ai-property-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  margin-bottom: 12px;
}

.hero-ai-score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(251, 191, 36, 0.85);
  text-transform: uppercase;
}

.hero-ai-score-value {
  font-size: 32px;
  font-weight: 700;
  font-family: 'Space Grotesk', monospace;
  /* Il punteggio e' il momento in cui si capisce se l'affare e' buono: e' l'unico
     punto caldo del campo freddo della hero. Dal 2026-09-01 e' oro pieno e non piu'
     arancio->blu: l'oro e' il colore dell'analisi AI, e questo numero e' l'analisi AI. */
  background: linear-gradient(135deg, #f59e0b, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

.hero-ai-property-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-ai-param {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.4);
  border-radius: 6px;
  color: rgba(148, 163, 184, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-ai-param--analyzing {
  animation: param-glow 2s ease-in-out infinite;
}

@keyframes param-glow {
  0%, 100% {
    border-color: rgba(96, 165, 250, 0.3);
    color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.2);
  }
  50% {
    border-color: rgba(96, 165, 250, 0.6);
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  }
}

.hero-ai-verified {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === AI FEATURES SECTION (ELEGANT DESIGN) === */

/* Altezza uguale per tutte e quattro (2026-08-24). L'ultima riga di ciascuna scheda e'
   diversa - barra di avanzamento, badge, tag, pallino di stato - e con l'altezza libera le
   schede finivano di quattro altezze diverse, allineate in alto: sembravano appoggiate a
   caso. Con height:100% + margin-top:auto sull'ultima riga i quattro riquadri sono alti
   uguali e le rispettive code stanno tutte sulla stessa linea, in fondo. */
.ai-feature-card {
  position: relative;
  height: 100%;
  display: flex;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 
    0 20px 60px rgba(37, 99, 235, 0.12),
    0 0 0 1px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.ai-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, #2563eb, #f59e0b, #0ea5e9);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ai-feature-card:hover::before {
  opacity: 1;
}

.ai-feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 30px 80px rgba(37, 99, 235, 0.2),
    0 0 0 1px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ai-feature-glow {
  position: absolute;
  inset: -100px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.ai-feature-card:hover .ai-feature-glow {
  opacity: 1;
}

.ai-feature-content {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-feature-icon-wrapper {
  position: relative;
  display: inline-flex;
  margin-bottom: 16px;
}

.ai-feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.32);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.ai-feature-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.ai-feature-card:hover .ai-feature-icon {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.ai-feature-card:hover .ai-feature-icon svg {
  transform: rotate(-5deg);
}

.ai-feature-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 12px;
}

.ai-feature-value {
  font-size: 48px;
  font-weight: 800;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  background: linear-gradient(135deg, #f59e0b, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.ai-feature-unit {
  font-size: 32px;
  margin-left: -4px;
}

.ai-feature-desc {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 16px;
}

.ai-feature-progress {
  height: 4px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 16px;
}

.ai-feature-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #b45309, #fbbf24);
  border-radius: 2px;
  animation: progress-grow 2s ease-out forwards;
}

@keyframes progress-grow {
  from {
    width: 0;
  }
}

.ai-feature-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 12px;
}

.ai-feature-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ai-feature-tags span {
  padding: 4px 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ai-feature-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 16px;
  background: rgba(96, 165, 250, 0.08);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #0891b2;
}

.ai-feature-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1);
  }
}

/* Coda della scheda IA spinta sul fondo: deve stare DOPO le quattro regole qui sopra,
   che hanno la stessa specificita' e un margin-top fisso - a parita' vince l'ultima. */
.ai-feature-progress,
.ai-feature-badge,
.ai-feature-tags,
.ai-feature-status {
  margin-top: auto;
}

/* In colonna centrata la barra si stringerebbe al contenuto (che e' vuoto): larghezza piena. */
.ai-feature-progress {
  align-self: stretch;
}

/* === AI PROPERTY CARDS POSITIONING (SMOOTH) === */

.hero-ai-property--left {
  left: 5%;
  top: 35%;
  opacity: 0;
  transform: translateX(-50px) translateY(20px) scale(0.9);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-ai-property--left.visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  filter: blur(0);
}

.hero-ai-property--right {
  right: 5%;
  top: 35%;
  opacity: 0;
  transform: translateX(50px) translateY(20px) scale(0.9);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-ai-property--right.visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  filter: blur(0);
}

/* === AI PROPERTY CARDS (IMPROVED ANIMATIONS) === */

.hero-ai-property--left {
  left: 5%;
  top: 35%;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-ai-property--left.visible {
  opacity: 1;
  transform: translateX(0);
}

.hero-ai-property--right {
  right: 5%;
  top: 35%;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-ai-property--right.visible {
  opacity: 1;
  transform: translateX(0);
}

.hero-cyber-subtitle-main {
  letter-spacing: 0.15em;
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
  animation: subtitle-glow 4s ease-in-out infinite;
}

@keyframes subtitle-glow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
  }
  50% {
    text-shadow: 0 0 40px rgba(96, 165, 250, 0.8);
  }
}

/* === HERO 2050 CYBER STYLES === */

.hero-cyber {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #010b18 0%, #041020 25%, #020a14 50%, #030f20 75%, #010710 100%);
}

/* Dynamic Mesh Gradient + Scan */
.hero-mesh-gradient {
  background: 
    radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.25), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(96, 165, 250, 0.2), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.15), transparent 45%),
    radial-gradient(circle at 10% 75%, rgba(6, 182, 212, 0.18), transparent 35%);
  position: relative;
  overflow: hidden;
}

.hero-mesh-gradient::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -35%;
  width: 35%;
  background: linear-gradient(90deg, transparent 0%, rgba(94, 234, 212, 0.12) 40%, rgba(59, 130, 246, 0.25) 50%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: hero-mesh-scan 18s linear infinite;
}

@keyframes hero-mesh-scan {
  0% {
    left: -35%;
  }
  100% {
    left: 120%;
  }
}

/* 3D Holographic Grid */
.hero-holo-grid {
  background-image:
    linear-gradient(to right, rgba(96, 165, 250, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(96, 165, 250, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  perspective: 1000px;
  transform: rotateX(60deg) scale(2);
  transform-origin: center bottom;
  opacity: 0.4;
  animation: grid-pulse 8s ease-in-out infinite;
}

@keyframes grid-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.25;
  }
}

/* Cyber Scan Lines - Optimized for Performance */
.hero-cyber-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.8), transparent);
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

.hero-cyber-scanline--1 {
  top: 20%;
  animation: cyber-scan-smooth 8s linear infinite;
}

.hero-cyber-scanline--2 {
  top: 45%;
  animation: cyber-scan-smooth 10s linear infinite 2s;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
}

.hero-cyber-scanline--3 {
  top: 70%;
  animation: cyber-scan-smooth 12s linear infinite 4s;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.7), transparent);
}

@keyframes cyber-scan-smooth {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Holographic Data Cards */
.hero-holo-card {
  position: absolute;
  background: rgba(8, 12, 26, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  padding: 16px;
  min-width: 220px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  box-shadow: 
    0 0 40px rgba(96, 165, 250, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: holo-float 6s ease-in-out infinite;
}

.hero-holo-card--wide {
  min-width: 300px;
}

@keyframes holo-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-10px) translateX(5px);
  }
}

.hero-holo-border {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(59, 130, 246, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: holo-border-glow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes holo-border-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.hero-holo-content {
  position: relative;
  z-index: 1;
}

.hero-holo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: rgba(96, 165, 250, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-holo-icon {
  font-size: 14px;
  color: #60a5fa;
  animation: holo-icon-pulse 2s ease-in-out infinite;
}

@keyframes holo-icon-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
  }
}

.hero-holo-label {
  flex: 1;
}

/* Stats Display */
.hero-holo-stats {
  margin-bottom: 12px;
}

.hero-holo-stat {
  margin-bottom: 8px;
}

.hero-holo-stat-label {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.hero-holo-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', monospace;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

.hero-holo-progress {
  height: 4px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 2px;
  overflow: hidden;
}

.hero-holo-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  width: 0;
  border-radius: 2px;
  animation: holo-progress 3s ease-out forwards;
}

@keyframes holo-progress {
  to {
    width: 87%;
  }
}

/* Badge */
.hero-holo-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-holo-badge--success {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

/* Score Ring */
.hero-holo-score {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.hero-holo-score-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.hero-holo-score-ring svg {
  transform: rotate(-90deg);
}

.hero-holo-score-bg {
  fill: none;
  stroke: rgba(30, 41, 59, 0.6);
  stroke-width: 6;
}

.hero-holo-score-fill {
  fill: none;
  stroke: url(#scoreGradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  animation: holo-score-fill 2s ease-out forwards;
}

@keyframes holo-score-fill {
  from {
    stroke-dashoffset: 283;
  }
}

.hero-holo-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', monospace;
}

.hero-holo-score-num {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.6);
}

.hero-holo-score-percent {
  font-size: 16px;
  color: rgba(96, 165, 250, 0.8);
  margin-left: 2px;
}

/* Live Feed */
.hero-holo-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-holo-feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.8);
  padding: 6px 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.4);
  animation: holo-feed-slide 0.5s ease-out backwards;
}

.hero-holo-feed-item:nth-child(1) {
  animation-delay: 0.1s;
}

.hero-holo-feed-item:nth-child(2) {
  animation-delay: 0.3s;
}

.hero-holo-feed-item:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes holo-feed-slide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.hero-holo-feed-time {
  font-family: 'Space Grotesk', monospace;
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
}

.hero-holo-feed-text {
  flex: 1;
}

/* System Status */
.hero-holo-system {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-holo-system-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(203, 213, 225, 0.7);
  font-family: 'Space Grotesk', monospace;
}

.hero-holo-system-val {
  color: rgba(96, 165, 250, 0.9);
  font-weight: 600;
}

.hero-holo-system-val--active {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Cyber Badge */
.hero-cyber-badge {
  display: inline-flex;
  justify-content: center;
  animation: badge-float 3s ease-in-out infinite;
}

@keyframes badge-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.hero-cyber-badge-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(8, 12, 26, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #60a5fa;
  box-shadow: 
    0 0 30px rgba(96, 165, 250, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-cyber-badge-icon {
  font-size: 16px;
  animation: badge-icon-rotate 8s linear infinite;
}

@keyframes badge-icon-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-cyber-badge-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  border: 2px solid rgba(96, 165, 250, 0.5);
  animation: badge-pulse 2s ease-out infinite;
}

@keyframes badge-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* Cyber Title with Glitch */
.hero-cyber-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 0.95;
}

.hero-cyber-glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow: 
    0 0 40px rgba(96, 165, 250, 0.4),
    0 0 80px rgba(59, 130, 246, 0.3);
  animation: glitch-text 8s infinite;
}

.hero-cyber-glitch--gradient {
  /* Titolo "ASTE IA": i due colori del marchio, oro a sinistra e blu a destra.
     Le due tappe centrali non sono decorative: arancio e blu interpolati direttamente
     passano per un grigio-mauve scuro, e la lettera che capita a meta' esce sporca (si
     vedeva sulla "E" di "PIANI E PREZZI"). Portando la transizione su oro chiaro ->
     azzurro chiaro il punto di mezzo e' un neutro luminoso, che legge come voluto. */
  background: linear-gradient(135deg, #fb923c 0%, #fbbf24 14%, #bfdbfe 36%, #60a5fa 62%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glitch-text 8s infinite, gradient-shift 6s ease-in-out infinite;
}

@keyframes glitch-text {
  0%, 96% {
    transform: translate(0);
  }
  97% {
    transform: translate(-2px, 2px);
  }
  98% {
    transform: translate(2px, -2px);
  }
  99% {
    transform: translate(-2px, 2px);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(20deg);
  }
}

.hero-cyber-subtitle {
  font-size: 0.35em;
  font-weight: 600;
  letter-spacing: 0.2em;
  /* 2026-08-28: era ciano rgba(34, 211, 238, 0.7), ombra rgba(34, 211, 238, 0.4) */
  color: rgba(253, 186, 116, 0.85);
  text-shadow: 0 0 20px rgba(251, 146, 60, 0.35);
}

/* Cyber Buttons */
.hero-cyber-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 2026-08-31: era #431407 (marrone scuro). Su fondo arancio il testo del sito e sempre bianco. */
.hero-cyber-btn--primary {
  color: #ffffff;
}

.hero-cyber-btn--ghost {
  color: rgba(255, 255, 255, 0.9);
}

/* 2026-08-28: era ciano->viola (#22d3ee, #3b82f6), tinta del vecchio logo neon.
   Questa e' la CTA di conversione della home, quindi passa all'arancio del marchio.
   Valori precedenti, per tornare indietro:
     .hero-cyber-btn-bg background: linear-gradient(135deg, #22d3ee, #3b82f6);
     .hero-cyber-btn-border border-image: linear-gradient(135deg, #fb923c, #f59e0b) 1;
     .hero-cyber-btn--primary color: #fff;
     .hero-cyber-btn--primary .hero-cyber-btn-border border-color: rgba(34, 211, 238, 0.3);
     .hero-cyber-btn:hover .hero-cyber-btn-border box-shadow: 0 0 30px rgba(34,211,238,.4), inset 0 0 30px rgba(34,211,238,.2); */
.hero-cyber-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hero-cyber-btn:hover .hero-cyber-btn-bg {
  opacity: 0.85;
}

.hero-cyber-btn-border {
  position: absolute;
  inset: 0;
  border: 2px solid;
  border-color: transparent;
  border-image: linear-gradient(135deg, #fb923c, #f59e0b) 1;
  clip-path: polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
  );
  transition: all 0.3s ease;
}

.hero-cyber-btn--primary .hero-cyber-btn-border {
  border-color: rgba(251, 146, 60, 0.35);
}

.hero-cyber-btn--ghost .hero-cyber-btn-border {
  /* Secondario: resta viola. L'arancio e' riservato al bottone che converte.
     Era ciano rgba(34, 211, 238, 0.5), inset rgba(34, 211, 238, 0.1) */
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: inset 0 0 20px rgba(96, 165, 250, 0.12);
}

.hero-cyber-btn:hover .hero-cyber-btn-border {
  box-shadow: 
    0 0 30px rgba(251, 146, 60, 0.45),
    inset 0 0 30px rgba(251, 146, 60, 0.2);
}

.hero-cyber-btn-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* Cyber Stats */
.hero-cyber-stat {
  position: relative;
  padding: 20px;
  text-align: center;
  overflow: hidden;
}

.hero-cyber-stat-bg {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 26, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(96, 165, 250, 0.2);
  clip-path: polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)
  );
  box-shadow: 
    0 0 30px rgba(96, 165, 250, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-cyber-stat-num {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 700;
  font-family: 'Space Grotesk', monospace;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(96, 165, 250, 0.3);
}

.hero-cyber-stat-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.8);
  margin-top: 4px;
}

.hero-sky {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 10%, rgba(59, 130, 246, 0.35), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.25), transparent 40%),
    linear-gradient(180deg, #0a0f1f 0%, #121733 55%, #0b1022 100%);
}

.hero-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.4;
}

.hero-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
}

.hero-title-scan {
  background-size: 240% 100%;
  animation: hero-text-scan 7s ease-in-out infinite;
}

.floating-cards {
  z-index: 12;
}

.glow-pill {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35), 0 0 40px rgba(59, 130, 246, 0.25);
}

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
  animation: scan 4s linear infinite;
}

.hero-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.18), transparent);
  height: 2px;
  top: 12%;
  animation: scan-wide 8s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

/* === Compact hero (About/Contact/HowItWorks/Careers/Pricing) ===
   Same cyber/holo visual language as the Home hero (.hero-cyber, .hero-mesh-gradient,
   .hero-holo-grid, .hero-cyber-scanline*), just at page-header height instead of full-viewport,
   and without a stock photo. */
/* 420px e non piu' 300: la hero e' larga 1440 e le foto sono 16:9, quindi a 300px se ne
   vedeva una fascia alta il 38% dell'immagine — troppo poco per riconoscere il soggetto.
   A 420px se ne vede il 52%. */
.hero-compact {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 0 64px;
}

/* Sezioni che hanno la foto di sfondo ma non usano .hero-compact (calendario, assistenza,
   pagine per citta', sezioni delle guide): stessa altezza minima, contenuto centrato. */
.hero-foto {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Con lo scrim piu' leggero (vedi sotto) l'ombra sul testo e' la seconda garanzia di
   leggibilita'. Scoped a queste sezioni: la hero della homepage non va toccata. */
.hero-compact .hero-cyber-title,
.hero-compact .hero-cyber-subtitle-main,
.hero-compact .hero-cyber-subtitle,
.hero-foto h1,
.hero-foto p,
.hero-foto nav {
  text-shadow: 0 2px 16px rgba(1, 7, 16, 0.9);
}

.hero-compact--amber .hero-mesh-gradient {
  background:
    radial-gradient(circle at 15% 20%, rgba(217, 119, 6, 0.28), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(251, 191, 36, 0.22), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(234, 88, 12, 0.18), transparent 45%),
    radial-gradient(circle at 10% 75%, rgba(202, 138, 4, 0.18), transparent 35%);
}

.hero-compact--amber .hero-cyber-badge-inner {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-compact--amber .hero-cyber-badge-pulse {
  border-color: rgba(251, 191, 36, 0.5);
}

.hero-compact--amber .hero-cyber-subtitle-main {
  color: #fde68a;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.hero-compact--amber .hero-cyber-glitch--gradient {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Foto di sfondo della hero — sta sotto .hero-mesh-gradient/.hero-holo-grid.
   Le immagini di wwwroot/images/hero sono state generate apposta scurissime (luminanza
   media misurata fra 0.005 e 0.05): al 35% di opacita' com'era prima sparivano del tutto
   sul fondo nero di .hero-cyber. Restano quindi quasi a piena opacita', e la leggibilita'
   del testo la garantisce lo scrim qui sotto, non lo sbiadimento della foto. */
.hero-compact-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-compact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Sfocatura minima: a 2.5px il soggetto diventava una macchia. La leggibilita' la
     tengono lo scrim e l'ombra del testo, non la sfocatura. */
  filter: blur(1.2px) saturate(1.25) contrast(1.06);
  transform: scale(1.015);
  opacity: 1;
}

/* Lo scrim e' cio' che rende le sedici foto diverse una famiglia sola: scuro al centro,
   dove passano badge, titolo e sottotitolo, e trasparente ai bordi, dove sta il soggetto.
   Serve anche come garanzia di contrasto: qualunque foto ci si metta sotto, la fascia del
   testo resta sotto il 12% di luminanza. */
.hero-compact-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 54% 68% at 50% 50%,
      rgba(1, 7, 16, 0.60) 0%,
      rgba(1, 7, 16, 0.34) 52%,
      rgba(1, 7, 16, 0) 100%),
    linear-gradient(180deg,
      rgba(1, 7, 16, 0.36) 0%,
      rgba(1, 7, 16, 0) 26%,
      rgba(1, 7, 16, 0) 74%,
      rgba(1, 7, 16, 0.34) 100%);
  pointer-events: none;
}

/* Inquadratura verticale, una per foto. Il valore non e' scelto a occhio: per ogni
   immagine e' stata misurata riga per riga la "densita' di dettaglio" (contrasto locale +
   bordi) e scelta la fascia alta il 52% che ne contiene di piu' — cioe' dove sta il
   soggetto invece del cielo o del fondo vuoto. Script: scratchpad/inquadra.py. */
.hero-compact-photo--y0 img { object-position: 50% 0%; }
.hero-compact-photo--y20 img { object-position: 50% 20%; }
.hero-compact-photo--y50 img { object-position: 50% 50%; }
.hero-compact-photo--y55 img { object-position: 50% 55%; }
.hero-compact-photo--y60 img { object-position: 50% 60%; }
.hero-compact-photo--y75 img { object-position: 50% 75%; }
.hero-compact-photo--y100 img { object-position: 50% 100%; }

/* Su telefono la hero e' quasi 16:9 come la foto: si vede tutta l'immagine, l'inquadratura
   non serve piu' e lo scrim centrale va allargato perche' il testo occupa tutta la fascia. */
@media (max-width: 767px) {
  .hero-compact-photo img,
  .hero-compact-photo[class*="--y"] img {
    object-position: 50% 50%;
  }

  .hero-compact-photo::after {
    background:
      radial-gradient(ellipse 95% 80% at 50% 50%,
        rgba(1, 7, 16, 0.86) 0%,
        rgba(1, 7, 16, 0.7) 55%,
        rgba(1, 7, 16, 0.35) 100%);
  }
}

/* === FOTO DI SFONDO DELLA HERO DELLA HOMEPAGE (2026-08-24) ===
   Classe a parte e non .hero-compact-photo: li' la hero e' alta 420px e la foto e' un
   riempitivo dietro a un titolo di una riga; qui e' alta un intero schermo, il soggetto e'
   una citta' che deve *appoggiarsi sul fondo* e sopra deve restare cielo vuoto per il
   titolone. Scrim e inquadratura sono quindi diversi e devono poterlo restare. */
.hero-home-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-home-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La citta' occupa l'ultimo quarto dell'immagine: ancorando in basso resta sull'orizzonte
     della hero invece di finire tagliata a meta' schermo. */
  object-position: 50% 100%;
  /* Sfocatura appena percettibile: toglie il dettaglio dei tetti (che a schermo intero
     diventa rumore dietro al titolo) e lascia leggibile la sagoma di cupola e campanili. */
  filter: blur(1.4px) saturate(1.15) contrast(1.04);
  transform: scale(1.03);
}

/* Due strati: uno scuro dall'alto fino a poco sopra l'orizzonte, che tiene il titolo su
   fondo quasi nero, e una velatura viola bassa che raccorda il bagliore della foto con la
   palette del sito. Nessuno dei due tocca la fascia dello skyline, che e' l'unica parte
   della foto che si deve vedere. */
.hero-home-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(1, 7, 16, 0.82) 0%,
      rgba(1, 7, 16, 0.62) 38%,
      rgba(1, 7, 16, 0.22) 62%,
      rgba(1, 7, 16, 0) 78%),
    radial-gradient(ellipse 70% 42% at 50% 88%,
      rgba(37, 99, 235, 0.22) 0%,
      rgba(37, 99, 235, 0) 100%);
}

/* Su telefono la hero e' molto piu' alta che larga: la foto viene tagliata ai lati e resta
   la striscia centrale, dove per fortuna stanno cupola e campanili. Lo scrim va rinforzato
   perche' il testo scende molto piu' in basso e arriverebbe sopra ai tetti. */
@media (max-width: 767px) {
  .hero-home-photo img {
    object-position: 50% 100%;
    filter: blur(2px) saturate(1.1);
  }

  .hero-home-photo::after {
    background:
      linear-gradient(180deg,
        rgba(1, 7, 16, 0.88) 0%,
        rgba(1, 7, 16, 0.78) 55%,
        rgba(1, 7, 16, 0.45) 80%,
        rgba(1, 7, 16, 0.12) 100%);
  }
}

.hero-radar {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15), transparent 62%);
  box-shadow: 0 0 120px rgba(37, 99, 235, 0.25);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.hero-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.hero-ring--mid {
  inset: 16%;
  border-color: rgba(37, 99, 235, 0.2);
}

.hero-ring--inner {
  inset: 32%;
  border-color: rgba(56, 189, 248, 0.22);
}

.hero-orbit {
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  border: 1px dashed rgba(59, 130, 246, 0.25);
  animation: orbit 14s linear infinite;
}

.hero-orbit--slow {
  inset: 24%;
  border-color: rgba(56, 189, 248, 0.25);
  animation-duration: 22s;
}

.hero-orbit-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.8);
  transform: translateX(-50%);
}

.hero-orbit-dot--alt {
  background: #60a5fa;
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.8);
}

.hero-sweep {
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(59, 130, 246, 0.0), rgba(59, 130, 246, 0.5), rgba(14, 116, 144, 0.0) 42%);
  animation: radar-sweep 8s linear infinite;
  opacity: 0.55;
  filter: blur(0.5px);
}

@keyframes scan {
  0% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

@keyframes scan-wide {
  0% {
    top: 6%;
  }
  50% {
    top: 78%;
  }
  100% {
    top: 6%;
  }
}

@keyframes radar-sweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes hero-text-scan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.floating-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floating-card {
  position: absolute;
  width: 180px;
  height: 125px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(8, 12, 26, 0.75);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.45);
  overflow: visible;
  opacity: 0.9;
  transform: translateY(0);
  transition: opacity 1.6s ease, transform 1.6s ease;
  transform: scale(0.6);
  transform-origin: center;
  animation: none;
}

.floating-card__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: visible;
}

.floating-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  border-radius: 18px;
}

.floating-card__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.8), transparent);
  animation: scan-card 3.5s linear infinite;
  opacity: 0.8;
}

.floating-card__badge {
  position: absolute;
  top: -12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.floating-card__badge svg {
  width: 14px;
  height: 14px;
}

.floating-card__tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes scan-card {
  0% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

.gradient-border {
  border: 3px solid rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.35), 0 0 40px rgba(250, 204, 21, 0.2);
}

.map-shell {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 420px;
  background: linear-gradient(180deg, #e9effa 0%, #d9e1f3 100%);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.card-hover {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.6);
}

.divider-fade {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5), transparent);
  height: 1px;
}

.map-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(148, 163, 184, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.35) 1px, transparent 1px);
  background-size: 60px 60px;
}

.map-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.2);
}

.tab-button[aria-pressed="true"] {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.tab-button[aria-pressed="false"] {
  background: #fff !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

.auction-card {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
}

.auction-card__media {
  position: relative;
  overflow: hidden;
  height: 280px;
  background-color: #f1f5f9;
}

.auction-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.auction-card:hover .auction-card__image {
  transform: scale(1.05);
}

.auction-card__overlay {
  position: absolute;
  inset: 0;
  background: none;
}

/* Barra delle pastiglie sul fondo della fotografia (2026-09-03): categoria a sinistra,
   posizione a destra, sulla stessa linea. La posizione stava sotto il titolo e si portava via
   una riga del corpo della scheda, che ora e' dei tre dati del lotto.
   E' una barra flex larga quanto la foto e non due pastiglie ancorate agli angoli: cosi' le due
   non si sovrappongono mai, nemmeno con "Reggio nell'Emilia, RE" su una card stretta — chi non
   ci sta si accorcia coi puntini (min-width: 0 + ellipsis piu' sotto).
   pointer-events: none perche' sotto c'e' il link alla scheda: le pastiglie sono etichette, non
   bersagli, e un clic che cade li' deve aprire l'annuncio come il resto della foto. */
.auction-card__pills {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 25px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.auction-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;               /* la categoria non si accorcia: e' una parola sola */
  min-width: 0;                 /* senza, l'ellipsis del testo non parte mai */
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(12px);
}

/* Il testo della pastiglia: una riga sola, puntini se sfora. */
.auction-card__tag > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* La posizione e' l'unica delle due che cede: su una card da 330px la categoria intera pesa un
   centimetro e ridotta a "Reside..." non dice piu' niente, mentre la posizione tagliata perde la
   provincia e tiene il comune, che e' il pezzo che conta. */
.auction-card__tag--posizione {
  flex: 0 1 auto;
}

.auction-card__tag-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #fff;
}

.auction-card__tag-icon svg {
  width: 12px;
  height: 12px;
}

/* ------------------------------------------------------------------
   Pastiglia "Scade tra N giorni" (_ScadenzaAsta.cshtml).
   Sulle foto delle liste sta in alto a SINISTRA: e' il posto che fino al
   2026-08-26 occupava il segnalibro "salva", tolto dalle liste perche' un
   annuncio si salva dalla sua scheda.
   Il colore e' l'informazione, non l'ornamento: rosso sotto i 14 giorni,
   ambra fino a 30, verde oltre.
   ------------------------------------------------------------------ */
.scadenza-asta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.scadenza-asta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Stesso z-index del voto AI: sopra il velo delle foto oscurate (z-20),
   sotto la barra dei filtri di /annunci. */
/* Nastro, non pastiglia (2026-09-02): agganciato al bordo destro della scheda, con la coda di
   rondine sul lato libero - il vuoto sta dentro la fascia, come nei nastri veri. E' l'unico
   elemento della scheda che finge di essere un oggetto fisico, ed e' voluto: la scadenza e'
   l'informazione che deve fermare l'occhio. Vale solo per la variante sulla foto - la "chip" in
   linea sulla scheda annuncio resta una pastiglia.
   Sta in alto a destra dal 2026-09-02, nell'angolo lasciato libero dal voto AI (sceso dentro il
   riquadro "Analisi AI"): e' l'informazione che deve fermare l'occhio e li' non compete con
   nient'altro. L'angolo in alto a sinistra resta alla pastiglia della categoria.
   L'ombra e' un filter e non un box-shadow: clip-path taglia anche l'ombra, drop-shadow invece
   segue il profilo ritagliato, intaglio compreso. */
.scadenza-asta--overlay {
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 30;
  color: #fff;
  border-radius: 0;
  padding: 7px 10px 7px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.45));
}

.scadenza-asta--overlay.scadenza-asta--urgente {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.scadenza-asta--overlay.scadenza-asta--media {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

.scadenza-asta--overlay.scadenza-asta--calma {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

/* In linea fra le pastiglie della scheda annuncio (tipologia, categoria, sconto):
   stessi toni tenui delle vicine, non i pieni pensati per stare su una fotografia. */
.scadenza-asta--chip.scadenza-asta--urgente {
  background: #ffe4e6;
  color: #be123c;
}

.scadenza-asta--chip.scadenza-asta--media {
  background: #fef3c7;
  color: #b45309;
}

.scadenza-asta--chip.scadenza-asta--calma {
  background: #dcfce7;
  color: #15803d;
}

/* La barra dei filtri di /annunci sta sopra tutto quello che le scorre sotto.
   NON e' una utility di Tailwind di proposito: site.css e' caricato PRIMA di
   tailwind.css, quindi una "z-40" scritta nel markup vincerebbe su questa regola. */
.barra-filtri-annunci {
  z-index: 900;
}

.auction-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Il titolo tiene sempre due righe, anche quando il testo ne riempie una sola: cosi' tipo,
   posizione, prezzo, data e analisi partono alla stessa altezza in tutte le card della fila.
   Senza, ogni card con il titolo corto alzava di una riga tutto quello che ha sotto e la
   griglia si sfalsava. Il clamp a due serve all'altro caso: un titolo lunghissimo che
   scenderebbe a tre righe sfalserebbe la fila nella direzione opposta. */
.auction-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  min-height: 2.7em;   /* 2 righe x 1.35 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auction-card__snippet {
  margin-top: 4px;
  font-size: 14px;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Il tipo di lotto sotto il titolo, su una riga sola (2026-09-02: erano due righe intere per due
   informazioni corte, cioe' una riga sprecata per ognuna delle venti card della griglia).
   Dal 2026-09-03 qui c'e' il solo tipo: la posizione e' salita sulla fotografia, accanto alla
   categoria (_PastiglieFoto.cshtml), e la riga liberata e' andata ai tre dati del lotto.
   Il tipo si accorcia coi puntini: e' un'etichetta catastale che il titolo qui sopra e l'analisi
   AI qui sotto ripetono comunque. */
.auction-card__subline {
  display: flex;
  flex-wrap: nowrap;   /* mai a capo: e' tutto il senso della modifica */
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.auction-card__subline .auction-card__snippet {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ultimo pezzo dell'allineamento: il testo dell'analisi tiene sempre quattro righe, che e' il
   massimo che ci sta. Senza, un lotto descritto in tre righe alzava il pulsante di una riga
   rispetto ai vicini di fila. Solo nella griglia (.auction-card__body): nella vista a lista
   il riquadro e' piu' corto di proposito e non ha nessuno con cui allinearsi. */
.auction-card__body .auction-card__analysis p {
  margin: 0;
  line-height: 1.5;
  min-height: 6em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   I dati del lotto sotto il titolo (_DettagliLotto.cshtml): termine offerte,
   stato, tribunale, modalita' di vendita. Dal 2026-09-10 sono colonne
   affiancate con l'etichetta in testa e il valore sotto, come una tabella:
   due righe di altezza invece di quattro, e in una pagina di schede ogni riga
   risparmiata e' una scheda in piu' che si vede senza scorrere.
   Le quattro colonne partono dalla larghezza del loro testo e si spartiscono
   in parti uguali lo spazio che avanza (2026-09-10): sono quattro tracce
   "auto", che la griglia allunga da sole fino a riempire la scheda. Cosi'
   "Busto Arsizio" si prende la colonna larga che gli serve invece di finire
   troncato in un quarto fisso, e nessuna colonna resta isolata contro il
   bordo (era quello che succedeva con l'ultima colonna a misura di testo e
   il tribunale su 1fr). Testo centrato, titolo e valore, come in una tabella.
   Corpi piccoli (etichetta 8px, valore 11px): in una scheda della griglia
   ci sono ~285px per tutte e quattro.
   ------------------------------------------------------------------ */
.lotto-dettagli {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 3px;
  margin: 0;
}

.lotto-dettagli__voce {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
}

/* Il filetto fra una colonna e l'altra: e' quello che la fa leggere come una
   tabella e non come tre pezzi di frase. */
.lotto-dettagli__voce + .lotto-dettagli__voce {
  padding-left: 3px;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
}

/* Etichetta sopra e valore sotto, tutti e due centrati sulla loro colonna. */
.lotto-dettagli dt {
  min-width: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
  color: #94a3b8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lotto-dettagli dd {
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Nella vista a elenco la riga e' larga il triplo di una scheda: li' le quattro
   colonne restano attaccate a sinistra invece di allargarsi fino al bordo, se no
   "Vendita" finiva da sola in mezzo alla riga, staccata dalle altre tre. Solo da
   1024px in su: sotto, l'elenco si impila e lo spazio torna quello della scheda. */
@media (min-width: 1024px) {
  .lotto-dettagli-largo .lotto-dettagli {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    column-gap: 10px;
  }

  .lotto-dettagli-largo .lotto-dettagli__voce + .lotto-dettagli__voce {
    padding-left: 10px;
  }
}

/* Stato di occupazione: solo il colore del testo, niente pastiglia colorata
   (2026-09-10). Con lo sfondo ambra si confondeva con il riquadro dorato
   dell'analisi AI e sembrava un giudizio del modello, mentre e' un dato letto
   dalla perizia. Verde libero, terracotta occupato, grigio quando la perizia
   non lo dice — e in quel caso c'e' scritto "Da verificare", mai "Libero"
   (un occupato scambiato per libero vale il 20-40% in meno). */
.lotto-stato {
  font-weight: 700;
}

.lotto-stato--libero {
  color: #047857;
}

.lotto-stato--occupato {
  color: #c2410c;
}

.lotto-stato--ignoto {
  color: #64748b;
}

.auction-card__price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auction-card__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
}

.auction-card__price {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 2px;
}

/* Una riga sola. Con l'etichetta del bollino diventata "SOTTO PERIZIA" (2026-09-11) la colonna
   del prezzo si e' stretta di una ventina di pixel e sulle cifre a sei numeri l'euro finiva a
   capo da solo ("303.004" su una riga, "€" su quella dopo). Il corpo scende di un punto e la
   riga non va piu' a capo; se anche cosi' non bastasse (cifre a sette numeri) si accorcia coi
   puntini, che e' meno brutto di un simbolo orfano. */
.auction-card__market {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Senza questo la colonna del prezzo non scende mai sotto la larghezza del suo testo (i flex
   item nascono con min-width:auto) e a essere spinto fuori dalla card sarebbe il bollino. */
.auction-card__price-row > div:first-child {
  min-width: 0;
}

.auction-card__market span {
  margin-left: 4px;
}

/* Il bollino verde dello sconto. Dal 2026-09-10 porta la sua etichetta sopra il numero, come
   "OFFERTA MINIMA" sopra il prezzo qui accanto: da solo, "-30%" era una percentuale sospesa che
   ognuno leggeva a modo suo (il ribasso rispetto all'asta precedente? lo scarto dal mercato?).
   Sopra e non sotto per la stessa ragione dei tre dati del lotto: l'etichetta e' l'intestazione. */
.auction-card__discount {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  font-weight: 700;
  font-size: 13px;
  align-self: center;
}

.auction-card__discount-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
}

.auction-card__discount-valore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.25;
  white-space: nowrap;
}

.auction-card__discount svg {
  width: 15px;
  height: 15px;
}

.auction-card__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5), transparent);
}

/* Anche questa riga deve restare alta una riga sola in tutte le card, altrimenti sfalsa
   l'analisi AI qui sotto: con le superfici a sei cifre (108150 mq) l'etichetta "DATA ASTA"
   andava a capo. Nessuno dei due va a capo; se lo spazio non basta e' la superficie ad
   accorciarsi coi puntini, perche' la data d'asta e' quella che fa decidere. */
.auction-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
}

.auction-card__meta > div:first-child {
  min-width: 0;
}

.auction-card__meta > div:first-child span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.auction-card__meta svg {
  width: 16px;
  height: 16px;
  color: #475569;
}

.auction-card__meta div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* Analisi AI: UN SOLO trattamento per tutte e tre le viste - pannello della scheda annuncio,
   riquadro delle card a griglia, riquadro della vista a lista. Sono la stessa informazione,
   quindi hanno lo stesso colore e chi passa dalla griglia al dettaglio riconosce l'oggetto.
   Il 2026-09-02 il riquadro delle card era stato provato in blu notte: si confondeva col
   pulsante "Visualizza dettagli" subito sotto, quindi non esaltava piu' niente. Vince il
   fondo caldo pieno col filetto metallico a sinistra: e' l'unico blocco dorato della card. */
.ai-analysis-panel,
.auction-card__analysis {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ai-fondo), var(--ai-fondo-forte));
  border: 1px solid var(--ai-bordo);
}

/* Il filetto: non un bordo qualsiasi ma un oro sfumato scuro-chiaro-scuro, che e' come si
   legge il metallo. E' quello che fa la differenza fra "riquadro giallo" e "cosa di valore". */
.ai-analysis-panel::before,
.auction-card__analysis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #92400e, #fbbf24 45%, #b45309);
}

/* ------------------------------------------------------------------
   Nastro "Voto AI" nel pannello Analisi AI della scheda annuncio (2026-09-03).
   E' lo stesso oggetto fisico del nastro "Scade tra..." sulle foto delle liste
   (.scadenza-asta--overlay): agganciato al bordo destro, coda di rondine sul
   lato libero. Due nastri disegnati diversi nella stessa scheda sembrerebbero
   due cose diverse.
   Il margine destro negativo annulla il padding del pannello (p-6 = 24px),
   altrimenti il nastro si fermerebbe 24px prima del bordo e non sarebbe
   agganciato a niente.
   L'ombra e' un filter e non un box-shadow: clip-path taglia anche l'ombra,
   drop-shadow invece segue il profilo ritagliato, intaglio compreso.
   ------------------------------------------------------------------ */
.voto-ai-nastro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: -24px;
  padding: 9px 16px 9px 28px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
  filter: drop-shadow(0 3px 6px rgba(120, 53, 15, 0.35));
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.voto-ai-nastro strong {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.voto-ai-nastro svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Voto oscurato: grigio, non oro. Un nastro d'oro con "**" dentro suggerirebbe
   un voto alto - stessa regola del bollino sulle card. L'oro compare al passaggio
   del mouse: e' l'anteprima di cosa si sblocca. */
.voto-ai-nastro--bloccato {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: #f8fafc;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.28));
  transition: background 0.2s ease, color 0.2s ease;
}

.voto-ai-nastro--bloccato:hover {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
}

.auction-card__analysis {
  border-radius: 16px;
  padding: 14px 16px 14px 22px;   /* 22 a sinistra: lascia respiro dopo il filetto */
  font-size: 13px;
  color: #57534e;
}

.auction-card__analysis-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ai-oro-scuro);
  font-size: 13px;
  margin-bottom: 6px;
}

.auction-card__analysis-title svg {
  width: 16px;
  height: 16px;
}

/* Il voto AI, dal 2026-09-02, sta qui: in fondo alla riga "Analisi AI", non piu' come bollino
   sulla fotografia. Sulla foto era la prima cosa che si vedeva di ogni scheda ed era troppo:
   dentro il riquadro dell'analisi il numero e' accanto alla frase che lo spiega, e la fotografia
   torna a essere solo la fotografia. Niente fondo pieno, solo il numero in oro e un filetto
   leggero: la scala di colore resta (piu' spento sotto 60, pieno da 80), l'ingombro no.
   margin-left: auto lo spinge a destra, per questo il contenitore e' display: flex e non
   inline-flex. */
.auction-card__analysis-voto {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  background: rgba(251, 191, 36, 0.10);
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.auction-card__analysis-voto span {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
}

/* Da 60 in su: stesso oro, un filo piu' acceso. */
.auction-card__analysis-voto--medio {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(251, 191, 36, 0.16);
  color: #a16207;
}

/* Da 80 in su e' l'unico che si accende davvero: oro pieno, bordo marcato. */
.auction-card__analysis-voto--alto {
  border-color: rgba(217, 119, 6, 0.6);
  background: rgba(251, 191, 36, 0.28);
  color: #92400e;
}

/* Voto oscurato: grigio, non oro. Un bollino d'oro con "••" dentro suggerirebbe un voto alto. */
.auction-card__analysis-voto--bloccato {
  border-color: rgba(100, 116, 139, 0.28);
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
}

/* Il simbolo davanti al numero: dal 2026-09-10 e' la scintilla dell'AI, la stessa icona usata
   ovunque nel sito per dire "questo l'ha scritto il modello" (prima era una stella piena, che
   si leggeva come un voto a stelle). E' un'icona di contorno, quindi a 13px con tratto 2 resta
   leggibile mentre a 12px si impastava.
   Regola dopo .auction-card__analysis-title svg (16px) di proposito: a parita' di specificita'
   vince l'ultima, e qui l'icona deve restare piccola. */
.auction-card__analysis-scintilla {
  width: 13px;
  height: 13px;
  align-self: center;
  margin-right: 1px;
  opacity: 0.9;
}

.auction-card__analysis-lucchetto {
  width: 11px;
  height: 11px;
  align-self: center;
  margin-left: 2px;
  opacity: 0.85;
}

.auction-card__cta {
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

.auction-card__cta svg {
  width: 18px;
  height: 18px;
}

.auction-card--compact .auction-card__body {
  padding: 18px 18px 20px;
  gap: 14px;
}

.auction-card--compact .auction-card__price {
  font-size: 24px;
}

.auction-card--compact .auction-card__meta {
  font-size: 12px;
  gap: 14px;
}

@media (max-width: 900px) {
  .hero-radar {
    width: 520px;
    height: 520px;
  }

  .hero-sweep {
    inset: -8%;
  }
}

@media (max-width: 640px) {
  .hero-radar {
    width: 360px;
    height: 360px;
  }

  .hero-orbit,
  .hero-orbit--slow {
    border-color: rgba(148, 163, 184, 0.18);
  }

  .hero-title {
    letter-spacing: 0.04em;
  }

  .hero-scanline {
    opacity: 0.45;
  }
}

/* Toggle Pricing Switch Styles */
.pricing-toggle {
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #cbd5e1;
}

.pricing-toggle:hover {
  background-color: #b0bac9;
}

.pricing-toggle.active {
  background-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.pricing-toggle.active:hover {
  background-color: #1d4ed8;
}

.toggle-circle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Auth modal */
body.modal-open {
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-modal__dialog {
  position: relative;
  width: min(500px, 92vw);
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 8px 16px rgba(15, 23, 42, 0.08),
    0 32px 64px rgba(37, 99, 235, 0.12),
    0 64px 128px rgba(15, 23, 42, 0.15);
  z-index: 1;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: #94a3b8;
  cursor: pointer;
}

.auth-modal__header {
  margin-bottom: 16px;
}

.auth-tabs {
  display: inline-flex;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-radius: 14px;
  padding: 5px;
  box-shadow: 
    inset 0 1px 2px rgba(15, 23, 42, 0.05),
    0 1px 3px rgba(15, 23, 42, 0.05);
}

.auth-tab {
  border: none;
  background: transparent;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-tab:hover:not(.auth-tab--active) {
  color: #475569;
  background: rgba(37, 99, 235, 0.05);
}

.auth-tab--active {
  background: linear-gradient(135deg, #2563eb, #3b82f6, #0ea5e9);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: 
    0 4px 12px rgba(37, 99, 235, 0.3),
    0 8px 24px rgba(14, 165, 233, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.auth-subtitle {
  margin-top: 10px;
  color: #475569;
  font-size: 14px;
}

.auth-body {
  display: block;
}

.auth-social {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-social__btn {
  width: 100%;
  position: relative;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #f1f5f9, #e2e8f0) border-box;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  overflow: hidden;
}

.auth-social__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9, #f97316);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.auth-social__btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 0 0 1px rgba(37, 99, 235, 0.1),
    0 8px 24px rgba(37, 99, 235, 0.15),
    0 16px 48px rgba(14, 165, 233, 0.1);
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #2563eb, #0ea5e9) border-box;
}

.auth-social__btn:hover::before {
  opacity: 1;
}

.auth-social__btn:active {
  transform: translateY(0);
}

.auth-social__btn--google { 
  color: #1f2937;
}

.auth-social__btn--google svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
  margin: 10px 0 14px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-field {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
}

.auth-field input {
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-field input:hover {
  border-color: #cbd5e1;
}

.auth-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 1px 3px rgba(37, 99, 235, 0.05);
  background: #fff;
  transform: translateY(-1px);
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-link {
  color: #2563eb;
  font-weight: 600;
}

.auth-submit {
  height: 52px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #0ea5e9 100%);
  background-size: 200% 100%;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 
    0 1px 2px rgba(37, 99, 235, 0.15),
    0 4px 12px rgba(37, 99, 235, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.auth-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.auth-submit:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 
    0 2px 4px rgba(37, 99, 235, 0.2),
    0 8px 20px rgba(37, 99, 235, 0.2);
}

.auth-submit:hover::before {
  opacity: 1;
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-terms {
  font-size: 12px;
  color: #475569;
}

.auth-error {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  padding: 12px 16px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.field-error {
  display: block;
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  min-height: 16px;
  animation: fadeIn 0.2s ease;
}

.auth-field.has-error input {
  border-color: #f87171;
  background: #fef2f2;
}

.auth-field.has-error input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.auth-success {
  text-align: center;
  padding: 12px 4px 0;
  display: grid;
  gap: 12px;
  animation: fadeIn 0.4s ease;
}

.auth-success__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.auth-success__icon svg {
  width: 32px;
  height: 32px;
}

.auth-success__hint {
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}

.auth-submit--outline {
  background: #fff;
  color: #2563eb;
  border: 1.5px solid rgba(37, 99, 235, 0.4);
  box-shadow: none;
}

.auth-submit--outline:hover {
  background: rgba(37, 99, 235, 0.05);
  box-shadow: none;
}

.auth-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.auth-submit.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

/* Carousel Slider */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  width: 100%;
}

.carousel-slide {
  min-width: 100%;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-prev,
.carousel-next {
  z-index: 10;
  transition: all 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
  /* Hover effect removed to prevent movement */
}

.carousel-dots {
  z-index: 10;
}

.carousel-dot {
  transition: all 0.3s ease;
  cursor: pointer;
  width: 10px !important;
  height: 10px !important;
  border-radius: 9999px;
  background: rgba(226, 232, 240, 0.8) !important; /* light gray */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.carousel-dot.active {
  background: rgba(252, 211, 77, 0.55) !important; /* soft yellow */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: scale(1.02);
}

.auction-list-item {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.auction-list-item:hover {
  border-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.auction-list-item__image {
  width: 250px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}

.auction-list-item__content {
  min-width: 0;
}

.auction-list-item__price {
  flex-shrink: 0;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   Contenitore standard di pagina
   Larghezza unica del sito: 72rem / 1152px (max-w-6xl) piu' i padding
   laterali. Ogni <section> di ogni pagina avvolge il proprio contenuto in
   .page-shell, cosi' i bordi restano allineati fra una pagina e l'altra.
   Le varianti sotto esistono per i casi in cui 1152px non bastano: si usano
   solo dove servono davvero, mai per gusto grafico.
   Vedi CLAUDE.md > Convenzioni di layout.
   ========================================================================== */
.page-shell,
.page-shell-wide,
.page-shell-full {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .page-shell,
  .page-shell-wide,
  .page-shell-full {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-shell,
  .page-shell-wide,
  .page-shell-full {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Standard: quasi tutte le pagine. */
.page-shell {
  max-width: 72rem;
}

/* Griglie dense e tabelle a piu' colonne (comparatore, dashboard): si allarga
   fino alla stessa misura della barra di navigazione, non oltre. */
.page-shell-wide {
  max-width: 80rem;
}

/* Elenchi che vivono di densita' (/annunci, mappa a tutto schermo): nessun
   limite, solo i padding laterali. */
.page-shell-full {
  max-width: none;
}

/* Colonna di sola lettura (testi lunghi, moduli stretti): resta piu' stretta
   per leggibilita', ma centrata dentro .page-shell invece di avere una
   larghezza massima decisa caso per caso. */
.page-shell-narrow {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* Stessa larghezza, ma agganciata a sinistra. Serve dove la colonna stretta sta
   sotto un titolo allineato a sinistra (le intestazioni delle guide): centrata
   uscirebbe fuori asse rispetto al titolo che la introduce. */
.page-shell-narrow.is-start {
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   Corpo degli articoli delle guide (.articolo-corpo)

   Il corpo di un articolo arriva dal database come HTML gia' reso: dentro non
   ci sono classi Tailwind, ci sono tag normali (h2, p, ul, table, figure).
   Tailwind pero' azzera gli stili di base di tutti i tag (preflight), quindi
   senza queste regole un articolo uscirebbe come un blocco di testo tutto
   uguale, titoli compresi. Qui si rimette la tipografia una volta sola, per
   tutti gli articoli presenti e futuri.

   Le regole sono a specificita' (0,1,1) — .articolo-corpo + tag — quindi
   battono il preflight di Tailwind (0,0,1) anche se tailwind.css viene
   caricato dopo questo file.

   I nomi delle classi usate qui sotto (.articolo-figura, .articolo-nota...)
   sono il contratto con lo script di pubblicazione: cambiarli qui senza
   cambiarli la' toglie lo stile a tutti gli articoli gia' pubblicati.
   ========================================================================== */
.articolo-corpo {
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Numera le sezioni: il contatore parte da qui e avanza a ogni h2. Un
     articolo lungo con le sezioni numerate si percorre, uno senza si scorre. */
  counter-reset: articolo-sezione;
}

.articolo-corpo > * + * {
  margin-top: 1.25rem;
}

/* Il paragrafo di apertura. Piu' grande e piu' scuro degli altri: e' quello
   che decide se si continua a leggere, e su una prima schermata tutta della
   stessa dimensione non si capisce da dove cominciare. */
.articolo-corpo .articolo-lead {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: #1e293b;
}

.articolo-corpo h2,
.articolo-corpo h3,
.articolo-corpo h4 {
  color: #0f172a;
  font-weight: 800;
  line-height: 1.25;
  /* L'intestazione del sito e' fissa: senza questo, cliccando una voce
     dell'indice il titolo di destinazione finisce sotto la barra. */
  scroll-margin-top: 6rem;
}

/* --- Titoli di sezione --------------------------------------------------
   Prima erano testo nero sopra un filetto grigio: leggibili e invisibili.
   Ora ogni sezione si apre con il proprio numero in una pastiglia viola, che
   e' l'elemento che l'occhio aggancia scorrendo velocemente la pagina. */
.articolo-corpo h2 {
  font-size: 1.75rem;
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 2px solid #dbeafe;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.articolo-corpo h2::before {
  counter-increment: articolo-sezione;
  content: counter(articolo-sezione);
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1;
}

.articolo-corpo h3 {
  font-size: 1.3125rem;
  margin-top: 2.25rem;
  padding-left: 0.75rem;
  border-left: 3px solid #60a5fa;
}

.articolo-corpo h4 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
}

.articolo-corpo a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.articolo-corpo a:hover {
  color: #1e3a8a;
}

.articolo-corpo strong {
  color: #0f172a;
  font-weight: 700;
}

.articolo-corpo ul,
.articolo-corpo ol {
  padding-left: 1.5rem;
}

.articolo-corpo ul {
  list-style: disc;
}

.articolo-corpo ol {
  list-style: decimal;
}

.articolo-corpo li + li {
  margin-top: 0.5rem;
}

.articolo-corpo li::marker {
  color: #60a5fa;
}

.articolo-corpo blockquote {
  border-left: 3px solid #60a5fa;
  padding-left: 1.25rem;
  color: #475569;
  font-style: italic;
}

.articolo-corpo hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.articolo-corpo code {
  background: #f1f5f9;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}

/* --- Figure e grafici ---------------------------------------------------
   I grafici sono SVG scritti direttamente nell'HTML dell'articolo: nessuna
   libreria da caricare, nessuna immagine da servire, e il testo dentro il
   grafico resta selezionabile e leggibile da Google. */
.articolo-corpo figure,
.articolo-corpo .articolo-figura {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  /* Il grafico dentro un pannello con un fondo appena diverso dal bianco: e'
     quello che lo fa leggere come un oggetto invece che come un buco nella
     pagina. Il filo viola in alto lo lega alla tinta del sito. */
  padding: 1.125rem;
  border: 1px solid #e3ecf8;
  border-top: 3px solid #2563eb;
  border-radius: 1rem;
  background: linear-gradient(180deg, #faf8ff, #ffffff 55%);
}

.articolo-corpo .articolo-figura svg,
.articolo-corpo figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Figura affiancata al testo -----------------------------------------
   Su schermo largo il riquadro dei numeri sta a destra e il testo gli scorre
   accanto: e' la differenza fra una pagina impaginata e un elenco di blocchi
   uno sotto l'altro. Sotto i 1024 px torna a tutta larghezza, perche' su un
   telefono una colonna al 42% non e' una colonna, e' una striscia.

   La regola vale solo per .articolo-numeri (lo impone anche ArticlePublish):
   un grafico a barre a meta' larghezza non si legge. */
@media (min-width: 1024px) {
  .articolo-corpo .articolo-figura-lato {
    float: right;
    width: 42%;
    margin-top: 0.5rem;
    margin-left: 1.75rem;
    margin-bottom: 1.25rem;
  }

  /* Un titolo di sezione non deve mai incastrarsi accanto a una figura
     flottante: la sezione nuova ricomincia sempre a riga intera. */
  .articolo-corpo h2,
  .articolo-corpo h3,
  .articolo-corpo .articolo-tabella,
  .articolo-corpo hr {
    clear: both;
  }

  /* Tutto cio' che viene dopo il corpo (FAQ, fonti, voto, passi del percorso)
     riparte a riga intera: senza questo, su un articolo che finisce con una
     figura affiancata il riquadro delle domande frequenti le si incastrerebbe
     di fianco. */
  .articolo-corpo ~ * {
    clear: both;
  }
}

/* Dentro una figura affiancata le cifre restano incolonnate: la griglia
   automatica, a 42% di larghezza, spezzerebbe le schede in modo casuale. */
.articolo-corpo .articolo-figura-lato .articolo-numeri {
  grid-template-columns: 1fr;
  margin-top: 0;
  margin-bottom: 0;
}

.articolo-corpo figure img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
}

.articolo-corpo figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}

/* --- Tabelle ------------------------------------------------------------
   Il contenitore scorre da solo: una tabella a cinque colonne su telefono
   deve poter scorrere lei, non far scorrere l'intera pagina di lato. */
.articolo-corpo .articolo-tabella {
  overflow-x: auto;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  border: 1px solid #e3ecf8;
  border-radius: 0.875rem;
  /* Il contenitore ritaglia gli angoli della testata colorata: senza, la
     fascia viola sborda oltre il raggio e l'angolo sembra rotto. */
  overflow: hidden;
}

.articolo-corpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* Testata piena invece che grigio chiaro: in una pagina lunga e' cosi' che
   una tabella si distingue da un elenco puntato visto con la coda dell'occhio. */
.articolo-corpo thead {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.articolo-corpo th {
  text-align: left;
  font-weight: 700;
  color: #ffffff;
  padding: 0.8125rem 1rem;
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.articolo-corpo td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Righe alternate: su una tabella di sei righe non serve, su una di venti e'
   la differenza fra leggere la riga giusta e leggere quella sotto. */
.articolo-corpo tbody tr:nth-child(even) {
  background: #faf9ff;
}

/* La prima colonna e' quasi sempre l'etichetta della riga: in neretto si
   trova senza rileggere. */
.articolo-corpo tbody td:first-child {
  font-weight: 600;
  color: #1e293b;
}

.articolo-corpo tbody tr:hover {
  background: #edf4ff;
}

/* --- Riquadri di richiamo ----------------------------------------------- */
.articolo-corpo .articolo-nota,
.articolo-corpo .articolo-attenzione,
.articolo-corpo .articolo-chiave {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.875rem;
  border-left-width: 4px;
  border-left-style: solid;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.articolo-corpo .articolo-nota {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #1e3a8a;
}

.articolo-corpo .articolo-attenzione {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f;
}

.articolo-corpo .articolo-chiave {
  background: #f5f3ff;
  border-left-color: #2563eb;
  color: #1e3a8a;
}

.articolo-corpo .articolo-nota > :first-child,
.articolo-corpo .articolo-attenzione > :first-child,
.articolo-corpo .articolo-chiave > :first-child {
  margin-top: 0;
}

/* L'etichetta del riquadro ("Attenzione", "Da ricordare"). La scrive
   ArticlePublish/Markdown.cs come primo <p> del blocco: e' quella che dice a
   colpo d'occhio se il riquadro va letto adesso o si puo' saltare. */
.articolo-corpo .articolo-richiamo-titolo {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Un richiamo affiancato a una figura flottante uscirebbe stretto e storto:
   i richiami vanno sempre a riga intera. */
.articolo-corpo .articolo-nota,
.articolo-corpo .articolo-attenzione,
.articolo-corpo .articolo-chiave {
  clear: both;
}

/* --- Numeri in evidenza -------------------------------------------------
   Tre o quattro cifre grosse valgono piu' di un paragrafo che le elenca:
   e' il blocco che rende "leggibile a colpo d'occhio" un articolo di dati. */
.articolo-corpo .articolo-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.875rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.articolo-corpo .articolo-numero {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #2563eb;
  border-radius: 0.875rem;
  padding: 1rem 0.875rem;
  text-align: center;
}

/* Ogni scheda prende una tinta diversa, a rotazione. Il colore non dice
   niente sul dato — lo dice la cifra — ma quattro schede identiche in fila
   si leggono come una sola, e quattro colorate si contano a colpo d'occhio.
   Sono le stesse tinte delle barre dei grafici (ContentPrep/Grafici.cs), cosi'
   la pagina resta una tavolozza sola. */
.articolo-corpo .articolo-numero:nth-child(4n + 2) {
  border-top-color: #2563eb;
}

.articolo-corpo .articolo-numero:nth-child(4n + 3) {
  border-top-color: #059669;
}

.articolo-corpo .articolo-numero:nth-child(4n + 4) {
  border-top-color: #d97706;
}

.articolo-corpo .articolo-numero-valore {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  color: #1d4ed8;
  line-height: 1.1;
}

.articolo-corpo .articolo-numero:nth-child(4n + 2) .articolo-numero-valore {
  color: #1d4ed8;
}

.articolo-corpo .articolo-numero:nth-child(4n + 3) .articolo-numero-valore {
  color: #047857;
}

.articolo-corpo .articolo-numero:nth-child(4n + 4) .articolo-numero-valore {
  color: #b45309;
}

.articolo-corpo .articolo-numero-etichetta {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}

/* La fonte di un dato va sotto il dato, non in fondo alla pagina: e' quello
   che rende verificabile un numero mentre lo si legge. */
.articolo-corpo .articolo-fonte {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ==========================================================================
   Sezioni a fisarmonica (calcolatore costi)

   Ogni sezione ha una tinta propria. Il resto del sito e' bianco, quindi una
   tinta troppo tenue non si distingue: il fondo a riposo e' quello che prima
   era il colore di passaggio del mouse, e il mouse-over scende di un altro
   gradino. I colori vivono qui e non nelle classi Tailwind della view, cosi'
   cambiarli e' una modifica sola e la pastiglia della top bar resta
   automaticamente in tinta con la sezione che apre.

   Le stesse variabili servono anche alle schede della checklist pre-asta
   (temi 5 e 6 in piu': sei categorie invece di quattro sezioni).
   ========================================================================== */
.acc-tema-1 {
  --acc-fondo: #eff6ff;
  --acc-fondo-hover: #e0edfd;
  --acc-bordo: #c9e0f7;
  --acc-num-fondo: #d6e8fb;
  --acc-num-testo: #1e4bb8;
}

.acc-tema-2 {
  --acc-fondo: #fdf8ec;
  --acc-fondo-hover: #faf1da;
  --acc-bordo: #ecdcbe;
  --acc-num-fondo: #f7e9cb;
  --acc-num-testo: #8f6110;
}

.acc-tema-3 {
  --acc-fondo: #eff7fd;
  --acc-fondo-hover: #e1f0fa;
  --acc-bordo: #cbe2f1;
  --acc-num-fondo: #d7e9f7;
  --acc-num-testo: #1b5f86;
}

.acc-tema-4 {
  --acc-fondo: #eef8f4;
  --acc-fondo-hover: #dff2ea;
  --acc-bordo: #c9e5da;
  --acc-num-fondo: #d5ece0;
  --acc-num-testo: #1a6850;
}

/* Solo checklist: due categorie in piu' del calcolatore. */
.acc-tema-5 {
  --acc-fondo: #fdf2f4;
  --acc-fondo-hover: #fbe6ea;
  --acc-bordo: #f3d3da;
  --acc-num-fondo: #f8dde3;
  --acc-num-testo: #9d2b47;
}

.acc-tema-6 {
  --acc-fondo: #f2f6fb;
  --acc-fondo-hover: #e6edf7;
  --acc-bordo: #d5e0ee;
  --acc-num-fondo: #dee8f4;
  --acc-num-testo: #3c5578;
}

.acc-sezione {
  background-color: var(--acc-fondo);
  border: 1px solid var(--acc-bordo);
}

.acc-testa:hover {
  background-color: var(--acc-fondo-hover);
}

.acc-num {
  background-color: var(--acc-num-fondo);
  color: var(--acc-num-testo);
}

/* ==========================================================================
   MOBILE (22/08/2026)
   Questo foglio e' nato per il desktop: quasi tutte le misure qui dentro sono
   pixel fissi pensati per uno schermo largo. Questo blocco sta in fondo al file
   apposta: le regole con la stessa specificita' scritte piu' sopra vengono
   sovrascritte da queste solo se stanno dopo, quindi non spostarlo piu' in alto.
   ========================================================================== */

/* Rete di sicurezza: nessuna pagina deve poter scorrere in orizzontale. Se un
   elemento sfora di qualche pixel, viene tagliato invece di allargare la pagina
   e far "ballare" tutto il sito di lato.

   `clip` e NON `hidden`: hidden farebbe del body un contenitore di scorrimento e
   romperebbe ogni barra `position: sticky` (filtri di /annunci, top bar degli
   strumenti, schede dell'area personale). `clip` taglia soltanto, senza creare
   lo scroll, e non tocca gli elementi `position: fixed` (header, banner cookie,
   modali), che hanno come riferimento la finestra e non il body.
   Resta comunque una rete: gli sforamenti veri vanno corretti dove nascono. */
body {
  overflow-x: clip;
}

/* Il menu mobile aperto e' una lista lunga con scroll proprio: senza bloccare
   il corpo pagina, scorrendolo si trascinava anche la pagina sotto e alla
   chiusura ci si ritrovava a meta' di un'altra sezione. */
body.menu-mobile-aperto {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* Safari su iPhone ingrandisce l'intera pagina quando si tocca un campo con
     testo sotto i 16px, e non la rimpicciolisce piu' da sola: l'utente resta
     bloccato in zoom su un modulo. 16px e' la soglia esatta imposta da iOS.
     Serve !important perche' le utility Tailwind (text-sm, text-xs) hanno
     specificita' di classe e batterebbero il selettore di elemento. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  /* La spaziatura fra lettere del titolo hero (0.05em) e del sottotitolo
     (0.15em) e' tarata su text-8xl da desktop: su un telefono da 390px
     fa sfondare la riga oltre il bordo. */
  .hero-cyber-title {
    letter-spacing: 0.01em;
    line-height: 1.05;
    overflow-wrap: break-word;
  }

  .hero-cyber-subtitle-main {
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
    /* Il sottotitolo della home su telefono non ci sta in due righe e va a capo
       da solo: senza balance lasciava una riga lunga e una con la sola parola
       finale ("CRITICITA'"). balance divide il testo in righe di pari lunghezza. */
    text-wrap: balance;
  }

  /* Decorazione: il "cervello AI" e' posizionato in alto al centro con misure
     da desktop e finisce sopra al titolo. Le altre animazioni del hero
     (gradiente, particelle, scanline) restano. */
  .hero-ai-brain {
    display: none;
  }

  .hero-compact {
    min-height: 220px;
    padding: 40px 0 28px;
  }

  /* Su 390px la foto 16:9 e' alta 219px: tenere 380px vorrebbe dire tagliarla ai lati. */
  .hero-foto {
    min-height: 0;
  }

  /* Tre informazioni su una riga sola non stanno in 390px: vanno mandate a capo. */
  .auction-card__meta {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  /* 280px di foto su uno schermo alto 844 mangiavano un terzo di schermo per scheda. */
  .auction-card__media {
    height: 210px;
  }

  /* Il modale di accesso/registrazione e' piu' alto dello schermo di un telefono:
     senza scroll proprio il pulsante "Accedi" finiva sotto il bordo. */
  .auth-modal__dialog {
    width: min(500px, 94vw);
    padding: 20px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  /* Il segnalibro sovrapposto alla foto era 38px: sotto i 44px consigliati come
     area toccabile minima, e con il dito si finiva per aprire l'annuncio. */
  .salva-asta--card {
    width: 44px;
    height: 44px;
    top: 10px;
    left: 10px;
  }

  /* Su 390px il nastro della scadenza si stacca meno dal bordo alto. Resta agganciato
     al bordo destro (right: 0), come sul desktop. */
  .scadenza-asta--overlay {
    top: 10px;
  }
}

/* I riquadri interni restano bianchi: su un fondo gia' tinto, un grigio
   chiaro diventerebbe fango. */
.acc-sezione .bg-slate-50 {
  background-color: #ffffff;
  border: 1px solid var(--acc-bordo);
}

/* Pastiglie della top bar: grigie da spente, in tinta con la propria sezione
   quando quella sezione e' aperta. */
.acc-chip {
  border: 2px solid #e2e8f0;
  background-color: #ffffff;
  color: #475569;
}

.acc-chip:hover {
  border-color: var(--acc-bordo);
  color: var(--acc-num-testo);
}

.acc-chip.is-attiva {
  border-color: var(--acc-bordo);
  background-color: var(--acc-fondo-hover);
  color: var(--acc-num-testo);
}

.acc-chip-num {
  background-color: #f1f5f9;
  color: #64748b;
}

.acc-chip.is-attiva .acc-chip-num {
  background-color: var(--acc-num-fondo);
  color: var(--acc-num-testo);
}

.acc-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.acc-corpo > div {
  overflow: hidden;
}

.acc-sezione.is-aperta .acc-corpo {
  grid-template-rows: 1fr;
}

.acc-freccia {
  transition: transform 0.28s ease;
}

.acc-sezione.is-aperta .acc-freccia {
  transform: rotate(180deg);
}

/* Nessun javascript: le sezioni restano tutte aperte invece di risultare
   tutte chiuse e quindi inutilizzabili. */
.acc-sezione:not(.acc-pronto) .acc-corpo {
  grid-template-rows: 1fr;
}

/* ------------------------------------------------------------------
   Interruttore "includi / escludi" delle sezioni.
   Escludere non nasconde niente: lascia la sezione leggibile ma spenta,
   cosi' si vede a colpo d'occhio che quelle voci non entrano nel totale.
   ------------------------------------------------------------------ */
.acc-usa {
  accent-color: #2563eb;
}

.acc-sezione.is-esclusa {
  opacity: 0.55;
}

.acc-sezione.is-esclusa .acc-corpo {
  filter: grayscale(1);
}

/* ------------------------------------------------------------------
   Checklist pre-asta: una categoria per scheda.
   Senza javascript (e in stampa) restano visibili tutte, altrimenti la
   pagina mostrerebbe una categoria su sei e le altre sparirebbero.
   ------------------------------------------------------------------ */
.ck-pannello {
  display: none;
}

.ck-pannello.is-attiva,
.ck-schede:not(.ck-pronto) .ck-pannello {
  display: block;
}

/* Le voci restano bianche sul fondo tinto della categoria: il contrasto del
   testo non cambia passando da una scheda all'altra. */
.ck-voce {
  background-color: #ffffff;
}

.ck-tab.is-esclusa {
  opacity: 0.5;
}

.ck-tab.is-esclusa .ck-tab-nome {
  text-decoration: line-through;
}

/* ==========================================================================
   Stampa / "salva come PDF"

   Gli strumenti gratuiti sono fatti per essere stampati e portati in giro:
   su carta devono sembrare un documento di iAste, non lo screenshot di una
   pagina web. Qui sparisce tutta l'interfaccia (menu fisso, hero, footer,
   banner cookie, pulsanti) e compaiono intestazione e piede di pagina con
   logo, indirizzo del sito e data.
   ========================================================================== */
.solo-stampa {
  display: none;
}

/* A schermo la tabella di stampa non deve comportarsi da tabella, altrimenti
   larghezze e sticky della pagina saltano: qui torna tutto a blocchi. In stampa
   (piu' sotto) ridiventa una tabella vera, ed e' <thead>/<tfoot> a ripetere
   intestazione e piede su ogni foglio. */
.stampa-foglio,
.stampa-foglio > thead,
.stampa-foglio > tbody,
.stampa-foglio > tfoot,
.stampa-foglio > * > tr,
.stampa-foglio > * > tr > td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  text-align: inherit;
}

.stampa-marchio {
  display: flex;
  align-items: center;
  gap: 3mm;
}

.stampa-marchio img {
  width: 16mm;
  height: 11mm;
  object-fit: contain;
}

.stampa-nome {
  margin: 0;
  font-size: 15pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #1e3a8a;
}

/* "iAste.it" e' un nome solo: il dominio non va staccato con un colore diverso. */
.stampa-nome span {
  color: inherit;
}

.stampa-claim {
  margin: 0.8mm 0 0;
  font-size: 7pt;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
}

.stampa-doc {
  text-align: right;
}

.stampa-doc-titolo {
  margin: 0;
  font-size: 12pt;
  font-weight: 800;
  color: #0f172a;
}

.stampa-doc-meta {
  margin: 1mm 0 0;
  font-size: 8pt;
  color: #64748b;
}

.stampa-piede strong {
  color: #1e3a8a;
}

@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10.5pt;
    /* Senza questo i browser scartano ogni fondo colorato e il documento esce
       tutto bianco: le tinte delle sezioni sono parte della leggibilita'. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Interfaccia: su carta non e' cliccabile, quindi e' solo spazio sprecato.
     L'hero in particolare stampa il testo chiaro senza la sua foto di sfondo. */
  header[data-header],
  footer,
  #cookie-banner,
  #ajax-antiforgery,
  .hero-compact,
  .acc-topbar,
  .acc-freccia,
  .salva-asta,
  .stampa-nascondi {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }

  .solo-stampa {
    display: block !important;
  }

  /* La tabella torna una tabella vera: <thead> si ripete in cima a ogni foglio
     e <tfoot> in fondo. E' l'unico meccanismo che i browser applicano davvero
     alla stampa (position: fixed con offset negativi finisce sulla pagina
     sbagliata: l'intestazione della pagina 2 si stampa in fondo alla 1). */
  .stampa-foglio {
    display: table;
    width: 100%;
  }

  .stampa-foglio > thead {
    display: table-header-group;
  }

  .stampa-foglio > tbody {
    display: table-row-group;
  }

  .stampa-foglio > tfoot {
    display: table-footer-group;
  }

  .stampa-foglio > * > tr {
    display: table-row;
  }

  .stampa-foglio > * > tr > td {
    display: table-cell;
  }

  .stampa-intestazione {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10mm;
    padding-bottom: 3mm;
    margin-bottom: 6mm;
    border-bottom: 2.5pt solid #1d4ed8;
  }

  .stampa-piede {
    display: block !important;
    margin-top: 5mm;
    padding-top: 2mm;
    border-top: 0.75pt solid #c9e0f7;
    font-size: 7.5pt;
    color: #64748b;
    text-align: center;
  }

  /* I contenitori centrano il contenuto sullo schermo: su carta i margini li
     decide gia' @page, altrimenti si sommano e il testo resta in mezzo. */
  .page-shell,
  .page-shell-wide,
  .page-shell-full,
  .page-shell-narrow {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Le fasce di pagina perdono fondo e spaziatura verticale, ma i blocchi
     colorati NO: anche loro sono <section>, ed e' proprio la tinta che su
     carta fa capire dove finisce una sezione e comincia la successiva. */
  .stampa-documento section:not(.acc-sezione):not(.ck-pannello) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
  }

  .acc-sezione,
  .ck-pannello {
    background-color: var(--acc-fondo) !important;
  }

  /* I riquadri interni restano bianchi anche in stampa: fanno da contrasto sul
     fondo tinto della sezione. Le voci gia' spuntate tengono il loro verde,
     altrimenti su carta si perde a colpo d'occhio quello che e' gia' fatto. */
  .acc-sezione .bg-slate-50,
  .ck-voce:not(.bg-emerald-50\/40) {
    background-color: #ffffff !important;
  }

  .ck-voce.bg-emerald-50\/40 {
    background-color: #ecfdf5 !important;
  }

  /* Le colonne affiancate diventano una sola: su A4 una colonna stretta si
     spezzerebbe a meta' pagina. */
  /* :not(.stampa-nascondi) perche' questa regola e' piu' specifica della regola
     che nasconde: senza l'esclusione una griglia marcata stampa-nascondi
     tornerebbe visibile sul foglio. */
  .stampa-documento .grid:not(.stampa-nascondi) {
    display: block !important;
  }

  /* Appiattendo la griglia si perde anche il suo gap: senza questo margine le
     note sotto un campo si attaccano all'etichetta del campo successivo. */
  .stampa-documento .grid:not(.stampa-nascondi) > * {
    margin-bottom: 4mm;
  }

  .stampa-documento .lg\:sticky {
    position: static !important;
  }

  [class*="shadow"] {
    box-shadow: none !important;
  }

  /* Solo i blocchi corti: una sezione intera puo' essere alta piu' di mezza
     pagina, e vietarne la spezzatura lascerebbe fogli mezzi vuoti. */
  .ck-voce,
  li,
  .stampa-intestazione {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Tabella del voto AI (scheda annuncio e dossier): una riga porta la frase
     della perizia e i punti che ne derivano, e vanno letti insieme. Spezzata a
     meta' foglio, in fondo alla pagina resta un punteggio senza la ragione che
     lo giustifica, e in cima alla successiva una frase senza il suo numero. */
  .voto-tabella tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .acc-sezione,
  .ck-pannello {
    margin-bottom: 7mm;
    border: 1px solid var(--acc-bordo) !important;
  }

  /* Una sezione chiusa, su carta, e' contenuto perso: si stampa tutto. */
  .acc-corpo {
    grid-template-rows: 1fr !important;
  }

  .ck-pannello {
    display: block !important;
  }

  /* Gli URL fra parentesi dopo ogni link renderebbero il testo illeggibile:
     l'indirizzo del sito sta gia' in intestazione e nel piede di pagina. */
  a {
    color: inherit;
    text-decoration: none;
  }

  /* --- Guide (/guide/{slug}) ------------------------------------------- */

  /* Un <details> chiuso, su carta, e' contenuto perso: le FAQ e l'indice si
     stampano aperti. La regola deve toccare i figli, non il <details>: non
     esiste un modo in CSS di "aprire" l'elemento. */
  .stampa-documento details > *:not(summary) {
    display: block !important;
  }

  /* Il corpo dell'articolo su A4: interlinea piu' stretta e titoli piu'
     piccoli, altrimenti una guida da 1500 parole esce su otto fogli. */
  .articolo-corpo {
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .articolo-corpo h2 {
    font-size: 14pt;
    margin-top: 7mm;
    padding-top: 3mm;
    break-after: avoid;
    page-break-after: avoid;
  }

  .articolo-corpo h3 {
    font-size: 11.5pt;
    margin-top: 5mm;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Un grafico spezzato a meta' fra due fogli non si legge piu'. */
  .articolo-corpo figure,
  .articolo-corpo .articolo-figura,
  .articolo-corpo .articolo-tabella,
  .articolo-corpo .articolo-nota,
  .articolo-corpo .articolo-attenzione,
  .articolo-corpo .articolo-chiave,
  .articolo-corpo .articolo-numero {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* .articolo-numeri e' una griglia: la regola generale la appiattirebbe in
     colonna e sprecherebbe mezzo foglio per quattro cifre. Qui resta griglia. */
  .stampa-documento .articolo-numeri {
    display: grid !important;
  }

  .stampa-documento .articolo-numeri > * {
    margin-bottom: 0;
  }

  /* I fondi dei riquadri di richiamo sono l'unica cosa che su carta distingue
     un avvertimento da un paragrafo qualsiasi: si stampano. */
  .articolo-corpo .articolo-nota {
    background: #eff6ff !important;
  }

  .articolo-corpo .articolo-attenzione {
    background: #fffbeb !important;
  }

  .articolo-corpo .articolo-chiave {
    background: #f5f3ff !important;
  }
}

/* ------------------------------------------------------------------
   Segnalibro "salva annuncio" (partial _SalvaAsta.cshtml).
   Sulle schede sta in alto a SINISTRA: l'angolo destro e' gia' occupato
   dal punteggio AI e il bordo basso dalla categoria.
   ------------------------------------------------------------------ */
.salva-asta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  color: #334155;
  background: rgba(255, 255, 255, 0.92);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.salva-asta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.salva-asta:hover {
  color: #2563eb;
  background: #fff;
}

.salva-asta[aria-pressed="true"] {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.salva-asta[aria-pressed="true"] svg {
  fill: currentColor;
}

.salva-asta[aria-pressed="true"]:hover {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.salva-asta--card {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.salva-asta--card:hover {
  transform: translateY(-1px);
}

.salva-asta--esteso {
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.salva-asta--esteso[aria-pressed="true"] {
  border-color: transparent;
}

/* =========================================================================
   Segnala un problema sull'annuncio
   Il pulsante sta accanto a "Salva" e ne riusa la forma, ma resta di sola icona: e' un'azione
   di servizio, non una da promuovere, e una seconda scritta li' accanto ruberebbe attenzione
   al "Salva" che invece vogliamo far premere. La parola compare al passaggio del mouse.
   ========================================================================= */
.segnala-asta {
  position: relative;
  padding: 10px 12px;
}

.segnala-asta:hover {
  color: #dc2626;
}

.segnala-asta::after {
  content: "Segnala";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.segnala-asta:hover::after,
.segnala-asta:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Honeypot: spostato fuori campo invece che display:none, perche' i bot piu' recenti saltano
   i campi nascosti in quel modo e compilerebbero solo quelli veri. */
.segnala-esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.segnala-modale {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.segnala-modale[hidden] {
  display: none;
}

.segnala-modale__velo {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.segnala-modale__pannello {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
}

.segnala-modale__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.segnala-modale__x:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.segnala-modale__x svg {
  width: 18px;
  height: 18px;
}

/* =========================================================================
   CONDIVISIONE DELLA SCHEDA ANNUNCIO (_CondividiAsta.cshtml)
   -------------------------------------------------------------------------
   Deliberatamente sobria: non e' una chiamata all'azione che compete con
   "Salva" o con la richiesta di informazioni. Chi condivide lo fa perche' ha
   gia' deciso di far vedere la casa a qualcuno, non perche' un pulsante grande
   glielo ha chiesto.
   ========================================================================= */

.condividi-asta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.condividi-asta__etichetta {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.condividi-asta__pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.condividi-asta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.condividi-asta__btn:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.condividi-asta__btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.condividi-asta__btn--whatsapp:hover {
  border-color: #86efac;
  color: #15803d;
}

/* Il pulsante nativo lo aggiunge condividi.js solo dove navigator.share esiste,
   cioe' quasi solo su telefono: li' e' il gesto che la persona conosce gia'. */
.condividi-asta__btn--nativo {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.condividi-asta__btn--nativo:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

@media (max-width: 640px) {
  .condividi-asta__pulsanti {
    margin-left: 0;
    width: 100%;
  }

  .condividi-asta__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media print {
  /* Su carta un pulsante di condivisione non serve a niente. */
  .condividi-asta {
    display: none !important;
  }
}

/* =========================================================================
   PAGINA PREZZI (/prezzi)
   -------------------------------------------------------------------------
   Stessi fondi del resto del sito (bianco e slate-50 alternati, hero cyber in
   cima, chiusura viola): il 2026-08-24 la pagina era stata fatta tutta scura e
   sembrava un sito diverso appiccicato dentro questo. Il "carattere" non lo da'
   il fondo nero, lo danno i colori dei prezzi, gli aloni e le card.

   Come funzionano i colori: ogni card dichiara le proprie tinte (una classe per
   livello di piano, .prz-l0 … .prz-l3) e tutto quello che sta dentro le legge.
   E' l'unico modo per avere quattro colori diversi senza scrivere in Razor
   classi tipo hover:bg-@t.Sfondo, che Tailwind non genera mai: lo scanner legge
   il testo del file, non il risultato dell'interpolazione.
     --acc   tinta chiara, per bordi, aloni e sfondi tenui
     --accd  tinta scura, per testo e bottoni: deve restare leggibile sul bianco
     --accd2 seconda tinta scura, chiude i gradienti
   ========================================================================= */

.prz-band {
  position: relative;
  overflow: hidden;
}

/* Griglia tecnica di fondo, appena accennata: su fondo chiaro basta pochissimo
   perche' si veda, e sopra ci passa del testo che si deve leggere. */
.prz-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 100%);
}

/* Aloni colorati: due per fascia, mai piu'. Su fondo chiaro vanno tenuti bassi,
   altrimenti diventano una macchia e il testo perde contrasto. */
.prz-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.5;
}

.prz-orb--viola {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 70%);
}

.prz-orb--ciano {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.18), transparent 70%);
}

.prz-orb--ambra {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18), transparent 70%);
}

/* Titoli di sezione */
.prz-h2 {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.prz-occhiello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prz-occhiello::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  animation: prz-battito 2.4s ease-in-out infinite;
}

@keyframes prz-battito {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* --- Interruttore mensile / annuale ------------------------------------- */

.prz-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.prz-seg button {
  position: relative;
  padding: 9px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.prz-seg button:hover {
  color: #0f172a;
}

.prz-seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.prz-seg-sconto {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #047857;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.prz-seg button[aria-pressed="true"] .prz-seg-sconto {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* --- Card di piano ------------------------------------------------------- */

.prz-card {
  --acc: #cbd5e1;
  --accd: #475569;
  --accd2: #334155;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px 26px;
  border-radius: 26px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Il filo di luce in cima: e' quello che da' il colore al piano a colpo d'occhio. */
.prz-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--acc), var(--accd), transparent);
}

/* Velo dell'accento dietro l'intestazione della card. */
.prz-card::after {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, var(--acc), transparent 62%);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.prz-card:hover {
  transform: translateY(-6px);
  border-color: var(--acc);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.prz-card:hover::after {
  opacity: 0.6;
}

.prz-card--evidenza {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 22px 50px rgba(37, 99, 235, 0.16);
}

.prz-l0 { --acc: #6ee7b7; --accd: #059669; --accd2: #0d9488; }
.prz-l1 { --acc: #7dd3fc; --accd: #0284c7; --accd2: #0369a1; }
.prz-l2 { --acc: #fcd34d; --accd: #d97706; --accd2: #ea580c; }
.prz-l3 { --acc: #93c5fd; --accd: #1d4ed8; --accd2: #1e3a8a; }

.prz-nastro {
  position: absolute;
  top: 16px;
  right: -36px;
  transform: rotate(38deg);
  padding: 5px 42px;
  background: linear-gradient(135deg, var(--accd), var(--accd2));
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.prz-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accd) 25%, transparent);
  background: color-mix(in srgb, var(--acc) 22%, #fff);
  color: var(--accd);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prz-nome {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.prz-sintesi {
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

/* --- Il prezzo ----------------------------------------------------------- */

.prz-prezzo {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

.prz-int {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(135deg, var(--accd) 0%, var(--accd2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Centesimi e valuta in alto e in piccolo, come sui listini dei portali seri:
   il numero grande e' quello che si ricorda, il resto e' contorno. */
.prz-cent {
  display: inline-block;
  padding-top: 6px;
  white-space: nowrap;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--accd) 0%, var(--accd2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Versione neutra della stessa idea, da usare fuori dai listini: eredita colore, peso e
   famiglia dal testo che la contiene, quindi funziona dentro un bottone bianco su ambra
   come dentro un paragrafo grigio. Serve perche' .prz-cent porta con se' il gradiente del
   piano e dentro un bottone risulterebbe illeggibile. */
.eur-cent {
  font-size: 0.68em;
  font-weight: inherit;
  line-height: 1;
  vertical-align: 0.42em;
  white-space: nowrap;
}

/* ==========================================================================
   SCHEDA HERO SU TELEFONO  (prova del 2026-08-24 — BLOCCO RIMOVIBILE)
   --------------------------------------------------------------------------
   Serve al <div class="hero-ai-mini"> che sta nella hero di Views/Home/Index.cshtml.
   Sul computer quella scheda non esiste (la nasconde lg:hidden): li' ci sono gia' le due
   schede grandi .hero-ai-property. Su telefono invece non c'era niente che facesse capire
   cosa fa il sito, e questa e' la prova per rimediare.

   SE VA TOLTA: si cancella questo blocco fino alla riga di chiusura in fondo, e il <div>
   nella view. Non serve toccare nient'altro — non ci sono classi condivise con
   .hero-ai-property* apposta, cosi' cancellare qui non puo' rompere il desktop.

   Costo sul caricamento (misurato in fase di scrittura, da riverificare a sito acceso):
   una sola foto 400x280 (~28 KB) con fetchpriority="low", nessun timer JavaScript,
   nessuna rotazione: l'unica animazione e' la barra di scansione, che e' un solo
   elemento in transform/opacity, quindi lavora la GPU e non ridisegna la pagina.
   ========================================================================== */

.hero-ai-mini {
  width: 100%;
  max-width: 260px;
  margin: 34px auto 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(1, 11, 24, 0.62);
  box-shadow: 0 10px 34px rgba(1, 7, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.hero-ai-mini-label {
  margin-bottom: 8px;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #60a5fa;
}

.hero-ai-mini-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* aspect-ratio e width/height sull'<img> tengono lo spazio prima che la foto arrivi:
     senza, la hero si sposterebbe a scaricamento finito (CLS). */
  aspect-ratio: 400 / 280;
  background: rgba(59, 130, 246, 0.12);
}

.hero-ai-mini-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La barra di scansione: unico elemento animato del blocco, solo transform. */
.hero-ai-mini-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0) 0%, rgba(96, 165, 250, 0.28) 55%, rgba(96, 165, 250, 0) 100%);
  animation: heroAiMiniScan 3.2s ease-in-out infinite;
}

@keyframes heroAiMiniScan {
  0%, 100% { transform: translateY(-40%); }
  50% { transform: translateY(320%); }
}

.hero-ai-mini-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.hero-ai-mini-city {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-ai-mini-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
}

.hero-ai-mini-score-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.75);
}

.hero-ai-mini-score-value {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  /* Stessa scelta di .hero-ai-score-value: il voto e' caldo, il resto e' freddo.
     Era ciano #22d3ee. */
  color: #fb923c;
}

/* Chi ha chiesto meno animazioni al sistema operativo la vede ferma. */
@media (prefers-reduced-motion: reduce) {
  .hero-ai-mini-scan { animation: none; opacity: 0.35; }
}

/* Schermi molto stretti (iPhone SE e simili): la scheda si restringe invece di
   spingere il pulsante "Scopri le Aste IA" fuori dallo schermo. */
@media (max-width: 380px) {
  .hero-ai-mini { max-width: 220px; margin-top: 24px; }
}

/* === fine SCHEDA HERO SU TELEFONO === */

/* Bottoni che portano a un pagamento.
   Il viola e' il colore di tutto il sito, compresi i bottoni che aprono un documento o un
   pannello: se lo porta anche "Acquista", dentro la stessa sezione non si distingue piu' cosa
   costa da cosa e' gratis (era il caso della sezione documenti della scheda annuncio).
   Scelto l'arancione pieno. L'antracite, provato prima, era gia' il colore della barra scura del
   visualizzatore documenti nella stessa pagina: due cose diverse con lo stesso colore riportano
   esattamente la confusione che si voleva togliere. L'arancione qui dentro non e' usato da
   nient'altro, sta lontano dal viola delle azioni gratuite e non e' il rosso degli errori.

   IMPORTANTE, la doppia classe non e' un refuso: site.css e' caricato PRIMA di tailwind.css, e
   il reset di Tailwind contiene "[type='submit'] { background-color: transparent }", che ha la
   stessa specificita' di una classe singola e arriva dopo. Con .btn-paga scritto una volta sola
   il bottone risultava trasparente e si vedeva solo al passaggio del mouse. */
.btn-paga.btn-paga {
  background-image: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  background-color: #ea580c;
  color: #ffffff;
  border: 1px solid #ea580c;
  box-shadow: 0 10px 24px -12px rgba(234, 88, 12, 0.9);
}

.btn-paga.btn-paga:hover {
  background-image: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  background-color: #c2410c;
  border-color: #c2410c;
  color: #ffffff;
}

/* La riga piccola sotto l'etichetta ("ne hai 40 · resta sbloccato per sempre"). */
.btn-paga.btn-paga .btn-paga-nota {
  color: #ffedd5;
}

/* Seconda scelta accanto a un .btn-paga ("oppure abbonati"): stessa famiglia di colore, in
   chiaro, perche' non deve pesare quanto l'azione principale. Fondo pieno, mai trasparente. */
.btn-paga-soft.btn-paga-soft {
  background-color: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
}

.btn-paga-soft.btn-paga-soft:hover {
  background-color: #ffedd5;
  border-color: #ea580c;
  color: #9a3412;
}

/* Rende cliccabile tutta la scheda che contiene questo link, senza annidare un <a> dentro un
   altro (che non e' HTML valido e rompe la navigazione da tastiera): il link resta uno solo,
   e' quello in fondo alla scheda, e si allarga fino ai bordi con uno pseudo-elemento invisibile.
   La scheda deve avere "relative"; eventuali altri link dentro la scheda vanno messi sopra con
   "relative z-10", altrimenti finiscono coperti. */
.link-copre-scheda::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.prz-per {
  align-self: flex-end;
  padding-bottom: 6px;
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
}

/* Il prezzo del piano a pagamento unico porta due righe accanto al numero invece di una: sopra
   "IVA inclusa", sotto la durata. Sono le due domande che si fa chi legge una cifra, e la risposta
   sta attaccata alla cifra. Il verde e' lo stesso della pillola "Per sempre" del piano gratuito:
   in questa pagina il verde vuol dire "niente sorprese". */
.prz-per--doppia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-bottom: 2px;
  line-height: 1.15;
}

.prz-per-iva {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #047857;
}

.prz-riga-iva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}

.prz-pillola {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #475569;
}

.prz-pillola--verde {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

/* Rossa, e usata in un posto solo: "Un solo pagamento" sul piano a pagamento unico. Il rosso qui
   non segnala un errore, ferma l'occhio sull'unica riga che risponde alla domanda che tiene ferma
   la mano sul bottone ("e poi me lo ritrovo addebitato ogni mese?"). Se domani diventasse la
   decorazione di tre pillole diverse smetterebbe di funzionare: resta una sola. */
.prz-pillola--rossa {
  border-color: rgba(225, 29, 72, 0.4);
  background: rgba(225, 29, 72, 0.09);
  color: #be123c;
  white-space: nowrap;
}

/* La promessa del pagamento unico, su due righe. La seconda ha di proposito una grafica diversa
   dalla pillola: stesso rosso, ma piu' piccola, maiuscoletta e senza fondo, cosi' si legge come
   l'eco della prima e non come una seconda etichetta da saltare. */
.prz-promessa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
}

.prz-promessa-eco {
  padding-left: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #be123c;
}

.prz-barrato {
  color: #94a3b8;
  text-decoration: line-through;
}

/* Fascia dei bottoni. Ha un'altezza minima perche' una card ne ha due (acquisto + prova) e le
   altre uno solo: senza, il separatore e l'elenco delle funzioni partirebbero da quattro quote
   diverse e le quattro colonne sembrerebbero disallineate. Il valore e' tarato sulla card piu' alta
   (50px + 12 + 50px + 12 + due righe di nota) con un margine per quando la nota va a tre righe.
   Solo da md in su: sotto, le card sono incolonnate e non c'e' niente da allineare. */
.prz-cta {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .prz-cta {
    min-height: 140px;
  }
}

/* La proposta della prova: una riga di testo, non un bottone. Il magenta la stacca dal rosso della
   promessa e dal viola del bottone di acquisto: e' una terza voce, la strada di chi non se la sente
   ancora di pagare, e deve leggersi come un'alternativa e non come un secondo invito. */
.prz-prova {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.prz-prova-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: #0369a1;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.prz-prova-link:hover {
  color: #075985;
}

/* --- Bottoni ------------------------------------------------------------- */

.prz-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accd), var(--accd2));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accd) 28%, transparent);
}

.prz-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accd) 38%, transparent);
  color: #fff;
}

/* Riflesso che attraversa il bottone: e' l'unico movimento della sezione. */
.prz-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.prz-btn:hover::after {
  left: 120%;
}

.prz-btn--fantasma {
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--accd) 30%, #fff);
  color: var(--accd);
  box-shadow: none;
}

.prz-btn--fantasma:hover {
  background: color-mix(in srgb, var(--acc) 18%, #fff);
  border-color: var(--accd);
  color: var(--accd);
  box-shadow: none;
}

.prz-nota {
  font-size: 11px;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}

/* --- Elenco di cosa c'e' dentro ------------------------------------------ */

/* Intestazione "Tutto di X, piu':" sopra le sole righe che cambiano rispetto al piano
   sotto. Senza questa riga l'elenco corto sembrerebbe un piano piu' povero, non piu' ricco. */
.prz-eredita {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #334155;
  padding-bottom: 4px;
}

.prz-eredita strong {
  color: var(--accd);
  font-weight: 700;
}

.prz-feat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
}

.prz-feat-ok {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--acc) 35%, #fff);
  border: 1px solid color-mix(in srgb, var(--accd) 22%, transparent);
  color: var(--accd);
}

.prz-feat-ok svg {
  width: 11px;
  height: 11px;
}

.prz-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

/* --- Servizi fuori abbonamento ------------------------------------------- */

.prz-svc {
  --acc: #93c5fd;
  --accd: #2563eb;
  --accd2: #0284c7;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.prz-svc:hover {
  transform: translateY(-4px);
  border-color: var(--acc);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.prz-svc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accd), transparent);
}

.prz-svc-icona {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 45%, #fff), color-mix(in srgb, var(--acc) 18%, #fff));
  border: 1px solid color-mix(in srgb, var(--accd) 20%, transparent);
  color: var(--accd);
}

.prz-svc-icona svg {
  width: 22px;
  height: 22px;
}

.prz-svc-prezzo {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accd), var(--accd2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.prz-svc-tempo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.prz-svc--v1 { --acc: #a5f3fc; --accd: #0891b2; --accd2: #2563eb; }
.prz-svc--v2 { --acc: #93c5fd; --accd: #2563eb; --accd2: #0284c7; }
.prz-svc--v3 { --acc: #fcd34d; --accd: #d97706; --accd2: #ea580c; }
.prz-svc--v4 { --acc: #6ee7b7; --accd: #059669; --accd2: #0891b2; }

/* Card crediti: unica con il fondo colorato, perche' e' l'alternativa da notare. */
.prz-crediti {
  --acc: #bfdbfe;
  --accd: #2563eb;
  --accd2: #0284c7;
  position: relative;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid #bfdbfe;
  background:
    radial-gradient(circle at 15% 0%, rgba(59, 130, 246, 0.14), transparent 55%),
    linear-gradient(160deg, #faf5ff 0%, #ffffff 60%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.prz-taglio {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid #93c5fd;
  background: #fff;
  font-size: 12px;
  color: #64748b;
}

.prz-taglio strong {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1d4ed8;
}

/* --- Tabella di confronto ------------------------------------------------ */

.prz-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.prz-tabella thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  padding: 16px 14px;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  z-index: 1;
}

.prz-tabella tbody tr:nth-child(even) {
  background: #f8fafc;
}

.prz-tabella tbody tr:hover {
  background: #f5f3ff;
}

.prz-tabella th[scope="row"] {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.prz-tabella td {
  text-align: center;
  padding: 12px 14px;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #f1f5f9;
}

.prz-tabella td.prz-vuoto {
  color: #cbd5e1;
}

.prz-col-acc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- FAQ ----------------------------------------------------------------- */

.prz-faq {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 16px 20px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.prz-faq[open] {
  border-color: #93c5fd;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.1);
}

.prz-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #0f172a;
}

.prz-faq summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 640px) {
  .prz-int {
    font-size: 52px;
  }

  .prz-nastro {
    right: -40px;
    padding: 5px 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prz-occhiello::before,
  .prz-btn::after {
    animation: none;
    transition: none;
  }

  .prz-card:hover,
  .prz-svc:hover,
  .prz-btn:hover {
    transform: none;
  }
}

/* =========================================================================
   Sondaggio a icona nella barra filtri di /annunci
   -------------------------------------------------------------------------
   Prima il blocco stava aperto sotto la barra e si prendeva mezza schermata su
   telefono. Ora e' un'icona accanto alla tendina delle regioni e il contenuto
   vive in un pannello che si apre al clic.
   ========================================================================= */

.snd-icona {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #f5f3ff;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.snd-icona:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

.snd-icona[aria-expanded="true"] {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.snd-icona svg {
  width: 18px;
  height: 18px;
}

/* Puntino: c'e' una domanda aperta. Sparisce quando si e' gia' votato. */
.snd-icona-punto {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #f43f5e;
  border: 2px solid #fff;
  animation: prz-battito 2.4s ease-in-out infinite;
}

.snd-pannello {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: 0;
  width: min(22rem, calc(100vw - 2rem));
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  padding: 4px;
}

.snd-pannello[hidden] {
  display: none;
}

.snd-pannello::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 640px) {
  .snd-pannello {
    left: auto;
    right: 0;
  }

  .snd-pannello::before {
    left: auto;
    right: 14px;
  }
}

/* ==========================================================================
   Dossier Lotto (/dossier/{id})

   Il documento che il cliente paga. Riscritto il 2026-08-28: prima era una
   pagina web lunga che, stampata, usciva in 2-4 fogli di paragrafi uno dietro
   l'altro. Adesso e' un documento con copertina, sommario e capitoli numerati,
   ognuno dei quali comincia su un foglio nuovo (.dsr-pagina).

   Tutto quello che serve al dossier sta in classi .dsr-*, non in utility
   Tailwind, per due motivi concreti:
   - la regola di stampa che appiattisce le griglie (.stampa-documento .grid)
     distruggerebbe la fascia dei numeri e la griglia delle foto: non usando
     .grid il problema non si pone;
   - le misure di un documento da stampare si ragionano in mm e pt, non in
     rem, e vanno lette tutte insieme in un posto solo.
   ========================================================================== */

.dsr-documento {
  color: #0f172a;
}

/* --- copertina ------------------------------------------------------- */

/* La copertina porta quattro cose e basta: che documento e', di che lotto parla, dove
   si trova, quando e' stato preparato. Niente righe viola qui dentro: l'unico viola del
   documento e' quello dell'intestazione e del piede che si ripetono su ogni foglio, e
   una terza riga viola in mezzo alla copertina li faceva sembrare tre cose diverse. */

.dsr-copertina {
  padding: 3rem 0 2rem;
}

.dsr-cop-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #60a5fa;
}

/* Una riga sola: "Dossier" e "Lotto" spezzati su due righe facevano leggere due parole
   staccate invece del nome del documento. A 4.4rem la riga intera sta dentro la colonna
   anche in stampa. */
.dsr-cop-titolone {
  margin: 1.5rem 0 0;
  font-size: 4.4rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0f172a;
  white-space: nowrap;
}

/* Il riferimento del lotto sotto il titolo: su una vendita a piu' lotti e' il dato che
   distingue questo documento da quello del lotto accanto. */
.dsr-cop-rif {
  margin: 0.6rem 0 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2563eb;
}

.dsr-cop-figura {
  margin: 2.5rem 0 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #f5f3ff;
}

.dsr-cop-figura img {
  display: block;
  width: 100%;
  height: auto;
}

.dsr-cop-lotto {
  margin-top: 2.5rem;
  padding-left: 1.1rem;
  border-left: 4px solid #bfdbfe;
}

.dsr-cop-nome {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}

.dsr-cop-dove {
  margin: 0.45rem 0 0;
  font-size: 1rem;
  color: #475569;
}

.dsr-cop-pie {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: #94a3b8;
}

.dsr-cop-pie p {
  margin: 0.2rem 0 0;
}

.dsr-titolone {
  margin: 1.25rem 0 0;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dsr-sottotitolo {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  color: #475569;
}

.dsr-riferimenti {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* --- la fascia dei quattro numeri ------------------------------------ */

.dsr-fascia-numeri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
}

.dsr-numero {
  padding: 1.15rem 1.25rem;
  border-right: 1px solid #e2e8f0;
}

.dsr-numero:last-child {
  border-right: 0;
}

.dsr-numero-voto {
  background: linear-gradient(135deg, #f5f3ff 0%, #dbeafe 100%);
}

.dsr-numero-eti {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dsr-numero-val {
  margin: 0.3rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.dsr-numero-sotto {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: #64748b;
}

.dsr-sconto {
  color: #047857;
  font-weight: 700;
}

.dsr-urgente {
  color: #e11d48;
  font-weight: 700;
}

.dsr-voto-grande {
  margin: 0.15rem 0 0;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

.dsr-voto-grande span {
  font-size: 1rem;
  font-weight: 600;
  color: #60a5fa;
}

.dsr-occhiello {
  margin: 1.5rem 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #334155;
}

/* --- avvisi ---------------------------------------------------------- */

.dsr-avviso {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #fde68a;
  border-radius: 1rem;
  background: #fffbeb;
  font-size: 0.87rem;
  line-height: 1.6;
  color: #78350f;
}

.dsr-avviso strong {
  color: #78350f;
}

.dsr-avviso-magro {
  border-color: #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}

.dsr-avviso-magro strong {
  color: #7f1d1d;
}

.dsr-avviso-parziale {
  margin-top: 1.25rem;
  font-size: 0.82rem;
}

/* --- sommario -------------------------------------------------------- */

.dsr-sommario {
  margin-top: 1.75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
}

.dsr-sommario-tit {
  margin: 0 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.dsr-sommario-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsr-sommario-lista li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.42rem 0;
  border-top: 1px solid #e9edf3;
}

.dsr-sommario-lista li:first-child {
  border-top: 0;
}

.dsr-sommario-num {
  flex: none;
  width: 1.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #60a5fa;
  font-variant-numeric: tabular-nums;
}

.dsr-sommario-testo strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.dsr-sommario-testo span {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
}

/* Il sommario su un foglio suo: righe piu' alte e numeri piu' grandi, perche' qui non
   deve stare stretto in fondo alla copertina. */
.dsr-sommario-pagina {
  margin-top: 1.5rem;
}

.dsr-sommario-pagina li {
  padding: 0.85rem 0;
}

.dsr-sommario-pagina .dsr-sommario-num {
  width: 2.2rem;
  font-size: 1.05rem;
  color: #93c5fd;
}

.dsr-sommario-pagina .dsr-sommario-testo strong {
  font-size: 1.05rem;
}

.dsr-sommario-pagina .dsr-sommario-testo span {
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* --- il preventivo dei costi ----------------------------------------- */

.dsr-ipotesi {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #bfdbfe;
  background: #faf5ff;
  border-radius: 0 0.75rem 0.75rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #1e3a8a;
}

.dsr-costi {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
}

.dsr-costi td {
  padding: 0.7rem 0;
  border-top: 1px solid #e9edf3;
  vertical-align: top;
}

.dsr-costi tbody tr:first-child td {
  border-top: 0;
}

.dsr-costi-voce {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.dsr-costi-nota {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 34rem;
}

.dsr-costi-cifra {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  padding-left: 1.5rem !important;
}

.dsr-costi tfoot td {
  border-top: 2px solid #0f172a;
  padding-top: 0.9rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.dsr-costi-sintesi {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: #f5f3ff;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #1e3a8a;
}

.dsr-costi-sintesi p {
  margin: 0;
}

.dsr-conto-mio {
  width: 100%;
  margin-top: 0.75rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.dsr-conto-mio td {
  padding: 0.5rem 0;
  border-top: 1px solid #93c5fd;
  color: #1e3a8a;
}

.dsr-conto-mio td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 1.5rem;
}

.dsr-conto-mio tr:first-child td {
  border-top: 0;
}

.dsr-conto-tot td {
  border-top: 2px solid #60a5fa !important;
  font-weight: 800;
}

/* --- il prezzo contro il mercato (OMI) -------------------------------- */

/* La fascia dei numeri nasce a quattro colonne (capitolo "Il lotto in breve"). Il confronto
   con l'OMI ne ha tre - base d'asta, mercato, scostamento - e senza questa variante la quarta
   colonna restava vuota, spostando i tre numeri a sinistra come se ne mancasse uno. */
.dsr-fascia-tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dsr-numero-unita {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.dsr-numero-buono {
  background: #ecfdf5;
}

.dsr-numero-buono .dsr-numero-val {
  color: #047857;
}

.dsr-numero-attento {
  background: #fffbeb;
}

.dsr-numero-attento .dsr-numero-val {
  color: #b45309;
}

/* Il righello. Prima versione (fino al 2026-08-29): la traccia ERA la banda OMI, quindi un
   lotto sotto il minimo aveva il cursore incollato allo zero e serviva un paragrafo di scuse
   per spiegare che il disegno mentiva. Ora la traccia e' un asse piu' largo della banda (in
   Dossier.cshtml: banda + 12% di respiro per parte, e sempre comprendente il lotto), la banda
   viola e' un blocco disegnato SOPRA l'asse, e il cursore cade dove cade davvero - anche fuori
   dalla banda. Cosi' il disegno dice il vero e il testo sotto commenta invece di giustificare. */
.dsr-omi-righello {
  margin-top: 1.8rem;
}

.dsr-omi-legenda {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #64748b;
}

.dsr-omi-traccia {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin-top: 3.1rem;
}

/* La banda di mercato: il tratto dell'asse in cui i prezzi sono "normali". */
.dsr-omi-banda {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #bfdbfe 0%, #60a5fa 50%, #bfdbfe 100%);
}

/* Il valore medio: un trattino chiaro dentro la banda, non un'etichetta in piu'. */
.dsr-omi-tacca {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #ffffff;
  opacity: 0.85;
}

.dsr-omi-cursore {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 26px;
  margin-left: -2px;
  border-radius: 2px;
  background: #172554;
  box-shadow: 0 0 0 2px #ffffff;
}

.dsr-omi-bolla {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  background: #172554;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

/* Agli estremi del righello la bolla centrata sul cursore uscirebbe dal foglio e verrebbe
   tagliata: quando il cursore e' a filo si ancora al bordo invece che al centro. */
.dsr-omi-cursore-inizio .dsr-omi-bolla {
  left: 0;
  transform: none;
}

.dsr-omi-cursore-fine .dsr-omi-bolla {
  left: auto;
  right: 0;
  transform: none;
}

/* Le etichette non sono piu' "primo / centro / ultimo" in flex: ognuna e' posizionata sul
   punto dell'asse che descrive, altrimenti il numero e la tacca a cui si riferisce non
   stanno sulla stessa verticale. */
.dsr-omi-scala {
  position: relative;
  height: 2.6rem;
  margin-top: 0.55rem;
}

.dsr-omi-eti {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: block;
  white-space: nowrap;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.dsr-omi-eti em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
}

.dsr-omi-eti-inizio {
  transform: none;
  text-align: left;
  left: 0 !important;
}

.dsr-omi-eti-fine {
  transform: none;
  text-align: right;
  left: auto !important;
  right: 0;
}

.dsr-omi-lettura {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid #60a5fa;
  background: #faf5ff;
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #3f3f46;
}

.dsr-omi-lettura strong {
  color: #1e3a8a;
}

/* --- testata di ogni capitolo ---------------------------------------- */

.dsr-pagina {
  padding: 2.5rem 0;
  border-top: 1px solid #e2e8f0;
}

.dsr-testata-cap {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-bottom: 0.9rem;
  /* Grigia, non viola: il viola nel dossier vuol dire "intestazione o piede di iAste.it",
     e una riga viola anche sotto ogni titolo di capitolo faceva sembrare che la pagina
     ricominciasse da capo a meta' foglio. */
  border-bottom: 2px solid #e2e8f0;
}

/* Il numero e' l'unico segnale di "a che punto sono" in un documento di quindici
   pagine: grande e leggibile a colpo d'occhio. Il margine negativo in alto lo
   allinea otticamente al titolo, che ha un corpo molto piu' piccolo. */
.dsr-cap-num {
  flex: none;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 0.85;
  margin-top: -0.35rem;
  color: #60a5fa;
  font-variant-numeric: tabular-nums;
}

.dsr-cap-tit {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.dsr-cap-occhio {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #64748b;
  max-width: 46rem;
}

.dsr-sottotitolo-cap {
  margin: 2rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.dsr-testo {
  margin: 1.25rem 0 0;
  line-height: 1.7;
  color: #334155;
}

.dsr-nota {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

.dsr-nota strong {
  color: #334155;
}

.dsr-url {
  word-break: break-all;
}

/* --- foto ------------------------------------------------------------ */

.dsr-foto-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.dsr-foto {
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f1f5f9;
}

.dsr-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- schede a due colonne -------------------------------------------- */

.dsr-due-colonne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.dsr-scheda {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.35rem;
}

.dsr-scheda-tit {
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.dsr-dl {
  margin: 0;
}

.dsr-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.87rem;
}

.dsr-dl > div:last-child {
  border-bottom: 0;
}

.dsr-dl dt {
  color: #64748b;
}

.dsr-dl dd {
  margin: 0;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}

/* --- punteggio ------------------------------------------------------- */

.dsr-voto-intestazione {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
}

.dsr-voto-cerchio {
  flex: none;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 999px;
  border: 3px solid #1d4ed8;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dsr-voto-cifra {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

.dsr-voto-su {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #60a5fa;
}

.dsr-voto-spiega p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #1e3a8a;
}

.dsr-voto-scala {
  margin-top: 0.5rem !important;
  font-size: 0.82rem !important;
  color: #1e3a8a !important;
}

.dsr-voto-tabella {
  width: 100%;
  margin-top: 1.35rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.dsr-voto-tabella td {
  padding: 0.6rem 0;
  border-bottom: 1px solid #dbeafe;
  vertical-align: top;
}

.dsr-voto-tabella td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-left: 1rem;
}

.dsr-voto-base td {
  color: #94a3b8;
  font-weight: 600;
}

.dsr-voce-nome {
  display: block;
  font-weight: 700;
  color: #0f172a;
}

.dsr-voce-testo {
  display: block;
  margin-top: 0.15rem;
  line-height: 1.6;
  color: #475569;
}

.dsr-punti-piu {
  color: #047857;
}

.dsr-punti-meno {
  color: #be123c;
}

.dsr-punti-zero {
  color: #94a3b8;
}

.dsr-voto-tabella tfoot td {
  padding-top: 0.85rem;
  border-bottom: 0;
  border-top: 2px solid #93c5fd;
  font-size: 1rem;
  font-weight: 800;
  color: #1e3a8a;
}

.dsr-voto-tabella tfoot span {
  font-weight: 500;
  color: #60a5fa;
}

/* --- pro e contro ---------------------------------------------------- */

.dsr-pannello {
  border-radius: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid #e2e8f0;
}

.dsr-pannello-pro {
  border-color: #a7f3d0;
  background: #f0fdf4;
}

.dsr-pannello-contro {
  border-color: #fecdd3;
  background: #fff1f2;
}

.dsr-pannello-tit {
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dsr-pannello-pro .dsr-pannello-tit {
  color: #047857;
}

.dsr-pannello-contro .dsr-pannello-tit {
  color: #be123c;
}

.dsr-pannello ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsr-pannello li {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #334155;
}

.dsr-segno {
  flex: none;
  font-weight: 800;
}

.dsr-pannello-pro .dsr-segno {
  color: #059669;
}

.dsr-pannello-contro .dsr-segno {
  color: #e11d48;
}

/* --- capitoli della perizia ------------------------------------------ */

.dsr-capitoli {
  margin-top: 1.5rem;
}

.dsr-capitolo {
  padding: 1.1rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.dsr-capitolo:last-child {
  border-bottom: 0;
}

.dsr-capitolo-tit {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.dsr-capitolo-num {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
}

.dsr-capitolo-testo {
  margin: 0.5rem 0 0 1.4rem;
  line-height: 1.75;
  color: #334155;
}

.dsr-taciuti {
  margin-top: 1.75rem;
  padding: 1.15rem 1.35rem;
  border: 1px dashed #cbd5e1;
  border-radius: 1rem;
  background: #f8fafc;
}

.dsr-taciuti-tit {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
}

.dsr-taciuti ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.dsr-taciuti li {
  padding: 0.18rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.78rem;
  color: #475569;
}

.dsr-taciuti-nota {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #64748b;
}

/* --- blocchi rischio e spese ----------------------------------------- */

.dsr-blocchi {
  margin-top: 1.25rem;
}

.dsr-blocco {
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.85rem;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.75rem;
}

.dsr-blocco:last-child {
  margin-bottom: 0;
}

.dsr-blocco-rischio {
  border-left-color: #fb7185;
  background: #fffafa;
}

.dsr-blocco-tit {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}

.dsr-blocco p:last-child {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #334155;
}

/* --- checklist ------------------------------------------------------- */

.dsr-checklist {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.dsr-checklist li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.62rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #334155;
}

.dsr-casella {
  flex: none;
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid #94a3b8;
  border-radius: 0.25rem;
}

.dsr-promemoria {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: #faf5ff;
}

.dsr-promemoria-tit {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.dsr-promemoria p:last-child {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #1e3a8a;
}

/* --- documenti ------------------------------------------------------- */

.dsr-allegati {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.dsr-allegati li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.87rem;
}

.dsr-allegato-tipo {
  font-weight: 700;
  color: #0f172a;
}

.dsr-allegato-nome {
  color: #64748b;
  margin-left: 0.4rem;
}

.dsr-allegato-url {
  display: block;
  margin-top: 0.15rem;
  color: #1d4ed8;
  word-break: break-all;
  font-size: 0.78rem;
}

.dsr-legale {
  margin-top: 1.75rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
  font-size: 0.76rem;
  line-height: 1.65;
  color: #64748b;
}

/* --- piede di pagina del dossier (solo stampa) ----------------------- */

.dsr-piede-marchio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2mm;
}

.dsr-piede-marchio img {
  width: 7mm;
  height: 5mm;
  object-fit: contain;
}

.dsr-piede-nota {
  margin-top: 1mm;
}

/* --- schermi stretti ------------------------------------------------- */

@media (max-width: 900px) {
  .dsr-fascia-numeri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dsr-numero:nth-child(2n) {
    border-right: 0;
  }

  .dsr-numero:nth-child(-n + 2) {
    border-bottom: 1px solid #e2e8f0;
  }

  .dsr-due-colonne {
    grid-template-columns: minmax(0, 1fr);
  }

  .dsr-foto-griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dsr-titolone {
    font-size: 1.9rem;
  }
}

/* Su un telefono il righello e' largo circa 320px: tre etichette da "1.193 EUR/m2"
   centrate sul proprio punto si sovrappongono. Si rimpiccioliscono e la riga sotto
   ("minimo di mercato") sparisce: il numero resta, la didascalia la fa la legenda
   sopra la barra.

   E' un blocco a parte, e con "screen and", perche' su A4 la larghezza di stampa e'
   circa 700px: il @media (max-width: 900px) qui sopra si applica ANCHE sul foglio -
   e' per quello che il blocco print piu' sotto deve riforzare le griglie a 3 e 4
   colonne con !important. Senza "screen and", queste tre regole cancellerebbero le
   didascalie del righello anche sul PDF venduto. */
@media screen and (max-width: 900px) {
  .dsr-omi-eti {
    font-size: 0.62rem;
  }

  .dsr-omi-eti em {
    display: none;
  }

  .dsr-omi-scala {
    height: 1.4rem;
  }
}

/* ==========================================================================
   Dossier Lotto - su carta

   Viene DOPO il blocco @media print generale di questo file, quindi a parita'
   di specificita' vince: e' voluto, perche' li' dentro ci sono regole che
   servono agli strumenti gratuiti ma rovinerebbero il dossier (per esempio
   l'azzeramento dei padding di ogni <section>).
   ========================================================================== */

@media print {
  /* Il numero di pagina. Si ottiene con una @page NOMINATA - "dossier" - assegnata
     al solo contenitore del documento: cosi' il numero compare qui e non su tutte
     le altre pagine stampabili del sito (calcolatore, checklist), che continuano a
     usare la @page anonima in cima al file. La riga :first toglie il numero dalla
     copertina, che e' un frontespizio e non la pagina 1 di una lettura.
     Verificato in Edge headless: counter(page)/counter(pages) e i margin box
     funzionano anche con --no-pdf-header-footer, che disattiva solo l'intestazione
     del browser, non quella dichiarata dal CSS. */
  @page dossier {
    size: A4 portrait;
    margin: 12mm 12mm 15mm;

    @bottom-right {
      content: counter(page) " di " counter(pages);
      font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
      font-size: 8pt;
      font-weight: 600;
      color: #94a3b8;
    }
  }

  @page dossier:first {
    @bottom-right { content: ""; }
  }

  .dsr-documento {
    page: dossier;
  }

  /* Fino al 2026-08-29 OGNI capitolo cominciava su un foglio nuovo. Su un dossier
     vero meta' dei capitoli e' lungo mezza pagina, quindi il documento usciva di
     diciassette fogli riempiti a meta': sembrava gonfiato, non ricco. Adesso il
     salto pagina e' una scelta esplicita (.dsr-pagina-nuova, sui capitoli che
     aprono una parte del dossier) e gli altri scorrono di seguito, separati da un
     filetto e da un po' d'aria. A far ritrovare il punto restano il numerone del
     capitolo e il numero di pagina in fondo al foglio. */
  .dsr-pagina {
    break-before: auto;
    page-break-before: auto;
    border-top: 0.5pt solid #e2e8f0 !important;
    margin-top: 8mm;
    padding-top: 5mm !important;
    padding-bottom: 0 !important;
  }

  .dsr-pagina-nuova {
    break-before: page;
    page-break-before: always;
    border-top: 0 !important;
    margin-top: 0;
    padding-top: 0 !important;
  }

  /* Righe orfane e vedove: una riga sola di paragrafo in cima o in fondo al foglio
     e' il dettaglio che fa sembrare "stampato da una pagina web" un documento. */
  .dsr-documento p,
  .dsr-documento li {
    orphans: 3;
    widows: 3;
  }

  /* Le griglie del dossier NON si appiattiscono: la fascia dei numeri a una
     colonna occuperebbe mezza pagina, e le foto una pagina l'una. */
  .dsr-fascia-numeri {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .dsr-due-colonne {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dsr-foto-griglia {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dsr-titolone {
    font-size: 26pt;
  }

  .dsr-sottotitolo {
    font-size: 11pt;
  }

  .dsr-numero-val {
    font-size: 15pt;
  }

  .dsr-voto-grande {
    font-size: 22pt;
  }

  .dsr-cap-num {
    font-size: 34pt;
    margin-top: -1mm;
  }

  .dsr-cap-tit {
    font-size: 15pt;
  }

  .dsr-occhiello {
    font-size: 10.5pt;
  }

  /* Un capitolo spezzato fra due fogli perde il filo, e la testata di un
     capitolo in fondo alla pagina e' peggio di uno spazio bianco. */
  .dsr-capitolo,
  .dsr-blocco,
  .dsr-pannello,
  .dsr-scheda,
  .dsr-foto,
  .dsr-taciuti,
  .dsr-promemoria,
  .dsr-legale,
  .dsr-avviso,
  .dsr-sommario-lista li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dsr-testata-cap,
  .dsr-sottotitolo-cap {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* I fondi tinti restano: sono quello che su carta distingue un avviso da un
     paragrafo. @page ha gia' print-color-adjust: exact. */
  .dsr-numero-voto,
  .dsr-voto-intestazione,
  .dsr-avviso,
  .dsr-sommario,
  .dsr-pannello-pro,
  .dsr-pannello-contro,
  .dsr-taciuti,
  .dsr-promemoria,
  .dsr-legale,
  .dsr-blocco-rischio {
    background-image: none !important;
  }

  .dsr-numero-voto { background-color: #f5f3ff !important; }
  .dsr-voto-intestazione { background-color: #faf5ff !important; }
  .dsr-avviso { background-color: #fffbeb !important; }
  .dsr-avviso-magro { background-color: #fef2f2 !important; }
  .dsr-sommario { background-color: #f8fafc !important; }
  .dsr-pannello-pro { background-color: #f0fdf4 !important; }
  .dsr-pannello-contro { background-color: #fff1f2 !important; }
  .dsr-taciuti { background-color: #f8fafc !important; }
  .dsr-promemoria { background-color: #faf5ff !important; }
  .dsr-legale { background-color: #f8fafc !important; }
  .dsr-blocco-rischio { background-color: #fffafa !important; }

  /* Il piede del dossier ha due righe e un logo: la regola generale lo
     centrerebbe soltanto, qui serve anche lo spazio per il marchio. */
  .dsr-piede {
    padding-top: 2.5mm;
  }

  /* L'intestazione si ripete su ogni foglio: negli strumenti gratuiti e' una riga
     sola in mezzo a poco testo e puo' permettersi il filetto viola spesso, in un
     documento di quindici pagine quella riga tornava quindici volte e rubava
     l'occhio al contenuto. Qui resta il marchio a colori, il resto arretra:
     filetto sottile grigio e titolo del documento in grigio, non in nero. */
  .dsr-documento .stampa-intestazione {
    padding-bottom: 2mm;
    margin-bottom: 5mm;
    border-bottom: 0.5pt solid #e2e8f0;
  }

  .dsr-documento .stampa-doc-titolo {
    font-size: 9.5pt;
    font-weight: 600;
    color: #94a3b8;
  }

  /* #cbd5e1 su bianco sta sotto il 2:1 di contrasto: sul PDF a schermo si leggeva
     a fatica e su carta spariva. #94a3b8 resta discreto ma esiste. */
  .dsr-documento .stampa-doc-meta {
    font-size: 7pt;
    color: #94a3b8;
  }

  .dsr-documento .stampa-nome {
    font-size: 12pt;
  }

  .dsr-documento .stampa-claim {
    color: #94a3b8;
  }

  .dsr-documento .stampa-marchio img {
    width: 13mm;
    height: 9mm;
  }

  /* La copertina occupa il primo foglio e nient'altro. Prima i quattro blocchi si
     accatastavano in alto e sotto restava un terzo di foglio bianco, che e' il
     modo piu' rapido di far sembrare un frontespizio una pagina venuta male. Ora
     il contenitore e' alto quanto il foglio (297mm meno i 12+15mm di margine) e il
     blocco del lotto ha margin-top:auto, quindi titolo e figura restano in alto,
     lotto e riferimenti si appoggiano al piede. */
  .dsr-copertina {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    break-after: page;
    page-break-after: always;
  }

  .dsr-copertina .page-shell {
    display: flex;
    flex-direction: column;
    min-height: 262mm;
  }

  .dsr-cop-titolone {
    margin-top: 6mm;
    font-size: 54pt;
  }

  .dsr-cop-rif {
    margin-top: 3mm;
    font-size: 14pt;
  }

  .dsr-cop-figura {
    margin-top: 10mm;
  }

  .dsr-cop-lotto {
    margin-top: auto;
    padding-top: 10mm;
  }

  .dsr-cop-nome {
    font-size: 15pt;
  }

  .dsr-cop-dove {
    font-size: 11pt;
  }

  .dsr-cop-pie {
    margin-top: 10mm;
  }

  .dsr-fascia-numeri {
    margin: 6mm 0 0;
  }

  .dsr-numero {
    padding: 3mm 4mm;
  }

  .dsr-occhiello {
    margin: 5mm 0 0;
  }

  /* Il sommario sta su un foglio suo: le righe possono respirare, ma non tanto
     da spingere l'ultima voce sulla pagina dopo. */
  .dsr-sommario-pagina li {
    padding: 2.6mm 0;
  }

  .dsr-sommario-pagina .dsr-sommario-testo strong {
    font-size: 11pt;
  }

  .dsr-sommario-pagina .dsr-sommario-testo span {
    font-size: 8.5pt;
  }

  /* Il preventivo: la tabella non si spezza a meta' riga, e i fondi tinti
     restano (@page ha gia' print-color-adjust: exact). */
  .dsr-costi tr,
  .dsr-conto-mio tr,
  .dsr-costi-sintesi,
  .dsr-ipotesi {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dsr-ipotesi { background-color: #faf5ff !important; }
  .dsr-costi-sintesi { background-color: #f5f3ff !important; }

  /* Il righello OMI: la bolla del cursore sta sopra la barra, quindi il blocco va
     tenuto intero - spezzato fra due fogli il numero finirebbe su una pagina e la
     barra sull'altra. Le tinte di fondo delle tre caselle si dichiarano qui perche'
     il blocco print generale sbianca gli sfondi. */
  .dsr-omi-righello,
  .dsr-fascia-tre {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Va ridichiarata: la regola generale della fascia forza repeat(4) con !important
     e senza questa il confronto OMI stamperebbe una quarta colonna vuota. Vince
     perche' viene dopo, a parita' di specificita'. */
  .dsr-fascia-tre {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dsr-numero-buono { background-color: #ecfdf5 !important; }
  .dsr-numero-attento { background-color: #fffbeb !important; }
  .dsr-omi-traccia { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }
  .dsr-omi-banda { background: linear-gradient(90deg, #bfdbfe 0%, #60a5fa 50%, #bfdbfe 100%) !important; }
  .dsr-omi-tacca { background-color: #ffffff !important; }
  .dsr-omi-cursore { background-color: #172554 !important; }
  .dsr-omi-bolla { background-color: #172554 !important; color: #ffffff !important; }
  .dsr-omi-lettura { background-color: #faf5ff !important; border-left-color: #60a5fa !important; }
}

/* === SCHEDE "IA ANALYZING" DENTRO LA FASCIA DEL SITO (2026-08-31) ===
   Prima il contenitore era "absolute inset-0", cioe' largo quanto la finestra, e le due schede
   stavano a left/right 5% di quella larghezza: su uno schermo da 2560px finivano a 128px dal
   bordo, lontanissime dal blocco centrale, mentre tutto il resto del sito (barra di navigazione
   e sezioni sotto) resta dentro la fascia da 80rem. Ora il contenitore e' quella stessa fascia,
   centrata, e le schede si agganciano ai suoi bordi interni con gli stessi padding della barra
   (1rem / 1.5rem / 2rem): la scheda di sinistra parte dove parte il logo, quella di destra
   finisce dove finisce il bottone "Inizia gratis".
   Per tornare indietro: cancellare questo blocco (le regole vecchie left/right: 5% sono ancora
   al loro posto piu' su e tornano valide da sole). */
#property-cards-container {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: 80rem;
  transform: translateX(-50%);
}

.hero-ai-property--left { left: 1rem; }
.hero-ai-property--right { right: 1rem; }

@media (min-width: 640px) {
  .hero-ai-property--left { left: 1.5rem; }
  .hero-ai-property--right { right: 1.5rem; }
}

@media (min-width: 1024px) {
  .hero-ai-property--left { left: 2rem; }
  .hero-ai-property--right { right: 2rem; }
}

/* --------------------------------------------------------------------------
   2026-09-01 — Le schede non stanno piu' dietro al titolo.
   Il titolo nuovo ("COMPRA ALL'ASTA", 15 caratteri) e' largo 891px a 96px e
   667px a 72px, mentre lo spazio fra le due schede era fisso a 656px a
   qualunque larghezza di schermo: il testo finiva sopra le foto.
   Due correzioni, misurate:
   1) da 1280px in su il contenitore delle schede non si ferma piu' a 80rem ma
      segue lo schermo fino a 112rem, quindi le schede si allargano insieme alla
      finestra (spazio libero: 656px a 1280, 752px a 1440, 1012px a 1700, 1168px
      a 1920) invece di restare incollate al centro;
   2) il corpo massimo del titolo (96px) entra solo oltre i 1700px, dove lo
      spazio libero e' abbastanza; sotto resta a 72px.
   Sotto i 1280px le due schede grandi non compaiono affatto (hidden xl:block in
   Index.cshtml): li' lo spazio libero sarebbe stato 400px, meno della meta' del
   titolo, e nessuna misura di carattere leggibile ci sarebbe entrata. Al loro
   posto resta la scheda singola .hero-ai-mini, che ora arriva fino a 1280.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #property-cards-container {
    max-width: max(80rem, min(112rem, 100vw - 4rem));
  }
}

/* h1./p. davanti al nome della classe: site.css e' caricato PRIMA di tailwind.css,
   quindi a parita' di specificita' vincerebbe l'utility lg:text-7xl. Le classi
   hero-home-* stanno solo sulla home: le altre pagine usano .hero-compact e non
   devono ereditare queste misure. */
/* 1280px e' la larghezza in cui le schede compaiono ma lo spazio libero e' ancora
   641px: a 72px il titolo ne misura 668 e le sconfinava di 13px per lato. Fino a
   1440 resta quindi a 60px (557px, 42px di margine per lato), poi cresce. */
@media (min-width: 1440px) {
  h1.hero-home-title { font-size: 4.5rem; }
}

@media (min-width: 1700px) {
  h1.hero-home-title { font-size: 6rem; }
  p.hero-home-subtitle { font-size: 1.875rem; line-height: 2.25rem; }
}

/* ==========================================================================
   Tendine: la freccia
   2026-08-31 — i select del modulo "Completa il tuo profilo" hanno
   appearance-none (serve a togliere lo stile di sistema, diverso su ogni
   browser) ma nessuno gli rimetteva la freccia: risultato, tre caselle che
   sembravano campi di testo e non si capiva che erano da aprire. Questa
   classe rimette il chevron come immagine di sfondo e riserva lo spazio a
   destra perche' il testo non ci finisca sotto.
   ========================================================================== */
.select-freccia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
}

/* ==========================================================================
   Contatto a pagina di calendario (scheda annuncio, 2026-09-03)
   Il bottone "Richiedi informazioni" non deve restare in pagina sopra i due
   contatti che ha appena scoperto: ha finito il suo lavoro e occupa spazio.
   Al click si stacca all'indietro come la pagina di un calendario da muro,
   ruotando attorno al bordo superiore, e sotto scende la "pagina" successiva
   con WhatsApp e Chiama — nello stesso identico riquadro, quindi la colonna
   non si allunga e niente si sposta sotto.
   Niente JS: apre un checkbox nascosto. Con <details> non si poteva, perche'
   il <summary> resta sempre in flusso e da' l'altezza al blocco.
   ========================================================================== */
.contatti-blocco { position: relative; }

/* Fuori vista ma ancora raggiungibile da tastiera: e' lui a prendere il fuoco
   e a rispondere alla barra spaziatrice. display:none lo escluderebbe. */
.contatti-interruttore {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 3rem = h-12, l'altezza che aveva il bottone: le due facce si sovrappongono
   qui dentro, quindi il blocco misura sempre uguale, aperto o chiuso. */
.contatti-scena {
  position: relative;
  height: 3rem;
  perspective: 900px;
}

.contatti-fronte,
.contatti-retro {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  backface-visibility: hidden;
}

.contatti-fronte {
  cursor: pointer;
  user-select: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .25s ease .1s;
}

/* La pagina che sta sotto parte gia' piegata all'indietro e scende in posizione
   quando quella davanti se n'e' andata (il ritardo e' la meta' del giro). */
.contatti-retro {
  transform: rotateX(-90deg);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1) .18s, opacity .25s ease .18s;
}

.contatti-retro > a { height: 100%; }

.contatti-interruttore:checked ~ .contatti-scena .contatti-fronte {
  transform: rotateX(-115deg);
  opacity: 0;
  pointer-events: none;
}

.contatti-interruttore:checked ~ .contatti-scena .contatti-retro {
  transform: rotateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Il fuoco e' sull'input invisibile: senza questo, chi naviga da tastiera non
   vedrebbe dove si trova. */
.contatti-interruttore:focus-visible ~ .contatti-scena .contatti-fronte {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .contatti-fronte,
  .contatti-retro { transition-duration: .01ms; transition-delay: 0s; }
}