:root {
 --color-gradeentGreen: #4cca81;
 --color-gradeentBlue: #3498db;
 --color-mainGreen: #aad64b;
 --color-mainBlue: #12141f;
 --color-secondBlue: #0f2649;
 --color-white: #d6dcea;
 --imgEfect-easing: all .5s cubic-bezier(.55, 0, .1, 1)
}

* {
 box-sizing: border-box
}

html,
body {
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 min-height: 100%;
 overflow-x: hidden
}

a {
 cursor: pointer
}

img {
 margin: 0;
 padding: 0
}

.container {
 width: 100%;
 height: 100%;
 background: linear-gradient(0deg, var(--color-mainBlue) 30%, var(--color-gradeentBlue) 60%, var(--color-gradeentGreen) 90%);
 position: relative;
 overflow: hidden
}

.container::before {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
 background-size: 20px 20px;
 pointer-events: none;
 z-index: -1
}

section {
 margin: 0 auto;
 padding: 0 1rem;
 max-width: 66rem
}

.bar {
 position: fixed;
 width: 100%;
 z-index: 1000;
 height: 6.5rem;
 background-color: var(--color-mainBlue);
 color: var(--color-white);
 font-size: 1.2rem;
 font-weight: bold;
 display: flex;
 align-items: end;
 transition: all .5s ease
}

.bar.absolute {
 position: absolute;
 top: 0
}

.section-header {
 width: 100%
}

.data {
 list-style-type: none;
 margin: .5rem auto;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 max-height: 36.5px;
 overflow: hidden;
 overflow-x: auto
}

#localDate {
 min-width: 11rem;
 margin-right: .5rem;
 white-space: nowrap
}

#localWeather {
 margin-left: .5rem;
 border: .2px solid var(--color-mainBlue);
 white-space: nowrap;
 cursor: pointer;
 padding: .2rem
}

#localWeather:hover {
 border-radius: .5rem;
 border: .2px solid var(--color-mainGreen);
 box-shadow: 0 0 10px var(--color-mainGreen);
}

#localWeatherImg {
 margin-left: .2rem;
}

.weatherActive {
 background-color: var(--color-white);
 color: var(--color-mainBlue);
 border-radius: .5rem;
 font-weight: bold
}

.currency {
 margin-left: .5rem;
 position: relative;
 display: flex;
 align-items: center;
 min-width: 10rem;
 justify-content: space-between
}

.flag {
 cursor: pointer
}

.menu-currencyTo {
 display: none;
 margin-top: .5rem;
 position: absolute;
 padding: 0 .5rem .5rem .5rem;
 z-index: 1;
 min-width: 10rem;
 background-color: var(--color-mainBlue);
 border: .5px solid var(--color-mainGreen);
 box-shadow: 0 0 5px var(--color-mainGreen);
 border-radius: 15px;
 justify-content: space-between;
 flex-direction: column
}

.menu-currencyTo div {
 display: flex;
 margin-top: .5rem;
 align-items: center;
 min-width: 10rem;
 justify-content: space-between
}

.menu-currencyTo img {
 aspect-ratio: 27/20
}

.data img,
.data span {
 box-sizing: content-box
}

.weather {
 min-width: 7rem;
 display: flex;
 align-items: center
}

.weather img {
 aspect-ratio: 1/1
}

.localCurrency {
 min-width: 2.2rem
}

.currency img {
 aspect-ratio: 27/20
}

#localtime {
 min-width: 5rem;
 margin-left: .5rem
}

.data::-webkit-scrollbar {
 width: 20%;
 height: 3px
}

.data::-webkit-scrollbar-track {
 background-color: transparent
}

.data::-webkit-scrollbar-thumb {
 background-color: var(--color-gradeentBlue);
 width: 10px;
 height: 10px;
 border-radius: 10px
}

.nevSectionSer {
 margin: 0 auto;
 margin-top: .5rem;
 margin-bottom: .5rem;
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 40px;
 overflow: hidden;
 overflow-x: auto
}

.menuSer {
 display: none;
 background-color: var(--color-mainBlue);
 position: relative;
 margin: 0 auto;
 height: 40px
}

