/* =========================================================
   STREAMSVIP - REGISTRO.CSS
   ESTILO REGISTRO NEÓN AZUL / MORADO
   Se carga DESPUÉS de style.css
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body.authBody{
  min-height:100vh;
  font-family:Arial, sans-serif;
  color:#fff;
  text-align:center;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(0,180,255,.24), transparent 28%),
    radial-gradient(circle at 100% 28%, rgba(146,70,255,.18), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(0,160,255,.12), transparent 28%),
    linear-gradient(180deg,#020611 0%, #030816 45%, #04040b 100%);
  position:relative;
}

body.authBody::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.22;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

body.authBody::after{
  content:"";
  position:fixed;
  left:-12%;
  right:-12%;
  bottom:-180px;
  height:420px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(128,70,255,.22), transparent 62%);
  filter:blur(22px);
  opacity:.9;
}

.authContainer{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px 16px;
}

.authCard{
  position:relative;
  width:100%;
  max-width:520px;
  border-radius:34px;
  padding:38px 32px 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,180,255,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(155,86,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,10,28,.96), rgba(3,7,20,.98));
  border:1px solid rgba(50,190,255,.85);
  box-shadow:
    0 0 0 1px rgba(149,77,255,.50) inset,
    0 0 32px rgba(0,170,255,.20),
    0 0 58px rgba(143,88,255,.18),
    0 26px 80px rgba(0,0,0,.70);
}

.authCardRegister{
  max-width:640px;
}

.authCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:34px;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 14%, transparent 30%),
    radial-gradient(circle at 50% 10%, rgba(0,190,255,.16), transparent 28%);
  opacity:.55;
}

.authCard::after{
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border-radius:33px;
  border:1px solid rgba(255,255,255,.05);
}

.registerLogoTop{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

.registerTopLogo{
  width:128px;
  height:128px;
  object-fit:cover;
  border-radius:50%;
  background:#050b18;
  border:2px solid rgba(0,195,255,.95);
  box-shadow:
    0 0 0 6px rgba(128,77,255,.12),
    0 0 30px rgba(0,190,255,.62),
    0 0 54px rgba(143,88,255,.44);
  animation:logoPulseRegistro 3.2s ease-in-out infinite;
}

@keyframes logoPulseRegistro{
  0%,100%{
    box-shadow:
      0 0 0 6px rgba(128,77,255,.12),
      0 0 30px rgba(0,190,255,.52),
      0 0 54px rgba(143,88,255,.34);
  }
  50%{
    box-shadow:
      0 0 0 7px rgba(128,77,255,.18),
      0 0 38px rgba(0,190,255,.78),
      0 0 68px rgba(143,88,255,.50);
  }
}

.registerMainTitle{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  font-size:2.75rem;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-1px;
  color:#fff;
  text-align:center;
  text-shadow:0 6px 20px rgba(0,0,0,.30);
}

.registerMainTitle span{
  display:block;
  margin-top:4px;
  background:linear-gradient(90deg,#00cbff 0%, #1a8eff 42%, #9a5dff 82%, #d55dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.registerSubtitle{
  position:relative;
  z-index:1;
  max-width:470px;
  margin:0 auto 26px;
  font-size:1.02rem;
  line-height:1.45;
  color:rgba(230,236,255,.74);
  text-align:center;
}

.registerGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.authGroup{
  position:relative;
  z-index:1;
  margin-bottom:17px;
  text-align:left;
}

.authGroup label{
  display:block;
  margin-bottom:9px;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  color:#fff;
}

.authInputWrap{
  position:relative;
  display:flex;
  align-items:center;
  min-height:60px;
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,17,44,.95), rgba(4,8,24,.98));
  border:1px solid rgba(73,86,255,.75);
  box-shadow:
    0 0 0 1px rgba(0,192,255,.32) inset,
    0 0 18px rgba(0,180,255,.10),
    0 0 24px rgba(143,88,255,.10);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.authInputWrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,190,255,.12), transparent 36%, rgba(143,88,255,.12));
  opacity:.8;
}

.authInputWrap:focus-within{
  transform:translateY(-1px);
  border-color:rgba(0,214,255,.95);
  box-shadow:
    0 0 0 1px rgba(147,87,255,.45) inset,
    0 0 22px rgba(0,184,255,.30),
    0 0 32px rgba(143,88,255,.18);
}

.authInputWrap input{
  position:relative;
  z-index:1;
  width:100% !important;
  height:100%;
  margin:0 !important;
  padding:18px 52px 18px 58px !important;
  display:block;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  color:#fff !important;
  font-size:15px;
  font-weight:600;
  border-radius:0 !important;
  box-shadow:none !important;
}

.authInputWrap input::placeholder{
  color:rgba(226,234,255,.52);
  font-weight:500;
}

.authIcon{
  position:absolute;
  left:18px;
  z-index:2;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  filter:drop-shadow(0 0 8px rgba(0,190,255,.8));
}

.authEye{
  position:absolute;
  right:12px;
  z-index:3;
  width:40px;
  height:40px;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:50%;
  background:transparent !important;
  color:#dfe7ff !important;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}

.authEye:hover{
  transform:scale(1.08) !important;
  background:rgba(255,255,255,.05) !important;
  color:#fff !important;
}

.btnTerminosRegistro{
  position:relative;
  z-index:1;
  width:100%;
  margin-top:4px;
  margin-bottom:13px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none !important;
  border-radius:17px;
  padding:14px 16px;
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  background:
    linear-gradient(90deg, rgba(0,190,255,.18), rgba(143,88,255,.18)),
    linear-gradient(180deg, rgba(9,18,46,.96), rgba(5,10,26,.98));
  border:1px solid rgba(0,190,255,.44) !important;
  box-shadow:
    0 0 18px rgba(0,190,255,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.btnTerminosRegistro:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:
    0 0 22px rgba(0,190,255,.22),
    0 0 24px rgba(143,88,255,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.checkAuth{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:11px;
  margin:0 0 16px;
  color:#e8efff;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
}

.checkAuth input{
  width:21px !important;
  height:21px !important;
  margin:0 !important;
  flex-shrink:0;
  appearance:none;
  -webkit-appearance:none;
  border-radius:7px;
  border:2px solid rgba(208,225,255,.88);
  background:rgba(6,12,30,.94) !important;
  box-shadow:
    0 0 14px rgba(0,183,255,.20),
    inset 0 0 0 2px rgba(255,255,255,.03);
}

.checkAuth input:checked{
  border-color:#00c8ff;
  background:linear-gradient(135deg,#00c8ff,#9557ff) !important;
  box-shadow:
    0 0 18px rgba(0,200,255,.48),
    0 0 20px rgba(149,87,255,.26);
}

.checkAuth input:checked::after{
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.authHumanBox{
  position:relative;
  z-index:1;
  margin:18px 0 18px;
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 100%, rgba(149,87,255,.20), transparent 42%),
    linear-gradient(180deg, rgba(9,18,46,.90), rgba(5,10,28,.96));
  border:1px solid rgba(68,177,255,.75);
  box-shadow:
    0 0 0 1px rgba(147,87,255,.34) inset,
    0 0 24px rgba(0,176,255,.12),
    0 12px 34px rgba(0,0,0,.28);
}

.humanTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.humanTitleWrap{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.humanShield{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:26px;
  color:#e3f5ff;
  background:
    radial-gradient(circle at top, rgba(0,210,255,.30), transparent 50%),
    linear-gradient(145deg, rgba(16,47,104,.98), rgba(7,18,48,.98));
  border:1px solid rgba(0,198,255,.56);
  box-shadow:
    0 0 20px rgba(0,190,255,.20),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.humanTexts{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  text-align:left;
}

.humanTitle{
  font-size:16px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
}

.humanSub{
  font-size:12.5px;
  color:rgba(230,236,255,.66);
  line-height:1.25;
}

.humanBadge{
  min-width:145px;
  padding:9px 18px;
  border-radius:999px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
  background:linear-gradient(180deg, rgba(92,55,255,.12), rgba(9,17,40,.82));
  border:1px solid rgba(138,76,255,.82);
  box-shadow:
    0 0 16px rgba(138,76,255,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.humanBadge.ok{
  color:#f0ffff;
  letter-spacing:2px;
  background:linear-gradient(90deg, rgba(0,196,255,.24), rgba(121,76,255,.22));
  border-color:rgba(0,220,255,.84);
  box-shadow:
    0 0 18px rgba(0,196,255,.28),
    0 0 24px rgba(121,76,255,.20);
}

.humanCheckCard{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(84,105,185,.42);
  background:rgba(8,17,42,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.22);
  transition:all .25s ease;
}

.humanCheckCard:hover{
  border-color:rgba(0,202,255,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 18px rgba(0,190,255,.13);
}

.humanCheckCard.verificado{
  border-color:rgba(0,214,255,.75);
  background:rgba(0,190,255,.10);
}

.humanCheckLeft{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  cursor:pointer;
  text-align:left;
}

.humanCheckLeft input[type="checkbox"]{
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  flex-shrink:0;
  appearance:none;
  -webkit-appearance:none;
  border-radius:10px;
  border:3px solid rgba(219,230,255,.92);
  background:rgba(12,20,45,.95) !important;
  box-shadow:
    0 0 16px rgba(120,160,255,.32),
    inset 0 0 0 2px rgba(255,255,255,.03);
  cursor:pointer;
  transition:all .22s ease;
}

.humanCheckLeft input[type="checkbox"]:checked{
  border-color:#00d2ff;
  background:linear-gradient(135deg,#00c8ff,#8d55ff) !important;
  box-shadow:
    0 0 20px rgba(0,200,255,.54),
    0 0 26px rgba(141,85,255,.28);
}

.humanCheckLeft input[type="checkbox"]:checked::after{
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:#fff;
  font-size:24px;
  font-weight:900;
}

.humanCheckText{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.humanCheckText strong{
  font-size:17px;
  font-weight:900;
  line-height:1.2;
  color:#fff;
}

.humanCheckText span{
  font-size:13px;
  line-height:1.3;
  color:rgba(230,236,255,.66);
}

.humanCheckCard.verificado .humanCheckText strong{
  color:#eaffff;
}

.humanCheckCard.verificado .humanCheckText span{
  color:rgba(230,250,255,.82);
}

.humanChallenge{
  display:none;
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(4,10,26,.66);
  border:1px dashed rgba(0,200,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.humanQuestionLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.humanQuestionText{
  font-size:13px;
  font-weight:700;
  color:rgba(230,236,255,.72);
}

.humanQuestionChip{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,200,255,.10);
  border:1px solid rgba(0,200,255,.34);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.5px;
  box-shadow:0 0 14px rgba(0,190,255,.10);
}

.humanVerifyBtn{
  width:100%;
  margin-top:10px;
  padding:13px 16px;
  border:none !important;
  border-radius:15px;
  outline:none;
  cursor:pointer;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(90deg,#00bfff,#1f70ff 48%,#9655ff);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 20px rgba(0,190,255,.18),
    0 0 24px rgba(150,85,255,.12),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .22s ease, filter .22s ease;
}

.humanVerifyBtn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.humanStatus{
  margin-top:10px;
  padding:10px 12px;
  border-radius:13px;
  font-size:13px;
  font-weight:700;
  display:none;
}

.humanStatus.ok{
  display:block;
  color:#ecffff;
  background:rgba(0,200,255,.12);
  border:1px solid rgba(0,210,255,.30);
}

.humanStatus.error{
  display:block;
  color:#ffd8e1;
  background:rgba(255,75,110,.12);
  border:1px solid rgba(255,102,140,.28);
}

.authPrimaryBtn{
  position:relative;
  z-index:1;
  width:100%;
  min-height:66px;
  margin-top:8px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:none !important;
  border-radius:19px;
  cursor:pointer;
  font-size:1.28rem;
  font-weight:900;
  color:#fff !important;
  background:linear-gradient(90deg,#00c8ff 0%, #1d80ff 44%, #9358ff 80%, #c85dff 100%) !important;
  box-shadow:
    0 0 25px rgba(0,200,255,.44),
    0 0 34px rgba(151,86,255,.34),
    inset 0 1px 0 rgba(255,255,255,.34);
  text-shadow:0 2px 12px rgba(0,0,0,.28);
  transition:transform .24s ease, filter .24s ease, box-shadow .24s ease;
}

.authPrimaryBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 0 28px rgba(0,200,255,.56),
    0 0 40px rgba(151,86,255,.44),
    inset 0 1px 0 rgba(255,255,255,.40);
}

.authPrimaryBtn:disabled{
  opacity:.62 !important;
  pointer-events:none !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:grayscale(.08);
}

.authBtnIcon{
  font-size:23px;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.30));
}

.authBtnArrow{
  font-size:40px;
  line-height:1;
  font-weight:400;
  margin-top:-2px;
}

.mensajeAuth{
  position:relative;
  z-index:1;
  min-height:22px;
  margin-top:14px;
  text-align:center;
  font-size:14px;
  font-weight:800;
}

.registerLoginText{
  position:relative;
  z-index:1;
  margin:18px 0 0;
  text-align:center;
  color:rgba(230,236,255,.72);
  font-size:15px;
}

.registerLoginText a{
  color:#27c6ff;
  text-decoration:none;
  font-weight:900;
  transition:.22s ease;
}

.registerLoginText a:hover{
  color:#a966ff;
  text-shadow:0 0 12px rgba(0,200,255,.28);
}

/* =========================================================
   MODAL TÉRMINOS - ESTILO NEÓN
========================================================= */

