@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
:root {
  --color-arcadia: rgb(65, 0, 82);
  --color-back: rgb(231, 225, 229);
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;
  /* background: rgba(0, 100, 0, .1); */
}
body,
html {
  height: 100%;
}

html {
  /* scroll-behavior: smooth;  */
  font-family: "Montserrat", sans-serif;
  font-size: 1.2vw;
  /* scroll-snap-type: y proximity; */
}

input, textarea, button {
  font-family: inherit;
}

body {
  background: rgb(231, 225, 229);
  color: #4d4d4f;
  /* overflow-y: hidden; */
}
.onloading {
  overflow: hidden;
}
/*==============================================
 * Preloader
 * ==============================================
 */
 .top {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-back);
  /* transform: translate(-1vw,-1vw); */
  z-index: 999999999;
 }
 .preload {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
  transform-origin: .5vw 1.5vw;
  animation: preload 2s infinite linear;
}
.preload::before, .preload::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.preload::before {
  left: -0.8662vw;
  top: 1.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
}
.preload::after {
  left: 0.8662vw;
  top: 1.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
}



/* .preload {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
  transform-origin: .5vw 1.75vw;
  animation: preload 2s infinite linear;
}
.preload::before, .preload::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.preload::before {
  left: -1.29vw;
  top: 2.25vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
}
.preload::after {
  left: 1.29vw;
  top: 2.25vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: rgb(65, 0, 82);
} */

@keyframes preload {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}

/* section {
  border-top: 1px solid magenta;
  border-right: 1px solid greenyellow;
  border-bottom: 1px solid cyan;
  border-left: 1px solid orangered;
} */

p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 1rem;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2.7rem;
  line-height: 1;
  font-weight: 400;
  color: rgb(65, 0, 82);
}
h3 {
  font-size: 2.5rem;
  font-weight: 500;
  color: rgb(173, 162, 159);
}
h4 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #4d4d4f;
  margin-bottom: 1em;
  /* margin-top: 1em; */
}

h5 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #4d4d4f;
}
h6 {
  font-size: 1rem;
  font-weight: 700;
  color: #4d4d4f;
line-height: 1.6rem;
}

a {
  text-decoration: underline;
  color: purple;
}

header {
  padding: 0.5rem 2.5rem;
  position: fixed;
  z-index: 180;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(65, 0, 82, 0.9);
  transition: 1s ease-out;
}

.header-hidden {
  transform: translateY(-100%);
}

#menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: var(--color_back); */
}

#menu li::after {
  content: "|";
  color: #f9f8f8;
  margin: 0 1rem;
}
#menu li:last-child::after {
  content: "";

}
#menu a {
  color: #f9f8f8;
  text-decoration: none;
  transition: 1s;
}

#menu a:hover {
  color: white;
  transition: .5s;
}


footer {
  padding: 1rem 2rem 2rem 2rem;
  background: white;

}
.wrap-footer-arcadia {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: solid 2px #bdbdbd;
  
}

.footer-arcadia {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  
}
.icono-gris {
  width: 2rem;
  height: 2rem;
}
.texto-footer {
  margin-bottom: 0;
  font-weight: 500;
}

.social {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.social img {
  width: 1.8rem;
}




#arcadia {
  width: 8rem;
  height: 1.56rem;
  /* height: 41px; */
  background-image: url(../images/svg/arcadia_arena.svg);
  overflow: hidden;
  cursor: pointer;
}

#arcadia h1 {
  margin-top: 10vw;
}

#hamburguesa {
  display: none;
}

button {
  font-family: inherit;
}

.btn-cerrar {
  background: url(../images/svg/cierre.svg);
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  cursor: pointer;
  z-index: 180;
  color: #4d4d4f;
  font-size: 2.7rem;

}

.sombra {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, .2);
}


.avisoprivacidad {
  padding: 2rem;
}

.avisoprivacidad h3 {
  margin-bottom: 1rem;
}

/* #intro-lottie {
  height: 7800px;
  background-color: #007BFF;
  position: relative;
} */

/* #intro {
  position: absolute;
  top: 0;

} */

#intro-lottie {
  height: 800vh;
  background: #f6f2f6;
}

.intro-fix {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 102;
}

#intro-css {
  display: grid;
  place-items: center;
  height: 100vh;
  background: white;
  /* margin-top: 27vh; */
}

