/* ============================================================
   DROP — la página interactiva de un CRTV (/crtv/<id>/)
   ------------------------------------------------------------
   Va DESPUÉS de minimal.css (usa sus colores, letras y barras).
   La usan los CRTV que tienen portada + celulares con video.

   Partes:
     .drop-hero     portada a pantalla completa: la ilustración se
                    mueve con el mouse / el celular, y en el celular
                    se arrastra de lado para ver a todos.
     .drop-spot     un personaje tocable (abre su carta).
     .drop-card     la carta que se abre, con brillo holográfico.
     .drop-feed     los celulares con los videos.
     .drop-viewer   el video a pantalla completa, estilo TikTok.
   ============================================================ */

.drop-body { background: var(--night); }
.drop-body .bg, .drop-body .tint { display: none; }

/* ===== PORTADA ===== */
.drop-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  cursor: grab;
}
.drop-hero.dragging { cursor: grabbing; }

/* El escenario tiene la proporción de la ilustración y siempre cubre la pantalla.
   Los personajes se ubican en % de la ilustración, así que no se descuadran. */
.drop-stage {
  --ratio: 1.718;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 100svh * var(--ratio));
  height: max(100svh, 100vw / var(--ratio));
  transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0) scale(var(--zoom, 1.06));
  transition: transform 1.4s var(--ease);
  will-change: transform;
}
.drop-hero.dragging .drop-stage { transition: none; }
.drop-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.drop-hero.focus .drop-stage > img { filter: brightness(.45) saturate(.7); }
.drop-stage > img { transition: filter .5s var(--ease); }

/* Velo para que el logo se lea y la portada se funda con lo de abajo. */
.drop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7, 13, 31, .55) 0%, rgba(7, 13, 31, 0) 18%),
    linear-gradient(to top, var(--night) 0%, rgba(7, 13, 31, .7) 16%, rgba(7, 13, 31, 0) 46%);
}

/* ===== PERSONAJES TOCABLES ===== */
.drop-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(54px, 7%, 120px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
/* El anillo que respira, para que se note que se puede tocar. */
.drop-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 0 rgba(255, 214, 0, .55), inset 0 0 18px rgba(255, 214, 0, .35);
  opacity: .0;
  transform: scale(.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.drop-hero.ready .drop-spot::before { animation: spot-ping 3.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes spot-ping {
  0%, 62% { opacity: 0; transform: scale(.7); box-shadow: 0 0 0 0 rgba(255, 214, 0, .55), inset 0 0 18px rgba(255, 214, 0, .35); }
  70% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); box-shadow: 0 0 0 22px rgba(255, 214, 0, 0), inset 0 0 18px rgba(255, 214, 0, 0); }
}
.drop-spot:hover::before, .drop-spot:focus-visible::before, .drop-spot.on::before {
  animation: none;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 6px rgba(255, 214, 0, .35), inset 0 0 18px rgba(255, 214, 0, .4);
}
.drop-spot:focus-visible { outline: none; }
.drop-spot span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 6px);
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #ffd400;
  color: #1b2a6b;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drop-spot:hover span, .drop-spot:focus-visible span, .drop-spot.on span { opacity: 1; transform: translate(-50%, 0); }

