@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;500;600;700&display=swap");

/*------  
# Root
-----*/

:root {
  --verde-clarito: #a0cc04;
  --azul: #193c4d;
  --azul-clarito: #5591c8;
  --gris: #888887;
  --naranja: #d2a25f;
  --gris-clarito: #c4c4c433;
}

body {
  overflow: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Titillium Web", sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a {
  color: unset;
  text-decoration: none;
}

a:hover {
  color: unset;
  text-decoration: none;
}

span.deco {
  padding-left: 14px;
}

span.bold {
  font-weight: 600;
}

span.deco.azul {
  border-bottom: 2px solid var(--azul);
}

span.deco.verde {
  border-bottom: 2px solid var(--verde-clarito);
}

/*-------------
# Header
-------------*/
#header {
  background: #ffffff;
}

#header #logo img {
  padding: 0;
  margin: 0;
  width: 13vh;
}

/*----------------
# Navigation Menu
  ----------------*/
/* Nav Menu Essentials */
.nav-menu,
.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 180px;
}

/* Nav Meu Container */
#nav-menu-container {
}
@media (min-width: 768px) {
  #nav-menu-container {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0 0;
  }

  #nav-menu-container button {
    display: none;
  }
  #nav-menu-container ul {
    display: block;
  }
}

@media (max-width: 768px) {
  #nav-menu-container ul {
    display: none;
  }
  #nav-menu-container button {
    display: block;
  }
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 8px 8px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  color: #555;
  /* font-family: "Roboto", sans-serif; */
  font-weight: 400;
  font-size: 18px;
  outline: none;
  letter-spacing: 0;
  transition: 0.3s;
}

.nav-menu li:hover > a,
.nav-menu > .menu-active > a {
  color: #021f42;
}

.nav-menu ul {
  margin: 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff;
}

.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 5px 10px;
  color: #333;
  transition: 0.3s;
  display: block;
  font-size: 14px;
  text-transform: none;
}

.nav-menu ul li:hover > a {
  color: #021f42;
}

.nav-menu ul ul {
  margin: 0;
}

div.navbar-tablet-desktop {
  display: none;
}

@media screen and (min-width: 768px) {
  div.navbar {
    display: none;
  }

  div.navbar-tablet-desktop {
    display: block;
  }

  header.header#header div.navbar-tablet-desktop #nav-menu-container-desktop {
    position: absolute;
    top: calc(5vh + 12vh / 2 - 2vh * 2);
    /* Top del logo + width logo logo/2 - padding logo *2 */
    right: 4vh;
  }

  header.header#header
    div.navbar-tablet-desktop
    #nav-menu-container-desktop
    ul
    li
    a {
    font-size: 19px;
    line-height: 31px;
    text-shadow: 0px 1.5px 1.5px black;
    color: #ffffff;
  }

  header.header#header
    div.navbar-tablet-desktop
    #nav-menu-container-desktop
    ul
    li
    a:hover {
    color: var(--verde-clarito);
  }

  div.navbar-tablet-desktop nav#nav-menu-container-desktop ul.nav-menu {
    display: flex;
  }

  div.navbar-tablet-desktop div#logo {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 5vh;
    left: 4vh;
  }
  div.navbar-tablet-desktop div#logo a {
  }

  header.header#header div.navbar-tablet-desktop #nav-menu-container-desktop {
    top: calc(5vh + 18vh / 2 - 2vh * 2);
    /* Top del logo + width logo logo/2 - padding logo *2 */
    right: 4vh;
  }
  #header div.navbar-tablet-desktop div#logo a img {
    padding: 2vh;
    width: 18vh;
    min-width: 100px;
  }
  .nav-menu a {
    padding: 8px 8px 8px 0;
  }
}

@media screen and (min-width: 992px) {
  #header div.navbar-tablet-desktop div#logo a img {
    width: 23vh;
    right: 5vh;
  }
  header.header#header div.navbar-tablet-desktop #nav-menu-container-desktop {
    top: calc(5vh + 23vh / 2 - 2vh * 2);
  }
  .nav-menu a {
    padding: 8px 8px 8px 8px;
  }
  header.header#header
    div.navbar-tablet-desktop
    #nav-menu-container-desktop
    ul
    li
    a {
    font-size: 20px;
    padding: 5px;
  }
}

