/* ════════════════════════════════════════════════
   TúPOS — Funnel panel (slide-over, stays on the landing)
   Feature flag: settings.UNIFIED_FUNNEL_TRANSITIONS

   /registrar/ and /solicitar/ load in a same-origin iframe that slides in as a
   panel over the landing — the top-level document never navigates away from
   /landing/. A gradient "blade" (the landing's own violet → blue → teal → amber
   plinth palette) rides the panel's leading edge as it slides.

   State: body[data-utxp="open"] — set/removed by funnel-panel.js. Everything
   else is a plain CSS transition off that one attribute, so there is no
   intermediate state that can get stuck mid-animation.

   Used by: landing_v3.html only.
   ════════════════════════════════════════════════ */

:root{
  --fp-duration: .52s;
  --fp-ease: cubic-bezier(.65,0,.35,1);
}

/* ── Landing content pushed back while the panel is open ── */
body > .bg-decor,
body > .page{
  transition: transform var(--fp-duration) var(--fp-ease),
              filter var(--fp-duration) var(--fp-ease),
              opacity var(--fp-duration) var(--fp-ease);
  transform-origin: 50% 50%;
}

body[data-utxp="open"] > .bg-decor,
body[data-utxp="open"] > .page{
  transform: scale(.94) translateX(-2%);
  filter: saturate(.6) brightness(.8);
  opacity: .45;
  pointer-events: none;
}

/* ── Panel shell ── */
#utx-panel{
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0A0E1A;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--fp-duration) var(--fp-ease), visibility 0s linear var(--fp-duration);
  box-shadow: -40px 0 90px rgba(6,10,22,.5);
}

body[data-utxp="open"] #utx-panel{
  transform: translateX(0%);
  visibility: visible;
  transition: transform var(--fp-duration) var(--fp-ease), visibility 0s linear 0s;
}

/* Gradient blade — rides the panel's left edge, sweeping the whole screen as it slides in */
#utx-panel__edge{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 2;
  background: linear-gradient(180deg, #7A6BFF 0%, #0D6EFD 34%, #00D4B4 68%, #F5B94A 100%);
  box-shadow: -48px 0 110px 8px rgba(122,107,255,.32), -14px 0 34px rgba(0,212,180,.28);
}

/* ── Close chrome, floats above the iframe ── */
#utx-panel__chrome{
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
}

#utx-panel__close{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px 0 12px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,26,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.85);
  font: 600 13px 'Lexend', -apple-system, sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

#utx-panel__close:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
  transform: translateX(-2px);
}

#utx-panel__close:focus-visible{
  outline: 2px solid #7A6BFF;
  outline-offset: 2px;
}

/* ── Iframe ── */
#utx-panel__frame{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transition: opacity .22s ease;
}

#utx-panel.is-switching #utx-panel__frame{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  body > .bg-decor,
  body > .page,
  #utx-panel,
  #utx-panel__frame{
    transition: none !important;
  }
}