/* Archivio Video — nuovo banner editoriale RC88 */
.archive-banner-new {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 28px 4vw 36px;
  border: 1px solid rgba(255, 220, 164, .48);
  border-radius: 32px;
  background:
    linear-gradient(105deg, rgba(44, 3, 16, .3), transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(255, 128, 85, .44), transparent 27%),
    radial-gradient(circle at 18% 110%, rgba(255, 185, 63, .18), transparent 31%),
    linear-gradient(122deg, #4b061b 0%, #790b29 38%, #b91836 72%, #d9473e 100%);
  color: #fff;
  box-shadow: 0 27px 60px rgba(91, 8, 31, .32), 0 1px 0 rgba(255, 255, 255, .22) inset;
}

.archive-banner-new::before {
  position: absolute;
  z-index: -1;
  top: -44%;
  right: -12%;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 237, 193, .28);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 20px rgba(255, 237, 193, .055), 0 0 0 58px rgba(255, 237, 193, .035), 0 0 0 112px rgba(255, 237, 193, .022);
}

.archive-banner-new::after {
  position: absolute;
  z-index: -1;
  right: 41%;
  bottom: -72%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 190, 76, .14);
  content: "";
  filter: blur(22px);
}

.archive-banner-new-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  min-height: 292px;
  padding: clamp(26px, 4vw, 46px) clamp(24px, 5vw, 64px);
}

.archive-banner-new-copy {
  position: relative;
  z-index: 1;
  max-width: 670px;
}

.archive-banner-new-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 132px;
  height: 8px;
  margin-bottom: 18px;
}

.archive-banner-new-rule span {
  display: block;
  height: 2px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #ffd36c);
}

.archive-banner-new-rule span:last-child { background: linear-gradient(90deg, #ffd36c, transparent); }
.archive-banner-new-rule i { width: 7px; height: 7px; border: 1px solid #ffe4a0; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 5px rgba(255, 209, 102, .14); }

.archive-banner-new h2 {
  max-width: 10ch;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2.15rem, 4.8vw, 4.15rem);
  font-weight: 950;
  line-height: .9;
  letter-spacing: -.07em;
  text-wrap: balance;
  text-shadow: 0 5px 24px rgba(46, 0, 14, .28);
}

.archive-banner-new-copy > p {
  max-width: 55ch;
  margin: 0;
  color: rgba(255, 249, 239, .9);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.58;
}

.archive-banner-new-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 22px;
  margin-top: 20px;
}

.archive-banner-new-promises > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff6e8;
  font-size: .78rem;
  font-weight: 850;
}

.archive-banner-new-promises b {
  display: inline-grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 221, 145, .75);
  border-radius: 50%;
  background: rgba(255, 216, 111, .12);
  color: #ffd36b;
  font-size: .62rem;
}

.archive-banner-new-action {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 17px;
  min-width: 0;
}

