/* Hallmark · v3 (24/09/2026, sera) · dentro il sistema di style.css (Photographic 08 · N5 · Ft5)
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * ==========================================================================
 * Lincoln 35 · AV Hospitality — aggiunte della v3 (agente C, 24/09/2026)
 * Si carica DOPO style.css in tutte le pagine. style.css e sito.js non si
 * toccano (li corregge un altro agente per Safari): qui solo componenti
 * nuovi e varianti, con i token e la curva della v2.
 *
 *   1 · Token in più (tinte derivate dai colori della v2)
 *   2 · Testata in co-branding: Lincoln 35 | Danesi Immobiliare
 *   3 · Bottone lungo («Richiedi informazioni a Danesi Immobiliare»)
 *   4 · Blocco di contatto (un pannello, un bottone, una riga di recapiti)
 *   5 · Piè di pagina con i due marchi e la firma di Astra
 *   6 · Pezzi comuni di testo: sottotitolo, stato, righe, didascalia
 *   7 · Home: cinque righe che si accendono, programma con la foto D01
 *   8 · Landing: prezzi nell'apertura, cornice di lato, tabella dei piani,
 *       galleria senza testa, etichette del luogo, ruoli
 *
 * Fonti: transitions-dev (tempi e curve, 05 dropdown per i colori della
 * testata, 24 learn more), aceternity Background Gradient Animation (la luce
 * sotto il vetro del contatto, portata in CSS), component-gallery (header,
 * footer, button: stati e bersagli ≥ 44 px), originkit scroll-text-highlight
 * (già in style.css, qui applicato riga per riga).
 * ========================================================================== */

/* ==========================================================================
   1 · TOKEN IN PIÙ
   ========================================================================== */
:root {
  --lampone-22: rgba(200, 50, 95, .22);
  --lampone-10: rgba(200, 50, 95, .1);
  --acqua-30: rgba(143, 211, 209, .3);
  --levante-90: rgba(23, 58, 76, .9);
  --testo-30: rgba(48, 42, 36, .3);
  --avorio-35: rgba(252, 248, 239, .35);
  /* Tinta dei pannelli di vetro sopra le immagini: più piena della v2 (.38),
     così il testo resta leggibile anche dove la sfocatura non arriva
     (WebKit senza backdrop-filter, schermi touch) */
  --vetro-scuro-tinta-piena: rgba(11, 46, 63, .6);
}

.cornice__pannello,
.prezzi,
.scena .pannello { background: var(--vetro-scuro), var(--vetro-scuro-tinta-piena); }

/* ==========================================================================
   2 · TESTATA IN CO-BRANDING — «fai tipo gli sponsor» (Andrea, 24/09 sera)
   Marchio Lincoln 35 · filo sottile · marchio Danesi Immobiliare. Bianco sul
   media, a colori sul vetro chiaro (stessa dissolvenza del marchio Lincoln).
   --co-h è l'altezza VISIBILE del segno Danesi: il PNG bianco (352 × 89) ha
   il disegno quasi a filo (346 × 83), il PNG a colori (230 × 60) ha margini
   trasparenti larghi (disegno 126 × 40 a partire da 49, 10): si ingrandisce
   di 1,5 e si sposta a sinistra di 49/40 dell'altezza visibile.
   ========================================================================== */
.testata .marchio { margin-right: 0; }

.co-marchio {
  --co-h: 25px;
  --co-spazio: clamp(1rem, 2vw, 1.75rem);
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  height: 37px;
  margin-right: auto;
  padding-left: var(--co-spazio);
  border-left: 1px solid var(--avorio-35);
  transition: border-color var(--duration-medium) var(--ease-smooth-out);
}
.co-marchio img {
  display: block;
  width: auto;
  max-width: none;
  transition: opacity var(--duration-medium) var(--ease-smooth-out);
}
.co-marchio__bianco { height: calc(var(--co-h) * 1.0723); }
.co-marchio__colore {
  position: absolute;
  top: 50%;
  left: calc(var(--co-spazio) - var(--co-h) * 1.225);
  height: calc(var(--co-h) * 1.5);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.testata.is-vetro .co-marchio,
.testata--solida .co-marchio { border-left-color: var(--testo-14); }
.testata.is-vetro .co-marchio__bianco,
.testata--solida .co-marchio__bianco { opacity: 0; }
.testata.is-vetro .co-marchio__colore,
.testata--solida .co-marchio__colore { opacity: 1; }
html.menu-aperto .co-marchio { border-left-color: var(--avorio-35); }
html.menu-aperto .co-marchio__bianco { opacity: 1; }
html.menu-aperto .co-marchio__colore { opacity: 0; }

/* Cinque voci di menu (quelle di Astra): la quinta entra a scaglione */
.menu__voce:nth-child(5) { --i: 4; }

/* Fra 1100 e 1360 px la testata porta due marchi, cinque voci, le lingue e
   WhatsApp: si stringono gli spazi, niente va a capo. */
@media (min-width: 68.75rem) and (max-width: 84.99rem) {
  .testata { gap: var(--s-4); padding-left: var(--s-4); }
  .co-marchio { --co-h: 22px; --co-spazio: var(--s-4); }
  .testata .marchio { width: 128px; height: 32px; }
  .nav__voci { gap: var(--s-4); }
  .testata .lingue { padding-left: var(--s-3); }
  .testata .lingue__voci { gap: var(--s-2); }
}

/* Telefono: i due marchi restano entrambi, più piccoli */
@media (max-width: 700px) {
  .testata .marchio { width: 124px; height: 31px; }
  .co-marchio { --co-h: 22px; --co-spazio: var(--s-4); height: 31px; }
}
@media (max-width: 380px) {
  .testata { gap: var(--s-3); padding-left: var(--s-4); }
  .testata .marchio { width: 108px; height: 27px; }
  .co-marchio { --co-h: 19px; --co-spazio: var(--s-3); height: 27px; }
}
@media (max-width: 340px) {
  .testata .marchio { width: 92px; height: 23px; }
  .co-marchio { --co-h: 16px; height: 23px; }
}

/* ==========================================================================
   3 · BOTTONE LUNGO — l'etichetta di Astra ha 42 caratteri: su schermi
   stretti va su due righe invece di uscire dal pannello
   ========================================================================== */
.bottone--lungo { max-width: 100%; }
@media (max-width: 35rem) {
  .bottone--lungo {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding-block: var(--s-3);
  }
}

/* ==========================================================================
   4 · BLOCCO DI CONTATTO — «più pulito, meno modulo» (brief v3 § 3)
   Un pannello di vetro, il marchio Danesi grande, una riga, UN bottone, una
   riga di recapiti in testo. Su notte (predefinito) o su carta
   (.contatto--carta, marchio a colori). Sotto il vetro una luce lenta di
   lampone e acqua (aceternity Background Gradient Animation, in CSS: si
   muove solo con .movimento-attivo, 18 s avanti e indietro).
   ========================================================================== */
.contatto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sezione);
  background: var(--notte);
  color: var(--avorio);
}
.contatto::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 30% 36%, var(--lampone-22), transparent 70%),
    radial-gradient(30% 38% at 72% 64%, var(--acqua-18), transparent 70%),
    radial-gradient(70% 55% at 50% 108%, var(--levante-90), transparent 72%);
}
.movimento-attivo .contatto::before {
  animation: contatto-luce 18s var(--ease-in-out) infinite alternate;
}
@keyframes contatto-luce {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
.contatto :focus-visible { outline-color: var(--acqua); }

.contatto__pannello {
  max-width: 60rem;
  margin-inline: auto;
  justify-items: center;
  gap: var(--s-5);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4.5rem);
  text-align: center;
}
.contatto__marchio {
  display: block;
  width: auto;
  height: 52px;               /* disegno visibile ≈ 48,5 px (brief: almeno 44) */
  max-width: 100%;
  margin-bottom: var(--s-2);
}
.contatto__titolo {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(2.125rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 22ch;
}
.contatto__riga {
  max-width: 54ch;
  font-size: var(--t-riga);
  line-height: 1.5;
  color: var(--avorio-85);
  text-wrap: pretty;
}
.contatto__aiuto {
  font-weight: 700;
  font-size: var(--t-piccolo);
  letter-spacing: .02em;
  color: var(--acqua);
}
.contatto__azione { display: flex; justify-content: center; width: 100%; margin-top: var(--s-2); }
.contatto__recapiti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--s-3);
  font-size: var(--t-piccolo);
}
.contatto__recapiti li { display: inline-flex; align-items: center; gap: var(--s-3); }
.contatto__recapiti li + li::before {
  content: "·";
  content: "·" / "";
  color: var(--avorio-70);
}
.contatto__recapiti a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--avorio);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--avorio-35);
  text-underline-offset: .32em;
  transition:
    text-decoration-color var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out);
}
.contatto__recapiti a:hover { color: var(--bianco); text-decoration-color: var(--acqua); }
.contatto__avvertenza {
  max-width: 62ch;
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--avorio-18);
  font-size: var(--t-nota);
  line-height: 1.55;
  color: var(--avorio-70);
}
@media (max-width: 700px) {
  .contatto__recapiti { flex-direction: column; }
  .contatto__recapiti li + li::before { content: none; }
}