/* ===== LOGO Y BOTÓN ===== */
.drop-brand {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--clockbar) + clamp(2.5rem, 7vh, 5rem));
  transform: translateX(-50%);
  width: min(560px, 80vw, 58svh);
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.drop-logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float { 50% { transform: translateY(-8px) rotate(-.6deg); } }
.drop-cta {
  position: relative;
  margin-top: clamp(-.6rem, -1vw, -.2rem);
  display: grid;
  place-items: center;
  width: 50%;
  aspect-ratio: 900 / 527;
  pointer-events: auto;
  text-decoration: none;
  color: #1b2340;
}
.drop-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: cloud-drift 9s ease-in-out infinite;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
@keyframes cloud-drift { 50% { transform: translateX(10px) translateY(-4px) scale(1.02); } }
.drop-cta b {
  position: relative;
  font: 700 clamp(.82rem, 1.3vw, 1rem)/1 var(--mono);
  letter-spacing: .14em;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 20px rgba(20, 30, 70, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.drop-cta b i { display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.drop-cta:hover b, .drop-cta:focus-visible b { transform: scale(1.06); background: #fff; }
.drop-cta:hover b i { transform: translateY(3px); }
.drop-cta:hover img { filter: brightness(1.06); transform: scale(1.04); }
.drop-cta:focus-visible { outline: none; }
.drop-cta:focus-visible b { outline: 2px solid #ffd400; outline-offset: 3px; }
.drop-signature {
  width: 24%;
  min-width: 84px;
  height: auto;
  margin-top: .4rem;
  opacity: .92;
}

/* Lo que dice cómo se juega (cambia en el celular) */
.drop-hint {
  position: absolute;
  z-index: 3;
  top: calc(5.4rem + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(7, 13, 31, .55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font: .68rem/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  transition: opacity .6s var(--ease);
}
.drop-hint.gone { opacity: 0; pointer-events: none; }
/* En pantalla grande va abajo, para no tapar las caras de arriba. */
@media (min-width: 681px) {
  .drop-hint { top: auto; bottom: calc(var(--clockbar) + .8rem); }
}
.drop-hint .touch { display: none; }
@media (hover: none) { .drop-hint .mouse { display: none; } .drop-hint .touch { display: inline; } }

/* El código del CRTV y la vuelta al playground, arriba a la izquierda */
.drop-tag {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: calc(var(--clockbar) + 1rem);
  display: grid;
  gap: .35rem;
}
.drop-tag .text-link { color: var(--ink); }

/* ===== ENTRADA ===== */
.js .drop-hero .drop-logo { opacity: 0; transform: translateY(30px) scale(.92); }
.js .drop-hero .drop-cta, .js .drop-hero .drop-signature { opacity: 0; transform: translateY(18px); }
.js .drop-hero.ready .drop-logo {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ease) .25s, transform 1.4s cubic-bezier(.2, 1.5, .4, 1) .25s;
}
.js .drop-hero.ready .drop-cta, .js .drop-hero.ready .drop-signature {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease) .7s, transform 1s var(--ease) .7s;
}
.js .drop-hero.ready .drop-signature { transition-delay: .9s; }

/* ===== CARTA DE UN PERSONAJE ===== */
.drop-card-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 8, 22, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
  perspective: 1200px;
}
.drop-card-wrap.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.drop-card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 63 / 88;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(145deg, #ffe45c, #f2b700 45%, #ffe98a 70%, #d99a00);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.6) rotateZ(-8deg);
  transform-style: preserve-3d;
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .4s var(--ease);
}
.drop-card-wrap.open .drop-card { transform: rotateX(var(--rx)) rotateY(var(--ry)); opacity: 1; }
.drop-card-wrap.open .drop-card.tilting { transition: transform .12s linear, opacity .4s var(--ease); }
.drop-card-inner {
  position: relative;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #2a3b8f, #121b4a);
  color: #fff;
}
.drop-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .7rem .8rem .5rem;
  font: 700 1.15rem/1 "Inter Tight", sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.drop-card-top small { font: 700 .62rem/1 var(--mono); letter-spacing: .08em; color: #ffd400; }
.drop-card-art {
  position: relative;
  margin: 0 .7rem;
  border-radius: 6px;
  overflow: hidden;
  border: 3px solid #ffd400;
  background: #0b1236;
}
.drop-card-art img {
  position: absolute;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.drop-card-foot {
  padding: .65rem .8rem .8rem;
  display: grid;
  gap: .4rem;
  font: .62rem/1.3 var(--mono);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
}
.drop-card-foot b { color: #ffd400; font-weight: 700; }
/* Brillo holográfico que sigue al dedo o al mouse */
.drop-card-holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: .55;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%),
    linear-gradient(115deg, rgba(255, 0, 140, .0) 20%, rgba(255, 0, 140, .25) 35%, rgba(0, 220, 255, .25) 50%, rgba(255, 240, 0, .25) 65%, rgba(255, 240, 0, 0) 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--mx) var(--my);
}
.drop-card-nav {
  position: absolute;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
  align-items: center;
}
.drop-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .08);
  color: var(--ink);
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .08em;
  padding: .7rem .95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.drop-btn:hover { background: rgba(255, 255, 255, .18); }
.drop-btn:active { transform: scale(.96); }
.drop-btn:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; }
.drop-close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.1rem;
}

/* ===== EL DROP: los celulares ===== */
.drop-feed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter) clamp(9rem, 16vw, 13rem);
  scroll-margin-top: 0;
}
.drop-feed-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  background: var(--bgimg) center / cover no-repeat;
  transform: translate3d(0, var(--sy, 0px), 0) scale(1.08);
  will-change: transform;
}
.drop-feed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--night) 0%, rgba(7, 13, 31, .2) 22%, rgba(7, 13, 31, .1) 70%, rgba(7, 13, 31, .65) 100%);
}
.drop-feed-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.drop-feed-head img { height: clamp(36px, 5vw, 56px); width: auto; }
.drop-feed-head .heart { animation: heart-beat 2.4s ease-in-out infinite; }
@keyframes heart-beat { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.14); } 20% { transform: scale(.98); } 30% { transform: scale(1.08); } }

