@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
   --primary-color: #000000;
   --secondary-color: #3f4d63;
   --bg-dark: #202020;
   --hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
   --returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
   --box-blur: blur(10px);
   --box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

* {
   font-family: 'Roboto', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

*>img {
   user-select: none;
   pointer-events: none;
}

html {
   font-size: 62.5%;
   overflow-x: hidden !important;
   scroll-behavior: smooth;
   scroll-padding-top: 6rem;
}

html::-webkit-scrollbar {
   width: 1.5rem;
   border-radius: 50%;
}

html::-webkit-scrollbar-track {
   background-color: transparent;
}

html::-webkit-scrollbar-thumb {
   background-color: var(--secondary-color);
   border-radius: 1rem;
}

.btn {
   margin-top: 1rem;
   display: inline-block;
   background: var(--primary);
   color: var(--white);
   font-size: 2rem;
   cursor: pointer;
   padding: 1rem 3rem;
   border-radius: 2rem;
}

.btn:hover {
   letter-spacing: .2rem;
}

.swal2-cancel {
   font-size: 2rem !important;
}

body.dark {
   background-color: var(--bg-dark);
}

.header {
   position: fixed;
   display: flex;
   width: 100%;
   justify-content: space-between;
   z-index: 999;
   background: rgba(255, 255, 255, 0.541);
   box-shadow: var(--box-shadow);
   backdrop-filter: var(--box-blur);
}

.header.dark {
   background: rgba(32, 32, 32, 0.542);
}

.header.dark .navbar a,
.header.dark .navbar div p,
.header.dark .redes-sociales a {
   color: #fff;
}

.logo {
   margin: 0 2rem;
}

.logo a img {
   width: 25rem;
}

.navbar {
   display: flex;
   gap: 1.5rem;
   align-items: center;
}

.navbar a,
.navbar div p {
   font-size: 2rem;
   font-weight: 800;
   display: inline-block;
   position: relative;
   color: var(--primary-color);
   transition: all .2s ease-out;
   cursor: pointer;
}

.navbar a:hover,
.navbar div p:hover,
.redes-sociales a:hover,
.redes-sociales .icons-theme:hover {
   transition: all .2s ease-out;
   padding-bottom: 1rem;
   color: var(--secondary-color);
}

.navbar a:after,
.navbar div p:after {
   content: '';
   position: absolute;
   left: 0;
   display: inline-block;
   height: 1em;
   width: 100%;
   border-bottom: 1px solid;
   margin-top: 10px;
   opacity: 0;
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   -webkit-transform: scale(0, 1);
   transform: scale(0, 1);
}

.navbar a:hover:after,
.navbar div p:hover:after {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
}

.header .fa-bars {
   font-size: 3rem;
   position: absolute;
   top: 25%;
   right: 5%;
   cursor: pointer;
   display: none;
}

.navbar-movile {
   background-color: rgba(0, 0, 0, 0.83);
   position: fixed;
   z-index: 99;
   width: 100%;
   height: 100%;
   transition: transform .5s;
   transform: translateX(100%)
}

.navbar-movile--show {
   transform: translateX(0%)
}

.navbar-movile .menu {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   text-decoration: none;
}

.navbar-movile .menu a {
   color: #fff;
   font-size: 2.5rem;
   margin-bottom: 5rem;
}

.sobre-nosotros-modal {
   width: auto;
}

.sobre-nosotros-modal .content {
   width: 100%;
   overflow: hidden;
}

.sobre-nosotros-modal .content .title img {
   width: 30rem;
   display: block;
   margin: auto;
   padding-left: 1rem;
}

.sobre-nosotros-modal .content p {
   font-size: 2rem;
   text-align: justify;
   padding: 1rem;
}

.redes-sociales {
   display: flex;
   gap: 1.5rem;
   align-items: center;
   margin: 0 2rem;
}

.redes-sociales a {
   font-size: 2.5rem;
   color: var(--primary-color);
   transition: all .2s ease-out;
}

.redes-sociales .icons-theme img {
   width: 2.5rem;
   display: block;
}

.container-map {
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

#map {
   margin-top: 7%;
   width: 90%;
   height: 80%;
   border-radius: 2rem;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

#map.dark {
   box-shadow: 0 8px 32px 0 rgba(184, 184, 184, 0.37);
}

.container__btn {
   position: absolute;
   background-color: #fff;
   color: var(--primary-color);
   font-size: 2rem;
   padding: 1rem 2rem;
   border-radius: 1rem;
   top: 19%;
   left: 10%;
   cursor: pointer;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   transition: all .5s ease-out;
}

.container__btn:hover {
   box-shadow: 0px 0px 15px 1px rgb(208, 208, 208);
}

.noticias {
   width: 100%;
   margin: 0 auto;
   padding: 5rem 10%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap: 2rem;
}

.noticias.dark .noticias-twitter h2 {
   background: #fff;
   color: #333;
   box-shadow: 0 5px 10px 0 rgba(184, 184, 184, 0.37);
}

.noticias-twitter {
   width: 100%;
   height: 70vh;
   overflow: hidden;
}

.noticias-twitter__post {
   width: 100%;
   height: 100%;
   overflow: auto;
}

.noticias-twitter h2 {
   width: fit-content;
   height: fit-content;
   font-size: 2rem;
   background-color: rgb(44, 44, 44);
   color: #fff;
   border-radius: 1rem;
   padding: 1rem 2rem;
   margin-bottom: 2rem;
   box-shadow: var(--box-shadow);
}

.noticias-twitter i {
   margin-right: 1rem;
   padding: .5rem;
   border-radius: .5rem;
}

.noticias-twitter i {
   background-color: #fff;
   color: rgb(58, 131, 199);
}

.anuncios {
   padding: 5rem 10%;
}

.heading {
   display: flex;
   width: fit-content;
   height: 100%;
   justify-content: start;
   background-color: rgb(44, 44, 44);
   color: #fff;
   border-radius: 1rem;
   padding: 1rem 2rem;
   margin-bottom: 1.5rem;
   box-shadow: var(--box-shadow);
}

.heading .content h3 {
   font-size: 3rem;
}

.heading.dark {
   color: #333;
   background-color: #fff;
   box-shadow: 0 8px 32px 0 rgba(184, 184, 184, 0.37);
}

.swiper {
   width: 100%;
   height: 70vh;
   background: transparent;
}

.swiper.dark .swiper-button-next,
.swiper.dark .swiper-button-prev {
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
}

.swiper-slide {
   width: 100%;
}

img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.swiper-button-next,
.swiper-button-prev {
   background-color: rgb(0, 0, 0);
   height: 4rem;
   width: 4rem;
   font-weight: 800;
   color: #fff;
   border-radius: 50%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
   font-size: 2rem;
}

.swiper-pagination-bullet {
   background-color: rgb(255, 255, 255);
}

.bubble-contact {
   position: fixed;
   right: 2%;
   bottom: 5%;
   z-index: 99;
   background: #000;
   border-radius: 50%;
   box-shadow: var(--box-shadow);
   transition: all .3s ease;
}

.bubble-contact.dark {
   background: #fff;
}

.bubble-contact.dark i {
   color: #000;
}

.bubble-contact:hover {
   bottom: 6%;
   opacity: .9;
}

.bubble-contact i {
   font-size: 2.5rem;
   color: #fff;
   padding: 2rem;
}

.swal2-confirm {
   display: none !important;
}

.swal2-container.swal2-center>.swal2-popup {
   width: 70%;
}

.swal2-title {
   font-size: 3rem !important;
}


.form .inputs,
.form input {
   width: 100%;
   height: 100%;
}

.form label {
   font-size: 2.2rem;
   color: var(--secondary);
   font-weight: 800;
   margin-top: 1.5rem;
   display: flex;
   color: rgb(50, 179, 215);
}

.form input,
.form textarea {
   border-radius: .5rem;
   font-size: 1.7rem;
   padding: .5em;
   margin: .7rem 0;
   border: 1px solid #333;
   min-width: 100%;
   max-width: 100%;
   min-height: 100%;
   max-height: 20rem;
   display: flex;
}

.form button {
   display: inline-block;
   padding: 1rem 2rem;
   margin-top: 1rem;
   font-weight: 400;
   background-color: rgb(27, 27, 27);
   border-radius: .5rem;
   color: #fff;
   font-size: 1.7rem;
   cursor: pointer;
}

.sobre-nosotros {
   width: 80%;
   margin: 5rem auto;
   background-color: rgb(255, 255, 255);
   display: flex;
   flex-direction: column;
   padding: 4rem 2rem;
   border-radius: 1rem;
   justify-content: space-between;
   box-shadow: var(--box-shadow);
}

.sobre-nosotros.dark {
   box-shadow: 0 8px 32px 0 rgba(184, 184, 184, 0.37);
}

.sobre-nosotros .content .title {
   display: flex;
   width: 100%;
   align-items: center;
   gap: 2rem;
}

.sobre-nosotros .content p {
   font-size: 2.5rem;
   text-align: justify;
   padding: 1rem;
}

.footer {
   padding: 5rem 10%;
}

.icons-container,
.footer .redes {
   display: flex;
   gap: 1.5rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   padding-top: 4rem;
}


.icons-container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 1.5rem;
   justify-items: center;
}

