/* ============================================
   INSIDEht Landing Page — Styles
   Brand: Primary #183465 navy · Accent #06accc cyan · Orange #f2951a
   Signature gradient: linear-gradient(135deg,#00e1ac,#00abcd)
   Fonts: Montserrat (display + body) · Roboto Mono (data)
   Source: insideht-marca/tokens (colors, typography, spacing)
   ============================================ */

:root {
  /* Brand */
  --color-primary: #183465;
  --color-primary-dark: #081537;
  --color-primary-light: #3b527c;
  --color-primary-alt: #203362;
  --color-accent: #06accc;
  --color-accent-dark: #0282ad;
  --color-accent-light: #51c5db;
  --color-accent-horatech: #00b0ca;
  --color-orange: #f2951a;
  --color-orange-dark: #e59532;
  --color-warn: #f7000b;

  /* Signature gradients */
  --gradient-insideht: linear-gradient(135deg, #00e1ac 0%, #00abcd 100%);
  --gradient-horatech: linear-gradient(90deg, #2df5ea 0%, #2790fc 100%);

  /* Domain (semantic) */
  --color-correctora: #05b3ce;
  --color-gas: #fba400;
  --color-agua: #00c2a8;
  --color-presion: #802392;
  --color-electricidad: #3b82f6;
  /* la división Residenciales agrupa gas y agua: color propio, no el de agua */
  --color-residencial: #75da4e;
  --color-activo: #2de946;
  --color-inactivo: #e22f2f;

  /* Surfaces */
  --color-bg-light: #ffffff;
  --color-bg-gray: #edeff0;
  --color-bg-gray-soft: #f5f5f5;
  --color-surface: #ffffff;
  --color-bg-dark: #081537;
  --color-bg-dark-deeper: #050b22;
  --color-surface-dark: #112753;

  /* Text */
  --color-text: #081537;
  --color-text-secondary: #535074;
  --color-text-muted: #8d8d8d;
  --color-text-light: #ffffff;

  --color-border: #e3e7ed;
  --color-divider: #c3c7cf;

  /* Type */
  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(8, 21, 55, .08);
  --shadow-md: 0 4px 16px rgba(8, 21, 55, .12);
  --shadow-lg: 0 8px 32px rgba(8, 21, 55, .14);
  --shadow-xl: 0 16px 48px rgba(8, 21, 55, .18);
  --shadow-elevated: 0 5px 15px 3px rgba(0, 0, 0, .47);

  --transition: .3s cubic-bezier(.4, 0, .2, 1);
  --container-max: 1200px;
  --nav-height: 64px;
  --section-padding: 96px;
  --section-padding-mobile: 64px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
strong { font-weight: 600; }

/* ---- Container ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section ---- */
.section { padding: var(--section-padding) 0; position: relative; }
.section--light { background: var(--color-bg-light); }
.section--gray { background: var(--color-bg-gray); }
.section--soft { background: var(--color-bg-gray-soft); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-light); }
.section--dark .section__subtitle,
.section--dark .lead { color: rgba(255, 255, 255, .72); }

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.section__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -.5px;
}
.section--dark .section__title { color: #fff; }
.section__title--center { text-align: center; }
.section__title--center + .section__subtitle { margin: 0 auto 56px; }
.section__subtitle {
  font-size: 18px;
  color: var(--color-text-secondary);
  max-width: 720px;
  text-align: center;
  margin: 0 auto 56px;
  line-height: 1.7;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-transform: uppercase;
}
.btn--sm { padding: 10px 24px; font-size: 13px; }
.btn--primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(6, 172, 204, .35);
}
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .65);
}

/* ---- Navbar ---- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: var(--transition);
}
.navbar.scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-img {
  height: 36px;
  width: auto;
  transition: var(--transition);
}
.navbar__logo-img--dark { display: block; }
.navbar__logo-img--light { display: none; }
.navbar.scrolled .navbar__logo-img--dark { display: none; }
.navbar.scrolled .navbar__logo-img--light { display: block; }

.navbar__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.navbar__links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  transition: var(--transition);
  position: relative;
}
.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: var(--transition);
}
.navbar__links a:hover::after { width: 100%; }
.navbar.scrolled .navbar__links a { color: var(--color-text-secondary); }
.navbar.scrolled .navbar__links a:hover { color: var(--color-text); }

.navbar__cta { margin-left: 8px; }
.navbar__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  margin-left: auto;
  position: relative;
  z-index: 1001;
}
.navbar.scrolled .navbar__toggle { color: var(--color-text); }
.navbar.menu-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar.scrolled .navbar__links.open a { color: #fff; }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 56px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 225, 172, .12), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(6, 172, 204, .15), transparent 50%);
  pointer-events: none;
}
.hero__content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.hero__logo {
  height: 88px;
  width: auto;
  margin: 0 auto 32px;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.hero__tagline-accent {
  background: var(--gradient-insideht);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__description {
  font-size: 18px;
  color: rgba(255, 255, 255, .75);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.hero__chips {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__chip {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
}
.hero__showcase {
  margin-top: 24px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Browser frame ---- */
