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

:root {
   font-size: 62.5%;
   --ff-primary: "Helvetica", sans-serif;
   --ff-secondary: 'Staatliches', sans-serif;
   --ff-others: 'Nunito', sans-serif;
   --ff-second_page: 'Roboto', sans-serif;
   --buttonWidth: 1.9rem;
   --brightness-img: 0.7;
}

html {
   scroll-behavior: smooth;
}

body {
   font-size: 1.6rem;
   font-family: var(--ff-primary);

   overflow-x: hidden;
   cursor: default;
}

#app {
   display: flex;
   flex-direction: column;
   gap: 8rem;

   max-width: 192.0rem;
   margin: auto;
}

.bg_lp_page::before {
   content: "";
   background: url("../img/infra_ti_invertido.png")center right/cover no-repeat;

   width: 100%;
   height: 100%;

   position: absolute;
   z-index: -1;
}

.bg_lp_page {
   background: linear-gradient(135deg, rgba(4, 6, 57, 0.7287289915966386) 50%, rgba(150, 152, 255, 0.5130427170868348) 100%, rgba(255, 255, 255, 0) 100%);
   position: relative;

   width: 100%;
   /* height: 100vh; */
}

.lp_page {
   display: flex;
   flex-direction: column;

   max-width: 128.0rem;
   padding: 5.0rem 10rem 5.0rem 5.0rem;
   margin: auto;
}

header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3rem;
   width: 56.3rem;

   animation: shine 800ms 250ms backwards;
}

header p {
   color: white;
   font-weight: bold;
   font-size: 7.0rem;
   display: grid;
}

header p strong {
   font-size: 3rem;
   letter-spacing: 0.9rem;
}

header img {
   height: 13rem;
}

.form-wrapper {
   display: flex;
   justify-content: space-between;
   gap: 5rem;
}

.form-wrapper section {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 5rem;
}

.form-wrapper section h1 {
   color: white;
   font-size: 3.7rem;
   text-transform: uppercase;
   text-align: end;

   width: 56.3rem;
   margin-top: 8rem;
   padding: 2rem;

   animation: leftRight 500ms 500ms backwards;
}

.form-wrapper section p {
   color: white;
   font-size: 1.74rem;
   transition: transform 300ms;
   padding: 2rem;
   width: 56.3rem;

   animation: rightLeft 500ms 1000ms backwards;
}

.form-wrapper section p:hover {
   transform: scale(1.1);
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 0.5rem;
}

.form-wrapper section p span, .form-wrapper section p strong {
   font-weight: bold;
   color: #FFFFFF;
   text-shadow: 0 0 10px #dfdb00;
}

aside {
   border-radius: 1rem;
   background-color: rgba(255, 255, 255);
   font-family: var(--ff-others);
   animation: rightLeftForm 800ms 1000ms backwards;
}

aside form {
   padding: 3rem 4rem 3rem;
}

