:root {
  --purple: #7A1FF0;      /* morado Macob Cargo */
  --purple-deep: #5A12C2;
  --yellow: #FFF96E;      /* amarillo Macob Cargo */
  /* escala de lilas del manual, de claro a morado */
  --l1: #F3E7FD; --l2: #E4D2FD; --l3: #CFA6FF; --l4: #B57CFF; --l5: #A463FB;
  --ink: #17112B;
  --muted: #6B6580;
  --line: #DCD4EE;
  --error: #D3264A;
  --zetta: "Lexend Zetta", "Inter", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: #fff;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

/* Rayo: cara amarilla, lados morado oscuro */
#mc-bolt .t { fill: var(--bt, var(--yellow)); }
#mc-bolt .s { fill: var(--bs, var(--purple-deep)); }

/* ---------- Intro: construcción del logo ---------- */
.construct {
  position: fixed; inset: 0; z-index: 10;
  display: flex; background: #fff;
  transition: transform .75s cubic-bezier(.7, 0, .3, 1);
}
.cc {
  width: 8.5vw; flex: none; display: grid; place-items: center;
  transform: translateX(-110%);
  animation: colIn .5s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--i) * .11s);
}
.cc:nth-child(1) { background: var(--l1); } .cc:nth-child(2) { background: var(--l2); }
.cc:nth-child(3) { background: var(--l3); } .cc:nth-child(4) { background: var(--l4); }
.cc:nth-child(5) { background: var(--l5); }
.cc svg { width: 60%; height: auto; overflow: visible; }
.cc use { fill: none; stroke: var(--purple); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw .7s ease-out forwards; animation-delay: calc(.25s + var(--i) * .11s); }
.cc svg.solid { transform: scale(0); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: .8s; }
.cc svg.solid use { stroke: none; animation: none; }
.cmain { flex: 1; background: var(--purple); display: grid; place-items: center; transform: translateX(-110%); animation: colIn .55s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
.clogo { color: #fff; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 0 5vw; opacity: 0; transform: translateX(40px); animation: slideIn .6s ease-out 1s forwards; }
.clogo .wordmark { font-size: clamp(26px, 4.6vw, 84px); }
.clogo .tagline { font-size: clamp(12px, 1.2vw, 20px); }

@keyframes colIn { to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: var(--off); } }
@keyframes pop { to { transform: none; } }
@keyframes slideIn { to { opacity: 1; transform: none; } }

body.ready .construct { transform: translateY(-100%); pointer-events: none; }
body.no-intro .construct { display: none; }

.wordmark { display: flex; gap: .4em; font-family: var(--zetta); line-height: 1.05; letter-spacing: -.04em; }
.wm-a { font-weight: 200; } .wm-b { font-weight: 900; }
.tagline { margin: 0; font-style: italic; font-weight: 500; letter-spacing: .14em; }

/* ---------- Columna blanca con el titular ---------- */
.intro-col {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 4vw, 56px); min-height: 100%;
  color: var(--purple);
}
.topmark { display: flex; align-items: center; gap: 12px; font-family: var(--zetta); font-weight: 200; letter-spacing: -.04em; font-size: 18px; }
.topmark b { font-weight: 900; }
.topmark svg { width: 30px; height: auto; }
.big { margin: 0; font-family: var(--zetta); font-weight: 900; line-height: .98; letter-spacing: -.07em; font-size: clamp(44px, 7.4vw, 120px); }
.big .l { display: block; }
.big .thin { font-weight: 200; font-size: .62em; letter-spacing: -.05em; line-height: 1.25; }
.foot { margin: 0; font-family: var(--zetta); font-weight: 200; letter-spacing: -.03em; font-size: 18px; }
.intro-col { position: relative; overflow: hidden; }
.intro-col > * { position: relative; z-index: 1; }

/* reCARGADOS como barra de carga: cada línea pasa de contorno a relleno */
.big .fillme { position: relative; color: transparent; -webkit-text-stroke: 2px var(--purple); }
.big .fillme::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  color: var(--purple); -webkit-text-stroke: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .65s cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(.55s + var(--fd));
}
body:not(.intro) .big .fillme::after { clip-path: inset(0 0 0 -4%); }

.charge { display: flex; align-items: center; gap: 14px; margin-top: 22px; max-width: min(360px, 62%); }
.charge-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--l1); overflow: hidden; }
.charge-bar i { display: block; height: 100%; width: 100%; background: var(--purple); border-radius: 5px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.85s cubic-bezier(.45, 0, .3, 1) .55s; }
body:not(.intro) .charge-bar i { transform: scaleX(1); }
.charge-pct { min-width: 4ch; text-align: right; font-family: var(--zetta); font-weight: 900; font-size: 18px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* El rayo: primero contorno; al llegar al 100 % se llena de color desde abajo */
.charge-bolt { position: absolute !important; z-index: 0 !important; right: 6%; top: 45%; width: min(28%, 170px); }
.charge-bolt svg { display: block; width: 100%; height: auto; overflow: visible; }
.ghost-outline use { fill: none; stroke: var(--l3); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease-out .3s; }
body.intro .ghost-outline use { stroke-dashoffset: 1; }
.ghost-outline { transition: opacity .4s ease 2.9s; }
body:not(.intro) .ghost-outline { opacity: 0; }
.ghost-fill { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.3, .8, .3, 1) 2.35s; }
body:not(.intro) .ghost-fill { clip-path: inset(0 0 0 0); }