@media screen and (min-width: 1200px) {
  div.navbar-tablet-desktop div#logo {
    left: 15vh;
  }

  header.header#header div.navbar-tablet-desktop #nav-menu-container-desktop {
    right: 20vh;
  }
}

/*-----------------
# Sidebar
-----------------*/

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #a0cc04bf;

  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.8;
}

.sidebar a {
  padding: 8px 8px 16px 32px;
  text-decoration: none;
  font-size: 23px;
  color: #fdfdfc;
  display: block;
  transition: 0.3s;
  text-shadow: 0px 3px 3px var(--azul);
  line-height: 20px;
  text-align: right;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 36px;
  margin-left: 50px;
}

button.openbtn {
  font-size: 20px;
  cursor: pointer;
  color: var(--verde-clarito);
  border: 1px solid var(--verde-clarito);
  background-color: #ffffff;
  padding: 0px 9px;
}

.openbtn:hover {
  color: var(--verde-clarito);
}

#main {
  transition: margin-left 0.5s;
}

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}

/*-------
# Home
------*/

div.main-image {
  width: 100%;
  height: 30vh;
  background-size: cover;
  background-image: url(../images/Inicio.jpg);
  /* background-attachment: fixed; */
}

div.home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2.5vh 0;
}

div.home .vector-inicio {
  display: flex;
  justify-content: center;
}

div.home .vector-inicio img {
  margin: 0;
  width: 50vw;
  margin-bottom: 2.5vh;
}
div.home div.texto-inicial p {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  color: rgba(100, 100, 100, 1);
}
div.home div.texto-inicial p:first-child {
  margin-bottom: 1.5vh;
}

/*---------- 
# Media queries Home
---------*/

@media screen and (min-width: 550px) {
  div.main-image {
    height: 60vh;
  }
  div.home .vector-inicio img {
    margin: 0;
    width: 30vh;
    margin-bottom: 2.5vh;
  }

  div.home div.texto-inicial p:first-child {
    margin-bottom: 1vh;
  }
  div.home div.texto-inicial p {
    margin: 0;
    font-size: 17px;
    line-height: 25px;
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  div.home {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 5vh 0;
  }
}
@media screen and (min-width: 992px) {
  div.home .vector-inicio img {
    width: 60%;
  }
  div.main-image {
    height: 65vh;
  }
}
@media screen and (min-width: 1200px) {
  div.main-image {
    height: 75vh;
  }

  div.home div.texto-inicial p {
    font-size: 20px;
    line-height: 28px;
  }
}

/*---------- 
# Quienes Somos
---------*/
div.quienes-somos {
  background-color: var(--gris-clarito);
  padding: 2.5vh 0;
}
div.titulo-seccion {
  margin-bottom: 2.5vh;
  font-size: 25px;
  line-height: 38px;
}

h3.seccion-verde {
  color: var(--verde-clarito);
}

div.texto-quienes-somos p {
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 17px;
  text-align: right;
  color: var(--azul);
}

div.texto-quienes-somos p:first-child {
  margin-top: 26px;
}
div.vector-quienes-somos {
  display: flex;
  justify-content: center;
  margin: 2.5vh 0;
}
div.vector-quienes-somos img {
  width: 50vw;
}

div.vector-quienes-somos span.tablet img,
div.vector-quienes-somos span.desktop img {
  display: none;
}

/*---------- 
# Media queries Quienes Somos
---------*/

@media screen and (min-width: 550px) {
  div.texto-quienes-somos p {
    font-size: 17px;
    line-height: 25px;
    padding-left: 10vh;
  }

  div.vector-quienes-somos img {
    display: none;
  }
  div.vector-quienes-somos span.tablet img {
    display: block;
    width: 35vw;
  }
}

@media screen and (min-width: 992px) {
  div.vector-quienes-somos span.tablet img {
    display: none;
  }
  div.vector-quienes-somos span.desktop img {
    display: block;
    padding-top: 3.5vh;
  }
  div.texto-quienes-somos p {
    padding-left: 20vh;
  }
}

@media screen and (min-width: 1200px) {
  div.texto-quienes-somos p {
    font-size: 20px;
    line-height: 28px;
    padding-left: 39vh;
  }
}

/*--------------------------------------------------------------
# Flip card Generals
--------------------------------------------------------------*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 187px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin-bottom: 30px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

  -webkit-box-shadow: 7px 10px 6px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 7px 10px 6px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 7px 10px 6px 0px rgba(0, 0, 0, 0.55);
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: white;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* Style the back side */
.flip-card-back {
  color: white;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);

  display: flex;
  justify-content: center;
  align-items: center;
}

