@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:wght@100..900&display=swap');

* {
   margin: 0;
   padding: 0px;
   border: 0;  
   font-family: "Work-sans", sans-serif; 
   font-optical-sizing: auto;
}


body {
   margin: 0;
   padding: 0;
   background: url("imagenes/fondo_pagina_web.png");
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

/* barra de navegación*/

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #000;
   position: fixed;
   height: 105px;
   width: 100%;
   z-index: 1;
}

.nav-links {
   list-style: none;
   padding-right: 15%;
   margin: 0;
   display: flex;
   transition: all 0.5s ease;
}

.logo {
   padding-left: 15%;
}

.nav-links a{
   text-decoration: none;
   color: #fff;
   font-size: 15px;
   padding: 16px 32px;
}

.nav-links a:hover{
   color: #81E9AD;
}

.menu-icon{
   display: none;
   flex-direction: column;
   cursor: pointer;
   margin-left: auto;
   position: relative;
   z-index: 1;
}

.menu-icon .line {
   width: 30px;
   height: 3px;
   background-color: #fff;
   margin: 5px 0;
   transition: all 0.3s ease;
}

#menu-toggle {
   display: none;
}

@media(max-width: 800px) {

   .navbar { 
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100vw;
      padding-right: 30px;
      height: 105px;
   }

   .logo {
      padding-left: 10%;
      padding-top: 5%;
   }

   .menu-icon {
      display:flex;
      padding-right: 10%;
      padding-top: 5%;
   }

   .nav-links {
      position: absolute;
      top: 105px;
      width: 100%;
      height: 0;
      padding-top: 32px;
      overflow: hidden;
      flex-direction: column;
      background-color: #000;
      text-align: center;
      transition: height 0.5s ease;
   }

   .nav-links li{
      justify-content: center;
      padding: 20px 0;
      width: 100%;
   }

   .nav-links a {
      font-size: 20px;
      width: 100%;
      padding: 10px 20px;
   }

   #menu-toggle:checked + .menu-icon + .nav-links {
      height: 275px;
   }

   #menu-toggle:checked + .menu-icon .line:nth-child(1) {
      transform: rotate(45deg) translate(15px, 3px);
   }

   #menu-toggle:checked + .menu-icon .line:nth-child(2) {
      transform: scale(0);
   }

   #menu-toggle:checked + .menu-icon .line:nth-child(3) {
      transform: rotate(-45deg) translate(15px, -4px);
   }
}

/* Titular*/

.header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: left;
   height: fit-content;
   background-image: url("imagenes/img-1.svg");
   background-repeat: no-repeat;
   background-size: cover;
   padding-bottom: 15%;
   padding-top: 25vh;
}


.title {
   font-size: 55px;
   font-weight: 550;
   color: #fff;
   padding-bottom: 2%;
   padding-left: 15%;
   width: 35%
}


h2 {
   font-size: 30px;
   font-weight: 300;
   color: #fff;
   padding-bottom: 1%;
   padding-left: 15%;
   width: 35%
}

.btn {
   padding-left: 15%;
}

.btn-a {
   display: inline-block;
   padding: 12px 40px;
   margin-top: 12px;
   margin-bottom: 12px;
   margin-right: 16px;
   color: #fff;
   border: 2px solid #008C50;
   text-decoration: none;
   font-size: 20px;
   background: #008C50;
   border-radius: 10px;
}

.btn-a:hover {
   background: #81E9AD;
   border: 2px solid #81E9AD;
}

.btn-b {
   display: inline-block;
   margin-top: 12px;
   margin-bottom: 12px;
   padding: 12px 40px;
   color: #fff;
   border: 2px solid #008C50;
   text-decoration: none;
   font-size: 20px;
   background: none;
   border-radius: 10px;
}

.btn-b:hover {
   background: #81E9AD;
   color: #fff;
   border: 2px solid #81E9AD;
}

