@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  --green: #13a45b;
  --green-deep: #087a43;
  --red: #e33a36;
  --gold: #f6d58b;
  --ink: #102236;
  --muted: #718092;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; overflow-x: hidden; color: white;
  font-family: 'DM Sans', sans-serif; background: #071a2d;
  display: flex; flex-direction: column; position: relative;
}
.background {
  position: fixed; inset: 0; z-index: -5;
  background: url("/images/fondo-navidad-satux.jpg") center center / cover no-repeat;
  transform: scale(1.025); animation: backgroundDrift 28s ease-in-out infinite alternate;
}
.background-shade {
  position: fixed; inset: 0; z-index: -4;
  background: linear-gradient(90deg, rgba(4,16,28,.64) 0%, rgba(5,20,35,.35) 43%, rgba(4,15,27,.53) 100%),
              linear-gradient(0deg, rgba(3,13,24,.58), transparent 38%, rgba(3,13,24,.12));
}
#snow { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.ambient-glow { position: fixed; width: 300px; height: 300px; border-radius: 50%; filter: blur(100px); opacity: .15; pointer-events: none; z-index: -2; }
.glow-one { background: #14b86b; left: -140px; bottom: 5%; }
.glow-two { background: #e33131; right: -130px; top: 8%; }
.topbar { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 27px 0; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:5; }
.brand { color:white; text-decoration:none; display:flex; flex-direction:column; gap:0; filter:drop-shadow(0 3px 12px #0008); }
.brand-mark { font-size:31px; line-height:1; letter-spacing:-2px; font-weight:800; font-style:italic; color:#13b56a; }
.brand-x { color:#f0443d; }
.brand-swoosh { color:#f0443d; font-size:17px; margin-right:4px; vertical-align:top; }
.brand-caption { font-size:8px; letter-spacing:2.2px; font-weight:700; margin:5px 0 0 2px; color:#fff; opacity:.82; }
.season-tag { display:flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid #ffffff45; border-radius:30px; background:#061a2c70; backdrop-filter:blur(12px); font-size:11px; letter-spacing:.6px; color:#fff; box-shadow:0 5px 22px #0002; }
.season-dot { width:7px; height:7px; border-radius:50%; background:#f6d58b; box-shadow:0 0 10px #f6d58b; animation: pulse 1.8s infinite; }
.tiny-snow { color:#f6d58b; font-size:15px; }
.page { width:min(1320px, calc(100% - 64px)); margin:auto; flex:1; display:grid; grid-template-columns:minmax(0, 1fr) 440px; align-items:center; gap:70px; padding:24px 0 55px; position:relative; z-index:2; }
.welcome { max-width:600px; padding:0 0 20px 3%; animation: riseIn .9s both; }
.eyebrow { display:flex; align-items:center; gap:12px; font-size:10px; font-weight:700; letter-spacing:2.4px; color:#f8dfae; margin-bottom:22px; }
.eyebrow-line { display:block; width:34px; height:1px; background:#f8dfae; box-shadow:0 0 8px #f8dfae; }
.welcome h1 { font-family:'Playfair Display',serif; font-size:clamp(52px, 6vw, 83px); line-height:1.04; letter-spacing:-2.5px; margin:0; text-shadow:0 4px 25px #00101e88; }
.welcome h1 span { color:#f7d58e; font-style:italic; }
.welcome p { color:#f1f5f9; max-width:440px; font-size:15px; line-height:1.8; margin:24px 0 0; text-shadow:0 2px 12px #0008; }
.welcome-decoration { margin-top:48px; display:flex; align-items:center; gap:14px; color:#f5d797; }
.star { text-shadow:0 0 13px #ffe4a3; animation: twinkle 2.5s ease-in-out infinite; }
.star-a { font-size:28px; }
.star-b { font-size:15px; animation-delay:.8s; }
.welcome-rule { width:52px; height:1px; background:linear-gradient(90deg,#f5d797,transparent); }
.welcome-note { font-size:11px; line-height:1.7; letter-spacing:.3px; color:#fff; opacity:.88; }
.login-card {
  width:100%; max-width:440px; justify-self:end; position:relative; overflow:hidden;
  padding:37px 38px 24px; color:var(--ink); border-radius:23px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,247,.96));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 25px 80px rgba(0,10,20,.45), 0 0 0 5px rgba(255,255,255,.09), inset 0 0 35px #e8f4eb;
  animation: cardEnter 1s cubic-bezier(.2,.8,.2,1) both;
}
.login-card:before { content:""; position:absolute; inset:7px; border:1px solid #d9e9dc; border-radius:17px; pointer-events:none; }
.card-garland { position:absolute; top:0; left:0; right:0; height:18px; display:flex; justify-content:space-around; align-items:flex-start; color:#d5a64e; font-size:14px; z-index:2; }
.card-garland i { display:block; width:5px; height:8px; background:#e23d38; border-radius:0 0 5px 5px; box-shadow:0 0 9px #e23d38; animation: lightBlink 1.7s infinite alternate; }
.card-garland i:nth-of-type(2n) { background:#16a05a; box-shadow:0 0 9px #16a05a; animation-delay:.7s; }
.card-top { display:flex; align-items:center; gap:12px; margin-bottom:23px; }
.mini-emblem { width:42px; height:42px; display:grid; place-items:center; color:#fff; font-size:23px; border-radius:14px; background:linear-gradient(145deg,#159b58,#08733e); box-shadow:0 5px 13px #087a433d; }
.card-kicker { font-size:8px; letter-spacing:2.3px; color:#82908d; font-weight:700; }
.card-brand { font-size:22px; font-weight:800; letter-spacing:-1.5px; color:#129a55; font-style:italic; line-height:1.2; }
.card-brand span { color:#e43b37; }
.login-card h2 { font-size:27px; letter-spacing:-.8px; margin:0 0 5px; color:#12283a; }
.card-subtitle { color:#788796; font-size:12px; margin:0 0 22px; }
.access-switch { display:grid; grid-template-columns:1fr 1fr; position:relative; background:#edf3ef; padding:4px; border-radius:12px; margin-bottom:12px; }
.access-tab { position:relative; z-index:1; border:0; background:transparent; color:#75847e; font:600 12px 'DM Sans',sans-serif; padding:12px 8px; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; border-radius:9px; transition:color .25s, transform .25s; }
.access-tab:hover { transform:translateY(-1px); }
.access-tab.active { color:white; }
.tab-icon { font-size:16px; }
.switch-indicator { position:absolute; z-index:0; left:4px; top:4px; width:calc(50% - 4px); height:calc(100% - 8px); border-radius:9px; background:linear-gradient(110deg,#0d8e4e,#1caf68); box-shadow:0 4px 12px #0b874b40; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s; }
.access-switch.business .switch-indicator { transform:translateX(100%); background:linear-gradient(110deg,#b72f30,#ed5143); box-shadow:0 4px 12px #b72f3035; }
.mode-description { min-height:17px; font-size:10px; color:#89958f; margin:0 0 17px; }
form label { display:block; font-size:10px; font-weight:700; color:#435568; margin-bottom:8px; }
.input-wrap { display:flex; align-items:center; gap:10px; height:48px; border:1px solid #dce5e0; background:#fff; border-radius:10px; padding:0 13px; transition:border .25s,box-shadow .25s,transform .25s; margin-bottom:17px; }
.input-wrap:focus-within { border-color:#1ba361; box-shadow:0 0 0 3px #19a15b19; transform:translateY(-1px); }
.field-icon { color:#159858; font-size:17px; }
.input-wrap input { flex:1; width:0; border:0; outline:0; color:#183047; background:transparent; font:500 12px 'DM Sans',sans-serif; }
.input-wrap input::placeholder { color:#aab5b0; }
.input-sparkle { color:#d5b36c; font-size:17px; }
.password-heading { display:flex; justify-content:space-between; align-items:center; }
.password-heading a { color:#148c50; text-decoration:none; font-size:9px; font-weight:700; margin-bottom:8px; }
.password-heading a:hover { text-decoration:underline; }
.show-password { border:0; background:transparent; color:#7e9088; cursor:pointer; font-size:16px; padding:5px; }
.form-options { display:flex; justify-content:space-between; align-items:center; margin:0 0 20px; }
.remember { display:flex; align-items:center; gap:8px; color:#64766f; font-size:10px; cursor:pointer; margin:0; }
.remember input { position:absolute; opacity:0; }
.custom-check { width:15px; height:15px; border:1px solid #cbd8d0; border-radius:4px; background:white; position:relative; }
.remember input:checked + .custom-check { background:#139957; border-color:#139957; }
.remember input:checked + .custom-check:after { content:"✓"; position:absolute; color:white; font-size:11px; left:2px; top:-1px; }
.secure { font-size:9px; color:#89968f; }
.secure span { color:#169b59; margin-right:4px; }
.submit-btn { width:100%; height:49px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:10px; color:white; cursor:pointer; font:700 12px 'DM Sans',sans-serif; letter-spacing:.2px; background:linear-gradient(100deg,#087b43,#19a961 55%,#087b43); background-size:200% 100%; box-shadow:0 8px 18px #0c8c4d35; transition:transform .25s,box-shadow .25s,background-position .5s; }
.submit-btn:hover { transform:translateY(-3px); box-shadow:0 12px 23px #0c8c4d50; background-position:100% 0; }
.submit-btn:active { transform:translateY(0) scale(.99); }
.business-mode .submit-btn { background-image:linear-gradient(100deg,#ad292e,#e44b42 55%,#ad292e); }
.btn-shimmer { position:absolute; top:-30%; left:-45%; height:160%; width:25%; transform:rotate(20deg); background:#ffffff40; filter:blur(5px); animation: shimmer 4s infinite; }
.btn-arrow { font-size:18px; transition:transform .25s; }
.submit-btn:hover .btn-arrow { transform:translateX(4px); }
.form-message { min-height:15px; font-size:10px; text-align:center; color:#b33b36; margin-top:9px; }
.card-footer { display:flex; align-items:center; justify-content:center; gap:11px; color:#8c9b93; font-size:9px; margin-top:13px; }
.footer-snow { color:#d0ad63; font-size:12px; }
.ornament { position:absolute; bottom:-17px; width:33px; height:33px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff5d4,#d9a843 45%,#8f5d17); border:2px solid #f5dfab; box-shadow:0 3px 9px #0002; }
.ornament:before { content:""; position:absolute; width:9px; height:6px; border:1px solid #c79c4d; border-bottom:0; top:-7px; left:10px; border-radius:5px 5px 0 0; }
.ornament-left { left:22px; }
.ornament-right { right:22px; background:radial-gradient(circle at 35% 30%,#fff,#f07c72 40%,#b52d2c); border-color:#f4b4a9; }
.site-footer { width:min(1320px,calc(100% - 64px)); margin:0 auto; padding:15px 0 21px; display:flex; align-items:center; justify-content:center; gap:13px; position:relative; z-index:5; color:#ffffffb8; font-size:9px; letter-spacing:.4px; text-shadow:0 2px 8px #000; }
.footer-separator { color:#f5d797; }
.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); padding:12px 18px; background:#102b3d; color:white; border:1px solid #ffffff35; border-radius:12px; box-shadow:0 12px 30px #0005; font-size:12px; opacity:0; pointer-events:none; transition:.3s; z-index:10; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes riseIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes cardEnter { from { opacity:0; transform:translateY(25px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes pulse { 50% { opacity:.45; box-shadow:0 0 2px #f6d58b; } }
@keyframes twinkle { 50% { opacity:.45; transform:scale(.8) rotate(20deg); } }
@keyframes lightBlink { to { opacity:.35; filter:brightness(1.7); } }
@keyframes shimmer { 0%,65% { left:-45%; } 100% { left:130%; } }
@keyframes backgroundDrift { from { transform:scale(1.025) translateX(0); } to { transform:scale(1.08) translateX(-.6%); } }
@media (max-width: 950px) {
  .page { grid-template-columns:1fr 400px; gap:25px; }
  .welcome h1 { font-size:58px; }
  .login-card { padding:34px 29px 22px; }
}
@media (max-width: 720px) {
  .topbar,.page,.site-footer { width:calc(100% - 34px); }
  .topbar { padding:18px 0; }
  .season-tag { font-size:9px; padding:8px 10px; }
  .page { display:flex; flex-direction:column; justify-content:center; gap:26px; padding:25px 0 35px; }
  .welcome { text-align:center; padding:0; }
  .eyebrow { justify-content:center; font-size:8px; margin-bottom:12px; }
  .welcome h1 { font-size:43px; letter-spacing:-1px; }
  .welcome p { font-size:12px; margin:12px auto 0; max-width:360px; }
  .welcome-decoration { display:none; }
  .login-card { justify-self:auto; max-width:440px; padding:31px 27px 22px; }
  .site-footer { flex-wrap:wrap; text-align:center; font-size:8px; gap:8px; padding-bottom:14px; }
}
@media (max-width: 390px) {
  .brand-mark { font-size:26px; }
  .brand-caption { font-size:6px; }
  .season-tag { gap:5px; font-size:8px; }
  .welcome h1 { font-size:37px; }
  .login-card { padding-left:21px; padding-right:21px; }
  .password-heading a { font-size:8px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Integración con el acceso real de SATUX y centrado en pantallas pequeñas. */
body{min-height:100svh;overflow-y:auto}
.page{align-items:center;padding-top:14px;padding-bottom:14px}
.login-card{padding:30px 34px 18px}
.access-switch.partner .switch-indicator{transform:translateX(100%);background:linear-gradient(110deg,#b72f30,#ed5143);box-shadow:0 4px 12px #b72f3035}
.submit-btn.submit{display:flex}
.login-register{position:relative;z-index:1;text-align:center;margin:10px 0 0;color:#718092;font-size:10px;line-height:1.5}
.login-register a{color:#087a43;font-weight:800;text-decoration:none}
.login-register a:hover{text-decoration:underline}
.music-panel{width:min(1320px,calc(100% - 34px));margin:0 auto 12px;position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;color:#fff;text-align:center;text-shadow:0 2px 9px #00101e}
.music-panel button{border:1px solid #ffffff6b;border-radius:999px;padding:8px 13px;background:#062718b8;color:white;font:700 10px 'DM Sans',sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.music-panel button:hover{background:#0b804c}
.music-panel small{font-size:9px;opacity:.92}
@media(max-width:720px){.page{gap:14px;padding:8px 0 13px}.welcome{display:none}.login-card{padding:25px 24px 16px}.topbar{padding:13px 0}.login-card .card-top{margin-bottom:13px}.card-subtitle{margin-bottom:14px}.mode-description{margin-bottom:12px}.input-wrap{margin-bottom:12px}.form-options{margin-bottom:13px}.site-footer{padding-bottom:6px}.music-panel{margin-bottom:8px}}
@media(max-height:740px) and (min-width:721px){.topbar{padding:12px 0}.page{padding:8px 0}.welcome-decoration{margin-top:22px}.login-card{padding-top:25px;padding-bottom:15px}.card-top{margin-bottom:14px}.card-subtitle{margin-bottom:12px}.music-panel{margin-bottom:5px}}
@media(max-width:390px){.login-card{padding:22px 19px 14px}.access-tab{padding:10px 5px;font-size:11px}.music-panel small{font-size:8px}}