:root {
  --red: #f01926;
  --red-deep: #820910;
  --ink: #070707;
  --surface: #121217;
  --surface-rgb: 18, 18, 23;
  --paper: #e8e3d8;
  --ash: #85817a;
  --line: rgba(232, 227, 216, .17);
  --glow: 0 0 10px rgba(240, 25, 38, .72), 0 0 28px rgba(240, 25, 38, .28);
  --font: "Inter", "Montserrat", system-ui, sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); font-family: var(--font); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background:
  radial-gradient(circle at 78% 9%, rgba(240,25,38,.12), transparent 25rem),
  repeating-linear-gradient(92deg, transparent 0 7px, rgba(255,255,255,.012) 8px 9px),
  #070707; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; }
.trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.aura { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .55; background:
  linear-gradient(115deg, transparent 48.8%, rgba(240,25,38,.2) 49%, transparent 49.3%),
  linear-gradient(22deg, transparent 72%, rgba(255,255,255,.045) 72.2%, transparent 72.5%); }
.eyebrow, .index, .panel-title span, .protocol > span, .dialog-head span {
  color: var(--red); font-size: .69rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
}
h1 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 3vw, 1.95rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(255, 255, 255, .9),
    0 0 16px rgba(255, 255, 255, .55),
    0 0 32px rgba(255, 255, 255, .28),
    0 0 52px rgba(255, 255, 255, .14);
  animation: auraBrandGlow 2.4s ease-in-out infinite;
  will-change: text-shadow, opacity, filter;
  -webkit-font-smoothing: antialiased;
}
h1 em {
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}
.eyebrow, .index, .panel-title h3, .protocol > span, .protocol h3,
.dialog-head span, .dialog-head h3, h2, h3, h4, .album-line, .landing-status {
  font-family: var(--font-display);
}
.album-line { color: var(--ash); font-size: .69rem; font-weight: 700; letter-spacing: .19em; }
.access { width: min(520px, calc(100% - 34px)); margin: 10vh auto 0; padding: 54px 42px; border: 1px solid var(--line); position: relative; background: rgba(var(--surface-rgb),.96); box-shadow: 0 26px 90px #000; }
.access::before, .panel::before { content: ""; position: absolute; left: -1px; top: -1px; width: 68px; height: 2px; background: var(--red); box-shadow: var(--glow); }
.access label { display: block; margin: 38px 0 8px; color: var(--ash); font-size: .71rem; letter-spacing: .17em; text-transform: uppercase; }
.access-row { display: flex; gap: 8px; }
.access-row input { width: 100%; min-width: 0; border: 1px solid var(--line); background: #0b0b0b; color: var(--paper); padding: 13px 14px; outline: none; -webkit-text-security: disc; }
.access-row input:focus { border-color: var(--red); box-shadow: var(--glow); }
.access-row button, .primary { border: 0; color: white; background: var(--red); padding: 12px 22px; font-size: .71rem; font-weight: 900; letter-spacing: .13em; box-shadow: 0 0 22px rgba(240,25,38,.25); }
.message { min-height: 1.25em; color: var(--ash); font-size: .8rem; }
.message.error { color: #ff6c73; }
.message.success { color: #d9e2c1; }
.dave-complete-caption {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  width: min(620px, calc(100% - 30px));
  padding: 14px 22px 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(240, 25, 38, .48);
  border-radius: 4px;
  color: #f5f2eb;
  background: rgba(8, 8, 8, .94);
  box-shadow: 0 0 20px rgba(240,25,38,.25), 0 12px 35px rgba(0,0,0,.72);
  text-align: center;
  animation: daveCaptionIn .32s ease-out both;
}
.dave-complete-caption span {
  color: var(--red);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .24em;
}
.dave-complete-caption p {
  margin: 5px 0 2px;
  font-size: 1.02rem;
  letter-spacing: .045em;
}
.dave-complete-caption small { color: #9f978a; }
@keyframes daveCaptionIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.sigil, .hero-mark { position: absolute; width: 110px; height: 150px; right: 28px; top: -65px; filter: drop-shadow(0 0 12px rgba(240,25,38,.65)); opacity: .85; transform: rotate(-7deg); }
.sigil i, .hero-mark i { position: absolute; width: 4px; height: 115px; background: var(--red); left: 52px; top: 18px; transform: rotate(14deg); }
.sigil b, .hero-mark b { position: absolute; width: 80px; height: 4px; background: var(--red); left: 15px; top: 58px; transform: rotate(-11deg); }
.sigil span, .hero-mark span { position: absolute; width: 28px; height: 28px; border: 4px solid var(--red); border-radius: 50%; left: 38px; }
#portal { width: min(1220px, calc(100% - 34px)); margin: 0 auto; padding-bottom: 70px; }
.topbar { min-height: 125px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: clamp(1.02rem, 2.7vw, 1.72rem); }
.topbar nav { display: flex; gap: 9px; align-items: center; }
.topbar a, .topbar button, .refresh { color: var(--ash); background: none; border: 1px solid var(--line); padding: 10px 13px; text-decoration: none; font-size: .65rem; letter-spacing: .13em; }
.topbar a:hover, .topbar button:hover, .refresh:hover { color: white; border-color: var(--red); }
.hero { min-height: 340px; position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hero > div:last-child { max-width: 760px; }
.hero h2 { margin: 15px 0; font-size: clamp(2.3rem, 6vw, 5.6rem); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.hero h2 strong { color: transparent; -webkit-text-stroke: 1px var(--red); filter: drop-shadow(0 0 8px rgba(240,25,38,.5)); }
.hero p:last-child { max-width: 630px; color: var(--ash); line-height: 1.6; }
.hero-mark { width: 180px; height: 240px; right: 8%; top: 55px; transform: scale(1.65) rotate(6deg); opacity: .32; }
.grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(270px, .95fr); gap: 20px; margin-top: 22px; }
.panel { position: relative; border: 1px solid var(--line); background: rgba(12,12,12,.82); padding: 25px; }
.panel-title { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 23px; }
.panel-title h3, .protocol h3, .dialog-head h3 { margin: 4px 0 0; font-size: 1.55rem; text-transform: uppercase; }
.tabs { display: flex; border: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; color: var(--ash); padding: 9px 11px; font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.tabs button.active { background: var(--red); color: white; }
.request-table { overflow-x: auto; }
.request-head, .request-row { min-width: 650px; display: grid; grid-template-columns: 1fr .9fr 1.25fr 35px; gap: 7px; align-items: center; }
.request-head { color: var(--ash); font-size: .59rem; letter-spacing: .11em; margin-bottom: 7px; }
.request-row { margin-bottom: 7px; }
.request-row input { min-width: 0; width: 100%; border: 1px solid var(--line); background: #070707; color: var(--paper); padding: 11px; outline: none; }
.request-row input:focus { border-color: var(--red); box-shadow: 0 0 12px rgba(240,25,38,.2); }
.request-row button { height: 35px; border: 1px solid var(--line); color: var(--ash); background: transparent; }
.request-row button:hover { color: white; border-color: var(--red); }
.add-row { margin: 9px 0 19px; padding: 9px 0; border: 0; background: transparent; color: var(--red); font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.rights { display: flex; gap: 10px; color: var(--ash); line-height: 1.45; font-size: .75rem; margin: 13px 0 19px; }
.rights input { accent-color: var(--red); flex: 0 0 auto; }
.drop { min-height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed rgba(240,25,38,.55); background: rgba(240,25,38,.025); text-align: center; padding: 20px; }
.drop strong { color: var(--red); font-size: 1.5rem; text-shadow: var(--glow); letter-spacing: .12em; }
.drop span { margin: 10px; color: var(--paper); letter-spacing: .2em; font-size: .7rem; }
.drop small { color: var(--ash); max-width: 430px; line-height: 1.5; }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-name { color: var(--ash); font-size: .72rem; text-align: center; }
.protocol ol { margin: 24px 0 0; padding: 0; list-style: none; }
.protocol li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; border-top: 1px solid var(--line); padding: 14px 0; color: var(--ash); font-size: .79rem; line-height: 1.4; }
.protocol li b { color: var(--red); font-weight: 900; }
.packages { margin-top: 20px; }
.request-list { display: grid; gap: 9px; }
.empty { color: var(--ash); padding: 22px 0; }
.request-card { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 14px 0; }
.request-card h4 { margin: 0 0 4px; font-size: .86rem; letter-spacing: .1em; }
.request-card p { margin: 0; color: var(--ash); font-size: .71rem; }
.badge { border: 1px solid var(--line); color: var(--ash); padding: 6px 8px; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.badge.review, .badge.packaged { color: var(--paper); border-color: var(--red); box-shadow: 0 0 10px rgba(240,25,38,.18); }
.badge.cancelled { color: #928d84; border-color: rgba(146,141,132,.28); }
.view { background: none; border: 1px solid var(--line); color: var(--paper); padding: 8px 11px; font-size: .63rem; letter-spacing: .1em; }
.view.authorize { color: #f4eee2; border-color: rgba(226,38,55,.72); background: rgba(190,24,39,.18); }
.view.authorize:hover { background: var(--red); color: #fff; box-shadow: 0 0 14px rgba(226,38,55,.28); }
.view.cancel { color: #d75b64; border-color: rgba(215,91,100,.32); }
.view.cancel:hover { color: #fff; background: rgba(190,24,39,.22); }
dialog { width: min(1000px, calc(100% - 24px)); max-height: 88vh; overflow: auto; color: var(--paper); background: var(--surface); border: 1px solid var(--red); padding: 24px; box-shadow: 0 0 90px #000, var(--glow); }
dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.dialog-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.dialog-head button { color: var(--paper); border: 0; background: none; font-size: 2rem; }
.detail-meta { color: var(--ash); font-size: .74rem; margin: 15px 0; }
.detail-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.detail-item h4 { margin: 0 0 5px; }
.detail-item p { margin: 3px 0; color: var(--ash); font-size: .72rem; line-height: 1.4; }
.detail-item a { color: var(--red); font-size: .68rem; }
.detail-item input { accent-color: var(--red); }
.qa-good { color: #b8d38c !important; }
.qa-bad { color: #ff7278 !important; }
.dialog-actions { position: sticky; bottom: -24px; background: var(--surface); padding: 15px 0 4px; border-top: 1px solid var(--line); }
.vic-system-dialog {
  width: min(500px, calc(100% - 28px));
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(240,25,38,.52);
  border-radius: 0;
  color: var(--paper);
  background: var(--surface);
  box-shadow: 0 24px 90px rgba(0,0,0,.86), 0 0 34px rgba(240,25,38,.13);
}
.vic-system-dialog::backdrop {
  background: rgba(3,3,5,.84);
  backdrop-filter: blur(8px);
}
.vic-system-dialog__frame {
  position: relative;
  min-height: 245px;
  padding: 42px 38px 31px;
  overflow: hidden;
}
.vic-system-dialog__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 84px;
  height: 2px;
  background: var(--red);
  box-shadow: var(--glow);
}
.vic-system-dialog__eyebrow {
  margin: 0 0 18px;
  color: var(--red);
  font: 800 .58rem/1.2 var(--font-display);
  letter-spacing: .22em;
}
.vic-system-dialog h2 {
  max-width: calc(100% - 74px);
  margin: 0 0 14px;
  color: #fff;
  font: 500 1.45rem/1.1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,255,255,.55), 0 0 24px rgba(255,255,255,.18);
}
.vic-system-dialog__message {
  max-width: 390px;
  min-height: 45px;
  margin: 0;
  color: #b5b1aa;
  font-size: .82rem;
  line-height: 1.65;
}
.vic-system-dialog[data-tone="error"] {
  border-color: rgba(240,25,38,.78);
}
.vic-system-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.vic-system-dialog__actions button {
  min-width: 112px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  color: var(--paper);
  background: #0a0a0d;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
}
.vic-system-dialog__actions button:hover,
.vic-system-dialog__actions button:focus-visible {
  border-color: var(--red);
  outline: none;
}
.vic-system-dialog__actions .vic-system-dialog__accept {
  border-color: rgba(240,25,38,.68);
  color: #fff;
  background: var(--red);
  box-shadow: 0 0 18px rgba(240,25,38,.2);
}
.vic-system-dialog__mark {
  position: absolute;
  top: 19px;
  right: 25px;
  width: 60px;
  height: 78px;
  opacity: .64;
  transform: rotate(-7deg);
}
.vic-system-dialog__mark i,
.vic-system-dialog__mark b {
  position: absolute;
  display: block;
  background: var(--red);
}
.vic-system-dialog__mark i {
  top: 8px;
  left: 29px;
  width: 2px;
  height: 60px;
  transform: rotate(14deg);
}
.vic-system-dialog__mark b {
  top: 29px;
  left: 8px;
  width: 44px;
  height: 2px;
  transform: rotate(-11deg);
}
.vic-system-dialog__mark span {
  position: absolute;
  top: 0;
  left: 21px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--red);
  border-radius: 50%;
}
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; padding: 25px 0; gap: 20px; }
  .topbar nav { flex-direction: column; align-items: stretch; }
  .hero-mark { display: none; }
}
@media (max-width: 560px) {
  h1, .topbar h1 { font-size: clamp(.82rem, 4.5vw, 1.12rem); letter-spacing: .23em; }
  .access { padding: 42px 23px; }
  .access-row { flex-direction: column; }
  .topbar { flex-direction: column; }
  .hero { min-height: 300px; }
  .panel { padding: 19px; }
  .panel-title { flex-direction: column; }
  .request-card { grid-template-columns: 1fr auto; }
  .request-card .badge { grid-row: 2; grid-column: 1; justify-self: start; }
  .vic-system-dialog__frame { min-height: 225px; padding: 37px 23px 25px; }
  .vic-system-dialog__actions { flex-direction: column-reverse; }
  .vic-system-dialog__actions button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .sigil, .hero-mark { animation: pulse 3.6s ease-in-out infinite; }
  @keyframes pulse { 50% { filter: drop-shadow(0 0 24px rgba(240,25,38,.95)); opacity: 1; } }
  @keyframes auraBrandGlow {
    0%, 100% {
      opacity: .9;
      filter: brightness(1) drop-shadow(0 0 6px rgba(255, 255, 255, .55));
      text-shadow:
        0 0 6px rgba(255, 255, 255, .85),
        0 0 16px rgba(255, 255, 255, .5),
        0 0 32px rgba(255, 255, 255, .28),
        0 0 56px rgba(255, 255, 255, .14);
    }
    50% {
      opacity: 1;
      filter: brightness(1.35) drop-shadow(0 0 16px rgba(255, 255, 255, .95));
      text-shadow:
        0 0 12px rgba(255, 255, 255, 1),
        0 0 28px rgba(255, 255, 255, .95),
        0 0 52px rgba(255, 255, 255, .7),
        0 0 90px rgba(255, 255, 255, .45),
        0 0 140px rgba(94, 251, 255, .25);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
}

/* Playing the Angel · dirección visual 03 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 18%, rgba(109, 27, 30, .18), transparent 31%),
    radial-gradient(ellipse at 35% 70%, rgba(124, 110, 91, .08), transparent 48%),
    linear-gradient(100deg, rgba(255,255,255,.018), transparent 24%, rgba(255,255,255,.014) 64%, transparent),
    var(--surface);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .32;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 2px, rgba(0,0,0,.16) 3px 4px),
    repeating-linear-gradient(87deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}
.aura {
  opacity: .78;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 18%, transparent 80%, rgba(0,0,0,.48)),
    linear-gradient(0deg, rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.18));
}
#portal {
  width: min(1180px, calc(100% - 150px));
  margin: 0 auto;
}
.side-rail {
  position: fixed;
  left: 18px;
  top: 70px;
  bottom: 32px;
  width: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: rgba(223, 25, 43, .68);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(223, 25, 43, .35);
}
.topbar {
  min-height: 78px;
  border-bottom-color: rgba(218, 204, 179, .12);
}
.topbar h1 {
  padding: 8px 12px;
  border: 1px solid rgba(211, 190, 159, .22);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(117, 84, 72, .25), rgba(20,20,19,.4));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.38);
}
.topbar nav a, .topbar nav button, .refresh {
  border: 1px solid rgba(211, 190, 159, .19);
  border-radius: 3px;
  color: #d3c7b4;
  background: linear-gradient(#292827, #171716);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 9px rgba(0,0,0,.45);
}
.hero {
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: center;
  overflow: hidden;
  border-bottom-color: rgba(218, 204, 179, .2);
}
.hero > div:last-child {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.hero h2 {
  margin: 11px 0 16px;
  color: #d6c5a8;
  font-size: clamp(1.4rem, 2.725vw, 2.575rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 18px rgba(198, 171, 136, .08);
}
.hero h2 strong {
  display: block;
  margin-top: 12px;
  color: var(--red);
  font-size: .3em;
  line-height: 1;
  letter-spacing: .04em;
  -webkit-text-stroke: 0 transparent;
  filter: drop-shadow(0 0 8px rgba(240,25,38,.38));
}
.hero p:last-child {
  max-width: 660px;
  color: #938b7e;
  font-size: .76rem;
}
.angel-scene {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 320px;
  opacity: .88;
  filter: drop-shadow(0 0 22px rgba(219, 41, 56, .12));
}
.left-photo-panel,
.right-video-panel {
  position: fixed;
  top: 92px;
  bottom: 34px;
  width: clamp(210px, 16vw, 380px);
  z-index: 0;
  pointer-events: none;
  opacity: .82;
}
.left-photo-panel {
  left: 18px;
  border-left: 1px solid rgba(191, 23, 39, .22);
}
.right-video-panel {
  right: 18px;
  border-right: 1px solid rgba(191, 23, 39, .28);
  filter: drop-shadow(0 0 22px rgba(191, 23, 39, .12));
}
.left-photo-panel::after,
.right-video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.left-photo-panel::after {
  background:
    linear-gradient(90deg, rgba(7,7,7,.2), transparent 28%, transparent 70%, var(--surface) 100%),
    linear-gradient(0deg, var(--surface) 0, transparent 18%, transparent 78%, var(--surface) 100%);
}
.right-video-panel::after {
  background:
    linear-gradient(270deg, rgba(7,7,7,.16), transparent 28%, transparent 70%, var(--surface) 100%),
    linear-gradient(0deg, var(--surface) 0, transparent 14%, transparent 84%, var(--surface) 100%);
}
.left-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  opacity: .72;
  filter: sepia(.34) contrast(1.28) brightness(.62);
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
}
.right-video-panel video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: .78;
  filter: grayscale(1) sepia(.16) contrast(1.2) brightness(.68);
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}
.wave {
  position: absolute;
  left: -14%;
  right: -6%;
  top: 48%;
  height: 48px;
  opacity: .38;
  background:
    radial-gradient(ellipse at 8% 50%, transparent 0 13px, rgba(229,216,193,.65) 14px 15px, transparent 16px),
    radial-gradient(ellipse at 25% 50%, transparent 0 19px, rgba(229,216,193,.48) 20px 21px, transparent 22px),
    radial-gradient(ellipse at 45% 50%, transparent 0 12px, rgba(229,216,193,.55) 13px 14px, transparent 15px),
    radial-gradient(ellipse at 68% 50%, transparent 0 22px, rgba(229,216,193,.45) 23px 24px, transparent 25px),
    radial-gradient(ellipse at 90% 50%, transparent 0 15px, rgba(229,216,193,.52) 16px 17px, transparent 18px);
  background-size: 130px 48px, 170px 48px, 145px 48px, 190px 48px, 150px 48px;
  animation: angelWave 5.8s linear infinite;
}
.wave-two {
  top: 53%;
  opacity: .19;
  transform: scaleY(.72);
  animation-duration: 8.2s;
  animation-direction: reverse;
}
.angel-figure {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 112px;
  height: 200px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.7));
}
.angel-head {
  position: absolute;
  left: 35px;
  top: 0;
  width: 46px;
  height: 48px;
  border-radius: 48% 52% 46% 54%;
  background: #050505;
  box-shadow:
    -10px -3px 0 -3px #050505, 10px 1px 0 -4px #050505,
    -7px 8px 0 -5px #050505, 8px 10px 0 -5px #050505;
}
.angel-body {
  position: absolute;
  left: 33px;
  top: 42px;
  width: 50px;
  height: 91px;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #090909, #1a1212 56%, #070707);
}
.angel-arm, .angel-leg {
  position: absolute;
  display: block;
  width: 15px;
  background: #080808;
  transform-origin: 50% 0;
}
.angel-arm { top: 54px; height: 88px; }
.arm-left { left: 35px; transform: rotate(38deg); }
.arm-right { right: 29px; transform: rotate(-38deg); }
.angel-leg { top: 125px; height: 72px; }
.leg-left { left: 45px; transform: rotate(12deg); }
.leg-right { right: 38px; transform: rotate(-12deg); }
.angel-heart {
  position: absolute;
  left: 43px;
  top: 66px;
  z-index: 2;
  color: #f04a50;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 5px #fff, 0 0 12px #f32638, 0 0 26px #f32638;
  animation: heartBeat 1.55s ease-in-out infinite;
}
.angel-wing {
  position: absolute;
  top: 98px;
  width: 105px;
  height: 120px;
  opacity: .24;
  border: 1px solid rgba(230,215,190,.42);
}
.wing-left {
  right: 50%;
  border-radius: 90% 8% 80% 10%;
  transform: rotate(-15deg) skewY(18deg);
  background: repeating-linear-gradient(100deg, transparent 0 11px, rgba(229,216,193,.24) 12px 13px);
}
.wing-right {
  left: 50%;
  border-radius: 8% 90% 10% 80%;
  transform: rotate(15deg) skewY(-18deg);
  background: repeating-linear-gradient(80deg, transparent 0 11px, rgba(229,216,193,.24) 12px 13px);
}
.angel-data {
  position: absolute;
  color: rgba(213, 195, 168, .36);
  font: 500 .48rem/1.45 monospace;
  letter-spacing: .12em;
  border-top: 1px solid rgba(219,41,56,.32);
  padding-top: 6px;
}
.data-left { left: 8%; top: 28%; }
.data-right { right: 2%; bottom: 23%; }
.panel {
  border-color: rgba(212, 194, 167, .2);
  border-radius: 7px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.022), transparent 28%),
    rgba(var(--surface-rgb), .94);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.4);
}
.panel::before {
  width: 46px;
  height: 1px;
  left: 16px;
  top: 0;
  background: #be1a29;
}
.grid {
  grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr);
  gap: 16px;
  margin-top: 16px;
}
.request-row input {
  border-color: rgba(213, 198, 172, .16);
  border-radius: 2px;
  background: rgba(8,8,8,.62);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.8), 2px 0 0 rgba(103, 229, 116, .72);
}
.request-row:nth-child(3n+2) input {
  box-shadow: inset 0 1px 5px rgba(0,0,0,.8), 2px 0 0 rgba(74, 188, 243, .78);
}
.request-row input:focus {
  border-color: rgba(211, 190, 159, .5);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.8), 2px 0 0 #f02a3c, 0 0 12px rgba(240,42,60,.14);
}
.tabs {
  border-color: rgba(211,190,159,.18);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 9px rgba(0,0,0,.45);
}
.tabs button {
  color: #bcb09e;
  background: var(--surface);
}
.tabs button.active {
  color: #eadbc2;
  background: linear-gradient(#65202a, #2b1418);
  box-shadow: inset 0 0 10px rgba(224, 35, 52, .24);
}
.primary {
  border: 1px solid rgba(235, 74, 85, .44);
  border-radius: 3px;
  color: #e6d5bc;
  background: linear-gradient(#53242a, #231416);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 12px rgba(228,34,51,.14);
}
.protocol {
  background:
    linear-gradient(135deg, rgba(125, 45, 48, .19), transparent 32%),
    rgba(var(--surface-rgb), .96);
}
.protocol li {
  color: #a99e8e;
  border-top-color: rgba(214,195,168,.16);
}
.protocol li b {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226,38,55,.45);
  border-radius: 50%;
  font-size: .58rem;
  box-shadow: 0 0 9px rgba(226,38,55,.12);
}
.protocol::after, .request-panel::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 53px;
  height: 13px;
  background: linear-gradient(90deg, #0b0b0b 0 22%, #33312d 22% 44%, #68645a 44% 66%, #b8ad98 66% 82%, #781823 82%);
  opacity: .74;
}
.request-panel::after {
  background: linear-gradient(90deg, #090909 0 25%, #272923 25% 50%, #2f4c4e 50% 75%, #9f8b71 75%);
}
.packages {
  margin-top: 14px;
}

@keyframes angelWave {
  to { background-position: 130px 0, -170px 0, 145px 0, -190px 0, 150px 0; }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(.88); opacity: .72; }
  12% { transform: scale(1.15); opacity: 1; }
  25% { transform: scale(.95); }
  37% { transform: scale(1.08); opacity: 1; }
  55% { transform: scale(.88); opacity: .72; }
}

@media (min-width: 1250px) {
  #portal {
    width: min(1080px, calc(100% - clamp(440px, 34vw, 800px)));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 1249px) {
  .left-photo-panel,
  .right-video-panel { display: none; }
}
@media (max-width: 900px) {
  #portal { width: min(100% - 42px, 760px); }
  .side-rail { display: none; }
  .hero { grid-template-columns: 1fr; padding: 34px 0; }
  .hero > div:last-child { grid-column: 1; }
  .angel-scene { grid-column: 1; opacity: .24; position: absolute; right: 0; width: 52%; }
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #portal { width: calc(100% - 24px); }
  .hero h2 { font-size: clamp(1.18rem, 7vw, 2rem); }
  .angel-scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .angel-heart { animation: none; }
}

/* Consola separada del operador */
.operator-console {
  background:
    radial-gradient(circle at 12% 12%, rgba(240,25,38,.1), transparent 25rem),
    radial-gradient(circle at 88% 76%, rgba(116,18,28,.12), transparent 30rem),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.012) 40px),
    var(--surface);
}
.google-access { margin-top: 19px; }
.access-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 15px;
  color: #67625b;
  font-size: .52rem;
  letter-spacing: .16em;
}
.access-divider::before,
.access-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.google-button {
  min-height: 42px;
  display: flex;
  justify-content: center;
}
.google-access small {
  display: block;
  margin-top: 10px;
  color: #777169;
  font-size: .58rem;
  line-height: 1.45;
  text-align: center;
}
.operator-portal {
  width: min(1180px, calc(100% - 42px));
  margin: 0 auto;
  padding-bottom: 70px;
}
.operator-topbar {
  border-bottom-color: rgba(240,25,38,.28);
}
.operator-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, .8fr);
  gap: 45px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.operator-hero h2 {
  margin: 14px 0;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.operator-hero h2 strong {
  display: block;
  margin-top: 12px;
  color: var(--red);
  font-size: .3em;
  line-height: 1;
  letter-spacing: .04em;
  -webkit-text-stroke: 0 transparent;
  filter: drop-shadow(0 0 8px rgba(240,25,38,.38));
}
.operator-hero p,
.operator-notice {
  max-width: 660px;
  color: var(--ash);
  font-size: .78rem;
  line-height: 1.6;
}
.operator-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: rgba(var(--surface-rgb), .92);
}
.operator-counters article {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
}
.operator-counters article:last-child { border-right: 0; }
.operator-counters span {
  color: var(--paper);
  font-size: 2rem;
  font-weight: 200;
  text-shadow: var(--glow);
}
.operator-counters small {
  color: var(--red);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-align: center;
}
.operator-packages { margin-top: 22px; }
.operator-notice {
  margin: -8px 0 20px;
  padding: 10px 13px;
  border-left: 2px solid var(--red);
  background: rgba(240,25,38,.035);
}
.operator-card { border-color: rgba(232,227,216,.2); }

@media (max-width: 820px) {
  .operator-hero { grid-template-columns: 1fr; gap: 22px; padding: 38px 0; }
  .operator-counters { grid-template-columns: 1fr; }
  .operator-counters article { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--line); }
  .operator-counters article:last-child { border-bottom: 0; }
}

/* Portada principal: bifurcación cliente / operador */
.landing-page {
  background:
    radial-gradient(circle at 50% 4%, rgba(240,25,38,.12), transparent 28rem),
    repeating-linear-gradient(92deg, transparent 0 7px, rgba(255,255,255,.012) 8px 9px),
    var(--surface);
}
.landing-shell {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - clamp(440px, 34vw, 800px)));
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 35px;
}
.landing-topbar { border-bottom-color: rgba(240,25,38,.28); }
.landing-status {
  color: var(--ash);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.landing-hero {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.landing-hero h2 {
  margin: 15px 0;
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.landing-hero h2 strong {
  display: block;
  margin-top: 12px;
  color: var(--red);
  font-size: .3em;
  line-height: 1;
  letter-spacing: .04em;
  -webkit-text-stroke: 0 transparent;
  filter: drop-shadow(0 0 8px rgba(240,25,38,.38));
}
.landing-hero p {
  max-width: 650px;
  color: var(--ash);
  font-size: .8rem;
  line-height: 1.65;
}
.landing-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.landing-path {
  position: relative;
  min-height: 220px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--paper);
  background:
    linear-gradient(120deg, rgba(255,255,255,.025), transparent 34%),
    rgba(var(--surface-rgb), .94);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.landing-path::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 72px;
  height: 2px;
  background: var(--red);
  box-shadow: var(--glow);
}
.landing-path:hover {
  transform: translateY(-3px);
  border-color: rgba(240,25,38,.65);
  box-shadow: 0 18px 45px rgba(0,0,0,.42), 0 0 24px rgba(240,25,38,.08);
}
.landing-path span,
.landing-path b {
  color: var(--red);
  font-size: .58rem;
  letter-spacing: .18em;
}
.landing-path h3 {
  margin: 24px 0 10px;
  font-size: 1.65rem;
  text-transform: uppercase;
}
.landing-path p {
  min-height: 58px;
  color: var(--ash);
  font-size: .75rem;
  line-height: 1.55;
}
.landing-path b { display: inline-block; margin-top: 14px; color: var(--paper); }
.operator-path {
  background:
    linear-gradient(120deg, rgba(240,25,38,.06), transparent 42%),
    rgba(var(--surface-rgb), .97);
}
.landing-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  color: #5f5a53;
  font-size: .52rem;
  letter-spacing: .16em;
}
@media (max-width: 1249px) {
  .landing-shell { width: min(920px, calc(100% - 42px)); }
}
@media (max-width: 700px) {
  .landing-shell { width: calc(100% - 24px); }
  .landing-status { display: none; }
  .landing-hero { min-height: 340px; }
  .landing-hero h2 { font-size: clamp(2.25rem, 13vw, 4rem); }
  .landing-paths { grid-template-columns: 1fr; }
  .landing-footer { flex-direction: column; }
}