@font-face {
  font-family: "Robotoregular";
  src: url("../fonts/Roboto-Regular.woff") format("opentype");
  font-style: normal;
}
@font-face {
  font-family: "Robotomedium";
  src: url("../fonts/Roboto-Medium.woff") format("opentype");
  font-style: normal;
}

@font-face {
  font-family: "Robotobold";
  src: url("../fonts/Roboto-Bold.woff") format('opentype');
  font-style: normal;
}





:root {
  /**NAV**/
  --font-family-item-navbar: "DIN Black", sans-serif;
  --bg-navbar: url(../img/menu/background_navbar.png);
  --bg-home: url(../img/primor/fondo_validate.webp);
  --bg-footer: #fdc118;
  --bg-orange: #EB6901;
  --bg-purple: #8762ff;
  --color-text-purple: #8762ff;
  --bg-green: #3fe366;
  --color-text-yellow: #62573b;
  --bg-blue: #20214D;
  --bg-color-modal: #00000075;
  --color-text-blue: #0035da;
  --bg-white: #ffffff;
  --color-text-white: #ffffff;
  --color-text-black: #030202;
  --color-text-dark-blue: #0041c0;
  --font-family-button: "BebasKai", sans-serif;
  --bg-gray: #dfdfdf;
  --bg-black: #030202;
  --font-family-item: "Roboto", sans-serif;
  --font-family-footer: "Roboto", sans-serif;
  --font-family-input: "Roboto", sans-serif;
  --font-family-title-page: "Roboto", sans-serif;
  --font-family-qa-title: "Roboto", sans-serif;
  --font-family-qa-body: "Roboto", sans-serif;
 
  
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #F6E285;
  border: none;
  background-size: cover;
}

* {
  font-family: "Robotomedium", sans-serif;

}

body {
}

.hero-bg {
  background: radial-gradient(125% 125% at 50% 100%, #000000 40%, #2b0707 100%);
  position: fixed;
  inset: 0;
  /*height: 100dvh;*/
  min-height: 100dvh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.modal {
  /*background-color: var(--color-green-main);*/
  background-color: #000;
}

#home{
 min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:2rem;
}
  #home .container {
    /*gap: 2rem;*/
    background-color: white;
    padding: 0;
    border-radius: 24px;
    /*max-height:800px;*/
  }


  #home .box-image{
    width:50%;
  }
  #home .box-image img {
    border-radius: 0 24px 24px 0;
    height: 100%;
    object-fit: cover;
  }

  #home .box-form {
    width:50%;
    padding:12px 36px 12px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2rem;
  }

  .box-form #miFormulario{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
    .box-form #miFormulario .row-input input {
      border:2px solid #000;
      
    }

      .box-form #miFormulario .row-input input:focus {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
      }

    .box-form #miFormulario .row-input select {
      white-space: normal; /* permite saltos de línea */
      word-wrap: break-word; /* corta si es muy largo */
    }
    .box-form #miFormulario .row-input select option {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width:150px;
    }

#btn-send-form {
  border: none;
  border-radius: 24px;
  border: 2px solid #8D8D8D;
  background-color: #000;
  color:#fff;
  padding-block:.3rem;
  transition:all 0.3s ease-in-out;

}

#canjes {
  min-height: 450px;
  background-image: url(../img/unacem/fondo_unacem.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  background-color: #fa0203;
  align-items: center;
  position: relative;
}

.gradient {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2)
}
#canjes .container{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem 0;
}

#centros{
  min-height:100dvh;
}




/**Estilos modal entregado**/
#modal-entregado {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 2rem;
}
  #modal-entregado .container {
    background-color: white;
    padding: 0;
    border-radius: 24px;
    height: 100%;
    max-height: 800px;
    max-width:95%;
    width:fit-content;
  }

  #modal-entregado .info-usuario{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2rem;
  }
.user {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  width: fit-content;
  padding: 8px 24px;
  /*background-color: #cecece;*/
  border-radius: 24px;
  margin:auto;
}
.user .profile{
  max-height:100px;
  max-width:100px;
  margin:auto;
}
  .user p{
    margin:0;
    padding:0;
    text-align:center;
    font-size:1rem;
  }
/**Estilos de validación de edad**/
#main-valid-age {
  background: radial-gradient(125% 125% at 50% 100%, #000000 40%, #2b0707 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.valid-age-wrap {
  padding-top: 80px;
}
.valid-age-wrap .valid-age-content p {
  font-size:clamp(2rem , 5vw , 4rem);
  text-align:center;
  color:#fff;
}
.valid-age-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2rem;
}
#valid-age-button-yes,
#valid-age-button-not {
  background-color: #fff;
  text-decoration: none;
  color: #000;
  font-size: clamp(2rem, 5vw, 2rem);
  border-radius:8px;
  width:5rem;
  height:5rem;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
/*COkkies*/
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  color: black;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.img-cookie {
  height: 3rem;
}

.cookie-banner button {
  background-color: #0035da;
  color: white;
  border: none;
  padding: 10px 40px;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 1.2rem;
}

.container-cookie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.container-cookie-text {
  text-align: justify;
}



.text-cookie-1 {
  color: #237192;
  font-weight: 900;
  font-size: 2rem;
}

.text-cookie-2 {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;

}

  .text-cookie-2 a {
 
    font-size: 1.3rem;
  }

.cookie-check-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

  .cookie-check-container .cookie-check-input label {
    color: #000;
  }

  .cookie-check-container p {
    color: #237192;
    font-weight: 900;
    font-size: 1.5rem;
    margin: 0;
  }

.cookie-check-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}


.close-cookie {
  color: gray;
  font-weight: 100;
  font-size: 2.5rem;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 1rem;
  font-family: sans-serif;
}