/* CEBAS_V345_REGISTER_PREMIUM_RESPONSIVE */

:root{
  --v345-navy:#0b3558;
  --v345-navy-dark:#072a49;
  --v345-blue:#1768a3;
  --v345-blue-hover:#10598d;
  --v345-text:#263746;
  --v345-muted:#667788;
  --v345-border:#d5dee8;
  --v345-soft:#f5f8fb;
  --v345-focus:rgba(23,104,163,.14);
}

/* ==========================================================
   MODAL DA HOME
   ========================================================== */

#v341-register-layer{
  box-sizing:border-box;
  align-items:center;
  padding:24px;
}

.v341-register-modal{
  width:min(1120px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  border:1px solid rgba(16,48,75,.08);
  border-radius:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
  overflow:hidden;
}

.v341-modal-head{
  flex:0 0 auto;
  min-height:74px;
  box-sizing:border-box;
  padding:18px 30px;
  background:#fff;
  border-bottom:1px solid #e5eaf0;
}

.v341-modal-head h2{
  color:var(--v345-text);
  font-size:25px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.2px;
}

.v341-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#697784;
  font-size:31px;
  transition:background .15s ease,color .15s ease;
}

.v341-close:hover{
  background:#f0f3f6;
  color:#34495b;
}

.v341-register-body{
  flex:1 1 auto;
  overflow-y:auto;
  box-sizing:border-box;
  padding:30px 38px 32px;
  background:#fff;
}

.v341-register-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:20px;
  align-items:start;
}

/*
  IMPORTANTE:
  classes explicitas substituem os antigos nth-of-type.
  Isso elimina o deslocamento causado pelo DIV de erro.
*/
.v341-register-grid > .v341-field.v345-cpf{
  grid-column:span 3;
}

.v341-register-grid > .v341-field.v345-name{
  grid-column:span 9;
}

.v341-register-grid > .v341-field.v345-email{
  grid-column:span 6;
}

.v341-register-grid > .v341-field.v345-phone{
  grid-column:span 6;
}