/* Variante su carta: vetro chiaro, marchio a colori (SVG verticale) */
.contatto--carta { background: var(--sabbia); color: var(--testo); }
.contatto--carta::before {
  background:
    radial-gradient(34% 40% at 30% 36%, var(--lampone-10), transparent 70%),
    radial-gradient(30% 38% at 72% 64%, var(--acqua-30), transparent 70%);
}
.contatto--carta :focus-visible { outline-color: var(--lampone-vivo); }
.contatto--carta .contatto__pannello { color: var(--testo); }
.contatto--carta .contatto__riga { color: var(--testo-tenue); }
.contatto--carta .contatto__aiuto { color: var(--lampone); }
.contatto--carta .contatto__recapiti li + li::before { color: var(--testo-30); }
.contatto--carta .contatto__recapiti a { color: var(--testo); text-decoration-color: var(--testo-30); }
.contatto--carta .contatto__recapiti a:hover { color: var(--notte); text-decoration-color: var(--lampone-vivo); }
.contatto--carta .contatto__avvertenza { border-top-color: var(--testo-14); color: var(--testo-tenue); }
/* logo-danesi-completo.svg (280 × 190): disegno da y 24 a y 167, centrato.
   Alto 104 px → disegno ≈ 78 px; i margini negativi tolgono il bianco. */
.contatto__marchio--colore { height: 104px; margin: -13px 0 calc(var(--s-2) - 13px); }

/* ==========================================================================
   5 · PIÈ DI PAGINA v3 — i due marchi affiancati e la firma di Astra
   ========================================================================== */
