/* Homepage styles moved from inline and in-file <style>
   All classes prefixed with homepage__
*/

.homepage__main{
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage__section{
  max-width: 980px;
  width: 100%;
  text-align: center;
}

.homepage__badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,179,126,0.10), rgba(0,163,211,0.04));
  border:1px solid rgba(0,179,126,0.16);
  font-size:14px;
  font-weight:600;
  color:#0b3d91;
  animation: badgePulse 3.2s ease-in-out infinite;
}
.homepage__badge-left{ display:flex; align-items:center; gap:8px }
.homepage__bolt{ font-size:16px; transform:translateY(-1px) }

/* punto indicador (sólo dot) */
.homepage__dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#00e08a; box-shadow:0 0 0 rgba(0,224,138,0.6); position:relative; margin-left:8px; animation: dotPulse 1.8s infinite ease-in-out }
.homepage__dot::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; border-radius:50%; box-shadow:0 0 18px rgba(0,224,138,0.12); }

@keyframes dotPulse{
  0%{ transform:scale(.9); box-shadow:0 0 0 0 rgba(0,224,138,0.6) }
  70%{ transform:scale(1.08); box-shadow:0 0 0 10px rgba(0,224,138,0) }
  100%{ transform:scale(.9); box-shadow:0 0 0 0 rgba(0,224,138,0) }
}

@keyframes badgePulse{
  0%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.01); }
  100%{ transform:translateY(0) scale(1); }
}

.homepage__h1{ margin:0; font-size:clamp(1.8rem, 4.5vw, 3rem) }
.homepage__p{ font-size:1.125rem; line-height:1.5; width:80%; margin:1rem auto 0 auto }

/* CTA button */
.homepage__cta-wave{
  --h: 48px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--h);
  padding:0 28px;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  font-size:16px;
  border:0;
  cursor:pointer;
  /* Gradiente con color principal (Full Conectados) */
  background: linear-gradient(90deg,#00b37e 0%, #00a36a 50%, #007a5f 100%);
  background-size:200% 100%;
  box-shadow:0 10px 26px rgba(0,179,126,0.12);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  /* movimiento del gradiente para dinamismo; se elimina la animación de escala/traslación (ctaPulse) */
  animation: waveGradient 2.2s linear infinite;
}

/* moving gradient */
@keyframes waveGradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* subtle glossy sheen that moves across */
.homepage__cta-wave::after{
  content:"";
  position:absolute;
  left:-60%; top:-10%;
  width:220%; height:120%;
  /* Sheen más visible que recorre el botón rápidamente */
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.04) 100%);
  transform: skewX(-18deg);
  filter: blur(10px);
  opacity:1;
  animation: sheenMove 2s linear infinite;
  pointer-events:none;
}

@keyframes sheenMove{
  0%{ transform: translateX(-50%) skewX(-18deg); opacity:0 }
  20%{ opacity:1 }
  50%{ transform: translateX(30%) skewX(-18deg); opacity:1 }
  80%{ opacity:1 }
  100%{ transform: translateX(-50%) skewX(-18deg); opacity:0 }
}

/* ctaPulse eliminado: no se desea animación de escala/traslación en el botón CTA */

.homepage__cta-wave:hover{ box-shadow:0 18px 38px rgba(0,122,95,0.18); }
.homepage__cta-wave:focus{ outline:3px solid rgba(0,179,125,0.22); outline-offset:3px }

/* small accessibility tweak: reduce motion if user prefers reduced-motion */
@media (prefers-reduced-motion: reduce){
  .homepage__cta-wave, .homepage__cta-wave::after{ animation:none; transition:none }
}

@media (max-width:520px){ .homepage__cta-wave{ padding:0 18px; font-size:15px } }