/*
 * Pantallas de acceso y de error con el estilo nuevo de RÜM (el de /checkout y /landing_claude_mcp):
 * azul noche, tinta crema, Syne en títulos, Inter en texto, durazno de acento, filetes finos
 * y botón píldora con orbe. La usan login, registro, recuperar/crear contraseña, acceso contable,
 * «sin acceso» y las páginas 403/404/500 (marcado en includes/rum_auth_editorial.php).
 */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/home/fonts/baloo2-home.woff2) format("woff2")}
@font-face{font-family:Syne;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/home/fonts/syne-home.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/home/fonts/inter-home.woff2) format("woff2")}

:root{
  --navy:#07091A;
  --navy-2:#0d1024;
  --cream:#F4F1EC;
  --ink-2:rgba(244,241,236,.74);
  --ink-3:rgba(244,241,236,.52);
  --peach:#F3D2B2;
  --peach-ink:#5c3a21;
  --hair:rgba(244,241,236,.16);
  --hair-2:rgba(244,241,236,.28);
  --bad:#ffb4a8;
  --good:#b9e8cc;
  --f-logo:"Baloo 2",system-ui,sans-serif;
  --f-display:"Syne","Inter",system-ui,sans-serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,5vw,88px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:rgba(243,210,178,.35) var(--navy);background:var(--navy)}
body.rx-auth{
  margin:0;min-height:100dvh;overflow-x:hidden;
  background:var(--navy);color:var(--cream);
  font-family:var(--f-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.rx-auth::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60rem 40rem at 85% -10%,rgba(243,210,178,.10),transparent 60%),
             radial-gradient(50rem 36rem at -10% 110%,rgba(42,109,176,.14),transparent 60%);
}
.rx-auth ::selection{background:var(--peach);color:var(--navy)}
:where(.rx-auth) a{color:inherit} /* :where para que .fbtn--primary en <a> conserve el durazno */
.rx-auth :focus-visible{outline:2px solid var(--peach);outline-offset:3px}
.rx-auth h1,.rx-auth h2,.rx-auth h3,.rx-auth h4,.rx-auth p,.rx-auth ul{margin:0}
.rx-auth .rum-word{font-family:var(--f-logo);font-weight:800;letter-spacing:.04em}

.rx-page{width:min(1180px,100%);margin:0 auto;padding:0 var(--gutter);min-height:100dvh;display:flex;flex-direction:column}

.rx-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid var(--hair)}
.rx-logo{font-family:var(--f-logo);font-weight:800;font-size:26px;letter-spacing:.06em;text-decoration:none;line-height:1}
.rx-top-link{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.rx-top-link:hover{color:var(--cream)}

/* Escenario: texto a la izquierda, tarjeta a la derecha */
.rx-stage{
  flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  grid-template-areas:"intro panel" "points panel";
  grid-template-rows:auto 1fr;
  gap:0 clamp(32px,6vw,96px);align-items:start;
  padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,88px);
}
.rx-stage--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "panel";max-width:720px}
.rx-intro{grid-area:intro;container-type:inline-size;min-width:0}
.rx-panel{grid-area:panel;min-width:0}
.rx-points{grid-area:points;min-width:0}

.rx-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.rx-title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(34px,9.2cqi,72px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;
}
.rx-title em{display:block;font-style:normal;font-weight:400;color:var(--peach)}
.rx-sub{margin-top:24px;max-width:46ch;font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);text-wrap:pretty}
.rx-sub strong{color:var(--cream);font-weight:600}

/* Código grande de las páginas de error */
.rx-code{
  display:block;margin-bottom:18px;
  font-family:var(--f-display);font-weight:800;font-size:clamp(72px,16cqi,148px);line-height:.86;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px var(--peach);
}

