/*
 * Pagine di testo del sito pubblico (Chi siamo, Contatti, Privacy, Cookie, Note legali, poi guide e quartieri).
 * Direzione: editoriale, la stessa della home v5. Playfair Display per i titoli, Jost per il testo, nero #1a1a1a su
 * bianco, rosso #B40101 solo dove si indica qualcosa (passaggio del mouse, bozza). Niente card, niente immagine
 * d'apertura, niente testo centrato: una colonna di lettura allineata al logo della testata.
 * Scala: spazi 8 12 16 24 32 48 64 96 128; corpi 13 17 e i titoli in clamp come la home; raggio 0 come la home.
 */
.pagina {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 6cqw, 96px) clamp(20px, 4cqw, 48px) clamp(64px, 8cqw, 128px);
}
/* La home azzera ul ma non ol: senza queste tre il browser rimette numeri e rientro («1. Hom2.»). */
.pagina .briciole ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #6b6b6b; letter-spacing: 0.02em; }
.pagina .briciole li + li::before { content: "/"; margin-right: 8px; color: #b9b2a8; }
.pagina .briciole a { color: #6b6b6b; }
.pagina .briciole a:hover { color: #B40101; }
.pagina .briciole [aria-current] { color: #1a1a1a; }
.pagina h1 {
  max-width: 18ch;
  margin-top: 24px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.2cqw, 72px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.pagina .testo { max-width: 68ch; margin-top: clamp(32px, 4cqw, 48px); font-size: 17px; line-height: 1.7; }
.pagina .testo > * + *, .pagina .testo > div > * + * { margin-top: 16px; }
.pagina .testo h2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #E6E2DC;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(24px, 2.4cqw, 30px);
  line-height: 1.2;
}
.pagina .testo h2 + * { margin-top: 12px; }
.pagina .testo a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #b9b2a8; }
.pagina .testo a:hover { color: #B40101; text-decoration-color: currentColor; }
/* Il rimando al modulo della home (Contatti, Francesco 12/10): pieno nel rosso del marchio, il nero solo per il testo.
   Bianco sul rosso 7,1:1, sul rosso del passaggio 9,7:1. */
.pagina .testo a.pulsante {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 36px; background: #B40101; color: #fff;
  font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 150ms ease-out;
}
.pagina .testo a.pulsante:hover { background: #8F0101; color: #fff; }
.pagina .testo a.pulsante:focus-visible { outline: 2px solid #B40101; outline-offset: 3px; }
.pagina .testo ul { list-style: disc; padding-left: 1.2em; }
.pagina .testo li + li { margin-top: 8px; }
/* Anteprima locale: una bozza si vede come tale. Online non arriva mai: il controllore boccia data-bozza. */
[data-bozza] { outline: 1px dashed #B40101; outline-offset: 12px; }
[data-bozza]::before {
  content: "Bozza da approvare";
  display: block;
  margin-bottom: 24px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B40101;
}

/*
 * Chi siamo (Francesco, 10/10): l'attacco della home v5 e il team. Un annuario d'ufficio: i ritratti della stessa parete in
 * fila, il nome sotto, nient'altro. La colonna di testo resta a 68ch, il team prende la larghezza della pagina.
 */
.pagina:has(#team) .testo { max-width: none; }
.pagina:has(#team) .testo p { max-width: 68ch; }
.pagina:has(#team) .testo .attacco { max-width: 34ch; font-family: 'Playfair Display', serif; font-size: clamp(26px, 3cqw, 36px); line-height: 1.2; }   /* l'a capo lo decidono i   del testo: dopo «palazzo,» */
.pagina .testo .team h2 { margin-top: clamp(64px, 8cqw, 96px); }
/* I due gruppi del team (Francesco, 15/10): etichetta come quella dei partner nella home, a sinistra. */
.pagina .testo .team h3 { margin-top: clamp(32px, 4cqw, 48px); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #6b6b6b; }
.pagina .testo .team h3 + ul { margin-top: 16px; }
.pagina .testo .team ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 24px; padding-left: 0; list-style: none; }
/* Quattro per riga, piu' grandi (Francesco, 15/10): a pagina piena 284 px di ritratto invece dei 184 che dava l'auto-fill a sei colonne. */
@container (min-width: 768px) { .pagina .testo .team ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pagina .testo .team li + li { margin-top: 0; }
.team img { display: block; width: 100%; height: auto; background: #EAE6DF; }
.pagina .testo .team p { margin-top: 12px; font-size: 15px; line-height: 1.4; }

/* La tabella della pagina Cookie (BC31). */
.testo .tabella { margin: 16px 0 24px; overflow-x: auto; }   /* scorre il contenitore: la tabella resta una tabella */
.testo table { width: 100%; border-collapse: collapse; font-size: 14px; }
.testo th, .testo td { padding: 10px 12px 10px 0; border-bottom: 1px solid #E6E2DC; text-align: left; vertical-align: top; }
.testo th { font-weight: 600; }

/*
 * Annunci (specifica 2026-10-10-annunci-command-design, AC25): /immobili/, i quartieri, la pagina dell'annuncio, lo stato
 * vuoto. La scheda nelle griglie e' quella della home v5, con gli stili in linea. Qui: la scheda tecnica di una rivista
 * immobiliare stampata. Fotografie grandi e piatte, dati in colonna come un capitolato, rosso solo per indicare; nessun
 * riquadro con ombra oltre la scheda della home, nessun carosello, nessuna mappa, raggio 0.
 */
.annunci { margin-top: clamp(32px, 4cqw, 48px); }
/* Le schede al passaggio e col fuoco: il velo chiaro delle divisioni della home, come nella home (Francesco, 13/10). */
.annunci .passa-ombra:hover [data-div-tint], .annunci .passa-ombra:focus-within [data-div-tint] { opacity: 1 !important; }
.annunci-intro { max-width: 60ch; margin-bottom: 32px; font-size: 17px; line-height: 1.7; color: #3d3d3d; }
/* Come i filtri della home: una riga sola, che si stringe col contenitore invece di andare a capo. */
.annunci-filtri { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; margin-bottom: 16px; }
.annunci-filtri button { flex: 0 1 auto; min-width: 0; padding: 9px clamp(8px, 2cqw, 16px); white-space: nowrap; font: inherit; font-size: clamp(12px, 3cqw, 14px); cursor: pointer; }
.annunci-filtri button:hover { border-color: #B40101; }   /* come i motivi del modulo della home: il nero solo per il testo */
.annunci-filtri button:focus-visible,
.annuncio-tutte summary:focus-visible,
.annunci a:focus-visible,
.annunci-vuoto a:focus-visible { outline: 2px solid #B40101; outline-offset: 3px; }
.annunci-filtri button:active { transform: translateY(1px); }

.annunci-quartieri { margin-top: clamp(64px, 8cqw, 96px); padding-top: 24px; border-top: 1px solid #E6E2DC; }
.annunci-quartieri h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(24px, 2.4cqw, 30px); line-height: 1.2; }
.annunci-quartieri ul { margin-top: 16px; columns: 3 220px; column-gap: 48px; }
.annunci-quartieri li { break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #E6E2DC; font-size: 17px; }
.annunci-quartieri a:hover { color: #B40101; }
.annunci-quartieri span { color: #6b6b6b; font-size: 14px; font-variant-numeric: tabular-nums; }
.annunci-ritorno { margin-top: 48px; }
.annunci-ritorno a {
  display: inline-flex; align-items: center; padding: 14px 36px; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 500;
  transition: background-color 150ms ease-out;
}
.annunci-ritorno a:hover { background: #B40101; }
.annunci-fonte { margin-top: 48px; font-size: 12px; color: #6b6b6b; letter-spacing: 0.02em; }

/* La pagina dell'annuncio: foto e descrizione a sinistra, i dati in colonna a destra, fermi mentre si scorre. */
.pagina:has(> .annuncio) h1 { max-width: 22ch; font-size: clamp(34px, 4.4cqw, 60px); }
.annuncio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: clamp(32px, 4cqw, 48px); }
.annuncio img { display: block; width: 100%; height: 100%; object-fit: cover; background: #EAE6DF; }
.annuncio-prima { aspect-ratio: 3 / 2; overflow: hidden; }
.annuncio-altre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.annuncio-altre li { aspect-ratio: 3 / 2; overflow: hidden; }
.annuncio-tutte summary {
  display: inline-flex; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid #1a1a1a; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}
.annuncio-tutte summary::-webkit-details-marker { display: none; }
.annuncio-tutte summary::after { content: "+"; margin-left: 8px; }
.annuncio-tutte[open] summary::after { content: " −"; }
.annuncio-tutte summary:hover { color: #B40101; border-color: #B40101; }

.annuncio-dati { align-self: start; }
.annuncio-luogo { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #B40101; }
.annuncio-prezzo { margin-top: 12px; font-family: 'Playfair Display', serif; font-size: clamp(30px, 3cqw, 36px); line-height: 1.1; }
.annuncio-metro { margin-top: 4px; font-size: 13px; color: #6b6b6b; }
.annuncio-dettagli { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding: 16px 0; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #E6E2DC; font-size: 15px; }
.annuncio-dati h2 { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #6b6b6b; }
.annuncio-energia { margin-top: 32px; }
.annuncio-energia dl { margin-top: 8px; }
.annuncio-energia dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid #E6E2DC; }
.annuncio-energia dt { font-size: 13px; color: #555; }
.annuncio-energia dd { font-size: 15px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* La classe come sull'attestato: la lettera su un fondo del semaforo (le tinte reggono il bianco sopra). */
.annuncio-energia dd[data-classe] { min-width: 40px; padding: 2px 8px; color: #fff; font-weight: 600; text-align: center; background: #6b6b6b; }
.annuncio-energia dd[data-classe^="A"] { background: #2e7d32; }
.annuncio-energia dd[data-classe="B"] { background: #4f812c; }   /* 4,66:1 col bianco; la #558b2f era 4,1:1 (revisione del 13/10) */
.annuncio-energia dd[data-classe="C"] { background: #827717; }
.annuncio-energia dd[data-classe="D"] { background: #a15c00; }
.annuncio-energia dd[data-classe="E"] { background: #b34700; }
.annuncio-energia dd[data-classe="F"] { background: #b23c17; }
.annuncio-energia dd[data-classe="G"] { background: #B40101; }

.annuncio-descrizione { max-width: 68ch; font-size: 17px; line-height: 1.7; }
.annuncio-descrizione h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(24px, 2.4cqw, 30px); line-height: 1.2; margin-bottom: 16px; }
.annuncio-descrizione p + p { margin-top: 16px; }

@container (min-width: 1024px) {
  .annuncio { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "galleria dati" "descrizione dati"; column-gap: 64px; row-gap: 64px; }
  .annuncio-galleria { grid-area: galleria; }
  .annuncio-dati { grid-area: dati; }
  .annuncio-descrizione { grid-area: descrizione; }
}
@media (prefers-reduced-motion: reduce) {
  .annunci-ritorno a, .richiesta button, .pagina .testo a.pulsante { transition: none; }
}

/*
 * Il mini form delle richieste (specifica 2026-10-10-richieste-dagli-annunci, RA1-RA3): una colonna di campi sotto i
 * dettagli, separata da un filo nero come i dettagli; campi a 16 px (sotto, Safari sul telefono ingrandisce la pagina).
 */
/* il filo sotto i dettagli separa gia': niente secondo filo */
.richiesta { margin-top: 32px; }
.annuncio-dati .richiesta h2 {
  font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: #1a1a1a;   /* non i titoletti maiuscoli della colonna */
}
.richiesta h2 + p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #3d3d3d; }
.richiesta-rif { margin-top: 16px; font-size: 13px; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.richiesta label { display: block; margin-top: 16px; font-size: 13px; color: #555; }
.richiesta select, .richiesta input[type=text], .richiesta input[type=tel], .richiesta input[type=email] {
  display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #dddddd; border-radius: 0;
  background: #fff; color: #1a1a1a; font: inherit; font-size: 16px;
}
.richiesta select:hover, .richiesta input:hover { border-color: #b9b2a8; }
.richiesta select:focus-visible, .richiesta input:focus-visible, .richiesta button:focus-visible { outline: 2px solid #B40101; outline-offset: 2px; }
.richiesta select:user-invalid, .richiesta input:user-invalid { border-color: #B40101; }
.richiesta .richiesta-informativa { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #1a1a1a; }
.richiesta-informativa input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #1a1a1a; }   /* 20 px: si prende col dito */
.richiesta-informativa a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #b9b2a8; }
.richiesta-informativa a:hover { color: #B40101; text-decoration-color: currentColor; }
.richiesta-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.richiesta button {
  width: 100%; margin-top: 24px; padding: 14px 24px; border: 0; background: #1a1a1a; color: #fff;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 150ms ease-out;
}
.richiesta button:hover { background: #B40101; }
.richiesta button:active { transform: translateY(1px); }
.annuncio-descrizione .annuncio-energia { margin-top: 48px; max-width: 440px; }