/* Escala para pantallas grandes: --u = 1px hasta 1920px de ancho; por encima crece con la
   pantalla (a 2560px vale 1,33px; en 4K, 2px). Todas las medidas se expresan en --u. */
:root { --u: 1px; }
@media (min-width: 1921px) {
  :root { --u: calc(100vw / 1920); }
  html { font-size: calc(16 * var(--u)); }
}

/* MaaMWp — pantallas de acceso (login, registro, recuperar contraseña).
   Escenario oscuro de pantalla completa: textos a la izquierda, tarjeta del formulario a la derecha
   y las líneas WebGL desembocando en la tarjeta. Solo presentación. */

@property --iw { syntax: '<number>'; inherits: false; initial-value: 1; }

.mw-auth {
  --pino: #0b2e26; --pino-2: #10392f; --hoja: #e8efe9; --tinta: #0d1f1a; --musgo: #4a6158; --niebla: #b9cbc3;
  --senal: #25d366; --lavanda: #8e8cf8; --celeste: #74acdf; --ambar: #f2b544; --rojo: #d6463a;
  --card: #f4f8f5;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; overflow: clip;
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wdth" 100;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background:
    radial-gradient(60% 70% at 78% 52%, rgba(37,211,102,.12), transparent 62%),
    radial-gradient(50% 60% at 10% 100%, rgba(142,140,248,.08), transparent 60%),
    var(--pino);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.mw-auth *, .mw-auth *::before, .mw-auth *::after { box-sizing: border-box; }

/* Escena */
.mw-gl { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .2s; }
.mw-auth.has-gl .mw-gl { opacity: 1; }
.mw-gl canvas { width: 100% !important; height: 100% !important; display: block; }
.mw-mlines { display: none; }

/* Columna de textos */
.mw-side {
  position: relative; z-index: 1;
  padding: clamp(calc(28 * var(--u)), 4vw, calc(56 * var(--u))) clamp(calc(24 * var(--u)), 5vw, calc(80 * var(--u)));
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(40 * var(--u));
  min-height: 100vh; min-height: 100svh;
}
.mw-brand { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; font-variation-settings: "wdth" 112; width: max-content; }
.mw-brand__logo { height: calc(40 * var(--u)); width: auto; aspect-ratio: 1774 / 486; display: block; overflow: visible; transition: transform .6s var(--ease-out); }
.mw-brand:hover .mw-brand__logo { transform: scale(1.03); }

.mw-title {
  font-weight: 780; letter-spacing: -.035em; line-height: .9;
  font-size: clamp(2.8rem, 5.4vw, 6rem); margin: 0 0 calc(26 * var(--u)); max-width: 9ch;
  font-variation-settings: "wdth" 112;
}
.mw-w { display: inline-block; overflow: clip; padding: .16em .08em .24em; margin: -.16em -.08em -.24em; vertical-align: top; perspective: calc(700 * var(--u)); }
.mw-ch {
  --hw: 0;
  display: inline-block; transform-origin: 50% 100% -.3em;
  font-variation-settings: "wdth" calc(62 + var(--iw) * 50 + var(--hw) * 13), "wght" calc(300 + var(--iw) * 480 + var(--hw) * 120);
}
.mw-ready .mw-ch { animation: mw-char-in 1.4s var(--ease-out) both; animation-delay: calc(var(--i) * 26ms + 150ms); }
@keyframes mw-char-in {
  from { transform: translateY(118%) rotateX(-95deg); --iw: 0; }
  to { transform: none; --iw: 1; }
}

.mw-lede { color: var(--niebla); font-size: 1.08rem; line-height: 1.55; max-width: 30em; margin: 0; animation: mw-rise 1.1s var(--ease-out) both .6s; }
@keyframes mw-rise { from { opacity: 0; transform: translateY(calc(24 * var(--u))); } to { opacity: 1; transform: none; } }

/* Chats que esperan */
.mw-stack { margin-top: calc(44 * var(--u)); max-width: calc(380 * var(--u)); animation: mw-rise 1.1s var(--ease-out) both .8s; }
.mw-stack__count { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0 0 calc(16 * var(--u)); font-size: .92rem; color: var(--niebla); }
.mw-stack__count b { color: #fff; font-variant-numeric: tabular-nums; display: inline-block; }
.mw-stack__count.bump b { animation: mw-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes mw-bump { 40% { transform: translateY(calc(-4 * var(--u))) scale(1.25); color: var(--senal); } }
.mw-ping { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; overflow: visible; }
.mw-ping circle { fill: var(--senal); }
.mw-ping .mw-ping__ring { fill: none; stroke: var(--senal); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mw-ping 1.8s ease-out infinite; }
@keyframes mw-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

.mw-stack__list { position: relative; list-style: none; margin: 0; padding: 0; height: calc(104 * var(--u)); }
.mw-note {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr) auto; gap: calc(12 * var(--u)); align-items: center;
  padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(247, 250, 248, .96); color: var(--tinta);
  box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) calc(-24 * var(--u)) rgba(0,0,0,.7);
  transform-origin: 50% 0; transition: transform .75s var(--ease-out), opacity .75s var(--ease-out);
}
.mw-note > i { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(12 * var(--u)); font-weight: 750; color: #fff; background: var(--c); }
.mw-note b { display: block; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-note span { display: block; font-size: .82rem; color: #5d7068; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-note > * { transition: opacity .45s; }
.mw-note[data-pos="1"] > *, .mw-note[data-pos="2"] > *, .mw-note[data-pos="3"] > * { opacity: 0; }
.mw-note em { font-style: normal; font-size: .74rem; color: #6f817a; align-self: start; margin-top: calc(3 * var(--u)); }
.mw-note[data-pos="-1"] { transform: translateY(calc(-30 * var(--u))) scale(1.04); opacity: 0; z-index: 4; }
.mw-note[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.mw-note[data-pos="1"] { transform: translateY(calc(17 * var(--u))) scale(.94); opacity: .7; z-index: 2; }
.mw-note[data-pos="2"] { transform: translateY(calc(32 * var(--u))) scale(.88); opacity: .4; z-index: 1; }
.mw-note[data-pos="3"], .mw-note[data-pos="4"], .mw-note[data-pos="5"] { transform: translateY(calc(42 * var(--u))) scale(.82); opacity: 0; z-index: 0; }

.mw-bottom { display: flex; flex-direction: column; gap: calc(16 * var(--u)); animation: mw-rise 1.1s var(--ease-out) both 1s; }
.mw-legend { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(22 * var(--u)); list-style: none; margin: 0; padding: 0; font-size: .86rem; color: var(--niebla); }
.mw-legend li { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.mw-legend svg { width: calc(34 * var(--u)); height: calc(12 * var(--u)); overflow: visible; }
.mw-legend path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.mw-legend circle { fill: var(--c); }
.mw-foot { font-size: .85rem; color: var(--niebla); margin: 0; }

/* Columna del formulario */
.mw-main { position: static; display: flex; align-items: center; justify-content: center; padding: calc(96 * var(--u)) clamp(calc(24 * var(--u)), 5vw, calc(80 * var(--u))) calc(56 * var(--u)); }
.mw-lang { position: absolute; top: calc(20 * var(--u)); right: calc(22 * var(--u)); z-index: 5; }
.mw-lang button[class*="rounded"] { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
.mw-back { position: absolute; top: calc(30 * var(--u)); right: calc(86 * var(--u)); z-index: 5; font-size: .9rem; color: var(--niebla); text-decoration: none; display: inline-flex; gap: calc(6 * var(--u)); align-items: center; transition: color .2s; }
.mw-back:hover { color: #fff; }

.mw-form {
  position: relative; z-index: 2; width: 100%; max-width: calc(448 * var(--u));
  background: var(--card); color: var(--tinta);
  border-radius: calc(30 * var(--u)); padding: clamp(calc(28 * var(--u)), 3.2vw, calc(46 * var(--u)));
  box-shadow: 0 calc(60 * var(--u)) calc(120 * var(--u)) calc(-50 * var(--u)) rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07);
  transition: box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
  animation: mw-card-in 1.3s var(--ease-out) both .25s;
}
@keyframes mw-card-in { from { opacity: 0; transform: translateY(calc(40 * var(--u))) scale(.97); } }
.mw-auth.is-typing .mw-form { box-shadow: 0 calc(60 * var(--u)) calc(120 * var(--u)) calc(-50 * var(--u)) rgba(0,0,0,.75), 0 0 0 1.5px rgba(37,211,102,.55), 0 0 calc(80 * var(--u)) calc(-16 * var(--u)) rgba(37,211,102,.45); }
.mw-auth.is-sending .mw-form { box-shadow: 0 calc(60 * var(--u)) calc(120 * var(--u)) calc(-50 * var(--u)) rgba(0,0,0,.75), 0 0 0 2px rgba(37,211,102,.8), 0 0 calc(120 * var(--u)) calc(-10 * var(--u)) rgba(37,211,102,.6); }

.mw-form h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 780; letter-spacing: -.03em; line-height: 1; margin: 0 0 calc(10 * var(--u)); font-variation-settings: "wdth" 110; color: var(--tinta); }
.mw-form .mw-sub { color: var(--musgo); margin: 0 0 calc(30 * var(--u)); font-size: 1rem; }
.mw-field { margin-bottom: calc(18 * var(--u)); }
.mw-field label { display: block; font-size: .92rem; font-weight: 650; color: var(--tinta); margin-bottom: calc(8 * var(--u)); }
.mw-input { position: relative; }
.mw-input input {
  width: 100%; height: calc(56 * var(--u)); border-radius: calc(16 * var(--u)); border: 1.5px solid #c9d6cf; background: #fff; color: var(--tinta);
  padding: 0 calc(16 * var(--u)) 0 calc(50 * var(--u)); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s;
}
.mw-input input::placeholder { color: #8a9c95; }
.mw-input input:hover { border-color: #a9bdb3; }
.mw-input input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(37,211,102,.25); }
.mw-input input.has-eye { padding-right: calc(52 * var(--u)); }

/* Íconos SVG que reaccionan */
.mw-ico {
  position: absolute; left: calc(16 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-11 * var(--u)); pointer-events: none; overflow: visible;
  fill: none; stroke: var(--musgo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s;
}
.mw-input:focus-within .mw-ico { stroke: var(--tinta); }
.mw-ico--mail rect { fill: #fff; }
.mw-ico--mail .mw-flap { transform-box: view-box; transform-origin: calc(12 * var(--u)) calc(7.6 * var(--u)); transition: transform .5s var(--ease-out); }
.mw-ico--mail .mw-letter { stroke: #1a9c4f; opacity: 0; transform: translateY(calc(3 * var(--u))); transition: transform .5s var(--ease-out) .08s, opacity .3s .08s; }
.mw-input:focus-within .mw-ico--mail .mw-flap { transform: translateY(.6px); }
.mw-input:focus-within .mw-ico--mail .mw-letter { opacity: 1; transform: translateY(calc(-5 * var(--u))); }
.mw-ico--lock rect { fill: #fff; }
.mw-ico--lock .mw-shackle { transition: transform .45s cubic-bezier(.34,1.56,.64,1); transform-box: view-box; transform-origin: calc(8 * var(--u)) calc(10.5 * var(--u)); }
.mw-ico--lock .mw-keyhole { transition: stroke .3s; }
.mw-input.is-open .mw-ico--lock .mw-shackle { transform: translateY(calc(-2.6 * var(--u))) rotate(-18deg); }
.mw-input.is-open .mw-ico--lock .mw-keyhole { stroke: #1a9c4f; }

.mw-input .mw-eye { position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 0; background: transparent; border-radius: calc(12 * var(--u)); display: grid; place-items: center; color: var(--musgo); cursor: pointer; transition: background-color .2s, color .2s; }
.mw-input .mw-eye:hover { background: #eef3f0; color: var(--tinta); }
.mw-input .mw-eye svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

.mw-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 calc(26 * var(--u)); }
.mw-check { position: relative; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); cursor: pointer; font-size: .93rem; color: var(--musgo); }
.mw-check input { position: absolute; left: 0; top: 50%; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin: calc(-10 * var(--u)) 0 0; opacity: 0; cursor: pointer; }
.mw-box { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); border: 1.6px solid #9fb3aa; background: #fff; display: grid; place-items: center; transition: background-color .25s, border-color .25s, transform .25s var(--ease-out); }
.mw-box svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s ease .05s; }
.mw-check input:checked + .mw-box { background: var(--tinta); border-color: var(--tinta); }
.mw-check input:checked + .mw-box svg { stroke-dashoffset: 0; }
.mw-check:active .mw-box { transform: scale(.9); }
.mw-check input:focus-visible + .mw-box { outline: 2px solid var(--tinta); outline-offset: 2px; }

.mw-link { color: var(--tinta); font-weight: 650; font-size: .93rem; text-decoration: underline; text-decoration-color: rgba(13,31,26,.3); text-underline-offset: calc(4 * var(--u)); transition: text-decoration-color .2s; }
.mw-link:hover { text-decoration-color: var(--tinta); }
.mw-recaptcha { margin-bottom: calc(18 * var(--u)); font-size: .82rem; color: var(--musgo); background: #e9efeb; border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.mw-recaptcha a { color: var(--tinta); }

.mw-submit {
  position: relative; width: 100%; height: calc(58 * var(--u)); border: 0; border-radius: calc(999 * var(--u)); background: var(--tinta); color: #fff;
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(11 * var(--u)) 0 calc(28 * var(--u));
  transition: background-color .25s, transform .25s var(--ease-out);
}
.mw-submit:hover { background: #17352d; }
.mw-submit:active { transform: scale(.985); }
.mw-submit:disabled { cursor: progress; }
.mw-submit__label { pointer-events: none; }
.mw-submit__plane { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--senal); display: grid; place-items: center; pointer-events: none; transition: transform .5s var(--ease-out); }
.mw-submit__plane svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: var(--tinta); transition: transform .5s var(--ease-out); }
.mw-submit:hover .mw-submit__plane { transform: scale(1.08); }
.mw-submit:hover .mw-submit__plane svg { transform: translate(1px, -1px) rotate(-14deg); }
.mw-submit.is-loading .mw-submit__plane svg { animation: mw-fly .7s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes mw-fly { 40% { transform: translate(calc(-3 * var(--u)), 2px) rotate(-14deg); } to { transform: translate(calc(60 * var(--u)), calc(-40 * var(--u))) rotate(-24deg) scale(.6); opacity: 0; } }
.mw-spin { position: absolute; right: calc(21 * var(--u)); top: 50%; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(-9 * var(--u)); color: var(--tinta); pointer-events: none; }

.mw-alt { margin-top: calc(26 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid rgba(13,31,26,.12); font-size: .95rem; color: var(--musgo); display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.mw-auth :focus-visible { outline: 2px solid var(--senal); outline-offset: calc(3 * var(--u)); }
.mw-form :focus-visible { outline-color: var(--tinta); }
.mw-auth .mw-input input:focus-visible { outline: none; }

/* Paleta del tema Tailwind ("primary") alineada a MaaMWp sólo dentro de estas pantallas */
.mw-auth {
  --color-primary-50: 232, 239, 233; --color-primary-100: 214, 230, 220; --color-primary-200: 185, 203, 195;
  --color-primary-300: 140, 170, 158; --color-primary-400: 74, 140, 115; --color-primary-500: 22, 74, 61;
  --color-primary-600: 13, 31, 26; --color-primary-700: 11, 46, 38; --color-primary-800: 8, 38, 32;
  --color-primary-900: 6, 25, 21; --color-primary-950: 4, 18, 15;
}
.mw-form button[type="submit"]:not(.mw-submit), .mw-form .bg-primary-600 { border-radius: calc(999 * var(--u)); }

/* Variante ancha (registro) */
.mw-auth--wide { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.mw-auth--wide .mw-side { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.mw-auth--wide .mw-title { font-size: clamp(2.4rem, 4.4vw, 4.8rem); }
.mw-auth--wide .mw-main { align-items: flex-start; }
.mw-form--wide { max-width: calc(780 * var(--u)); }

/* Pantallas medianas */
@media (max-width: 1180px) and (min-width: 901px) {
  .mw-stack { display: none; }
  .mw-auth--wide { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}

/* Mobile: encabezado oscuro y la tarjeta montada encima */
@media (max-width: 900px) {
  .mw-auth, .mw-auth--wide { grid-template-columns: minmax(0, 1fr); }
  .mw-form, .mw-form--wide { min-width: 0; }
  .mw-side, .mw-auth--wide .mw-side { position: relative; min-height: 0; height: auto; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(150 * var(--u)); gap: 0; }
  .mw-title, .mw-auth--wide .mw-title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); margin: calc(44 * var(--u)) 0 calc(16 * var(--u)); }
  .mw-lede { font-size: 1rem; }
  .mw-stack__list, .mw-bottom { display: none; }
  .mw-stack { margin-top: calc(22 * var(--u)); }
  .mw-stack__count { margin: 0; }
  .mw-mlines { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(160 * var(--u)); pointer-events: none; }
  .mw-mlines path { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .6; stroke-dasharray: 600; stroke-dashoffset: 600; animation: mw-draw 1.8s var(--ease-out) forwards .4s; }
  .mw-main { padding: 0 calc(14 * var(--u)) calc(40 * var(--u)); margin-top: calc(-88 * var(--u)); }
  .mw-form { max-width: calc(560 * var(--u)); border-radius: calc(26 * var(--u)); }
  .mw-back { display: none; }
  .mw-lang { top: calc(16 * var(--u)); right: calc(16 * var(--u)); }
}
@keyframes mw-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mw-ready .mw-ch, .mw-lede, .mw-stack, .mw-bottom, .mw-form { animation: none; }
  .mw-ping .mw-ping__ring, .mw-stack__count.bump b { animation: none; }
  .mw-legend circle { display: none; }
  .mw-mlines path { animation: none; stroke-dashoffset: 0; }
  .mw-note, .mw-ico *, .mw-submit__plane, .mw-submit__plane svg { transition: none; }
}