.icons-container .icons {
   display: grid;
   gap: 2rem;
   text-align: center;
   color: rgb(0, 0, 0);
}

.icons-container .icons i {
   font-size: 5rem;
}

.icons-container .icons h3 {
   font-size: 2rem;
}

.footer.dark .icons-container .icons,
.footer.dark .redes a {
   color: #fff;
}

.icons-container .icons p {
   font-size: 1.8rem;
}

.footer .redes a {
   font-size: 6rem;
   color: #000;
}

.tuto-index {
   display: none;
   background-color: #fff;
   padding: 20px;
   width: fit-content;
   max-width: 65%;
   line-height: 250%;
   border-radius: 0 1rem 1rem 1rem;
   position: fixed;
   top: 22%;
   left: 23%;
   z-index: 9999999;
   box-shadow: 0px 2px 20px 10px rgba(2, 2, 2, 0.25);
   text-align: center;
}

.tuto-index.active {
   display: block;
}

.tuto-index .flecha {
   width: 30px;
   height: 25px;
   position: absolute;
   left: -20px;
   top: 0%;
   background-color: #fff;
   border-radius: 0 0 0 100%;
}

.tuto-index .tuto-index__texts {
   font-size: 2rem;
   padding: 1rem 0;
}

.tuto-index .tuto-index__btn {
   background-color: var(--bg-dark);
   color: #fff;
   border: none;
   text-align: center;
   padding: 15px 20px;
   cursor: pointer;
   transition: .3s ease all;
   border-radius: 1rem;
   font-size: 2rem;
}

