/* ══════════════════════════════
   MODULO: Layout
   Variabili strutturali, reset, contenitori, zone
══════════════════════════════ */

/* ── Variabili layout ── */
:root {
  --panel-w:   360px;
  --tab-w:     52px;
  --panel-dur: .35s;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); transition: background .4s, color .4s; }
a { text-decoration: none; color: inherit; }

/* ── Main ── */
.main { flex: 1; overflow: hidden; position: relative; }
.main-desktop { display: flex; }
.main-mobile  { display: none; }

/* ── Contenitore pannello + pagina interna ── */
.page-with-panel { display: flex; }

/* ── Zona B immagine ── */
.zone-b { flex: 1; position: relative; overflow: hidden; transition: flex .35s ease; }
.zone-b img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; object-fit: cover; object-position: center; }
.zone-b::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 35%; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); z-index: 1; pointer-events: none; transition: background .4s; }
.zone-b::after  { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 35%; background: linear-gradient(to left,  var(--bg) 0%, transparent 100%); z-index: 1; pointer-events: none; transition: background .4s; }

/* ── Zona C CTA ── */
.zone-c { flex: 0 0 22%; display: flex; flex-direction: column; justify-content: center; padding: 48px 40px 48px 32px; border-left: 1px solid var(--border); }
.cta-divider { width: 36px; height: 1px; background: var(--accent2); margin: 24px 0; opacity: 0; animation: riseIn .6s .6s forwards; }
.cta-enter { display: inline-flex; align-items: center; gap: 16px; opacity: 0; transform: translateY(14px); animation: riseIn .6s .7s forwards; }
.cta-enter-text { font-size: var(--fs-ui); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text); transition: color .25s; }
.cta-enter-line { width: 40px; height: 1px; background: var(--accent); transition: width .35s; }
.cta-enter:hover .cta-enter-text { color: var(--accent); }
.cta-enter:hover .cta-enter-line { width: 64px; }

/* ── Zona mobile ── */
.zone-mobile { display: flex; flex-direction: column; }
.zone-mobile-img { position: relative; width: 100%; height: 70vw; overflow: hidden; }
.zone-mobile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.zone-mobile-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, var(--bg), transparent); }
.zone-mobile-cta { padding: 20px 28px 32px; text-align: center; }
.zone-mobile-cta .cta-eyebrow  { animation: none; opacity: 1; transform: none; }
.zone-mobile-cta .cta-title    { font-size: 38px; animation: none; opacity: 1; transform: none; }
.zone-mobile-cta .cta-divider  { margin: 16px auto; animation: none; opacity: 1; }
.zone-mobile-cta .cta-desc     { animation: none; opacity: 1; transform: none; }
.zone-mobile-cta .cta-enter    { justify-content: center; animation: none; opacity: 1; transform: none; }

/* ── Divider decorativo ── */
.h-divider { width: 1px; background: var(--border); flex-shrink: 0; align-self: stretch; transition: background .4s; }
.storia-intro-line { width: 48px; height: 1px; background: var(--accent2); margin: 20px auto 0; }

/* ── Zona C con sfondo immagine ── */
.zone-c--storia {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.zone-c-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: .88;
  transition: background .4s;
  pointer-events: none;
}
.zone-c-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.storia-sottotitolo {
  font-size: var(--fs-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 400;
}