.browser-frame {
  background: var(--color-surface-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, .06);
}
.browser-frame--small { box-shadow: var(--shadow-lg); }
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #112753;
}
.browser-frame__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.browser-frame__dot:nth-child(1) { background: #ff5f57; }
.browser-frame__dot:nth-child(2) { background: #ffbd2e; }
.browser-frame__dot:nth-child(3) { background: #28ca41; }
.browser-frame__url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}
.browser-frame__content img,
.browser-frame__content svg {
  width: 100%;
  display: block;
}

/* ---- About / Capabilities ---- */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
}
.about__lead {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 16px;
}
.about__body {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.capability {
  text-align: left;
  padding: 28px 22px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.capability:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.capability__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-insideht);
  color: #fff;
  margin-bottom: 16px;
}
.capability__icon .material-icons { font-size: 24px; }
.capability__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}
.capability__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ---- Feature Cards ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.feature-card__icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 14px;
  display: block;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.feature-card__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ---- Sectors ---- */
.sectors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.sector {
  text-align: center;
  padding: 36px 20px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.sector:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.sector__icon {
  font-size: 40px;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.sector__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.verticals-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(6, 172, 204, .08);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.verticals-note .material-icons {
  color: var(--color-accent);
  flex-shrink: 0;
}
.verticals-note strong { color: var(--color-text); }

/* ---- Verticals ---- */
.verticals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vertical {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.vertical--gas { border-top: 4px solid var(--color-gas); }
.vertical--agua { border-top: 4px solid var(--color-agua); }
.vertical--electricidad { border-top: 4px solid var(--color-electricidad); }
.vertical:hover { box-shadow: var(--shadow-md); }
.vertical__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vertical__chip {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  color: #fff;
}
.vertical--gas .vertical__chip { background: var(--color-gas); }
.vertical--agua .vertical__chip { background: var(--color-agua); }
.vertical--electricidad .vertical__chip { background: var(--color-electricidad); }
.vertical__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.vertical__body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
  flex-grow: 1;
}
.vertical__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vertical__list li {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding-left: 20px;
  position: relative;
}
.vertical__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---- Architecture ---- */
.architecture {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.architecture__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.3;
}
.architecture__body {
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
  margin-bottom: 16px;
}
.architecture__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  border: 1px solid rgba(255, 255, 255, .06);
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stack-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-md);
  padding: 20px;
}
.stack-item__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: 6px;
  display: block;
}
.stack-item__value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  line-height: 1.4;
}

/* ---- Devices ---- */
.division { margin-bottom: 56px; }
.division:last-child { margin-bottom: 0; }
.division__head { margin-bottom: 24px; }
.division__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.division__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.division--correctoras .division__dot { background: var(--color-correctora); }
.division--presion .division__dot { background: var(--color-presion); }
.division--residenciales .division__dot { background: var(--color-residencial); }
.division--scada .division__dot { background: var(--color-orange); }
.division__lead {
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 760px;
  line-height: 1.65;
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.device-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--color-border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.device-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-light);
}
.device-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.device-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
}
.device-card__transports {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.device-card__transport {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--color-accent-dark);
  background: rgba(6, 172, 204, .1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.device-card__transport--walkby {
  color: var(--color-orange-dark);
  background: rgba(242, 149, 26, .12);
}
.device-card__role {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.device-card__body {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 14px;
}
.device-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.device-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-primary-light);
  background: var(--color-bg-gray);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* ---- Alerts ---- */
.alerts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  margin-bottom: 56px;
}
.alerts-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.alerts-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
}
.alerts-levels { display: flex; flex-direction: column; gap: 12px; }
.alerts-level {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--color-bg-gray-soft);
  border-left: 5px solid;
}
.alerts-level--hh { border-color: var(--color-warn); }
.alerts-level--h  { border-color: var(--color-orange); }
.alerts-level--l  { border-color: var(--color-accent); }
.alerts-level--ll { border-color: var(--color-presion); }
.alerts-level__code {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  width: 36px;
  flex-shrink: 0;
}
.alerts-level__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.alerts-level__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.channel {
  text-align: center;
  padding: 28px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.channel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-light);
}
.channel__icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.channel__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.channel__provider {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---- Showcase rows ---- */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.showcase:last-child { margin-bottom: 0; }
.showcase--reverse { direction: rtl; }
.showcase--reverse > * { direction: ltr; }
.showcase__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.3;
}
.showcase__body {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.showcase__list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.showcase__list li {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding-left: 24px;
  position: relative;
}
.showcase__list li::before {
  content: 'check';
  font-family: 'Material Icons';
  font-size: 16px;
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 1px;
}

.phone-frame {
  text-align: center;
  flex-shrink: 0;
  position: relative;
  margin: 0 auto;
}
.phone-frame__screen {
  width: 280px;
  height: 580px;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  border: 5px solid #1a1a1a;
  box-shadow: var(--shadow-elevated);
  position: relative;
  margin: 0 auto;
}
.phone-frame__screen img,
.phone-frame__screen svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Integrations ---- */
.integrations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.integration {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
  position: relative;
}
.integration__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.integration__body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}
.integration__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.integration__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-primary);
  background: var(--color-bg-gray);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

