/*
 * Modulo6 — foglio autonomo. Nessuna dipendenza da altri moduli o da Bootstrap.
 * Ogni selettore è limitato a .design-modulo6.
 * Colori, font, dimensioni e spazi sono variabili del tab Aspetto, per istanza.
 * Per un override singolo usare #modulo6-module-ID oppure un'ancora unica.
 * Le regole responsive seguono anche la larghezza della posizione Helix.
 */
.design-modulo6 {
  width: 100%; margin: 0; padding: 0;
  font-family: var(--design-text-font, Arial, Helvetica, sans-serif);
  font-size: 16px; line-height: 1.5;
  color: var(--design-body, #20261f); background: var(--design-background, #fbfaf6);
  scroll-margin-top: 100px;
}
.design-modulo6, .design-modulo6 * { box-sizing: border-box; }
.design-modulo6 [hidden] { display: none !important; }
.design-modulo6 .dg-wrap { width: 100%; max-width: var(--design-max-width, 1600px); margin: 0 auto; container: modulo6 / inline-size; }
.design-modulo6 p { margin: 0; }
.design-modulo6 :is(a, button):focus-visible { outline: 3px solid var(--design-accent, currentColor); outline-offset: 4px; }
.design-modulo6 .dg-inner { min-width: 0; overflow-wrap: anywhere; }
.design-modulo6 .dg-headline { font-family: var(--design-display-font, Georgia, serif); color: var(--design-title, #20261f); }
.design-modulo6 .dg-headline :is(em, i) { color: var(--design-accent, #912535); font-style: italic; }

/* 1. Invito centrato: l'altezza minima segue le proporzioni del riferimento. */
.design-modulo6 .dg-inner { min-height: 266px; padding: var(--design-padding-top, 52px) 24px var(--design-padding-bottom, 44px); text-align: center; }
.design-modulo6 .dg-eyebrow { color: var(--design-eyebrow); font-size: 6px; font-weight: 500; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.design-modulo6 .dg-headline { max-width: 1100px; margin: 0 auto; font-size: var(--design-heading-size, 36px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }

/* 2. Pulsante chiaro su verde; l'URL viene gestito manualmente nel backend. */
.design-modulo6 .dg-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 37px; margin-top: 18px; padding: 10px 18px; border: 1px solid transparent; border-radius: 2px; background: var(--design-button-bg); color: var(--design-button-text); font: 600 10px/1.4 var(--design-text-font, Arial, sans-serif); text-align: center; text-decoration: none; }
.design-modulo6 .dg-button:hover { filter: brightness(.94); }

/* 3. Su schermi stretti aumenta la leggibilità dei testi piccoli e del pulsante. */
@container modulo6 (max-width: 900px) {
  .design-modulo6 .dg-eyebrow { font-size: 9px; }
  .design-modulo6 .dg-headline { font-size: min(var(--design-heading-size, 36px), 34px); }
  .design-modulo6 .dg-button { min-height: 44px; font-size: 13px; }
}
@container modulo6 (max-width: 520px) {
  .design-modulo6 .dg-headline { font-size: min(var(--design-heading-size, 36px), 30px); }
  .design-modulo6 .dg-eyebrow { letter-spacing: .13em; }
}
/* Fallback per browser senza container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 520px) { .design-modulo6 .dg-headline { font-size: 30px; } .design-modulo6 .dg-eyebrow { font-size: 9px; } .design-modulo6 .dg-button { min-height: 44px; font-size: 13px; } }
}