/*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: #fffdf6; 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;}

    .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: 60px 0; margin-top: 120px;  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, white 100%), background:  radial-gradient(circle at 50% 50%, rgba(107, 181, 255, 1) 0%, rgba(48, 131, 255, 1) 14%, rgba(18, 101, 255, 1) 25%, rgb(0 23 113 / 86%) 50%, rgba(0, 33, 163, 0) 80%);*/ /* background:rgba(17, 15, 114, 0.85);  background-blend-mode: normal;*/
/*}*/ /*fondo de luz detras*/

/*fondo animado*/
.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;
  /*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: column; 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-left { flex:1; max-width:78%; }
.hero-right { flex:1; text-align:center; }
.hero-right img { max-width:100%; border-radius:12px; }
.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;}


/*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, 6vw, 100px); line-height:1; color:#fff; font-family:"Inter",sans-serif; font-weight:900; }
.hero h2 { font-size: clamp(20px, 2.5vw, 36px); color:#FFB300; margin-bottom:16px; }

/* Text blocks */
.container p { color: #e6e6e6; margin-bottom:14px; font-size: large; text-align: center;}


@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;}
}


@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;}
}


/*Parte del form*/
.form-map-div{display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 45px;}
.form-map {width: 70%; display: flex; flex-direction: row-reverse; align-content: stretch; align-items: center; padding-bottom: 40px; margin-bottom: 100px; justify-content: center;}
.form-map-div .form-map button i {font-size: 20px; animation: wave 2s infinite ease-in-out; padding-right: 5px;} /*icono sobre*/
/*anim ola*/
@keyframes wave {
  0% {
    transform: translateY(1px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
  75% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(1px);
  }
}


.form-map-div .form-map .mapa iframe {border:2px solid #00000038; width: 600px; height: 450px; border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.mapa { /*js*/z-index: -1; opacity: 0; transform: translateX(250px); transition: opacity 0.9s ease-in, transform 0.8s ease-in-out;}
.mapa.visible {opacity: 1; transform: translateX(0);}

textarea::placeholder, input::placeholder{color: rgb(209, 209, 209); font-family: 'Inter',sans-serif ;}

/*.form-map > .mapa > iframe {}*/
.contact-form {
    background: rgb(0 42 121 / 88%);
    border: 1px solid rgba(6, 37, 59, 0.8);
    backdrop-filter: blur(10px) saturate(200%);
    border-radius: 12px;
    box-shadow: 0 4px 25px #020b1a7d;
    width: 85%;
    max-width: 1200px;
    margin: 0;
    padding: 30px;
}

.contact-form > h2 { font-size: 40px; text-align: center; margin-bottom: 20px; color: #ececec;}
.form-row {display: flex; justify-content: center; gap: 20px}

.form-group { margin-bottom: 15px; width: 100%; display: flex; flex-direction: column ;}
label {font-size: 20px; display: block; margin-bottom: 6px; font-weight: 500; color: white;}
input, textarea {width: 100%; padding: 10px 12px; border: none; border-radius: 6px; background: #c0c0c025; color: #000; font-size: 15px; outline: none; transition: background 0.3 ease, box-shadow 0.3s ease;}

input:focus, textarea:focus { background: #e6e6e6; box-shadow: 0 0 15px #3a68ff}
textarea{ min-height: 100px; resize: vertical;}

button{ width: 100%; padding: 12px; background: #0b1220; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.7 ease;}
button:hover{ background: #0f2450;}



/*parte del mapa
.mapa {width: 100%;}
.mapa > iframe {width: 100%; border: 30px;}
*/

/*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*/
@media (max-width: 1709px) {
  .footer-widgets { flex-direction:row; }
  .webkit { width: 100%;}
  .widget:nth-child(2){margin-left: 50px;}

   .form-map { display: block; }
   .form-map > .mapa > iframe {width: -webkit-fill-available;}
   .contact-form {width: 100%; margin-bottom: 30px;}

    .form-map-div .form-map .mapa iframe {border-radius: 30px; width: -webkit-fill-available;}
    .form-map { margin-bottom: unset;}

}


@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;}

   .form-map { display: block; }
   .form-map > .mapa > iframe {width: -webkit-fill-available;}
      .contact-form {width: 100%; margin-bottom: 30px;}

  .form-map-div .form-map .mapa iframe {border-radius: 30px; width: -webkit-fill-available;}
  .form-map {width: 90%; margin-bottom: unset;}
  .mapa {opacity: 1; transform: translateX(0);}


   
}


@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%;}

   .form-map {display: block; }
   .form-map > .mapa > iframe {width: -webkit-fill-available;}
    .contact-form {width: 100%; margin-bottom: 30px;}

  label {font-size: larger;}
  .form-row {flex-direction: column;}
  .form-map {width: 90%; margin-bottom: none;}
  .contact-form h2 {font-size: 30px;}

  .form-map-div .form-map .mapa iframe {border-radius: 30px; width: -webkit-fill-available; height: 350px;}
  .mapa {opacity: 1; transform: translateX(0);}


}