/*---------- 
# Servicios
---------*/
div.servicios {
  padding: 2.5vh 0;
}
div.servicios div.servicio1 div.flip-card-back {
  background-color: var(--azul);
}
div.servicios div.servicio2 div.flip-card-back {
  background-color: var(--verde-clarito);
}
div.servicios div.servicio3 div.flip-card-back {
  background-color: var(--gris);
}
div.servicios div.servicio4 div.flip-card-back {
  background-color: var(--naranja);
}

div.servicios div.servicio5 div.flip-card-back {
  background-color: var(--azul-clarito);
}

div.servicios h3.seccion-azul {
  color: var(--azul);
}

div.servicios div.imagen-servicio img {
  width: 100%;
  object-fit: cover;
  height: 187px;
}

div.servicios div.titulo-servicios {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(92, 92, 92, 0.623);
}

div.servicios h4.titulo-card-servicios {
  font-size: 23px;
  line-height: 38px;
  text-align: center;
  color: white;
  padding: 0 2vw;
}

div.servicios p.texto-card-servicios {
  font-weight: 300;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  color: #ffffff;
  padding: 0 5vw;
  margin: 0;
}

div.card-tablet {
  display: none;
}

div.texto-servicio1,
div.texto-servicio2,
div.texto-servicio3,
div.texto-servicio4,
div.texto-servicio5 {
}

div.servicios div.texto-servicio1 p.texto-card-servicios {
}
div.servicios div.texto-servicio2 p.texto-card-servicios {
  color: var(--azul);
  font-weight: 500;
}
div.servicios div.texto-servicio3 p.texto-card-servicios {
}
div.servicios div.texto-servicio4 p.texto-card-servicios {
}
div.servicios div.texto-servicio5 p.texto-card-servicios {
}

/*---------- 
# Media queries Quienes Somos
---------*/

@media screen and (min-width: 550px) {
  div.card-tablet {
    display: block;
  }
  div.servicios p.texto-card-servicios {
    font-weight: 300;
    font-size: 15px;
    line-height: 19px;
    padding: 0 2vw;
  }
}

@media screen and (min-width: 768px) {
  div.servicios p.texto-card-servicios {
    font-size: 18px;
    line-height: 22px;
  }
}

@media screen and (min-width: 992px) {
  div.card-tablet {
    display: none;
  }

  div.servicios p.texto-card-servicios {
    font-size: 18px;
    line-height: 20px;
  }
}

@media screen and (min-width: 1200px) {
  div.servicios p.texto-card-servicios {
    font-size: 20px;
    line-height: 23px;
  }
}

/*--------- 
# Equipo
---------*/

div.equipo {
  background: var(--azul);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 2.5vh 0;
}

h3.seccion-blanco {
  color: #ffffff;
}

div.persona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
div.persona div.foto {
  background-color: var(--verde-clarito);
  border-radius: 50%;
  padding: 0.75vh;
}
div.persona div.foto img {
  width: 13vh;
  border-radius: 50%;
}
div.persona div.info-de-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
}
div.persona div.info-de-contacto h6 {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  text-align: center;
  margin-top: 0.5vh;
  font-weight: 300;
}

div.persona div.info-de-contacto img {
  width: 3vh;
  margin: 0.75vh 0 2vh 0;
}

/*---------- 
# Media queries Equpo
---------*/

@media screen and (min-width: 550px) {
  div.persona div.foto img {
    width: 19vh;
  }
}

@media screen and (min-width: 768px) {
  div.persona div.info-de-contacto h6 {
    font-size: 17px;
  }
}

@media screen and (min-width: 1200px) {
  div.persona div.info-de-contacto h6 {
    font-size: 20px;
  }
  div.persona div.info-de-contacto h6 {
    margin-top: 1vh;
  }
}

/*---------------- 
# Porque elegirnos
----------------*/

