/* ════════════════════════════════════════════════════════════
   IL CSS DI QUESTO SITO — non del framework

   Va collegato DOPO candela.min.css, ed e' l'unico posto in cui
   questo sito puo' scrivere stile. Due prefissi, e la differenza
   non e' cosmetica:

     .vt-   telaio della VETRINA — appartiene a CANDELA
     .mx-   il sito di MAXIMUS — appartiene al prodotto dimostrato

   Regole che questo foglio rispetta, perche' sono le regole del
   sistema e un consumatore che le viola dimostra il contrario di
   quel che vuole dimostrare:

   · NESSUN z-index cablato. Gli undici livelli sono token.
   · NESSUN lato fisico. `inset-inline-start`, mai `left`.
   · NESSUNA variante di componente riscritta da zero: si aggiunge
     una classe di progetto SOPRA quella del sistema.
   · Il FREDDO e' dell'interfaccia, l'ACCENT e' del prodotto. Il
     telaio della vetrina non e' il prodotto: e' freddo.
   ════════════════════════════════════════════════════════════ */

/* ── Telaio della vetrina ──────────────────────────────────── */

.vt {
  position: fixed;
  inset-block-start: var(--cd-s-4);
  inset-inline-start: var(--cd-s-4);
  z-index: var(--cd-z-nav);
}

.vt__tasto {
  display: flex;
  align-items: center;
  gap: var(--cd-s-2);
  padding: 7px 12px 7px 10px;
  border-radius: var(--cd-r-full);
  color: var(--cd-text-mid);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(var(--cd-cool-rgb), .26);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--cd-rim);
  cursor: pointer;
  transition: color var(--cd-t-fast) var(--cd-ease),
              border-color var(--cd-t-fast) var(--cd-ease),
              background var(--cd-t-fast) var(--cd-ease);
}
.vt__tasto:hover {
  color: var(--cd-text-hi);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(var(--cd-cool-rgb), .45);
}

.vt__marchio {
  color: var(--cd-cool-300);
  font-size: var(--cd-size-6);
  line-height: 1;
}

/* Due righe dentro un bottone alto 34: `line-height` stretto e
   nessun margine, o la pillola cresce e non specchia piu' quella
   vera dall'altra parte. */
.vt__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: start;
}
.vt__testo b {
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-2);
  letter-spacing: .16em;
  color: var(--cd-text-hi);
  font-weight: 400;
}
.vt__sez {
  font-size: var(--cd-size-1);
  letter-spacing: .04em;
  color: var(--cd-cool-300);
}

.vt__freccia { display: flex; opacity: .7 }

/* Il menu si apre verso il basso e verso l'INIZIO riga: in RTL si
   specchia da solo, che e' tutto il punto delle proprieta' logiche. */
.vt__menu {
  inset-inline-start: 0;
  min-width: 268px;
}
.vt__eyebrow {
  display: block;
  padding: 4px 12px 8px;
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-low);
}

/* Le voci del menu portano un `small` a destra: e' la stessa forma
   dei `__item` della pillola, e la coerenza qui conta perche' i due
   menu si vedono nello stesso schermo. */
.vt__menu .cd-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-s-4);
}
.vt__menu .cd-menu__item small {
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-1);
  color: var(--cd-text-low);
  letter-spacing: .04em;
}

/* Le sezioni non ancora costruite restano CLICCABILI e portano alla
   copertina, dove c'e' scritto cosa arrivera'. Un `disabled` vero
   toglierebbe il fuoco da tastiera senza dire niente a chi ascolta,
   e "in arrivo" e' un'informazione, non un divieto. */
.vt__voce--off { color: var(--cd-text-low) }
.vt__voce--qui {
  color: var(--cd-cool-100);
  background: rgba(var(--cd-cool-rgb), .12);
}

/* Sotto i 700 resta il marchio. A 320 la pillola a riposo con la
   lente occupa gia' meta' riga: due etichette che si toccano sono
   peggio di una che manca. */
@media (max-width: 700px) {
  .vt__testo, .vt__freccia { display: none }
  .vt__tasto { padding: 8px 10px }
}

/* ── Maximus: i pezzi che il sistema non poteva conoscere ──── */

