/* Componentes de experiencia de la Academia: validación de campos, modales, pantalla "Ingresando", recorrido guiado. Prefijo ax-. */
:root{--ax-blue:#0E27FF;--ax-navy:#0B053D;--ax-line:#E1E6F5;--ax-muted:#6B7196;--ax-red:#D33F3F;--ax-green:#12B76A;}

/* ---------- Campos incompletos ---------- */
.field.ax-invalid input,.field.ax-invalid select,.field.ax-invalid textarea,input.ax-invalid{border-color:var(--ax-red)!important;background:#FFF6F6!important;box-shadow:0 0 0 3px rgba(211,63,63,.12)!important;}
.field.ax-invalid label{color:var(--ax-red);}
.ax-msg{display:flex;align-items:center;gap:6px;color:var(--ax-red);font-size:12.5px;font-weight:600;margin-top:6px;line-height:1.35;animation:ax-msg-in .25s ease;}
.ax-msg:before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:var(--ax-red);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
@keyframes ax-msg-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.ax-shake{animation:ax-shake .4s ease;}
@keyframes ax-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.ax-req{color:var(--ax-red);font-weight:800;margin-left:2px;}
.ax-hint{font-size:12px;color:var(--ax-muted);margin-top:5px;line-height:1.4;}
.ax-locked{background:#F3F5FC!important;color:#4B5178!important;cursor:not-allowed;}
.ax-lockrow{display:flex;align-items:center;gap:8px;}
.ax-lockrow input{flex:1;}
.ax-lockico{flex:none;width:34px;height:34px;border-radius:10px;background:#EEF1FF;display:inline-flex;align-items:center;justify-content:center;color:var(--ax-blue);}
.ax-lockico svg{width:16px;height:16px;}

/* ---------- Modal base ---------- */
.ax-ovl{position:fixed;inset:0;z-index:1000;background:rgba(11,5,61,.62);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .25s;overflow:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.ax-ovl.show{opacity:1;}
.ax-modal{width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(11,5,61,.4);padding:28px 26px 24px;transform:translateY(16px) scale(.96);transition:transform .35s cubic-bezier(.34,1.56,.64,1);font-family:Inter,system-ui,sans-serif;color:var(--ax-navy);max-height:calc(100vh - 36px);overflow:auto;}
.ax-ovl.show .ax-modal{transform:none;}
.ax-modal .ax-mi{width:56px;height:56px;border-radius:18px;background:#EEF1FF;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;}
.ax-modal h2{margin:0 0 6px;font-size:21px;text-align:center;letter-spacing:-.01em;}
.ax-modal p.ax-sub{margin:0 0 18px;text-align:center;color:var(--ax-muted);font-size:14.5px;line-height:1.55;}
.ax-modal .field{margin-bottom:14px;text-align:left;}
.ax-modal .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ax-navy);}
.ax-modal .field input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--ax-line);border-radius:12px;outline:none;color:var(--ax-navy);background:#fff;transition:border-color .2s,box-shadow .2s;}
.ax-modal .field input:focus{border-color:var(--ax-blue);box-shadow:0 0 0 3px rgba(14,39,255,.12);}
.ax-note{background:#FFF6E5;border:1px solid #F5D48A;color:#5A4200;border-radius:14px;padding:11px 14px;font-size:13px;line-height:1.5;margin:2px 0 16px;text-align:left;}
.ax-btn{display:block;width:100%;font:inherit;font-weight:800;font-size:15px;border:0;border-radius:14px;padding:14px 18px;cursor:pointer;background:var(--ax-blue);color:#fff;text-align:center;text-decoration:none;box-sizing:border-box;transition:transform .15s,box-shadow .2s,opacity .2s;}
.ax-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,39,255,.3);}
.ax-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}
.ax-btn.ghost{background:#fff;color:var(--ax-navy);border:1.5px solid var(--ax-line);}
.ax-btn.ghost:hover{box-shadow:none;border-color:var(--ax-blue);color:var(--ax-blue);}
.ax-btn+.ax-btn{margin-top:10px;}
.ax-link{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--ax-muted);}
.ax-link a{color:var(--ax-blue);font-weight:700;text-decoration:none;}
.ax-err-top{background:#FEF3F2;border:1px solid #FECDCA;color:#B42318;border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:12px;text-align:left;display:none;}

/* ---------- Pago en espera ---------- */
.ax-pay-anim{width:64px;height:64px;border-radius:50%;background:#FFF4D6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;}
.ax-pay-anim:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(240,170,0,.35);animation:ax-pulse 1.8s ease-out infinite;}
@keyframes ax-pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.ax-pay-anim.ok{background:#E8F8EF;}.ax-pay-anim.ok:after{border-color:rgba(18,183,106,.4);animation:none;}
.ax-pay-info{background:#F6F8FF;border:1px solid var(--ax-line);border-radius:16px;padding:6px 16px;margin:0 0 16px;}
.ax-pay-info div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ax-line);font-size:14px;}
.ax-pay-info div:last-child{border-bottom:0;}.ax-pay-info span{color:var(--ax-muted);}.ax-pay-info b{text-align:right;}
.ax-pay-steps{margin:0 0 16px;padding:0;list-style:none;counter-reset:s;text-align:left;}
.ax-pay-steps li{counter-increment:s;position:relative;padding:6px 0 6px 34px;font-size:14px;line-height:1.45;color:#2A2F55;}
.ax-pay-steps li:before{content:counter(s);position:absolute;left:0;top:5px;width:24px;height:24px;border-radius:50%;background:var(--ax-blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.ax-live{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--ax-muted);margin:2px 0 14px;}
.ax-live i{width:8px;height:8px;border-radius:50%;background:#F0AA00;animation:ax-blink 1.4s infinite;}
@keyframes ax-blink{50%{opacity:.25}}
.ax-banner{display:flex;gap:12px;align-items:center;background:#FFF6E5;border:1px solid #F5D48A;color:#5A4200;border-radius:14px;padding:12px 16px;margin:0 0 18px;font-size:13.5px;line-height:1.5;}
.ax-banner b{color:#3D2C00;}.ax-banner button{margin-left:auto;flex:none;font:inherit;font-weight:800;font-size:13px;border:0;border-radius:10px;padding:8px 14px;background:var(--ax-blue);color:#fff;cursor:pointer;}

/* ---------- Pantalla "Ingresando a la Academia" ---------- */
.ax-loader{position:fixed;inset:0;z-index:2000;background:radial-gradient(700px 420px at 100% 0,rgba(63,99,255,.16),transparent 60%),radial-gradient(500px 320px at 0 100%,rgba(61,220,255,.14),transparent 60%),#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;transition:opacity .3s;font-family:Inter,system-ui,sans-serif;}
.ax-loader.show{opacity:1;}
.ax-loader img{height:44px;width:auto;animation:ax-float 2.4s ease-in-out infinite;}
.ax-loader .ax-lt{font-size:19px;font-weight:800;color:var(--ax-navy);letter-spacing:-.01em;}
.ax-loader .ax-ls{font-size:13.5px;color:var(--ax-muted);margin-top:-8px;}
.ax-loader .ax-bar{width:180px;height:5px;border-radius:5px;background:#E6EBFF;overflow:hidden;}
.ax-loader .ax-bar i{display:block;height:100%;width:40%;border-radius:5px;background:linear-gradient(90deg,#3F63FF,#5B3DF5);animation:ax-slide 1.2s ease-in-out infinite;}
@keyframes ax-slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
@keyframes ax-float{50%{transform:translateY(-6px)}}

/* ---------- Recorrido guiado ---------- */
.ax-tour{position:fixed;inset:0;z-index:1500;}
.ax-tour .ax-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(11,5,61,.66);transition:top .35s ease,left .35s ease,width .35s ease,height .35s ease;pointer-events:none;outline:3px solid rgba(255,255,255,.9);outline-offset:2px;}
.ax-tour .ax-spot.none{box-shadow:0 0 0 9999px rgba(11,5,61,.66);outline:none;width:0!important;height:0!important;}
.ax-tip{position:fixed;width:min(340px,calc(100vw - 28px));background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(11,5,61,.4);padding:20px 20px 16px;font-family:Inter,system-ui,sans-serif;color:var(--ax-navy);transition:top .35s ease,left .35s ease,opacity .25s;}
.ax-tip .ax-tn{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ax-blue);margin-bottom:6px;}
.ax-tip h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em;}
.ax-tip p{margin:0 0 14px;font-size:14px;line-height:1.55;color:#3A3F66;}
.ax-tip .ax-tb{display:flex;align-items:center;gap:8px;}
.ax-tip .ax-tb button{font:inherit;font-weight:800;font-size:13.5px;border:0;border-radius:11px;padding:10px 16px;cursor:pointer;}
.ax-tip .ax-tnext{background:var(--ax-blue);color:#fff;margin-left:auto;}
.ax-tip .ax-tprev{background:#EEF1FF;color:var(--ax-blue);}
.ax-tip .ax-tskip{background:none;color:var(--ax-muted);padding:10px 4px!important;font-weight:600!important;}
.ax-tip .ax-tdots{display:flex;gap:5px;margin-top:12px;}
.ax-tip .ax-tdots i{width:7px;height:7px;border-radius:50%;background:#D5DBF3;transition:background .2s,transform .2s;}
.ax-tip .ax-tdots i.on{background:var(--ax-blue);transform:scale(1.3);}
.ax-tip.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 28px));text-align:center;}
.ax-tip.center .ax-tb{justify-content:center;flex-wrap:wrap;}.ax-tip.center .ax-tnext{margin-left:0;}
.ax-tip .ax-tem{font-size:34px;margin-bottom:6px;}
nav.main-nav a.ax-tour-btn{cursor:pointer;}
@media(prefers-reduced-motion:reduce){.ax-modal,.ax-ovl,.ax-spot,.ax-tip,.ax-loader img,.ax-loader .ax-bar i,.ax-pay-anim:after,.ax-live i{transition:none!important;animation:none!important;}}

.ax-tip .ax-tclose{position:absolute;top:10px;right:12px;width:30px;height:30px;padding:0;border:0;background:none;color:#8A90B4;font-size:17px;line-height:1;cursor:pointer;border-radius:50%;transition:color .2s,transform .25s;-webkit-tap-highlight-color:transparent;}
.ax-tip .ax-tclose:hover{color:var(--ax-navy);transform:rotate(90deg);}
.ax-tip .ax-tclose:focus{outline:none;}.ax-tip .ax-tclose:focus-visible{box-shadow:0 0 0 2px rgba(14,39,255,.35);}
.ax-tip .ax-tn,.ax-tip h3{padding-right:26px;}.ax-tip.center h3,.ax-tip.center .ax-tn{padding-right:0;}