.drop-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1rem, 4vw, 3.5rem);
  max-width: 1100px;
  margin: 0 auto;
}
.drop-phone {
  --tx: 0deg; --ty: 0deg; --lift: 0px;
  position: relative;
  flex: 0 1 min(290px, 34svh);
  width: min(290px, 34svh, 70vw);
  aspect-ratio: 9 / 19;
  padding: 0;
  border: 0;
  border-radius: clamp(26px, 3.4vw, 42px);
  background: #050505;
  box-shadow:
    inset 0 0 0 2px #2a2a2a,
    0 30px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .06);
  cursor: pointer;
  transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.drop-phone:nth-child(2) { --lift: -1.6rem; }
.drop-phone:hover, .drop-phone:focus-visible {
  box-shadow: inset 0 0 0 2px #2a2a2a, 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 3px #ffd400;
  outline: none;
}
.drop-phone-screen {
  position: absolute;
  inset: clamp(7px, .9vw, 10px);
  border-radius: clamp(20px, 2.8vw, 34px);
  overflow: hidden;
  background: #111;
}
.drop-phone-screen img, .drop-phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drop-phone-screen img { transition: transform 6s linear; }
.drop-phone:hover .drop-phone-screen img { transform: scale(1.08); }
.drop-phone-screen video { opacity: 0; transition: opacity .4s var(--ease); }
.drop-phone.playing .drop-phone-screen video { opacity: 1; }
/* Isla y barra de abajo, para que parezca un celular de verdad */
.drop-phone-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 3.2%;
  border-radius: 999px;
  background: #000;
}
.drop-phone-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.15rem;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.drop-phone:hover .drop-phone-play { transform: translate(-50%, -50%) scale(1.12); }
.drop-phone.playing .drop-phone-play { opacity: 0; }
.drop-phone-cap {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  bottom: 5%;
  font: .62rem/1.3 var(--mono);
  letter-spacing: .04em;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.drop-phone-cap b { display: block; font-weight: 700; margin-bottom: .2rem; }

.drop-motto {
  display: block;
  width: min(560px, 80vw);
  height: auto;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}

/* Los personajes que se asoman abajo a la derecha */
.drop-peek {
  position: absolute;
  right: clamp(-2rem, -1vw, 0rem);
  bottom: 0;
  width: clamp(150px, 22vw, 300px);
  height: auto;
  z-index: 1;
  transform: translateY(40%);
  transition: transform 1.2s cubic-bezier(.2, 1.3, .4, 1);
  pointer-events: none;
}
.drop-feed.in .drop-peek { transform: translateY(6%); }
.drop-feed .drop-peek:hover { transform: none; }
.drop-advisory {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--clockbar) + 1rem);
  width: clamp(70px, 8vw, 100px);
  height: auto;
  opacity: .9;
}

