@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');


:root {
  --bg-color-primary: #101F2F;
  --bg-color-secundary: #F2CCB3;
  --bg-color-secundary-light: #F2E5E1;
  --bg-color-backdrop-primary: #2d38448c;
  --bg-color-backdrop-secundary: #f2e5e15a;


  --color-primary: #101F2F;
  --color-secundary: #F2CCB3;
  --color-secundary-light: #F2E5E1;
  --color-backdrop-secundary: #f2e5e15a;
  --color-primary-light: #1a2b3ea1;

  --font-primary: "Red Hat Display", sans-serif;
  --font-secundary: "Prata", serif;
}

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

.card-img-top {
  width: 100% !important; /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
  height: 250px !important; /* Define una altura fija para todas las imágenes */
  object-fit: cover !important; /* Mantiene el aspecto de la imagen y recorta el exceso */
}

.cPortada{
  padding-top: 200px;
  background-color: var(--bg-color-secundary-light);
}

.containerTxtMain{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.txtSection1 p:nth-child(1){
  font-size: 4vw;
  margin: 0;
  color: var(--bg-color-primary);
}

.txtSection1 p:nth-child(2){
  font-size: 9vw;
  line-height: 0.5;
  margin-bottom: 80px;
  font-weight: 600;
  color: var(--bg-color-primary);
}

.txtSection2{
  text-align: right;
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.containerImgs{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.containerImgs img{
  max-width: 30%;
  height: auto;
  object-fit: cover;
}

.containerImgs img:nth-last-child(1), .containerImgs img:nth-last-child(3){
  width: 300px;
}

.containerImgs img:nth-last-child(2){
  width: 400px;
}

.bt-light-s{
  border-top: solid 1px #60606043;
}

.bt-light-p{
  border-top: solid 1px #f2f2f229;
}

.bb-light-p{
  border-bottom: solid 1px #f2f2f229;
}

.modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background: black;
  justify-content: center;
  align-items: center;
}

.verImg {
  display: none; /* Ocultar el modal por defecto */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-contenido {
  max-width: 80%;
  max-height: 80%;
  transition: transform 0.2s ease; /* Transición suave para el zoom */
}

.modal-contenido:hover {
  transform: scale(1.2); /* Aumenta la escala al pasar el cursor */
}

.cerrar {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.cerrar:hover,
.cerrar:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

a .iconoC{
  font-size: 17px;
    padding-right: 10px;
    padding-left: 0px;
    transition: 0.5s;
    margin-left: 15px;
    vertical-align: middle;
}

a:hover .iconoC{
  font-size: 17px;
  padding-left: 10px;
  padding-right: 0px;
  transition: 0.5s;
}

.verImg {
  display: none; /* Ocultar el modal por defecto */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-contenido {
  max-width: 80%;
  max-height: 80%;
  transition: transform 0.2s ease; /* Transición suave para el zoom */
}

.modal-contenido:hover {
  transform: scale(1.2); /* Aumenta la escala al pasar el cursor */
}

.cerrar {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.cerrar:hover,
.cerrar:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

body{
  font-style: normal;
  font-family: "Red Hat Display", sans-serif;
  background-color: var(--bg-color-secundary-light);
}

.containerFlexRow, .containerMenu{
  width: 100%;
    flex-direction: row;
    padding: 20px;
    justify-content: space-between;
    display: flex;
    margin-right: auto;
    margin-left: auto;
}

.containerFlexColumn{
  width: 100%;
    flex-direction: column;
    padding: 20px;
    justify-content: space-between;
    display: flex;
    margin-right: auto;
    margin-left: auto;
}

.miDiv{
  display: none;
  transition: 3s;
}

.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
}

.custom-navbar-brand {
  color: white;
  text-decoration: none;
  font-size: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.custom-navbar-nav {
  display: flex;
  list-style: none;
  margin-left: auto;
  transition: max-height 0.3s ease-out; /* Transición para la altura del menú */
  max-height: 100%; /* Altura máxima del menú en pantallas grandes */
  overflow: hidden; /* Oculta el contenido que desborda */
}

.custom-nav-item {
  margin-left: 20px;
}

.custom-nav-link {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.custom-menu-toggle {
  display: none; /* Oculta el botón de menú en pantallas grandes */
}

.custom-navbar .left {
  display: flex;
  align-items: center;
}

.custom-navbar .left button {
  color: white;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
}

@media (max-width: 768px) {

  .row{
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .custom-menu-toggle {
    display: block; /* Muestra el botón de menú en pantallas pequeñas */
  }

  .custom-navbar-nav {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333;
    text-align: center;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1; /* Asegura que el menú desplegado esté por encima del contenido */
    max-height: 0; /* Altura inicial del menú */
    transition: max-height 0.3s ease-in-out; /* Transición suave de altura */
  }

  .custom-navbar-nav.active {
    max-height: 500px; /* Altura máxima para mostrar todos los elementos */
  }

  .custom-nav-item {
    margin: 10px 0;
  }

  .custom-navbar-brand {
    position: relative;
    transform: none;
    left: auto;
    margin-bottom: 10px;
  }

  .custom-navbar .left {
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
  }

  .custom-navbar-nav {
    margin: 0;
  }

  .custom-navbar .left button {
    display: block;
  }
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  flex-direction: column;
  overflow: hidden;
  }

  .contentPortada {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 100px;
    max-width: 500px;
  }

.title_c {
  color: #5E6873;
    font-size: 100px;
    line-height: 1;
    position: relative;
    top: 45px;
    display: flex;
    justify-content: center;
    font-family: var(--font-secundary)
}

.title_c span{
  font-style: italic;
  color: var(--color-primary);
    font-size: 100px;
    line-height: 1;
    top: 45px;
    display: flex;
    justify-content: center;
    font-family: var(--font-secundary)
}

.image {
width: 100%;
height: auto;
position: relative;
}

.bottom-paragraph {
  font-size: 9vw;
  line-height: 1;
  display: flex;
  justify-content: center;
  position: relative;
  top: -1000px;
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-primary)
}

.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
}
.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.item2 { grid-column: 3 / span 1; grid-row: 1 / span 1; }
.item3 { grid-column: 4 / span 1; grid-row: 1 / span 1; }
.item4 { grid-column: 3 / span 2; grid-row: 2 / span 1; }
.item5 { grid-column: 1 / span 1; grid-row: 3 / span 1; }
.item6 { grid-column: 2 / span 1; grid-row: 3 / span 1; }
.item7 { grid-column: 3 / span 2; grid-row: 3 / span 1; }

@media (max-width: 768px) {
  .collage {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(7, 150px);
  }
  .item1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .item2 { grid-column: 1 / span 1; grid-row: 3 / span 1; }
  .item3 { grid-column: 2 / span 1; grid-row: 3 / span 1; }
  .item4 { grid-column: 1 / span 2; grid-row: 4 / span 1; }
  .item5 { grid-column: 1 / span 1; grid-row: 5 / span 1; }
  .item6 { grid-column: 2 / span 1; grid-row: 5 / span 1; }
  .item7 { grid-column: 1 / span 2; grid-row: 6 / span 1; }
}

.bgBackdropPrimary{
  background: var(--bg-color-backdrop-primary);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
}

.bgBackdropSecundary{
  background: var(--bg-color-backdrop-secundary);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
}

.colorBackdropSecundary{
  color: var(--color-backdrop-secundary);
}

#menuResponsive{
  display: none;
}

.comprimidoresponsive{
  width: 50%;
}

.vandm{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.vandm div{
  background: #fff;
border-radius: 20px;
padding: 20px;
width: 47%;
}

.vandm div:hover{
  background-color: var(--bg-color-secundary);
}

.moverScroll{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 20px;
}

.moverScroll a img{
  width: 1rem;
  }

.moverScroll a{
  background: #1A2B3EA8;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  font-size: 16px;
}

.moverScroll a:hover{
  background: var(--bg-color-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

/* Estilos para el dropdown */
.dropdown {
  position: relative;
}

.dropbtn {
  cursor: pointer;
  color: #fff;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* Ajusta la posición vertical del dropdown */
  left: 0;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Mostrar el dropdown cuando se pasa el mouse por encima */
.dropdown:hover .dropdown-content {
  display: block;
}



#containerA {
overflow-x: scroll;
white-space: nowrap;
height: 100%;
margin-top: 10px;
width: 100%;
margin-top: 130px;
padding: 0px 120px;
}

#containerA h1{
  color: var(--color-primary);
  margin: 0;
  font-weight: 500;
  white-space: break-spaces;
}

#containerA p{
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 500;
  padding-bottom: 10px;
  white-space: break-spaces;
}
#image-container {
  width: 100%;
  height: 80vh;
  overflow-x: auto;
  scroll-behavior: smooth;
}
#image-container img {
  display: inline-table;
  margin-right: 10px;
  width: 500px;
  height: 60vh;
  object-fit: cover;
  max-width: 100%;
  border-radius: 5px;
}

.filter-buttons button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: #1a2b3ec2;
  padding: 10px 20px;
  color: #f2f2f2;
  font-size: 1rem;
  border-radius: 5px;
}

.activeButton {
  background: var(--bg-color-primary) !important;
}

button span {
  position: relative;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.previousA:hover span {
  transform: translateX(-10px) scale(1.2);
}

.nextA:hover span {
  transform: translateX(10px) scale(1.2);
}

.slider-navA ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.slider-navA li {
  display: flex;
  flex: 2;
  text-align: center;
}

.imach {
  max-width: 100%;
  display: none;
  box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
  border-radius: 20px;
}

.imach.activeA {
  display: block;
  animation: fadeImg 0.8s;
  padding-bottom: 20px;
  height: 70vh;
}

.slider-navA .arrowA {
  flex: 0 0 15%;
}

.slider-navA a {
  flex-basis: 100%;
  display: flex;
  align-items: center;
}

.slider-navA span {
  display: block;
  width: 100%;
}

@keyframes fadeImg {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

			    /* Estilos para el div que se muestra al presionar el botón */
          .mi-div {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            opacity: 0;
            transition: opacity 0.5s ease, height 0.5s ease;
            z-index: 2;
            -webkit-backdrop-filter: saturate(100%) blur(20px);
            backdrop-filter: saturate(10%) blur(20px);
            transition: background-color .6s cubic-bezier(.19,1,.22,1);
            transition: all 3s ease 0s;
            background: var(--bg-color-secundary-light);
          }

          .divIdiomas{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease, height 0.5s ease;
            z-index: 2;
            transition: background-color .6s cubic-bezier(.19,1,.22,1);
            transition: all 1s ease 0s;
            height: 50%;
            width: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            max-width: 30%;
          }

          .galeriaResponsive {
            width: 100%;
            padding: 100px 50px 100px 50px;
            text-decoration: none;
          }
              .menuContent{
                display: flex;
                flex-direction: row;
                justify-content: end;
                padding-top: 10px;
                -webkit-backdrop-filter: saturate(100%) blur(20px);
                transition: background-color .6s cubic-bezier(.19,1,.22,1);
                transition: all 1s ease 0s;
                width: 100%;
                }

          #menuResponsive {
            width: 100%;
            margin: 70px 0 0;
            text-decoration: none;
            flex-direction: column;
            justify-content: revert-layer;
            transition: opacity 0.5s ease, height 0.5s ease;
            -webkit-backdrop-filter: saturate(100%) blur(20px);
            transition: background-color .6s cubic-bezier(.19,1,.22,1);
            transition: all 1s ease 0s;
            text-align: left;
                  }
          
          #menuResponsive a{
            text-decoration: none;
            color: #1B2B3E99;
            font-size: 2rem;
            line-height: 1.1;
            font-weight: 500;
            padding-bottom: 20px;
            text-transform: uppercase;
          }
          
          #menuResponsive a.active{
            color: var(--color-primary);
          }
          
          #menuResponsive a:hover{
            text-decoration: none;
            color: var(--color-primary);
          }

          .btnMenu {
            display: none;
            justify-content: center;
            align-items: center;
        }
        
        .btnMenuGaleria img, .btnMenu img  {
          max-width: 20px;
          max-height: 20px;
          cursor: pointer;
        }

        .btnMenuGaleria{
          display: flex;
          justify-content: center;
          align-items: center;
        }

.opIdiomas{
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.opIdiomas a{
  width: 100%;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
    vertical-align: middle;
    display: flex;
    color: #F2E5E1;
    cursor: pointer;
    text-decoration: none;
}

.opIdiomas a:hover{
    background: #f0f8ff3b;
    color: #002E33;
    text-decoration: none;
}

.activeIdioma{
  outline: none;
  background: #1a2b3e;
}
.opIdiomas a img{
  width: 2rem;
padding: 3px;
margin-right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}

.btnCerrarModal{
  cursor: pointer;
  display: block;
}

.btnCerrarModal img{
  width: 30px;
}

.encabezadoModal{
  display: flex;
  width: 100%;
  padding: 0px 20px;
  color: #f2e5e1;
}

.encabezadoModal .em1{
  width: 50%;
  text-align: left;
}

.encabezadoModal .em1 h1{
    font-size: 1.5rem;
    font-weight: 600;
}

.encabezadoModal .em2{
  width: 50%;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btnCerrarGaleria{
  cursor: pointer;
  display: flex;
}

.btnCerrarGaleria img{
  width: 30px;
}

.elemento-mostrar {
  position: relative;
  right: -50%;
}

/* Animación */
@keyframes mostrar-deslizar {
  0% {
    right: -20%;
  }
  100% {
    right: 0;
  }
}

/* Aplicar la animación cuando el elemento esté visible */
.elemento-mostrar.mostrar {
  animation: mostrar-deslizar 1s ease-out;
  right: 0;
}

.bgColorPrimario{
  background-color: var(--bg-color-primary);
}

.bgColorSecundario{
  background-color: var(--bg-color-secundary);
}

.bgColorSecundarioLight{
  background-color: var(--bg-color-secundary-light);
}

.bgColorBlanco{
  background-color: #ffffff;
}

.bgColorNegro{
  background-color: #000000;
}

/* Formulario */
.containerFormulario {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.divPuesto{
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
  padding: 30px;
}

.contact-info{
  background-image: url('../images/imgFondo3.jpg');
  background-size: cover;
}

.contact-form {
  padding: 50px;
  background-color: var(--bg-color-primary);
}

.contact-info h2, .contact-form h2 {
  margin: 0;
  color: var(--bg-color-secundary);
}

.contact-form p{
  color: #f2f2f2;
}

.contact-info p {
  margin: 5px 0;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: bold;
  margin-top: 10px;
}

.contact-form input, .contact-form textarea {
  padding: 8px;
  margin-bottom: 10px;
  border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
}

.contact-form button {

  background-color: #1a2b3ec7;
  color: var(--color-secundary-light);
  padding: 10px 50px;
  text-decoration: none;
  border: solid 0px #daf4ff;
  border-radius: 5px;
  margin: 0px 10px 10px 0px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
  transition: 2s;

}

.contact-form button:hover {
  transition: 2s;
  background-color: var(--bg-color-primary);
  color: var(--color-secundary);
}

.containerPadding{
  padding: 150px;
}

.containerPaddingTop{
  padding: 100px 150px 100px 150px;
  min-height: 100vh;
}

.containerPaddingTop2{
  padding: 100px 120px 100px 120px;
  min-height: 100vh;
}

/* Estilos para la galeria de imagenes */
.gallery-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Espaciado entre las imágenes */
  box-sizing: border-box; /* Incluir el padding en el ancho del contenedor */
}
.gallery-item {
  position: relative; /* Establecer posición relativa para que el movimiento funcione correctamente */
  flex: 0 0 calc(50% - 20px); /* Ajustar el ancho teniendo en cuenta el padding */
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* Establecer posición absoluta para el movimiento */
  top: 0;
  left: 0;
  transform: scale(1); /* Restablecer la escala inicial */
  transition: transform 0.3s ease; /* Transición para el efecto de movimiento */
}
.gallery-item:hover img {
  transform: scale(1.1); /* Efecto de ampliación de la imagen dentro del contenedor */
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A2B3ED1; /* Color de fondo semitransparente */
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.3s ease; /* Transición para la aparición */
  text-decoration: none;
  cursor: pointer;
}
.gallery-item:hover .text-overlay {
  opacity: 1; /* Mostrar el div al mover el cursor sobre la imagen */
}
.text-overlay h2{
  color: white;
  text-align: center;
    font-size: 1.5rem;
}

.text-overlay p {
  color: white;
  text-align: center;
  padding: 10px;
}

/* Estilos para el slider desplazado */
.slider {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.slide {
  width: 100%;
}

.slider .slide-track {
  display: flex;
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
  width: calc(200px * 14);
}

.slider .slide {
  width: 100%;
}

.slider .slide img {
  width: 100%;
  height: 100%;
}

.cardMove {
          padding: 20px;
          text-align: center;
          color: white;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .cardMove h1{
        font-size: 30px;
    }

    .cardMove p{
      font-size: 15px;
  }

@keyframes scroll {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(calc(-200px * 7));
      transform: translateX(calc(-200px * 7));
  }
}

.container-img-float {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.background-image {
  position: absolute;
  width: 50%;
  height: 50%;
  background-size: cover;
  transition: transform 0.3s ease;
}

.top-left {
top: -90px;
left: 0;
background-image: url('/images/imgFondo1.jpg');
}

.top-right {
top: 100px;
right: -130px;
background-image: url('/images/imgFondo2.jpg');
}

.bottom-left {
bottom: -100px;
left: 40px;
background-image: url('/images/imgFondo3.jpg');
}

.bottom-right {
bottom: -200px;
right: -200px;
background-image: url('/images/imgFondo4.jpg');
}

.overlay {
  position: relative;
bottom: 0;
left: 0;
right: 0;
background-color: #1A2B3ED1;;
overflow: hidden;
width: 100%;
height: 100vh;
transition: .5s ease;
}

.centered-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered-text p:nth-child(1){
  line-height: 1;
  color: var(--bg-color-secundary-light);
  font-size: 2rem;
}

.centered-text p:nth-child(2){
  line-height: 1;
  color: var(--bg-color-secundary-light);
  font-size: 9vw;
}

.centered-text-container {
  width: 100%; /* Puedes ajustar el ancho del div según tus necesidades */
  height: 100vh; /* Puedes ajustar la altura del div según tus necesidades */
  background-color: var(--bg-color-primary); /* Cambia el color del fondo aquí */
  text-align: center; /* Centra el texto horizontalmente */
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-padre {
    height: 50%;
    display: flex;
    position: relative;
}

.rectangulo-portada {
    width: 10%;
    height: 70%;
    background-color: var(--bg-color-primary);
    position: absolute;
    bottom: 0;
}

.imagen {
  width: 50%;
  object-fit: cover;
  position: absolute;
  display: inline-block;
  margin: auto;
  max-width: 100%;
  height: 600px;
  padding: 50px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.background-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.background-images .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%; /* Cada imagen ocupa el 25% del ancho del div */
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff; /* Texto en color blanco */
  font-size: 24px;
  text-align: center;
}



.imgSPC1, .imgSPC2, .imgSPC3, .imgSPC4, .imgSPC5, .imgSPC6 .imgSPC7, .imgSPC8, .imgSPC9{
display: block;

}

.imgSM1, .imgSM2, .imgSM3, .imgSM4, .imgSM5, .imgSM6, .imgSM7, .imgSM8, .imgSM9{
	display: none;
}

.imgSX1, .imgSX2, .imgSX3, .imgSX4, .imgSX5, .imgSX6, .imgSX7, .imgSX8, .imgSX9{
	display: none;
}

.logoExtra{
    display: none;
}

.logosSinergia > a > img{
    width: 150px;
}

/* Estilos para los hijos */
.child {
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.child .descripcionB{
  color: var(--color-secundary);
  font-size: 0.8rem;
  margin-bottom: 40px;
}

.copyright{
  font-size: 0.8rem;
  margin-top: 40px;
  text-transform: capitalize;
}

.child h1{
  color: var(--color-secundary-light);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
}


.containerPortadaTI{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
}

.imgPortada{
  width: 50%;
}

.formaG {
  background-color: #144394;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-top-right-radius: 200px;
}

.formaG img {
  width: 520px;
  position: absolute;
  bottom: 0;
  display: flex;
  right: 0;
}

.txtPortada{
  width: 50%;
}


.containerInfo {
  width: 100%;
  height: 100%;
  padding: 300px 100px 0px 50px;
}

.containerInfoCel{
  display: none;
}

.containerDivRow{
  height: auto;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    padding-top: 90px;
}

.multimedia{
  height: 70%;
  background-image: url(../images/imgTrabajo.png);
background-size: cover;
}

.containerOpciones{
  height: 40%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.SinergiaTI{
  background-color: #154394;
    width: 50%;
    height: 100%;
    pointer-events: visible;
    margin: auto;
    text-align: center;
    padding: 10%;
}

.RedesSocialesS {
  background-color: #0e1c35;
  width: 50%;
  height: 100%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}


.enlaceML{
    color: var(--color-secundary-light);
    border-bottom: solid 1px #F2E5E1;
    padding: 10px;
}

.enlaceML:hover{
    background: var(--bg-color-backdrop-primary);
    color: var(--bg-color-secundary-light);
    backdrop-filter: saturate(100%) blur(20px);
    padding: 10px 10px 10px 10px;
}

.menuLateral .enlaceColorPrimary:hover{
  background: var(--bg-color-secundary);
  color: var(--bg-color-primary);
  transition: 1s;
}

.menuLateral .enlaceML .iconML{
  width: 20px;
  height: 20px;
}

.menuLateral .enlaceML .divIcon img{
  width: 10px;
  margin-right: 10px;
  
}

.menuLateral .enlaceColorPrimary .divIcon img{
  width: 10px;
  margin-right: 10px;
  filter: invert(100%);
}

.enlaceColorPrimary .usuarioRed{
  color: var(--color-primary);
}


.img100{
  width: 80%;
  transform: scaleX(-1);
}

.infoAviso{
    padding: 50px 200px;
    width: 100%;
    text-align: left;
}

.menuS .opIdioma{
    border-radius: 50px;
}

.menuS>li{
  float: left;
    text-align: left;
}

.abajo .menuS li .menuDes{
  background-color: #000357;
}

.enlaceWhatsapp{
  display: none;
}

.imgProductos img{
  width: 100%;
}

.seccionContacto{
  padding: 100px 50px 50px 50px;
  background: #f2f2f2;
  width: 100%;
  }

.datosContacto{
width: 35%;
background: #154394;
padding: 50px;
}

.listaDatos{
  color: #f2f2f2;
    text-align: left;
    list-style: none;
    font-weight: 300;
}

.seccionListaProductos{
  padding: 0px 100px;
}

.listaProductos{
  padding: 0px 50px 50px 50px;
}

.listaRedes img{
  width: 20px;
  margin: 10px;
}

.listaRedesM{
  width: 100%;
    margin: 10px;
    padding-top: 40px;
}

.listaRedesM img{
  width: 30px;
  margin: 10px;
}

.listaRedesM img{
  width: 30px;
  margin: 10px;
}

.listaRedesMenu img{
  display: none;
}

.formularioContacto{
width: 65%;
padding: 50px;
background: #ffffff;
}

.contenedorContacto{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 50px;
}

.contenidoDatos form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 400;
  margin-bottom: 5px;
}
.user-details .input-box input{
  height: 45px;
    width: 100%;
    outline: none;
    font-size: 16px;
    padding-left: 15px;
    border: none;
    border-bottom: solid 1px #d9d9d9;
    transition: all 0.3s ease;
}

.user-details .input-box input:focus,
.user-details .input-box input:valid{
  border-color: #0052ff;
}
 form .gender-details .gender-title{
  font-size: 20px;
  font-weight: 500;
 }
 form .category{
   display: flex;
   width: 80%;
   margin: 14px 0 ;
   justify-content: space-between;
 }
 form .category label{
   display: flex;
   align-items: center;
   cursor: pointer;
 }
 form .category label .dot{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}
 #dot-1:checked ~ .category label .one,
 #dot-2:checked ~ .category label .two,
 #dot-3:checked ~ .category label .three{
   background: #9b59b6;
   border-color: #d9d9d9;
 }

 .enviarDatos button {
    height: 100%;
    padding: 7px;
    width: 100%;
    border-radius: 50px;
    border: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #154394;
}

 form .button input:hover{
  /* transform: scale(0.99); */
  background: #0052ffc4;
  }

  textarea{
    height: 150px;
    width: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    border: none;
    border-bottom: solid 1px #d4d4d4;
    transition: all 0.3s ease;
}

.seccionNosotros{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
    padding: 50px 100px;
}


.seccionServicios{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
    padding: 50px 100px;
}

.seccionServiciosA{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
    padding: 50px 100px;
}

.seccionBeneficiosAtaico{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f2f3f6;
    padding: 50px 100px;
}

.CopyrightAtaico {
    width: 100%;
    padding: 20px;
    text-align: center;
    border-top: solid 1px #ffffff;
}

.seccionClientes{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f8f8f9;
    padding: 50px 100px;
}

.grupoTarjetasFGC{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #daf4ff;
    padding: 50px 130px;
}

.grupoProductos{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding-top: 20px;
}

.productoInd{
    height: auto;
    padding-right: 50px;
    width: auto;
    cursor: pointer;
}

.margenTarjeta{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
}

.filaTarjetas {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  border-bottom: solid 1px #2b2f5d1f;
}

.grupoTarjetaSM{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  padding: 0px;
}

.grupoTarjetaSMH {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0px;
}

.divParrafo{
  width: 50%;
    margin: auto;
    padding: 50px;
    text-align: left;
}



.divTarjet{
  width: 50%;
  height: 100vh;
  padding: 10%;
}

.tarjetaInd{
  width: 100%;
    height: auto;
    background: #ea3a4e;
    border-radius: 10px;
    padding: 20px;
}

.tarjetaX3AM{
  width: 30%;
    height: auto;
    background: #02062f;
    border-radius: 10px;
    margin: 20px;
    padding: 40px;
    text-align: center;
}

.tarjetaX3 {
  height: 100%;
  border-radius: 10px;
  padding: 0;
  text-align: center;
}

.tarjetaX2Simple{
  width: 50%;
  border-radius: 10px;
  margin: 50px 80px 50px 80px;
  text-align: left;
}

.tarjetaX2List{
    width: 50%;
    text-align: left;
    padding: 0;
    margin: 0px 50px 0px 0px;
}

.tarjetaX3Simple{
  width: 30%;
  border-radius: 10px;
  margin: 20px;
  text-align: left;
}

.tarjetaX4Simple{
  width: 25%;
  border-radius: 10px;
  margin: 20px;
  text-align: left;
}

.tarjetaX1{
  width: 100%;
  height: 400px;
  position: relative;
    min-height: 184px;
    padding: 24px 0;
    padding-right: 80px;
    border: none;
    margin: 20px;
}

.tarjetaX2{
  width: 50%;
  height: 300px;
  position: relative;
    min-height: 184px;
    padding: 24px 0;
    padding-right: 80px;
    border: none;
    margin: 20px;
}

.tarjetaX2{
    width: 50%;
    height: 300px;
    position: relative;
    min-height: 184px;
    padding: 24px 0;
    border: none;
    margin: 10px;
}

.tarjetaX2T {
  width: 100%;
  height: auto;
  position: relative;
  min-height: 184px;
  padding: 24px 0;
  padding-right: 80px;
  border: none;
  margin: 20px;
  /* background: #ffffff2e; */
  border-radius: 50px;
  background-color: rgb(49 48 48 / 45%);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
}

    

.tarjetaX1 img{
  position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    object-fit: cover;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

.tarjetaX2 img{
  position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    object-fit: cover;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

.contenidoTarjetaX2{
    z-index: 1;
    height: 100%;
    max-width: 280px;
    width: 240px;
    margin-left: 30px;
    padding-left: 0;
    flex-direction: column;
    justify-content: center;
    position: absolute;
}

.centrarContenido{
  text-align: right;
  width: 100%;
  padding-bottom: 0px;
}

.centrarContenido img{
  width: 50%;
    height: auto;
    padding: 50px 50px 0px 50px;
}

.iconoVentajas{
  width: 30px;
    padding-bottom: 10px;
}

.iconoProductoAtaico{
  height: 84px;
    padding: 0 20px 20px 0;
    position: relative;
}

.logoCliente {
  height: 100px;
  padding: 20px;
}

.imgPerfilEquipo {
    height: 100px;
    margin-right: auto;
    margin-bottom: 20px;
    display: block;
    border-radius:150px;
}

.listaCorrecta{
  list-style: disc;
    padding-left: 20px;
    font-size: 19px;
    font-weight: 300;
}

.listaSecciones{
  list-style: disc;
    font-size: 12px;
    color: #ffffff;
    list-style: none;
}

.listaSecciones li a{
  color: #ffffff;
  text-decoration: none;
}

.grupoTarjetasInd{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
}


/* menu TRANSPARENTE para fondo oscuro*/
.navPrimary, .navSecundary{
  display: flex;
  height: auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: fixed;
  z-index: 2;
  transition: 1s;
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  transition: background-color .6s cubic-bezier(.19,1,.22,1);
  transition: 1s;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: solid 1px #333;
}

.navPrimary.abajo{
  margin: 30px 100px;
  border-radius: 10px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  border-bottom: none !important;
  background-color: #f2e5e1bd;
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
}

.navSecundary.abajo{
  margin: 30px 100px;
  border-radius: 10px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  border-bottom: none !important;
  background-color: #51515159;;
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
}

.navPrimary .logo, .navSecundary .logo{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
.navPrimary ul, .navSecundary ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.navPrimary ul li, .navSecundary ul li{
  margin: 0 5px;
}

.navPrimary ul li a {
    color: var(--bg-color-primary);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 8px 20px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: flex;
    text-transform: uppercase;
    cursor: pointer;

}

.navSecundary ul li a {
  color: var(--color-secundary-light);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 8px 20px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  display: flex;
  text-transform: uppercase;
  cursor: pointer;
}


.navPrimary ul li a:hover {
    color: #1a2b3e;
    font-weight: 500;
    background-color: var(--color-secundary);
    border-radius: 10px;
  }

  .navSecundary ul li a:hover {
    color: var(--color-secundary);
    font-weight: 500;
    background-color: var(--color-primary-light);
    border-radius: 10px;
  }

  .navPrimary ul li a.active{
    color: var(--color-primary);
    transition: 1s;
    font-weight: 600;
    cursor: pointer;
  }
  
  .navPrimary ul li a.active2 {
    color: #0e1c35;
    transition: 1s;
    font-weight: 600;
    background: #9dc1c3;
    border-radius: 50px;
}

.navPrimary ul li a.active2:hover{
  background: #cbfafc;
}

.navPrimary .menu-btn i, .navSecundary .menu-btn i{
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}

/*dfdfggdfgdjgf*/
.iconosMenu{
  width: 20px;
}

.iconOpcionMenu{
  margin: auto;
    width: 19px;
    margin-right: 10px;
}

.iconSubOpcionMenu{
  margin: auto;
    width: 19px;
    margin-right: 10px;
}

.iconSistemas{
  margin: auto;
    width: 90px;
    margin-right: 30px;
}

.opcionMarcada {
    font-weight: 700;
    color: #0052ff;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bgPrimary{
  color: var(--bg-color-primary);
}

.bgSecundary{
  color: var(--bg-color-secundary);
}

.bgSecundaryLight{
  color: var(--color-secundary-light);
}

.colorPrimary{
  color: var(--color-primary);
}

.colorPrimaryLight{
  color: var(--color-primary-light);
}

.colorSecundary{
  color: var(--color-secundary);
}

.colorSecundaryLight{
  color: var(--color-secundary-light);
}

.miniTitulo{
  font-size: 14px;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 500;
}

.miniTitulo span{
  padding: 10px 30px;
  border-radius: 0px;
  border: solid 1px #152332;  
}

.videoPortada > h2{
  font-size: 40px;
    color: #ffffff;
}

.tituloPortadaProducto span{
  font-weight: 800;
}

.tituloPortadas{
  color: #f2f2f2;
}

.megaTitulo{
  font-size: 12vw;
  font-weight: 600;
}

.tituloCentradoAz{
  background: #00bfff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00bfff, #000357); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00bfff, #000357); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
    font-size: 70px;
    line-height: 0.7;
    font-weight: 100;
    letter-spacing: -.015em;
}

.tituloCentradoAz span{
  font-weight: 700;
  line-height: 0.7;
}

.tituloClaroC span{
  background: #1FCAFF;
  background: linear-gradient(to right, #1FCAFF 0%, #6BFFAB 50%, #C496FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 70px;
    line-height: 1.1;
}

.tituloC{
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
  padding-bottom: 10px;
}

.tituloM{
  font-size: 70px;
  line-height: 1;
  font-weight: 500;
}

.tituloG{
    font-size: 95px;
    line-height: 1;
    font-weight: 400;
    padding-bottom: 30px;
}

.subtituloG{
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  padding-bottom: 30px;
}

.subtituloM{
font-weight: 500;
font-size: 6vh;
line-height: 1;
padding-bottom: 10px;
}

.subtituloC{
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  padding-bottom: 10px;
}

.parrafoG{
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: 10px;
}

.parrafoM{
  margin-top: -5px;
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.6em;
  font-weight: 400;
}

.parrafoC{
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 30px;
}

.parrafoMini{
  font-size: 10px;
  font-weight: 300;
}

.listaParr {
  color: #daf4ff;
  font-size: 13px;
  font-weight: 300;
  padding-bottom: 10px;
    text-align: left;
}

.tarjetaDatos{
    background: #f5f5f5;
    border-radius: 10px;
    padding: 30px;
    width: 300px;
    height: 300px;
}

.divDobleSeccBl{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
}

/*PORTADA CON PADDING */
.divPortadaDoble{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #ffffff;
    padding: 100px 100px 50px 100px;
    margin-right: auto;
    margin-left: auto;
  }

  /*PORTADA SIN PADDING */
  .divPortadaDobleSP {
    width: 100%;
    height: 100%;
    background-image: url(../images/fondoServicioAP.png);
    background-repeat: no-repeat;
    background-position: top;
    display: flex;
    flex-direction: row;
    background: sr;
    padding: 50px 0px 0px 0px;
    margin-right: auto;
    margin-left: auto;
}

  .divPortadaDobleAz {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background-color: var(--bg-color-primary);
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
}

.divFondoBene {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  background-color: var(--bg-color-secundary-light);
  padding: 100px 100px 50px 100px;
  margin-right: auto;
  margin-left: auto;
}

.divCentralBlanco{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #daf4ff;
    padding: 50px 100px;
    margin-right: auto;
    margin-left: auto;
}

.divCentralGrisClaro{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #daf4ff;
    padding: 50px 100px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.divCentralAzulMarino{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background: #0e1c35;
  padding: 50px 100px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.divCentralImg1{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background-image: url(../images/fondoNosotros.jpg);
  padding: 50px 100px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

/*Divisor central con margenes laterales */
.divCentralGrisClaroML {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #f2f3f6;
    padding: 50px 200px;
    margin-right: auto;
    margin-left: auto;
}

.divCentralBlanco{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #daf4ff;
    padding: 50px 100px;
    margin-right: auto;
    margin-left: auto;
}

.divDobleSeccBl60{
    width: 100%;
    height: 60vh;
    display: flex;
    flex-direction: row;
    background: #f2f2f2;
    padding: 50px 100px;
    margin-right: auto;
    margin-left: auto;
}

.divDobleSeccGr {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #f2f3f6;
    padding: 50px 100px;
    margin-right: auto;
    margin-left: auto;
}

.divDobleSeccBlT{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.divDobleSeccNe{
  width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #000000;
    margin-right: auto;
    margin-left: auto;
    padding-top: 100px;
    padding-bottom: 100px;
}

.divDobleSeccAz{
  background: #CCFDFF;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 100px 100px 50px 100px;
    margin-right: auto;
    margin-left: auto;
}

.divSeccImg{
  width: 100%;
  height: 100vh;
  background-image: url(../images/Innovacion.png);
  background-size: cover;
  margin-right: auto;
  margin-left: auto;
}

.portada-container{
  height: 100vh;
    width: 100%;
    object-fit: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    background: #0E1C35;
}

.presentaTxt > h1{
  color: var(--bg-color-primary);
    font-size: 6rem;
    line-height: 0.8;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.presentaTxt > h1 > span{
  font-family: "Prata", serif;
  color: var(--bg-color-primary);
  font-size: 9vw;
  line-height: 1;
  font-weight: 500;
  font-style: italic;
}

.presentaTxt > p{
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -.02em;
    max-width: 24.7058823529vw;
    width: 100%;
    color: #ffffff;
    font-weight: 300;
}

.elevarArriba {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 1s, transform 1s;
}

.show {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 1s, transform 1s;
}

.invisibleAbajo{
  opacity: 1;
  transition: 1s;
}

.show2{
  opacity: 0;
  transition: 1s;
 
}

.videoPortada{
  --fill-layer-background-media-position: fixed;
  object-fit: cover;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.presentaTxt{
width: 50%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
z-index: 1;
}

.barraInferiorPr{
  position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10.5882352941vw;
    display: flex;
    justify-content: flex-end;
}

.grupoEnlaces{
  height: 100%;
  display: flex;
  pointer-events: visible;
}

.divEnlace1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration-line: none;
}

.divEnlace2{
    opacity: 1;
    visibility: inherit;
    will-change: auto;
    transform: translate(0px, 0px);
    padding: 2.3529411765vw 2.9411764706vw;
    background-color: #0e1c35;
    transition: background-color .6s cubic-bezier(.19,1,.22,1);
    outline: 0;
}

.iconoEnlace{
  width: 2.4705882353vw;
  height: 2.3529411765vw;
  margin-bottom: 0.7647058824vw;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}

.iconoEnlace img{
  width: 100px;
    height: 100px;
    transform: translate3d(0px, 0px, 0px);
    content-visibility: visible;
    margin: -100px;
}

.iconoSinergia{
  height: auto;
    margin-bottom: 0px;
    transition: transform .6s cubic-bezier(.19,1,.22,1);
}

.iconoSinergia img{
    width: 30%;
    transform: translate3d(0px, 0px, 0px);
    content-visibility: visible;
}

.PortadaPrincipal{
  width: 100%;
    height: 100vh;
    background-image: url(../images/fondoElemento1.png);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
}

.PortadaPrincipal2{
    width: 100%;
    height: 100vh;
    background: #0e1c35;
    background-image: url(../images/fondoFinanzas.png);
    background-position: center center;
    display: flex;
    background-size: cover;
}

.PortadaPrincipal3{
    width: 100%;
    height: 100vh;
    background: #0e1c35;
    background-image: url(../images/fondoBlog.jpg);
    background-position: center center;
    display: flex;
    background-size: cover;
}

.divTituloPr{
  margin: auto;
    padding: 100px;
    width: 50%;
}


.divContenidoCentrado{
  width: 100%;
    height: auto;
    padding: 50px 20%;
    text-align: center;
    margin: auto;
}

.divContenidoCentrado img{
  width: 100%;
  padding: 50px 150px;
  text-align: center;
}

.divImgPr{
  width: 50%;
  height: 100vh;
  padding-top: 100px;
}

.divImgPr img{
  width: 100%;
  padding: 100px;
}

.divPortadaProductos{
  background: #f7f7f9;
  width: 100%;
    height: 60vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.divPortadaServicios{
    width: 100%;
    height: 60vh;
    background-image: url(../images/servicios.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.divPortadaContacto{
  background-image: url(../images/contacto.jpg);
    width: 100%;
    height: 60vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.divSeccImg2{
  width: 100%;
  height: 100vh;
  background-image: url(../images/Innovacion2.png);
  background-size: cover;
  margin-right: auto;
  margin-left: auto;
}

.divSeccImg3{
  width: 100%;
  height: 100vh;
  background-image: url(../images/slide_2__.jpg);
  background-size: cover;
  margin-right: auto;
  margin-left: auto;
}

.divPortadaC{
    width: 100%;
    height: 130vh;
    background: #0e1c35;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.divUnicoCentro {
    margin-top: 150px;
    text-align: center;
    position: absolute;
    width: 100%;
}

.divUnicoCentro img{
  width: 400px;
  margin: auto;
  text-align: center;
  padding-bottom: 50px;
}

.divDobleTexto{
  width: 100%;
  height: 40vh;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    background: #f2f3f6;
}

/* Divisor sin margen automático sin color de fondo*/
.divTextoSMS{
  width: 50%;
    padding: 0px 50px;
    
}

/* Divisor sin margen automático con color de fondo azul marino*/
.divTextoSMSAM{
  width: 50%;
    padding: 50px;
    background: #6dc9ee;
    padding: 100px;
}

/* Divisor sin margen automático con color de fondo azul marino*/
.divTextoSMSAC{
  width: 50%;
    padding: 50px;
    background: #00b6da;
    padding: 100px;
}

.grupoTarjetasX2{
    width: 100%;
    margin: auto;
    text-align: left;
}

/* DIV izquierdo a la mitad */
.divIzq1{
  width: 50%;
height: 100%;
display: flex;
flex-direction: column;
position: sticky;
top: 100px;
justify-content: start;
padding: 30px;
}

/* Div para mini titulos */
.divIzqImg{
  overflow: hidden;
    position: relative;
    height: auto;
    width: 50%;
    padding: 100px;
}

.parallax__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/construcciones1.jpg');
  background-size: cover;
  background-position: center;
}

.parallax__background2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/img1Seccion.jpg');
  background-size: cover;
  background-position: center;
}

/* DIV IZQUIERDO CON FONDO */
.divIzq1CF {
    width: 50%;
    margin: auto;
    padding: 50px;
    height: 100%;
}

.divDer1{
  width: 50%;
    margin: auto;
    text-align: left;
    padding: 90px;
}

.divDer1 img{
  height: auto;
  padding-top: 40px;
  position: relative;
}

.divDerList{
  width: 70%;
  text-align: left;
  padding-top: 30px;
}

.divIzq2{
  width: 50%;
    margin: auto;
    padding: 50px;
    text-align: left;
}

.divDer2{
  width: 50%;
    margin: auto;
}

.divIzq3{
    width: 50%;
    text-align: left;
    padding: 0px 0px 0px 130px;
}

.divDer3{
    width: 50%;
    text-align: left;
    padding: 0px 130px 0px 50px;
}

.div65P{
    width: 75%;
    text-align: left;
}

.div35P{
    width: 25%;
    text-align: left;
    padding: 0px 20px 50px 20px;
}

.div65P img, .div35P img{
  width: 100%;
  height: 55%;
  padding-bottom: 15px;
}

/*dividores redondeados y alineados horizontalmente*/

.miniTarjetasInfo {
    width: 50%;
    text-align: left;
    padding: 20px;
    overflow: hidden;
    background: #ffffff;
    margin: 25px;
    border-radius: 10px;
}

.divTarjetaAzul{
  background-color: #0052ff;
  width: 50%;
  height: 80vh;
  text-align: center;
  margin: 20px;
  padding: 50px;
  border-radius: 20px;
  overflow: hidden;
}

.divTarjetaBlanco{
  background-color: #daf4ff;
  width: 50%;
  height: 80vh;
  text-align: center;
  margin: 20px;
  padding: 50px;
  border-radius: 20px;
  overflow: hidden;
}

.divTarjetaNegro{
background-color: #000000;
width: 50%;
  height: 80vh;
  text-align: center;
  margin: 20px;
  padding: 50px;
  border-radius: 20px;
  overflow: hidden;
}

.divTarjetaGrisClaro{
background-color: #f7f7f9;
width: 50%;
  height: 80vh;
  text-align: center;
  margin: 20px;
  padding: 50px;
  border-radius: 20px;
  overflow: hidden;
}

.imgDivisores{
  width: 400px;
    margin: auto;
    text-align: center;
    padding: 30px;
}

.divIzq1 img, .divDer2 img, .divIzq3 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}

.divIzq1 img:hover, .divDer2 img, .divIzq3 img{
  width: 100%;
  height: 110%;
  object-fit: cover;
  transition: 1s;
}

.divIzq1CF img{
width: 100%;
    height: auto;
    padding-bottom: 15px;
}

.btnGeneral{
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    border: solid 1px transparent;
}

.btnGeneral:hover{
  border: solid 1px #424662;
}

.botonColorPrimary{
  background: var(--bg-color-primary);
    color: var(--color-secundary-light);
}

.botonColorPrimary:hover{
  background: var(--bg-color-primary);
    color: var(--color-secundary);
}

.botonColorSecundary{
  background: var(--bg-color-secundary);
    color: var(--color-primary);
}

.botonColorSecundary:hover{
  background: var(--bg-color-secundary-light);
    color: var(--color-primary);
}

#app-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 85px;
    width: 80px;
    z-index: 1000;
    display: block;
}

#app-messenger {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 80px;
    z-index: 1000;
    display: block;
}

a {
  color: #000000;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

a:hover, a:active, a:focus {
  color: #1A5E63;
  outline: none;
}

p {
	color: #717171
}


::-webkit-selection {
  color: #fff;
  background: #6dc9ee;
}

::-moz-selection {
  color: #fff;
  background: #6dc9ee;
}

::selection {
  color: #fff;
  background: #6dc9ee;
}

.contact-info li {
  list-style: none;
  margin: 0 0 20px 0;
  position: relative;
  padding-left: 40px;
}
.contact-info li i {
  position: absolute;
  top: .3em;
  left: 0;
  font-size: 22px;
  color: #031927;
}
.contact-info li a {
  color: #031927;
}
.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0; text-align:justify;}

.one_third{width:300px;}
.two_third{width:630px;}
.three_third{width:960px; float:none; margin-right:0; clear:both;}
.lastbox{margin-right:0;}


#bloque{
	width: 350px;
	height: 200px;
	background-image: url(../images/1.jpg);
	margin-left: 650px;
}

#bloque1{
	width: 600px;
	height: 200px;
	background-image: url(../images/1.jpg);
	margin-left: 100px;
}


.clearfix {
    overflow: auto;
}


/*curriculim*/
.container3 {
  position: relative;
  width: 300px;
}

.contentPortada .image{
  display: block;
  width: 100%;
  height: auto;
}

.image {
  display: block;
  width: 100%;
  height: 200px;
}

.container3:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


/**/

a {
  color: #000000;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #3D444A;
  outline: none;
}


::-webkit-selection {
  color: #fff;
  background: #6dc9ee;
}

::-moz-selection {
  color: #fff;
  background: #6dc9ee;
}

::selection {
  color: #fff;
  background: #6dc9ee;
}

.js .animate-box {
  opacity: 0;
}

/*RESPONSIVO*/
@media screen and (max-width: 1200px) { 

  .containerTxtMain{
    flex-direction: column;
  }

  .txtSection1 p:nth-child(1){
    font-size: 6vw;
  }
  
  .txtSection1 p:nth-child(2){
    font-size: 12vw;
  }

  .contact-form {
    flex: 1;
    padding: 40px 0px;
  }
  .contact-info {
    background-image: url('../images/imgFondo3.jpg');
    background-size: cover;
    background-position: top;
  }
  
.vandm{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vandm div{
  background: var(--bg-color-secundary);
border-radius: 20px;
padding: 20px;
width: 100%;
margin-bottom: 10px;
}

.vandm div:hover{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.divDer1 {
  width: 50%;
  margin: auto;
  text-align: left;
  padding: 0px;
}

.divIzqImg {
  overflow: hidden;
  position: relative;
  width: 40%;
}

}

@media screen and (max-width: 950px){

  .containerPaddingTop {
    padding: 100px 20px 100px 20px;
    min-height: 100vh;
  }
  
  .txtSection1 p:nth-child(1){
    font-size: 6vw;
  }
  
  .txtSection1 p:nth-child(2){
    font-size: 12vw;
  }

  .parrafoOscuroC {
    color: #002E33;
    font-size: 0.7rem;
    font-weight: 300;
    padding-bottom: 0;
  }
  .comprimidoresponsive{
    width: 100%;
  }
.menuContent {
  display: flex;
  flex-direction: row;
  justify-content: end;
  padding-top: 20px;
  -webkit-backdrop-filter: saturate(0%) blur(20px);
  transition: background-color .6s cubic-bezier(.19,1,.22,1);
  transition: all 1s ease 0s;
  width: 100% !important;
}
          .mi-div {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            opacity: 0;
            z-index: 2;
            -webkit-backdrop-filter: saturate(100%) blur(20px);
            backdrop-filter: saturate(100%) blur(20px);
          -webkit-transition: 1s linear;
          transition: 1s linear;
          }
          
 #menuResponsive .active{
            text-decoration: none;
            color: var(--color-primary);
            font-size: 2.5rem;
            line-height: 1.1;
            font-weight: 500;
            padding-bottom: 20px;
          }
          
  #containerA {
    overflow-x: scroll;
    white-space: nowrap;
    height: 100%;
    margin: 10px;
      margin-top: 10px;
    width: 100%;
    margin-top: 100px;
    padding: 0px 10px;
  }

  .divIzq1 {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 100px;
    justify-content: start;
    padding: 30px;
  }

  .divDerList {
    width: 70%;
    text-align: left;
    padding-top: 30px;
  }

  .navPrimary ul, .navSecundary ul{
    display: none;
  }

  .btnMenu{
    cursor: pointer;
    display: flex;
  }

  .navPrimary.abajo {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: fixed;
    z-index: 2;
    transition: 1s;
    background-color: var(--bg-color-backdrop-secundary);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    transition: background-color .6s cubic-bezier(.19,1,.22,1);
    transition: 1s;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
  }

  .navSecundary.abajo {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: fixed;
    z-index: 2;
    transition: 1s;
    background-color: var(--bg-color-backdrop-primary);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    transition: background-color .6s cubic-bezier(.19,1,.22,1);
    transition: 1s;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
  }
}

@media screen and (max-width: 767px) {

  .p-4 {
    padding: 1.5rem 0 !important;
  }

  .cPortada {
    padding-top: 150px;
  }

  .containerTxtMain{
    flex-direction: column !important;
  }

  .txtSection1 p:nth-child(1){
    font-size: 7vw;
  }
  
  .txtSection1 p:nth-child(2){
    font-size: 16vw;
  }

  .secionIdiom{
    background: #1b2b3e;
    padding: 10px;
    text-align: center;
    color: #f3e5e1;
    cursor: pointer;
  }
  .overlay {
    position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1A2B3ED1;;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  }

  .centered-text p:nth-child(2) {
    line-height: 1;
    color: var(--bg-color-secundary-light);
    font-size: 14vw;
  }

  .contentPortada .image {
    display: block;
    width: 60%;
    height: auto;
    margin: 0 auto;
  }

  .miniTitulo {
    font-size: 14px;
    margin-bottom: 30px !important;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 30px;
    margin-left: 0px;
  }

  .title_c {
    color: #5E6873;
    font-size: 5vh !important;
    line-height: 1;
    position: relative;
    top: 20px;
    display: flex;
    justify-content: center;
    font-family: var(--font-secundary)
  }

  .title_c span{
    font-style: italic;
    color: var(--color-primary);
    font-size: 5vh !important;
      line-height: 1;
      top: 45px;
      display: flex;
      justify-content: center;
      font-family: var(--font-secundary)
  }

  .bottom-paragraph {
    font-size: 15.1vw;
    line-height: 1;
    display: flex;
    justify-content: center;
    position: relative;
    top: -70%;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--font-primary);
  }

  .filter-buttons button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: #1a2b3ec2;
    padding: 10px 20px;
    color: #f2f2f2;
    font-size: 1rem;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 10px;
  }

  .parrafoClaroC {
    color: #BFEDEF;
    font-size: 13px;
    font-weight: 300;
    padding-bottom: 10px;
  }

  .containerFlexRow{
    width: 100%;
      flex-direction: column;
      padding: 0;
      justify-content: space-between;
      display: flex;
      margin-right: auto;
      margin-left: auto;
  }

  .containerFlexColumn{
    width: 100%;
      flex-direction: column;
      background-color: var(--bg-color-secundary-light);
      padding: 20px;
      justify-content: space-between;
      display: flex;
      margin-right: auto;
      margin-left: auto;
  }

  .containerDivRow {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: auto;
    background-color: var(--bg-color-secundary-light);
    padding: 90px 0px;
  }
  .presentaTxt {
    padding: 30px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
  }

  .presentaTxt > h1 {
    color: var(--color-primary);
    font-size: 2rem;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .menuS{
  display: none;
    }

  .divMulti50w {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
  }
  .rectangulo-portada {
    width: 10%;
    height: 30%;
    background-color: var(--bg-color-primary);
    bottom: 0;
    margin-left: 30px;
  }
  .imagen {
    width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      padding: 30px;
      top: 40%;
  }
  .botonBlanco {
    background: #ffffff00;
    color: #daf4ff;
    padding: 10px 50px;
    text-decoration: none;
    border: solid 1px #daf4ff;
    border-radius: 50px;
    margin: 0px 10px 10px 0px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
  }

  .divDobleSeccBl {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: auto;
  }

  .divIzqImg {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
  }

  .divDer1 {
    width: 100%;
    margin: auto;
    text-align: left;
  }

  .divFondoBene {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-secundary);
    padding: 30px;
    margin-right: auto;
    margin-left: auto;
  }
  .divIzq1 {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    position: initial;
    justify-content: start;
    padding: 0;
  }

  .divDerList {
    width: 100%;
    text-align: left;
    padding-top: 30px;
  }
  .subtituloNegroM {
    color: #002E33;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 10px;
    text-align: left;
  }
  .containerPadding {
    padding: 30px;
  }

  .centrarContenido {
    text-align: left;
    padding: 0;
      padding-bottom: 0px;
    width: 100%;
  }
  .child {
    padding: 0;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  .child h1 {
    color: var(--bg-color-secundary-light);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
  }
  .botonBlanco:hover {
    background: #daf4ff;
    color: #002e34;
    padding: 10px 50px;
    text-decoration: none;
    border: solid 1px #daf4ff;
    border-radius: 50px;
    margin: 0px 10px 10px 0px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
  }
  .text-overlay h2{
    color: white;
    text-align: center;
    font-size: 1rem;
  }

 .text-overlay p {
    color: white;
    text-align: center;
    font-size: 0.5rem;
  }
  .divPortadaDobleAz {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-primary);
    padding: 100px 20px 30px 20px;
    margin-right: auto;
    margin-left: auto;
  }
  .divPortadaDobleAz2 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-primary);
    margin-right: auto;
    margin-left: auto;
    padding: 0px 30px 30px 30px;
  }
  .tituloClaroM {
    color: #daf4ff;
    font-size: 4rem;
    line-height: 1;
    font-weight: 500;
    text-align: left;
  }
  .filaTarjetas {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: solid 1px #2b2f5d1f;
  }
  .tarjetaX2List {
    width: 100%;
    text-align: left;
    padding: 0px 30px 30px 0px;
    margin: 0px 50px 0px 0px;
    border-bottom: solid 1px transparent;
  }
  .subtituloBlancoM {
    color: #daf4ff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    padding-bottom: 10px;
    text-align: left;
  }

  .containerPaddingTop {
    padding: 100px 10px 30px 10px;
    min-height: 100vh;
  }

  .containerPaddingTop2 {
    padding: 120px 30px 30px 30px;
    min-height: 100vh;
  }

  .contact-form {
    flex: 1;
  }
  .containerFormulario {
    justify-content: center;
    margin: 20px;
    display: flex;
    flex-direction: column;
  }
  .contact-form input, .contact-form textarea {
    padding: 8px;
    margin-bottom: 10px;
    border: none;
      border-bottom-color: currentcolor;
      border-bottom-style: none;
      border-bottom-width: medium;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    font-size: 16px;
    font-family: helvetica;
  }

  .galeriaResponsive {
    width: 100%;
    padding: 200px 50px 100px 50px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .divIdiomas{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
    z-index: 2;
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
    transition: background-color .6s cubic-bezier(.19,1,.22,1);
    transition: all 1s ease 0s;
    height: 70%;
    width: 90%;
    top: 220px;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    max-width: 90%;
  }
  
  .mi-div {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  transition: opacity 0.5s ease, height 0.5s ease;
  z-index: 2;
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
  transition: background-color .6s cubic-bezier(.19,1,.22,1);
  transition: all 1s ease 0s;
}
}