.fieldset-wrapper {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.fieldset-wrapper fieldset {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.fieldset-wrapper fieldset fieldset legend {
   margin-bottom: 2rem;
   font-size: 1.8rem;
}

.fieldset-wrapper>input {
   font-size: 2rem;
   font-family: var(--ff-others);
   text-transform: uppercase;
   font-weight: bold;
   color: white;
   background-color: rgb(77, 201, 77);
   cursor: pointer;

   padding: 1.9rem;
   border-radius: 1rem;
}

.fieldset-wrapper>input:hover {
   transform: scale(1.05);
   background-color: rgb(3, 180, 3);
}

.fieldset-legend {
   line-height: 2.5rem;
   background-color: rgba(173, 216, 230, 0.534);
   border-radius: 1rem 1rem 0 0;
   color: rgb(3, 3, 139);
   font-size: 2.5rem;
   font-weight: 800;
   text-align: center;

   padding: 3rem 4rem;
}

.input-wrapper {
   display: grid;
   gap: 0.8rem;
}

.input-wrapper label {
   color: #4E4958;
   font-size: 1.8rem;
   display: flex;
   align-items: center;
}

.input-wrapper label span, legend span {
   margin-left: 0.8rem;
   font-size: 1.2rem;
   line-height: 2.0rem;
   color: #a6a2af;
}

label span:hover, legend span:hover {
   color: #4E4958;
}

.input-wrapper input {
   background: #FAFAFC;
   font-size: 1.8rem;
   border: 1px solid #E6E6F0;
   border-radius: 0.8rem;
   height: 4.2rem;
   padding: 0 1.5rem;
}

.input-wrapper-checkbox {
   display: grid;
   grid-template-areas: "Sup Bac""Ser Ema";
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 1.5rem;
}

.checkbox-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 2rem;
   background-color: rgb(2, 2, 88);
   border-radius: 0.8rem;

   position: relative;
}

.checkbox-wrapper:hover {
   transform: scale(1.05);
}

.sr-only {
   position: absolute;
   width: 0px;
   height: 0px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
   top: 0;
   right: 0;
}

.checkbox-wrapper p {
   color: white;
   font-weight: bold;
   user-select: none;
}

.checkbox-wrapper p::before {
   content: "";
   background-color: white;
   border: .3rem solid white;
   border-radius: 100%;
   position: absolute;
   top: 0.6rem;
   left: 0.6rem;

   width: .8rem;
   height: .8rem;
}

.checkbox-wrapper input:checked+p::before {
   background-color: black;
}

.checkbox-wrapper input:focus+p::before {
   outline: 2px solid rgb(3, 180, 3);
}

/* Video PAGE */

main {
   font-family: var(--ff-second_page);
   text-align: center;

   width: 100%;
   max-width: 128rem;
   margin: auto;
}

main section {
   display: flex;
   flex-direction: column;
   text-align: center;
   gap: 5rem;

   max-width: 128rem;
   padding: 5rem;
   margin: auto;
}

main h2 {
   display: inline-block;
   font-weight: bold;
   font-size: 4rem;

   border-bottom: 2px solid black;
   margin-bottom: 8rem;
}

main .carousel .partner-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 8rem;
}


main .carousel .partner-wrapper .logo-wrapper {
   width: 32rem;
   height: 15rem;
   margin: auto;
}

main .carousel .partner-wrapper .logo-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 2rem;
}

main .carousel .partner-wrapper .comment-wrapper .video-wrapper {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
}

main>input {
   font-size: 2rem;
   font-family: var(--ff-others);
   text-transform: uppercase;
   font-weight: bold;
   color: white;
   background-color: rgb(77, 201, 77);
   cursor: pointer;

   width: 100%;
   padding: 1.9rem;
   border-radius: 1rem;
   margin-top: 5rem;
}

main>input:hover {
   transform: scale(1.05);
   background-color: rgb(3, 180, 3);
}

.slick-slider .slick-track, .slick-slider .slick-list {
   width: 90%;
   margin: auto;
}

.slick-arrow {
   width: 5rem;
   height: 5rem;
}

.slick-next, .slick-prev {
   top: 12%;
}

.slick-next {
   right: 0;
}

.slick-prev {
   left: 0;
}

.slick-prev:before, .slick-next:before {
   font-size: 5rem;
   line-height: 1;

   opacity: .75;
   color: black;

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

footer {
   background-color: #F6F6F6;
   position: relative;
   width: 100%;
   padding-bottom: 8rem;
}

footer .page {
   display: flex;
   flex-direction: column;

   max-width: 128rem;
   width: 100%;
   margin: auto;
}

footer .page .map-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;

   padding: 0 5rem;
}

footer .page .map-wrapper>h2 strong {
   display: inline-block;
   font-size: 4rem;

   border-bottom: 2px solid black;
   margin: 8rem 0;
}

footer .page .map-wrapper .map {
   border: 2px solid rgba(0, 0, 0, 0.404);
   border-radius: 1rem;
   overflow: hidden;
   width: 100%;
}

footer .page .map-wrapper .map iframe {
   width: 100%;
   height: 40rem;
}

footer .page .contact-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
}

footer .page .contact-wrapper>h2 strong {
   display: inline-block;
   font-size: 4rem;

   border-bottom: 2px solid black;
   margin: 8rem 0;
}

footer .page .contact-wrapper .info-wrapper {
   display: flex;
   gap: 8rem;
}

footer .page .contact-wrapper .info-wrapper .info {
   display: flex;
   flex-direction: column;
   align-items: center;
}