/* ===== VIDEO A PANTALLA COMPLETA ===== */
.drop-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #000;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  touch-action: none;
}
.drop-viewer.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.drop-viewer-track {
  position: relative;
  height: 100%;
  width: min(100vw, 100svh * 9 / 16);
  overflow: hidden;
}
.drop-slide {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc((var(--i) - var(--cur, 0)) * 100% + var(--drag, 0px)), 0);
  transition: transform .5s var(--ease);
}
.drop-viewer.dragging .drop-slide { transition: none; }
.drop-slide img, .drop-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drop-slide video { background: #000; }
.drop-slide-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .6rem .9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font: .7rem/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
.drop-viewer-ui {
  position: absolute;
  right: max(1rem, calc(50% - min(100vw, 100svh * 9 / 16) / 2 + 1rem));
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: .6rem;
  z-index: 2;
}
.drop-viewer-ui .drop-btn { width: 48px; height: 48px; padding: 0; font-size: 1rem; background: rgba(0, 0, 0, .45); }
.drop-viewer .drop-close { z-index: 3; background: rgba(0, 0, 0, .45); }
.drop-dots {
  position: absolute;
  z-index: 2;
  left: max(1rem, calc(50% - min(100vw, 100svh * 9 / 16) / 2 + 1rem));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .4rem;
}
.drop-dots i { width: 4px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .35); transition: background .3s, height .3s; }
.drop-dots i.on { background: #fff; height: 30px; }

/* ===== PANTALLA VERTICAL: la ilustración ocupa la parte de arriba y el logo
   queda sobre el fondo oscuro, para que se vean más artistas a la vez. ===== */
@media (max-aspect-ratio: 4/5) {
  .drop-stage {
    top: 0;
    height: 74svh;
    width: calc(74svh * var(--ratio));
    transform: translate3d(calc(-50% + var(--px, 0px)), var(--py, 0px), 0) scale(var(--zoom, 1.06));
    transform-origin: 50% 0;
  }
  .drop-hero::after {
    background:
      linear-gradient(to bottom, rgba(7, 13, 31, .55) 0%, rgba(7, 13, 31, 0) 14%),
      linear-gradient(to top, var(--night) 0%, var(--night) 22%, rgba(7, 13, 31, .6) 34%, rgba(7, 13, 31, 0) 52%);
  }
}

/* ===== CELULAR ===== */
@media (max-width: 680px) {
  .drop-hint { top: calc(4.6rem + env(safe-area-inset-top, 0px)); }
  .drop-brand { bottom: calc(var(--clockbar) + 6.2rem); }
  .drop-tag { display: none; }
  .drop-phones {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 1rem 21vw;
    scrollbar-width: none;
  }
  .drop-phones::-webkit-scrollbar { display: none; }
  .drop-phone { flex: 0 0 min(58vw, 30svh); width: min(58vw, 30svh); scroll-snap-align: center; }
  .drop-phone:nth-child(2) { --lift: 0px; }
  .drop-advisory { bottom: calc(var(--clockbar) + 5.6rem); }
  .drop-feed { padding-bottom: calc(var(--clockbar) + 12rem); }
}

@media (prefers-reduced-motion: reduce) {
  .drop-stage, .drop-logo, .drop-cta img, .drop-feed-head .heart, .drop-peek { animation: none; transition: none; }
  .drop-hero.ready .drop-spot::before { animation: none; opacity: .7; transform: scale(1); }
}


/* ============================================================
   PORTADA POR CAPAS (los CRTV con un objeto o persona al centro)
   ------------------------------------------------------------
   Cada capa se mueve con el mouse según su data-depth (JS pone
   --mx / --my). El tamaño y el lugar de cada una se ajustan en el
   HTML con --w (ancho), --top, --side, --bottom.
   ============================================================ */
.drop-hero--layers { background: var(--hero-color, var(--night)); cursor: default; touch-action: auto; }
.drop-hero--layers::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 20%),
    linear-gradient(to top, var(--night) 0%, rgba(7, 13, 31, 0) 28%);
}
.drop-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
  translate: var(--mx, 0px) var(--my, 0px);
}
.drop-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.drop-bg.fill { background: var(--fill); }
.drop-l {
  position: absolute;
  z-index: 2;
  height: auto;
  translate: var(--mx, 0px) var(--my, 0px);
  rotate: var(--rot, 0deg);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.drop-l--subject {
  left: 0; right: 0;
  margin-inline: auto;
  bottom: var(--bottom, 0);
  width: var(--w, min(44vw, 60svh));
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
}
.drop-l--float { animation: drop-float 6s ease-in-out infinite; }
@keyframes drop-float { 50% { transform: translateY(-14px) rotate(-1.2deg); } }
.drop-l--left, .drop-l--right { top: var(--top, 44%); width: var(--w, clamp(110px, 15vw, 250px)); }
.drop-l--left { left: var(--side, 8vw); }
.drop-l--right { right: var(--side, 8vw); }
.drop-l--top { top: var(--top, 6.5rem); left: 0; right: 0; margin-inline: auto; width: var(--w, clamp(60px, 7vw, 110px)); }
.drop-l--corner { right: var(--side, var(--gutter)); bottom: var(--bottom, calc(var(--clockbar) + 1.2rem)); width: var(--w, clamp(80px, 10vw, 150px)); }
.drop-l--title { left: var(--side, 5vw); top: var(--top, 40%); width: var(--w, clamp(200px, 28vw, 440px)); }
/* La nube del botón, sobre la persona/objeto */
.drop-hero--layers .drop-cta {
  position: absolute;
  z-index: 4;
  left: var(--cta-x, 50%);
  bottom: var(--cta-bottom, calc(var(--clockbar) + 2.4rem));
  width: clamp(190px, 21vw, 290px);
  margin: 0;
  transform: translateX(-50%);
}
.js .drop-hero--layers .drop-l { opacity: 0; }
.js .drop-hero--layers.ready .drop-l { opacity: 1; transition: opacity 1.1s var(--ease) var(--in, .2s); }
.js .drop-hero--layers .drop-l--subject { transform: translateY(40px) scale(.94); }
.js .drop-hero--layers.ready .drop-l--subject {
  transform: none;
  transition: opacity 1.1s var(--ease) .15s, transform 1.5s cubic-bezier(.2, 1.3, .4, 1) .15s;
}
.js .drop-hero--layers.ready .drop-l--subject.drop-l--float { animation: drop-float 6s ease-in-out 1.7s infinite; }
.js .drop-hero--layers.ready .drop-cta { opacity: 1; transform: translateX(-50%); }
.js .drop-hero--layers .drop-cta { opacity: 0; transform: translate(-50%, 18px); transition: opacity 1s var(--ease) .8s, transform 1s var(--ease) .8s; }

/* ============================================================
   SECCIONES
   ============================================================ */
.drop-sec {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
  background: var(--sec-color, var(--night));
}
.drop-sec-bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  translate: 0 var(--sy, 0px);
}
.drop-sec-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.drop-sec.shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--shade, linear-gradient(to bottom, var(--night) 0%, rgba(7, 13, 31, .35) 18%, rgba(7, 13, 31, .35) 80%, var(--night) 100%));
}
.drop-sec-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.drop-sec-head img { height: clamp(34px, 4.6vw, 54px); width: auto; }
.drop-kicker {
  display: block;
  text-align: center;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .2em;
  color: var(--accent, #ffd400);
  margin-bottom: 1rem;
}
.drop-h2 {
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  font: 800 clamp(2.2rem, 7vw, 6rem)/.9 "Inter Tight", sans-serif;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.drop-lead { max-width: 46ch; font: clamp(.85rem, 1.2vw, 1rem)/1.6 var(--mono); color: var(--ink); }
.drop-concept { text-align: center; margin-top: clamp(2rem, 5vw, 3.5rem); }
.drop-concept b { display: block; font: 700 clamp(1rem, 2vw, 1.5rem)/1 "Inter Tight", sans-serif; letter-spacing: .14em; }
.drop-concept span { display: block; margin-top: .4rem; font: .72rem/1.4 var(--mono); color: var(--muted); }

/* Aparición escalonada de lo que hay dentro de una sección */
.js .drop-sec [data-pop] {
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: opacity .9s var(--ease), transform 1s cubic-bezier(.2, 1.2, .4, 1);
  transition-delay: calc(var(--n, 0) * 90ms);
}
.js .drop-sec.in [data-pop] { opacity: 1; transform: none; }

/* Firma de abajo: advisory y personaje que se asoma */
.drop-badge {
  position: absolute;
  right: var(--gutter);
  bottom: 1.2rem;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  opacity: .9;
}
.drop-peek-l {
  position: absolute;
  left: clamp(-3rem, -2vw, 0rem);
  bottom: 0;
  width: var(--w, clamp(130px, 18vw, 260px));
  height: auto;
  transform: translateY(45%);
  transition: transform 1.3s cubic-bezier(.2, 1.3, .4, 1) .3s;
  pointer-events: none;
}
.drop-sec.in .drop-peek-l { transform: translateY(4%); }

/* ===== GALERÍA (fotos que se amplían) ===== */
.drop-gallery {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(.6rem, 1.6vw, 1.2rem);
  max-width: 1100px;
  margin: 0 auto;
}
.drop-shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  cursor: zoom-in;
  aspect-ratio: var(--ar, 4 / 5);
  grid-column: span var(--span, 1);
  grid-row: span var(--rows, 1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.drop-shot img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  object-position: var(--pos, center);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.drop-shot::after {
  content: "+";
  position: absolute;
  right: .6rem;
  top: .6rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font: 400 1.1rem/1 var(--mono);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drop-shot:hover img { transform: scale(1.07); }
.drop-shot:hover::after, .drop-shot:focus-visible::after { opacity: 1; transform: none; }
.drop-shot:focus-visible { outline: 2px solid var(--accent, #ffd400); outline-offset: 3px; }
.drop-shot.flat { background: transparent; box-shadow: none; }
.drop-shot.flat:hover img { transform: scale(1.06) rotate(-1.5deg); }

/* ===== VISOR DE FOTOS ===== */
.drop-lightbox {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  background: rgba(3, 6, 16, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.drop-lightbox.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.drop-lightbox figure { margin: 0; display: grid; place-items: center; gap: .8rem; width: 100%; height: 100%; padding: 4.5rem 1rem 5.5rem; }
.drop-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: calc(100svh - 11rem);
  width: auto;
  height: auto;
  border-radius: 8px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.drop-lightbox img.in { opacity: 1; transform: none; }
.drop-lightbox figcaption { font: .72rem/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); text-align: center; }
.drop-lightbox-nav {
  position: absolute;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.drop-lightbox-nav[hidden] { display: none; }
.drop-btn:disabled { opacity: .3; cursor: default; }

/* ===== PAPELES ARRUGADOS (frases que se abren) ===== */
.drop-papers {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(220px, 25vw, 340px) 1fr;
  grid-template-areas: "a c b" "d c e";
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 1150px;
  margin: 0 auto;
}
.drop-papers > .drop-center { grid-area: c; }
.drop-papers > .drop-paper:nth-of-type(1) { grid-area: a; }
.drop-papers > .drop-paper:nth-of-type(2) { grid-area: b; }
.drop-papers > .drop-paper:nth-of-type(3) { grid-area: d; }
.drop-papers > .drop-paper:nth-of-type(4) { grid-area: e; }
.drop-paper {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, clamp(140px, 15vw, 210px));
  aspect-ratio: 520 / 400;
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: #111;
  cursor: pointer;
}
.drop-paper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
  transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .5s var(--ease);
  animation: paper-wiggle 4.5s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -1.1s);
}
@keyframes paper-wiggle { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-6deg) scale(1.03); } 90% { transform: rotate(5deg); } 94% { transform: rotate(-2deg); } }
.drop-paper:hover img { transform: scale(1.08) rotate(-4deg); animation: none; }
.drop-paper .note {
  position: relative;
  width: 118%;
  padding: 1.2rem 1.1rem;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(0, 0, 0, .06) 0) 0 0 / 100% 1.45em,
    #f4f1ea;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  font: 700 clamp(.78rem, 1.1vw, .95rem)/1.45 var(--mono);
  text-align: center;
  clip-path: polygon(2% 4%, 20% 0, 46% 3%, 70% 0, 98% 3%, 100% 30%, 97% 62%, 100% 96%, 74% 100%, 50% 97%, 22% 100%, 0 97%, 3% 62%, 0 30%);
  opacity: 0;
  transform: scale(.3) rotate(-14deg);
  transition: opacity .35s var(--ease), transform .7s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
.drop-paper.open img { transform: scale(.4) rotate(40deg); opacity: 0; animation: none; }
.drop-paper.open .note { opacity: 1; transform: rotate(var(--tilt, -2deg)); }
.drop-paper:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 12px; }
.drop-center { position: relative; }
.drop-center img { width: 100%; height: auto; }

/* ===== NÚMEROS ===== */
.drop-stats { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem); margin: 1.8rem 0; }
.drop-stat b { display: block; font: 800 clamp(2.6rem, 6vw, 4.6rem)/.9 "Inter Tight", sans-serif; letter-spacing: -.03em; color: var(--accent, #ffd400); }
.drop-stat span { display: block; margin-top: .4rem; font: .66rem/1.2 var(--mono); letter-spacing: .14em; color: var(--muted); }

/* ===== DOS COLUMNAS ===== */
.drop-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  max-width: 1150px;
  margin: 0 auto;
}
.drop-split.rev > :first-child { order: 2; }

/* ===== ESCENA: celulares a los lados de una figura ===== */
.drop-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.25fr) 1fr;
  align-items: end;
  gap: clamp(.6rem, 3vw, 2.5rem);
  max-width: 1150px;
  margin: 0 auto;
}
.drop-scene .drop-phone { flex: none; width: min(100%, 250px); justify-self: center; }
.drop-scene .drop-phone:nth-child(2) { --lift: 0px; }
.drop-scene .drop-phone.low { --lift: 3rem; }
.drop-scene .drop-figure { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.drop-prop {
  position: absolute;
  z-index: 3;
  width: var(--w, clamp(90px, 12vw, 180px));
  height: auto;
  translate: 0 var(--sy, 0px);
  pointer-events: none;
}

/* ===== CIERRE: imagen grande + POR AMOR AL ARTE ===== */
.drop-closing {
  position: relative;
  min-height: max(min(100svh, 62vw), 64svh);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem var(--gutter);
}
.drop-closing .drop-sec-bg img { transform: scale(var(--zoom-c, 1.12)); transition: transform 2.4s var(--ease); }
.drop-closing.in .drop-sec-bg img { transform: scale(1); }
.drop-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--night) 0%, rgba(7, 13, 31, .15) 22%, rgba(7, 13, 31, .25) 70%, var(--night) 100%);
}
.drop-closing .drop-motto { margin: 0; width: min(620px, 82vw); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6)); }
.drop-closing .drop-sec-head { position: absolute; top: clamp(2rem, 5vw, 4rem); left: 0; right: 0; }