/* IL POSTO DELLA FOTO. Nessuna foto di repertorio: su un sistema
   scuro e vetroso una stock photo lo fa sembrare un tema comprato.
   Ogni immobile porta due fermate di colore nei dati, e da quelle
   si costruisce qui il suo gradiente — `template-immobili.html` fa
   gia' cosi' su quattro schede, ma scritto inline. Qui e' un dato.

   `--a` e `--b` arrivano dallo `style` della scheda: sono le uniche
   due dichiarazioni inline che questo sito si concede, perche' sono
   DATI, non stile. */
.mx-media {
  position: relative;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, .1), transparent 60%),
    linear-gradient(140deg, var(--a, var(--cd-accent-600)), var(--b, var(--cd-cool-500)));
  isolation: isolate;
}
/* La grana anche sulla finta foto: senza, il rettangolo di gradiente
   e' l'unica superficie perfettamente liscia della pagina e si legge
   come un segnaposto. Con, si legge come un'immagine sfocata. */
.mx-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) .5px, transparent .5px);
  background-size: 3px 3px;
  opacity: .5;
  pointer-events: none;
}
.mx-media--grande { aspect-ratio: 16 / 10; border-radius: var(--cd-r-md) }
.mx-media--quadra { aspect-ratio: 1; border-radius: var(--cd-r-sm) }

/* Il riferimento catastale sulla foto: monospazio, perche' e' un
   codice e i codici si allineano. */
.mx-rif {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  padding: 3px 8px;
  border-radius: var(--cd-r-full);
  background: rgba(4, 4, 9, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-1);
  letter-spacing: .08em;
  color: var(--cd-text-mid);
}

/* SCHEDA TECNICA. Una lista di definizione vera: `dt`/`dd` sono la
   semantica giusta per "superficie: 210 m²", e chi ascolta sente la
   coppia invece di due frammenti scollegati. La griglia e' sulle
   coppie, non sulle celle, cosi' non si spezza a capo in mezzo. */
.mx-dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--cd-s-3) var(--cd-s-5);
  margin: 0;
}
.mx-dati > div {
  padding-block: 10px;
  border-block-start: 1px solid rgba(255, 255, 255, .07);
}
.mx-dati dt {
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-low);
}
/* IL SEGNO ACCANTO ALL'ETICHETTA. L'etichetta e' minuscola e in
   maiuscoletto: un segno alla sua altezza sparirebbe, uno alla sua
   dimensione naturale la sovrasterebbe. Sedici pixel e' il punto in cui
   sta accanto alla parola senza rubarle la riga, ed e' allineato al
   TESTO e non alla scatola: `align-items:center` su una riga di
   maiuscoletto lascia il segno mezzo pixel troppo in alto. */
.mx-dati dt {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.mx-segno {
  --cd-social-mono: 16px;
  flex: none;
  color: var(--cd-accent-300);
  transform: translateY(2px);
}

.mx-dati dd {
  margin: 3px 0 0;
  font-size: var(--cd-size-7);
  color: var(--cd-text-hi);
}

/* CLASSE ENERGETICA. Dieci gradini, e quello dell'immobile acceso.
   Non e' decorazione: in un annuncio italiano la classe e' un dato
   obbligatorio, e mostrarla come lettera sola nasconde quanto sia
   distante dalle altre. Il verde-giallo-rosso qui e' legittimo — e'
   una scala normata, non una tinta scelta da noi. */
/* `span` e non `div`, perche' vivono dentro un `<dd>`: la scala e' il
   modo di leggere la classe, non un'informazione che le sta accanto. */
.mx-classe { display: flex; gap: 3px; align-items: flex-end; margin-block-start: var(--cd-s-3) }
.mx-classe i {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09);
  transition: none;
}
.mx-classe i[data-on] {
  height: 20px;
  background: linear-gradient(180deg, var(--cd-accent-300), var(--cd-accent-600));
  box-shadow: var(--cd-glow-1);
}
.mx-classe-riga {
  display: flex;
  justify-content: space-between;
  margin-block-start: 6px;
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-1);
  color: var(--cd-text-low);
}

/* ── Le tre correzioni che ha trovato `audit`, e non io ────── */

/* UN COLLEGAMENTO DENTRO UN TESTO VA DISTINTO SENZA IL COLORE.
   Il sistema sottolinea gia' `p > a` — regola nata nella 12.1 dopo che
   lo stesso difetto era comparso due volte — ma il link all'informativa
   vive dentro `label.cd-choice > span`, che paragrafo non e'. Misurato:
   #aec6ff su #afb4c6 fa 1,21:1 contro i 3:1 richiesti, cioe' per chi non
   distingue quei due azzurri il link non esiste. La sottolineatura non
   dipende dal colore, ed e' la ragione per cui la regola la chiede. */
