/* Metric — custom.css
 * CSS per blocchi custom / override sito specifico.
 * Suggerimenti:
 * - evita selettori troppo generici
 * - usa classi "namespace" tipo .metric-*
 */

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1300px;

}

.metric-header-cta {
    background: #0033cc;
}

.tutor-toggle-more-collapsed:before {
    background: linear-gradient(rgb(245 235 221 / 0%) 1.31%, rgb(245 235 221 / 45%) 15.41%, #f5ebdd 100%);
}


.metric-hero {
  --metric-hero-bg: #0033cc;
  --metric-hero-ink: #f5f8ff;
  --metric-hero-blue: #a8d8ff;
  --metric-hero-gray: #c4d8ff;
  --metric-hero-line: #ffffff26;
  --metric-hero-font: 'metric-hero-dm-sans', 'DM Sans', Arial, sans-serif;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--metric-hero-ink);
  background: var(--metric-hero-bg);
  color-scheme: dark;
  font: 400 1rem/1.5 var(--metric-hero-font);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.metric-hero, .metric-hero *, .metric-hero *::before, .metric-hero *::after { box-sizing: border-box; }
.metric-hero ::selection { color: var(--metric-hero-bg); background: #e2efff; }
.metric-hero .metric-hero__inner { position: relative; max-width: 1660px; margin: 0 auto; padding: 62px 5.5% 30px; }
.metric-hero .metric-hero__stage { position: relative; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 34fr); column-gap: 8%; align-items: start; }
.metric-hero .metric-hero__heading { position: relative; z-index: 2; min-width: 0; }
.metric-hero .metric-hero__eyebrow { position: relative; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 4px 8px; margin-bottom: 14px; background: #1238bd; color: #c7e4ff; font: 400 .75rem/1.4 var(--metric-hero-font); letter-spacing: .9px; }
.metric-hero .metric-hero__asterisk { display: inline-block; font: 400 16px/1 var(--metric-hero-font); color: var(--metric-hero-blue); }
.metric-hero .metric-hero__title { display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; color: var(--metric-hero-ink); font: 400 clamp(2.7rem, 4.7vw, 4.875rem)/1.08 var(--metric-hero-font); letter-spacing: -.045em; text-transform: none; text-decoration: none; }
.metric-hero .metric-hero__title::before, .metric-hero .metric-hero__title::after { content: none; }
.metric-hero .metric-hero__line { display: block; padding: .02em .035em .12em; margin: -.02em -.035em -.12em; overflow: hidden; }
.metric-hero .metric-hero__reveal { display: block; }
.metric-hero .metric-hero__description { position: relative; z-index: 2; min-width: 0; padding-top: 1px; }
.metric-hero .metric-hero__lead, .metric-hero .metric-hero__detail { display: block; margin: 0; padding: 0; color: var(--metric-hero-gray); text-align: left; font: 400 clamp(1rem, 1.35vw, 1.1875rem)/1.48 var(--metric-hero-font); letter-spacing: -.25px; text-transform: none; }
.metric-hero .metric-hero__detail { margin-top: 18px; font-size: 1rem; line-height: 1.55; }
.metric-hero .metric-hero__emphasis { color: #e6efff; font-weight: 400; }
.metric-hero .metric-hero__controls { display: block; margin-top: 24px; }
.metric-hero .metric-hero__controls[hidden] { display: none; }
.metric-hero .metric-hero__next { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-width: 44px; min-height: 48px; margin: 0; padding: 8px 8px 8px 18px; border: 1px solid #dbe8ff; border-radius: 0; box-shadow: none; color: #173cae; background: #f3f7ff; font: 500 .875rem/1.3 var(--metric-hero-font); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.metric-hero .metric-hero__next::before, .metric-hero .metric-hero__next::after { content: none; }
.metric-hero .metric-hero__next:hover { color: #123198; background: #dceaff; box-shadow: none; }
.metric-hero .metric-hero__next:focus-visible { outline: 2px solid #ffffff; outline-offset: 5px; }
.metric-hero .metric-hero__arrow { display: inline-grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; color: #ffffff; background: var(--metric-hero-bg); font: 400 22px/1 var(--metric-hero-font); }
.metric-hero .metric-hero__visual { position: relative; min-width: 0; margin-top: 24px; }
.metric-hero .metric-hero__art { position: relative; height: 420px; background: radial-gradient(ellipse at 53% 54%, #6399f628 0%, transparent 62%); }
.metric-hero .metric-hero__art::before { content: ''; position: absolute; inset: 21% -6% 4%; pointer-events: none; opacity: .22; background-image: linear-gradient(#97caff28 1px, transparent 1px), linear-gradient(90deg, #97caff28 1px, transparent 1px); background-size: 56px 56px; transform: perspective(650px) rotateX(64deg); mask-image: radial-gradient(ellipse at center, #000 12%, transparent 70%); }
.metric-hero .metric-hero__coordinates { position: absolute; top: 28px; left: 0; right: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; color: #b5d6ff; font: 400 .75rem/1.4 var(--metric-hero-font); letter-spacing: .6px; }
.metric-hero .metric-hero__perspective { position: absolute; inset: 42px 0 20px; display: grid; place-items: center; perspective: 1100px; }
.metric-hero .metric-hero__pointer-plane { display: grid; place-items: center; transform-style: preserve-3d; }
.metric-hero .metric-hero__geometry { position: relative; width: clamp(240px, 23vw, 325px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateY(-12deg) rotateZ(-34deg); }
.metric-hero .metric-hero__frame { position: absolute; inset: 0; border: 1px solid var(--metric-hero-blue); border-radius: 2px; transform-style: preserve-3d; backface-visibility: visible; box-shadow: 0 0 8px #b4ddff0b; }
.metric-hero .metric-hero__art-baseline { position: relative; display: flex; align-items: center; gap: 24px; padding-top: 12px; color: var(--metric-hero-gray); }
.metric-hero .metric-hero__art-rule { flex: 1; height: 1px; background: var(--metric-hero-line); }
.metric-hero .metric-hero__scene-meta { display: flex; align-items: center; gap: 12px; font: 400 .75rem/1.4 var(--metric-hero-font); }
.metric-hero .metric-hero__scene-number { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #b2d6ff66; font: 400 .75rem/1 var(--metric-hero-font); color: #e9f6ff; }
.metric-hero .metric-hero__scene-caption { color: var(--metric-hero-gray); }
.metric-hero .metric-hero__heading-note { color: var(--metric-hero-gray); font: 400 .75rem/1.4 var(--metric-hero-font); }
.metric-hero .metric-hero__satellite { position: absolute; z-index: 1; pointer-events: none; color: var(--metric-hero-blue); }
.metric-hero .metric-hero__satellite--orbit { width: 52px; height: 52px; top: 26%; left: 12%; }
.metric-hero .metric-hero__satellite--orbit span { display: block; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
.metric-hero .metric-hero__satellite--orbit span:nth-child(2) { transform: rotateY(65deg); }
.metric-hero .metric-hero__satellite--orbit span:nth-child(3) { transform: rotateX(65deg); }
.metric-hero .metric-hero__satellite--cross { width: 22px; height: 22px; top: 33%; right: 15%; opacity: .8; }
.metric-hero .metric-hero__satellite--cross span { display: block; position: absolute; width: 22px; height: 1px; top: 10px; background: currentColor; }
.metric-hero .metric-hero__satellite--cross span:last-child { transform: rotate(90deg); }
.metric-hero .metric-hero__satellite--tiles { width: 33px; height: 33px; left: 22%; top: 70%; opacity: .6; }
.metric-hero .metric-hero__satellite--tiles span { display: block; position: absolute; inset: 0; border: 1px solid currentColor; transform: rotate(35deg); }
.metric-hero .metric-hero__satellite--tiles span:nth-child(2) { transform: translate(6px, -6px) rotate(35deg); }
.metric-hero .metric-hero__satellite--tiles span:nth-child(3) { transform: translate(12px, -12px) rotate(35deg); }
@media (min-width: 1500px) {
  .metric-hero .metric-hero__inner { padding-top: 72px; padding-bottom: 38px; }
  .metric-hero .metric-hero__visual { margin-top: 34px; }
  .metric-hero .metric-hero__art { height: 470px; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  .metric-hero .metric-hero__inner { padding-top: 45px; }
  .metric-hero .metric-hero__stage { grid-template-columns: minmax(0, 54fr) minmax(0, 40fr); column-gap: 6%; }
  .metric-hero .metric-hero__title { font-size: clamp(2.4rem, 4.6vw, 3rem); }
  .metric-hero .metric-hero__lead { font-size: 1rem; }
  .metric-hero .metric-hero__art { height: 390px; }
  .metric-hero .metric-hero__geometry { width: 255px; }
}
@media (max-width: 760px) {
  .metric-hero .metric-hero__inner { padding: 32px 6% 26px; }
  .metric-hero .metric-hero__stage { grid-template-columns: 1fr; row-gap: 30px; }
  .metric-hero .metric-hero__eyebrow { font-size: .6875rem; letter-spacing: .5px; padding: 4px 7px; margin-bottom: 16px; }
  .metric-hero .metric-hero__title { font-size: clamp(2.125rem, 6.9vw, 3.25rem); line-height: 1.12; letter-spacing: -.045em; }
  .metric-hero .metric-hero__description { padding: 0; }
  .metric-hero .metric-hero__lead { font-size: 1.0625rem; line-height: 1.55; }
  .metric-hero .metric-hero__detail { font-size: 1rem; margin-top: 16px; }
  .metric-hero .metric-hero__controls { margin-top: 22px; }
  .metric-hero .metric-hero__visual { margin-top: 28px; }
  .metric-hero .metric-hero__art { height: 335px; }
  .metric-hero .metric-hero__coordinates { top: 4px; font-size: .6875rem; }
  .metric-hero .metric-hero__figure-angle { display: none; }
  .metric-hero .metric-hero__perspective { inset: 40px 0 22px; }
  .metric-hero .metric-hero__pointer-plane { scale: .78; }
  .metric-hero .metric-hero__geometry { width: 245px; }
  .metric-hero .metric-hero__satellite--orbit { width: 28px; height: 28px; top: 20%; left: 1%; opacity: .55; }
  .metric-hero .metric-hero__satellite--cross { top: 20%; right: 4%; opacity: .65; }
  .metric-hero .metric-hero__satellite--tiles { width: 15px; height: 15px; top: 80%; left: 4%; opacity: .4; }
  .metric-hero .metric-hero__art-baseline { gap: 14px; }
  .metric-hero .metric-hero__heading-note { display: none; }
  .metric-hero .metric-hero__scene-meta { font-size: .75rem; }
}
@media (max-width: 380px) {
  .metric-hero .metric-hero__title { font-size: 1.875rem; }
  .metric-hero .metric-hero__art { height: 300px; }
  .metric-hero .metric-hero__geometry { width: 205px; }
}
@media (prefers-reduced-motion: reduce) {
  .metric-hero *, .metric-hero *::before, .metric-hero *::after { animation: none !important; transition: none !important; }
}