/* ===== NOTIFICACIÓN QUE ENTRA ===== */
.drop-notif {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: var(--top, 50%);
  width: min(380px, 84vw);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transform: translate(-50%, -30px) scale(.9);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2, 1.5, .4, 1) .9s, opacity .5s var(--ease) .9s;
}
.drop-sec.in .drop-notif { transform: translate(-50%, 0); opacity: 1; }

/* ===== VARIANTES PARA PANTALLA VERTICAL Y CELULAR ===== */
@media (max-aspect-ratio: 4/5) {
  .drop-l--subject { width: var(--w-m, 88vw); bottom: var(--bottom-m, 22svh); }
  .drop-l--left, .drop-l--right { top: var(--top-m, calc(5.2rem + env(safe-area-inset-top, 0px))); width: var(--w-m, 26vw); }
  .drop-l--left { left: var(--gutter); }
  .drop-l--right { right: var(--gutter); }
  .drop-l--top { top: var(--top-m, 11rem); }
  .drop-l--title { left: 0; right: 0; margin-inline: auto; top: var(--top-m, 9rem); width: var(--w-m, 64vw); }
  .drop-hero--layers .drop-cta { left: 50%; bottom: calc(var(--clockbar) + 6.4rem); width: 54vw; }
  .drop-l--corner { display: none; }
}
@media (max-width: 760px) {
  .drop-gallery { --cols: 2; }
  .drop-shot { grid-column: span min(var(--span, 1), 2); grid-row: span 1; }
  .drop-papers { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "a b" "d e"; }
  .drop-papers > .drop-center { width: min(62vw, 300px); justify-self: center; }
  .drop-paper { width: min(100%, 38vw); }
  .drop-split { grid-template-columns: 1fr; }
  .drop-split.rev > :first-child { order: 0; }
  .drop-scene { grid-template-columns: 1fr 1fr; }
  .drop-scene .drop-figure { grid-column: 1 / -1; grid-row: 1; max-width: 420px; justify-self: center; }
  .drop-scene .drop-phone.low { --lift: 0px; }
  .drop-prop { display: none; }
  .drop-badge { bottom: calc(var(--clockbar) + 5.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .drop-l--float, .drop-paper img { animation: none; }
  .js .drop-sec [data-pop] { opacity: 1; transform: none; transition: none; }
}
@media (max-aspect-ratio: 4/5) { .hide-m { display: none; } }

/* ===== MOVIMIENTOS SUELTOS: palmas con viento, rana colgando, rana que respira ===== */
.drop-sway { transform-origin: 50% 100%; animation: drop-sway 7s ease-in-out infinite; animation-delay: var(--sway-d, 0s); }
@keyframes drop-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg) skewX(-1deg); } }
.drop-swing { transform-origin: 70% 0; animation: drop-swing 4s ease-in-out infinite; }
@keyframes drop-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.drop-bob { animation: drop-bob 3.2s ease-in-out infinite; }
@keyframes drop-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(1.02, .98); } }
.js .drop-hero--layers.ready .drop-l.drop-sway { animation: drop-sway 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .drop-sway, .drop-swing, .drop-bob { animation: none !important; } }
@media (max-width: 760px) { .drop-prop.drop-swing, .drop-prop.drop-bob { display: block; } }
@media (max-width: 680px) { .drop-closing { --concept-b: calc(var(--clockbar) + 6.6rem); } }

