/*
 * Campagna Associativa — CSS verbatim da assets/html/campagna-soci-2026.html,
 * scoped a .anma-campagna per non interferire con navbar/footer del tema.
 *
 * Note di scoping:
 *  - Le regole html,body del mockup vengono escluse (gestite dal tema).
 *  - Tutti i selettori sono prefissati con .anma-campagna.
 *  - .btn-primary del mockup sostituisce quello di forms.css solo dentro
 *    .anma-campagna (scoping CSS, non globale).
 */

.anma-campagna {
  --c-primary:     #1a5276;
  --c-secondary:   #2e86c1;
  --c-accent:      #5dade2;
  --c-dark:        #1c2833;
  --c-gray:        #7f8c8d;
  --c-light-gray:  #bdc3c7;
  --c-bg-light:    #f4f6f8;
  --c-bg-mid:      #e5e8eb;
  --c-border:      #edf0f2;
  --c-red:         #e74c3c;
  --c-orange:      #f39c12;
  --c-green:       #2ecc71;
  --c-footer-mid:  #154763;
  --c-footer-dark: #0f3a55;
  --f:             'Asap Condensed', sans-serif;
  --max:           1440px;

  font-family: var(--f);
  background: #fff;
  min-width: var(--max);
}

.anma-campagna img { max-width: none; display: block; }

.anma-campagna .w-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