.archive-banner-new-screen {
  position: relative;
  display: flex;
  width: min(100%, 350px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid rgba(255, 239, 204, .86);
  border-radius: 22px;
  background: linear-gradient(145deg, #1c0712 0%, #59132e 51%, #c9473f 100%);
  box-shadow: 0 23px 42px rgba(42, 0, 14, .42), 0 0 0 7px rgba(255, 226, 167, .1), 0 0 0 8px rgba(255, 255, 255, .13) inset;
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transform: translateZ(0) rotate(1deg);
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.archive-banner-new-screen:hover { filter: saturate(1.1) brightness(1.07); box-shadow: 0 31px 54px rgba(42, 0, 14, .48), 0 0 0 8px rgba(255, 226, 167, .15), 0 0 0 1px rgba(255, 255, 255, .2) inset; transform: translateY(-7px) rotate(0deg); }
.archive-banner-new-screen:active { transform: translateY(-2px) rotate(0deg) scale(.99); }
.archive-banner-new-screen:focus-visible { outline: 4px solid #ffd166; outline-offset: 6px; }

.archive-banner-new-screen::before {
  position: absolute;
  top: 0;
  left: 16%;
  width: 1px;
  height: 100%;
  background: rgba(255, 232, 177, .18);
  box-shadow: 112px 0 rgba(255, 232, 177, .1), 224px 0 rgba(255, 232, 177, .08);
  content: "";
}

.archive-banner-new-screen-shine { position: absolute; top: -30%; left: -45%; width: 65%; height: 180%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .15), transparent); transform: rotate(17deg); transition: left .6s ease; }
.archive-banner-new-screen:hover .archive-banner-new-screen-shine { left: 115%; }

.archive-banner-new-screen-top { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: rgba(255, 248, 232, .92); font-size: .67rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.archive-banner-new-live { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 5px rgba(255, 209, 102, .17); }

.archive-banner-new-screen-scene { position: absolute; right: 0; bottom: 78px; left: 0; height: 45%; overflow: hidden; opacity: .88; }
.archive-banner-new-screen-scene::before { position: absolute; right: -8%; bottom: 0; width: 75%; height: 95%; border-radius: 50% 50% 0 0; background: linear-gradient(145deg, rgba(255, 222, 141, .64), rgba(224, 61, 58, .1)); content: ""; transform: rotate(-12deg); }
.archive-banner-new-screen-scene::after { position: absolute; bottom: 4px; left: 4%; width: 77%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 234, 177, .8), transparent); content: ""; }
.archive-banner-new-screen-scene i { position: absolute; right: 23%; bottom: 8px; width: 3px; height: 57%; background: #ffe9b1; box-shadow: 0 0 0 4px rgba(255, 233, 177, .08); }
.archive-banner-new-screen-scene i::before { position: absolute; top: -18px; left: -12px; width: 27px; height: 20px; border-radius: 50% 50% 0 0; background: #ffe9b1; content: ""; }
.archive-banner-new-screen-scene b { position: absolute; right: 11%; bottom: 9px; width: 22%; height: 31%; border-radius: 50% 50% 0 0; background: rgba(58, 5, 24, .8); }
.archive-banner-new-screen-scene em { position: absolute; bottom: 2px; left: 13%; width: 30%; height: 29%; border-radius: 55% 45% 0 0; background: rgba(57, 4, 23, .76); transform: skewX(-18deg); }

.archive-banner-new-play { position: absolute; top: 41%; right: 22px; z-index: 2; display: grid; width: 65px; height: 65px; place-items: center; border: 1px solid rgba(255, 255, 255, .84); border-radius: 50%; background: rgba(255, 255, 255, .15); box-shadow: 0 9px 23px rgba(28, 0, 10, .32), 0 0 0 8px rgba(255, 255, 255, .08); transform: translateY(-50%); }
.archive-banner-new-play span { width: 0; height: 0; margin-left: 5px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; }

.archive-banner-new-cta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 66px; padding: 0 19px; border: 1px solid #fff0c5; border-radius: 13px; background: linear-gradient(180deg, #fff8e3, #ffe5a0); color: #850d2a; box-shadow: 0 14px 28px rgba(57, 2, 19, .35); font-size: clamp(.82rem, 1.45vw, 1rem); font-weight: 1000; letter-spacing: .025em; text-transform: uppercase; }
.archive-banner-new-cta > span:last-child { font-size: 1.45rem; line-height: 1; }
.archive-banner-new-note { max-width: 42ch; color: rgba(255, 247, 230, .8); font-size: .75rem; line-height: 1.4; text-align: center; }

@media (max-width: 760px) {
  .archive-banner-new { margin: 27px 4vw 36px; border-radius: 25px; }
  .archive-banner-new-inner { grid-template-columns: 1fr; gap: 23px; min-height: 0; padding: 26px 18px 22px; }
  .archive-banner-new h2 { max-width: 11ch; font-size: clamp(2.05rem, 10vw, 3.1rem); }
  .archive-banner-new-copy > p { font-size: .96rem; }
  .archive-banner-new-promises { gap: 8px 13px; margin-top: 16px; }
  .archive-banner-new-promises > span { font-size: .71rem; }
  .archive-banner-new-promises b { width: 25px; height: 25px; }
  .archive-banner-new-screen { width: 100%; aspect-ratio: 16 / 9; padding: 13px; transform: none; }
  .archive-banner-new-screen:hover { transform: translateY(-4px); }
  .archive-banner-new-play { right: 17px; width: 57px; height: 57px; }
  .archive-banner-new-cta { min-height: 59px; padding: 0 15px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-banner-new-screen, .archive-banner-new-screen-shine { transition: none; }
}