/* ---------- Lado morado con rayos flotando y la tarjeta ---------- */
.stage {
  position: relative; overflow: hidden;
  background-color: var(--purple);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 8px, rgba(255, 255, 255, .03) 8px 12px, transparent 12px 28px);
  display: grid; place-items: center;
  padding: 40px 16px; min-height: 100%;
}
.floaters { position: absolute; inset: 0; }
.fb { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; overflow: visible; animation: float 4.5s ease-in-out infinite; animation-delay: var(--d);
  /* Profundidad: cada rayo sigue al mouse según su capa (--z) */
  translate: calc(var(--px, 0) * var(--z, 10) * 1px) calc(var(--py, 0) * var(--z, 10) * 1px); }

.fb.ghost-y { --bt: #FCF9B4; --bs: #F1EA8A; opacity: 1; }
.fb.ghost-p { --bt: var(--l4); --bs: var(--l5); opacity: .8; }
body.intro .fb.ghost-y, body.intro .fb.ghost-p { opacity: 0; }
@keyframes float { 50% { transform: translateY(-12px); } }

.card {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  background: #fff; border-radius: 20px; padding: 36px 34px 30px;
  box-shadow: 0 30px 70px rgba(30, 6, 80, .35);
}
.card h1 { margin: 0; font-size: 28px; font-weight: 700; }
.hint { margin: 6px 0 20px; color: var(--muted); }
.card form { display: flex; flex-direction: column; }
.card label { font-size: 15px; margin: 12px 0 6px; }
.field { position: relative; }
.card input {
  width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 12px;
  padding: 0 52px 0 46px; font: 16px Inter, sans-serif; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card input::placeholder { color: #A9A3BC; }
.card input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(122, 31, 240, .16); }
.ico { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #A9A3BC; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .15s ease; }
.field:focus-within .ico { stroke: var(--purple); }
.ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; display: grid; place-items: center; }
.ver:hover { background: rgba(122, 31, 240, .08); }
.ver svg { width: 21px; height: 21px; fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ver .eye-closed, .ver[aria-pressed="true"] .eye-open { display: none; }
.ver[aria-pressed="true"] .eye-closed { display: block; }
.caps { margin: 8px 0 0; font-size: 13px; color: var(--purple-deep); font-weight: 600; }

/* Botón Entrar: un rayo se desliza al pasar el mouse; al enviar, "Entrando…" */
.submit {
  position: relative; overflow: hidden;
  margin-top: 24px; height: 52px; border: 0; border-radius: 12px;
  background: var(--purple); color: #fff; font: 700 17px Inter, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s ease, transform .1s ease;
}
.submit:hover { background: var(--purple-deep); }
.submit:active { transform: scale(.985); }
.submit-bolt { width: 15px; height: auto; fill: var(--yellow); transform: translateX(-14px); opacity: 0; transition: transform .25s ease, opacity .2s ease; }
.submit:hover .submit-bolt, .submit:focus-visible .submit-bolt, .submit.loading .submit-bolt { transform: none; opacity: 1; }
.submit.loading { pointer-events: none; background: var(--purple-deep); }
.submit.loading .submit-bolt { animation: blink .8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.submit:focus-visible, .ver:focus-visible, .skip:focus-visible, .forgot:focus-visible { outline: 3px solid rgba(122, 31, 240, .45); outline-offset: 2px; }
.forgot { display: inline-block; margin-top: 18px; color: var(--purple); font-size: 15px; text-decoration: none; }
.forgot:hover { text-decoration: underline; }
.error { background: #FDECEF; color: var(--error); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 6px; }

.skip {
  position: fixed; right: 18px; bottom: 18px; z-index: 11;
  border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #fff;
  border-radius: 999px; padding: 8px 16px; font: 500 14px Inter, sans-serif; cursor: pointer;
}
body:not(.intro) .skip { display: none; }

/* Entrada de la pantalla final (al subir la intro) */
.big .l, .card, .fb { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2); }
body.intro .big .l { opacity: 0; transform: translateX(-50px); }
body.intro .card { opacity: 0; transform: translateY(50px); }
body.intro .fb { opacity: 0; scale: .3; }
.big .l:nth-child(2) { transition-delay: .08s; } .big .l:nth-child(3) { transition-delay: .16s; }
.big .l:nth-child(4) { transition-delay: .24s; } .big .l:nth-child(5) { transition-delay: .32s; }
.card { transition-delay: .3s; }
.fb { transition-property: opacity, scale, translate; transition-duration: .5s, .5s, .35s; transition-timing-function: cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.2s + var(--d) * .4); }

/* Al pulsar Entrar, los rayos suben disparados */
body.leaving .fb { translate: 0 -120vh; transition: translate .7s cubic-bezier(.6, 0, .9, .4); transition-delay: calc(var(--d) * .15); }

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .intro-col { min-height: 0; gap: 18px; padding: 22px 20px; }
  .big { font-size: clamp(34px, 11vw, 56px); }
  .big .thin { display: inline; }
  .cc { width: 10vw; }
  .stage { padding: 32px 16px 64px; }
  .charge-bolt { width: 22%; right: 7%; top: 30%; }
  .big .fillme { -webkit-text-stroke-width: 1.5px; }
  .charge { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb { animation: none; }
  .big .l, .card, .fb, .construct, .ghost-outline, .ghost-outline use, .big .fillme::after, .charge-bar i, .ghost-fill { transition: none; }
  .submit.loading .submit-bolt { animation: none; }
}