#modalTerminos{
  background:rgba(0,0,0,.76) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:18px;
}

#modalTerminos .modal-content,
.terminosContent{
  position:relative;
  width:92%;
  max-width:560px;
  max-height:86vh;
  overflow-y:auto;
  padding:0 0 24px !important;
  border-radius:26px !important;
  text-align:left;
  color:#fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,190,255,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(149,87,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(8,17,42,.98), rgba(4,8,24,.98)) !important;
  border:1px solid rgba(64,185,255,.72) !important;
  box-shadow:
    0 0 0 1px rgba(149,87,255,.38) inset,
    0 0 30px rgba(0,180,255,.22),
    0 0 42px rgba(143,88,255,.18),
    0 24px 70px rgba(0,0,0,.72) !important;
  animation:modalNeonEntrada .25s ease;
}

@keyframes modalNeonEntrada{
  from{
    opacity:0;
    transform:scale(.94) translateY(10px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.terminosContent::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:26px;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 14%, transparent 30%),
    radial-gradient(circle at 50% 8%, rgba(0,190,255,.16), transparent 28%);
  opacity:.55;
}

.terminosHeader{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:15px;
  padding:24px 24px 18px;
  border-bottom:1px solid rgba(100,190,255,.18);
  background:
    linear-gradient(90deg, rgba(0,190,255,.10), rgba(143,88,255,.10));
}

.terminosIcon{
  width:58px;
  height:58px;
  flex-shrink:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  background:
    radial-gradient(circle at top, rgba(0,210,255,.30), transparent 50%),
    linear-gradient(145deg, rgba(16,47,104,.98), rgba(7,18,48,.98));
  border:1px solid rgba(0,198,255,.56);
  box-shadow:
    0 0 20px rgba(0,190,255,.20),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.terminosHeader h2{
  margin:0 !important;
  text-align:left !important;
  font-size:23px !important;
  line-height:1.15;
  font-weight:900;
  color:#fff !important;
}

.terminosHeader span{
  display:block;
  margin-top:5px;
  color:rgba(230,236,255,.66);
  font-size:13px;
  font-weight:700;
}

.terminosBody{
  position:relative;
  z-index:1;
  padding:20px 24px 6px;
}

.terminosBody p{
  position:relative;
  margin:0 0 12px !important;
  padding:12px 14px 12px 38px;
  border-radius:15px;
  color:rgba(232,238,255,.82) !important;
  font-size:14px !important;
  line-height:1.58 !important;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.terminosBody p::before{
  content:"✓";
  position:absolute;
  left:14px;
  top:12px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#00c8ff,#9358ff);
  box-shadow:0 0 12px rgba(0,200,255,.26);
}

.terminosBody b{
  color:#ffffff;
}

#modalTerminos .btnAceptar{
  position:relative;
  z-index:1;
  width:calc(100% - 48px);
  max-width:none;
  margin:10px 24px 0 !important;
  align-self:center;
  min-height:52px;
  border:none !important;
  border-radius:17px !important;
  padding:14px 18px !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:900 !important;
  cursor:pointer;
  background:linear-gradient(90deg,#00c8ff 0%, #1d80ff 44%, #9358ff 80%, #c85dff 100%) !important;
  box-shadow:
    0 0 22px rgba(0,200,255,.34),
    0 0 28px rgba(151,86,255,.24),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition:transform .22s ease, filter .22s ease;
}

#modalTerminos .btnAceptar:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.07);
}

/* Scroll del modal */
.terminosContent::-webkit-scrollbar{
  width:8px;
}

.terminosContent::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
}

.terminosContent::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#00c8ff,#9358ff);
  border-radius:999px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:700px){
  .authContainer{
    padding:18px 12px;
    align-items:flex-start;
  }

  .authCard{
    max-width:100%;
    padding:30px 22px 24px;
    border-radius:28px;
  }

  .authCardRegister{
    max-width:100%;
  }

  .registerTopLogo{
    width:112px;
    height:112px;
  }

  .registerMainTitle{
    font-size:2.25rem;
  }

  .registerSubtitle{
    font-size:15px;
    margin-bottom:24px;
  }

  .registerGrid{
    grid-template-columns:1fr;
    gap:0;
  }

  .authInputWrap{
    min-height:58px;
    border-radius:17px;
  }

  .authInputWrap input{
    padding:17px 50px 17px 54px !important;
    font-size:15px;
  }

  .authPrimaryBtn{
    min-height:60px;
    font-size:1.10rem;
  }

  .authBtnArrow{
    font-size:34px;
  }

  .humanTop{
    align-items:flex-start;
  }

  .humanBadge{
    width:100%;
    min-width:0;
  }

  .humanShield{
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:24px;
  }

  .humanTitle{
    font-size:15px;
  }

  .humanSub{
    font-size:12px;
  }

  .humanCheckText strong{
    font-size:16px;
  }

  .humanCheckText span{
    font-size:13px;
  }

  .terminosHeader{
    padding:20px 18px 16px;
  }

  .terminosBody{
    padding:18px 18px 6px;
  }

  #modalTerminos .btnAceptar{
    width:calc(100% - 36px);
    margin-left:18px !important;
    margin-right:18px !important;
  }
}

@media (max-width:420px){
  .authCard{
    padding:26px 18px 22px;
    border-radius:25px;
  }

  .registerTopLogo{
    width:102px;
    height:102px;
  }

  .registerMainTitle{
    font-size:2rem;
  }

  .registerSubtitle{
    font-size:14px;
  }

  .authGroup label{
    font-size:14px;
  }

  .authHumanBox{
    padding:15px;
    border-radius:20px;
  }

  .humanCheckLeft{
    gap:13px;
  }

  .humanCheckLeft input[type="checkbox"]{
    width:31px !important;
    height:31px !important;
  }

  .authPrimaryBtn{
    font-size:1rem;
    gap:12px;
  }

  .authBtnArrow{
    font-size:30px;
  }

  .terminosHeader{
    align-items:flex-start;
  }

  .terminosIcon{
    width:50px;
    height:50px;
    font-size:26px;
    border-radius:16px;
  }

  .terminosHeader h2{
    font-size:20px !important;
  }

  .terminosBody p{
    font-size:13px !important;
    padding:11px 12px 11px 36px;
  }
}