/* ============================================================
   CARTAS REALES (Pokémor): frente y reverso que se voltean
   ============================================================ */
.drop-card.real {
  width: min(360px, 78vw, 52svh);
  aspect-ratio: 560 / 787;
  padding: 0;
  background: none;
  border-radius: 4.5% / 3.2%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.drop-card-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, 1.3, .5, 1);
}
.drop-card.real.flipped .drop-card-flip { transform: rotateY(180deg); }
.drop-card-flip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4.5% / 3.2%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.drop-card-flip .front { transform: rotateY(180deg); }
.drop-card.real .drop-card-holo { border-radius: 4.5% / 3.2%; }
.drop-card-count { font: .72rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); min-width: 4.5em; text-align: center; }

/* La colección: las 16 cartas boca abajo que se voltean al aparecer */
.drop-deck {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(.7rem, 2vw, 1.4rem);
  max-width: 980px;
  margin: 0 auto;
  perspective: 1400px;
}
.drop-flip {
  --lift: 0px; --tx: 0deg; --ty: 0deg;
  position: relative;
  aspect-ratio: 560 / 787;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(var(--lift)) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.drop-flip:hover, .drop-flip:focus-visible { --lift: -10px; outline: none; }
.drop-flip:focus-visible .drop-card-flip { box-shadow: 0 0 0 3px #ffd400; border-radius: 6%; }
.drop-flip .drop-card-flip { transition-delay: calc(var(--n, 0) * 70ms); }
.drop-flip .drop-card-flip img { box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.drop-sec.in .drop-flip .drop-card-flip { transform: rotateY(180deg); }
.drop-flip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4.5% / 3.2%;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 0, 140, .3) 40%, rgba(0, 220, 255, .3) 50%, rgba(255, 240, 0, .3) 60%, transparent 75%) 0 0 / 250% 250%;
  transition: opacity .4s var(--ease), background-position .8s var(--ease);
}
.drop-flip:hover::after { opacity: .7; background-position: 100% 100%; }
@media (max-width: 760px) { .drop-deck { --cols: 3; } }
@media (max-width: 420px) { .drop-deck { --cols: 2; } }
@media (prefers-reduced-motion: reduce) { .drop-card-flip, .drop-flip { transition: none; } }