@media(max-width: 800px) {
   
   .header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      height: fit-content;
      padding-top: 100px;
   }

   .title {
      padding-top: 15%;
      padding-left: 10%;
      width: 80%
   }

   h2 {
      font-size: 25px;
      padding: 16px 10%;
      width: 80%;
   }

   .btn {
      justify-content: center;
      padding-left: 10%;
      width: 80%;
   }
}

/* Sección 1*/

.content-info {
   display: flex;
   flex-direction: column;
}

h3 {
   font-size: 35px;
   color: #fff;
   padding-top: 5%;
   padding-bottom: 5%;
   padding-left: 15%;
}

.cards {
   padding-bottom: 5%;
   padding: 0 15%;
}

.ticket {
   display: flex;
   flex-direction: row;
   gap: 16px;
}

p {
   padding-top: 12px;
   padding-bottom: 12px;
   font-size: 18px;
   font-weight: 100;
   color: #fff;
}

.card-a {
   height: 480px;
   padding-bottom: 5%;
}

.card-a .content {  
   display: flex;
   align-items: center;
   height: 480px;
   justify-content: space-between;
   border-radius: 5px;
   background-color: #1E2B30;
   padding: 0;
}

.card-a .content .list {
   display: flex;
   flex-direction: column;
   margin: 5%;
   width: 50%;
   text-align: left;
   color: #fff;
}

.card-a .content .img {
   width: 60%;
   display: flex;
   height: 480px;
   overflow: hidden;
   padding: 0;
   margin: 0;
   text-align: center;
}

.card-b {
   height: 480px;
}

.card-b .content {  
   height: 480px;
   display: flex;
   align-items: center;
   height: 480px;
   justify-content: space-between;
   border-radius: 5px;
   background-color: #1E2B30;
   padding: 0;
}

.card-b .content .list {
   display: flex;
   flex-direction: column;
   margin: 5%;
   width: 50%;
   text-align: left;
   color: #fff;
}

.card-b .content .img {
   height: 480px;
   width: 60%;
   overflow: hidden;
   padding: 0;
   margin: 0;
   background-size: cover;
}


@media(max-width: 800px) {

   h3 {
      font-size: 20px;
      padding-left: 10%;
   }

   .cards {
      padding-bottom: 5%;
      padding: 0 10%;
   }

   .ticket {
      display: flex;
      flex-direction: row;
      gap: 16px;
   }

   p {
      font-size: 15px;
   }

   .card-a {
      height: fit-content;
      padding-bottom: 5%;
      display: flex;
      flex-direction: column;
   }

   .card-a .content {  
      display: flex;
      align-items: center;
      height: fit-content;
   }

   .card-a .content .list {
      display: flex;
      flex-direction: column;
      margin: 5%;
      width: 80%;
   }

   .card-a .content .img {
      width: 100%;
      padding-bottom: 16px;

   }

   .card-b {
      height: fit-content;
      padding-bottom: 5%;
      display: flex;
      flex-direction: column;
   }

   .card-b .content {  
      display: flex;
      align-items: center;
      height: fit-content;
   }

   .card-b .content .list {
      display: flex;
      flex-direction: column;
      margin: 5%;
      width: 80%;
   }

   .card-b .content .img {
      width: 100%;
      padding-top: 16px;

   }

}

/* Sección 2 */

h4 {
   font-size: 27px;
   color: #EF7700;
   padding-top: 16px;
   padding-bottom: 16px;
   font-weight: 400;
}

.content-valores {
   width: 70%;
}

.values {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 70%;
   padding-left: 15%;
   padding-bottom: 3%;
}

.value {
   display:flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   width: 20%;
}

.value-pict {
   width: 226px;
}

.content-valores .btn .btn-a {
   display: flex;
   justify-content: center;
   padding-left: 50%;
}

