/*
 * Theme Name: Bedwell
 * Description: EG
 * Author: Arroba PR
 * Author URI: https://www.arrobapr.com
 */
@import url('https://use.typekit.net/jah0rla.css');
body {color: #040404!important; overflow-x: hidden; font-family: 'Gotham', sans-serif!important; background: #002a3a!important}
html {overflow-x: hidden}
a {cursor: pointer;text-decoration: none!important;color:#323031}
h1 {font-size: 38px;font-family: 'Gotham', sans-serif!important;}
h2 {font-size:30px!important; font-family: 'Gotham', sans-serif!important;;color: #707070;font-weight:600!important}
h3 { font-family: 'Gotham', sans-serif!important;}
p {line-height: 150%; font-size: 17px; }
.head-bar {position:relative; width: 100%}


img {max-width: 100%; height: auto;}

/* ------------------ HERO PANEL ------------------ */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  min-height: 850px;
  overflow: hidden;
  padding: 5em 0; /* padding real que será respetado */
  justify-content: flex-start; /* evita centrar verticalmente */
}

.hero {
  background-color: #002a3a;
  color: var(--beige);
}

.hero .content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* separa logo de otras cosas */
  width: 100%;
}

/* Logo centrado y con margen */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  margin-top: 0; /* ya lo separa el padding del panel */
  margin-bottom: 3rem; /* separación de olas */
}
.logo-box img {max-width: 90%}

/* COMING SOON centrado y separado */
/* estado normal: aseguramos transición suave */
.panel.coming-soon .wave,
.panel.coming-soon .coming-inner {
  transition: transform 1s cubic-bezier(.22,.9,.3,1), opacity 1s cubic-bezier(.22,.9,.3,1);
  will-change: transform, opacity;
}

/* estado 'faded' que aplica el botón */
.panel.coming-soon.faded .wave {
  transform: translateY(-50px);
  opacity: 0;
  pointer-events: none;
}

.panel.coming-soon.faded .coming-inner {
  transform: translateY(-50px);
  opacity: 0;
  pointer-events: none;
}

/* opcional: animación escalonada con delay controlado desde JS con stagger (si no quieres JS-stagger, déjalo) */


/* Waves container */
.waves-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: -8rem; /* separación del borde inferior */right: 0em
}

/* Escala fluida de olas */
.wave {
  width: clamp(300px, 100vw, 100vw);
  height: auto;
  opacity: 1;
  max-width: 100%;
}

/* @media (max-width: 767px) {
  .waves-container {
    align-items: center;
    margin-bottom: 2rem;
  }
} */

/* Ocultar al cargar */
.wave-1, .wave-2, .wave-3,
.coming-inner {
  opacity: 0;   /* invisible al inicio */
}


