/* turismogonsan.mx · acceso "futurista": tarjeta de cristal con borde animado, fondo de partículas, etiquetas flotantes */
.gz-auth { position: relative; margin-bottom: 18px; }
.gz-auth__card { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; color: #e8eefc; background: linear-gradient(160deg, #0b1a36 0%, #0b2a5b 55%, #10306a 100%); isolation: isolate; box-shadow: 0 30px 60px rgba(6, 26, 51, .35); }
.gz-auth__card::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: 22px; background: conic-gradient(from var(--gz-angle, 0deg), #d7212b, #4c7bd1, #ffd166, #d7212b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gz-spin 6s linear infinite; z-index: 1; pointer-events: none; opacity: .9; }
@property --gz-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes gz-spin { to { --gz-angle: 360deg; } }
.gz-auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.gz-auth__glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(215, 33, 43, .45), transparent 65%); top: -120px; right: -100px; filter: blur(10px); z-index: 0; animation: gz-float 9s ease-in-out infinite alternate; }
@keyframes gz-float { to { transform: translate(-40px, 40px) scale(1.15); } }
.gz-auth__head, .gz-auth__tabs, .gz-auth__form { position: relative; z-index: 2; }
.gz-auth__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gz-auth__head img { width: 44px; height: 44px; background: rgba(255, 255, 255, .95); border-radius: 12px; padding: 4px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.gz-auth__head b { display: block; font-size: 17px; color: #fff; }
.gz-auth__head small { color: #9fb6e6; font-size: 12px; }
.gz-auth__tabs { position: relative; display: flex; gap: 4px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 4px; margin-bottom: 18px; backdrop-filter: blur(6px); }
.gz-auth__tabs button { flex: 1; position: relative; z-index: 1; background: transparent; border: 0; color: #c6d4f2; font: 700 13px/1 var(--font); padding: 11px 8px; border-radius: 11px; cursor: pointer; transition: color .2s; }
.gz-auth__tabs button.is-active { color: #0b2a5b; }
.gz-auth__glider { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 0; background: #fff; border-radius: 11px; transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.gz-auth__form { display: grid; gap: 14px; }
.gz-auth__hint { margin: 0; font-size: 13px; color: #c6d4f2; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .25); border-radius: 12px; padding: 10px 12px; }
.gz-fx { position: relative; display: block; }
.gz-fx input { width: 100%; padding: 20px 48px 8px 46px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; color: #fff; font: 500 15px var(--font); outline: 0; transition: border-color .2s, background .2s, box-shadow .2s; }
.gz-fx input:focus { border-color: #ffd166; background: rgba(255, 255, 255, .11); box-shadow: 0 0 0 4px rgba(255, 209, 102, .18); }
.gz-fx__label { position: absolute; left: 46px; top: 50%; transform: translateY(-50%); color: #9fb6e6; font-size: 14px; pointer-events: none; transition: all .18s; }
.gz-fx input:focus + .gz-fx__label, .gz-fx input:not(:placeholder-shown) + .gz-fx__label { top: 9px; transform: none; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #ffd166; }
.gz-fx__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: #9fb6e6; }
.gz-fx__icon svg { width: 22px; height: 22px; }
.gz-fx__eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: #9fb6e6; cursor: pointer; border-radius: 8px; }
.gz-fx__eye svg { width: 20px; height: 20px; }
.gz-fx__eye.is-on { color: #ffd166; }
.gz-fx__line { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: linear-gradient(90deg, #d7212b, #ffd166); transform: scaleX(0); transition: transform .25s; border-radius: 2px; }
.gz-fx input:focus ~ .gz-fx__line { transform: scaleX(1); }
.gz-fx__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -6px; }
.gz-fx__meter i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); transition: background .2s; }
.gz-fx__meter i.is-1 { background: #ff6b72; } .gz-fx__meter i.is-2 { background: #ffb86b; } .gz-fx__meter i.is-3 { background: #ffd166; } .gz-fx__meter i.is-4 { background: #5fd39a; }
.gz-auth__go { position: relative; overflow: hidden; justify-content: center; }
.gz-auth__go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.gz-auth__go:hover::after { transform: translateX(120%); }
.gz-auth__go.is-loading span { opacity: .5; }
.gz-auth .gz-form__msg { background: rgba(255, 255, 255, .1); color: #fff; }
.gz-auth .gz-form__msg.is-err { background: rgba(215, 33, 43, .35); color: #ffd7da; }
.gz-auth.is-shake .gz-auth__card { animation: gz-shake .45s; }
.gz-auth.is-success .gz-auth__card { box-shadow: 0 0 0 6px rgba(95, 211, 154, .35), 0 30px 60px rgba(6, 26, 51, .35); }
.gz-auth__in { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; background: linear-gradient(120deg, #0b2a5b, #123c7d); color: #fff; border-radius: 18px; padding: 14px 16px; }
.gz-auth__avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px; background: linear-gradient(135deg, #d7212b, #ff8a90); box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.gz-auth__in small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffd166; }
.gz-auth__in b { display: block; font-size: 16px; }
.gz-auth__in span { font-size: 12px; color: #c6d4f2; }
.gz-auth__in .gz-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.gz-auth--compact .gz-auth__card { padding: 18px; }
.gz-auth--hero .gz-auth__card { padding: 30px; }
@media (max-width: 640px) { .gz-auth__card { padding: 18px; } .gz-auth__form .gz-grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gz-auth__card::before, .gz-auth__glow { animation: none; } }

/* variante clara (compra): misma caja, sin fondo animado */
.gz-auth--light { margin-bottom: 0; }
.gz-auth--light .gz-auth__card { background: #fff; color: var(--ink); box-shadow: var(--shadow); border: 1.5px solid var(--line); padding: 14px; border-radius: 16px; }
.gz-auth--light .gz-auth__card::before, .gz-auth--light .gz-auth__bg, .gz-auth--light .gz-auth__glow { display: none; }
.gz-auth--light .gz-auth__form { gap: 10px; }
.gz-auth--light .gz-fx input { background: #fbfcff; border-color: var(--line); color: var(--ink); }
.gz-auth--light .gz-fx input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 79, 163, .12); background: #fff; }
.gz-auth--light .gz-fx__label { color: #8a97ad; }
.gz-auth--light .gz-fx input:focus + .gz-fx__label, .gz-auth--light .gz-fx input:not(:placeholder-shown) + .gz-fx__label { color: var(--blue); }
.gz-auth--light .gz-fx__icon, .gz-auth--light .gz-fx__eye { color: var(--navy); }
.gz-auth--light .gz-fx__eye.is-on { color: var(--red); }
.gz-auth--light .gz-fx__line { background: linear-gradient(90deg, var(--red), var(--blue)); }
.gz-auth--light .gz-fx__meter i { background: var(--line); }
.gz-auth--light .gz-form__msg { background: var(--soft); color: var(--navy); }
.gz-auth--light .gz-form__msg.is-err { background: #fde8e9; color: var(--red); }
.gz-auth--light .gz-auth__in { background: var(--soft); color: var(--ink); }
.gz-auth--light .gz-auth__in b { color: var(--navy); }
.gz-auth--light .gz-auth__in span { color: var(--muted); }
.gz-auth--light .gz-auth__in small { color: var(--red); }
.gz-auth--light .gz-auth__in .gz-btn--ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.gz-auth--light .gz-auth__go { box-shadow: none; }