/* ── Ingreso interactivo (logo 3D con three.js) ───────────────────── */
#cf-login3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
html.cf-en-login #cf-login3d { opacity: 1; }
html.cf-en-login, html.cf-en-login body {
  background: radial-gradient(1200px 700px at 15% -10%, rgba(244, 63, 94, .22), transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, rgba(168, 85, 247, .25), transparent 60%),
              linear-gradient(180deg, #0c0f1d, #0f1220 60%, #140f24) fixed;
  color-scheme: dark;
}
html.cf-en-login body { min-height: 100vh; min-height: 100dvh; background-attachment: scroll; }
html.cf-en-login { background-color: #0f1220; }
html.cf-en-login .cf-root { position: relative; z-index: 1; }
html.cf-3d #cf-login.cf-login { max-width: 480px; margin: 0 auto; padding: 0 0 32px; }
.cf-login-stage { height: clamp(170px, 25vh, 250px); position: relative; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cf-login-hint { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-size: 12px; color: rgba(226, 228, 245, .55); letter-spacing: .3px; pointer-events: none; transition: opacity .4s; }
.cf-login-card {
  position: relative; padding: 22px 20px 20px; border-radius: 26px;
  background: rgba(22, 25, 44, .62); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #eef0f7; animation: cf-card-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.cf-login-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(244, 63, 94, .55), rgba(168, 85, 247, .15) 40%, transparent 60%, rgba(168, 85, 247, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html.cf-3d .cf-login-card .cf-brand { display: flex; justify-content: center; align-items: baseline; gap: 6px; text-align: center; margin-bottom: 4px; }
html.cf-3d .cf-login-card .cf-brand .cf-pulso-ico { display: none; }
html.cf-3d .cf-login-card .cf-brand span:last-child { font-size: 26px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(90deg, #fb7185, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.cf-3d .cf-login-card .cf-brand small { -webkit-text-fill-color: rgba(226, 228, 245, .6); font-size: 14px; font-weight: 600; }
html.cf-3d .cf-login-card .cf-brand { display: none !important; }
.cf-login-marca { text-align: center; margin: 10px 0 18px; animation: cf-card-in .6s .1s both; }
.cf-login-nombre { font-size: clamp(38px, 9vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1;
  background: linear-gradient(90deg, #fb7185, #e879f9 50%, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(232, 121, 249, .35)); }
.cf-login-lema { margin-top: 8px; font-size: 14.5px; color: rgba(226, 228, 245, .7); }
.cf-login-lema b { color: #f5f3ff; font-weight: 700; }
.cf-login-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px auto 0; max-width: 440px; }
.cf-login-mods span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: rgba(238, 240, 247, .85); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); animation: cf-card-in .45s both; }
.cf-login-mods i { font-style: normal; font-size: 13px; }
.cf-login-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 0 6px;
  font-size: 12px; color: rgba(226, 228, 245, .45); }
.cf-login-flecha { margin-left: auto; font-size: 22px; line-height: 1; color: rgba(226, 228, 245, .35); transition: transform .2s ease, color .2s ease; }
html.cf-3d .cf-login-btn:hover .cf-login-flecha, html.cf-3d .cf-login-btn.cf-sel .cf-login-flecha { color: #f0abfc; transform: translateX(3px); }
html.cf-3d .cf-login-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.cf-3d .cf-login-card .cf-title { text-align: center; color: #fff; font-size: clamp(19px, 5vw, 23px); margin-top: 2px; }
html.cf-3d .cf-login-card .cf-sub { text-align: center; color: rgba(226, 228, 245, .65); }
html.cf-3d .cf-login-grid { gap: 10px; }
html.cf-3d .cf-login-btn {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; color: #eef0f7; font-weight: 700;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; animation: cf-card-in .5s both;
}
html.cf-3d .cf-login-btn:hover { border-color: rgba(192, 132, 252, .5); background: rgba(168, 85, 247, .08); transform: translateY(-2px); }
html.cf-3d .cf-login-btn:active { transform: scale(.97); }
html.cf-3d .cf-login-btn.cf-sel { border-color: transparent; background: linear-gradient(135deg, rgba(244, 63, 94, .28), rgba(168, 85, 247, .32));
  box-shadow: 0 0 0 1.5px rgba(232, 121, 249, .85), 0 12px 30px -12px rgba(168, 85, 247, .9); }
html.cf-3d .cf-login-btn .cf-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, #f43f5e, #a855f7); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
html.cf-3d .cf-login-btn:nth-child(2) { animation-delay: .04s; } html.cf-3d .cf-login-btn:nth-child(3) { animation-delay: .08s; }
html.cf-3d .cf-login-btn:nth-child(4) { animation-delay: .12s; } html.cf-3d .cf-login-btn:nth-child(5) { animation-delay: .16s; }
html.cf-3d .cf-login-btn:nth-child(n+6) { animation-delay: .2s; }
html.cf-3d .cf-login-pin { animation: cf-card-in .35s both; }
html.cf-3d .cf-login-pin .cf-label { text-align: center; color: rgba(226, 228, 245, .75); }
html.cf-3d #cf-pin { text-align: center; font-size: 26px; letter-spacing: 10px; height: 58px; border-radius: 16px; color: #fff;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); }
html.cf-3d #cf-pin:focus { outline: none; border-color: rgba(232, 121, 249, .8); box-shadow: 0 0 0 4px rgba(168, 85, 247, .25); }
html.cf-3d #cf-btn-entrar { height: 52px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f43f5e, #a855f7); box-shadow: 0 14px 30px -12px rgba(168, 85, 247, .9); }
html.cf-3d .cf-login-card.cf-sacude { animation: cf-sacude .45s; }
@keyframes cf-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cf-sacude { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@media (max-width: 420px) { .cf-login-mods span { font-size: 11px; padding: 4px 8px; } .cf-login-card { padding: 18px 14px 16px; border-radius: 22px; } html.cf-3d .cf-login-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .cf-login-card, html.cf-3d .cf-login-btn, html.cf-3d .cf-login-pin { animation: none; } }