div.porque {
  background-color: var(--gris-clarito);
  padding: 2.5vh 0;
}

div.porque div.porque-dato {
  display: flex;
  padding-bottom: 1vh;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vw;
}

div.porque div.porque-dato:first-child {
  padding-top: 2.5vh;
}

div.porque div.porque-dato:last-child {
  padding-bottom: 2.5vh;
}

div.porque div.porque-dato img {
  width: 8vh;
  margin-right: 3vw;
}

div.porque div.porque-dato p {
  line-height: 17px;
  color: var(--azul);
  text-align: left;
  font-size: 14px;
  margin: 0;
}

/*---------- 
# Media queries Porque elegirnos
---------*/

@media screen and (min-width: 550px) {
  div.porque div.porque-dato img {
    width: 10vh;
  }

  div.porque div.porque-dato p {
    line-height: 20px;
    font-size: 19px;
  }
}

@media screen and (min-width: 768px) {
  div.porque div.porque-dato p {
    font-size: 17px;
  }
}

@media screen and (min-width: 1200px) {
  div.porque div.porque-dato p {
    font-size: 20px;
    line-height: 23px;
  }
  div.porque div.porque-dato img {
    width: 12vh;
    margin-right: 2vh;
  }
}
/*---------------- 
# Nuestros Clientes
----------------*/
div.clientes {
  padding: 2.5vh 0;
}

div.clientes div.titulo-seccion h3 {
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  color: var(--azul);
  font-weight: 600;
}

div.clientes div.logos div.logo {
  margin: 2vh 0;
}

div.clientes div.logos div.logo img {
  width: 22.3vw;
  transition: all 0.4s ease-in-out;
}

div.clientes div.logos div.logo img:hover {
  transform: scale(1.25);
}

@media screen and (min-width: 992px) {
  div.clientes div.logos div.logo img {
    width: 12.5vw;
  }
}

@media screen and (min-width: 1200px) {
  div.clientes div.logos div.logo img {
    width: 8vw;
  }
}

/*---------------- 
# Contacto
----------------*/

div.contacto {
  background-color: var(--verde-clarito);
  padding: 2.5vh 0;
}

div.contacto div.contacto-empresa {
  color: #fcfdfc;
}

div.contacto div.contacto-empresa div.logo-contacto div.contenedor-logo {
  background-color: white;
  border-radius: 50%;
  width: 35%;
  margin-bottom: 2vh;
}

div.contacto div.contacto-empresa div.logo-contacto img {
  width: 100%;
  padding: 15px;
  border-radius: 30%;
}

div.contacto div.contacto-empresa div.datos-contacto a {
  color: #fcfdfc;
}
div.contacto div.contacto-empresa div.datos-contacto a p,
div.contacto div.contacto-empresa div.datos-contacto p {
  font-size: 15px;
  color: #fcfdfc;
}

div.contacto div.mapa iframe {
  width: 70vw;
  height: 25vh;
  padding: 2.5vh 0;
}

/*---------- 
# Media queries Contacto
---------*/

@media screen and (min-width: 550px) {
  div.contacto div.mapa iframe {
    height: 40vh;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  div.contacto div.contacto-empresa div.logo-contacto div.contenedor-logo {
    width: 100%;
    margin-bottom: 0;
  }

  div.contacto div.contacto-empresa div.logo-contacto img {
    width: 35%;
    padding: 25px;
  }

  div.contacto div.contacto-empresa div.logo-contacto img {
    width: 100%;
  }
  div.contacto div.contacto-empresa div.datos-contacto a p,
  div.contacto div.contacto-empresa div.datos-contacto p {
    font-size: 17px;
  }
}

@media screen and (min-width: 1200px) {
  div.contacto div.contacto-empresa div.datos-contacto a p,
  div.contacto div.contacto-empresa div.datos-contacto p {
    font-size: 20px;
  }
}

/*---------------- 
# Footer
----------------*/

footer {
  background-color: var(--azul);
}
footer div.texto-footer {
  font-size: 12px;
  line-height: 10px;
  text-align: center;
  color: #fcfdfc;
}
footer div.texto-footer p {
  padding: 10px 0px;
  margin: 0;
}
footer div.texto-footer p:last-child {
  margin: 0;
}