.desktop {
  display:block;
}
.movil {
  display: none;
}

#home {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-column-gap: 1rem;
  padding: 12rem 0;
  grid-template-columns: 1fr 4fr 6fr 1fr;
  /* scroll-snap-align: start; */
  background: white;
}

.servicios-botones {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr 2fr;
  grid-template-rows: repeat(2, auto);
  place-items: center;
}

#fortalezas {
  position: relative;
  height: 100vh;
  margin:10vh 0;
  display: grid;
  place-self: center;
  background: white;
  margin: 0;
}


#servicios {
  background:#f9f8f8;
  position: relative;
  min-height: 100vh;
  height: auto;
  padding:10vh 0;
  display: grid;
  place-self: center;
  z-index: 2;
}

#contacto {
  position: relative;
  width: 100%;
  height: 70%;
  margin:10vh 0;
  display: grid;
  place-self: center;
  z-index: 1;
}

#enviarmail {
  opacity: 0;
}


.wrapcontacto {
  width: 55vw;
  height: 21vw;
  margin: auto;
}

.citas {
  position: relative;
  overflow: hidden;
  font-family: 'Victor Mono', monospace;
  width: 51vw;
  height: 5vw;
}

.citas ul {
  width: 45vw;
  height: 5vw;
  position: relative;
  animation: frases 15s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.citas ul li {
  position: absolute;
  display: block;
  width: 45vw;
  height: 5vw;
  margin: auto;
  top: 200%;
}
.citas ul li:first-child {
  top: 100%;
}
.citas ul li:last-child {
  top: 300%;
}

@keyframes frases {
  0% {
    transform: translateY(0);
  }
  2%, 30% {
    transform: translateY(-100%);
  }
  34%, 62% {
    transform: translateY(-200%);
  }
  66%, 98% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(-400%);
  }
  
}


.boton-menu-servicios, .boton-menu-enfoque {
  width: 30vw;
  height: 14vw;
  margin-bottom: 5vw;
  text-align: center;
  position: relative;
  transition: all 500ms ease-out; 
  cursor: pointer;
  opacity:1;
  
}

.boton-menu-servicios.activo, .boton-menu-enfoque.activo {
  width: 30vw;
  height: 30vw;
  transition: all 500ms ease-out; 
}

.icono-titulo {
  width: 26vw;
  position: absolute;
  z-index: 10;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.boton-menu-servicios p, .boton-menu-enfoque p {
  position: absolute;
  z-index: 5;
  width: 30vw;
  height: 30vw;
  top: 0;
  left: 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0);
  opacity: 0;
  transform: scale(20%);
  clip-path: circle(20%);
  transition: all 500ms ease-in; 
}


.boton-menu-servicios.activo p, .boton-menu-enfoque.activo p {
  transform: scale(100%);
  opacity: 1;
  clip-path: circle(50%);
  transition: all 500ms ease-out;
  background: #f6f2f6;
  padding: 14vw 2rem 2rem 2rem;
}
.boton-menu-servicios .btn_cerrar, .boton-menu-enfoque .btn_cerrar {
  display: none;
}
.boton-menu-enfoque.activo .btn_cerrar,
.boton-menu-servicios.activo .btn_cerrar {
  display: block;
  width: 3rem;
  height: 3rem;
  position: absolute;
  z-index: 6;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/svg/cierre.svg);
}
.boton-menu-servicios.activo .btn_cerrar img {
  width: 100%;
}


.icono-servicios {
  width: 8vw;
  height: 8vw;
  margin: auto;

}
.icono-servicios img {
  width: 100%;
  height: auto;
}

.somosuna {
  width: 100%;
  height: 15vh;
  position: absolute;
  display: grid;
  place-self: center;
  text-align: center;
  color: rgb(59, 57, 56);
}

#estrategia {
  grid-column: 2/3;
}

#editoriales {
  grid-column: 4/5;

}

#grafico {
  grid-column: 2/3;

}

#serviciovideo  {
  grid-column: 4/5;

}


.texto-centrado {
  text-align: center;
}

#hola {
  opacity: 0;
  grid-column: 2/3;
  text-align: center;
  font-weight: 700;
  font-size: 8.1rem;
  color: rgb(144, 108, 133);
  position: relative;
  z-index: 110;
  transform: translateY(20vh);
  

}

