/* CREATE BY: EMANUEL CAÑA JOSUE GARCIA.. ALIAS: MANU */
/* Las clases CSS estan colocadas de acuerdo al orden que tienen en la vista Welcome */
:root {
   font-size: 16px;
   --white-color: #ffffff;
   --gray-color: #f9f9f9;
   --dark-gray-color: #b4b4b4;
   --dark-gray-text: #262626;
   --red-color: #ff0000;
   --red-error-color: #ed4949ae;
   --red-error2-color: #ed4949;
   --blue-color: #7ab3fe;
   --blue-btn-color: #357ddb;
   --blue-btn2-color: #4c8fe7;
   --green-color: #f9a539;
}

@font-face {
   font-family: Nanami;
   src: url("/Public/fonts/Nanami.otf");
   font-display: swap;
}

* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
}

body,
html {
   height: -webkit-fill-available;
   overflow-x: hidden;
   scroll-behavior: smooth;
   font-family: sans-serif;
}

.info {
   width: 100%;
   height: 100vh;
   position: relative;
}

.imgLand {
   width: 100%;
   height: 100vh;
   object-fit: cover;
}

.slogan {
   position: absolute;
   top: 24%;
   right: 2%;
   left: 0%;
   display: flex;
   justify-content: end;
   z-index: 1;
}

.imgLand2 {
   width: 25%;
}

.titleLand {
   position: absolute;
   top: 8%;
   right: 0%;
   left: 0%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   font-family: 'Nanami';
   font-weight: 900;
   text-align: center;
   color: #204498;
}

.imgTitle {
   width: 90%;
   margin-top: 10%;
}


.otherElements {
   position: absolute;
   right: 8%;
   bottom: 22%;
   left: 0%;
   display: flex;
   justify-content: end;
}

.imgTitle2 {
   width: 10%;
   display: none;
}

.iconBanner {
   position: absolute;
   right: 0%;
   bottom: 25%;
   left: 0%;
}

.iconBanner__img {
   width: 80%;
   display: block;
   margin: 0 auto;
}

.logoGob {
   position: absolute;
   top: 23%;
   right: 0%;
   left: 3%;
}

.logoGob__img {
   width: 20%;
}

.message {
   position: absolute;
   display: flex;
   right: 0%;
   bottom: 12%;
   left: 0%;
}

.message__text {
   display: block;
   margin: auto;
   color: #204498;
   text-align: center;
   font-weight: 900;
}

.cta {
   position: absolute;
   right: 0%;
   bottom: 3.5%;
   left: 0%;

}

.cta__btn {
   display: block;
   width: 50%;
   margin: 0 auto;
   background-color: #ff2222;
   font-size: 18px;
   padding: 10px 20px;
   border-radius: 4px;
   text-align: center;
   text-decoration: none;
   color: var(--white-color);
}

.cta__btn:hover {
   background-color: #ff3e3e;
}

@media screen and (max-height:480px) and (orientation: landscape) {

   .slogan {
      top: 10%;
   }

   .imgLand2 {
      width: 25%;
   }

   .titleLand {
      font-size: 1rem;
   }

   .imgTitle {
      width: 45%;
      margin-top: 0%;
   }


   .iconBanner {
      bottom: 25%;
   }

   .iconBanner__img {
      width: 25%;
   }

   .message {
      bottom: 16%;
   }

   .logoGob {
      top: 10%;
   }

   .cta__btn {
      font-size: 13px;
      padding: 8px 20px;
   }

}

@media screen and (min-height:650px) and (orientation: portrait) {
   .titleLand {
      top: 10%;
   }

   .imgTitle {
      width: 90%;
      margin-top: 16%;
   }
}

