*{ margin: 0; padding: 0; box-sizing:border-box; transition: all 1s;}


html {scroll-behavior: smooth; min-height: 100%; position: relative;}
a {transition-duration: 0s;}
body {position: relative; background-color: #000000 !important;}


.mt-6 {margin-top: 4rem !important;}
.mt-7 {margin-top: 5rem !important;}
.mt-8 {margin-top: 6rem !important;}
.mt-9 {margin-top: 7rem !important;}
.mt-10 {margin-top: 8rem !important;}

.mb-6 {margin-bottom: 4rem !important;}
.mb-7 {margin-bottom: 5rem !important;}
.mb-8 {margin-bottom: 6rem !important;}
.mb-9 {margin-bottom: 7rem !important;}
.mb-10 {margin-bottom: 8rem !important;}

.ps-6 {padding-left: 4rem !important;}
.ps-7 {padding-left: 5rem !important;}
.ps-8 {padding-left: 6rem !important;}
.ps-9 {padding-left: 7rem !important;}
.ps-10 {padding-left: 8rem !important;}

.pe-6 {padding-right: 4rem !important;}
.pe-7 {padding-right: 5rem !important;}
.pe-8 {padding-right: 6rem !important;}
.pe-9 {padding-right: 7rem !important;}
.pe-10 {padding-right: 8rem !important;}



/* HOME ---------------------------------------------------------------------------------------------------------------------------------*/

.main-home {position: relative}

.body-index {background-color: #ffffff !important;} 

.hero {display: flex; justify-content: left; align-items: center; width: 100vw !important; height: 100svh !important; overflow: hidden;} 
.hero picture {display: block; width: 100%; height: 100%;}
.hero picture img {width: 100%; height: 100%; object-fit: cover;}
.hero h1 {position: absolute; font-family: "Blinker", sans-serif; font-weight: 600; font-size: clamp(3rem, 5vw, 8rem); color: #523ead; padding-left: 9rem; line-height: 100%; letter-spacing: -1px; word-spacing: 5px; text-shadow: 2px 2px 6px #2919738f;}


/*NAV*/
.navbar {height: 4rem; padding: 0rem 4rem !important;  transition: background-color 3s; background-color: transparent;}
.navbar.scrolled {background-color: #42e7ffb5; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.navbar img {margin-top: 0.7rem;}
.barra {font-family: "Work Sans", sans-serif; font-weight: 400 !important; font-size: 0.9rem !important;}
/*.navbar-nav {align-items: end;}*/
.navbar-collapse {flex-grow: unset !important;}
.nav-link {margin: 0rem 0.25rem; padding-bottom: 0.4rem !important; line-height: 75%; color:#000000 !important;}
.nav-link:hover {font-weight: 600; color:#000000 !important; background-color: #6df1d17d !important;}
.nav-link.active {font-weight: 600; color:#000000 !important; background-color: #6df1d1 !important;}
.navbar-nav {padding-top: 1rem;}

.intro {margin-top: 5rem;}
.intro h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 3rem; color: #099db9; line-height: 105%; letter-spacing: 0px; word-spacing: 3px;}
.intro p {font-family: "Blinker", sans-serif; font-weight: 300; font-size: 2.25rem; color: #099db9; line-height: 105%; letter-spacing: 0px; word-spacing: 3px; text-wrap: balance;}
.intro .btn-primary {font-family: "Work Sans", sans-serif !important; font-weight: 600 !important; font-size: 1.125rem !important; color: #ffffff !important; background-color: #40c2db !important; border-color: #40c2db !important; margin-top: 0.5rem; padding: 0.3rem 1.125rem 0.5rem; box-shadow: 1px 2px 5px #126373d4; border-radius: 25px;}
.intro .btn-primary:hover {color: #ffffff !important; background-color: #523ead !important; border-color: #523ead !important; box-shadow: 1px 2px 5px #523ead;}
.intro .btn-primary:active {color: #fff900 !important; background-color: #523ead !important; border-color: #523ead !important;}

.parallax {
  margin-top: 3rem;
  background-image: url("../img-index/parallax/lobo-gris-home-parallax-2560.webp");
  min-height: 32rem;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* iOS Safari - desactiva "background-attachment: fixed" */
@supports (-webkit-touch-callout: none) {
  .parallax {
    background-attachment: scroll !important;
  }
}

.items-home {margin: 7rem 0rem 10rem;}
.items-home p:nth-child(2) {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 1.85rem; color: #9b4ec9; line-height: 110%; letter-spacing: 0px; word-spacing: 3px;}
.items-home p:nth-child(3) {font-family: "Work Sans", sans-serif; font-weight: 400; font-size: 1.25rem; color: #555555; line-height: 120%;}

.home-txt {margin-top: 6rem; padding: 2.5rem 0rem 0rem; background-color: #06212f;}
.home-txt h3 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 1.75rem; color: #40c2db; line-height: 110%; letter-spacing: 0px; word-spacing: 3px; margin-bottom: 1.25rem;}
.home-txt p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #878787; line-height: 150%; margin-bottom: 1.25rem;}
.home-txt .recuadro {position: relative; top: -8rem; border-radius: 25px; padding: 3rem 2rem 4rem 3rem; background-color: #2d4957; box-shadow: 5px 7px 11px 1px #000000a1;}
.home-txt .recuadro h3 {color: #ff692c;}
.home-txt .recuadro h4 {font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 1.125rem; color: #aeeffb;}
.home-txt .recuadro p {color: #aeeffb;}
.home-txt .recuadro .btn-primary {font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 1.125rem; color: #ffffff !important; background-color: #40c2db !important; border-color: #40c2db !important; margin-top: 0.5rem; padding: 0.3rem 1.125rem 0.5rem; box-shadow: 1px 2px 5px #05353fd4; border-radius: 25px;}
.home-txt .btn-primary:hover {color: #ffffff !important; background-color: #523ead !important; border-color: #523ead !important; box-shadow: 1px 2px 5px #0c232f;}
.home-txt .btn-primary:active {color: #fff900 !important; background-color: #523ead !important; border-color: #523ead !important;}

.home-logo-end {margin-top: 7rem; margin-bottom: 4rem;}
.home-logo-end img:nth-child(2) {width: 30rem !important; height: auto;}


/*whatsapp*/
.wap {display: flex; justify-content: center; align-items: center; position: fixed; right: 0rem; bottom: 2rem; width: 3.75rem; height: 3.75rem; z-index: 10000; background-color: #25d366; border-radius: 100% 0% 0% 100%; transform: scale(1); box-shadow: none; transition: transform 0.7s, box-shadow 0.7s; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px);}
.wap:hover {transform: scale(1.10); box-shadow: 0px 0px 18px 6px #25d36673;}
.wap img {width: 2.25rem; margin-left: 0.25rem; filter: drop-shadow(1px 1px 1px #1ca14d);}


/* language switcher */
.language-switcher {position: fixed; top: 5rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 10005;}
.language-switcher__option {display: inline-flex; align-items: center; gap: 0.55rem; min-width: 7rem; padding: 0.55rem 0.8rem; border: 1px solid #d6ebef; border-radius: 999px; background-color: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 24px #0000001a; color: #06212f; font-family: "Work Sans", sans-serif; font-size: 0.9rem; font-weight: 600; line-height: 1; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.language-switcher__option:hover {transform: translateY(-1px); color: #06212f; background-color: #ffffff; box-shadow: 0 12px 26px #00000024;}
.language-switcher__option.is-active {border-color: #099db9; background-color: #daf7fc;}
.language-switcher__flag {font-size: 1.1rem; line-height: 1;}


@media (max-width: 768px) {
  .language-switcher {top: 4.65rem; right: 0.75rem; gap: 0.35rem;}
  .language-switcher__option {min-width: 6.25rem; padding: 0.5rem 0.7rem; font-size: 0.8rem;}
}


/* Footer */

.nav2 nav a {font-family: "Roboto", sans-serif; font-weight: 350; font-optical-sizing: auto; font-size: 1.1rem; color: #757575; padding: 0 0.5rem;}
.nav2 nav a:hover {color: #ff692c; text-decoration: none;}
.line-home {border-style: inset; border-width: 1px; margin: 1rem 0rem 1.5rem;}
.footer {position: relative; bottom: 0; width: 100%; padding-bottom: 3rem; margin-top: 1rem; text-align: center;}
.footer p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 0.95rem; color: #757575; margin-bottom: 0.20rem;}
.footer a {color: #1772ac; text-decoration: none;}
.footer a:hover {color: #ff692c; text-decoration: underline;}
.footer .creditos {margin-top: 0.85rem; text-align: center;}
.footer .creditos p {font-size: 0.8rem; color: #757575; margin-top: 0.3rem;} 
.footer .creditos img:last-child {display: none;}
.footer .creditos:hover img:last-child {display: unset;}
.footer .creditos:hover img:first-child {display: none;}



/* SECCIONES ---------------------------------------------------------------------------------------------------------------------------------*/

.seccion {margin-top: 5.5rem;}
.seccion h1 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 3.5rem; color: #523ead; letter-spacing: 0.25rem; word-spacing: 5px; margin-bottom: 3rem;}



/* NOSOTROS */

.nosotros-txt {margin-top: 1.25rem;}

.nosotros-txt h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 1.75rem; color: #099db9; line-height: 110%; letter-spacing: 0px; word-spacing: 3px; margin-bottom: 1.25rem; text-wrap: balance;}
.nosotros-txt p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #878787; line-height: 160%; margin-bottom: 1.25rem;}
.nosotros-txt .destacado h2 {font-size: 2.75rem; line-height: 90%; margin-bottom: 1.5rem; color: #099db9; text-wrap: balance;}
.nosotros-txt .destacado p {font-family: "Work Sans", sans-serif; font-weight: 320; font-size: 1.5rem; letter-spacing: -0.04rem; word-spacing: -0.05rem; line-height: 140%; color: #ff692c;}

.nosotros-lobo {position: absolute; top: 46rem; z-index: -5;}

.nosotros-frases {margin-top: 7rem; margin-bottom: 4rem;}
.nosotros-frases h3 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 1.85rem; color: #523ead; line-height: 110%; letter-spacing: 0px; word-spacing: 3px; margin-bottom: 0.125rem;}
.nosotros-frases p {font-family: "Work Sans", sans-serif; font-weight: 320; font-size: 1.50rem; letter-spacing: -0.04rem; word-spacing: -0.05rem; line-height: 140%; color: #757575; margin-bottom: 2rem;}

.nosotros-cta {margin-bottom: 7rem;}
.nosotros-cta p {font-family: "Blinker", sans-serif; font-weight: 300; font-size: 2.125rem; color: #099db9; line-height: 105%; letter-spacing: 0px; word-spacing: 3px;}
.nosotros-cta .btn-primary {position: relative; right: 0.18rem; font-family: "Work Sans", sans-serif !important; font-weight: 600 !important; font-size: 1.125rem !important; color: #ffffff !important; background-color: #40c2db !important; border-color: #40c2db !important; margin-top: 0.5rem; padding: 0.3rem 1.125rem 0.5rem; box-shadow: 1px 2px 5px #126373d4; border-radius: 25px;}
.nosotros-cta .btn-primary:hover {color: #ffffff !important; background-color: #523ead !important; border-color: #523ead !important; box-shadow: 1px 2px 5px #523ead;}
.nosotros-cta .btn-primary:active {color: #fff900 !important; background-color: #523ead !important; border-color: #523ead !important;}



/* SERVICIOS */

.contacto-main {position: unset;}

.servicios img {position: relative; left: -0.25rem; width: 1.75rem; height: auto; margin-bottom: 1rem;}
.servicios h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 3.4rem; color: #099db9;}
.servicios h3 {font-family: "Blinker", sans-serif; font-weight: 400; color: #099db9; letter-spacing: -0.10px; hyphens: manual; lang="es";}
.servicios p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1.2rem; color: #585858; line-height: 145%;}
/*.servicios p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #585858; line-height: 160%;} Viejo servicios con texto largo */

.tecnologias {position: relative; padding: 4.75rem 0rem 1rem;}
.tecnologias h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 3.4rem; color: #ff692c; margin-bottom: 2.75rem; margin-top: 4.75rem;}
.tecnologias h3 {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 1.5rem; color: #ff692c; text-wrap: balance; max-inline-size: clamp(20ch, 70%, 40ch);}
.tecnologias p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1.2rem; color: #a9a9a9; line-height: 130%; margin-bottom: 0.75rem;}
/*.tecnologias p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #878787; line-height: 150%; margin-bottom: 0.75rem;} texto largo */
.tecnologias-fondo {position: absolute; width: 100%; height: 100%; background-color: #06212f; z-index: -1; display: flex; justify-content: end; align-items: end; overflow: hidden;}

.proceso {margin: 11rem 0rem 5rem;}
.proceso h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 3.4rem; color: #099db9; margin-bottom: 1rem;}
.proceso h3 {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 1.8rem; color: #099db9; margin-bottom: 1rem;}
.proceso p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1.1rem; color: #585858; margin-bottom: 0.75rem;}
/* .proceso p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #585858; margin-bottom: 0.75rem;}  textp largo */
.proceso .num {position: relative; left: -0.2rem; font-family: "Blinker", sans-serif; font-weight: 300; font-size: 14.5rem; line-height: 100%; margin-top: 0rem; margin-bottom: 0rem; color: #ff804c;}
.proceso .num.uno {left: -1.2rem;}
.proceso .nosotros-cta .btn-primary {display: inline-block; font-size: 1rem !important; padding-top: 0.5rem !important; margin-top: 0rem !important;}
.proceso .nosotros-cta {margin-bottom: 0rem !important;}
.proceso-fondo {position: absolute; bottom: 0rem; right: 0rem; display: flex; justify-content: end; align-items: end; overflow: hidden; z-index: -100;}



/* PORTFOLIO */


.destacado {margin-top: 0.5rem;}
.destacado h2 {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 2.75rem; color: #099db9; line-height: 110%; margin: 0.5rem 0rem 0.25rem;}
.destacado p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1.1rem; color: #585858; line-height: 160%; margin-bottom: 0rem; hyphens: manual; lang="es";}
.video {background-color: #06212f; padding: 3rem; cursor: pointer;}
.video p {font-family: "Roboto", sans-serif; font-weight: 350; color: #82b2ba !important; font-size: 1.2rem !important; line-height: 150% !important; text-wrap: balance;}
.video video {width: 100%; height: auto;}

.portfolio {margin: 14rem 0rem 12rem;}
.portfolio h2 {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 2rem; color: #099db9; line-height: 110%; text-wrap: balance; max-inline-size: clamp(20ch, 70%, 40ch);}
.portfolio p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1.1rem; color: #585858; line-height: 160%;}
.portfolio img, .portfolio video {border: 1px solid #cccccc; border-radius: 2.5rem; box-shadow: 2px 6px 20px 1px #00000040;}
.portfolio video {border: none; cursor: pointer;}
.portfolio .btn-primary {font-size: 1.125rem !important; color: #099db9 !important; background-color: #ffffff !important; border-color: #099db9 !important; box-shadow: none; padding: 0.125rem 0.85rem 0.25rem !important;}
.portfolio .btn-primary:hover {color: #ffffff !important; background-color: #099db9 !important; border-color: #099db9 !important; box-shadow: none;}
.portfolio .btn-primary:active {color: #fff900 !important; background-color: #099db9 !important; border-color: #099db9 !important;}

.portfolio-frase {height: 100vh; background-image: url("../portfolio/img/portfolio-fondo-frase-2560-x1.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; /*background-image: radial-gradient(circle, #2d4957, #000000)*/; margin-bottom: 6rem;}
.portfolio-frase p {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 6rem; color: #40c2db; line-height: 100%; text-wrap: balance; max-inline-size: clamp(20ch, 70%, 40ch); margin-bottom: 1.25rem; letter-spacing: -0.1rem;}
.portfolio-frase p:nth-child(2) {font-weight: 300; font-size: 3.5rem; color: #dfdfdf; line-height: 105%; letter-spacing: 0;}
.portfolio-frase .btn-primary {font-size: 1.1rem !important; color: #afafaf !important; background-color: unset !important; border: solid 0.10rem #afafaf !important; box-shadow: none; padding: 0.725rem 1.5rem 0.9rem !important; border-radius: 3rem !important; margin-top: 1rem !important;}
.portfolio-frase .btn-primary:hover {color: #099db9 !important; background-color: #ffffff !important; border-color: #ffffff !important; box-shadow: 0px 0px 20px 4px #c4f5ff66 !important;}
.portfolio-frase .btn-primary:active {color: #ffffff !important; background-color: #ff692c !important; border-color: #ff692c !important; box-shadow: 0px 0px 20px 4px #ff7f4bad !important;}


/* CONTACTO */

.contacto {margin-bottom: 11rem;}
.contacto h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 2.35rem; color: #099db9; margin-bottom: 1.3rem; margin-top: 0.4rem; line-height: 105%;}
.contacto p {font-family: "Roboto", sans-serif; font-weight: 350; font-size: 1rem; color: #757575; line-height: 160%; margin-bottom: 1rem;}

.form-tit {font-family: "Blinker", sans-serif; font-weight: 400; font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0.2rem; color: #099db9;}
.form-control {font-family: "Roboto", sans-serif; font-weight: 350 !important; color: #484848 !important; background-color: #f1f1f1 !important; box-shadow: 2px 3px 6px 1px #0000000d; border-color: #d9d9d9 !important; border-radius: 5px !important; }
.btn-primary {position: relative; right: 0.18rem; font-family: "Work Sans", sans-serif !important; font-weight: 600 !important; font-size: 1.125rem !important; color: #ffffff !important; background-color: #40c2db !important; border-color: #40c2db !important; margin-top: 0.5rem; padding: 0.3rem 1.125rem 0.5rem !important; box-shadow: 1px 2px 5px #126373d4; border-radius: 25px !important;}
.btn-primary:hover {color: #ffffff !important; background-color: #523ead !important; border-color: #523ead !important; box-shadow: 1px 2px 5px #523ead;}
.btn-primary:active {color: #fff900 !important; background-color: #523ead !important; border-color: #523ead !important;}

.contenedor-data h2 {font-family: "Blinker", sans-serif; font-weight: 600; font-size: 1.45rem; color: #099db9;}
.contenedor-data div p {font-family: "Roboto", sans-serif; font-weight: 400; font-size: 1.2rem; color: #757575; line-height: 125%; margin-bottom: 0rem;}
.contenedor-data div a {color: #757575; font-size: 1.2rem; text-decoration: none;}
.contenedor-data div a:hover {color: #ff692c;}
.contenedor-data .redes-pie a {text-decoration: none;}
.contenedor-data .ico-whatsapp img {width: 1.25rem; height: auto; margin-right: 0.5rem; padding-bottom: 0.1rem;}
.contenedor-data .ico-celular img {width: 1.25rem; height: auto; margin-right: 0.5rem;}
.contenedor-data .ico-palma img {width: 1.25rem; height: auto; margin-right: 0.5rem;}

.contacto-lobo img {position: absolute !important; bottom: 13rem; right: 20.3rem; z-index: -5; width: 579px; height: auto;}

.gracias {margin-top: 6rem; margin-bottom: 0rem;}
.gracias p {font-family: "Blinker", sans-serif; font-weight: 300; font-size: 3.5rem; line-height: 110%; color: #099db9;}
.gracias .volver {margin-top: 0rem; margin-bottom: 4rem;}
.gracias .volver a {font-size: 1.5rem !important; color: #757575; text-decoration: none;}
.gracias .volver a:hover {color: #ff692c;} 
.gracias.error p {font-size: 3.5rem; color: #df0000;}
.gracias.error a {color: #df0000;}
.gracias.error a:hover {color: #000000;}
.gracias.error .volver a {color: #757575;}
.gracias.error .volver a:hover {color: #ff692c;} 

















/* MAYOR DE 2561------------------------------------------------ */
@media (min-width: 2561px) {

.hero picture {display: block; width: 100%; height: 100%;}
.hero picture img {width: 100%; height: 100%; object-fit: cover;}
.hero h1 {font-size: clamp(3rem, 5.5vw, 15rem); padding-left: 25rem;}

}



/* 2560  ------------------------------------------------------- */
@media (max-width: 2560px){

.hero h1 {padding-left: 17rem; font-size: 9rem; }

}





/* 1920  ------------------------------------------------------- */
@media (max-width: 1920px){

.hero h1 {font-size: 6rem;}
.servicios h3 {font-size: 2rem; line-height: 110%;}
.intro h2 {text-wrap: balance; max-inline-size: clamp(20ch, 80%, 40ch);}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-1920.webp"); min-height: 27rem; margin-top: 4rem; margin-bottom: 6rem; background-size: contain;}

/* portfolio */
.portfolio-frase {background-image: url("../portfolio/img/portfolio-fondo-frase-1920-x1.webp");}

/* contacto */

.contacto-lobo img {right: 24.3rem;}
.contacto h2 {padding-right: 3rem;}

}







/* 1366  ------------------------------------------------------- */
@media (max-width: 1366px){


.hero h1 {padding-left: 12rem;  font-size: 5rem;}
.servicios h3 {font-size: 1.5rem;}
.intro h2 {text-wrap: unset; max-inline-size: none;}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-1366.webp"); min-height: 22rem; margin-top: 4rem; margin-bottom: 6rem;}

/* Secciones */
.seccion h1 {margin-bottom: 3rem;}

/* Qué hacemos */
.servicios h3 {hyphens: manual;}

/* portfolio */
.portfolio-frase {background-image: url("../portfolio/img/portfolio-fondo-frase-1366-x1.webp");
                  background-image: image-set(
                                            url("../portfolio/img/portfolio-fondo-frase-1366-x1.webp") 1x,
                                            url("../portfolio/img/portfolio-fondo-frase-1464-x1.webp") 2x)
                                           ;}

/* contacto */

.contacto-lobo img {right: 7.3rem;}
.contacto h2 {padding-right: unset;}


}






/* 1180  ------------------------------------------------------- */
@media (max-width: 1180px){


.hero h1 {padding-left: 7rem; font-size: 4.5rem;}
.nosotros-frases {margin-top: 23rem;}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-2360.webp"); min-height: 18rem;}

/* navbar */

.navbar {padding: 0rem 0rem !important; height: 4rem;}
.navbar-brand img {width: 13rem; height: auto; padding-top: 0.35rem; padding-left: 1.5rem;}
.navbar .navbar-toggler {border: solid 2px #523ead !important; height: 2.5rem; width: 3rem; margin: 0.75rem 1.75rem 0.75rem; padding-right: 2.5rem; z-index: 20 !important; border-radius: 10px 0px 10px 0px;}
.navbar .navbar-toggler:hover {background-color: #6df1d1 !important; border: solid 2px #523ead !important;}
.navbar .navbar-toggler:focus {box-shadow: none !important;}
.navbar .navbar-toggler.collapsed {background-color: unset !important;}
.navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; left: 0rem; background-color: #99f2fff5; padding: 4rem 1.5rem 1.75rem 0rem; border-radius: 0px 0px 0px 50px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.navbar-nav {padding-top: 1.25rem; padding-bottom: 0.75rem; text-align: right;}
.nav-item {font-size: 1rem; margin-bottom: 0.8rem; margin-right: 1rem;}
.nav-link.active {background-color: unset !important;}

/* Secciones */
.seccion h1 {margin-bottom: 1rem;}

/* Qué hacemos */

.servicios h3 {text-wrap: balance;}
.proceso {margin-bottom: 7rem;}

/* portfolio */
.portfolio-frase {background-image: url("../portfolio/img/portfolio-fondo-frase-1464-x1.webp");}

/* contacto */
.contacto {margin-top: 1rem;}
.contacto-lobo img {right: 3rem; bottom: 10rem;}

}








/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 1024px){

/*Home*/

.hero {width: 100%; height: auto !important; overflow: hidden;}
.hero h1 {padding-left: 7rem; font-size: 4.25rem;}
.intro {margin-top: 9rem;}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-1024-x2.webp"); margin-top: 4rem; margin-bottom: 6rem; min-height: 25rem; box-shadow: 0px 0px 30px 9px #04242b7a, 0px 0px 8px 4px #02374391; background-size: cover;}

/* Secciones */
.seccion h1 {margin-bottom: 1.5rem;}

/*Nosotros*/
.nosotros-lobo img {width: 35rem; height: auto;}
.nosotros-lobo {top: 60rem;}
.nosotros-frases {margin-top: 20rem;}

/*Qué hacemos?*/
.servicios h3 {text-wrap: balance;}
.proceso p {font-size: 1rem;}

/*Portfolio*/
.video p {font-size: 1.1rem !important;}
.portfolio {margin-top: 10rem;}
.destacado h2 {margin-bottom: 1.25rem;}
.destacado div div div {overflow: hidden;}
.destacado img {position: relative; width: 24rem; height: auto;  right: -4rem; max-width: unset;}


/*Contacto*/
.contacto h2 {text-wrap: balance;}
.contacto-lobo img {right: 3rem; bottom: 10rem;}
}







/* SURFACE PRO 7 --------------------------------------------------- */
@media (max-width: 912px){

/*Portfolio*/
.destacado img {position: relative; width: unset; height: auto; right: unset; max-width: 100%;}


}




/* ASUS ZENBOOK FOLD  --------------------------------------------------- */
@media (max-width: 853px){



}




/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 820px){

/*Home*/

.hero h1 {padding-left: 5.5rem; font-size: 3.5rem;}
.home-txt .recuadro {top: 0rem; margin: 2rem 0rem 4rem;}
.intro {margin-top: 8rem;}
.intro h2 {font-size: 2.75rem;}
.intro p {font-size: 2rem;}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-820-x2.webp"); margin-top: 4rem; margin-bottom: 6rem; min-height: 20rem; box-shadow: 0px 0px 30px 9px #04242b7a, 0px 0px 8px 4px #02374391;}
.items-home {margin: 4rem 0rem 5rem;}

/* Secciones */
.seccion h1 {margin-bottom: 1.25rem;}

/*Nosotros*/
.nosotros-lobo img {width: 40rem;}
.nosotros-lobo {position: unset;}
.nosotros-frases {margin-top: -12rem;}

/*Lo que hacemos*/
.proceso p {hyphens: manual; lang="es";}

/*Contacto*/
.contacto {margin-bottom: 6rem;}
.contenedor-data div a {font-size: 1rem;}
.contacto-lobo img {right: 2rem; bottom: 10rem; width: 500px;}


}






/* IPAD  ------------------------------------------------------- */
@media (max-width: 768px){

/* Home */
.hero h1 {padding-left: 5rem; font-size: 3rem;}
.intro {margin-top: 7rem;}
.intro h2 {font-size: 2.25rem;}
.intro p {font-size: 1.75rem;}
.parallax {background-image: url("../img-index/parallax/lobo-gris-home-parallax-768-x2.webp");}

/* Secciones */
.seccion h1 {margin-bottom: 1rem;}

/* Qué hacemos */
.servicios h3 {hyphens: manual; lang="es";}
.tecnologias h3 {font-size: 1.45rem;}
.tecnologias p {font-size: 1.1rem; hyphens: manual; lang="es";}
.proceso h2 {line-height: 100%;}
.proceso p {font-size: 1rem;}

/* portfolio */
.video p {font-size: 1.1rem !important;}

/*Contacto*/
.contacto-lobo img {width: 30rem; height: auto; right: 1rem; bottom: 11rem;}


}








/* CELULARES --------------------------------------------------- */
@media (max-width: 500px){


/* Home */

body {padding-top: 0rem;}
.hero {display: flex; justify-content: center; align-items: end; width: 100vw !important; height: 100svh !important; overflow: hidden;} 
.hero h1 {align-self: self-start !important; font-size: 3rem; text-align: center; padding-left: 0rem; padding-top: 8rem;}


/* navbar */
.navbar {padding: 0rem 0rem !important; height: 6rem;}
.navbar-brand img {width: 13rem; height: auto; padding-top: 0rem; padding-left: 1.5rem;}
.navbar .navbar-toggler {border: solid 2px #523ead !important; height: 2.5rem; width: 3rem; margin: 0.65rem 1.75rem 0.75rem; padding-right: 2.5rem; z-index: 20 !important; border-radius: 10px 0px 10px 0px;}
.navbar .navbar-toggler:hover {background-color: #6df1d1 !important; border: solid 2px #523ead !important;}
.navbar .navbar-toggler:focus {box-shadow: none !important;}
.navbar .navbar-toggler.collapsed {background-color: unset !important;}
.navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; left: 0rem; background-color: #99f2fff5; padding: 4rem 1.5rem 1.75rem 0rem; border-radius: 0px 0px 0px 50px; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px);}
.navbar-nav {padding-top: 1.25rem; padding-bottom: 0.75rem; text-align: right;}
.nav-item {font-size: 1rem; margin-bottom: 0.8rem; margin-right: 1rem;}
.nav-link.active {background-color: unset !important;}

.home-txt .recuadro {padding: 2.75rem 1.5rem;}
.home-txt .recuadro h3 {text-wrap: balance;}
.home-logo-end img:nth-child(2) {width: 20rem !important; height: auto;}
.home-txt .recuadro .btn-primary {font-size: 1rem; padding: 0.5rem 1.125rem 0.5rem;}
.home-txt .recuadro {background-color: unset; box-shadow: none; padding: 0rem; text-align: center;}
.home-txt .recuadro p, .home-txt .recuadro h4 {color: #878787;}

.parallax {margin-top: 3rem; margin-bottom: 6rem;
          background-image: url("../img-index/parallax/lobo-gris-home-parallax-450-x3.webp");
          background-image: image-set(
                            url("../img-index/parallax/lobo-gris-home-parallax-450-x1.webp") 1x,
                            url("../img-index/parallax/lobo-gris-home-parallax-450-x2.webp") 2x,
                            url("../img-index/parallax/lobo-gris-home-parallax-450-x3.webp") 3x,
                            url("../img-index/parallax/lobo-gris-home-parallax-450-x4.webp") 4x)
                           ;}


/* Secciones */
.seccion {margin-top: 3rem;}
.seccion h1 {line-height: 105%; margin-bottom: 1rem; text-align: left; letter-spacing: 0rem;}


/* Nosotros */
.nosotros-txt p {font-size: 1.1rem;}
.nosotros-lobo {position: unset;}
.nosotros-lobo img {width: 22rem; height: auto;}
.nosotros-frases {margin-top: 0rem; margin-bottom: 2rem;}
.nosotros-frases p {text-wrap: balance;}
.nosotros-cta p {text-wrap: balance;}

/* portfolio */
.video p {text-align: center;}
.portfolio-frase p {font-size: 4rem;}
.portfolio-frase p:nth-child(2) {font-size: 3rem;}
.portfolio-frase {background-image: url("../portfolio/img/portfolio-fondo-frase-450-x1.webp");
                  background-image: image-set(
                            url("../portfolio/img/portfolio-fondo-frase-450-x1.webp") 1x,
                            url("../portfolio/img/portfolio-fondo-frase-450-x2.webp") 2x,
                            url("../portfolio/img/portfolio-fondo-frase-450-x3.webp") 3x)
                           ;}

/* Footer */
.line-home {margin: 1rem 1rem 1.5rem;}
.nav2 nav a {font-size: 1rem; color: #999;}

/* Contacto */
.contacto {margin-bottom: 18rem;}
.contacto p {font-size: 1.1rem;}
.contenedor-data div a {font-size: 1.2rem;}
.gracias p {font-size: 2.75rem; line-height: 105%;}
.gracias.error p {font-size: 1.75rem;}

.contacto-lobo img {width: 29rem; right: 1rem; bottom: 10rem;}

}


/* CELULARES --------------------------------------------------- */
@media (max-width: 428px){

/* HOME */
.hero h1 {font-size: 2.75rem; padding-top: 6.5rem;}

}


/* CELULARES --------------------------------------------------- */
@media (max-width: 415px){

/* HOME */
.hero h1 {font-size: 3rem; padding-top: 7.75rem;}

}


/* CELULARES --------------------------------------------------- */
@media (max-width: 406px){

/* HOME */
.hero h1 {font-size: 2.6rem; padding-top: 6rem;}

}


/* CELULARES A16 / ip 12 pro ------------------------------------*/
@media (max-width: 390px){

/* HOME */
.hero h1 {font-size: 2.5rem; padding-top: 6rem;}


}


/* CELULARES --------------------------------------------------- */
@media (max-width: 380px){

/* HOME */
.hero h1 {font-size: 2.5rem; padding-top: 5rem;}


}


/* CELULARES --------------------------------------------------- */
@media (max-width: 375px){

/* HOME */
.hero h1 {font-size: 2.5rem; padding-top: 6.5rem;}


}