@media (max-width: 800px) {
   
   h4 {
      font-size: 18px;
   }

   .content-valores {
      padding-bottom: 5%;
   }

   .values {
      width: 80%;
      padding-left: 10%;
   }

   .value {
      display:flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .value-pict {
      width: 100px;
      height: auto;
   }

}

/* Formulario */

.form {
   margin-left: 15%;
   margin-top: 5%;
   padding: 5% 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 70%;
   background-color: #1E2B30;
   border-radius: 5px;
}

.form .text {
   justify-content: left;
   padding-left: 8%;
}

.form .fill {
   display: flex;
   flex-direction: column;
   padding-right: 8%;
   width: 40%;
   padding-top:3%;
}

.form .fill .box {
   height: 32px;
   font-size: 18px;
   border-radius: 3px;
   margin-bottom: 16px;
   outline: none;
   padding: 4px 4px;
}

.form .fill li {
   display: none;
}

h5 {
   color: #fff;
   font-size: 50px;
   font-weight: 550;
}

label {
   color: #fff;
   font-size: 15px;
   font-weight: 100;
   padding-bottom: 8px;
}

.submit {
   display: inline-block;
   padding: 12px 40px;
   margin-bottom: 12px;
   margin-right: 16px;
   color: #fff;
   border: 2px solid #008C50;
   text-decoration: none;
   font-size: 15px;
   background: #008C50;
   border-radius: 8px;
   width: 100%;
}

.submit:hover {
   background: #81E9AD;
   border: 2px solid #81E9AD;
}

input {
   font-size: 15px;
   font-weight: 100;
   color: gray;
}

textarea {
   height: fit-content;
   font-size: 15px;
   font-weight: 100;
   color: gray;
   resize: none;
}

@media (max-width: 800px) {
   
   .form {
      width: 80%;
      margin-left: 10%;
      flex-direction: column;
   }

   .form .fill {
      width: 80%;
      padding-left: 10%;
   }

   .form .fill li {
      display: flex;
   }

   .form .fill .box {
      display: none;
   }
   .form .fill label{
      display: none;
   }

   .submit {
      display: none;
   }
}

@media (max-width: 1280px) {

   h5 {
      color: #fff;
      font-size: 35px;
      font-weight: 550;
   }
}
/* Footer */

.footer .container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 5% 20%;
   margin-top: 10%;
   background-color: #000;
   height: 250px;
}

.footer .container .footer-links {
   display: flex;
   flex-direction: column;
}

.footer .container .footer-links .wsp {
   display: flex;
   flex-direction: row;
   gap: 16px;
}

.footer .container .footer-links .wsp img {
   height: 48px;
   width: auto;
}

.footer .container .footer-links .mail {
   display: flex;
   flex-direction: row;
   gap: 16px;
}

.footer .container .footer-links .mail img {
   height: 48px;
   width: auto;
}

.footer .container .footer-links .insta {
   display: flex;
   flex-direction: row;
   gap: 16px;
}

.footer .container .footer-links .insta img {
   height: 48px;
   width: auto;
}

.footer .container .footer-links .fb {
   display: flex;
   flex-direction: row;
   gap: 16px;
}

.footer .container .footer-links .fb img {
   height: 48px;
   width: auto;
}

.footer .container .footer-links h4 {
   color: #fff
}

@media (max-width: 800px) {


   .footer .container {
      display: flex;
      flex-direction: column-reverse;
      margin-top: 10%;
      height: fit-content;
   }

   .footer .container .footer-links {
      display: flex;
      flex-direction:row;
      flex-wrap: wrap;
      gap: 16px;
      padding-bottom: 10%;
      padding-left: 20%;
   }
   .footer .container .footer-links .wsp p{
      display: none;
   }
   .footer .container .footer-links .mail p {
      display: none;
   }
   .footer .container .footer-links .insta p {
      display: none;
   }
   .footer .container .footer-links .fb p {
      display: none;
   }
   .footer .container .footer-links h4 {
      display: none;
   }
      
   .footer .container .footer-links .wsp img {
      height: 124px;
      width: auto;
   }

   .footer .container .footer-links .mail img {
      height: 124px;
      width: auto;
   }

   .footer .container .footer-links .insta img {
      height: 124px;
      width: auto;
   }

   .footer .container .footer-links .fb img {
      height: 124px;
      width: auto;
   }
}