/* ==========================================================================
   CartoNoir · sito v3 · pagina Agenzie (30/09/2026)
   Si carica DOPO /brand.css e /v3/v3.css. Classi con prefisso v3-ag-; nessun colore scritto a mano:
   solo token --brand-*. Il solo JavaScript e' il modulo di contatto (v3-agenzie.js).
   ========================================================================== */

/* ---------- Apertura: immagine editoriale, velatura per la leggibilità ---------- */
body.v3 .v3-ag-apertura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 8vw, 112px);
  background: var(--brand-noir);
}
body.v3 .v3-ag-scena { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 65% center; z-index: -2; }
body.v3 .v3-ag-apertura::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,14,16,.84), rgba(13,14,16,.5) 58%, rgba(13,14,16,.12)); }
/* Resta avorio di proposito (seconda revisione delle rifiniture, 18/10, rilievo Low «piu' quieta della riga email»):
   misurata sul pixel piu' chiaro della scena sotto di lei, in grigio dei menu a 1440 scendeva a 3,62:1. La gerarchia
   con la riga email la tengono il corpo (12 contro 15 px) e l'oro del link. */
body.v3 .v3-ag-scena-nota { margin: 18px 0 0; font: 12px/1.5 var(--sans); color: var(--brand-avorio); }
/* 18/10 (rifiniture della revisione visiva): l'email nella prima schermata. Toccabile su 44 px, col peso di una
   riga e non di un secondo pulsante accanto a «Scoprite il programma». */
body.v3 .v3-ag-scrivete { margin: 12px 0 0; font: 15px/1.5 var(--sans); color: var(--v3-testo); }
body.v3 .v3-ag-scrivete a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-oro); text-decoration: underline; text-underline-offset: 3px; }
body.v3 .v3-ag-scrivete a:hover { color: var(--brand-oro-hover); }
/* Giro 26 (rilievo V1 della revisione visiva, High): fuori da .v3-ag-form il collegamento prendeva il fuoco generale
   (`body.ed :focus-visible`, filetto noir) sul fondo noir della testata: 1,01:1, invisibile da tastiera. Filetto oro come
   il pulsante accanto (marchio §6.2: «Focus sempre visibile: filetto oro … su dark»). */
body.v3 .v3-ag-scrivete a:focus-visible { outline: 2px solid var(--brand-oro); outline-offset: 2px; border-radius: 0; }
body.v3 .v3-ag-scrivete + .v3-ag-scena-nota { margin-top: 6px; }
@media (min-width: 1024px) {
  /* Il soggetto resta visibile a destra; il testo occupa l'area quieta a sinistra. */
  body.v3 .v3-ag-apertura { min-height: 620px; display: flex; align-items: center; }
}
body.v3 .v3-ag-apertura-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); width: 100%; max-width: var(--v3-max); margin-inline: auto; padding-inline: var(--v3-gutter); }
@media (min-width: 1024px) {
  body.v3 .v3-ag-apertura-in { display: block; }
  body.v3 .v3-ag-testa { width: min(52%, 620px); }
}
body.v3 .v3-ag-h1 { margin: 0 0 var(--s5); font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; color: var(--v3-testo); }
body.v3 .v3-ag-h1 em { display: block; font-style: italic; font-weight: 400; color: var(--brand-avorio); }
body.v3 .v3-ag-lead { margin: 0 0 var(--s6); max-width: 54ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--v3-testo); }