#proyectos {
  background: #e7e1e5;
  width: 100%;
  height: 63vw;
  padding-top: 6rem;
  text-align: center;
  position: relative;
}
#proyectos h4 {
  margin-bottom: 2rem;
}

.menu-proyectos {
  width: 50vw;
  height: 50vw;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.lista-menu-proyectos {
  width: 50vw;
  height: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.lista-menu-proyectos h2 {
  color: #ada29f;
  transition: all 500ms ease-out;
}

.lista-menu-proyectos h2:hover {
  color: rgb(65, 0, 82);
  transition: all 500ms ease-out;
}

.circulo-proyectos {
  width: .1vw;
  height: .1vw;
  background-image: url(../images/fondo-lineas.gif);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
}


.titulos-proyectos {
  position: absolute;
  top:2rem;
  left: 2rem;
  margin-bottom: 2rem;
}

.controles {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 30;
}

.instruccion.activado {
  opacity: 1;
  transition: all .5s ease-out;
}

.instruccion {
  margin-left: -1.6rem;
  width: 7rem;
  opacity: 0;
  transition: all .5s ease-out;
}

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

.horizontal {
  height: 100vh;
  padding: 5rem 0 2rem 0;
  display: flex;
  flex-direction: row ;
  align-items: center;
  transition: transform .5s ease-out;
  /* background: magenta; */
}
.contenido-distroller {
  width: 550vw;
}

.contenido-posadas {
  width: 460vw;
}

.contenido-comex {
  width: 412vw;
}

.contenido-sams {
  width: 460vw;
}

.contenido-comfort {
  width: 546vw;
}

.contenido-bid {
  width: 184vw;
}

.contenido-daimler {
  width: 120vw;
}

.horizontal img {
  width: 100%;
}


.horizontal > div, .horizontal > div > div {
  margin: 0 1rem;
  /* border: 1px solid blueviolet; */
}

#fortalezas {
  background: white;
  width: 100%;
  height: auto;
  padding: 3rem 0;
  position: relative;
}

.titulo-enfoque {
  width: 100%;
  height: 7vh;
  position: absolute;
  display: grid;
  place-self: center;
  text-align: center;
}

.grid-enfoque {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  place-items: center;
  grid-gap: 1vw ;
  z-index: 60;
}

.conexion {
  grid-column: 1/2;
  grid-row: 1/3;
}

.estructura {
  grid-column: 2/3;
  grid-row: 1/2;
}
.pasion {
  grid-column: 2/3;
  grid-row: 2/3;
  z-index: 100;
}
.crecimiento {
  grid-column: 3/4;
  grid-row: 1/3;
}

.cursor-uno {
  background: var(--color-arcadia);
  opacity: 1;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  position: absolute;
  z-index: 200;
  pointer-events: none;
  transition: all 100ms ease-out;
}


/* °°°°°°°°°°°DISTROLLER --------- */
#virgencita {
  width: 50vw;
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin-left: 2rem;
}

.imagenvirgencita {
  width: 21vw;
}
.logo-distroller {
  width: 15vw;
  position: relative;
}
.ysuvirgencita {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.revistroller {
  width: 59vw;
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
}

.flecha-distroller-uno {
  position: absolute;
  width: 36vw;
  height: 18vw;
  top: -18vw;
  left: 0;
  z-index: 3;
}

.flechas-dobles-distroller {
  position: absolute;
  z-index: 10;
  top:0;
  left: 24vw;
  width: 18vw;
}

.flechas-yt {
  position: absolute;
  top: 11vw;
  right: -7vw;
  width: 10vw;
  height: 8vw;
  z-index: 20;
}

.fotorevistroller {
  width: 25vw;
  position: relative;
}

.texto-revistroller{
  width: 21vw;
}

.color, .color20 {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  transition: 2s;
}
.color.activo, .color20.activo {
  opacity: 1;
}

.sketch, .sketch0 {
  opacity: 0;
  transition: 2s;
}

.sketch.activo, .sketch0.activo {
  opacity: 1;
}

.inicial {
  opacity: 0;
  transition: 2s;
}

.inicial.activo {
  opacity: 1;
}

.apprevistroller {
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3,auto);
  align-items: end;
}

.experiencia-de-usuario {
  padding: 0 2rem;
}

.imagen-ipad-horizontal {
  width: 36vw;
  position: relative;
}

.storyboards {
  display: grid;
  grid-template-columns: repeat(4,auto);
  width: 131vw;
  align-items: center;
}

