body{
    background-image: url('./../img/fondo2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh; 
    font-family: 'Montserrat', sans-serif !important;
  
    
}

select {
  color: black;
}

option {
  color: black;
}

input{
  font-weight: 300;
  color: #ffffff;
}
input::placeholder {
  font-weight: 500;
  color: #999; /* opcional para que se vea como placeholder */
}

@media (max-width: 760px) {
    body {
      background-size: cover;
      background-position: center center;
    }

    .form-header-left, .form-header-right {
      text-align: center !important;
      font-size: 0.9rem;
    }

    .form-footer-left, .form-footer-right {
      text-align: center !important;
      padding: 0.75rem 1rem !important;
      width: 50% !important;
    }

    .plan-box h5, .plan-box h2 {
      text-align: center !important;
    }

    .plan-box > .d-flex {
      flex-direction: row !important;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
    }

    .plan-box img {
      max-width: 50%;
      height: auto;
    }
}



input::placeholder {
  color: white;
    font-weight: 300; 

}

input{

    background-color: transparent;
    border: none;
    border-bottom: white 2px solid;
    width: 100%;
    color: white;
font-weight: 300; 
}

select{
    background-color: transparent;
    border: none;
    border-bottom: white 2px solid;
    width: 100%;
    color: white;
    font-weight: 300; 
}

a{
    color: white !important;
    text-decoration: none !important;
}


.plan-box {
  background-color: rgba(255, 255, 255, 0.8);
  outline: 1px solid rgba(255, 255, 255);
  outline-offset: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FF4E02;
  font-weight: bold;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap; /* para adaptarse mejor en móviles */
}

.plan-box .left {
  width: 75%;
  padding: 1.5rem 0.5rem 0.5rem 0.5rem;
  text-align: left;
}

.plan-box .left h5 {
  font-size: 0.9rem;
  font-weight: bolder;
  margin-bottom: 1rem;
}

.plan-box .left h2 {
  font-size: 1.2rem;
  font-weight: bolder;
}

.plan-box .right {
  width: 25%;
  height: 100px;
  text-align: right;
}

.plan-box .right img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.plan-box .right small {
  display: block;
  font-weight: normal;
  color: #999;
  font-size: 0.8rem;
}




.loading-modal{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #5094a3;
  opacity: 0.4;
  display: none;;
}

.loader {
  border: 16px solid #f3f3f3; 
  border-top: 16px solid #f04b00; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;  
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive: columna en móviles */
@media (max-width: 767px) {
  .plan-box {
    flex-direction: column;
    text-align: center;
  }

  .plan-box .left,
  .plan-box .right {
    width: 100%;
    text-align: center;
  }

  .plan-box .right {
    margin-top: 1rem;
    height: auto;
  }

  .plan-box .right img {
    max-width: 150px;
    height: auto;
  }

  .plan-box .left h5,
  .plan-box .left h2 {
    text-align: center;
  }
}
.center-content {
  width: 60%;
}


    .form-box {
      max-width: 600px;
      background-color: rgb(36, 104, 121, 0.8);
    }

    .form-section div {
      padding: 1rem 0;
      color: white;
    }

    .form-header-left {
      background-color: #f04b00;
      color: white;
      font-weight: 800;
      text-transform: uppercase;
      padding: 1rem;
    }

    .form-header-right {
      background-color: white;
      color: #00829E;
      font-weight: 500;
      text-align: right;
      padding: 1rem;
    }

    .form-footer-left{
      background-color: #f04b00;
      color: white;
      text-align: center ;
      font-weight: bold;
      padding: 0.5rem 1rem;
      text-transform: uppercase;
      width: 35%;
    }

    .form-footer-right{
      
      padding: 1rem 2rem;
      width: 65%;
      
    }

    .form-pers{
        background-color: transparent;
    }

    .terminos a{
        
        text-decoration: underline !important;
        font-weight: 300;
    }

    .terminos input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin-right: 10px;
        text-decoration: none;
        border: none;
    }

    .terminos {
        align-items: start;
        justify-content: start;
        margin-top: 1rem;
        color: white;
    }

    .terminos label {
        color: white;
        font-weight: 300;
        font-size: 0.7rem;
    }