@media screen and (min-width:768px) {
   .slogan {
      top: 12%;
      right: 2%;
      display: flex;
      justify-content: end;
   }

   .imgLand2 {
      width: 25%;
   }

   .titleLand {
      top: 6%;
      width: 80%;
      margin: 0% auto;
      font-size: 2.5rem;
   }

   .imgTitle {
      width: 70%;
      top: 80%;
   }

   .otherElements {
      position: absolute;
      right: 8%;
      bottom: 22%;
      left: 0%;
      display: flex;
      justify-content: end;
   }

   .imgTitle2 {
      display: unset;
   }

   .iconBanner {
      bottom: 26%;
   }

   .iconBanner__img {
      width: 40%;
   }

   .logoGob {
      top: 10%;
      left: 5%;
   }

   .logoGob__img {
      width: 18%;
   }

   .cta__btn {
      width: 30%;
   }
}

@media screen and (min-width:1020px) {

   .imgTitle {
      width: 50%;
      margin-top: 2%;
   }

   .iconBanner {
      bottom: 16%;
   }

   .iconBanner__img {
      width: 30%;
   }

   .cta__btn {
      width: 20%;
   }
}

@media screen and (min-width:1320px) {
   .titleLand {
      font-size: 2.5rem;
   }

   .imgTitle {
      width: 45%;
      top: 90%;
   }

   .logoGob {
      right: 0%;
   }
}


/* .info {
   width: 100%;
   height: 100vh;
   position: relative;
}

.imgLand {
   width: 100%;
   height: 100vh;
   object-fit: cover;
}

.slogan {
   position: absolute;
   top: 0px;
   right: 0%;
   left: 0%;
}

.imgLand2 {
   width: 80%;
}

.titleLand {
   position: absolute;
   top: 8%;
   right: 0%;
   left: 0%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   font-family: 'Nanami';
   font-weight: 900;
   text-align: center;
   color: #204498;
}

.imgTitle {
   width: 90%;
   position: absolute;
   top: 110%;
}

.imgTitle2 {
   right: 0%;
}

.iconBanner {
   position: absolute;
   right: 0%;
   bottom: 25%;
   left: 0%;
}

.iconBanner__img {
   width: 80%;
   display: block;
   margin: 0 auto;
}

.logoGob {
   position: absolute;
   top: 5%;
   right: 0%;
   left: 5%;
}

.logoGob__img {
   width: 20%;
}

.message {
   position: absolute;
   display: flex;
   right: 0%;
   bottom: 12%;
   left: 0%;
}

.message__text {
   display: block;
   margin: auto;
   color: #204498;
   text-align: center;
   font-weight: 900;
}

.cta {
   position: absolute;
   right: 0%;
   bottom: 5%;
   left: 0%;

}

.cta__btn {
   display: block;
   width: 50%;
   margin: 0 auto;
   background-color: #ff2222;
   font-size: 18px;
   padding: 10px 20px;
   border-radius: 4px;
   text-align: center;
   text-decoration: none;
   color: var(--white-color);
}

.cta__btn:hover {
   background-color: #ff3e3e;
}

@media screen and (max-height:480px) and (orientation: landscape) {

   .imgLand2 {
      width: 32%;
   }

   .titleLand {
      font-size: 1rem;
   }

   .imgTitle {
      width: 12%;
   }

   .imgTitle2 {
      right: 0%;
   }

   .iconBanner {
      bottom: 35%;
   }

   .iconBanner__img {
      width: 25%;
   }

   .logoGob {
      bottom: 22%;
   }

   .logoGob__img {
      width: 10%;
   }

   .cta__btn {
      font-size: 13px;
      padding: 8px 20px;
   }

}

@media screen and (min-width:768px) {
   .slogan {
      position: absolute;
      top: 0px;
      right: 0%;
      left: 0%;
   }
   .imgLand2 {
      width: 45%;
   }

   .titleLand {
      width: 80%;
      margin: 0% auto;
      font-size: 2.5rem;
   }

   .imgTitle {
      width: 23%;
   }

   .iconBanner {
      bottom: 26%;
   }

   .iconBanner__img {
      width: 40%;
   }

   .logoGob {
      top: 5%;
      left: 5%;
   }

   .logoGob__img {
      width: 25%;
   }

   .cta__btn {
      width: 30%;
   }
}

@media screen and (min-width:1020px) {
   .imgLand2 {
      width: 30%;
   }

   .titleLand {
      font-size: 3rem;
   }

   .imgTitle {
      width: 45%;
   }

   .iconBanner {
      bottom: 16%;
   }

   .iconBanner__img {
      width: 30%;
   }

   .logoGob {
      right: -10%;
   }

   .logoGob__img {
      width: 50%;
   }

   .cta__btn {
      width: 20%;
   }
}

@media screen and (min-width:1320px) {
   .titleLand {
      font-size: 2.5rem;
   }

   .imgTitle {
      width: 40%;
      top: 90%;
   }

   .logoGob {
      right: 0%;
   }

   .logoGob__img {
      width: 60%;
   }
} */