.pie__testa {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--avorio-18);
}
@media (min-width: 56.25rem) {
  .pie__testa { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-8); }
}
.pie__marchi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.pie__testa .pie__marchio { width: 200px; height: 50px; }
.pie__danesi {
  display: block;
  width: auto;
  height: 48px;               /* disegno visibile ≈ 45 px */
  max-width: none;
  padding-left: var(--s-5);
  border-left: 1px solid var(--avorio-18);
}
.pie__firma {
  max-width: 40ch;
  font-family: var(--font-titoli);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  line-height: 1.3;
  color: var(--avorio-85);
  text-wrap: balance;
}
@media (min-width: 56.25rem) {
  .pie__firma { justify-self: end; text-align: right; }
}
.pie--v3 .pie__griglia { gap: var(--s-6); }
@media (min-width: 48rem) {
  .pie--v3 .pie__griglia { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.pie__dati { display: grid; gap: var(--s-2); color: var(--avorio-70); }
.pie__dati .pie__indirizzo { margin-top: 0; color: var(--avorio); }
.pie__ragione { font-weight: 700; color: var(--avorio); }
.pie__societari { max-width: 62ch; line-height: 1.6; }
.pie--v3 .pie__legale { margin-top: var(--s-7); }
/* Telefono: i due marchi su una riga (Danesi resta sopra i 32 px visibili) */
@media (max-width: 700px) {
  .pie__marchi { gap: var(--s-4); }
  .pie__testa .pie__marchio { width: 144px; height: 36px; }
  .pie__danesi { height: 40px; padding-left: var(--s-4); }
}
@media (max-width: 380px) {
  .pie__testa .pie__marchio { width: 124px; height: 31px; }
  .pie__danesi { height: 37px; }
}
@media (max-width: 340px) {
  .pie__danesi { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   6 · PEZZI DI TESTO COMUNI
   ========================================================================== */
/* Il sottotitolo di Astra, sotto un H1 o un H2 */
.sottotitolo {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--notte);
}
.su-media .sottotitolo,
.sezione--notte .sottotitolo,
.pannello .sottotitolo { color: var(--avorio); }

/* «Progetto in corso · Consegna a fine lavori.» con un punto che respira */
.stato {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  font-size: var(--t-piccolo);
  letter-spacing: .03em;
  color: var(--lampone);
}
.stato::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.su-media .stato,
.sezione--notte .stato,
.pannello .stato { color: var(--acqua); }
.movimento-attivo .stato::before { animation: stato-respiro 2.4s var(--ease-in-out) infinite; }
@keyframes stato-respiro {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

/* La firma della landing, sotto la riga */
.firma { font-size: var(--t-piccolo); letter-spacing: .02em; color: var(--testo-tenue); }
.su-media .firma,
.pannello .firma { color: var(--avorio-85); }

/* Righe di Astra in elenco, con un filo fra l'una e l'altra */
.righe { display: grid; gap: 0; }
.righe > li {
  padding-block: var(--s-4);
  border-top: 1px solid var(--testo-14);
  line-height: 1.5;
  text-wrap: pretty;
}
.righe > li:last-child { border-bottom: 1px solid var(--testo-14); }
.pannello .righe > li,
.sezione--notte .righe > li { border-color: var(--avorio-18); color: var(--avorio-85); }

/* Didascalia visibile accanto a una foto (Astra: non basta l'alt) */
.didascalia {
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--testo-tenue);
}
.su-media .didascalia,
.sezione--notte .didascalia,
.pannello .didascalia { color: var(--avorio-70); }

/* ==========================================================================
   7 · HOME
   ========================================================================== */
.apertura__testo .sottotitolo { max-width: 34ch; }

/* «AV Hospitality» — le cinque righe di Astra, ognuna si accende da sola
   allo scroll (la frase del manifesto della v2, applicata riga per riga) */
.cinque { background: var(--carta); }
.cinque__griglia { display: grid; gap: var(--s-7); }
@media (min-width: 56.25rem) {
  .cinque__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
  .cinque__testa .titolo-sezione { font-size: clamp(2.5rem, 4.4vw, 4.25rem); white-space: nowrap; }
  .cinque__testa { position: sticky; top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-7)); }
}
.cinque__righe { display: grid; gap: clamp(1.75rem, 3.6vw, 3.25rem); counter-reset: riga; }
.cinque__righe > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  counter-increment: riga;
}
.cinque__righe > li::before {
  content: counter(riga, decimal-leading-zero);
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  color: var(--lampone);
  font-variant-numeric: tabular-nums;
}
.frase--riga {
  max-width: 30ch;
  margin-inline: 0;
  text-align: left;
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.625rem);
  line-height: 1.16;
  text-wrap: pretty;
}

/* «Lincoln 35» — dopo la cornice sul render, la foto D01 e le righe */
.programma__griglia { display: grid; gap: var(--s-7); }
@media (min-width: 56.25rem) {
  .programma__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
}
.foto { display: grid; gap: var(--s-3); min-width: 0; }
.foto > .media { aspect-ratio: 16 / 9; border-radius: var(--r-3); }
.programma__testo { display: grid; gap: var(--s-5); min-width: 0; }

/* ==========================================================================
   8 · LANDING
   ========================================================================== */
/* Apertura: testo a sinistra, prezzi in un pannello di vetro a destra (sotto
   su telefono: stesso blocco, sempre visibile — nota di Astra) */
.apertura__due { display: grid; gap: var(--s-6); align-items: end; }
.apertura__colonna { display: grid; gap: var(--s-4); min-width: 0; }
.apertura__colonna .titolo-apertura { margin-bottom: var(--s-1); }
.apertura__colonna .riga { max-width: 56ch; }
@media (min-width: 68.75rem) {
  .apertura__due { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--s-8); }
}
.prezzi { gap: var(--s-4); padding: clamp(1.25rem, 2.6vw, 2rem); }
.prezzi__cifra {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: var(--t-prezzo);
  line-height: 1.25;
  color: var(--avorio);
  font-variant-numeric: lining-nums;
}
.prezzi__cifra + .prezzi__cifra { padding-top: var(--s-3); border-top: 1px solid var(--avorio-18); }
.prezzi__voce { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--avorio-18); }
.prezzi__etichetta {
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acqua);
}
.prezzi__voce p:not(.prezzi__etichetta),
.prezzi__fuori { font-size: var(--t-piccolo); line-height: 1.5; color: var(--avorio-85); }
.prezzi__avvertenza { font-size: var(--t-nota); line-height: 1.5; color: var(--avorio-70); }
@media (max-width: 700px) {
  .apertura--landing .apertura__testo { padding-bottom: 7rem; }
  /* il testo sta a metà della facciata chiara: velo di notte su tutta l'altezza */
  .apertura--landing > .media::after {
    background: linear-gradient(to bottom, var(--notte-45) 0%, var(--notte-72) 30%, var(--notte-72) 70%, var(--levante-90) 100%);
  }
}

/* Cornice con il pannello di lato (la foto D01 resta intera: Astra) */
@media (min-width: 701px) {
  .cornice--lato .cornice__pannello {
    left: auto;
    right: var(--margine);
    width: min(100% - 2 * var(--margine), 31rem);
  }
}
@media (max-width: 700px) {
  .movimento-attivo .cornice--lato { height: auto; }
  .cornice--lato .cornice__palco,
  .movimento-attivo .cornice--lato .cornice__palco { position: relative; height: auto; overflow: visible; animation: none; }
  .cornice--lato .cornice__media,
  .movimento-attivo .cornice--lato .cornice__media { position: relative; inset: auto; aspect-ratio: 16 / 9; clip-path: none; }
  .movimento-attivo .cornice--lato .cornice__media picture img { transform: none; }
  .movimento-attivo .cornice--lato .cornice__media .segno { opacity: 1; }
  .cornice--lato .cornice__pannello,
  .movimento-attivo .cornice--lato .cornice__pannello {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: var(--s-4) var(--margine) 0;
    opacity: 1;
    transform: none;
  }
  .cornice--lato { background: var(--notte); padding-bottom: var(--s-8); }
}
.cornice__pannello .righe > li { padding-block: var(--s-3); }