.texto-storyboards {
  width: 13vw;
  text-align: right;
}

.story-item {
  width: 36vw;
}

.overflowhidden {
  overflow: hidden;
}
.iconos-apps {
  width: 7vw;
  height: 27vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.iconos-social {
  width: 7vw !important;
}

.signo-mas {
  width: 5vw;
  height: 27vw;
  margin-left: 2rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.videos-distroller {
  width: 90vw;
  display: grid;
  grid-template-columns: repeat(4,auto);
  align-items: center;


}


.video-aspi {
  position: relative;
  width: 39vw;
}

.caja-video-aspi {
  position: absolute;
  top: 2vw;
  left: 1.5vw;
  width: 36vw;
  aspect-ratio: 16/9;
}

.video-16-9 {
  width: 100%;
  aspect-ratio: 16/9;
}


.video-chikitipun {
  width: 27vw;
  position: relative;
}

.caja-video-alushes {
  width: 21.3vw;
  aspect-ratio: 3/4;
  position: absolute;
  top: 2.8vw;
  left: 3vw;
}

.video-3-4 {
  aspect-ratio: 3/4;
  width: 100%;
}

.signo-mas-yt {
  width: 10vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.signo-mas-dos {
  width: 5vw;
  height: 11vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.icono-yt {
  margin-top: 7rem;
}

.social-media {
  width: 40vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2,auto);
}

.gifs-distroller {
  width: 34vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  align-items: center;
  justify-content: center;
}

.fb-distroller {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.iphone-izq {
  position: relative;
}
.caja-video-fb {
  width: 12vw;
  top: 4vw;
  left: 1.7vw ;
  position: absolute;
  aspect-ratio: 9/16;
}

.caja-video-fb video {
  width: 100%;
  aspect-ratio: 9/16;
}

.ig-distroller {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.caja-video-ig {
  position: absolute;
  width: 12.5vw;
  top: 8vw;
  left: 1.7vw;
  aspect-ratio: 1/1;
}

.caja-video-ig video {
  width: 100%;
  aspect-ratio: 1/1;
}



/* *****************PRUEBAS DE CANVAS  */
#canvas1 {
 /* position: absolute;*/
  background: black;
  /* width: 100%;
  height: 100%;*/
  /* top: 0;
  left: 0;  */
}



/***********************PRUEBAS SLIDER *********/

input[type="range"] {
  /* -webkit-appearance: none; */
  accent-color: var(--color-arcadia);
  width: 100%;
  height: 1px;
  background: rgb(173, 162, 159);
}

.slider-control {
  display: none;
  height: 16px;
  width: 16px;
  background:rgb(65, 0, 82); 
  border-radius: 50%;
  position: absolute;
  top:0.5rem;
  left:0;
  z-index: 40;
}



/* FORMA DE CONTACTO __________________________________________ */



#contact-form {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  place-content: center;
  gap: 1vw;
  width: 100%;
  margin: 0 auto;
}

#nombre {
  grid-column: 1/3;
  grid-row: 1/2;
}
#email {
  grid-column: 3/4;
  grid-row: 1/2;
}
#mensaje{
  grid-column: 1/-1;
  grid-row: 2/3;
}

label {
  display: block;
  margin-top: 10px;
}

input[type="text"], input[type="email"], textarea
{
  display:block;
  width: 100%;
  height: 3rem;
  border-radius: 1.5rem;
  padding: .6rem 1.2rem;
  font-size: 1rem;
  border: 1px solid rgb(59, 57, 56);

}

textarea {
  width: 100%;
  resize: none;
}

