/* ==========================================================================
   congressi.ems.srl — forma propria della pagina
   Volume di ricerca quasi nullo: questa pagina non vive di Search, e' la
   destinazione della Demand Gen video, delle mail e del blog. Chi arriva e' un
   organizzatore professionale o un provider: decide con mesi di anticipo,
   valuta su capitolato, paga su budget di progetto. Parlargli come alla cena
   di Natale lo fa uscire alla prima riga.
   Per questo la pagina e' l'unica CHIARA delle cinque e legge come un
   documento: prima schermata su carta, sezioni numerate separate da filetti
   sottili, poca decorazione. Le altre quattro aprono in scuro.
   ========================================================================== */

/* Su fondo chiaro la pillola di vetro della testata perde contrasto: qui la
   barra e' piena fin dal caricamento. */
.site-header .bar {
  background: color-mix(in srgb, var(--navy-950) 96%, transparent);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 14px 40px -26px rgba(0,0,0,0.6);
}

/* ---------- Prima schermata: documento, non manifesto ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  padding-top: clamp(8rem, 15vw, 10.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero-grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.036em;
  color: var(--navy); margin: 1.4rem 0 1.2rem; max-width: 17ch;
}
.hero-sub { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--muted); line-height: 1.6; max-width: 44ch; }
.hero-near {
  margin-top: 1.6rem; padding: 1.05rem 1.2rem;
  border-left: 3px solid var(--cyan-ink);
  background: #fff; border-radius: 0 14px 14px 0;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 0.98rem; color: var(--ink); line-height: 1.58;
}
.hero-cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: center; }
.hero .trust-row { margin-top: 1.7rem; }

/* La foto sta dentro un doppio bordo, come una tavola allegata al documento */
.hero-figure { margin: 0; }
.hero-figure .frame {
  padding: 9px; border-radius: calc(var(--radius) + 9px);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 44px 90px -50px color-mix(in srgb, var(--navy) 62%, transparent);
}
.hero-figure .frame img { border-radius: var(--radius); width: 100%; height: auto; }
.hero-figure figcaption { margin-top: 0.9rem; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }

/* ---------- Il congresso, sala per sala: sezioni numerate ---------- */
.doc-band { background: #fff; }
.doc-head { max-width: 48rem; margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem); }
.doc-head h2 { font-size: clamp(2rem, 3.9vw, 2.9rem); margin: 1.1rem 0 1rem; }
.doc-head p { font-size: 1.06rem; color: var(--muted); line-height: 1.66; }

.doc-sec { border-top: 1px solid var(--line-strong); padding-block: clamp(2rem, 3.6vw, 2.8rem); }
.doc-sec:last-of-type { border-bottom: 1px solid var(--line-strong); }
.doc-sec-grid { display: grid; grid-template-columns: 0.34fr 0.66fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.doc-num {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--cyan-ink);
}
.doc-sec h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.025em; margin-top: 0.5rem; color: var(--navy); }
.doc-sec p { font-size: 1.02rem; color: var(--muted); line-height: 1.66; max-width: 66ch; }
.doc-sec p + p { margin-top: 0.9rem; }
.doc-list { margin-top: 1.2rem; display: grid; gap: 0.7rem; }
.doc-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1rem; color: var(--ink); line-height: 1.5; }
.doc-list li svg { width: 18px; height: 18px; color: var(--cyan-ink); flex: none; margin-top: 0.2rem; }

/* ---------- La regia: unica fascia scura della pagina ---------- */
.regia-band { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.regia-photo { position: absolute; inset: 0; z-index: -2; }
.regia-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.regia-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(94deg, color-mix(in srgb, var(--navy-950) 95%, transparent) 0%, color-mix(in srgb, var(--navy-950) 76%, transparent) 54%, color-mix(in srgb, var(--navy) 40%, transparent) 100%);
}
.regia-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.regia-wrap h2 { font-size: clamp(1.95rem, 3.7vw, 2.7rem); margin: 1.1rem 0 1.1rem; }
.regia-wrap p { font-size: 1.05rem; color: rgba(255,255,255,0.86); line-height: 1.64; }
.regia-points { display: grid; gap: 1rem; }
.regia-point {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border-radius: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}
.regia-point:hover { transform: translateX(4px); background: rgba(255,255,255,0.08); }
.regia-point svg { width: 20px; height: 20px; color: var(--cyan); flex: none; margin-top: 0.16rem; }
.regia-point p { font-size: 0.97rem; color: rgba(255,255,255,0.88); line-height: 1.5; }