/* «Scegli il tuo piano» — la tabella dei cinque livelli e la composizione */
.piani__griglia { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) {
  .piani__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
}
.tabella--livelli th[scope="row"] {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.2;
  white-space: nowrap;
}
.tabella--livelli td { line-height: 1.5; }
.tabella--livelli td:nth-child(2) { white-space: nowrap; }
.tabella--livelli .sub { vertical-align: middle; }
.tabella--livelli tbody tr:last-child th,
.tabella--livelli tbody tr:last-child td { background: var(--lampone-10); }
.tabella--livelli .sub { white-space: nowrap; }
/* Telefono: ogni riga diventa una scheda (piano · SUB · in breve); i ruoli
   ARIA nel markup tengono la semantica di tabella anche con display: block */
@media (max-width: 700px) {
  .tabella--livelli,
  .tabella--livelli tbody,
  .tabella--livelli tr { display: block; }
  .tabella--livelli thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabella--livelli tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    padding: var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--testo-14);
  }
  .tabella--livelli th,
  .tabella--livelli td { display: block; padding: 0; border: 0; }
  .tabella--livelli th[scope="row"] { align-self: center; }
  .tabella--livelli td:nth-child(2) { align-self: center; }
  .tabella--livelli td:nth-child(3) { grid-column: 1 / -1; font-size: var(--t-piccolo); color: var(--testo-tenue); }
  .tabella--livelli tbody tr:last-child { background: var(--lampone-10); }
  .tabella--livelli tbody tr:last-child th,
  .tabella--livelli tbody tr:last-child td { background: none; }
}
.piani__composizione .righe > li { padding-block: var(--s-3); }
.piani__composizione .avvertenza { margin-top: 0; }

/* Galleria degli interni senza testa: la didascalia di Astra sta sotto */
.galleria-o--senza-testa.is-agganciata .galleria-o__cornice { grid-template-rows: minmax(0, 1fr) auto; }
.galleria-o--senza-testa .galleria-o__didascalia { margin-top: var(--s-5); }
.galleria-o--senza-testa.is-agganciata .galleria-o__didascalia { margin-top: 0; }
.galleria-o__didascalia .didascalia { max-width: 60ch; }

/* Porto Empedocle: le tre etichette di Astra */
.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.etichette > li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pillola);
  border: 1px solid var(--avorio-35);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.carta-luogo:nth-child(7) { --i: 6; }

/* «Il progetto e la vendita» — tre ruoli, il marchio Danesi nella sua card */
.ruoli { background: var(--sabbia); }
.ruoli__griglia { display: grid; gap: var(--s-4); }
@media (min-width: 56.25rem) {
  .ruoli__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); max-width: 56rem; margin-inline: auto; } /* v3 24/09: due ruoli, via D-Technology */
}
.ruolo { align-content: start; }
.ruolo p:not(.ruolo__piede) { line-height: 1.5; color: var(--testo); text-wrap: pretty; }
.ruolo__piede { font-size: var(--t-piccolo); color: var(--testo-tenue); }
.ruolo__marchio { display: block; width: auto; height: 96px; margin: -12px 0 calc(var(--s-1) - 12px) -28px; max-width: none; }

/* La seconda camera: oltre la portafinestra c'è un azzurro che sembra mare
   (vista mare = vietata). Solo in un taglio verticale 3:4 ancorato a destra,
   che parte da x ≈ 508 su 1168 e lascia fuori la finestra (x 265–385) e le
   tende: restano letto, parete e comodino. Mai a tutta larghezza, mai in
   lightbox (coordinatore, 24/09/2026 sera). */
.galleria-o__voce--34 { aspect-ratio: 3 / 4; }
.media--fuoco-destra { --fuoco: 100% 50%; }

/* Gli interni esistono solo fino a 1168 px di larghezza: nella lightbox non
   si ingrandiscono oltre (brief v3 § 2) */
.lightbox__figura img[src*="/interni/"] { max-width: min(1168px, calc(100vw - 2 * clamp(1rem, 7vw, 6.5rem))); }

/* v3 24/09 (agente H) — lightbox con una sola immagine (piante delle schede,
   facciata): sito.js mette hidden alle frecce, ma .lightbox__bottone
   { display: grid } lo scavalcava e le frecce restavano visibili. */
.lightbox__bottone[hidden] { display: none; }

/* v3 24/09 (agente H) — frase di Andrea sotto la tabella dei piani (landing) */
.piani__insieme { margin-top: var(--s-4); }

/* v3 mappa (24/09/2026): immagine statica della zona e del paese */
.foto--mappa > .media { background: #f5eee0; }
@media (max-width: 700px) { .foto--mappa > .media { aspect-ratio: 4 / 3; } }
.mappa__legenda { margin-top: var(--s-2); }

/* ===== v3.1 24/09 — rifinitura dai commenti di Andrea (spazi, blocco di contatto, ruoli) ===== */
.contatto { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.contatto__pannello { max-width: 44rem; gap: var(--s-4); padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); }
.contatto__marchio { height: 40px; margin-bottom: 0; }
.contatto__titolo { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.contatto__riga { font-size: 1rem; }
.contatto__azione { margin-top: 0; }
.contatto__recapiti { margin-top: var(--s-2); column-gap: var(--s-4); }
.contatto__recapiti a { min-height: 36px; font-weight: 500; }
.contatto__avvertenza { display: none; }
.ruoli__griglia { max-width: 52rem; gap: var(--s-4); }
.ruolo { display: grid; justify-items: center; align-content: start; gap: var(--s-3); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem); text-align: center; }
.ruolo__marchio { width: 150px; height: auto; margin: 0 auto var(--s-2); }
.ruolo .titolo-card { margin: 0; }
.ruolo p { margin: 0; max-width: 34ch; }
.ruolo__piede { font-size: var(--t-piccolo); color: var(--testo-tenue); }
.ruolo__link { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); }
.ruolo__link a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--lampone); min-height: 32px; display: inline-flex; align-items: center; }
.testa-sezione { margin-bottom: var(--s-6); }
.pie--v3 .pie__legale { margin-top: var(--s-5); }
.pie--v3 .pie__testa { justify-content: flex-start; }

/* v3.1 24/09 — Andrea: «perché il logo Danesi cambia quando si scende?» → la testata è SEMPRE
   la pillola di vetro chiaro, con i due marchi sempre a colori: niente più dissolvenza fra
   versione bianca e versione a colori (che avevano geometrie diverse e sembravano «cambiare»). */