/* Una fascia di fatti, fuori dall'immagine: nessun pannello copre il libro. */
body.v3 .v3-ag-scheda { background: var(--brand-noir); padding: 28px var(--v3-gutter); border-block: 1px solid var(--brand-filetto-scuro); }
body.v3 .v3-ag-scheda-righe { margin: 0 auto; max-width: var(--v3-max); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.v3 .v3-ag-scheda-riga { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
body.v3 .v3-ag-scheda-riga:first-child { border-top: 0; }
body.v3 .v3-ag-scheda-riga dt { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-testo-menu); }
body.v3 .v3-ag-scheda-riga dd { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.2; color: var(--brand-avorio); }
@media (min-width: 480px) {
  body.v3 .v3-ag-scheda-riga { align-content: start; }
}
@media (min-width: 1024px) {
  body.v3 .v3-ag-scheda-righe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 360px) {
  body.v3 .v3-ag-scheda-righe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cosa c'e' oggi / cosa non c'e' ancora ---------- */
body.v3 .v3-ag-colonna { min-width: 0; }
body.v3 .v3-ag-netto { grid-column: 1 / -1; padding-top: var(--s6); border-top: 1px solid var(--v3-filetto); }
body.v3 .v3-ag-netto .v3-p { margin-bottom: 0; max-width: 72ch; }
body.v3 .v3-ag-elenco { list-style: none; margin: 0; padding: 0; }
body.v3 .v3-ag-elenco li { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--s4); border-top: 1px solid var(--v3-filetto); font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--v3-corpo); }
body.v3 .v3-ag-elenco li:last-child { border-bottom: 1px solid var(--v3-filetto); }
body.v3 .v3-ag-elenco--num li { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s3); }
body.v3 .v3-ag-num { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: lining-nums; color: var(--brand-oro-testo); }
/* Da 1024 il cerchietto della prima etichetta va sulla linea d'oro; le altre due non ne hanno bisogno. */
@media (min-width: 1024px) {
  body.v3 .v3-sezione .v3-tappa.v3-ag-tappa-solo-telefono { display: none; }
}

/* ---------- Il modulo, su blu notte ---------- */
body.v3 .v3-ag-form { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }
body.v3 .v3-ag-campo { display: flex; flex-direction: column; gap: var(--s2); }
body.v3 .v3-ag-form label { font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-testo-menu); }
body.v3 .v3-ag-form input:not([type="checkbox"]),
body.v3 .v3-ag-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--brand-avorio); background: var(--brand-noir); border: 1px solid var(--brand-grigio-freddo); border-radius: 0; transition: border-color var(--t-soffio) var(--ease-rotta), background var(--t-soffio) var(--ease-rotta); }
body.v3 .v3-ag-form textarea { min-height: 96px; resize: vertical; }
body.v3 .v3-ag-form ::placeholder { color: var(--brand-segnaposto); opacity: 1; }
body.v3 .v3-ag-form input:not([type="checkbox"]):hover,
body.v3 .v3-ag-form textarea:hover { border-color: var(--brand-testo-menu); }
body.v3 .v3-ag-form input:not([type="checkbox"]):focus,
body.v3 .v3-ag-form textarea:focus { border-color: var(--brand-oro); background: color-mix(in srgb, var(--brand-oro) 5%, var(--brand-noir)); }
body.v3 .v3-ag-form :focus-visible { outline: 2px solid var(--brand-oro); outline-offset: 2px; border-radius: 0; }
body.v3 .v3-ag-form input[aria-invalid="true"] { border-color: var(--brand-errore-su-scuro); }
body.v3 .v3-ag-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body.v3 .v3-ag-form .v3-ag-consenso { display: flex; align-items: flex-start; gap: var(--s3); min-height: 44px; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--brand-testo-menu); }
/* La casella e' disegnata: bordo grigio freddo (4,76:1 sul blu notte), oro da selezionata o a fuoco. */
body.v3 .v3-ag-consenso input { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; background: var(--brand-noir); border: 1.5px solid var(--brand-grigio-freddo); border-radius: 0; cursor: pointer; transition: border-color var(--t-soffio) var(--ease-rotta); }
body.v3 .v3-ag-consenso input:hover:not(:disabled),
body.v3 .v3-ag-consenso input:focus { border-color: var(--brand-oro); }
body.v3 .v3-ag-consenso input:checked { border-color: var(--brand-oro); }
body.v3 .v3-ag-consenso input:checked::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--brand-oro); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.v3 .v3-ag-consenso input:disabled { cursor: not-allowed; }
body.v3 .v3-ag-consenso a { color: var(--brand-oro); text-decoration: underline; text-underline-offset: 3px; }
body.v3 .v3-ag-consenso a:hover { color: var(--brand-oro-hover); }
/* 18/10: l'email nel riquadro di stato, cliccabile anche col modulo spento. */
body.v3 .v3-ag-form #contatto-stato a { color: var(--brand-oro); text-decoration: underline; text-underline-offset: 3px; padding-block: 12px; }
body.v3 .v3-ag-form #contatto-stato a:hover { color: var(--brand-oro-hover); }
/* 18/10: modulo spento = niente campi da compilare per niente; l'azione e' l'email, a tutta larghezza. */
body.v3 .v3-ag-form[data-raccolta="spenta"] .v3-ag-campo,
body.v3 .v3-ag-form[data-raccolta="spenta"] .v3-ag-consenso,
body.v3 .v3-ag-form[data-raccolta="spenta"] #contatto-invia { display: none; }
body.v3 .v3-ag-form:not([data-raccolta="spenta"]) .v3-ag-email-cta { display: none; }
/* Stessa larghezza del riquadro di stato che lo precede (tutta la colonna del modulo): a 1440 il tetto di 420 px
   lasciava i due bordi destri 44 px sfalsati (rifiniture della revisione visiva, 18/10). */
