/* La pagina /agenzie come pagina autonoma. Va caricata DOPO `sito.css`.

   ⚠️⚠️ È una COPIA delle regole in linea dentro `index.html`, ricavata con
   `scripts/estrai_css.py` a partire dalle classi usate davvero dal markup: se cambia
   lo stile di un pacchetto o di una scheda nell'applicazione, va cambiato anche qui.
   Tre famiglie: `.ag-*` (la pagina), `.pk-*` (le schede dei pacchetti, condivise con
   la vetrina prezzi) e `.lp-demo` (l'anteprima del report nell'apertura).
   ⚠️ `.anim.visibile` è aggiunta a mano: la mette il JavaScript quando l'elemento
   entra nello schermo, quindi nel markup non compare e l'estrattore non poteva vederla. */

/* La pagina /agenzie come pagina autonoma. Va caricata DOPO `sito.css`.

   ⚠️⚠️ È una COPIA delle regole in linea dentro `index.html`, ricavata con
   `scripts/estrai_css.py` a partire dalle classi usate davvero dal markup: se cambia
   lo stile di un pacchetto o di una scheda nell'applicazione, va cambiato anche qui.
   Tre famiglie: `.ag-*` (la pagina), `.pk-*` (le schede dei pacchetti, condivise con
   la vetrina prezzi) e `.lp-demo` (l'anteprima del report nell'apertura).
   ⚠️ `.anim.visibile` è aggiunta a mano: la mette il JavaScript quando l'elemento
   entra nello schermo, quindi nel markup non compare e l'estrattore non poteva vederla. */
.lp-occhiello { font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand); font-weight: 700; margin: 0 0 12px; }
/* ── Pagina /agenzie ──────────────────────────────────────────────────────────────
     Contenuto di "True Domus Agenzie.dc.html" (Claude Design). Stessa meccanica della
     vetrina dei pacchetti — una vista della landing, non un documento a parte — ma con un
     INDIRIZZO SUO: ci si arriva dalla voce di menu, dal piede e dalla riga in vetrina, e
     quei tre sono collegamenti veri, perché Googlebot li segue e i bottoni no.
     ⚠️ Qui la barra di ricerca sparisce insieme alla landing (regola di `in-pacchetti`, non
     di `in-privata`): la pagina parla a chi compra un pacchetto, e la sua prima azione è
     scegliere il taglio, non cercare un indirizzo. */
/* L'apertura: titolo e testo a sinistra, i due tasti in colonna a destra. */
/* ⚠️ Imbottitura in basso contenuta: la striscia di case è ancorata al bordo INFERIORE
     della sezione (`.lp-decoro > img` ha `bottom: 0`), quindi meno spazio c'è sotto i tasti
     e più l'immagine sale ad affiancarli. Non occupa spazio nel flusso: a tenerla lontana
     dal testo è la larghezza della colonna di sinistra, non il padding. */
.ag-hero { max-width: 1160px; margin: 0 auto; padding: 72px 28px 56px;
    display: flex; gap: 56px; align-items: flex-end; flex-wrap: wrap; }
/* Il testo si ferma prima della striscia, che comincia a 640px dal bordo della sezione. */
.ag-hero .ag-testi { flex: 1; min-width: 320px; max-width: 600px; }
.ag-titolo { font-family: var(--serif); font-weight: 500; font-size: 48px; line-height: 1.08;
    letter-spacing: -.025em; margin: 0 0 20px; }
.ag-hero .lp-testo { margin: 0; max-width: 640px; }
/* I due tasti in riga sotto il testo, larghi uguali — la misura di quando erano
     incolonnati.
     ⚠️ `flex: 1 1 280px` su ciascuno: finché ci stanno si dividono la riga in parti uguali,
     e quando lo spazio scende sotto i 280px a testa vanno a capo DA SOLI, uno sotto l'altro.
     Non serve una soglia scritta a mano, che sarebbe sempre quella sbagliata su qualche
     schermo. */
.ag-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ag-azioni .ag-tasto { flex: 1 1 280px; }
/* I due tasti dell'apertura: pieno il primo, contornato il secondo. Sono collegamenti,
     non bottoni — uno porta a un'ancora di questa pagina, l'altro a /esempio. */