.enviar {
  grid-column: 2/3;
  width: 100%;
  height: 3rem;
  background-color: rgb(65, 0, 82);
  color: white;
  padding: .6rem 2rem;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.enviar:hover {
  background-color: rgb(49, 0, 61);
}

/* fichas tecnicas */

.ficha-tecnica {
  margin: auto 10vw !important;
  width: 30vw;
}

.campo-ficha-tecnica {
  height: auto;
  width: 26vw ;
  padding: .18rem 1.2rem;
  border:solid 1px #4d4d4f;
  border-radius: 2rem;
  margin: 1.2rem !important;
}

.campo-ficha-tecnica p {
  font-size: .8rem;
  margin-top: 1rem;
}

.campo-ficha-tecnica span {
  font-weight: 700;
}


/* daimler */

/* .portadas-texto-daimler {
  width: 40vw;
  align-items: center;
} */

.portada-daimler {
  display: flex;
  align-items: center;
  width: 23vw;

}

.colaboramos {
  width: 21vw;
  margin: 6rem;
}



/* comfort */
.bocetos-comfort {
  width: 18vw;
  position: relative;
}

.logos {
  padding: 2rem;
}

.flecha-logos-comfort {
  width: 40vw;
  height: 10vw;
  position: absolute;
  top: 17vw;
  left: 13vw;
  z-index: 10;
}

.texto-branding {
  width: 16vw;
  position: relative;
}

.flecha-papeleria {
  width: 30vw;
  height: 10vw;
  position: absolute;
  top: -15vw;
  left: -2vw;
  z-index: 20;
}

.logo-comfort {
  width: 27vw;
  position: relative;
}

.papeleria {
  width: 33vw;
  position: relative;
}

.bocetos-comfort-star {
  width: 14vw;
  position: relative;
}

.flechas-logos-star {
  width: 15vw;
  height: 10vw;
  position: absolute;
  top: 26vw;
  left: 15vw;
}

.logo-comfort-star {
  width: 32vw;
  position: relative;
}

.flechas-logos-body {
  width: 11vw;
  height: 10vw;
  position: absolute;
  top: 20vw;
  left: 18vw;
  z-index: 30;
}

.polaroid {
  display: flex;
  height: 64vh;
}

.flecha-polaroid {
  width: 20vw;
  height: 10vw;
  position: absolute;
  top: -15vw;
  left: 1vw;
  z-index: 40;
}

/* sams */

.portada-sams {
  width: 27vw;
}

.portada-sams p {
  margin-left: 1rem;
}

.caja-portada-sams {
  position: relative;
}

.portada-sams-color {
  position: absolute;
  top:0;
  left: 0;
}

.signo-igual {
  width: 5vw;
  height: 27vw;
  margin-left: 2rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.revista-socio {
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  place-items: center;
}

.bowls-uno {
  width: 27vw;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
}

.texto-bowls {
  grid-column: 2/3;
  grid-row: 1/2;
}

.bowls-dos {
  width: 27vw;
  grid-column: 1/3;
  grid-row: 2/3;
  position: relative;
}

.bowls-uno img, .bowls-dos img {
  width: 100%;
}

.fotos-objetos {
  width: 26vw;
  position: relative;
}

.spred-papa {
  width: 32vw;
  position: relative;
}

.spred-papa-dos {
  width: 27vw;
  grid-column: 1/2;
  grid-row: 1/2;
}

.spred-papa-tres {
  width: 27vw;
  grid-column: 2/3;
  grid-row: 1/2;
}

.texto-spred-papa {
  grid-column: 1/3;
  grid-row: 2/3;
  padding-right: 6vw;
}

.producciones-especiales {
  width: 54vw;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  
}

.texto-producciones {
  grid-column: 1/2;
}

.portada-sketch-navidad {
  width: 32vw;
  grid-column: 2/3;
}

/* comex */

.portada-comex {
  width: 27vw;
  padding-top: 3rem;
}

.caja-portada-comex {
  width: 25vw;
  margin-bottom: 4rem !important;
  position: relative;
}

.caja-laptop {
  width: 36vw;
  position: relative;
}

.flecha-comex-uno {
  width: 35vw;
  height: 10vw;
  top: 9vw;
  left: 21vw;
  position: absolute;
  z-index: 10;
}

.ipad-comex {
  width: 33vw;
  position: relative;
}

.caja-video-tea 
{
  position: absolute;
  top: 6vw;
  left: 5.5vw;
  width: 22vw;
  aspect-ratio: 16/9;
}

.avioncito {
  width: 20vw;
  height: 10vw;
  position: absolute;
  top: 1vw;
  left: -18vw;
  z-index: 20;
}

.flechas-dobles-comex {
  width: 17vw;
  height: 10vw;
  position: absolute;
  top: 5vw;
  left: 33vw;
  z-index: 30;
 
  
}

.laptop-girada {
  width: 48vw;
}

.ipad-horizontal {
  width: 36vw;
}

.laptop-frente {
  width: 81vw;
  display: grid;
  grid-template-columns: auto auto auto;
}

.texto-lap {
  position: relative;
  z-index: 1;
  width: 20vw ;
}

.laptop-comex {
  position: relative;
  width: 45vw;
}

.caja-video-comex {
  position: absolute;
  top: 5.4vw;
  left: 8.7vw;
  width: 27vw;
  aspect-ratio: 16/9;
}



.redes-verticales {
  width: 7vw;
}

.artes {
  width: 33vw;
  height: 33vw;
  position: relative;
}

.elemento {
  position: absolute;
  top:0;
  left: 0;

}

.container-artes {
 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* place-items: center; */
}

.carta-uno {
  grid-column: 3/5;
  grid-row: 1/2;
}

.carta-dos {
  grid-column: 4/6;
  grid-row: 2/3;
  margin-top: -8vw;
}

.carta-tres {
  grid-column: 2/4;
  grid-row: 2/4;
  margin-top: 2vw;
  margin-left: 4vw;
}

.arte-uno {
  grid-column: 1/2;
  grid-row: 1/2;
}

.arte-dos {
  grid-column: 2/3;
  grid-row: 2/3;
}

.arte-unico {
  grid-column: 1/-1;
  grid-row: 1/-1;
  padding: 1rem;
}

.fotos-objetos {
  width: 27vw;
  height: 27vw;
  position: relative;
}

.texto-comunicacion-grafica {
  width: 17vw;
}

.sombra {
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, .2);
}

.portada-posadas {
  width: 33vw;
  padding-top: 3rem;
}

.caja-portada-posadas {
  width: 25vw;
  margin-bottom: 4rem !important;
  position: relative;
}

.texto-portada {
  width: 27vw;
}

.texto-portada-comex {
  width: 18vw;
  margin-top: 12rem !important;
}

.texto-portadas-bid {
  width: 18vw;
  /* margin-top: 12rem !important; */
}

.spreds-posadas {
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
}

.spred-uno {
  width: 27vw;
  grid-column: 1/2;
  grid-row: 1/3;
}

.spred-dos {
  width: 27vw;
  grid-column: 2/3;
  grid-row: 2/4;
}

.texto-comunicacion {
  width: 17vw;
  place-items: center;
  text-align: center;
}



.flecha-citas {
  width: 30vw;
  height: 10vw;
  position: absolute;
  top: -15vw;
  left: 42vw;
  z-index: 10;
}

.laptop {
  width: 54vw;
  position: relative;
}

.flecha-viaja {
  width: 10vw;
  height: 10vw;
  position: absolute;
  top: 5vw;
  left: 39vw;
}

.texto-viaja {
  width: 17vw;
  place-items: center;
  text-align: center;
  position: relative;
}

.flecha-viaja-dos {
  width: 9vw;
  height: 10vw;
  position: absolute;
  top: -3vw;
  left: 17vw;
  z-index: 20;
}


/* bid */
.portadas-texto {
  display: flex;
  align-items: center;
  width: 40vw;
}

.plan-maestro {
  display: flex;
  align-items: center;
  width: 40vw;

}

.hemos {
  width: 40vw;
}





/* ------------------------------------ */

@media (max-width: 768px) {
  html {  
    font-size: 3.3vw;
    /* scroll-snap-type: y proximity; */
  }
  #header {
    height: auto;
  }
  #menu {
    padding: 2rem;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 3.3rem;
    left: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-arcadia);
  }

  #menu li {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.8rem;
    border-bottom: 1px solid gray;
  }

  #menu li::after {
    content: "";
    margin-left: 1rem;
  }

  #menu.active {
    display: flex;
  }

  #hamburguesa {
    display: block;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-back);
    cursor: pointer;
  }
  .desktop {
    display:none;
  }
  .movil {
    display: block;
  }
  #home {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,auto);
  }
  #hola {
    grid-column: 1/-1;
    grid-row: 2/3;
  }
  #somos-arcadia {
    grid-column: 1/-1;
    grid-row: 3/4;
    padding: 2rem;
  }

  .servicios-botones {
    margin-top: 24vh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,auto)
  }

  #proyectos {
    height: 100vh;
    overflow-x: hidden;
  }
  #proyectos h4 {
    margin-top: 10vh;
  }
  .menu-proyectos {
    height: 100vh;
  }
  .lista-menu-proyectos {
    height: 80vh;
  }

  .titulos-proyectos {
    width: 70vw;

  }

  .cursor-uno {
    display: none;
  }

  #estrategia {
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  #editoriales {
    grid-column: 1/-1;
    grid-row: 2/3;
  }
  #grafico {
    grid-column: 1/-1;
    grid-row: 3/4;
  }
  #serviciovideo {
    grid-column: 1/-1;
    grid-row: 4/5;
  }
  .boton-menu-servicios, .boton-menu-enfoque {
    width: 80vw;
    height: 40vw;
    margin-bottom: 0;
    text-align: center;
    position: relative;
    z-index: 50;
    transition: all 500ms ease-out; 
    cursor: pointer;
    opacity:1;
    
  }
  
  .boton-menu-servicios.activo, .boton-menu-enfoque.activo {
    width: 80vw;
    height: 80vw;
    transition: all 500ms ease-out; 
  }

 

  .icono-titulo {
    width: 36vw;
    position: absolute;
    z-index: 10;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .boton-menu-servicios p, .boton-menu-enfoque p {
    position: absolute;
    z-index: 5;
    width: 80vw;
    height: 80vw;
    top: 0;
    left: 0;
    padding: 11rem 2rem 2rem 2rem !important;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    transform: scale(20%);
    clip-path: circle(20%);
    transition: all 500ms ease-in; 
  }
  
  
  .boton-menu-servicios.activo p, .boton-menu-enfoque.activo p {
    transform: scale(100%);
    opacity: 1;
    clip-path: circle(50%);
    transition: all 500ms ease-out;
    padding: 40vw 2rem 2rem 2rem;
  }

  .icono-servicios {
    width: 18vw;
    height: 18vw;
    margin: auto;
  
  }

  .somosuna {
    width: 100%;
    height: 20vh;
    top: 10vh;
  }

  .grid-enfoque {
    margin-top: 10vh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,auto);
  }

  .conexion {
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  
  .estructura {
    grid-column: 1/-1;
    grid-row: 2/3;
  }
  .pasion {
    grid-column: 1/-1;
    grid-row: 3/4;
    z-index: 100;
  }
  .crecimiento {
    grid-column: 1/-1;
    grid-row: 4/5;
  }

  .titulo-enfoque {
    width: 100%;
    height: 10vh;
    top: 3vh;
  }

  #virgencita {
    width: 120vw;
    max-height: 90vh;
  }

  .imagenvirgencita {
    width: 70vw;
  }

  .ysuvirgencita {
    width: 42vw;
  }
  .logo-distroller {
    width: 30vw;
  }
  .flecha-distroller-uno {
    width: 60vw;
  }

  .revistroller {
    width: 160vw;
  }

  .fotorevistroller {
    width: 70vw;
  }

  .texto-revistroller {
    width: 50vw;
  }

  .signo-mas {
    width: 15vw;
  }

  .signo-mas-yt {
    width: 20vw;
  }
  .signo-mas-dos {
    width: 15vw;
  }
  .signo-igual {
    width: 20vw;
  }

  .apprevistroller {
    width: 140vw;
  }

  .imagen-ipad-horizontal {
    width: 80vw;
  }

  .iconos-apps {
    width: 15vw;
    height: 50vw;
  }

  .flechas-dobles-distroller {
    width: 40vw;
    left: 60vw;
  }

  .storyboards {
    width: 300vw;
  }
  .texto-storyboards {
    width: 30vw;
  }

  .story-item {
    width: 80vw;
  }


  .contenido-distroller {
    width: 1359vw;
    height: 100vh;
  }

  .video-aspi {
    width: 80vw;
  }
  .caja-video-aspi {
    width: 76vw;
  }
  .videos-distroller {
    width: 210vw;
  }
  .video-chikitipun {
    width: 54vw;
  }
  .caja-video-alushes {
    width: 48vw;
  }
  .social-media {
    width: 102vw;
  }
  .gifs-distroller {
    width: 84vw;
  }
  .caja-video-fb {
    width: 29vw;
    left: 4vw;
    top: 8vw;
  }
  .caja-video-ig {
    width: 31vw;
    top:20vw;
    left: 4vw;
  }

  .iconos-social {
    width: 15vw !important;
  }

  .ficha-tecnica {
    width: 80vw;
  }

  .campo-ficha-tecnica {
    width: 90vw;
  }

  .wrapcontacto {
    width: 80vw;
    height: 39vh;
  }





  /* POSADAS */
  
 

  .portada-posadas {
    width: 80vw;
  }

  .caja-portada-posadas {
    width: 80vw;
  }

  .texto-portada, .texto-portada-comex {
    width: 60vw;
  }

  .texto-portadas-bid {
    width: 70vw;
  }

  .spreds-posadas {
    width: 130vw;
  }

  .spred-uno {
    width: 60vw;
  }

  .spred-dos {
    width: 60vw;
  }
  
  .texto-comunicacion {
    width: 60vw;
  }

  .texto-viaja {
    width: 60vw;
  }





  .citas {
    position: relative;
    overflow: hidden;
    font-family: 'Victor Mono', monospace;
    font-size: 1rem;
    width: 90vw;
    height: 20vw;
  }
  
  .citas ul {
    width: 90vw;
    height: 20vw;
    position: relative;
    animation: frases 15s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  }
  
  .citas ul li {
    position: absolute;
    display: block;
    width: 90vw;
    height: 20vw;
    margin: auto;
    top: 200%;
  }
  .citas ul li:first-child {
    top: 100%;
  }
  .citas ul li:last-child {
    top: 300%;
  }

  .laptop {
    width: 80vw;
  }

  .contenido-posadas {
    width: 1122vw;
  }


  /* COMEX */

  .portada-comex {
    width: 81vw;
  }

  .caja-portada-comex {
    width: 81vw;
  }

  .caja-laptop {
    width: 80vw;
  }
 

  .laptop-girada {
    width: 80vw;
  }

  .ipad-horizontal {
    width: 80vw;
  }

  .ipad-comex {
    width: 80vw;
  }

  .caja-video-tea {
    width: 52vw;
    top: 15vw;
    left: 14vw;
  }

  .laptop-frente {
    width: 160vw;
  }

  .artes {
    width: 70vw;
    height: 70vw;
  } 
  .texto-lap {
    width: 48vw;
  }
  .laptop-comex {
    width: 80vw;
  }
  .caja-video-comex {
    top: 9vw;
    left: 15vw;
    width: 50vw;
  }
  .flechas-dobles-comex {
    width: 34vw;
    height: 20vw;
    top:10vw;
    left: 50vw;
  }
  .redes-verticales {
    width: 15vw;
  }
  .texto-comunicacion-grafica {
    width: 40vw;
  }

  .fotos-objetos {
    width: 60vw;
    height: 60vw;
  }
  .contenido-comex {
    width: 972vw;
  }

  /* SAMS */
  .portada-sams {
    width: 80vw;
  }

  .revista-socio {
    width: 120vw;
  }

  .bowls-uno {
    width: 60vw;
  }
  .bowls-dos {
    width: 60vw;
  }

  .fotos-objetos {
    width: 80vw;
  }
  .spred-papa {
    width: 64vw;
  }

  .spred-papa-dos {
    width: 54vw;
  }
  .spred-papa-tres {
    width: 54vw;
  }

  .producciones-especiales {
    width: 110vw;
  }

  .portada-sketch-navidad {
    width: 64vw;
  }

  .contenido-sams {
    width: 1085vw;
  }



 /* COMFORT SOLUTIONS */

  .bocetos-comfort {
    width: 60vw;
  }
  .texto-branding {
    width: 70vw;
  }
  .logo-comfort {
    width: 84vw;
  }
  .papeleria {
    width: 90vw;
  }
  .bocetos-comfort-star {
    width: 50vw;
  }
  .logo-comfort-star {
    width: 84vw;
  }
  .polaroid {
    width: 234vw;
    height: 50vh;
  }

  .polaroid img {
    max-width: 80vw;
  }

  .contenido-comfort {
    width: 1650vw;
  }


  /* BID */

  .portadas-texto{
    width: 90vw;
  }

  .plan-maestro {
    width: 80vw;
  }

  .contenido-bid {
    width: 460vw;
  }
  
  #contact-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,1fr);
  }

  #nombre {
    grid-column: 1/-1;
    grid-row: auto;
  }
  #email {
    grid-column: 1/-1;
    grid-row: auto;
  }
  #mensaje {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .enviar {
    grid-column: 1/-1;
    grid-row: auto;
  }


  /* DAIMLER */

  .contenido-daimler {
    width: 300vw;
  }

  .portada-daimler {
    display: flex;
    align-items: center;
    width: 80vw;
  
  }
  
  .colaboramos {
    width: 80vw;
    margin: 6rem;
  }
  
}