body.v3 .v3-ag-form .v3-ag-email-cta { display: flex; width: 100%; max-width: none; min-height: 48px; justify-content: center; align-items: center; text-align: center; text-transform: none; letter-spacing: .01em; font-size: 15px; } /* un indirizzo si legge e si copia in minuscolo */

body.v3 .v3-ag-errore { min-height: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--brand-errore-su-scuro); }
body.v3 .v3-ag-errore:empty { display: none; }
body.v3 .v3-ag-form .v3-btn { align-self: flex-start; }
/* Disabilitato: pieno spento, come su /invito e /regalo (§6.2 del marchio). */
body.v3 .v3-ag-form .v3-btn:disabled,
body.v3 .v3-ag-form .v3-btn:disabled:hover { background: var(--brand-campo-scuro); border-color: var(--brand-campo-scuro); color: var(--brand-testo-menu); cursor: not-allowed; }
/* La nota di stato sta SOPRA i campi: chi arriva dalla CTA sa subito se il modulo e' aperto. */
body.v3 .v3-ag-form #contatto-stato { margin: 0; padding: 12px 16px; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--brand-avorio); border: 1px solid var(--brand-grigio-freddo); border-left: 3px solid var(--brand-oro); background: var(--brand-noir); }
body.v3 .v3-ag-form #contatto-stato.errore { color: var(--brand-errore-su-scuro); }
body.v3 .v3-ag-form #contatto-stato.ok { color: var(--brand-oro); }
@media (max-width: 480px) {
  body.v3 .v3-ag-form .v3-btn { align-self: stretch; }
}

@media (min-width: 1024px) {
  body.v3 .v3-ag-contatto-griglia { align-items: start; }
}

@media (max-width: 1023px) {
  body.v3 .v3-ag-apertura { padding-block: 44px; }
  body.v3 .v3-ag-scena { object-position: 72% center; opacity: .65; }
  body.v3 .v3-ag-apertura::before { background: linear-gradient(180deg, rgba(13,14,16,.76), rgba(13,14,16,.65) 56%, var(--brand-noir)); }
}
@media (prefers-reduced-motion: no-preference) {
  body.v3 .v3-ag-scena { animation: ag-scena-arriva 1400ms var(--ease-rotta) both; }
  body.v3 .v3-ag-testa { animation: ag-testo-arriva 800ms var(--ease-rotta) both; }
  body.v3 .v3-ag-scheda { animation: ag-testo-arriva 800ms 160ms var(--ease-rotta) both; }
  @keyframes ag-scena-arriva { from { transform: scale(1.035); opacity: .65; } to { transform: scale(1); opacity: 1; } }
  @keyframes ag-testo-arriva { from { transform: translateY(12px); } to { transform: translateY(0); } }
}

/* ---------- Riduci movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  body.v3 .v3-ag-form input, body.v3 .v3-ag-form textarea { transition: none !important; }
}