.testata,
.testata.is-vetro {
  background: var(--vetro-chiaro);
  border-color: var(--vetro-chiaro-bordo);
  color: var(--testo);
  box-shadow: var(--ombra-morbida);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  --testata-sottolineo: var(--lampone-vivo);
}
.testata .marchio__bianco, .testata .co-marchio__bianco { opacity: 0; }
.testata .marchio__colore, .testata .co-marchio__colore { opacity: 1; }
.testata .co-marchio { border-left-color: var(--testo-14); }
.testata .apri-menu { border-color: var(--testo-14); background: transparent; }
html.menu-aperto .testata { background: transparent; border-color: transparent; box-shadow: none; color: var(--avorio); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.menu-aperto .testata .marchio__bianco, html.menu-aperto .testata .co-marchio__bianco { opacity: 1; }
html.menu-aperto .testata .marchio__colore, html.menu-aperto .testata .co-marchio__colore { opacity: 0; }
/* v3.1 24/09 — Andrea: «se premo il logo Danesi si deve aprire il sito» */
a.co-marchio { text-decoration: none; color: inherit; }
a.co-marchio:hover .co-marchio__colore, .pie__danesi-link:hover img, .contatto__marchio-link:hover img, .ruolo__marchio-link:hover img { opacity: .85; }
/* v3.1: sul passaggio del mouse la versione bianca del marchio in testata NON deve riapparire */
.testata .co-marchio__bianco, .testata .marchio__bianco { pointer-events: none; }
a.co-marchio:hover .co-marchio__bianco { opacity: 0; }
html.menu-aperto a.co-marchio:hover .co-marchio__bianco { opacity: 1; }
html.menu-aperto a.co-marchio:hover .co-marchio__colore { opacity: 0; }
.pie__danesi-link, .contatto__marchio-link, .ruolo__marchio-link { display: inline-block; line-height: 0; border-radius: var(--r-1); }
.pie__danesi-link:focus-visible, .contatto__marchio-link:focus-visible, .ruolo__marchio-link:focus-visible, a.co-marchio:focus-visible { outline: 2px solid var(--lampone-vivo); outline-offset: 4px; }
/* v3.1 24/09 — Andrea: nella card dei ruoli il logo Danesi grande, quello della home Danesi (barre sopra, nome sotto) */
.ruolo__marchio--grande { width: 220px; max-width: 100%; height: auto; margin: -0.5rem auto 0; }
/* v3.1 24/09 — Andrea: «la descrizione della foto è storta» → il segno delle aperture si allinea
   al margine del contenitore (stessa colonna del titolo) e non sta più a filo del bordo. */
.apertura > .media > .segno,
.scena > .media > .segno {
  left: max(var(--segno-bordo), calc((100% - min(100% - 2 * var(--margine), var(--larghezza))) / 2));
  bottom: clamp(1.25rem, 3vw, 2rem);
}

/* ===== v3.2 24/09 sera — revisione dal vivo con Andrea (seconda tornata) =====
   1) UNA sola scheda Danesi in tutto il sito: logo originale (dal PDF del marchio, non più
      il rifacimento a mano con le barre fuori asse), il titolo di Andrea, una riga, tre
      pulsanti (Chiama · Scrivi · Sito web). Niente più nome ripetuto tre volte, niente
      recapiti sottolineati, niente doppione «sopra e sotto» nella landing e nel progetto. */
.scheda-danesi {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-3);
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-3);
  border: 1px solid var(--testo-08);
  background: var(--carta);
  color: var(--testo);
  text-align: center;
  box-shadow: var(--ombra-morbida);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  min-width: 0;
}
.scheda-danesi__marchio-link { display: inline-block; line-height: 0; border-radius: var(--r-1); }
.scheda-danesi__marchio-link:hover img { opacity: .85; }
.scheda-danesi__marchio-link:focus-visible { outline: 2px solid var(--lampone-vivo); outline-offset: 4px; }
/* il disegno nel file 560 × 380 va da y ≈ 48 a y ≈ 335: i margini negativi tolgono il bianco */
.scheda-danesi__marchio { display: block; width: 190px; max-width: 70%; height: auto; margin: -.9rem auto -.6rem; transition: opacity var(--duration-quick) var(--ease-out); }
.scheda-danesi__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 18ch;
  color: var(--testo);
}
.scheda-danesi__riga { margin: 0; max-width: 36ch; font-size: .9375rem; line-height: 1.5; color: var(--testo-tenue); text-wrap: pretty; }
.scheda-danesi__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-1); }
.scheda-danesi__azioni .bottone { min-height: 46px; padding-inline: 1.25rem; }
.scheda-danesi__azioni .bottone--chiaro { border-color: var(--testo-14); background: var(--bianco); }
.scheda-danesi__azioni .bottone--chiaro:hover { background: var(--sabbia); border-color: var(--sabbia); }
/* nella sezione di contatto (notte) la stessa scheda, con l'ombra del vetro */
.contatto { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.contatto .scheda-danesi { box-shadow: var(--ombra-vetro); border-color: transparent; }
.contatto--apertura .scheda-danesi { width: min(100%, 42rem); }
/* «Il progetto e la vendita»: la card AV resta, con il testo centrato in altezza */
.ruoli__griglia { max-width: 58rem; align-items: stretch; }
.ruolo--av { align-content: center; gap: var(--s-2); }
.ruolo--av .titolo-card { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 500; }
@media (min-width: 56.25rem) {
  .ruoli__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* privacy: la chiusura con il logo, centrata come la scheda */
.privacy__chiusura { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.privacy__chiusura .occhiello { margin: 0; }
.privacy__chiusura .privacy__titolo { margin: 0; max-width: 20ch; text-wrap: balance; }
.privacy__chiusura .riga { margin: 0; max-width: 42ch; }
.privacy__chiusura .azioni { justify-content: center; margin-top: var(--s-1); }

/* 2) «questo coso blu si bugga con il menu, fallo più piccolo»: il pannello della cornice
      (landing) è più stretto e più basso, il titolo più piccolo, niente didascalia doppia,
      e non può più salire sotto la testata (se lo schermo è basso scorre al suo interno). */
@media (min-width: 701px) {
  .cornice--lato .cornice__pannello {
    width: min(100% - 2 * var(--margine), 27rem);
    gap: var(--s-3);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    bottom: calc(var(--segno-bordo) + 24px + var(--s-4));
    max-height: calc(var(--schermo) - var(--testata-alta) - 3 * var(--testata-bordo) - var(--segno-bordo) - 24px - var(--s-4));
    overflow: auto;
  }
}
.cornice__pannello .titolo-sezione { font-size: clamp(1.625rem, 2.8vw, 2.375rem); }
.cornice__pannello .righe > li { padding-block: var(--s-2); font-size: .9375rem; }
.cornice__pannello .azioni { margin-top: 0; }

/* 3) «la linea sopra levala, sopra la prima frase non ha senso»: in ogni elenco di righe
      il filetto sta solo FRA le righe e sotto l'ultima. */
.righe > li:first-child { border-top: 0; padding-top: 0; }

/* 4) «anche sta card è storta, troppo grande» (composizione, landing): compatta */
.piani__composizione { padding: clamp(1.25rem, 2.4vw, 1.75rem); gap: var(--s-3); }
.piani__composizione .righe > li { padding-block: var(--s-2); font-size: .9375rem; }
.piani__composizione .avvertenza { font-size: var(--t-nota); }
.piani__composizione .azioni { margin-top: 0; }

/* 5) «sto coso note è troppo grande»: gli autori delle foto appaiono solo aprendo il menu */
.nota__dettaglio { margin-top: var(--s-2); }
.nota__dettaglio > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-nota); color: var(--testo);
  text-decoration: underline; text-decoration-color: var(--testo-30); text-underline-offset: .3em;
}
.nota__dettaglio > summary::-webkit-details-marker { display: none; }
.nota__dettaglio > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-quick) var(--ease-out);
}
.nota__dettaglio[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.nota__dettaglio > summary:hover { text-decoration-color: var(--lampone-vivo); }
.nota__dettaglio > .nota__crediti { margin-top: var(--s-2); }
/* v3.2 — «la scritta Render nelle foto mettila in alto»: nelle sezioni (gallerie, foto, piante)
   il segno sta in alto a sinistra; .segno--alto era pensato per le aperture sotto la testata. */
.sezione .media > .segno { top: var(--segno-bordo); bottom: auto; }
/* card AV nei ruoli: il bottone verso l'altra pagina */
.ruolo__azioni { justify-content: center; margin-top: var(--s-1); }
/* contatti: apertura chiara, la scheda subito sotto la testata */
.contatto--carta .scheda-danesi { border-color: var(--testo-08); box-shadow: var(--ombra-morbida); }
/* v3.2 — Andrea: «inverti le note e la scheda Danesi, in tutte le pagine»: le note stanno
   prima del blocco di chiusura (scheda Danesi / ruoli); dentro <main> perdono il filetto in alto. */
main > .nota { border-top: 1px solid var(--testo-08); }
.nota + .contatto, .nota + .ruoli { border-top: 0; }
/* v3.2 — Andrea: «le note sono buggate: tutto a sinistra, e se apro gli autori si spostano» →
   niente più colonne CSS (si ribilanciano a ogni apertura del <details>): griglia a due colonne
   fissa, ogni nota resta nella sua cella. */
@media (min-width: 56.25rem) {
  .nota__righe { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); row-gap: var(--s-3); align-items: start; }
  .nota__righe > li { margin-bottom: 0; break-inside: auto; }
}
/* v3.2 — Andrea: «il coso delle note è troppo grande» → blocco più basso e più fitto */
.nota { padding-block: clamp(1.25rem, 2.2vw, 1.75rem); font-size: 12px; line-height: 1.45; }
.nota__titolo { margin-bottom: var(--s-3); font-size: .6875rem; letter-spacing: .16em; }
.nota__righe { gap: var(--s-2); }
.nota__righe > li { padding-left: 1.75rem; }
.nota__righe > li::before { width: 18px; height: 18px; font-size: 9px; top: 0; }
.nota__dettaglio { margin-top: var(--s-1); }
.nota__dettaglio > summary { min-height: 26px; font-size: 12px; }
.nota__crediti { gap: 2px; }
@media (min-width: 56.25rem) {
  .nota__righe { column-gap: var(--s-7); row-gap: var(--s-2); }
}
/* v3.2 — Andrea: «uniforma lo sfondo della card Danesi con lo sfondo del footer» → la sezione di
   contatto (home, Appartamenti) è notte piena come il piè, senza le luci colorate, e il piè che
   segue non ha stacco né spazio in più. */