#encuesta:target {
   scroll-margin-top: .6ex;
}

.encuesta {
   width: 100%;
   background-color: var(--gray-color);
   padding: 1.5rem 0rem;
   color: var(--dark-gray-text);
}

.datos {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.datos__label {
   margin: 0.3rem 0rem;
   padding: 0.2rem 0rem;
}

.datos__input {
   margin: 0.3rem 0rem;
   padding: 0.2rem 0.8rem;
}

.datos__ubicacion {
   margin: .5rem 0rem;
}

.ubicacion {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, .2fr));
   align-items: center;
   justify-content: center;
   margin: .5rem 0rem;
}

.ubicacion * {
   width: 95%;
   margin: 10px;
}

.seleccionMix {
   margin: 0%;
   width: 100%;
   display: flex;
   align-items: center;
}

.resetSelect {
   width: 30px;
   height: 24px;
   background-color: transparent;
   border: 1px solid var(--red-error2-color);
   border-radius: 4px;
   color: var(--red-error2-color);
   cursor: pointer;
   font-weight: bold;
}

.resetSelect:hover,
.resetSelect:active {
   background-color: var(--red-error2-color);
   color: var(--white-color);
}

.prioridades {
   display: flex;
   justify-content: center;
   flex-direction: column;
   max-width: 550px;
   margin: 0px auto;
}

.necesidades {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, .2fr));
   align-items: center;
   justify-content: center;
}

.necesidades>div {
   display: flex;
   flex-direction: column;
   margin: 0.2rem;
   margin-bottom: 16px;
   place-self: center;
   position: relative;
}

.texto-restante {
   color: var(--red-error2-color);
}

.restantes {
   position: absolute;
   bottom: -17px;
   right: 0px;
   font-size: 12px;
   font-weight: bolder;
   width: 100%;
   text-align: end;
   border: solid #b4b4b4;
   border-width: 0px 1px 1px 1px;
   border-radius: 0px 0px 4px 4px;
   padding-top: 5px;
}

.potencias {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   flex-direction: column;
}

.potencias>div {
   display: flex;
   flex-direction: column;
   margin: 0.8rem 0rem;
   position: relative;
}

