:root {
  --bg: #ffffff;
  --bg-alt: #f5f6fb;
  --surface: #ffffff;
  --border: #e4e6f0;
  --text: #10122a;
  --text-dim: #5c6178;
  --accent: #6d5ef8;
  --accent-2: #22d3ee;
  --accent-gradient: linear-gradient(90deg, #7c5cff, #22d3ee);
  --radius: 14px;
  --max-width: 1160px;
  --shadow: 0 10px 30px -12px rgba(16, 18, 42, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* scroll-behavior: smooth NO va acá global: hace que el scroll
   automático del navegador al enfocar un input (para subirlo sobre
   el teclado) se vuelva una animación lenta, dando la sensación de
   que la página "no deja de moverse" mientras se escribe. El scroll
   suave para los links de navegación se maneja aparte, por JS. */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
  transition: transform 0.28s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.logo-img {
  height: 30px;
  width: auto;
  display: block;
}

.logo-tag {
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav a {
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--text);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  margin-inline: auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--accent);
}

.btn-block {
  width: 100%;
}

.nav .btn-nav {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 9px 18px;
  font-size: 0.9rem;
  border-radius: 999px;
}

/* Global animated network background */
.network-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
}

/* Hero */
.hero {
  padding: 130px 0 100px;
}

.hero-inner {
  max-width: 760px;
}

.eyebrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 22px;
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Marcas */
.brands {
  padding: 36px 0 44px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(245, 246, 251, 0.7);
}

.brands-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.brands-track {
  display: flex;
  width: max-content;
  animation: brands-scroll 32s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brands-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brands-list span {
  padding: 0 32px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0.75;
}

/* Los logos vienen con proporciones muy distintas (de 1.7:1 a 7.5:1),
   así que se balancean ópticamente uno por uno en vez de forzar una
   sola altura. El gris los unifica entre sí y con las marcas que aún
   se muestran como texto. */
.brand-logo {
  flex-shrink: 0;
  margin: 0 32px;
  width: auto;
  /* brightness(0) los aplana a negro respetando la transparencia, y la
     opacidad los deja en el mismo gris que las marcas en texto. Con
     grayscale() los logos claros (rojo/cian) quedaban casi invisibles. */
  filter: brightness(0);
  opacity: 0.62;
}

.brand-logo--hikvision { height: 27px; }
.brand-logo--epcom { height: 27px; }
.brand-logo--accesspro { height: 24px; }
.brand-logo--honeywell { height: 25px; }
.brand-logo--kenwood { height: 24px; }
.brand-logo--icom { height: 36px; }
.brand-logo--longi { height: 30px; }
.brand-logo--dji { height: 32px; }
.brand-logo--synology { height: 27px; }
/* Los logos apilados (icono sobre texto) necesitan más alto que los
   horizontales para tener el mismo peso visual y que su texto se lea. */
.brand-logo--powerline { height: 34px; }
.brand-logo--ubiquiti { height: 42px; }
.brand-logo--cambium { height: 46px; }
.brand-logo--hilook { height: 27px; }
.brand-logo--ezviz { height: 28px; }
.brand-logo--suprema { height: 24px; }
.brand-logo--dahua { height: 32px; }
.brand-logo--hanwha { height: 48px; }
.brand-logo--huawei { height: 28px; }
.brand-logo--meitrack { height: 28px; }
.brand-logo--panduit { height: 25px; }
.brand-logo--topflytech { height: 26px; }
.brand-logo--txpro { height: 38px; }
.brand-logo--bose { height: 24px; }
.brand-logo--cyberpower { height: 25px; }
.brand-logo--ecoflow { height: 22px; }

@keyframes brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 480px) {
  .brands-list span {
    padding: 0 22px;
    font-size: 0.92rem;
  }

  .brand-logo {
    margin: 0 22px;
  }

  .brand-logo--hikvision { height: 23px; }
  .brand-logo--epcom { height: 23px; }
  .brand-logo--accesspro { height: 21px; }
  .brand-logo--honeywell { height: 22px; }
  .brand-logo--kenwood { height: 21px; }
  .brand-logo--icom { height: 30px; }
  .brand-logo--longi { height: 26px; }
  .brand-logo--dji { height: 27px; }
  .brand-logo--synology { height: 23px; }
  .brand-logo--powerline { height: 29px; }
  .brand-logo--ubiquiti { height: 36px; }
  .brand-logo--cambium { height: 39px; }
  .brand-logo--hilook { height: 23px; }
  .brand-logo--ezviz { height: 24px; }
  .brand-logo--suprema { height: 21px; }
  .brand-logo--dahua { height: 27px; }
  .brand-logo--hanwha { height: 41px; }
  .brand-logo--huawei { height: 24px; }
  .brand-logo--meitrack { height: 24px; }
  .brand-logo--panduit { height: 21px; }
  .brand-logo--topflytech { height: 22px; }
  .brand-logo--txpro { height: 32px; }
  .brand-logo--bose { height: 21px; }
  .brand-logo--cyberpower { height: 21px; }
  .brand-logo--ecoflow { height: 19px; }
}

/* Section shared */
.section {
  padding: 96px 0;
}

.section-alt {
  background: rgba(245, 246, 251, 0.88);
  backdrop-filter: blur(2px);
}

.section-eyebrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 640px;
  margin-bottom: 16px;
}