footer .page .contact-wrapper .info-wrapper .info>h3 {
   font-size: 3rem;
   margin: 1.5rem 0;
}

footer .page .contact-wrapper .info-wrapper .info ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: center;
}

footer .page .contact-wrapper .info-wrapper .info ul li {
   font-size: 2.4rem;
}

footer .page .contact-wrapper .info-wrapper .info ul li>a {
   text-decoration: none;
   color: black;
}

footer .page .contact-wrapper .info-wrapper .info ul li>a button {
   font-size: 2rem;
   font-weight: bold;
   text-transform: uppercase;
   cursor: pointer;

   padding: 2rem;
   border-radius: 1rem;
   background-color: #dfdb00;
}

footer .page .contact-wrapper .info-wrapper .info ul li>a button:hover {
   transform: scale(1.05);
}

footer .page .contact-wrapper .info-wrapper .info ul li>input {
   font-size: 2rem;
   font-family: var(--ff-others);
   text-transform: uppercase;
   font-weight: bold;
   color: white;
   background-color: rgb(77, 201, 77);
   cursor: pointer;

   width: 100%;
   padding: 2rem;
   border-radius: 1rem;
   margin-top: 7.5rem;
}

footer .page .contact-wrapper .info-wrapper .info ul li>input:hover {
   transform: scale(1.05);
   background-color: rgb(3, 180, 3);
}

footer .status-wrapper.hide {
   display: none;
}

footer .status-wrapper {
   background-color: rgba(0, 0, 0, 0.40);
   display: flex;
   position: fixed;
   
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   z-index: 99;
   width: 100vw;
   height: 100vh;
}

footer .status {
   background-color: rgb(230, 228, 228);
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
   justify-content: center;

   gap: 1.8rem;
   width: 80%;
   border-radius: 0.8rem;
   padding: 5rem;
   background-color: white;
}

footer .status img {
   width: 4rem;
   height: 4rem;
}

/* WhatsApp Layout */

footer .whatsapp-wrapper {
   position: fixed;
   right: 1rem;
   bottom: 1rem;
}

footer .whatsapp-wrapper a img {
   animation: rightLeftForm 800ms 1200ms backwards;

   width: 8rem;
   height: 8rem;
}

footer .whatsapp-wrapper a img.shake-off {
   animation: none;
}

footer .whatsapp-wrapper a img.shake-on {
   animation: shake 200ms backwards;
}

@keyframes leftRight {
   0% {
      opacity: 0;
      transform: translateX(-5rem);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes rightLeft {
   0% {
      opacity: 0;
      transform: translateX(+5rem);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes rightLeftForm {
   0% {
      opacity: 0;
      transform: translateX(+50rem);
   }

   30% {
      opacity: 1;
      transform: translateX(-7rem);
   }

   60% {
      transform: translateX(+4rem);
   }

   100% {
      transform: translateX(0);
   }
}

@keyframes shine {
   0% {
      transform: scale(1);
      opacity: 0;
   }

   50% {
      transform: scale(1.2);
      opacity: 1;
   }

   100% {
      transform: scale(1);
   }
}

@keyframes shake {
   0% {
      transform: translateX(0rem);
   }

   25% {
      transform: translateX(1rem);
   }

   50% {
      transform: translateX(-1rem);
   }

   75% {
      transform: translateX(1rem);
   }

   100% {
      transform: translateX(0);
   }
}

@media (max-width:1150px) {
   :root {
      font-size: 55%;
   }
}

@media (max-width:1024px) {
   header {
      width: 100%;
   }

   .lp_page {
      padding: 5rem;
   }

   .form-wrapper {
      flex-direction: column;
      align-items: center;
   }

   aside {
      max-width: 51rem;
   }

   .info-wrapper {
      flex-direction: column;
   }

}

@media (max-width:550px) {
   :root {
      font-size: 45%;
   }

   header {
      flex-direction: column;
   }

   .form-wrapper section h1 {
      text-align: center;
      font-size: 3.3rem;
      width: 100%;
   }

   .form-wrapper section p {
      font-size: 2.1rem;
      width: 100%;
      text-align: justify;
   }
}

@media (min-width:1921px) {
   footer .whatsapp-wrapper {
      position: absolute;
   }
}