.consideracion {
   max-width: 300px;
   margin: 0 auto;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.encuesta__participante,
.encuesta__prioridades,
.encuesta__necesidades,
.encuesta__potencias {
   padding: 1rem 0rem;
   border-bottom: 1px solid var(--dark-gray-color);
}

input[type='text'],
input[type='email'],
input[type='number'],
select {
   background-color: transparent;
   border: 1px solid var(--dark-gray-color);
   outline-color: var(--blue-color);
   border-radius: 4px;
   padding: 0.2rem;
   width: 100%;
   height: 25px;
}

textarea {
   background-color: transparent;
   border: solid var(--dark-gray-color);
   border-width: 1px 1px 0px 1px;
   outline: none;
   border-radius: 4px 4px 0px 0px;
   padding: 0.2rem;
   min-width: 265px;
   min-height: 90px;
   max-width: 265px;
   max-height: 90px;
}


input[type='checkbox'],
select,
.subTitle {
   cursor: pointer;
}

.subTitle::after {
   content: '';
   position: relative;
   bottom: 0px;
   left: 5px;
   border: solid;
   border-width: 0px 3px 3px 0px;
   width: 8px;
   height: 8px;
   display: inline-block;
   transform: rotate(-45deg);
   transition: all .1s ease;
}

label>input:checked+.subTitle::after {
   transform: rotate(45deg);
}

.enviar__btn {
   margin: 0 auto;
   background-color: var(--blue-btn-color);
   border: none;
   border-radius: 4px;
   cursor: pointer;
   padding: .6rem 1rem;
   color: var(--white-color);
}

.enviar__btn:hover {
   background-color: var(--blue-btn2-color);
}

footer {
   background-color: #202020;
   color: var(--white-color);
   text-align: center;
}

.logoInf {
   padding: .7rem;
}

.logoInf span {
   display: block;
   margin-bottom: .4rem;
   font-weight: bold;
}

.logoInf__img {
   width: 55%;
   display: block;
   margin: 0 auto;
}

@media screen and (min-width:768px) {

   .logoInf__img {
      width: 30%;
   }
}

@media screen and (min-width:1020px) {

   .logoInf__img {
      width: 15%;
   }
}

/* Alert */
.alert {
   position: fixed;
   top: 5px;
   right: 0px;
   z-index: 1;
}

.cardAlert {
   width: 220px;
   padding: 0.5rem 0.8rem;
   color: var(--white-color);
   border-radius: 4px;
   box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, 0.2);
   margin-bottom: 10px;
}

.alert__error {
   background-color: var(--red-error2-color);
}

.alert__success {
   background-color: var(--green-color);
}

/* PopUp */
.popUp {
   position: fixed;
   display: flex;
   top: 0%;
   left: 0%;
   z-index: 10;
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5)
}

.objetivo {
   width: 80%;
   margin: auto;
   background-color: var(--white-color);
   text-align: center;
   padding: 15px 15px 0px;
   border-radius: 5px;
}

.divCerrar {
   display: flex;
   justify-content: center;
   padding: 10px 0px;
}

.cerrarPopUp {
   background-color: transparent;
   border: 1px solid var(--red-error2-color);
   border-radius: 4px;
   padding: 10px 20px;
   cursor: pointer;
   transition: .2s esase;
}

.cerrarPopUp:active {
   background-color: var(--red-error2-color);
   color: var(--white-color);
}

.cerrarPopUp:hover {
   background-color: var(--red-error2-color);
   color: var(--white-color);
}

@media screen and (min-width:768px) {
   .objetivo {
      width: 50%;
      padding: 50px 40px 0px;
      font-size: 1.5rem;
   }

   .divCerrar {
      padding: 15px 0px;
      justify-content: end
   }
}

/* Utilidades */
.container {
   width: 90%;
   max-width: 1200px;
   margin: 0px auto;
}

.d-block {
   display: block;
}

.d-none {
   display: none;
}

.f-bold {
   font-weight: bold;
}

.f-size-m {
   font-size: 1.2rem;
}

.py-05 {
   padding-top: .5rem;
   padding-bottom: .5rem;
}

.py-1 {
   padding-top: 1rem;
   padding-bottom: 1rem;
}

.py-2 {
   padding-top: 2rem;
   padding-bottom: 2rem;
}

.m-1 {
   margin: .5rem;
}

.my-05 {
   margin-top: .5rem;
   margin-bottom: .5rem;
}

.t-center {
   text-align: center;
}

.t-color-red {
   color: var(--red-error2-color);
}

.t-color-red2 {
   color: var(--red-color);
}