/* =========================================================================
   Hipokey — landing de prelanzamiento (hipokey.com)
   Estática y autónoma: no depende de la aplicación ni de la base de datos.
   Composición centrada; azul de marca dominante y verde como acento.
   ========================================================================= */

:root {
  --azul-900: #001f3d;
  --azul-800: #002647;
  --azul-700: #00325c;
  --azul-600: #003c70;
  --azul-300: #92ccff;
  --verde: #00bd49;
  --verde-claro: #54ff96;
  --crema: #f7f5f0;
  --crema-dim: #d8d3ca;
  --gris: #888d91;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--azul-900);
  color: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap { max-width: 64rem; margin: 0 auto; }

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative;
  /* Ocupa la ventana, pero con techo: en pantallas muy altas el contenido
     quedaba flotando en mitad de un vacío enorme. */
  min-height: min(100svh, 54rem);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 85% at 50% -10%, var(--azul-700) 0%, transparent 58%),
    radial-gradient(80% 60% at 100% 100%, #00492e 0%, transparent 62%),
    var(--azul-900);
  overflow: hidden;
}

.grain {
  position: absolute; inset: -50%; z-index: 0; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 46rem; height: 46rem; top: -20rem; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,189,73,.13) 0%, transparent 68%);
  filter: blur(30px);
}

.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 3.5rem);
}

.logo { width: clamp(120px, 14vw, 151px); }

.badge {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-claro);
  border: 1px solid rgba(84,255,150,.3);
  border-radius: 999px; padding: .4rem .9rem;
  background: rgba(0,189,73,.07);
  white-space: nowrap;
}

/* --- cuerpo del hero: TODO centrado --- */
.hero-body {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  max-width: 54rem; width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem) 3rem;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--azul-300); margin: 0 0 1.5rem;
  animation: rise .7s cubic-bezier(.2,.7,.3,1) both;
}

.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 4px rgba(0,189,73,.16);
}

.title {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 100;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 1.6rem;
  /* 16ch parte el titular en dos líneas equilibradas y evita dejar
     "que sí" huérfano en una línea corta. */
  max-width: 16ch;
  text-wrap: balance;
  animation: rise .7s cubic-bezier(.2,.7,.3,1) .08s both;
}

.title em {
  display: block;
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
  color: var(--verde-claro);
}

.lede {
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.7; font-weight: 300;
  color: var(--crema-dim);
  max-width: 44ch;
  margin: 0 0 2.4rem;
  animation: rise .7s cubic-bezier(.2,.7,.3,1) .16s both;
}

.lede strong { color: var(--crema); font-weight: 500; }