/* ---------- Preventivo ---------- */
.price-band { background: var(--paper); }
.price-wrap { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.price-wrap h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 1.1rem 0 1rem; }
.price-wrap p.lead { font-size: 1.05rem; color: var(--muted); line-height: 1.64; }
/* Il metodo di quotazione occupa due paragrafi (copy v3): senza questa riga
   si toccano, perche' il reset azzera i margini verticali dei paragrafi. */
.price-wrap p.lead + p.lead { margin-top: 0.9rem; }
.price-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.price-rail { border-top: 1px solid var(--line-strong); }
.price-row {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.1rem; align-items: baseline;
  padding: 1.15rem 0.2rem; border-bottom: 1px solid var(--line);
  /* Lo scorrimento all'hover si fa con transform, mai con padding: animare
     una proprieta' di layout costringe il browser a ricalcolare la pagina a
     ogni frame, e sul telefono si vede. */
  transition: transform 0.42s var(--ease), background 0.42s var(--ease);
}
.price-row:hover { transform: translateX(0.6rem); background: #fff; }
.price-row .pn { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--cyan-ink); letter-spacing: 0.06em; }
.price-row h3 { font-size: 1.08rem; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.price-row p { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }

/* ---------- Modulo ---------- */
.quote-sec { position: relative; background: linear-gradient(172deg, var(--navy) 0%, var(--navy-950) 100%); color: #fff; overflow: hidden; isolation: isolate; }
.quote-sec .strip-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(96px); pointer-events: none; width: 400px; height: 400px; background: color-mix(in srgb, var(--cyan) 44%, transparent); opacity: 0.2; bottom: -170px; left: -100px; }
.quote-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 1.1rem 0 1rem; }
.quote-copy p { font-size: 1.04rem; color: rgba(255,255,255,0.84); line-height: 1.62; }
.quote-steps { margin-top: 1.8rem; display: grid; gap: 0.75rem; }
.qstep { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.97rem; color: rgba(255,255,255,0.84); line-height: 1.5; }
.qstep svg { width: 19px; height: 19px; color: var(--cyan); flex: none; margin-top: 0.2rem; }

/* ---------- Apertura al resto ---------- */
.bridge-band { background: #fff; }
.bridge-head { max-width: 48rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.bridge-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 1.1rem 0 1rem; }
.bridge-head p { font-size: 1.05rem; color: var(--muted); line-height: 1.64; }
.bridge3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bridge-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem; border-radius: 18px;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.bridge-link:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--navy) 55%, transparent); }
.bridge-link strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--navy); }
.bridge-link span.sub { font-size: 0.88rem; color: var(--muted); }
.bridge-link .ico-pill { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--cyan) 24%, #fff); color: var(--navy); transition: transform 0.45s var(--ease), background 0.35s var(--ease); }
.bridge-link:hover .ico-pill { transform: translate(3px, -1px); background: var(--cyan); }

/* ---------- Domande ---------- */
.faq-sec { background: var(--paper); }
.faq-wrap { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-intro h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 1.1rem 0 1rem; }
.faq-intro p { font-size: 1.03rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.4rem; }
.faq-intro .link-quiet { color: var(--navy); }

/* ---------- Adattamento ---------- */
@media (max-width: 980px) {
  .hero-grid, .doc-sec-grid, .regia-wrap, .price-wrap, .quote-grid, .bridge3, .faq-wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero h1 { max-width: 20ch; }
  /* 2026-10-19: la foto scende sotto il testo. Prima apriva la pagina e
     spingeva titolo, prezzo e pulsante fuori dalla prima schermata. */
  .hero-figure { order: 0; }
  .doc-sec-grid { gap: 0.9rem; }
}

/* PREZZO IN PRIMA SCHERMATA (2026-10-19). Qui la prima schermata e' chiara:
   il prezzo prende l'inchiostro e il blu della pagina, non i colori su scuro. */
.hero-price { color: var(--ink); }
.hero-price strong { color: var(--navy); }

/* MOBILE, PRIMA SCHERMATA (2026-10-19). Con prezzo e titolo su tre righe il
   link secondario dell'apertura finiva sotto la barra fissa Chiama/Preventivo:
   misura-clic-cta.mjs lo contava come clic morto. La sezione a cui porta e'
   la prossima scorrendo: su mobile il link si toglie, il pulsante resta. */
@media (max-width: 767px) { .hero-cta .link-quiet { display: none; } }