.ulSectionSer {
 list-style-type: none;
 margin: 0 auto;
 display: flex;
 margin-block-start: 0;
 margin-block-end: 0;
 margin-inline-start: 0;
 margin-inline-end: 0;
 padding-inline-start: 0;
 flex-wrap: wrap;
 height: 40px
}

li {
 margin: auto;
 border-radius: .5rem;
 padding: .5rem
}

.aEfect {
 text-decoration: none;
 border-radius: .5rem;
 padding: .5rem;
 color: inherit
}

.aEfect:hover {
 transition: .5s;
 transform: scale(1.1);
 box-shadow: 0 0 5px var(--color-mainGreen);
 text-shadow: 0 0 5px var(--color-mainGreen)
}

.shadow {
 color: var(--color-mainGreen);
 box-shadow: 0 0 5px var(--color-mainGreen);
 text-shadow: 0 0 5px var(--color-mainGreen);
 transition: .5s;
 transform: scale(1.1)
}

.glassEfect {
 color: var(--color-mainBlue);
 background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 outline: 1px solid rgba(255, 255, 255, .18);
 transition: all ease 3s
}

.menu-button {
 font-size: 1rem;
 font-weight: bold;
 background-color: var(--color-mainBlue);
 color: var(--color-white);
 border: transparent;
 cursor: pointer;
 border-radius: .5rem;
 padding: .5rem
}

.dropdown-content {
 display: none;
 position: absolute;
 z-index: 1;
 min-width: 200px;
 background-color: var(--color-mainBlue);
 border: 2px solid var(--color-mainGreen);
 border-radius: 0 15px 15px 15px
}

.dropdown-content a {
 color: var(--color-white);
 padding: 8px 10px;
 text-decoration: none;
 display: block;
 transition: .1s
}

.dropdown-content a:hover {
 color: var(--color-mainGreen);
 box-shadow: 0 0 5px var(--color-mainGreen);
 text-shadow: 0 0 5px var(--color-mainGreen)
}

.dropdown-content #top:hover {
 border-radius: 0 13px 0 0
}

.dropdown-content #bottom:hover {
 border-radius: 0 0 13px 13px
}

.menu-button:hover {
 color: var(--color-mainGreen);
 box-shadow: 0 0 5px var(--color-mainGreen);
 text-shadow: 0 0 5px var(--color-mainGreen);
 transition: .5s;
 border-radius: 1rem 1rem 0 0
}

.progress-bar {
 display: flex;
 position: fixed;
 width: 100%;
 height: .4rem;
 margin-top: .2rem;
 align-items: end
}

.progress {
 width: 0%;
 height: 100%;
 background: linear-gradient(90deg, var(--color-gradeentBlue) 0%, var(--color-gradeentGreen) 40%, var(--color-mainGreen) 70%);
 border-radius: 0 5px 5px 0
}

.progress-underscore {
 width: 1.5rem;
 height: 60%;
 display: inline-block;
 position: relative;
 border-radius: 2px;
 margin-left: 2px;
 animation: parpadeo 1s infinite alternate;
 box-shadow: 0 0 10px var(--color-white)
}

@keyframes parpadeo {
 0% {
  background-color: var(--color-white);
  opacity: 1
 }

 25% {
  background-color: var(--color-mainGreen);
  opacity: .75
 }

 50% {
  background-color: var(--color-gradeentBlue);
  opacity: .5
 }

 75% {
  background-color: var(--color-gradeentGreen);
  opacity: .25
 }

 100% {
  background-color: var(--color-white);
  opacity: 0
 }
}

.main {
 color: var(--color-secondBlue)
}

.section-main-acercaDe {
 margin-top: 1rem
}

section p {
 font-size: 1.3rem;
 width: 100%;
 text-align: left
}

.acercaDe {
 font-size: 1.3rem;
 width: 100%;
 height: auto;
 color: var(--color-white);
 background: var(--color-secondBlue);
 display: flex;
 border-radius: 1rem;
 flex-direction: row;
 justify-content: space-between
}

.acercaDe img {
 width: 62%;
 border-radius: 1rem;
 max-width: 100%;
 height: auto
}

.acercaDe-text {
 width: 48%;
 padding-left: 1rem;
 position: relative
}

.acercaDe-text h1 {
 color: var(--color-gradeentBlue)
}

.linkContacto {
 position: absolute;
 color: var(--color-gradeentBlue);
 bottom: 0
}