/* ----------------------------------------------------------------- STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%; max-width: 40rem;
  margin: 3rem 0 0; padding-top: 2rem;
  border-top: 1px solid rgba(207,233,255,.14);
  animation: rise .7s cubic-bezier(.2,.7,.3,1) .32s both;
}

.stats dt {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .4rem; line-height: 1.4;
}

.stats dd {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 60;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 600; margin: 0; color: var(--crema);
}

/* ---------------------------------------------------------------- TICKER */
.ticker {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(207,233,255,.12);
  border-bottom: 1px solid rgba(207,233,255,.12);
  overflow: hidden; padding: .95rem 0;
  background: rgba(0,31,61,.5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.ticker-track { display: flex; gap: 2.75rem; width: max-content; animation: slide 46s linear infinite; }

.ticker-track span {
  font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(207,233,255,.46); white-space: nowrap;
}

@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ FORMULARIO */
.wl { width: 100%; max-width: 30rem; animation: rise .7s cubic-bezier(.2,.7,.3,1) .24s both; }

.wl-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

.wl input {
  flex: 1 1 14rem; min-width: 0;
  font-family: var(--body); font-size: 1rem;
  padding: .92rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(207,233,255,.2);
  background: rgba(255,255,255,.05);
  color: var(--crema);
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.wl input::placeholder { color: rgba(216,211,202,.45); }

.wl input:focus {
  outline: none; border-color: var(--verde);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(0,189,73,.16);
}

.wl input[aria-invalid="true"] { border-color: #ff7a6d; }

.wl button {
  font-family: var(--body); font-size: .96rem; font-weight: 600;
  padding: .92rem 1.65rem;
  border-radius: 10px; border: none;
  background: var(--verde); color: #00230f;
  cursor: pointer;
  transition: transform .15s, background .2s;
  box-shadow: 0 6px 18px -6px rgba(0,189,73,.5);
}

.wl button:hover:not(:disabled) { background: var(--verde-claro); transform: translateY(-1px); }
.wl button:disabled { opacity: .6; cursor: not-allowed; }

.wl-msg { font-size: .78rem; color: var(--gris); margin: .7rem 0 0; }
.wl-msg.error { color: #ff9d92; }
.wl-msg.ok { color: var(--verde-claro); }

.wl.done .wl-row { display: none; }

.wl.done .wl-msg {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.2rem; border-radius: 12px;
  border: 1px solid rgba(0,189,73,.35);
  background: rgba(0,189,73,.1);
  color: var(--verde-claro); font-size: .95rem; margin: 0;
}

/* variante clara */
.wl-light input {
  border-color: rgba(0,60,112,.22); background: #fff; color: var(--azul-800);
}
.wl-light input::placeholder { color: rgba(0,60,112,.4); }
.wl-light .wl-msg { color: rgba(0,38,71,.6); }
.wl-light.done .wl-msg { color: #006b2a; border-color: rgba(0,138,53,.35); }

/* ------------------------------------------------------------------ BAND */
.band {
  background: var(--crema); color: var(--azul-800);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
}

.band-title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 100;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.16; font-weight: 600; letter-spacing: -.018em;
  margin: 0 auto 3rem;
  max-width: 24ch;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  text-align: left;
}

.card { border-top: 2px solid var(--verde); padding-top: 1.3rem; }

.card h3 {
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  margin: 0 0 .65rem; color: var(--azul-600);
}

.card p {
  margin: 0; font-size: .93rem; line-height: 1.7; font-weight: 300;
  color: rgba(0,38,71,.75);
}

/* ----------------------------------------------------------------- PASOS */
.steps {
  background: var(--azul-800);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
}

.label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--verde-claro); margin: 0 0 2.6rem;
}

.steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
}

.step { display: flex; flex-direction: column; align-items: center; }

.step-n {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 60;
  font-size: 1.6rem; font-weight: 400;
  color: rgba(146,204,255,.4);
  line-height: 1; margin-bottom: 1rem;
}

.step h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 100;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 .6rem;
}

.step p {
  margin: 0; font-size: .93rem; line-height: 1.7; font-weight: 300;
  color: var(--crema-dim); max-width: 34ch;
}

/* ---------------------------------------------------------------- CIERRE */
.closing {
  background: var(--crema); color: var(--azul-800);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3.5rem);
}

.closing-wrap {
  max-width: 40rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.iso { width: 132px; margin-bottom: 1.6rem; opacity: .9; }

.closing h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 100;
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -.018em;
  margin: 0 0 .9rem;
}

.closing > .closing-wrap > p {
  font-size: .98rem; line-height: 1.7; font-weight: 300;
  color: rgba(0,38,71,.72); margin: 0 0 2rem; max-width: 32rem;
}

/* ---------------------------------------------------------------- FOOTER */
.foot {
  background: var(--azul-900);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(207,233,255,.1);
}

.foot-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.foot-logo { width: 113px; opacity: .85; margin-bottom: 1.3rem; }

.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.6rem; justify-content: center; }

.foot-links a {
  font-size: .85rem; color: var(--azul-300); text-decoration: none; transition: color .2s;
}

.foot-links a:hover { color: var(--verde-claro); text-decoration: underline; text-underline-offset: 3px; }

.foot-legal {
  font-size: .76rem; line-height: 1.65; font-weight: 300;
  color: rgba(136,141,145,.85); max-width: 46rem; margin: 0 0 1rem;
}

.foot-copy { font-size: .76rem; color: rgba(136,141,145,.6); margin: 0; }

/* ------------------------------------------------------------ ANIMACIONES */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 34rem) {
  .stats { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .cards { text-align: center; }
  .card { border-top: none; border-left: 2px solid var(--verde); padding: 0 0 0 1rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker-track { animation: none; }
  html { scroll-behavior: auto; }
}