.curso {
  display:flex;
  width:100%;
  position:sticky;
  top:0;
  background-color:grey;
  flex-direction:column;
  height:100vh;
  color:white;
  z-index: 6;
  overflow:hidden;
}

  .curso .top{
    width:100%;
    display:flex;
    padding:56px 40px 40px 40px;
    height:50vh;
    /*background-color:purple;*/
    align-items:center;
    justify-content:center;
    z-index:2;
  }

  .curso .bottom{
    width:100%;
    display:flex;
    height:50vh;
    padding:40px 40px 56px 40px;
    justify-content:center;
    /*background-color:darkred;*/
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color:rgba(0,0,0,0.3);
    z-index:2;
    align-items: top;
  }

  .curso .top .content{
    width:100%;
    max-width:1448px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .curso .bottom .content{
    width:100%;
    display:flex;
    gap:34px;
    max-width:1448px;
    justify-content:space-between;
  }

  .curso .bottom .left{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:826px;
    gap:28px;
    padding-top: 20px;
  }

  .curso .bottom .puntos{
    width:100%;
    flex-wrap:wrap;
    column-gap:35px;
    row-gap:13px;
    display:flex;
  }

  .curso .bottom .caja{
    width:100%;
    display:flex;
    flex-direction:column;
    flex:1 1 260px;
    max-width:474px;
    gap:13px;
  }

  .curso .bottom .line{
    width:100%;
    height:1px;
    background-color:#838383;
  }

  .curso .bottom a.descargar{
    text-decoration:none;
    cursor:pointer;
    width:fit-content;
    color:white;
    padding:13px 26px;
    border:1px solid rgba(221, 221, 221, 0.3);
    background-color:rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  
.curso .bottom .right{
  display:flex;
  width:100%;
  max-width:335px;
  height:fit-content;
  border:1px solid rgba(221, 221, 221, 0.3);
  background-color:rgba(255, 255, 255, 0.1);
}

.curso .bottom .precio{
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
    color:white;
    padding:13px 26px;
    font-size: 15px;
    line-height: 24px;
} 

.curso .bottom a.inscripcion{
    text-decoration:none;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
    padding:13px 26px;
    color:black;
    background-color:#D9D9D9;
    font-size: 15px;
    line-height: 24px;
}  

.curso .bottom .right.registro{
  flex-direction:column;
  gap:8px;
  max-width:470px;
  width:100%;
  padding:24px 24px 22px;
  align-self:stretch;
  justify-content:flex-start;
  backdrop-filter: blur(15px);
    opacity: 0.8;
  -webkit-backdrop-filter: blur(15px);
}

.curso .bottom .right.registro .estado{
  width:fit-content;
  color:white;
  font-size:15px;
  line-height:24px;
  padding:0;
  background:none;
}

.curso .bottom .right.registro p{
  font-size:13px;
  line-height:21px;
  max-width:none;
  color:rgba(255,255,255,0.88);
}

.curso .bottom .right.registro p.destacado{
  color:white;
  font-weight:600;
  padding-bottom: 6px;
}

.curso .bottom .right.registro .formulario{
  text-decoration:none;
  cursor:pointer;
  width:fit-content;
  color:black;
  padding:13px 26px;
  border:1px solid rgba(221, 221, 221, 0.3);
  background-color:#D9D9D9;
  font-size:15px;
  line-height:24px;
  text-align:center;
}

.curso .bottom .right.registro .curso-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

.curso .bottom .right.registro .formulario--preinscripcion{
  border-color:#fff;
  background-color:#fff;
}

.curso .bottom .right.registro .formulario:hover,
.curso .bottom .right.registro .formulario:focus-visible{
  background-color:#fff;
  outline:2px solid rgba(255,255,255,0.45);
  outline-offset:2px;
}

  
.curso .bottom.especial{
  height:100vh;
  justify-content:center;
  align-items:center;
  backdrop-filter: none;
 -webkit-backdrop-filter: none;
  background-color:transparent;
}
  
.curso .content.rutaCompleta{
  flex-direction:column;
  height:fit-content;
  padding: 20px;
  width:100%;
  align-items:center;
  justify-content:center;
  max-width:617px;
  gap:0px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color:rgba(0,0,0,0.3);
}

.curso .content.rutaCompleta h5{ 
  padding-top: 10px;

}

.curso .content.rutaCompleta .right.registro{
  align-items:center;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.curso .content.rutaCompleta .right.registro .estado,
.curso .content.rutaCompleta .right.registro p{
  align-self:center;
}

.curso .content.rutaCompleta .right.registro .curso-actions{
  justify-content:center;
}

.formModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}

.formModal.is-open{
  opacity:1;
  pointer-events:auto;
}

.formModal .backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.formModal .panel{
  position:relative;
  width:min(100%, 760px);
  max-height:min(88vh, 820px);
  overflow:auto;
  padding:28px 28px 26px;
  border:1px solid rgba(0,0,0,0.06);
  background:rgba(243, 239, 232, 0.97);
  color:#1c1c1c;
  box-shadow:0 14px 40px rgba(0,0,0,0.22);
}

.formModal .close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:none;
  cursor:pointer;
  background:transparent;
  color:#1c1c1c;
  font-size:26px;
  line-height:1;
}

.formModal .heading{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:48px;
  margin-bottom:20px;
}

.formModal .heading h3{
  font-size:30px;
  line-height:1.12;
  color:#1c1c1c;
}

.formModal .heading p{
  font-size:14px;
  line-height:23px;
  max-width: 580px;
  color:rgba(28,28,28,0.78);
}

.formModal form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.formModal .grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.formModal .grid > .field{
  min-width:0;
  flex:1 1 210px;
}

.formModal .field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.formModal label{
  font-size:13px;
  line-height:18px;
  color:rgba(28,28,28,0.74);
}

.formModal input[type="text"],
.formModal input[type="tel"],
.formModal input[type="email"],
.formModal textarea{
  width:100%;
  border:1px solid rgba(28,28,28,0.12);
  background:rgba(255,255,255,0.62);
  color:#1c1c1c;
  padding:13px 15px;
  outline:none;
  border-radius:0;
}

.formModal textarea{
  min-height:96px;
  resize:vertical;
}

.formModal input[type="text"]::placeholder,
.formModal input[type="tel"]::placeholder,
.formModal input[type="email"]::placeholder,
.formModal textarea::placeholder{
  color:rgba(28,28,28,0.45);
}

.formModal input:focus,
.formModal textarea:focus{
  border-color:rgba(28,28,28,0.28);
}

.formModal .checks{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px 0 0;
}

.formModal .check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  line-height:20px;
  color:rgba(28,28,28,0.9);
}

