:root{
  --bg0:#070b1a;
  --bg1:#071536;

  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);

  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.74);

  --accent:#ff6a00;  
  --accent2:#6d4bff; 
  --accent3:#23b6ff; 

  --danger:#ff2d55;
  --dangerBg: rgba(255,45,85,.16);
  --dangerBd: rgba(255,45,85,.40);

  --ok:#38d39f;
  --okBg: rgba(56,211,159,.14);
  --okBd: rgba(56,211,159,.32);

  --warn:#ffb020;
  --warnBg: rgba(255,176,32,.14);
  --warnBd: rgba(255,176,32,.34);

  /* Sistema de transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Optimización de rendimiento */
html{ 
  scroll-behavior: smooth;
  font-size: 16px; /* Base size para mejor escalabilidad */
}

body{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(900px 520px at 88% 26%, rgba(109,75,255,.20), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(35,182,255,.16), transparent 60%),
    linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-art{ position: relative; isolation: isolate; }
.bg-art::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("27115268-f911-4e81-b99c-dba88098a473.png");
  background-size: cover;
  background-position: center;
  opacity: .16;
  z-index:-2;
  filter: saturate(1.1) contrast(1.05);
}
.bg-art::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,11,26,.82) 0%, rgba(7,11,26,.56) 42%, rgba(7,11,26,.92) 100%);
  z-index:-1;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glass-strong{
  background: var(--glass2);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.soft-shadow{ box-shadow: 0 26px 90px rgba(0,0,0,.45); }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
}

.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .70rem;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

.dl-ok{ border-color: var(--okBd); background: var(--okBg); }
.dl-warn{ border-color: var(--warnBd); background: var(--warnBg); }
.dl-closed{ border-color: var(--dangerBd); background: var(--dangerBg); }

.btn-primary{
  background: linear-gradient(135deg, rgba(255,106,0,1) 0%, rgba(255,138,0,1) 55%, rgba(255,106,0,1) 100%);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 42px rgba(255,106,0,.18);
  transition: transform var(--transition-fast), filter var(--transition-fast);
  cursor: pointer;
}
.btn-primary:hover{ 
  filter: brightness(1.06); 
  transform: translateY(-2px); 
}
.btn-primary:active{
  transform: translateY(0);
}

.btn-ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}
.btn-ghost:hover{ 
  background: rgba(255,255,255,.12); 
  transform: translateY(-2px); 
}
.btn-ghost:active{
  transform: translateY(0);
}

.btn-danger{
  background: linear-gradient(135deg, rgba(255,45,85,1) 0%, rgba(255,86,120,1) 55%, rgba(255,45,85,1) 100%);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 42px rgba(255,45,85,.18);
}

.cta-anim{
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
  will-change: transform;
}
.cta-anim::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-40%) rotate(10deg);
  animation: shimmer 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%{ transform: translateX(-60%) rotate(10deg); opacity:.0; }
  30%{ opacity:.55; }
  60%{ opacity:.25; }
  100%{ transform: translateX(60%) rotate(10deg); opacity:.0; }
}
@keyframes ctaPulse{
  0%,100%{ box-shadow: 0 14px 42px rgba(255,106,0,.18); }
  50%{ box-shadow: 0 18px 60px rgba(255,106,0,.28); }
}

.poster{
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.img-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.24) 48%, rgba(0,0,0,.78) 100%),
    radial-gradient(520px 360px at 25% 18%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(520px 360px at 80% 28%, rgba(109,75,255,.16), transparent 60%);
}

.is-closed{
  border-color: var(--dangerBd) !important;
  box-shadow: 0 26px 90px rgba(255,45,85,.16);
}
.is-closed .poster::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(255,45,85,.10) 55%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
.is-closed .js-apply{
  pointer-events:none;
  opacity:.55;
  filter: grayscale(.25);
}

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 12px;
}
.modal-backdrop[data-open="true"]{ display:flex; }

.modal{
  width: min(980px, 96vw);
  height: min(86vh, 860px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,30,.84);
  box-shadow: 0 30px 120px rgba(0,0,0,.62);
  display:flex;
  flex-direction: column;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.modal-body{
  flex: 1;
  overflow: auto;
  background: rgba(255,255,255,.03);
}
.modal-x{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.modal-x:hover{ 
  background: rgba(255,255,255,.12); 
  transform: translateY(-2px); 
}
.modal-x:active{
  transform: translateY(0);
}

.dot{
  width:8px; height:8px; border-radius:999px;
  display:inline-block;
}

.wrap-anywhere{ overflow-wrap:anywhere; word-break:break-word; }

.reveal{
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .70s ease, transform .70s ease;
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .cta-anim{ animation:none; }
}

.card-pad{ padding: 16px; }
@media (min-width: 640px){
  .card-pad{ padding: 24px; }
}

.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:none;
  z-index: 55;
  animation: fadeIn 0.2s ease forwards;
}
.drawer-backdrop[data-open="false"]{
  animation: fadeOut 0.2s ease forwards;
}
.drawer{
  position: fixed;
  top: 12px;
  right: 12px;
  left: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,30,.86);
  box-shadow: 0 30px 120px rgba(0,0,0,.62);
  padding: 12px;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events:none;
  transition: transform 0.18s ease, opacity 0.18s ease;
  will-change: transform, opacity;
}
.drawer-backdrop[data-open="true"] .drawer{
  transform: translateY(0);
  opacity: 1;
  pointer-events:auto;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; display: none; }
}