.contatto:not(.contatto--carta) { background: var(--notte); }
.contatto:not(.contatto--carta)::before { display: none; }
.contatto:not(.contatto--carta) + .pie,
main:has(> .contatto:last-child) + .pie { padding-top: var(--s-6); }
.contatto:not(.contatto--carta) { padding-bottom: var(--s-6); }

/* ===== v3.3 26/09/2026 — LA FACCIATA INTERA, GIORNO/NOTTE (Andrea: «fai vedere bene la foto del
   palazzo, non tagliata, con un tasto per vederlo di notte o di giorno; e nella home il palazzo
   nuovo, i render e tutto»). L'apertura non è più un media a tutto schermo tagliato: il render sta
   intero nella sua cornice 3:2 sotto la testata, i due render sono sovrapposti e il tasto li
   scambia con una dissolvenza; il testo dell'apertura scende sotto l'immagine. ===== */
.apertura--facciata { min-height: 0; display: block; padding-top: calc(var(--testata-alta) + 2 * var(--testata-bordo) + var(--s-3)); }
.apertura--facciata > .facciata {
  position: relative; inset: auto; z-index: 0;
  width: min(100% - 2 * var(--margine), var(--larghezza)); margin: 0 auto;
  aspect-ratio: 2048 / 1360; border-radius: var(--r-3); overflow: hidden; background: var(--levante);
}
.apertura--facciata > .facciata > .segno { left: var(--segno-bordo); bottom: var(--segno-bordo); }
.apertura--facciata .apertura__testo,
.apertura--landing.apertura--facciata .apertura__testo { padding-top: var(--s-6); padding-bottom: var(--s-7); }
.facciata__vista { position: absolute; inset: 0; margin: 0; }
.facciata__vista img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facciata__vista--notte { opacity: 0; transition: opacity var(--duration-very-slow, 500ms) var(--ease-smooth-out); }
.facciata.is-notte .facciata__vista--notte { opacity: 1; }
.facciata__scelta {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3;
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pillola);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta); border: 1px solid var(--vetro-scuro-bordo);
  -webkit-backdrop-filter: var(--vetro-sfocatura); backdrop-filter: var(--vetro-sfocatura);
}
.facciata__tasto {
  min-height: 34px; padding: 0 .9rem; border: 0; border-radius: var(--r-pillola);
  background: transparent; color: var(--avorio); font: 700 .75rem var(--font-testo); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.facciata__tasto:hover { background: var(--avorio-18); }
.facciata__tasto.is-attivo { background: var(--avorio); color: var(--notte); }
.facciata__tasto:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }
/* home: titolo di Lincoln 35 sopra la galleria degli interni */
.lincoln__testa { display: grid; gap: var(--s-2); padding-top: var(--sezione); }
.lincoln__testa .riga { max-width: 48ch; }
.lincoln__testa + .galleria-o .galleria-o__cornice { padding-top: var(--s-5); }
@media (max-width: 700px) {
  .apertura--facciata { padding-top: calc(var(--testata-alta) + 2 * var(--testata-bordo)); }
  .apertura--facciata > .facciata { width: 100%; border-radius: 0; }
  .facciata__scelta { top: var(--s-2); right: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .facciata__vista--notte { transition: none; } }
/* v3.3 — nella facciata intera il testo non sta più sull'immagine: niente velo scuro sul render */
.apertura--facciata > .facciata::after,
.apertura--facciata > .facciata::before { content: none; display: none; }
.apertura--facciata > .facciata img { filter: none; }
/* v3.3 — HOME: apertura a due colonne (Andrea: «troppo grande e non da home page, fai qualcosa di
   diverso con i titoli»): a sinistra occhiello, titolo, sottotitolo, riga e bottone; a destra il
   render in una card 3:2 con il tasto Giorno/Notte. Sotto i 900 px il testo sta sopra la card. */
.apertura--split { display: block; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.apertura--split .apertura__griglia { display: grid; gap: var(--s-6); align-items: center; }
.apertura--split .apertura__testo,
.apertura--facciata.apertura--split .apertura__testo { padding: 0; }
.apertura--split .apertura__testo .titolo-apertura { font-size: clamp(2.5rem, 4.4vw, 4rem); max-width: 12ch; }
.apertura--split .facciata {
  position: relative; inset: auto; z-index: 0; width: 100%; margin: 0;
  aspect-ratio: 2048 / 1360; border-radius: var(--r-3); overflow: hidden; background: var(--levante); box-shadow: var(--ombra-vetro);
}
.apertura--split .facciata::after, .apertura--split .facciata::before { content: none; display: none; }
.apertura--split .facciata > .segno { left: var(--segno-bordo); bottom: var(--segno-bordo); }
@media (min-width: 56.25rem) {
  .apertura--split .apertura__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); min-height: calc(var(--schermo) - var(--testata-alta) - 2 * var(--testata-bordo) - var(--s-3) - clamp(2.5rem, 5vw, 4rem)); }
}
@media (max-width: 700px) { .apertura--split .facciata { border-radius: var(--r-2); } }