.ag-tasto { display: flex; align-items: center; justify-content: center; white-space: nowrap;
    background: var(--brand); color: #fff; padding: 16px 28px; border-radius: 11px;
    font-size: 15.5px; font-weight: 700; text-decoration: none; }
.ag-tasto:hover { background: var(--brand-ink); color: #fff; }
.ag-tasto.vuoto { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.ag-tasto.vuoto:hover { background: var(--brand-soft); color: var(--brand-ink); }
/* Tasto piccolo, dentro il corpo di una sezione. */
.ag-tasto.piccolo { display: inline-flex; padding: 12px 22px; font-size: 14px; border-radius: 10px; }
/* ⭐ Variante CHIARA (14/09/2026), gemella di `.btn-azione.chiaro` della home: fondo bianco,
   scritta e bordo nel blu del marchio.
   ⚠️ Il padding è 1,5px in meno per lato ESATTAMENTE quanto il bordo che si aggiunge, così
   i due tasti affiancati hanno la stessa identica misura.
   ⭐ Fondo TRASPARENTE (richiesta dell'utente): il tasto prende il colore della fascia su
   cui sta — il grigio nella sezione «Il report con il tuo logo», il bianco in «Cosa c'è
   dentro» — invece di un bianco scritto a mano che stonerebbe sul grigio.
   ⚠️ Va DOPO `.piccolo`, che altrimenti ne sovrascriverebbe il padding. */
.ag-tasto.chiaro { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.ag-tasto.piccolo.chiaro { padding: 10.5px 20.5px; }
.ag-tasto.chiaro:hover { background: var(--brand-soft); color: var(--brand-ink);
    border-color: var(--brand-ink); }
/* I due tasti affiancati nelle sezioni "Il report con il tuo logo" e "Cosa c'è dentro". */
/* ⭐ I due tasti hanno la STESSA LARGHEZZA, quella del più largo (richiesta dell'utente,
   14/09/2026). Il modo: una griglia a colonne uguali (`1fr`) larga quanto il contenuto
   (`fit-content`) — le colonne `1fr` si spartiscono lo spazio in parti uguali, e lo spazio
   totale lo decide il testo più lungo. Con `flex` non si ottiene: lì ognuno resta largo
   quanto il proprio testo.
   ⚠️ Sotto i 520px le colonne diventano righe: affiancati non ci starebbero, e stringerli
   spezzerebbe le scritte su due righe. */
.ag-azioni-riga { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 12px; width: fit-content; max-width: 100%; }
@media (max-width: 520px) {
  .ag-azioni-riga { grid-auto-flow: row; width: 100%; }
  }
/* Fasce bianche alternate al fondo della pagina, come nella landing. */
.ag-chiara { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ag-in { max-width: 1160px; margin: 0 auto; padding: 64px 28px; }
.ag-in.larga { padding: 72px 28px; }
.ag-occhiello-c { text-align: center; line-height: 1.5; margin: 0 0 40px; }
.ag-in.stretta { max-width: 1000px; }
/* I tre passi del caso d'uso: niente più riquadri: un tondo blu con l'icona, il titolo
     sotto e due righe di spiegazione, incolonnati e centrati (stessa forma dei passi «Come
     funziona» in home). Il titolo della sezione è un h2 sotto l'occhiello. */
.ag-h2-c { text-align: center; margin: -24px auto 40px; }
.ag-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ag-passo { text-align: center; }
.ag-cerchio { width: 88px; height: 88px; border-radius: 50%; background: var(--brand);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
    box-shadow: 0 10px 26px rgba(47,151,179,.28); }
.ag-cerchio i { font-size: 30px; color: #fff; }
.ag-passo b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 500;
    margin: 0 0 8px; }
.ag-passo p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }
/* Le due sezioni a due colonne: testo da una parte, riquadro dall'altra. */
.ag-due { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.ag-due > div { flex: 1; min-width: 300px; }
.ag-h2 { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -.02em;
    line-height: 1.15; margin: 0 0 16px; }
.ag-p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin: 0 0 26px; }
/* Il segnaposto del logo nell'anteprima del report: tratteggiato, perché è il posto dove
     andrà il logo dell'agenzia e non un logo vero. Sta dov'è quello stampato sul report. */
.ag-logo-posto { margin-left: auto; flex: none; width: 86px; height: 86px;
    border: 3px dashed var(--brand); border-radius: 8px; background: var(--card-soft);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand); line-height: 1.5; padding: 6px; }
/* La card delle fonti, accanto a "Cosa c'è dentro". */
.ag-fonti { background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(28,47,54,.1); padding: 26px; display: flex; gap: 16px;
    align-items: flex-start; }
.ag-fonti > i { font-size: 26px; color: var(--brand); flex: none; margin-top: 2px; }
.ag-fonti p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.7; }
.ag-fonti .lp-occhiello { display: block; margin-bottom: 14px; }
/* Il listino: i tre tagli per professionisti, tutti in chiaro. */
/* ⚠️ `scroll-margin-top`: qui si ARRIVA da un'ancora — dal bottone «Vedi i pacchetti» in
   cima a questa pagina e, dalle Impostazioni, dal rimando accanto al logo per i pacchetti
   Pro (`/agenzie#ag-listino`). La barra del sito è `position: sticky` e alta 68px: senza
   questo margine il browser porta il titolo del listino esattamente al bordo alto, cioè
   NASCOSTO SOTTO la barra, e si arriva con le schede già cominciate. 84px = i 68 della
   barra più un po' d'aria. */
.ag-listino { max-width: 1160px; margin: 0 auto; padding: 72px 28px 24px; scroll-margin-top: 84px; }
.ag-listino .lp-occhiello, .ag-listino .ag-h2 { text-align: center; }
.ag-listino .ag-h2 { margin-bottom: 24px; }
.ag-regole { max-width: 680px; margin: 0 auto 56px; text-align: center; font-size: 14.5px;
    color: var(--muted); line-height: 1.6; }
.ag-regole b { color: var(--ink); }
.ag-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Le tre schede entrano a cascata quando la griglia si vede, come in vetrina. */
.ag-griglia > .anim:nth-child(1) { transition-delay: 0s; }
.ag-griglia > .anim:nth-child(2) { transition-delay: .16s; }
.ag-griglia > .anim:nth-child(3) { transition-delay: .32s; }
/* La fascia blu delle domande riusa `.pk-come`: stessa fascia, stesso fondo. Qui ogni
     voce ha la domanda sopra e la risposta sotto, invece di una riga sola. */
.ag-come { margin-top: 56px; }
.ag-come .dentro { max-width: 760px; }
.ag-voce b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 6px; }
@media (max-width: 900px) {
  .ag-tre, .ag-griglia { grid-template-columns: 1fr; }
  .ag-hero { padding-top: 48px; }
  .ag-titolo { font-size: 36px; }
}
@media (max-width: 800px) {
  .ag-azioni { flex-direction: column; align-items: flex-start; }
  .ag-azioni .ag-tasto { flex: none; width: 293px; max-width: 100%; }
  .ag-hero.lp-decoro > img.deco-resta { left: 50% !important;
      transform: translateX(calc(-50% + 250px)) !important; }
}
@media (max-width: 700px) {
  .ag-azioni { align-items: stretch; }
  .ag-azioni .ag-tasto { width: 100%; }
  .ag-hero { padding-bottom: 106px; }
  .ag-hero.lp-decoro > img.deco-resta {
      transform: translateX(calc(-50% + 100px)) !important; }
}
/* Strisce di case: escono dai bordi della sezione e restano INTERE (niente ritaglio).
     A contenerle è l'overflow-x della pagina, non un overflow:hidden sulla sezione —
     che invece le taglierebbe di netto. */
.lp-decoro { position: relative; }
.lp-decoro > img { position: absolute; bottom: 0; pointer-events: none;
    user-select: none; z-index: 0; max-width: none; }
.lp-decoro > *:not(img) { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .lp-decoro > img.deco-resta { opacity: .9; left: 50% !important; right: auto !important;
      bottom: 0 !important; top: auto !important; transform: translateX(-50%) !important; }
}