.rx-points{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--hair)}
.rx-points-h{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.rx-points-h span{color:var(--ink-3);font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:0;margin-left:8px}
.rx-points ul{list-style:none;padding:0;margin-top:12px}
.rx-points li{padding:9px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:15px}

/* Tarjeta del formulario */
.rx-card{
  position:relative;
  border:1px solid var(--hair-2);border-radius:20px;
  background:linear-gradient(180deg,rgba(244,241,236,.06),rgba(244,241,236,.02));
  padding:clamp(22px,3vw,34px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.rx-card-h{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,24px);letter-spacing:-.015em}
.rx-card-p{margin-top:8px;color:var(--ink-2);font-size:15px;text-wrap:pretty}
.rx-card-p + .rx-card-p{margin-top:12px}
.rx-card-p strong{color:var(--cream);font-weight:600}
/* Viñetas dentro de la tarjeta (pantalla «Únete al universo RÜM» de rum_access.php) */
.rx-card-list{list-style:none;padding:0;margin-top:12px}
.rx-card-list li{padding:9px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:15px}
.rx-card form{margin:0}

.rx-field{display:block;margin-top:18px}
.rx-field > label,.rx-field > .rx-label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rx-field input[type="text"],.rx-field input[type="email"],.rx-field input[type="password"],.rx-field input[type="tel"]{
  display:block;width:100%;min-height:50px;padding:12px 14px;
  border:1px solid var(--hair-2);border-radius:12px;
  background:rgba(244,241,236,.04);color:var(--cream);
  font:inherit;font-size:16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.rx-field input::placeholder{color:var(--ink-3);opacity:1}
.rx-field input:hover{border-color:rgba(244,241,236,.42)}
.rx-field input:focus{outline:none;border-color:var(--peach);background:rgba(244,241,236,.06);box-shadow:0 0 0 3px rgba(243,210,178,.16)}
.rx-field input:-webkit-autofill{-webkit-text-fill-color:var(--cream);-webkit-box-shadow:0 0 0 1000px #15182b inset;caret-color:var(--cream);transition:background-color 9999s}
.rx-field small{display:block;margin-top:8px;color:var(--ink-3);font-size:13px;line-height:1.45}

/* Verificación humana con el control deslizante */
.rx-range input[type="range"]{width:100%;margin:6px 0 0;accent-color:var(--peach);cursor:pointer}
.rx-range-val{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--ink-3)}
.rx-range-val b{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--peach);font-variant-numeric:tabular-nums}

/* Avisos */
.rx-alert,.rx-notice,.rx-ok{margin-top:18px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5}
.rx-alert{border:1px solid rgba(255,180,168,.42);background:rgba(255,180,168,.07);color:var(--bad)}
.rx-alert ul{list-style:none;padding:0;display:grid;gap:4px}
.rx-notice{border:1px solid rgba(243,210,178,.38);background:rgba(243,210,178,.06);color:var(--ink-2)}
.rx-notice strong{color:var(--cream);font-weight:600}
.rx-ok{border:1px solid rgba(185,232,204,.4);background:rgba(185,232,204,.06);color:var(--good)}

/* Términos (registro) */
.rx-policy{margin-top:18px;max-height:min(44vh,340px);overflow:auto;padding:16px 18px;border:1px solid var(--hair);border-radius:12px;background:rgba(0,0,0,.18);font-size:13.5px;line-height:1.55;color:var(--ink-2);scrollbar-color:rgba(243,210,178,.3) transparent}
.rx-policy h3{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--cream);letter-spacing:-.01em}
.rx-policy h4{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rx-policy p{margin-top:10px}
.rx-policy ul{margin-top:8px;padding-left:18px;display:grid;gap:6px}
.rx-policy strong{color:var(--cream);font-weight:600}
.rx-check{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:14px;line-height:1.45;color:var(--cream);cursor:pointer}
.rx-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--peach);cursor:pointer}