.tuto-index .tuto-index__btn:hover {
   opacity: .8;
}

.fondo-tuto-index {
   display: none;
   background: rgba(0, 0, 0, 0.534);
   position: fixed;
   z-index: 8888888;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
}

.fondo-tuto-index.active {
   display: block;
}

.loader-container {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 99999999;
   background-color: rgba(255, 255, 255);
   display: flex;
   align-items: center;
   justify-content: center;
}

.loader-container.active {
   display: none;
}

.loader-container img {
   height: 20%;
}

.sobre-nosotros .content .title img {
    width: 100%;
    max-width: 50rem;
    display: block;
    margin: auto;
    padding-left: 1rem;
}

@keyframes giro360 {
   0% {}

   100% {
      background-position: 1024px 0;
   }
}

@media (max-width: 1024px) {
   .tuto-index {
      top: 22%;
      left: 30%;
   }
}

@media (max-width:768px) {

   .logo a img {
      width: 18rem;
   }

   .redes-sociales,
   .navbar {
      display: none;
   }

   .header .fa-bars {
      display: block;
   }

   #map {
      margin-top: -5%;
      width: 90%;
      height: 65%;
      border-radius: 2rem;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   }

   .card figcaption {
      bottom: 0;
   }

   .tuto-index {
      top: 30%;
      left: 20%;
   }

   .tuto-index .flecha {
      width: 30px;
      height: 35px;
      top: -20px;
      left: 0%;
      background-color: rgb(255, 255, 255);
      border-radius: 0 100% 0 0;
   }
   
   .sobre-nosotros {
       width: 90%;
       padding: 2rem;
    }
    
    .sobre-nosotros .content p {
        font-size: 1.7rem;
        text-align: center;
        padding: 1rem 0;
    }
    
    .icons-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
      gap: 1.5rem;
      justify-items: center;
   }
}

@media (max-width:425px) {
    
    .heading .content h3 {
        font-size: 2rem;
    }

   .noticias {
      width: 90%;
      margin: 0 auto;
      padding: 0 10% 0 2%;
   }

   .swiper {
      width: 100%;
      height: fit-content;
      background: transparent;
   }

   .swal2-container.swal2-center>.swal2-popup {
      width: 95%;
   }

   .sobre-nosotros-modal .content .title img {
      width: 25rem;
   }
   
   .sobre-nosotros-modal .content p {
      font-size: 1.7rem;
      width: 100%;
   }

}