.linkContacto-a {
 display: inline-block
}

.linkContacto .bi {
 color: var(--color-gradeentBlue);
 width: 2.5rem;
 height: 2.5rem;
 margin: 1rem 1rem 1rem 0
}

.bi {
 width: 2rem;
 height: 2rem;
 margin: 1rem 1rem 1rem 0
}

.bi:hover {
 transition: .3s;
 transform: scale(1.2);
 text-shadow: 0 0 1rem .5rem var(--color-mainGreen)
}

.bi:active {
 transform: scale(1.1);
 color: var(--color-mainGreen)
}

.acerca-name {
 display: inline-block
}

.acerca-underscore {
 width: 1rem;
 height: .3rem;
 display: inline-block;
 position: relative;
 border-radius: 2px;
 margin-left: 2px;
 animation: parpadeo 1s infinite alternate
}

.section-main-servicios {
 display: flex;
 flex-direction: column
}

summary {
 cursor: pointer
}

.promocion {
 margin-top: 1rem;
 border-radius: .5rem;
 padding: 1rem;
 padding-right: 0;
 background-color: var(--color-secondBlue);
 color: var(--color-mainGreen)
}

.promocion a {
 display: inline-block;
 margin: .5rem;
 width: 2rem
}

.promocion a img {
 width: 100%
}

.promocion a img:hover {
 transform: scale(1.1)
}

.dialog-description::-webkit-scrollbar,
.dialog-title::-webkit-scrollbar,
dialog::-webkit-scrollbar {
 width: 3px
}

.dialog-description::-webkit-scrollbar-track,
.dialog-title::-webkit-scrollbar-track,
dialog::-webkit-scrollbar-track {
 background-color: transparent
}

.dialog-description::-webkit-scrollbar-thumb,
.dialog-title::-webkit-scrollbar-thumb,
dialog::-webkit-scrollbar-thumb {
 background-color: var(--color-gradeentBlue);
 border-radius: 10px
}

.glassEffectDialog {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 outline: 1px solid rgba(255, 255, 255, .18);
 transition: all ease 3s;
 z-index: 1000
}

.dialog {
 position: fixed;
 max-width: 66rem;
 background-color: var(--color-secondBlue);
 color: var(--color-white);
 border: none;
 border-radius: 1rem
}

.dialog-Technologies {
 display: flex;
 width: 100%;
 padding: .5rem 0;
 box-sizing: content-box;
 justify-content: space-around;
 color: var(--color-mainGreen)
}

.goSite {
 width: 2rem;
 text-decoration: none;
 border-radius: .5rem
}

.conteiner-photos {
 width: 100%;
 height: auto;
 margin: auto
}

.cards-photos {
 color: var(--color-mainBlue);
 border-radius: 1rem 1rem 0 0;
 transition: .3s;
 display: flex;
 align-items: flex-end;
 background-color: var(--color-mainGreen)
}

.container-slides-photos {
 max-height: 800px;
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 border-radius: 1rem 1rem 0 0;
 overflow: hidden
}

.cards-slides-photos {
 width: 400%;
 height: 100%;
 padding: 0;
 margin: 0;
 display: flex
}

.cards-section-photos {
 width: calc(100%/4);
 height: 100%;
 padding: 0;
 margin: 0
}

.cards-img-photos {
 width: 100%;
 height: auto;
 object-fit: cover;
 padding: 0;
 margin: 0
}

.details-photos {
 width: 100%;
 display: flex;
 flex-direction: column;
 background: var(--color-secondBlue);
 border-radius: 0 0 1rem 1rem;
 color: var(--color-white)
}

.details-buttons-photos {
 display: flex;
 width: 100%;
 margin: .5rem 0;
 justify-content: space-around
}

.details-buttons-photos button {
 background-color: var(--color-secondBlue);
 border: none;
 margin: 0;
 cursor: pointer;
 padding: 0;
 transition: all .3s ease;
 width: 2rem;
 border-radius: .5rem
}

.details-buttons-photos img {
 width: 100%
}

.details-buttons-photos button:hover,
.goSite-photos:hover {
 transform: scale(1.2)
}

.details-buttonLeft-photos {
 visibility: hidden
}

.last {
 color: var(--color-white)
}

.section-main-tecnologia {
 color: var(--color-white)
}