/* ---- Hierarchy ---- */
.hierarchy-block {
  margin-top: 40px;
}
.hierarchy-block + .hierarchy-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}
.hierarchy-block__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: .3px;
}
.hierarchy {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 24px auto 0;
  flex-wrap: wrap;
  max-width: 1000px;
}
.hierarchy__node {
  flex: 1;
  min-width: 160px;
  text-align: center;
  padding: 24px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 8px;
  transition: var(--transition);
}
.hierarchy__node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hierarchy__level {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.hierarchy__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.hierarchy__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---- Infraestructura ---- */
.section--infra::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 225, 172, .08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(6, 172, 204, .10), transparent 50%);
  pointer-events: none;
}
.section--infra > .container { position: relative; z-index: 1; }

.infra-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 64px;
}
.infra-layer {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.infra-layer--cloud {
  background: linear-gradient(180deg, rgba(0, 225, 172, .06), rgba(6, 172, 204, .06));
  border-color: rgba(6, 172, 204, .25);
}
.infra-layer__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-light);
  text-align: center;
}
.infra-layer__nodes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.infra-node {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: var(--transition);
}
.infra-node:hover {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}
.infra-node .material-icons {
  font-size: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.infra-node__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.infra-node__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.infra-node--core {
  background: var(--gradient-insideht);
  border-color: transparent;
}
.infra-node--core .material-icons,
.infra-node--core .infra-node__sub { color: rgba(255, 255, 255, .9); }
.infra-node--core .infra-node__name { color: #fff; }
.infra-store-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.infra-store {
  background: rgba(8, 21, 55, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.infra-store .material-icons {
  font-size: 18px;
  color: var(--color-accent-light);
}
.infra-store span {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.infra-store small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .3px;
}

.infra-arrow {
  align-self: center;
  width: 32px;
  height: 2px;
  position: relative;
  background: linear-gradient(90deg, rgba(0, 225, 172, .3), rgba(6, 172, 204, .8));
  border-radius: 2px;
}
.infra-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--color-accent);
}

.infra-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.infra-pillar {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  transition: var(--transition);
}
.infra-pillar:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--color-accent);
  transform: translateY(-3px);
}
.infra-pillar__icon {
  font-size: 30px;
  color: var(--color-accent);
  margin-bottom: 14px;
  display: block;
}
.infra-pillar__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.infra-pillar__text {
  font-size: 13px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.6;
}

.infra-load {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.infra-load__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-light);
  text-align: center;
  margin-bottom: 28px;
}
.infra-load__items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.infra-load__item {
  text-align: center;
  padding: 16px 12px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.infra-load__item:last-child { border-right: none; }
.infra-load__num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 10px;
}
.infra-load__num span { font-size: 28px; opacity: .7; }
.infra-load__unit {
  font-size: 28px;
  font-weight: 700;
  background: var(--gradient-insideht);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 2px;
}
.infra-load__item--total .infra-load__num {
  background: var(--gradient-insideht);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.infra-load__item--total .infra-load__num span { color: rgba(0, 225, 172, .7); -webkit-text-fill-color: rgba(0, 225, 172, .7); }
.infra-load__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .3px;
  margin-bottom: 4px;
}
.infra-load__detail {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.5;
  font-family: var(--font-mono);
}

/* ---- LoRaWAN ---- */
.lora-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 64px;
  flex-wrap: wrap;
  max-width: 1100px;
}
.lora-flow__node {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  text-align: center;
  padding: 28px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  position: relative;
}
.lora-flow__node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-light);
}
.lora-flow__icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.lora-flow__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.lora-flow__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.lora-flow__arrow {
  align-self: center;
  font-size: 28px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.lora-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lora-feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--transition);
}
.lora-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.lora-feature__icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 14px;
  display: block;
}
.lora-feature__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}
.lora-feature__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ---- Stats ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.stat {
  text-align: center;
  padding: 40px 24px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.stat:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--color-accent);
  transform: translateY(-3px);
}
.stat__value {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  background: var(--gradient-insideht);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.stat__unit {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  margin-left: 4px;
}
.stat__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.4;
}