.section-lead {
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 48px;
  font-size: 1.05rem;
}

/* Terminal / operación en vivo */
.terminal-window {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(245, 246, 251, 0.7);
  border-bottom: 1px solid var(--border);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-title {
  margin-left: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.terminal-body {
  margin: 0;
  padding: 22px 20px 26px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.terminal-body .t-dim { color: var(--text-dim); }
.terminal-body .t-ok { color: var(--accent); font-weight: 600; }
.terminal-body .t-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.terminal-body .t-prompt { color: var(--accent); font-weight: 700; }

/* El texto que aún no se "escribió" sigue ocupando su lugar: se oculta,
   no se quita. Así la altura de la terminal es constante desde el
   primer frame y la página nunca se reacomoda mientras teclea. */
.t-pending {
  visibility: hidden;
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 2px;
  /* Anula su aporte al ancho de línea (2px margen + 8px ancho) para
     que insertarlo nunca cambie dónde corta el texto. */
  margin-right: -10px;
  background: var(--accent);
  vertical-align: -2px;
  animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(109, 94, 248, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.card p {
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* Reseñas */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -28px 0 36px;
}

.reviews-score {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.reviews-stars,
.review-stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  width: 17px;
  height: 17px;
  fill: var(--border);
}

.star.is-on {
  fill: #f5a623;
}

.reviews-count {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.review-author {
  font-weight: 700;
  font-size: 0.95rem;
}

.review-date {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.review-stars {
  margin-bottom: 12px;
}

.review-text {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.reviews-footer {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 0.9rem;
}

.reviews-footer a {
  color: var(--accent);
  font-weight: 600;
}

.reviews-footer a:hover {
  text-decoration: underline;
}

.reviews-source {
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.about-copy p {
  color: var(--text-dim);
  margin-bottom: 24px;
}

.about-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 0.98rem;
}

.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gradient);
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step {
  border-top: 2px solid var(--border);
  padding-top: 20px;
}

.step-number {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}

.step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.step p {
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* CTA / contact */
.cta {
  text-align: center;
}

.cta-inner {
  max-width: 620px;
}

.cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.cta p {
  color: var(--text-dim);
  margin-bottom: 40px;
}

.contact-form {
  position: relative;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-legal {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.form-legal a {
  color: var(--accent);
  font-weight: 600;
}

.form-legal a:hover {
  text-decoration: underline;
}

.form-note {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  min-height: 1.2em;
}

.form-note.is-error {
  color: #dc2626;
}

/* Páginas legales */
.legal-section {
  padding-top: 120px;
}

.legal {
  max-width: 780px;
}

.legal-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.legal-updated {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 40px;
}

.legal-body {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}

.legal-body h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 44px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.legal-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 28px 0 8px;
}

.legal-body p,
.legal-body li {
  color: var(--text-dim);
  font-size: 0.97rem;
}

.legal-body p {
  margin-bottom: 14px;
}

.legal-body strong {
  color: var(--text);
  font-weight: 600;
}

.legal-body a {
  color: var(--accent);
  font-weight: 500;
}

.legal-body a:hover {
  text-decoration: underline;
}

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 0;
}

.legal-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.legal-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-back {
  margin-top: 32px;
  font-size: 0.95rem;
  font-weight: 600;
}

.legal-back a {
  color: var(--accent);
}

@media (max-width: 600px) {
  .legal-body {
    padding: 26px 20px;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(245, 246, 251, 0.88);
  backdrop-filter: blur(2px);
  padding: 40px 0 32px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  /* Sin esto la caja del logo se estira y, como alinea a la derecha
     por dentro, la marca queda separada del texto de abajo. */
  align-items: flex-start;
  gap: 12px;
}

.footer-tagline {
  max-width: 260px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-size: 0.88rem;
}

.footer-meta a {
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.footer-meta a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: 8px;
  color: var(--border);
  font-size: 0.88rem;
}

.footer-rights {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-inner p {
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* Utility */
.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Responsive */
@media (max-width: 860px) {
  .nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav a:last-child:not(.btn-nav) {
    border-bottom: none;
  }

  .nav a.btn-nav {
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .nav-toggle {
    display: flex;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-top {
    flex-direction: column;
    gap: 26px;
  }

  .footer-meta {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .logo-tag {
    display: none;
  }

  .steps {
    grid-template-columns: 1fr;
  }
}