.formModal .check input{
  margin-top:4px;
  accent-color:#1c1c1c;
}

.formModal .submit{
  border:none;
  cursor:pointer;
  width:fit-content;
  color:#1c1c1c;
  background:rgba(28,28,28,0.08);
  border:1px solid rgba(28,28,28,0.14);
  padding:12px 22px;
  font-size:14px;
  line-height:18px;
  margin-top:10px;
}

.form-status{
  margin:2px 0 0;
  font-size:13px;
  line-height:20px;
}

.form-status[hidden]{display:none}
.form-status--success{color:#557a3a}
.form-status--error{color:#8c3c30}
.cta .form-status--success{color:#d8f0bd}
.cta .form-status--error{color:#ffd0c5}
form button:disabled{cursor:wait;opacity:.68}

.form-success-modal{
  position:fixed;
  inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
}

.form-success-modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.form-success-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.form-success-modal__panel{
  position:relative;
  width:min(100%,440px);
  padding:32px;
  background:#f4f1ec;
  border-top:3px solid #8f5529;
  color:#1c1c1c;
  font-family:"Inter",sans-serif;
  box-shadow:0 16px 42px rgba(0,0,0,.2);
}

.form-success-modal__eyebrow{
  margin:0 0 10px;
  color:#8f5529;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.form-success-modal h2{
  margin:0;
  font-family:"Gowun Dodum",sans-serif;
  font-size:30px;
  font-weight:400;
  line-height:1.25;
}

.form-success-modal__message{
  margin:15px 0 25px;
  font-size:14px;
  line-height:23px;
  letter-spacing:.02em;
}

.form-success-modal__accept{
  padding:12px 24px;
  border:1px solid rgba(28,28,28,.28);
  background:#1c1c1c;
  color:#fff;
  cursor:pointer;
  font:600 14px/20px "Inter",sans-serif;
  transition:background-color 180ms ease,color 180ms ease;
}

.form-success-modal__accept:hover,
.form-success-modal__accept:focus-visible{
  background:#8f5529;
  color:#fff;
  outline:none;
}

body.modal-open{
  overflow:hidden;
}

@media (max-width: 760px){
  .formModal{
    padding:16px;
  }

  .formModal .panel{
    padding:24px 16px 18px;
  }

  .formModal .heading h3{
    font-size:26px;
  }

  .formModal .grid{
    flex-direction:column;
  }

  .formModal .grid > .field{
    flex:0 1 auto;
  }

  .formModal .submit{
    width:100%;
    min-height:46px;
  }

  .curso .bottom .right.registro .curso-actions,
  .curso .bottom .right.registro .formulario{
    width:100%;
  }
}

.curso .content.rutaCompleta .right.registro{
  margin-top: 20px;
}


  .curso .background{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    background-color:rgb(102, 93, 93);
    overflow:hidden;
  }

  .curso .background.gradiente{
    z-index:1;
  }

  .curso .background img{
    position:absolute;
    top:0;
    left:0;
    object-position:center;
    object-fit:cover;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
  }

  .curso .gradient{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    mix-blend-mode:multiply;
    background:linear-gradient( 45deg, rgba(0,0,0,1), rgba(0,0,0,0.6), rgba(0,0,0,0.2));
  }

  .curso h2{
    font-size: 42px;
    line-height: 64px;
    max-width: 1000px;
  }
    .curso h5{
    font-size: 17px;
    line-height: 27px;
  }
    .curso p{
    font-size: 15px;
    line-height: 28px;
    max-width: 700px;
  }

    .curso .caja p{
    font-size: 14px;
    line-height: 23px;
  }
  
  
.curso .bottom .right.registro p {
  margin-bottom: 10px;
}

.recaptcha-wrapper {
  margin: 16px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
}

@media (max-width: 360px) {
  .recaptcha-wrapper {
    overflow: hidden;
  }
  .recaptcha-wrapper .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}