/* Coming Soon abajo */
/* .coming-inner{
  display: block;width: 100%;
  flex-direction: column;
  justify-content:left;
  align-items:left; 
  z-index:5;
  color: #fff;
  padding-left: 2rem;
  margin-bottom: 2rem;text-align: center; margin-top: -35em
} */
.coming-inner {
  position: absolute;
  bottom: 40vh; /* controla qué tan arriba va, proporcional al alto de pantalla */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  color: #fff;
  opacity: 1;
  width: 100%;
  padding: 0 2rem;
}
/* Animated arrow */
.scroll-indicator {
  position: absolute;
  bottom: 25vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
 color:#baaa9c;font-size: 14px;z-index: 1 }
.scroll-indicator .circle { width:56px; height:56px; border-radius:50%; border:2px solid #baaa9c; display:flex; align-items:center; justify-content:center; margin:auto; }
/* .mobile {
  display: none; 
  position: absolute;
  bottom: 10em;
  cursor: pointer;
} */


/* arrow bounce animation */
@keyframes arrow-bob {
  0% { transform: translateY(0); opacity:1; }
  50% { transform: translateY(8px); opacity:.9; }
  100% { transform: translateY(0); opacity:1; }
}
.scroll-indicator .circle { animation: arrow-bob 1.6s infinite ease-in-out; }

/* COMING SOON */
.title-large{ font-size:25px;  margin:0; color:#baaa9c; letter-spacing: 15px }
.lead-small{ font-size:18px; margin:0; opacity:1; color:#baaa9c;letter-spacing: 3px; text-transform: uppercase }


/* SUBSCRIBE */
#panel-subscribe {position: relative;z-index: 1;text-align: right}

.subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position: 30% top;
}

.subscribe-content{ position:relative; width:100%; display: block;  padding:30rem 10rem; color:#fff;}
.subscribe-content h3 {font-size: 25px;text-transform: uppercase;color: #baaa9c; letter-spacing: 1.5px}

/* Footer */
.jotform-form {
  padding-top: 0px !important;
  margin-top: 0px !important;height: auto!important;
}
.form-all {
  margin-bottom: 0px !important;height: auto!important;
}
iframe {width: 20%!important;}

footer{ background:#0a293b; text-align:center;position:relative; display:block; padding:10px 0; color: #fff}
.lef {text-align: left}
.righ {text-align: right}
/* Responsive */
@media (max-width:3400px){
  iframe {width: 25%!important;}

}
@media (max-width:2600px){
  iframe {width: 30%!important;}

}
@media (max-width:2200px){
  iframe {width: 40%!important;}
.subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position: 25% top;
}

}
@media (max-width:1920px){
  iframe {width: 45%!important;}

}
@media (max-width:1600px){
/*   .wave {
  display: block;
  width: 70vw;
  max-width: 100%;
  height: auto;
  opacity: 1;
}
  .waves-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 2rem;
  bottom: 35%;
  z-index: 1;
} */
/*   .coming-inner {
  display: block;
  width: 50%;
  flex-direction: column;
  gap: 2rem;
  justify-content: left;
  align-items: left;
  z-index: 5;
  color: #fff;
  padding-left: 2rem;
  margin-bottom: 8rem;
  text-align: left;
}
  */
  .wave {
  width: clamp(300px, 100vw, 100vw);
  height: auto;
  opacity: 1;
  max-width: 100%;
}
    .subscribe-content {
    position: relative;
    width: 100%;
    display: block;
    padding: 25rem 3rem;
    color: #fff;
  }
}
@media screen and (max-width:1367px){
  .subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position: 50% top;
}
  iframe {width: 60%!important;}
/*   .coming-inner {
  display: block;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
  justify-content: left;
  align-items: left;
  z-index: 5;
  color: #fff;
  padding-left: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  margin-top: -25em;
} */
}

/*   .panel {
  width: 100vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
} */
/*     .coming-inner {
    display: block;
    width: 70%;
    flex-direction: column;
    gap: 2rem;
    justify-content: left;
    align-items: left;
    z-index: 5;
    color: #fff;
    padding-left: 2rem;
    margin-bottom: 3rem;
    text-align: left;margin-top: auto;
  }
  .title-large{ font-size:36px; } */

  .coming-soon{ text-align:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto; }
}

@media (max-width:1000px){
    .subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position:20% top;
}
   #panel-subscribe {position: relative;z-index: 1;text-align: center}
  .subscribe-content {
    position: relative;
    width: 100%;
    display: block;
    padding: 40rem 1rem;
    color: #fff;
  }
}
@media (max-width:840px){
  .logo-box img {
  max-width: 85%;
}
  iframe {
  width: 80% !important;
}
/*   .panel {
  width: 100vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
} */
/*     .coming-inner {
    display: block;
    width: 70%;
    flex-direction: column;
    gap: 2rem;
    justify-content: left;
    align-items: left;
    z-index: 5;
    color: #fff;
    padding-left: 2rem;
    margin-bottom: 3rem;
    text-align: left;
  }
  .title-large{ font-size:36px; }

  .coming-soon{ text-align:center; } */
  .waves-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 0rem;
  right: 0em;
}
/*     .coming-inner {
    display: block;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    justify-content: left;
    align-items: left;
    z-index: 5;
    color: #fff;
    padding-left: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    margin-top: -15em;
  } */
}
/* Responsive waves & coming-inner */

@media (max-width: 768px) {
   iframe {
  width: 100% !important;
}
     #panel-subscribe {position: relative;z-index: 1;text-align: center}

   .subscribe-content {
    position: relative;
    width: 100%;
    display: block;
    padding: 40rem 5rem;
    color: #fff;
  }
     .subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position:40% top;
}
/*   .mobile {
    display: block;bottom: 6em
  } */
/*   .panel {
  width: 100vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
    padding-left:2rem; padding-right:2rem;
} */
/*   .waves-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 2rem;
  bottom: 30%;
  z-index: 1;
} */


/*   .wave {
  display: block;
  width: 80vw;
  max-width: 100%;
  height: auto;
  opacity: 1;
} */
}
@media (max-width:767px){
   #panel-subscribe {position: relative;z-index: 1;text-align: center}
  .subscribe-content {
    position: relative;
    width: 100%;
    display: block;
    padding: 29rem 1rem;
    color: #fff;
  }
  .scroll-indicator {
  position: absolute;
  bottom: 20vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  color: #baaa9c;
  font-size: 14px;
  z-index: 1;
}
.subscribe-content h3 {
  font-size: 20px;
  text-transform: uppercase;
  color: #baaa9c;
  letter-spacing: 1.5px;}
/*     .panel {
  width: 100vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
    padding-left:2rem; padding-right:2rem;
} */
  .panel {padding: 6em 0;min-height:700px}
    .wave {
    display: block;
    width: 100vw;
    max-width: 100%;
    height: auto;
    opacity: 1;justify-content: center; text-align: center
  }
/*   .logo-box img {
 max-width: 80%;
} */

/*     .coming-inner {
    display: block;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    z-index: 5;
    color: #fff;
    padding-left: 0rem;
    margin-bottom:15em;margin-top: auto;
    text-align: left;
  } */
  .title-large {
    font-size: 19px;text-align: center
  }
  .lead-small {
  font-size: 14px;
  margin: 0;
  opacity: 1;
  color: #baaa9c;text-align: center
}
/*   .coming-inner {padding-left: 0;margin-top: 5em; } */
   .logo-box img {
    max-width: 60%;
  }
  footer {padding: 3px 0}
  .lef {text-align: center; font-size: 14px}
  .righ {text-align: center; font-size: 12px}
  .subscribe-panel .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
   object-position:30% top;
}
}

@media (max-width:386px){
  .subscribe-content h3 {
  font-size: 18px;
  text-transform: uppercase;
  color: #baaa9c;
  letter-spacing: 1px;}
}