/* ---- Mapa de despliegue (sección de números) ---- */
.deploy-map {
  max-width: 900px;
  margin: 56px auto 0;
}
.deploy-map img {
  width: 100%;
  border-radius: var(--radius-lg);
  /* el mapa es oscuro sobre fondo oscuro: sin borde se funde */
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-xl);
}
.deploy-map__caption {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

/* ---- CTA Section ---- */
.cta {
  background: var(--gradient-insideht);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.cta__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -.5px;
}
.cta__body {
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
.cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta .btn--primary {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.cta .btn--primary:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ---- Footer ---- */
.footer {
  background: var(--color-bg-dark-deeper);
  color: rgba(255, 255, 255, .72);
  padding: 64px 0 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer__logo {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.footer__description {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.65;
  max-width: 360px;
}
.footer__heading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .85);
}
.footer__links ul,
.footer__contact-list { display: flex; flex-direction: column; gap: 12px; }
.footer__links a,
.footer__contact-list a,
.footer__contact-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  transition: var(--transition);
}
.footer__links a:hover,
.footer__contact-list a:hover { color: #fff; }
.footer__contact-list .material-icons { font-size: 18px; color: var(--color-accent); }

.footer__horatech {
  padding: 36px 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer__horatech-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.footer__horatech-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: var(--transition);
}
.footer__horatech-link:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.footer__horatech-iso {
  height: 40px;
  width: auto;
}
.footer__horatech-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

.footer__bottom {
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .35);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.footer__bottom strong { font-weight: 600; color: rgba(255, 255, 255, .55); }
.footer__bottom a { color: var(--color-accent-light); }
.footer__bottom a:hover { color: #fff; }

/* ---- Reveal animations ---- */
/* El contenido arranca oculto solo si hay JS para revelarlo.
   Sin JS (o con .js ausente) todo queda visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
}
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .capabilities { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .sectors { grid-template-columns: repeat(2, 1fr); }
  .verticals { grid-template-columns: 1fr; }
  .architecture { grid-template-columns: 1fr; gap: 40px; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .devices-grid { grid-template-columns: repeat(2, 1fr); }
  .alerts-grid { grid-template-columns: 1fr; gap: 32px; }
  .channels-grid { grid-template-columns: repeat(3, 1fr); }
  .integrations-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat__value { font-size: 56px; }
  .lora-features { grid-template-columns: repeat(2, 1fr); }
  .lora-flow__arrow { transform: rotate(90deg); }
  .lora-flow { flex-direction: column; align-items: center; }
  .lora-flow__node { width: 100%; max-width: 320px; }
  .infra-diagram { grid-template-columns: 1fr; gap: 12px; }
  .infra-arrow { transform: rotate(90deg); justify-self: center; }
  .infra-store-row { grid-template-columns: 1fr; }
  .infra-pillars { grid-template-columns: repeat(2, 1fr); }
  .infra-load__items { grid-template-columns: repeat(2, 1fr); }
  .infra-load__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 20px; }
  .infra-load__item:nth-last-child(-n+2) { border-bottom: none; }
  .infra-load__item--total { grid-column: 1 / -1; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .showcase { grid-template-columns: 1fr; gap: 32px; }
  .showcase--reverse { direction: ltr; }
  .showcase__image { order: -1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --section-padding: var(--section-padding-mobile); }
  .section__title { font-size: 28px; }
  .section__subtitle { font-size: 16px; margin-bottom: 40px; }

  .navbar__links { display: none; }
  .navbar__cta { display: none; }
  .navbar__toggle { display: flex; }

  .navbar__links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 21, 55, .98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 999;
  }
  .navbar__links.open a { font-size: 22px; color: #fff; }

  .hero { padding-top: 110px; min-height: auto; }
  .hero__logo { height: 64px; }
  .hero__tagline { font-size: 36px; }
  .hero__description { font-size: 16px; }

  .capabilities { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .stack-grid { grid-template-columns: 1fr 1fr; }
  .devices-grid { grid-template-columns: 1fr; }
  .channels-grid { grid-template-columns: repeat(2, 1fr); }

  .cta__title { font-size: 28px; }
  .cta__body { font-size: 16px; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .footer__description { max-width: none; margin: 0 auto; }
  .footer__links ul,
  .footer__contact-list { align-items: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero__tagline { font-size: 28px; }
  .sectors { grid-template-columns: 1fr; }
  .channels-grid { grid-template-columns: 1fr 1fr; }
  .lora-features { grid-template-columns: 1fr; }
  .infra-pillars { grid-template-columns: 1fr; }
  .infra-load { padding: 24px 16px; }
  .infra-load__items { grid-template-columns: 1fr; gap: 12px; }
  .infra-load__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
  .infra-load__item:last-child { border-bottom: none; }
  .infra-load__num { font-size: 36px; }
}