/* ============================================================
   LIENZO: una sección armada igual que el PDF (16:9). Cada pieza
   va en el mismo lugar que en el diseño, en % del lienzo:
   --l (izquierda), --t (arriba), --w (ancho), --r (giro).
   En el celular se muestra la versión apilada (.only-m).
   ============================================================ */
.drop-canvas {
  position: relative;
  width: min(100%, (100svh - var(--clockbar) - 1.5rem) * 1024 / 576);
  max-width: 1500px;
  margin: 0 auto;
  aspect-ratio: 1024 / 576;
}
.drop-canvas .cv {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
  rotate: var(--r, 0deg);
  translate: var(--mx, 0px) var(--my, 0px);
}
.drop-canvas button.cv { padding: 0; border: 0; background: none; cursor: zoom-in; }
.drop-canvas button.cv img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); transition: transform .8s var(--ease); }
.drop-canvas button.cv:hover img { transform: scale(1.03); }
.drop-canvas button.cv:focus-visible { outline: 2px solid var(--accent, #ffd400); outline-offset: 4px; border-radius: 14px; }
.drop-neon { animation: drop-neon 5s linear infinite; }
@keyframes drop-neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(80, 255, 120, .45)); }
  20%, 24%, 55% { opacity: .55; filter: none; }
}
.drop-sec--canvas { padding: clamp(1rem, 3vw, 2rem) 0 0; overflow: hidden; }
.only-m { display: none; }
@media (max-width: 760px) {
  .only-d { display: none; }
  .only-m { display: block; }
}
@media (prefers-reduced-motion: reduce) { .drop-neon { animation: none; } }