.rx-actions{display:grid;gap:10px;margin-top:24px}
.rx-links{display:grid;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);font-size:14px;color:var(--ink-2)}
.rx-links a{color:var(--cream);font-weight:600;text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.rx-links a:hover{color:var(--peach);text-decoration-color:var(--peach)}

.rx-lock{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:18px;border-radius:50%;border:1px solid rgba(243,210,178,.45);color:var(--peach)}
.rx-lock svg{width:22px;height:22px}

/* Botones (mismo sistema que /checkout y /landing_claude_mcp) */
.fbtn{
  --fb-ease:cubic-bezier(.23,1,.32,1);--fb-spring:cubic-bezier(.34,1.56,.64,1);--fb-orb:cubic-bezier(.19,1,.22,1);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  min-height:3.1rem;padding:.8rem 2rem;border-radius:100px;border:1.5px solid rgba(244,241,236,.4);
  background:transparent;color:var(--cream);-webkit-appearance:none;appearance:none;margin:0;
  font-family:var(--f-sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:border-color .6s var(--fb-ease),border-radius .6s var(--fb-ease),color .6s var(--fb-ease),transform .2s var(--fb-ease);
}
.fbtn--block{display:flex;width:100%}
.fbtn:hover,.fbtn:focus-visible{border-color:transparent;border-radius:12px}
.fbtn:active{transform:scale(.97)}
.fbtn__label{position:relative;z-index:1;transform:translateX(-.75rem);transition:transform .8s ease-out;text-align:center}
.fbtn:hover .fbtn__label,.fbtn:focus-visible .fbtn__label{transform:translateX(.75rem)}
.fbtn svg{position:absolute;z-index:9;width:1rem;height:1rem;pointer-events:none;transition:left .8s var(--fb-spring),right .8s var(--fb-spring)}
.fbtn .fbtn__in{left:-25%}
.fbtn:hover .fbtn__in,.fbtn:focus-visible .fbtn__in{left:1.25rem}
.fbtn .fbtn__out{right:1.25rem}
.fbtn:hover .fbtn__out,.fbtn:focus-visible .fbtn__out{right:-25%}
.fbtn__orb{position:absolute;z-index:0;top:50%;left:50%;width:1rem;height:1rem;border-radius:50%;background:var(--cream);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:width .8s var(--fb-orb),height .8s var(--fb-orb),opacity .8s var(--fb-orb)}
.fbtn:hover .fbtn__orb,.fbtn:focus-visible .fbtn__orb{width:40rem;height:40rem;opacity:1}
.fbtn--primary{border-color:rgba(243,210,178,.6);color:var(--peach)}
.fbtn--primary .fbtn__orb{background:var(--peach)}
.fbtn--primary:hover,.fbtn--primary:focus-visible{color:var(--peach-ink)}
.fbtn--ghost:hover,.fbtn--ghost:focus-visible{color:var(--navy)}

.rx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:26px 0 40px;border-top:1px solid var(--hair);color:var(--ink-3);font-size:14px}
.rx-foot em{font-style:normal;color:var(--ink-2)}
.rx-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.rx-foot a{color:var(--ink-2);text-underline-offset:4px;text-decoration-color:var(--hair-2)}
.rx-foot a:hover{color:var(--cream);text-decoration-color:var(--peach)}

.rx-rise{animation:rx-rise .8s var(--ease-out) both}
.rx-rise.d2{animation-delay:.12s}
@keyframes rx-rise{from{opacity:0;transform:translateY(14px)}}
/* 403/404: astronauta pequeño que navega por toda la pantalla, detrás del texto.
   Horizontal y vertical van en capas distintas con periodos que no coinciden: el recorrido
   cubre toda la página sin repetirse pronto. */
.rx-page{position:relative}
.rx-stage,.rx-top,.rx-foot{position:relative;z-index:1}
.rx-astro{
  --astro-w:clamp(78px,7.5vw,124px);
  position:fixed;z-index:0;top:0;left:0;width:var(--astro-w);pointer-events:none;
  animation:rx-astro-x 47s ease-in-out -19s infinite alternate;
}
.rx-astro__y{display:block;animation:rx-astro-y 29s ease-in-out -7s infinite alternate}
.rx-astro img{display:block;width:100%;height:auto;opacity:.92;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));animation:rx-astro-tumble 34s linear infinite}
@keyframes rx-astro-x{from{transform:translate3d(2vw,0,0)}to{transform:translate3d(calc(98vw - var(--astro-w)),0,0)}}
@keyframes rx-astro-y{from{transform:translate3d(0,9vh,0)}to{transform:translate3d(0,calc(97vh - var(--astro-w) * 1.3),0)}}
/* giro completo y lento, como sin gravedad; el pequeño vaivén de escala da la sensación de profundidad */
@keyframes rx-astro-tumble{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(90deg) scale(.94)}
  50%{transform:rotate(180deg) scale(1.04)}
  75%{transform:rotate(270deg) scale(.96)}
  100%{transform:rotate(360deg) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .rx-rise,.rx-astro,.rx-astro__y,.rx-astro img{animation:none}
  .rx-astro{left:auto;right:6vw;top:28vh}
  .fbtn,.fbtn *{transition:none!important}
}

/* RÜM en puntos (rum_auth_ed_dots): ocupa el hueco "points" bajo el titular */
.rx-dots{grid-area:points;position:relative;min-width:0;height:clamp(200px,34vh,340px);margin-top:clamp(20px,4vh,44px)}
/* el lienzo es más grande que la caja (--pad) y sus bordes se desvanecen: nunca se ve un corte recto */
.rx-dots canvas{
  --pad:44px;position:absolute;inset:calc(-1 * var(--pad));width:calc(100% + var(--pad) * 2);height:calc(100% + var(--pad) * 2);display:block;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent),linear-gradient(to bottom,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent),linear-gradient(to bottom,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);
  mask-composite:intersect;
}

@media (max-width:900px){
  .rx-stage.rx-stage--dots{grid-template-areas:"points" "intro" "panel"}
  .rx-dots{height:clamp(120px,30vw,200px);margin:0 0 -8px}
  .rx-dots canvas{--pad:22px;inset:calc(-1 * var(--pad)) 0;width:100%}
  .rx-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "panel" "points";row-gap:clamp(28px,6vw,44px);padding-top:clamp(32px,8vw,56px)}
  .rx-points{margin-top:0}
  .rx-sub{margin-top:16px}
  .rx-astro{--astro-w:clamp(56px,15vw,84px)}
}
@media (max-width:480px){
  .rx-title{font-size:clamp(30px,10.5cqi,44px)}
  .rx-card{padding:20px 18px;border-radius:16px}
  .fbtn{padding:.8rem 1.4rem}
}

/* Detalles del registro */
.rx-card form .rx-links{margin-top:14px;padding-top:0;border-top:0}
.rx-notice h3{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--cream);margin-bottom:6px}
.rx-notice p{margin:0}