.section-main-tecnologia img {
 width: 6rem;
 padding: 1rem
}

.section-main-print {
 color: var(--color-white)
}

.conteiner-cardsPrint {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between
}

.conteiner-cardsPrint img {
 width: 30%;
 max-width: 15rem;
 aspect-ratio: 1/1;
 min-width: 15rem;
 border: .5rem solid var(--color-mainGreen);
 border-radius: 1rem;
 margin: 1rem 0
}

.contacto {
 color: var(--color-white)
}

.email {
 border: none;
 background: none;
 padding: 0;
 margin: 0;
 text-decoration: none;
 cursor: pointer
}

.contacto form {
 min-width: 420px;
 display: flex;
 flex-direction: column;
 align-items: center;
 border-radius: 1rem;
 padding: 1rem
}

.contacto input {
 min-width: 404px;
 padding: .5rem;
 margin: .5rem 0;
 border-radius: .25rem;
 outline: none;
 border: none
}

.contacto textarea {
 min-width: 404px;
 height: 6rem;
 padding: .5rem;
 margin: .5rem 0;
 border-radius: .25rem;
 outline: none;
 border: none;
 resize: none;
 overflow-y: auto
}

.submit {
 width: 30%;
 padding: .5rem;
 margin: .5rem 0;
 border-radius: .25rem;
 outline: none;
 border: none;
 cursor: pointer
}

.submit:hover {
 background-color: var(--color-mainGreen)
}

#creditosPrint {
 color: var(--color-white);
 margin-top: 6rem
}

.aCreditos {
 width: 7rem;
 height: auto;
 margin: 1.5rem;
 padding: 2px;
 border-radius: .2rem;
 background-color: var(--color-white);
 display: inline-block
}

.aCreditos img {
 width: 100%;
 height: auto;
 display: block
}

.none {
 display: none
}

@media screen and (max-width:1000px) {
 .acercaDe-text {
  font-size: 1.1rem
 }

 .acercaDe-text p {
  font-size: 1.1rem
 }
}

@media screen and (max-width:880px) {
 .section-headder {
  padding: 0 .5rem
 }

 .acercaDe-text,
 .acercaDe-text p,
 .bar {
  font-size: 1rem
 }

 .acercaDe-text ul {
  margin: .5rem 0;
  font-size: .8rem
 }

 .linkContacto .bi {
  width: 1.5rem;
  height: 1.5rem
 }

 #localDate {
  min-width: 11rem
 }

 .weather {
  min-width: 6rem;
  display: flex;
  align-items: center
 }

 #localtime {
  min-width: 4rem
 }
}

@media screen and (max-width:740px) {
 .acercaDe {
  display: block;
  height: 100%
 }

 .acercaDe img {
  width: 100%;
  height: auto
 }

 .acercaDe-text {
  font-size: 1.3rem;
  width: 95%;
  padding: .5rem;
  position: static
 }

 .acercaDe-text p {
  font-size: 1.3rem
 }

 .acercaDe-text ul {
  font-size: 1rem
 }

 .linkContacto {
  position: static;
  bottom: auto
 }

 .linkContacto .bi {
  width: 2.5rem;
  height: 2.5rem
 }

 .dialog {
  max-height: 90%
 }
}

@media screen and (max-width:560px) {
 #localtime {
  display: none
 }

 .data {
  margin: .5rem 1rem .5rem 0;
  justify-content: flex-start
 }

 .conteiner-cardsPrint {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center
 }

 .conteiner-cardsPrint img {
  width: 100%;
  max-width: 18rem;
  min-width: 15rem;
  border: .5rem solid var(--color-mainGreen);
  border-radius: 1rem;
  margin: 1rem 0
 }
}

@media screen and (max-width:500px) {
 .section-main-acercaDe {
  margin-top: 1rem
 }

 .linkContacto .bi {
  width: 2rem;
  height: 2rem
 }

 .contacto form {
  min-width: 320px;
  padding: 1rem 0
 }

 .contacto input {
  min-width: 304px
 }

 .contacto textarea {
  min-width: 304px
 }

 .submit {
  width: 50%
 }
}

@media screen and (max-height:670px) {
 .container-slides-photos {
  max-height: 560px
 }

}

@media screen and (max-height:550px) {
 .container-slides-photos {
  max-height: 500px
 }
}