.v341-register-grid > .v341-two{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.v341-register-grid > .v341-register-error,
.v341-register-grid > .v341-consent,
.v341-register-grid > .v341-submit,
.v341-register-grid > .v341-login-link{
  grid-column:1/-1;
}

.v341-field{
  min-width:0;
  gap:7px;
}

.v341-field label{
  color:#34495b;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
}

.v341-field input{
  width:100%;
  min-width:0;
  height:50px;
  box-sizing:border-box;
  padding:0 15px;
  border:1px solid var(--v345-border);
  border-radius:6px;
  background:#fff;
  color:var(--v345-text);
  font-size:16px;
  line-height:1;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.v341-field input::placeholder{
  color:#8795a2;
  opacity:1;
}

.v341-field input:hover{
  border-color:#b9c7d4;
}

.v341-field input:focus{
  border-color:var(--v345-blue);
  background:#fff;
  box-shadow:0 0 0 3px var(--v345-focus);
}

.v341-register-error{
  margin:0;
  padding:13px 15px;
  border-radius:6px;
  font-size:14px;
  line-height:1.45;
}

.v341-consent{
  margin-top:2px;
  padding:20px 22px;
  border:1px solid #dfe7ee;
  border-radius:8px;
  background:var(--v345-soft);
}

.v341-consent h3{
  margin:0 0 5px;
  color:var(--v345-navy);
  font-size:20px;
  line-height:1.3;
  font-weight:650;
}

.v341-consent p{
  margin:0 0 13px;
  color:var(--v345-muted);
  font-size:14px;
}

.v341-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#3f5060;
  font-size:14px;
  line-height:1.5;
  cursor:pointer;
}

.v341-check input{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:1px 0 0;
  accent-color:var(--v345-blue);
}

.v341-submit{
  height:52px;
  margin:0;
  border-radius:6px;
  background:var(--v345-blue);
  box-shadow:0 4px 12px rgba(23,104,163,.18);
  font-size:16px;
  font-weight:700;
  letter-spacing:.15px;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.v341-submit:hover{
  background:var(--v345-blue-hover);
  box-shadow:0 6px 16px rgba(23,104,163,.23);
}

.v341-submit:active{
  transform:translateY(1px);
}

.v341-login-link{
  padding:1px 0 0;
  color:#667786;
  font-size:14px;
}

.v341-login-link a{
  color:var(--v345-navy);
  font-weight:700;
  text-decoration:none;
}

.v341-login-link a:hover{
  text-decoration:underline;
}

/* ==========================================================
   AVISO
   ========================================================== */

.v341-notice{
  width:min(690px,calc(100vw - 32px));
  border-radius:10px;
}

.v341-notice-head{
  padding:22px 27px 7px;
}

.v341-notice-head h3{
  color:var(--v345-text);
  font-size:25px;
}

.v341-notice-body{
  padding:16px 27px 12px;
  color:#3c4a56;
  font-size:17px;
  line-height:1.55;
}

.v341-notice-actions{
  padding:12px 27px 26px;
}

.v341-aware{
  min-height:46px;
  padding:0 19px;
  border:1px solid var(--v345-navy);
  border-radius:6px;
  color:var(--v345-navy);
  font-size:15px;
}

/* ==========================================================
   PAGINA DIRETA /portal/register.php
   ========================================================== */

body.v343-register-page{
  color:var(--v345-text);
  background:
    radial-gradient(circle at 50% 15%,#f9fbfd 0,#f0f5fa 48%,#e8f0f7 100%);
}

.v343-register-card{
  width:min(1120px,calc(100vw - 40px));
  border:1px solid rgba(16,48,75,.07);
  border-radius:10px;
  box-shadow:0 24px 70px rgba(27,58,84,.14);
}

.v343-register-card-head{
  padding:21px 30px;
  background:#fff;
}

.v343-register-card-head h1{
  color:var(--v345-text);
  font-size:25px;
}

.v343-register-content{
  padding:30px 38px 34px;
}

.v343-register-grid{
  column-gap:24px;
  row-gap:20px;
}

.v343-cpf{
  grid-column:span 3;
}

.v343-name{
  grid-column:span 9;
}

.v343-email{
  grid-column:span 6;
}

.v343-phone{
  grid-column:span 6;
}

.v343-password,
.v343-confirm{
  grid-column:span 6;
}

.v343-field{
  min-width:0;
  gap:7px;
}

.v343-field label{
  color:#34495b;
  font-size:14px;
  font-weight:600;
}

.v343-field input{
  min-width:0;
  height:50px;
  padding:0 15px;
  border-color:var(--v345-border);
  border-radius:6px;
  color:var(--v345-text);
  font-size:16px;
}

.v343-field input::placeholder{
  color:#8795a2;
}

.v343-field input:hover{
  border-color:#b9c7d4;
}

.v343-field input:focus{
  border-color:var(--v345-blue);
  box-shadow:0 0 0 3px var(--v345-focus);
}

.v343-consent{
  margin-top:2px;
  padding:20px 22px;
  border:1px solid #dfe7ee;
  border-radius:8px;
  background:var(--v345-soft);
}

.v343-consent h2{
  color:var(--v345-navy);
  font-size:20px;
}

.v343-consent p{
  color:var(--v345-muted);
  font-size:14px;
}

.v343-check{
  color:#3f5060;
  font-size:14px;
  line-height:1.5;
}

.v343-check input{
  accent-color:var(--v345-blue);
}

.v343-submit{
  height:52px;
  border-radius:6px;
  background:var(--v345-blue);
  box-shadow:0 4px 12px rgba(23,104,163,.18);
  font-size:16px;
  font-weight:700;
}

.v343-submit:hover{
  background:var(--v345-blue-hover);
}

.v343-bottom{
  color:#667786;
  font-size:14px;
}

.v343-bottom a{
  color:var(--v345-navy);
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1024px){

  #v341-register-layer{
    padding:18px;
  }

  .v341-register-modal{
    width:100%;
    max-height:calc(100vh - 36px);
  }

  .v341-register-body{
    padding:26px 28px 30px;
  }

  .v341-register-grid{
    column-gap:20px;
    row-gap:18px;
  }

  .v341-register-grid > .v341-field.v345-cpf{
    grid-column:span 4;
  }

  .v341-register-grid > .v341-field.v345-name{
    grid-column:span 8;
  }

  .v341-register-grid > .v341-field.v345-email,
  .v341-register-grid > .v341-field.v345-phone{
    grid-column:span 6;
  }

  .v341-register-grid > .v341-two{
    gap:20px;
  }

  .v343-register-content{
    padding:27px 28px 32px;
  }

  .v343-cpf{
    grid-column:span 4;
  }

  .v343-name{
    grid-column:span 8;
  }

  .v343-email,
  .v343-phone{
    grid-column:span 6;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:700px){

  #v341-register-layer{
    align-items:flex-start;
    padding:8px;
  }

  .v341-register-modal{
    width:100%;
    max-height:calc(100dvh - 16px);
    border-radius:8px;
  }

  .v341-modal-head{
    min-height:62px;
    padding:13px 16px 13px 18px;
  }

  .v341-modal-head h2{
    padding-right:8px;
    font-size:20px;
  }

  .v341-close{
    width:38px;
    height:38px;
    font-size:29px;
  }

  .v341-register-body{
    padding:20px 16px 22px;
  }

  .v341-register-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  .v341-register-grid > .v341-field.v345-cpf,
  .v341-register-grid > .v341-field.v345-name,
  .v341-register-grid > .v341-field.v345-email,
  .v341-register-grid > .v341-field.v345-phone,
  .v341-register-grid > .v341-two,
  .v341-register-grid > .v341-register-error,
  .v341-register-grid > .v341-consent,
  .v341-register-grid > .v341-submit,
  .v341-register-grid > .v341-login-link{
    grid-column:1/-1;
  }

  .v341-register-grid > .v341-two{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  .v341-field input{
    height:52px;
    font-size:16px;
  }

  .v341-consent{
    padding:17px 16px;
  }

  .v341-consent h3{
    font-size:18px;
  }

  .v341-check{
    font-size:13.5px;
  }

  .v341-submit{
    height:52px;
    font-size:16px;
  }

  .v341-login-link{
    padding-bottom:3px;
    font-size:13.5px;
  }

  #v341-notice-layer{
    padding:12px;
  }

  .v341-notice{
    width:100%;
  }

  .v341-notice-head{
    padding:19px 19px 6px;
  }

  .v341-notice-head h3{
    font-size:22px;
  }

  .v341-notice-body{
    padding:14px 19px 10px;
    font-size:16px;
  }

  .v341-notice-actions{
    padding:12px 19px 20px;
  }

  .v341-aware{
    width:100%;
  }

  .v343-page-wrap{
    padding:12px 8px 34px;
  }

  .v343-register-card{
    width:100%;
    border-radius:8px;
  }

  .v343-register-card-head{
    padding:18px 17px;
  }

  .v343-register-card-head h1{
    font-size:20px;
  }

  .v343-register-content{
    padding:20px 16px 24px;
  }

  .v343-register-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  .v343-cpf,
  .v343-name,
  .v343-email,
  .v343-phone,
  .v343-password,
  .v343-confirm,
  .v343-error,
  .v343-consent,
  .v343-submit,
  .v343-bottom{
    grid-column:1/-1;
  }

  .v343-field input{
    height:52px;
    font-size:16px;
  }

  .v343-consent{
    padding:17px 16px;
  }

  .v343-submit{
    height:52px;
  }

  .v343-topbar-inner{
    width:calc(100% - 24px);
  }

  .v343-brand strong{
    font-size:14px;
  }

  .v343-brand small{
    font-size:10px;
  }

  .v343-login-link{
    padding:0 12px;
    font-size:12px;
  }
}

/* Celulares muito estreitos */
@media (max-width:390px){

  .v341-modal-head h2,
  .v343-register-card-head h1{
    font-size:18px;
  }

  .v341-register-body,
  .v343-register-content{
    padding-left:13px;
    padding-right:13px;
  }

  .v341-consent,
  .v343-consent{
    padding:15px 13px;
  }

  .v343-brand small{
    display:none;
  }
}