/* ==========================================================================
   COLLAUDO v4 · agente A · 27/09/2026 — Playwright headless (Chromium e WebKit
   26.5) a 390, 820 e 1440 px, movimento normale e ridotto, con e senza
   JavaScript, cinque lingue. Correzioni che valgono in tutte le pagine (questo
   foglio si carica ovunque, dopo style.css). Prima/dopo nella nota del vault
   «Porto Empedocle — Collaudo sito v4 su dispositivi e browser 26-09-2026».
   ========================================================================== */

/* A1 · Regola di Andrea «su touch niente backdrop-filter»: la testata v3.1 qui
   sopra la rimetteva in Contatti, Privacy e 404 (v4.css la toglie solo nella
   pagina unica). Fondo pieno come gli altri vetri su touch. Col menu aperto
   resta trasparente (html.menu-aperto .testata pesa di più). */
@media (hover: none) and (pointer: coarse) {
  .testata,
  .testata.is-vetro { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vetro-chiaro-ripiego); }
}

/* A2 · Contrasto dei segni e dei lati «Oggi / Progetto» sulle piante e sulle
   mappe: pillola notte al 45 % su fondo crema = 2,6–3,1 : 1 (serve 4,5). Sulle
   immagini chiare la pillola è piena come su touch: 5,9 : 1. */
.pianta-viva__telaio > .segno,
.confronto--pianta .segno,
.confronto--pianta .confronto__lato,
.palazzo__mappa .segno,
.foto--mappa .segno { background: var(--notte-72); }

/* A3 · 404 al telefono: il blocco di testo (a tutta larghezza, z sopra il media)
   copriva il segno «Render», che non si poteva toccare; e il velo, pensato per
   il desktop, lasciava titolo e riga sul muro chiaro (2,5–3,2 : 1). */
.apertura > .apertura__testo { pointer-events: none; }
.apertura > .apertura__testo > * { pointer-events: auto; }
@media (max-width: 700px) {
  .apertura--render > .media::after {
    background: var(--velo-alto), linear-gradient(to top, rgba(23, 58, 76, .9) 0%, rgba(23, 58, 76, .78) 48%, rgba(23, 58, 76, .5) 76%, rgba(23, 58, 76, .2) 100%);
  }
}

/* A4 · Nomi dei luoghi nel carosello: su nuvole e scogliera bianche (Scala dei
   Turchi) arrivavano a 2,4 : 1. Velo un po' più pieno sulla riga del nome e
   un'ombra morbida; la foto sotto non cambia. */
.carta-luogo__nome {
  background: linear-gradient(to bottom, rgba(11, 46, 63, .78) 0%, rgba(11, 46, 63, .5) 55%, rgba(11, 46, 63, 0) 100%);
  text-shadow: 0 1px 2px rgba(11, 46, 63, .45), 0 2px 22px rgba(11, 46, 63, .55);
}

/* A5 · Bersagli di tocco ≥ 44 px senza cambiare il disegno: i due marchi della
   testata (31 px) e «Autori e licenze» nelle note (26 px) si allargano con
   un'area invisibile. */
.testata .marchio::after,
.testata .co-marchio::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }
.nota__dettaglio > summary { min-height: 44px; margin-block: -9px; }

/* A6 · Reveal e tastiera: col Tab il fuoco arrivava su elementi ancora a
   opacità 0 (l'anello compariva nel vuoto per mezzo secondo). Se il fuoco entra,
   l'elemento è già visibile. */
.movimento-attivo [data-reveal]:not(.is-visibile):focus-within { opacity: 1; transform: none; filter: none; transition-duration: 0s; transition-delay: 0s; }

/* 27/09 19:55 (Andrea): via il menu hamburger e la pagina Contatti. La scelta della lingua sta nel piè, visibile su
   ogni schermo; su telefono la testata ha solo i due marchi. */