/* ===== HERO ===== */
.anma-campagna .hero { background: var(--c-bg-light); width: 100%; overflow: hidden; }
.anma-campagna .hero-inner {
  max-width: var(--max); margin: 0 auto;
  height: 640px;
  display: flex; align-items: center; gap: 64px;
  padding: 96px 120px; overflow: hidden;
}
.anma-campagna .hero-left { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; overflow: hidden; flex-shrink: 0; width: 620px; }
.anma-campagna .eyebrow { background: var(--c-primary); padding: 8px 18px; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .eyebrow span { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 1.04px; white-space: nowrap; }
.anma-campagna .hero-title   { font-size: 56px; font-weight: 900; line-height: 62px; color: var(--c-dark); width: 620px; word-break: break-word; }
.anma-campagna .hero-subtitle { font-size: 20px; font-weight: 400; line-height: 30px; color: var(--c-gray); width: 620px; word-break: break-word; }
.anma-campagna .cta-row { display: flex; gap: 16px; align-items: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .btn-primary { background: var(--c-primary); height: 56px; padding: 0 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; text-decoration: none; cursor: pointer; }
.anma-campagna .btn-primary.w260 { width: 260px; }
.anma-campagna .btn-primary span { font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; text-align: center; }
.anma-campagna .btn-secondary { background: var(--c-secondary); height: 56px; padding: 0 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; text-decoration: none; cursor: pointer; }
.anma-campagna .btn-secondary.w220 { width: 220px; }
.anma-campagna .btn-secondary span { font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; text-align: center; }
.anma-campagna .hero-link { font-size: 17px; font-weight: 500; color: var(--c-secondary); white-space: pre; flex-shrink: 0; text-decoration: none; }
.anma-campagna .hero-image { background: var(--c-bg-mid); border: 1px solid var(--c-light-gray); height: 448px; width: 556px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .hero-image span { font-size: 16px; font-weight: 500; color: var(--c-gray); white-space: nowrap; }

/* ===== STATS / SOCIAL PROOF ===== */
.anma-campagna .stats { background: var(--c-primary); width: 100%; overflow: hidden; }
.anma-campagna .stats-inner {
  max-width: var(--max); margin: 0 auto;
  height: 240px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 56px 120px; overflow: hidden;
}
.anma-campagna .stat-item { display: flex; flex-direction: column; gap: 8px; align-items: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .stat-number { font-size: 52px; font-weight: 900; color: #fff; white-space: nowrap; }
.anma-campagna .stat-label  { font-size: 14px; font-weight: 400; color: #fff; text-align: center; width: 200px; }
.anma-campagna .stat-sep    { background: #fff; height: 64px; width: 1px; opacity: 0.22; border-radius: 0.5px; flex-shrink: 0; }

/* ===== PERCHÉ ASSOCIARSI ===== */
.anma-campagna .why-join {
  background: #fff; width: 100%; height: 640px;
  display: flex; flex-direction: column; gap: 56px; align-items: center;
  padding: 112px 120px; overflow: hidden;
}
.anma-campagna .title-block { display: flex; flex-direction: column; gap: 16px; align-items: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .section-label { font-size: 13px; font-weight: 600; color: var(--c-secondary); letter-spacing: 1.04px; white-space: nowrap; }
.anma-campagna .section-label--light { color: var(--c-accent); }
.anma-campagna .section-title { font-size: 42px; font-weight: 800; line-height: 50px; color: var(--c-dark); text-align: center; }
.anma-campagna .section-title--white { color: #fff; }
.anma-campagna .cards-grid { display: flex; gap: 24px; height: 320px; align-items: flex-start; overflow: hidden; flex-shrink: 0; width: 1200px; }
.anma-campagna .feature-card { background: var(--c-bg-light); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; height: 320px; padding: 36px 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; width: 282px; }
.anma-campagna .card-icon  { background: #d1d4d6; border-radius: 8px; width: 64px; height: 64px; flex-shrink: 0; }
/* ── Pilastri con icona ──
   Il grigio pieno del segnaposto su una card gia' chiara (#f4f6f8) risultava
   spento e pesante. Con l'icona dentro diventa una velatura del blu
   istituzionale: si vede che e' un riquadro, ma non fa blocco di colore.
   L'icona e' meta' della piastrella, cosi' respira; il colore arriva dal
   currentColor dell'SVG, quindi si cambia da qui senza toccare i file. */
.anma-campagna .card-icon.has-icon {
  background: rgba(26, 82, 118, .07);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.anma-campagna .card-icon.has-icon svg { width: 1em; height: 1em; display: block; }
.anma-campagna .card-title { font-size: 22px; font-weight: 600; line-height: 28px; color: var(--c-dark); width: 218px; word-break: break-word; }
.anma-campagna .card-desc  { font-size: 16px; font-weight: 400; line-height: 22px; color: var(--c-gray); width: 218px; word-break: break-word; }
.anma-campagna .card-link  { font-size: 15px; font-weight: 600; color: var(--c-secondary); white-space: pre; text-decoration: none; }

/* ===== MESSAGGIO SEGRETARIO ===== */
.anma-campagna .secretary { background: var(--c-bg-light); width: 100%; overflow: hidden; }
/* height fissa -> min-height e overflow sbloccato: con l'altezza bloccata a 280px
   la lettera del segretario aperta in linea restava invisibile, ritagliata via.
   Da chiusa la sezione misura gli stessi 280px del Figma. */
.anma-campagna .secretary-inner {
  max-width: var(--max); margin: 0 auto;
  min-height: 280px;
  display: flex; align-items: center; gap: 40px;
  padding: 64px 120px; overflow: visible;
}
/* Con la lettera aperta il contenuto diventa alto: l'avatar si allinea in alto
   invece di restare centrato a meta' di una colonna di testo. */
.anma-campagna .secretary-inner:has(.secretary-letter[open]) { align-items: flex-start; }
.anma-campagna .secretary-avatar  { background: var(--c-bg-mid); border: 1px solid var(--c-light-gray); border-radius: 100px; width: 120px; height: 120px; flex-shrink: 0; overflow: hidden; }
/* Senza queste due regole la foto del segretario esce dal cerchio: wp_get_attachment_image
   stampa un img alla sua dimensione (medium, ~300px) e il contenitore non ritagliava.
   Stesso trattamento gia applicato a .hero-image img col fix QA del 2026-07-04. */
.anma-campagna .secretary-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anma-campagna .secretary-content { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; overflow: visible; flex-shrink: 1; width: 1040px; max-width: 100%; }
.anma-campagna .secretary-label   { font-size: 13px; font-weight: 600; color: var(--c-gray); letter-spacing: 1.04px; white-space: nowrap; }
.anma-campagna .secretary-quote   { font-size: 24px; font-weight: 500; line-height: 34px; color: var(--c-dark); width: 900px; }
.anma-campagna .secretary-actions { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-start; overflow: visible; flex-shrink: 0; width: 100%; }

/* ── Lettera del Segretario, aperta in linea ── */
.anma-campagna .secretary-letter { flex: 1 1 100%; }
.anma-campagna .secretary-letter > summary {
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
}
/* Il triangolo nativo del summary sparisce: ne disegniamo uno che ruota, cosi'
   si vede a colpo d'occhio se la lettera e' aperta o chiusa. */
.anma-campagna .secretary-letter > summary::-webkit-details-marker { display: none; }
.anma-campagna .secretary-letter > summary::before {
  content: "\25B8"; font-size: 14px; line-height: 1;
  transition: transform .15s ease;
}
.anma-campagna .secretary-letter[open] > summary::before { transform: rotate(90deg); }
.anma-campagna .secretary-letter > summary:hover { text-decoration: underline; }
.anma-campagna .secretary-letter > summary:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; border-radius: 2px; }
.anma-campagna .secretary-letter__body { padding: 16px 0 4px; max-width: 900px; }
.anma-campagna .secretary-letter__body p {
  margin: 0 0 14px; font-size: 16px; line-height: 26px; color: var(--c-dark);
}
.anma-campagna .secretary-letter__body p:last-child { margin-bottom: 0; }
.anma-campagna .secretary-action  { font-size: 16px; font-weight: 600; color: var(--c-secondary); white-space: pre; text-decoration: none; cursor: pointer; }

/* ===== COSA INCLUDE LA QUOTA ===== */
.anma-campagna .benefits-section {
  background: #fff; width: 100%; height: 867px;
  display: flex; flex-direction: column; gap: 56px; align-items: center;
  padding: 80px 120px; overflow: hidden;
}
.anma-campagna .benefits-table-wrap { background: #fff; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border-radius: 12px; box-shadow: 0px 2px 12px 0px rgba(26,26,26,0.06); flex-shrink: 0; width: 1200px; }
.anma-campagna .benefits-thead { background: var(--c-primary); height: 80px; display: flex; align-items: center; padding: 0 48px; overflow: hidden; flex-shrink: 0; width: 1200px; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 1.8px; }
.anma-campagna .th-benefit { width: 520px; flex-shrink: 0; }
.anma-campagna .th-mc      { width: 300px; flex-shrink: 0; text-align: center; }
.anma-campagna .th-form    { width: 240px; flex-shrink: 0; text-align: center; }
.anma-campagna .benefits-row { background: #fff; border-bottom: 1px solid var(--c-border); height: 80px; display: flex; align-items: center; padding: 0 48px; overflow: hidden; flex-shrink: 0; width: 1200px; }
.anma-campagna .benefits-row:last-child { border-bottom: none; }
.anma-campagna .td-benefit { font-size: 18px; font-weight: 400; color: var(--c-dark); width: 520px; flex-shrink: 0; word-break: break-word; }
.anma-campagna .td-cell    { width: 300px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.anma-campagna .td-cell--narrow { width: 240px; }
.anma-campagna .check-badge { background: var(--c-green); border-radius: 12.5px; width: 25px; height: 25px; position: relative; flex-shrink: 0; }
.anma-campagna .check-badge svg { position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; display: block; color: #fff; }
.anma-campagna .dash-badge  { background: var(--c-border); border-radius: 12.5px; width: 25px; height: 25px; position: relative; flex-shrink: 0; }
.anma-campagna .dash-badge svg  { position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; display: block; color: var(--c-gray); }
.anma-campagna .td-text { font-size: 18px; font-weight: 600; color: var(--c-primary); white-space: nowrap; }

/* ===== PERCORSO ISCRIZIONE ===== */
.anma-campagna .enrollment {
  background: var(--c-primary); width: 100%; height: 650px;
  display: flex; flex-direction: column; gap: 56px; align-items: center;
  padding: 90px 120px; overflow: hidden;
}
.anma-campagna .enrollment-title { display: flex; flex-direction: column; gap: 16px; align-items: center; overflow: hidden; flex-shrink: 0; text-align: center; white-space: nowrap; }
.anma-campagna .choice-row { display: flex; gap: 24px; align-items: flex-start; overflow: hidden; flex-shrink: 0; }
.anma-campagna .choice-card { background: #fff; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 40px; border-radius: 12px; box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08), 0px 8px 24px -4px rgba(0,0,0,0.18); overflow: hidden; flex-shrink: 0; width: 600px; }
.anma-campagna .choice-icon-circle { background: #eaf4fb; display: flex; align-items: center; justify-content: center; border-radius: 32px; width: 64px; height: 64px; overflow: hidden; flex-shrink: 0; }
.anma-campagna .choice-icon-circle span { font-size: 28px; color: var(--c-primary); white-space: nowrap; }
.anma-campagna .choice-label { font-size: 13px; font-weight: 600; color: var(--c-secondary); letter-spacing: 1.56px; white-space: nowrap; text-align: center; }
.anma-campagna .choice-title { font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--c-dark); text-align: center; word-break: break-word; min-width: 100%; }
.anma-campagna .choice-desc  { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--c-gray); text-align: center; word-break: break-word; min-width: 100%; }

/* ===== FAQ ===== */
.anma-campagna .faq {
  background: #fff; width: 100%;
  display: flex; flex-direction: column; gap: 40px; align-items: center;
  padding: 112px 120px; overflow: hidden;
}
.anma-campagna .faq-list { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; overflow: hidden; flex-shrink: 0; width: 960px; }
.anma-campagna .faq-item         { background: #fff; border: 1px solid var(--c-light-gray); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; flex-shrink: 0; width: 960px; cursor: pointer; }
.anma-campagna .faq-item--open   { gap: 14px; padding: 20px 28px; }
.anma-campagna .faq-item--closed { padding: 20px 28px; }
.anma-campagna .faq-question { display: flex; align-items: center; justify-content: space-between; overflow: hidden; flex-shrink: 0; width: 904px; white-space: nowrap; }
.anma-campagna .faq-q-text   { font-size: 18px; font-weight: 600; color: var(--c-dark); flex-shrink: 0; }
.anma-campagna .faq-toggle   { font-size: 24px; font-weight: 700; color: var(--c-secondary); flex-shrink: 0; }
.anma-campagna .faq-answer   { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--c-gray); width: 904px; flex-shrink: 0; }

/* ===== FINAL CTA ===== */
.anma-campagna .final-cta {
  background: var(--c-secondary); width: 100%; height: 360px;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  padding: 72px 120px; overflow: hidden;
}
.anma-campagna .final-cta-title { font-size: 42px; font-weight: 800; color: #fff; text-align: center; white-space: nowrap; }
.anma-campagna .final-cta-sub   { font-size: 18px; font-weight: 400; color: #fff; text-align: center; width: 700px; word-break: break-word; }
.anma-campagna .final-cta-row { display: flex; gap: 16px; height: 56px; align-items: flex-start; overflow: hidden; flex-shrink: 0; width: 500px; }
.anma-campagna .btn-white { background: #fff; height: 56px; padding: 0 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; width: 260px; text-decoration: none; cursor: pointer; }
.anma-campagna .btn-white span { font-size: 20px; font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.anma-campagna .btn-outline-secondary { border: 2px solid #fff; height: 56px; padding: 0 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; width: 220px; text-decoration: none; cursor: pointer; }
.anma-campagna .btn-outline-secondary span { font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; }

/* ── Hero image da featured image campagna (fix QA 2026-07-04) ── */
.anma-campagna .hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ================================================================
   RESPONSIVE — 2026-08-14
   ----------------------------------------------------------------
   campagna.css non aveva alcuna media query. La pagina non compariva
   in `wp post list` perche' /campagna-associativa/ e' un URL virtuale
   servito da una rewrite rule (anma_virtual=campagna), quindi era
   sfuggita a tutta la passata precedente.
   Il file e' interamente a larghezze e altezze fisse (hero 620/556,
   cards-grid 1200, tabella 520+300+240, sezioni con `height` bloccata
   e `overflow:hidden`): a 375px tagliava, non sbordava.
   Scala tipografica e gutter 20px come il frame mobile Figma 359:37,
   l'unico design mobile approvato del progetto.
================================================================ */
@media (max-width:1279px){
  .anma-campagna .hero-inner,
  .anma-campagna .stats-inner,
  .anma-campagna .secretary-inner{padding-left:40px;padding-right:40px}
  .anma-campagna .why-join,
  .anma-campagna .benefits-section,
  .anma-campagna .enrollment,
  .anma-campagna .faq,
  .anma-campagna .final-cta{padding-left:40px;padding-right:40px}
  .anma-campagna .cards-grid,
  .anma-campagna .benefits-table-wrap,
  .anma-campagna .benefits-thead,
  .anma-campagna .benefits-row{width:100%;max-width:1200px}
  .anma-campagna .feature-card{width:auto;flex:1 1 0;min-width:0}
  .anma-campagna .faq-list,
  .anma-campagna .faq-item{width:100%;max-width:960px}
  .anma-campagna .faq-question,
  .anma-campagna .faq-answer{width:100%}
  .anma-campagna .choice-card{width:auto;flex:1 1 0;min-width:0}
  .anma-campagna .secretary-content{width:100%;flex-shrink:1}
  .anma-campagna .secretary-quote{width:100%}
}

@media (max-width:767px){

  /* ===== Hero ===== */
  .anma-campagna .hero-inner{height:auto;flex-direction:column;align-items:stretch;gap:24px;padding:40px 20px}
  .anma-campagna .hero-left{width:100%;gap:20px}
  .anma-campagna .eyebrow{padding:6px 14px}
  .anma-campagna .eyebrow span{font-size:11px;letter-spacing:.88px}
  .anma-campagna .hero-title{width:100%;font-size:32px;line-height:38px}
  .anma-campagna .hero-subtitle{width:100%;font-size:15px;line-height:22px}
  .anma-campagna .cta-row{flex-direction:column;align-items:stretch;width:100%;gap:10px;overflow:visible}
  .anma-campagna .btn-primary,
  .anma-campagna .btn-secondary,
  .anma-campagna .btn-primary.w260,
  .anma-campagna .btn-secondary.w220{width:100%;flex-shrink:1;padding:0 20px}
  .anma-campagna .btn-primary span,
  .anma-campagna .btn-secondary span{font-size:17px;white-space:normal}
  .anma-campagna .hero-link{white-space:normal;font-size:15px}
  .anma-campagna .hero-image{width:100%;height:200px;flex-shrink:1}

  /* ===== Statistiche: righe numero/etichetta, come il Piano Formativo ===== */
  .anma-campagna .stats-inner{height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:28px 20px}
  .anma-campagna .stat-item{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;flex-shrink:1}
  .anma-campagna .stat-number{font-size:32px}
  .anma-campagna .stat-label{width:auto;text-align:right;font-size:14px;opacity:.75}
  .anma-campagna .stat-sep{width:100%;height:1px;border-radius:0}

  /* ===== Perche' associarsi ===== */
  .anma-campagna .why-join{height:auto;gap:24px;padding:56px 20px}
  .anma-campagna .section-label{font-size:11px;letter-spacing:.88px;white-space:normal;text-align:center}
  .anma-campagna .section-title{font-size:28px;line-height:34px}
  .anma-campagna .cards-grid{width:100%;height:auto;flex-direction:column;gap:16px;overflow:visible}
  .anma-campagna .feature-card{width:100%;height:auto;min-height:0;flex:0 0 auto;padding:24px;gap:12px}
  .anma-campagna .card-icon{width:56px;height:56px}
  .anma-campagna .card-icon.has-icon{font-size:28px}
  .anma-campagna .card-title{width:100%;font-size:20px;line-height:26px}
  .anma-campagna .card-desc{width:100%;font-size:15px;line-height:22px}

  /* ===== Messaggio del Segretario ===== */
  .anma-campagna .secretary-inner{height:auto;flex-direction:column;align-items:flex-start;gap:20px;padding:40px 20px}
  .anma-campagna .secretary-avatar{width:80px;height:80px}
  .anma-campagna .secretary-content{width:100%;flex-shrink:1}
  .anma-campagna .secretary-quote{width:100%;font-size:18px;line-height:26px}
  .anma-campagna .secretary-actions{flex-direction:column;align-items:flex-start;gap:10px;overflow:visible}
  .anma-campagna .secretary-action{white-space:normal}

  /* ===== Tabella benefici: colonne fluide, niente scroll orizzontale ===== */
  .anma-campagna .benefits-section{height:auto;gap:24px;padding:56px 20px}
  .anma-campagna .benefits-table-wrap{width:100%}
  .anma-campagna .benefits-thead,
  .anma-campagna .benefits-row{width:100%;height:auto;min-height:56px;padding:12px 14px;flex-shrink:1}
  .anma-campagna .benefits-thead{font-size:10px;letter-spacing:.6px}
  .anma-campagna .th-benefit,
  .anma-campagna .td-benefit{width:auto;flex:1 1 auto;min-width:0}
  .anma-campagna .td-benefit{font-size:14px}
  .anma-campagna .th-mc,
  .anma-campagna .th-form{width:56px;flex:0 0 56px}
  .anma-campagna .td-cell,
  .anma-campagna .td-cell--narrow{width:56px;flex:0 0 56px;height:auto}
  .anma-campagna .td-text{font-size:13px;white-space:normal;text-align:center}

  /* ===== Percorso di iscrizione ===== */
  .anma-campagna .enrollment{height:auto;gap:24px;padding:56px 20px}
  .anma-campagna .enrollment-title{white-space:normal}
  .anma-campagna .choice-row{flex-direction:column;width:100%;gap:16px;overflow:visible}
  .anma-campagna .choice-card{width:100%;flex:0 0 auto;padding:24px}
  .anma-campagna .choice-label{white-space:normal}
  .anma-campagna .choice-title{font-size:22px}
  .anma-campagna .choice-desc{font-size:15px}

  /* ===== FAQ ===== */
  .anma-campagna .faq{gap:20px;padding:56px 20px}
  .anma-campagna .faq-list,
  .anma-campagna .faq-item{width:100%}
  .anma-campagna .faq-item--open,
  .anma-campagna .faq-item--closed{padding:16px 20px}
  .anma-campagna .faq-question{width:100%;white-space:normal;gap:12px}
  .anma-campagna .faq-q-text{font-size:14px;flex-shrink:1}
  .anma-campagna .faq-answer{width:100%;font-size:14px;line-height:20px}

  /* ===== CTA finale ===== */
  .anma-campagna .final-cta{height:auto;gap:20px;padding:48px 20px}
  .anma-campagna .final-cta-title{font-size:28px;white-space:normal}
  .anma-campagna .final-cta-sub{width:100%;font-size:15px}
  .anma-campagna .final-cta-row{width:100%;height:auto;flex-direction:column;gap:10px;overflow:visible}
  .anma-campagna .btn-white,
  .anma-campagna .btn-outline-secondary{width:100%;flex-shrink:1;padding:0 20px}
  .anma-campagna .btn-white span,
  .anma-campagna .btn-outline-secondary span{font-size:17px;white-space:normal}
}

@media (max-width:359px){
  .anma-campagna .hero-title{font-size:28px;line-height:34px}
  .anma-campagna .section-title{font-size:24px;line-height:30px}
  .anma-campagna .th-mc,.anma-campagna .th-form,
  .anma-campagna .td-cell,.anma-campagna .td-cell--narrow{width:48px;flex:0 0 48px}
  .anma-campagna .benefits-thead,
  .anma-campagna .benefits-row{padding:12px 10px}
}

/* ---- Fix 2026-08-14 ----
   `.anma-campagna` porta `min-width: var(--max)` = 1440px fuori da
   qualsiasi media query, eredita dal mockup HTML da cui il CSS e'
   stato trascritto verbatim. E' un pavimento rigido che annullava
   tutte le 71 regole responsive del file: il contenitore radice non
   poteva scendere sotto i 1440px e da mobile si vedeva un quarto di
   pagina. Va tolto prima di ogni altra cosa.
   `img{max-width:none}` (stessa origine) disattivava il fallback
   responsive sulle immagini.
   `.title-block`/`.section-title` restavano a 900px anche dopo. */
@media (max-width:1439px){
  .anma-campagna{min-width:0}
  .anma-campagna img{max-width:100%}
  .anma-campagna .title-block,
  .anma-campagna .enrollment-title{width:100%;max-width:100%}
  .anma-campagna .section-title,
  .anma-campagna .final-cta-title{width:100%;max-width:100%}
}

/* ---- Fix da revisione indipendente 2026-08-14 ----
   Le intestazioni "MEDICO COMPETENTE" e "IN FORMAZIONE" misurano 55px
   in colonne da 48-56 con overflow:visible e nessun gap: a 320px si
   sovrapponevano di 7px, a 375 restavano a 0,6px l'una dall'altra e si
   leggevano come una parola sola. Colonne piu' larghe, etichette che
   vanno a capo e un gap esplicito fra le celle. */
@media (max-width:767px){
  .anma-campagna .benefits-thead,
  .anma-campagna .benefits-row{gap:10px}
  .anma-campagna .th-mc,
  .anma-campagna .th-form{width:66px;flex:0 0 66px;white-space:normal;line-height:1.25;word-break:normal;overflow-wrap:anywhere}
  .anma-campagna .td-cell,
  .anma-campagna .td-cell--narrow{width:66px;flex:0 0 66px}
}
@media (max-width:359px){
  .anma-campagna .benefits-thead{font-size:9px;letter-spacing:.3px}
  .anma-campagna .th-mc,
  .anma-campagna .th-form,
  .anma-campagna .td-cell,
  .anma-campagna .td-cell--narrow{width:58px;flex:0 0 58px}
  .anma-campagna .td-benefit{font-size:13px}
  .anma-campagna .td-text{font-size:12px}
}