.cd-choice a,
.cd-alert a,
.mx-dati a { text-decoration: underline; text-underline-offset: 2px }

/* IL BERSAGLIO DI UN NUMERO DI TELEFONO. Dentro un `<address>` i
   recapiti sono righe di testo: alte 17 px, cioe' sotto i 24 che
   servono a un dito. Diventano blocchi con un po' d'aria propria —
   e cosi' due recapiti su righe vicine smettono anche di toccarsi,
   che e' l'altra meta' della regola. */
address a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* UN `<fieldset>` NON SI STRINGE DA SOLO. Porta di serie
   `min-inline-size: min-content`: dentro una griglia stretta si rifiuta
   di scendere sotto la larghezza del suo figlio piu' largo — qui il
   segmentato, che per costruzione non va a capo — e sborda dal viewport
   trascinandosi dietro tutto quel che contiene. Ventidue pixel a 320,
   e li portava con se' anche a label e campi. E' l'unica regola di
   questo foglio che corregge un default del browser invece che
   aggiungere qualcosa. */
fieldset { min-inline-size: 0 }

/* La colonna dei passi accanto al modulo. Era una `cd-grid` con
   `grid-column: span 2` sul form: a 320 px la griglia ha UNA colonna
   sola, e lo `span 2` se ne inventava una seconda fuori schermo. Una
   griglia esplicita che collassa a una colonna non puo' farlo. */
.mx-form {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--cd-s-7);
  align-items: start;
}
@media (max-width: 900px) {
  .mx-form { grid-template-columns: minmax(0, 1fr) }
}

/* La mappa e il video arrivano da terzi e non partono senza consenso:
   il framework mette il segnaposto `.cd-gate`, a noi tocca solo dirgli
   quanto spazio occupare, o la pagina salta quando il consenso arriva. */
.mx-mappa { aspect-ratio: 16 / 9; border-radius: var(--cd-r-md); overflow: hidden }
.mx-mappa iframe { width: 100%; height: 100%; border: 0; display: block }

/* Colonna del dettaglio: il contenuto a sinistra, la colonna del
   contatto appiccicata mentre si scorre. Sotto i 900 torna una colonna
   sola e il `position:sticky` si spegne — un pannello appiccicato alto
   quanto lo schermo, su un telefono, e' un pannello che copre tutto. */
.mx-dettaglio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--cd-s-6);
  align-items: start;
}
.mx-lato { position: sticky; top: var(--cd-s-6) }
@media (max-width: 900px) {
  .mx-dettaglio { grid-template-columns: minmax(0, 1fr) }
  .mx-lato { position: static }
}

/* Il calcolo della rata: quattro numeri che cambiano insieme. In
   monospazio perche' cambiano cifra a cifra e in proporzionale
   ballerebbero. */
.mx-rata {
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-12);
  color: var(--cd-accent-300);
  letter-spacing: -.02em;
}

/* Il timbro "fatto con CANDELA" in fondo a ogni pagina della vetrina.
   Freddo, come tutto il telaio. */
.vt-timbro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-s-2);
  margin-block-start: var(--cd-s-7);
  padding-block: var(--cd-s-5);
  border-block-start: 1px solid rgba(var(--cd-cool-rgb), .16);
  font-family: var(--cd-f-mono);
  font-size: var(--cd-size-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-low);
}
.vt-timbro b { color: var(--cd-cool-300); font-weight: 400 }

/* IL SELETTORE SOLO DOVE HA UN SENSO.
   Il menu di Maximus e' uno e sta su tutte le pagine; il catalogo sta
   solo in galleria. Un selettore di viste dove non c'e' niente da
   alternare e' un comando che promette e non fa.

   La regola sta QUI e non nel framework, e la differenza conta: il
   framework offre il selettore a chi lo chiede con data-cd-modi e non
   ha titolo per decidere che senza un .cd-catalogo quel comando sia
   inutile — potrebbe alternare tutt'altro. Messa la' aveva gia' fatto
   danno: nascondeva il selettore anche in navpill.html, che e' la
   pagina che documenta la pillola, e lo strumento se n'e' accorto
   trovandolo largo zero. Chi mette il selettore su ogni pagina e' il
   sito, e tocca al sito dire dove serve. */
body:not(:has(.cd-catalogo)) .cd-navpill__modo { display: none }