.pie__lingue { margin-top: var(--s-5); }
.pie__lingue .lingue { display: grid; gap: var(--s-2); padding: 0; border: 0; }
.pie__lingue .lingue__titolo { font-weight: 700; font-size: var(--t-occhiello); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.pie__lingue .lingue__voci { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pie__lingue .lingue__voce { min-width: 44px; min-height: 40px; justify-content: center; }
/* 27/09 20:00, Andrea: «nella barra metti il tasto chiama a destra, quello che si preme fisso» → su telefono la testata
   mostra il bottone «Chiama» a destra (prima era nascosto sotto i 701 px e c'era l'hamburger). */
.testata__azione { display: inline-flex; margin-left: auto; flex: 0 0 auto; }   /* a ogni larghezza (prima solo da 1100 px) */
@media (max-width: 700px) {
  /* sotto i 700 px non c'è posto per i due marchi e la scritta: il bottone resta tondo con la sola cornetta
     (aria-label «Chiama Danesi Immobiliare» resta per i lettori di schermo) */
  .testata { gap: var(--s-2); }
  .testata__azione { min-height: 38px; padding: 0 .75rem; font-size: .6875rem; letter-spacing: .06em; }
  .testata__azione svg { width: 15px; height: 15px; }
  .marchio img { max-width: 112px; height: auto; }
  .co-marchio { flex: 0 1 auto; min-width: 0; }
  .co-marchio img { max-width: 88px; height: auto; }
}

/* ==========================================================================
   SELETTORE LINGUA NELLA TESTATA (27/09/2026 20:50, Andrea: «metti anche il selettore della lingua con la
   bandierina in alto accanto al tasto chiama»). Markup da tools/i18n/lib/comune.js selettore(): <details.lingua>
   con il tasto (bandierina + codice + freccia) e il pannello a tendina con le lingue pubblicate. Tendina con la
   ricetta «menu dropdown» di transitions-dev (apertura 250 ms, chiusura 150 ms, scala .97, easing --p2).
   ========================================================================== */
:root { --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms; --dropdown-pre-scale: .97; --dropdown-closing-scale: .99; --dropdown-ease: cubic-bezier(.22, 1, .36, 1); }
.lingua { position: relative; flex: 0 0 auto; }
.testata__azione { margin-left: 0; }   /* lo spazio lo prende già il co-marchio (margin-right auto): lingua e «Chiama» stanno insieme a destra */
.lingua__tasto {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 .625rem 0 .5rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: var(--r-pillola);
  background: color-mix(in srgb, currentColor 8%, transparent); color: inherit;
  font: 700 .75rem/1 var(--font-testo); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);
}
.lingua__tasto::-webkit-details-marker { display: none; }
.lingua__tasto::marker { content: ""; }
.lingua__tasto:hover, .lingua[open] .lingua__tasto { background: color-mix(in srgb, currentColor 14%, transparent); }
.lingua__tasto:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }
.testata.is-vetro .lingua__tasto:focus-visible, .testata--solida .lingua__tasto:focus-visible { outline-color: var(--lampone-vivo); }
.lingua__freccia { width: 11px; height: 11px; flex: none; transition: transform var(--duration-quick) var(--ease-out); }
.lingua[open] .lingua__freccia { transform: rotate(180deg); }
.bandiera { display: inline-block; flex: none; width: 21px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(11, 46, 63, .14); }
.bandiera svg { display: block; width: 100%; height: 100%; }
.lingua__pannello {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2;
  min-width: 11.5rem; padding: 6px;
  border: 1px solid var(--vetro-chiaro-bordo); border-radius: var(--r-2);
  background: var(--vetro-chiaro-ripiego); color: var(--testo);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura); backdrop-filter: var(--vetro-sfocatura);
  transform-origin: top right;
}
.lingua[open] .lingua__pannello { animation: lingua-apri var(--dropdown-open-dur) var(--dropdown-ease) both; }
.lingua.is-chiusura .lingua__pannello { animation: lingua-chiudi var(--dropdown-close-dur) var(--dropdown-ease) both; pointer-events: none; }
@keyframes lingua-apri { from { opacity: 0; transform: translateY(-4px) scale(var(--dropdown-pre-scale)); } to { opacity: 1; transform: none; } }
@keyframes lingua-chiudi { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(var(--dropdown-closing-scale)); } }
.lingua__voci { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lingua .lingue__voce {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 .875rem 0 .5rem;
  border-radius: 12px; color: var(--testo); opacity: 1;
  font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.lingua .lingue__voce::after { content: none; }
.lingua .lingue__voce:hover { background: var(--testo-08); }
.lingua .lingue__voce[aria-current] { background: var(--notte); color: var(--avorio); }
.lingua .lingue__voce:focus-visible { outline: 2px solid var(--lampone-vivo); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .lingua[open] .lingua__pannello, .lingua.is-chiusura .lingua__pannello { animation: none; }
  .lingua__freccia, .lingua__tasto, .lingua .lingue__voce { transition: none; }
}
/* Telefono: solo la bandierina e la freccia (il codice non ci sta accanto ai due marchi e a «Chiama»); marchi un po' più stretti */
@media (max-width: 700px) {
  .lingua__tasto { min-height: 38px; gap: 4px; padding: 0 .375rem 0 .5rem; }
  .lingua__codice { display: none; }
  .lingua__pannello { top: calc(100% + 10px); }
  .marchio img { max-width: 100px; }
  .co-marchio { --co-spazio: .75rem; }
  .co-marchio img { max-width: 76px; }
  .testata__azione { padding: 0 .625rem; }
}
/* Telefono (27/09 22:00, Andrea: «il logo Danesi Immobiliare è buggato, si è allontanato dall'altro»): il riquadro del
   marchio Lincoln 35 era largo 124 px con dentro l'immagine da 100 → 24-32 px di vuoto prima del divisore. Il riquadro
   è largo quanto l'immagine (rapporto 4:1). */
@media (max-width: 700px) {
  .testata .marchio { flex: none; width: 100px; height: 25px; }
  .marchio img { max-width: none; }
  /* 22:05, Andrea: «la linea tra i loghi non è centrata»: il logo Lincoln 35 ha aria a destra dentro l'SVG e quello Danesi
     dentro il PNG → la linea va 4 px a sinistra e il logo Danesi 7 px a destra, così i due spazi visibili sono uguali */
  .co-marchio { margin-left: -4px; --co-spazio: 1.3125rem; }
}