:root {
  --bg: #071322;
  --bg-2: #0b1b32;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.11);
  --text: #eaf1fb;
  --text-dim: #9fb0cc;

  --navy: #16385f;
  --blue: #2ea3f2;
  --blue-bright: #1e9bef;

  --orange: #e08a3c;   /* SiGOS */
  --sirem: #1e6fff;    /* SiREM */
  --teal: #1aa89a;     /* SiGEF29 */

  --radius: 20px;
  --maxw: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  overflow-x: hidden; min-height: 100vh;
}
h1, h2, h3, .stat__num { font-family: "Sora", "Inter", sans-serif; }
a { color: inherit; text-decoration: none; }
.grad {
  background: linear-gradient(100deg, var(--blue), #7fd0ff 60%, var(--blue-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Fondo ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background:
    linear-gradient(var(--bg), var(--bg-2)),
    linear-gradient(rgba(46, 163, 242, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 163, 242, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 40%, transparent 100%);
}
.bg-glow { position: fixed; z-index: -2; border-radius: 50%; filter: blur(120px); opacity: 0.5; pointer-events: none; }
.bg-glow--1 { width: 480px; height: 480px; background: #1e5fa8; top: -140px; left: -120px; }
.bg-glow--2 { width: 520px; height: 520px; background: #123a63; top: 240px; right: -160px; opacity: 0.6; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto; padding: 0.9rem 1.5rem;
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; }
.brand__img { height: 50px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.92rem; font-weight: 500; }
.nav__links a { color: var(--text-dim); transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }
.nav__cta { padding: 0.5rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text) !important; background: var(--surface); }
.nav__cta:hover { background: var(--surface-strong); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; border: 1px solid transparent;
}
.btn--primary {
  color: #04121f; background: linear-gradient(135deg, var(--blue), var(--blue-bright));
  box-shadow: 0 10px 30px -10px rgba(46, 163, 242, 0.6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(46, 163, 242, 0.75); }
.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--surface-strong); transform: translateY(-2px); }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--product {
  align-self: flex-start; margin-top: 0.4rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--accent);
}
.btn--product:hover { background: var(--accent); color: #04121f; transform: translateY(-2px); }
.btn--product:hover .card__arrow { transform: translateX(4px); }
.card__arrow { transition: transform 0.25s; }

/* ---------- Hero ---------- */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem 3rem; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1.6rem;
}
.badge--soft { margin-bottom: 1.2rem; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(46,163,242,0.5); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,163,242,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(46,163,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,163,242,0); }
}
.hero__title { font-size: clamp(2.1rem, 5.5vw, 3.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 1.3rem; }
.hero__sub { max-width: 660px; margin: 0 auto 1rem; color: var(--text-dim); font-size: 1.08rem; }
.hero__sub--sm { font-size: 0.98rem; margin-bottom: 2rem; }
.hero__sub strong { color: var(--text); }
.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.hero__stats {
  display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid var(--border);
  max-width: 640px; margin-inline: auto;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__num { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--blue), #7fd0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__label { font-size: 0.82rem; color: var(--text-dim); }

/* ---------- Secciones ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem; }
.section--narrow { max-width: 780px; text-align: center; }
.section__head { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
.section__title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.8rem; }
.section__desc { color: var(--text-dim); font-size: 1.02rem; }

.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--blue); margin-bottom: 1rem;
}
.statement { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
.lead { color: var(--text); font-size: 1.12rem; max-width: 640px; margin: 0 auto 1rem; }
.lead--dim { color: var(--text-dim); font-size: 1.02rem; }

/* ---------- Producto (ecosistema) ---------- */
.product {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.6rem; align-items: stretch;
  border: 1px solid var(--border); border-radius: 24px; background: var(--surface);
  overflow: hidden; margin-bottom: 1.6rem; transition: border-color 0.25s, box-shadow 0.25s;
}
.product[data-accent="blue"]   { --accent: var(--sirem); }
.product[data-accent="orange"] { --accent: var(--orange); }
.product[data-accent="teal"]   { --accent: var(--teal); }
.product:hover { border-color: var(--accent); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--accent) 65%, transparent); }
.product--reverse .product__visual { order: 2; }

.product__visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 2.5rem 2rem; border-right: 4px solid var(--accent);
}
.product--reverse .product__visual { border-right: none; border-left: 4px solid var(--accent); }
.product__visual img { max-height: 96px; max-width: 100%; width: auto; object-fit: contain; }
.product__content { display: flex; flex-direction: column; padding: 2rem 2.2rem 2rem 0.4rem; }
.product__name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.6rem; color: var(--accent); }
.product__name span { color: var(--text); font-weight: 600; font-size: 1.05rem; }
.product__text { color: var(--text-dim); margin-bottom: 1.2rem; }
.features {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.2rem;
  margin-bottom: 1.5rem;
}
.features li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: var(--text); }
.features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; font-size: 0.85rem;
}

/* ---------- Tecnología ---------- */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.benefit {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 1.6rem; transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.benefit:hover { transform: translateY(-4px); border-color: var(--blue); background: var(--surface-strong); }
.benefit__ico { font-size: 1.7rem; display: inline-block; margin-bottom: 0.7rem; }
.benefit h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.benefit p { color: var(--text-dim); font-size: 0.94rem; }

/* ---------- Visión ---------- */
.vision {
  position: relative; margin-top: 3rem; padding: 2.5rem 2rem; text-align: center;
  border: 1px solid var(--border); border-radius: 24px;
  background: linear-gradient(180deg, rgba(46,163,242,0.10), rgba(255,255,255,0.01));
}
.vision__text { max-width: 660px; margin: 0 auto; color: var(--text); font-size: 1.05rem; }

/* ---------- Contacto ---------- */
.section--contact { text-align: center; }
.section--contact .section__desc { margin-bottom: 1.8rem; }

.contact-form {
  max-width: 620px; margin: 0 auto; text-align: left;
  display: flex; flex-direction: column; gap: 1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > span { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.field > span em { color: var(--text-dim); font-weight: 400; font-style: normal; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.8rem 1rem; transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--surface-strong);
}
.field textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 0.95rem; min-height: 1.2em; margin: 0; }
.form-status.is-ok { color: #4ade80; }
.form-status.is-error { color: #f87171; }
.contact-alt { margin-top: 1.6rem; }
.link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--blue-bright); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer {
  max-width: var(--maxw); margin: 2rem auto 0; padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center;
}
.footer__img { height: 56px; width: auto; }
.footer__copy { color: var(--text-dim); font-size: 0.85rem; }
.footer__copy--dim { opacity: 0.7; font-size: 0.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .product, .product--reverse { grid-template-columns: 1fr; }
  .product--reverse .product__visual { order: 0; border-left: none; }
  .product__visual { border-right: none; border-bottom: 4px solid var(--accent); padding: 2rem; }
  .product__content { padding: 1.8rem; }
}
@media (max-width: 640px) {
  .nav__links { gap: 0.9rem; font-size: 0.82rem; }
  .brand__img { height: 40px; }
  .hero__stats { gap: 1.8rem; }
  .features { grid-template-columns: 1fr; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .badge__dot { animation: none; }
  html { scroll-behavior: auto; }
}