/*Reset/básico*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body { font-family: "Inter",sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; 
   line-height: 1.5; background-color: white; color: #e6e6e6; }

/* Container */
.container { max-width: 1280px; margin: 0 auto; padding: 24px; }

/*Variables globales*/
:root{
  --e-global-color-primary:#6EC1E4;
  --e-global-color-secondary:#54595F;
  --e-global-color-text:#7A7A7A;
  --e-global-color-accent:#61CE70;
  --e-global-color-dea41e4:#FFFFFF;
  --container-max-width:1280px;
}

/*Cabecera / Nav*/
.site-header {position: fixed;top: 0; left: 0; width: 100%; background: #000000; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.04); animation: navDown 0.8s ease-out forwards; transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; z-index: 1000; }
/*para cuando bajas en la pagina*/
.site-header.scrolled{ background: rgba(0, 0, 0, 0.6);  /* color semi-transparente */ backdrop-filter: blur(10px);     /* efecto difuminado */ box-shadow: 0 2px 15px rgba(0,0,0,0.4);
}

.main-nav {margin-left: 95px;}
.site-header .site-nav { display:flex; align-items:center; gap:24px; justify-content:space-around; right: -40px;}
.brand img { height: 40px; width: auto; display:block; }
.main-nav .menu { list-style:none; display:flex; gap:18px; align-items:center; }
.main-nav .menu li a { color: var(--e-global-color-dea41e4); text-decoration:none; padding:8px 10px; display:inline-block; transition: color 0.3s ease; white-space: nowrap;}
.main-nav .menu li.has-sub { position:relative; }
.main-nav .submenu { position:absolute; left:0; top:100%; display:none; background:#0b1220; padding:10px; border-radius:6px; list-style: none; min-width: 150px; ;white-space: normal;}
/*.main-nav .menu li.has-sub:hover .submenu { display:block;}*/
.has-sub-res.open .submenu-res {display: block !important;}

/*abrir con el click*/
.has-sub.open .submenu {display: block !important;}
/*efecto color al pasar el raton*/
.main-nav .menu li a:hover {color: #FFB300;}
/*.main-nav .menu li.has-sub:hover .submenu { display:block;}*/



/* CTA button */
.nav-button { display:inline-block; padding:10px 16px; background:#FFB300; color:#000; border-radius:6px; text-decoration:none; font-weight:600; /*transicion entre los colores*/ transition: background-color 0.4s ease, color 0.3s ease; margin: 5px; }

.nav-button:hover {background:#0b0bdb; color:#ffffff;}

/*funcion animacion down de la nav*/
@keyframes navDown {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }
   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

/*responsive nav*/
.main-nav-res .menu-res { list-style:none; display:none; gap:18px; align-items:center; }
.main-nav-res .menu-res li a { color: var(--e-global-color-dea41e4); text-decoration:none; padding:8px 10px; display:inline-block; transition: color 0.3s ease;}
.main-nav-res .menu-res li.has-sub { position:relative; }
.main-nav-res .submenu-res { position:absolute; left:0; top:100%; display:none; background:#0b1220; padding:10px; border-radius:6px; list-style: none; min-width: 150px; ;white-space: normal;}
.main-nav-res .menu-res li.has-sub-res:hover .submenu-res { display:block; left: -35px; }


@media screen and (max-width: 1710px){
    .site-nav {flex-direction: flex; justify-content: center;}

    .site-header .site-nav{display:flex; align-items:center; gap:24px; justify-content:space-around;}
    /*.site-header .site-nav:not(:first-child){align-self: flex-end;} dejar el boton hambur al final*/
    .main-nav .menu {display: flex;} /*oculto los elemntos*/
  
    .main-nav .menu {display: row;}
    .main-nav .menu { display: row;width: 100%;}
    .main-nav .menu li {position: relative;}
    .main-nav .submenu {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px;}
    .main-nav .submenu li a {display: block; padding: 8px 10px; color: #fff; white-space: nowrap;}

    .nav-button {display: inline-block;}
    /*.brand img {height: 20px;}*/
}
  
@media screen and (max-width: 1024px){
    .site-nav {flex-direction: flex; justify-content: center;}

    .site-header .site-nav{flex-direction: row; align-items: center; justify-content: center; margin: 0;  gap: unset;}
    /*.site-header .site-nav:not(:first-child){align-self: flex-end;} dejar el boton hambur al final*/
    .main-nav .menu {display: none;} /*oculto los elemntos*/
  
    .main-nav-res .menu-res {display: block;}
    .main-nav-res .menu-res { display: block;width: 100%;}
    .main-nav-res .menu-res li {position: relative;}
    .main-nav-res .submenu-res {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px;}
    .main-nav-res .submenu-res li a {display: block; padding: 8px 10px; color: #fff;}

    .nav-button {display: none;}
    /*.brand img {height: 20px;}*/
}

@media screen and (max-width: 900px){
    .site-nav {flex-direction: flex; justify-content: space-between;}

    .site-header .site-nav{flex-direction: row; align-items: center; justify-content: center; margin: 0;  gap: unset;}
    .main-nav .menu {display: none;} /*oculto los elemntos*/
    
    .main-nav-res .menu-res {display: block;}
    .main-nav-res .menu-res { display: block;width: 100%;}
    .main-nav-res .menu-res li {position: relative;}
    .main-nav-res .submenu-res {display: none; flex-direction: column; background: #0b1220; padding: 10px; border-radius: 6px; margin-top: 8px; left: -100px;}
    .main-nav-res .submenu-res li a {display: block; padding: 8px 10px; color: #fff;}
    .main-nav-res .menu-res li.has-sub-res:hover .submenu-res {left: -100px;}

    .nav-button {display: none;}
    /*.brand img {height: 20px;}*/
}


/*Hero*/
.hero { padding-top: 180px; /*margin-top: 120px;*/  background-blend-mode: normal;
  background: linear-gradient(343deg, #000a39, #001eaff0, #1f527d, #0f6dff);
  background-size: 400% 400%;
  animation: gradient 11s ease infinite;
  border-end-end-radius: 150px;
  width: 100%;
  height: 100vh;
  /*padding-bottom: 30px;*/
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero .e-con-inner { display:flex; flex-direction: row; gap:40px; align-items:center; justify-content:space-between;} /*justificamo flex en columnas para que al añadir cosas no se junten en la misma linea*/
.hero-h1 > * { padding-bottom: 15px};
.hero-left { flex:1; max-width:65%;}
.hero-right { display: flex; flex-direction: row; text-align:center; justify-content: center; align-items: center; opacity: 0; transform: translateX(-40px);transition: opacity 0.9s ease, transform 1.5s ease;}
/*js*/ .hero-right.visible{opacity: 1; transform: translateX(0); padding-top: 170px;}
.hero-right img { max-width:100%; border-radius:12px; max-width: 720px; height: auto; object-fit: cover; }
.hero-actions {display:flex; justify-content: center; align-items: center;}
.hero-button {display:inline-block; padding: 15px 45px; background:#FFB300; color:#000; border-radius:6px; text-decoration:none; font-weight:600; /*transicion entre los colores*/ transition: background-color 0.4s ease, color 0.3s ease;}
.hero-button:hover {background:#0b0bdb; color:#ffffff;}
.hero-h1 {display: block; width: 100%; text-align: center; white-space: nowrap;}
.elementor-element {display: flex; flex-direction: row; max-width: 70%; align-content: center; justify-content: center; align-items: center; margin: auto; padding-top: 50px; background: white;}
.nosotros-intro {display: flex; flex-direction: column;}
.elementor-element > .nosotros-intro > p:first-child {text-align: left; font-size: 19px; font-weight: 600; color: #1F3653; margin-bottom: 60px; max-width: 80%; border-left: 7px solid #5898F9; padding-left: 20px;}
.elementor-element > .nosotros-intro > p:last-child {text-align: left; font-size: 19px; font-weight: 500; color: #3590ff; margin-bottom: 60px; max-width: 80%; padding-left: 20px; margin-top: -35px;}

/*Headings (from elementor-kit styles) */
.elementor-heading-title { color: var(--e-global-color-dea41e4); font-weight:700; margin-bottom:12px; }
.hero h1 { font-size: clamp(36px, 9vw, 137px); line-height:1; color:#fff; font-family:"Inter",sans-serif; font-weight:900; text-align: center; white-space: normal; padding: 55px; animation: intro 1.3s ease-in-out forwards;}
.hero h2 { font-size: clamp(20px, 2.5vw, 36px); color:#FFB300; margin-bottom:16px; font-family:"Inter",sans-serif;}

/* Text blocks */
#content .hero .container .hero-h1 #consult {color: #00eef9; margin-bottom:14px; font-size: 57px; text-align: center; font-weight: 700; animation: intro-p 2s ease-in-out forwards;}
.container p { color: #e6e6e6; margin-bottom:14px; font-size: large; text-align: center;}

/*efecto intro*/
@keyframes intro {
  0% {
    transform: translateY(9%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes intro-p {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*respon*/
@media screen and (max-width: 1024px){
  .hero-h1 {width: 100%; white-space: unset;}
  /*.hero h1 {font-size: 56px;}*/
  .hero-left {margin-top: -40px;}
  .hero-actions {margin-top: 40px;}
  .hero-right img {max-width: 100%;}

  .elementor-element {flex-direction:column ;}
  .elementor-element > .nosotros-intro > p:first-child {max-width: 100%; text-align: justify;}
}


@media screen and (max-width: 900px){
  .hero-h1 {width: 100%; white-space: unset;}
  /*.hero h1 {font-size: 56px;}*/
  .hero-left {margin-top: -40px;}
  .hero-actions {margin-top: 40px;}
  .hero-right img {max-width: 100%;}
  .elementor-element {flex-direction:column; text-align: justify;}
}

/*productos*/

.nosotros-productos{display: flex; flex-direction: column; background: #b8cbf5; padding-bottom: 80px;}
.nosotros-productos > h2 {text-align: center; font-size: clamp(24px, 3.2vw, 400px); font-weight: 700; color: #1F3653; line-height: 1;margin-bottom: 35px; padding-top: 40px;}
.nosotros-productos > .productos-cajas {display: flex; flex-direction: row; max-width: 67%; margin-right: auto; margin-left: auto; margin-bottom: 40px;  gap: 40px;}
.nosotros-productos > .productos-cajas > .cajas:first-child {display: flex; flex-direction: column;  align-items: center; justify-content: center; align-content: center; background-color: #00000052; background-image: url(../img/RESTAURANTE-AGORA.jpg); background-blend-mode: soft-light; background-size: cover; width:700px; height: 450px; border-radius: 7px; box-shadow: 0 2px 15px rgba(0,0,0,0.4)}
.nosotros-productos > .productos-cajas > .cajas:last-child {display: flex; flex-direction: column;  align-items: center; justify-content: center; align-content: center; background-color: #00000098; background-image: url(../img/BANNER-OFICON-1024x614.jpg); background-blend-mode: soft-light; background-size: cover; width:700px; height: 450px; border-radius: 7px; box-shadow: 0 2px 15px rgba(0,0,0,0.4)}
.nosotros-productos > .productos-cajas > .cajas > h2 {font-size: 40px;}
.nosotros-productos > .productos-cajas > .cajas > h3 {font-size: 22px; margin-bottom: 40px;}
.nosotros-productos > .productos-cajas > .cajas > a > button {background: #5898F9; color: white; font-size: 16px; font-family: "Inter", sans-serif; width: 200px; height: 50px; margin-bottom: 15px; border-radius: 5px; border: none; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.185); transition: background 0.3s ease;}
.nosotros-productos > .productos-cajas > .cajas > a > button:hover {background: #00C2FF ;}

/*equipo*/
.nosotros-productos .nosotros-equipo {display: flex; flex-direction: row; align-items: center; background: #234768; max-width: 67%; margin: auto; border-radius: 6px; padding: 40px; box-shadow: 0 2px 15px rgba(0,0,0,0.4); text-align: left; font-family: "Inter", sans-serif; opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s ease-in-out;}
/*js*/ .nosotros-productos .nosotros-equipo.visible {opacity: 1; transform: translateY(0);}
.nosotros-productos > .nosotros-equipo > .equipo-items { display: flex; flex-direction: column}
.nosotros-productos > .nosotros-equipo > .equipo-items > h2 {font-size: 51px; font-family: "Inter", sans-serif; color: #79d9ff;}
.nosotros-productos > .nosotros-equipo > .equipo-items > p {font-weight: 600; font-size: 19px;}
.nosotros-productos > .nosotros-equipo > .eq-expertos {max-width: 50%; border-radius: 12px;}
 
/*empresas*/
.nosotros-clientes{ background: white; display: flex; flex-direction: column; text-align: center; align-items: center;} 
.nosotros-clientes #exito {text-align: center; font-size: 45px; color: #1f3653; font-weight: 700; line-height: 1.3; margin-bottom: unset; margin-top: 65px; margin-bottom: 20px;}
.nosotros-clientes > div > h2:first-child {font-size: 51px; color: #1f3653; padding-top: 40px;}
.nosotros-clientes > div > h2:last-child {font-size: 61px; color: #5898F9; margin-top: -25px;}
.nosotros-clientes > div > h2:last-child {font-size: 61px; 
background: linear-gradient(343deg, #5c78ff, #314dd5f0, #72bfff, #0f6dff); background-size: 400% 400%; animation: gradient 8s ease infinite; margin-top: -25px; /*lo clipeo con el texto*/ color: transparent; background-clip: text;}


/*Grid iconos*/
  .parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-bottom: 100px;
  margin-top: 100px;
  }
  .div1 { grid-area: 2 / 2 / 3 / 3; max-width: 100%;}
  .div2 { grid-area: 2 / 3 / 3 / 4; max-width: 100%;}
  .div3 { grid-area: 2 / 4 / 3 / 5; max-width: 100%;}
  .div4 { grid-area: 3 / 2 / 4 / 3; max-width: 100%;}
  .div5 { grid-area: 3 / 3 / 4 / 4; max-width: 100%;}
  .div6 { grid-area: 3 / 4 / 4 / 5; max-width: 100%;}

/*   .div1 img { max-width: 100%;}
  .div2 img { max-width: 100%;}
  .div3 img { max-width: 100%;}
  .div4 img { max-width: 100%;}
  .div5 img {  max-width: 100%;}
  .div6 img {max-width: 100%;} */

/*Footer*/
.site-footer { background:#0a1220; color:#cfcfcf; padding:40px 0; margin-top:40px; padding-bottom: 0;}
.footer-widgets { display:flex; gap:20px; align-items:center; }
.footer-widgets .widget { flex:1; }
#footer-h {margin-left: -18px ;}
.site-info { display:flex; flex-direction: row-reverse; align-items:center; justify-content:space-between; margin-top:18px; align-items: flex-start;}
.widget > ul { list-style: square;}
.widget > ul > li::marker {color: #FFB300;}
.widget > ul > li > a {text-decoration: none; color: white; transition: color 0.3s ease-in-out;}
.widget > ul > li > a:hover{color: #5898F9;}
.widget > h5 {font-size: 25px; font-weight: 700; padding-bottom: 10px; color: white;} 
.widget > hr {border-bottom: none; border-top: 3px solid #FFB300; max-width: 40px; margin-bottom: 12px; margin-top: -12px; margin-left: -18px;}

.webkit { display: flex; justify-content: center; align-items: center; width: 100%; background-color: white;  padding-bottom: 20px;  padding-top: 20px;}
.webkit > img { width: 60%;}

/*Social icons*/
.elementor-social-icons-wrapper a { color: #fff; margin-right:8px; text-decoration:none; }
.fab {font-size: 30px; color: white; transition: color 0.2s ease-in-out, transform 0.3s ease-in; transform: translateY(0%);}

.fab:hover { color: #5898F9; transform: translateY(-60%);}

/*responsive footer*/
@media (max-width: 1709px) {
  .footer-widgets { flex-direction:row; }
  .webkit { width: 100%;}
  .widget:nth-child(2){margin-left: 50px;}
  
  .hero h1{font-size: 130px;}
  #content .hero .container .hero-h1 #consult {font-size: 32px; font-weight: 400;}
  .elementor-element {flex-direction: column;}


  .nosotros-productos h2 {font-size: 40px ;}

  .nosotros-productos .productos-cajas .cajas h2 {font-size: 25px}
  .nosotros-productos .productos-cajas .cajas h3 {font-size: 19px; text-align: center;}
  .nosotros-productos .productos-cajas .cajas:first-child {width: 800px; height: 325px;} 
  .nosotros-productos .productos-cajas .cajas:last-child {width: 800; height: 325px;} 

  .nosotros-productos .nosotros-equipo {flex-direction: column;}
  .nosotros-productos .nosotros-equipo .equipo-items h2 {font-size: 40px; text-align: center; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .equipo-items p {font-size: 16x; text-align: center; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .eq-expertos {width: 100%; max-width: fit-content;}

  .nosotros-clientes div h2:first-child {font-size: 40px;}
  .nosotros-clientes div h2:last-child {font-size: 37px; margin-top: -15px;}

  .parent img {margin-bottom: 20px;}
}


@media (max-width: 1024px) {
  .footer-widgets { flex-direction:row; gap: 40px;}
  .webkit { width: 100%;}  
    .webkit img { width: -webkit-fill-available;}

  .widget:nth-child(2){margin-left: 30px;}
  .widget:nth-child(2){margin-left: 50px;}

  .hero {display: flex; flex-direction: column;}
  .hero h1{font-size: 100px;}
  #content .hero .container .hero-h1 #consult {font-size: 32px; font-weight: 400;}
  .elementor-element {flex-direction: column;}
  .hero .e-con-inner {flex-wrap: wrap;}

  .nosotros-productos h2 {font-size: 40px ;}

  .nosotros-productos .productos-cajas {flex-direction: column; max-width: 95%;}
  .nosotros-productos .productos-cajas .cajas h2 {font-size: 25px}
  .nosotros-productos .productos-cajas .cajas h3 {font-size: 19px; text-align: center;}


  .nosotros-productos .productos-cajas .cajas:first-child {width: 650px; height: 325px;} 
  .nosotros-productos .productos-cajas .cajas:last-child {width: 650px; height: 325px;} 

  .nosotros-productos .nosotros-equipo {flex-direction: column; max-width: 95%;}
  .nosotros-productos .nosotros-equipo .equipo-items h2 {font-size: 30px; text-align: center; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .equipo-items p {font-size: 16x; text-align: center; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .eq-expertos {width: 100%; max-width: fit-content;}

  .nosotros-clientes div h2:first-child {font-size: 40px;}
  .nosotros-clientes div h2:last-child {font-size: 37px; margin-top: -15px;}

  .parent{display: flex; flex-direction: column; margin-top: 20px;}
  .parent img {margin-bottom: 20px;}
}


@media (max-width: 900px) {
  .footer-widgets { flex-direction:column; }
  .webkit { width: 100%;}
    .webkit img { width: -webkit-fill-available;}

  .widget:nth-child(2){margin-left: -50px;}
  .widget:nth-child(3){margin-left: -33px;}
  .widget:nth-child(4){margin-left: -66px;}
  .widget:first-child {display: flex; flex-direction: column; align-items: center;}
  .widget:first-child > img {max-width: 65%;}
  .hero-h1 h1 {padding: 1px;}
  .hero .e-con-inner {flex-wrap: wrap;}

  .hero .e-con-inner {width: -webkit-fill-available;}
  

  .hero {display: flex; flex-direction: column; padding: 1px; justify-content: center;}
  .hero h1{font-size: 45px; padding: none}

  #content .hero .container .hero-h1 #consult {font-size: 22px; font-weight: 400; margin-top: 20px;}
  .elementor-element {flex-direction: column;}

  .nosotros-productos h2 {font-size: 40px ;}

  .nosotros-productos .productos-cajas {flex-direction: column; max-width: 95%;}
  .nosotros-productos .productos-cajas .cajas h2 {font-size: 25px}
  .nosotros-productos .productos-cajas .cajas h3 {font-size: 19px; text-align: center;}


  .nosotros-productos .productos-cajas .cajas:first-child {width: 100%; height: 325px;} 
  .nosotros-productos .productos-cajas .cajas:last-child {width: 100%; height: 325px;} 

  .nosotros-productos .nosotros-equipo {flex-direction: column; max-width: 95%;}
  .nosotros-productos .nosotros-equipo .equipo-items h2 {font-size: 30px; text-align: center; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .equipo-items p {font-size: 16x; text-align: justify; margin-bottom: 20px;}
  .nosotros-productos .nosotros-equipo .eq-expertos {width: 100%; max-width: fit-content;}

  .nosotros-clientes div h2:first-child {font-size: 40px;}
  .nosotros-clientes div h2:last-child {font-size: 37px; margin-top: -5px; font-weight: 900; }

  .parent{display: flex; flex-direction: column; align-items: center; margin-top: 20px;}
  .parent img {margin-bottom: 20px;}
}

@media (max-width: 420px) {
  .hero-h1 h1 {padding: 1px; font-size: 60px;}
    .hero .e-con-inner {flex-wrap: wrap;}
  .hero .e-con-inner {width: -webkit-fill-available;}
    .nosotros-clientes div h2:first-child {font-size: 32px;}
      .webkit img { width: -webkit-fill-available;}


}