/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer wins ordinary layout rules.
   Native hidden and closed-dialog states take precedence over component display rules. */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }

  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* functional inline SVG icons opt into bounded geometry; content SVGs keep their own */
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }

  /* data text only */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

/* Official Icon Fonts downloaded directly from https://zenit.mx/ */
@font-face {
  font-family: 'icomoon';
  src: url('../assets/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'icomoonJobs';
  src: url('../assets/icomoonJobs.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'icomoonGrails';
  src: url('../assets/icomoonGrails.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'icomoonProject';
  src: url('../assets/icomoonProject.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-about::before               { content: "\e900"; }
.icon-suricata_programador::before { content: "\e900"; }
.icon-suricata_pm::before         { content: "\e901"; }
.icon-acceso::before              { content: "\e901"; }
.icon-grails::before              { content: "\e904"; }
.icon-androide::before,
.icon-android::before             { content: "\e90b"; }
.icon-angular::before             { content: "\e90c"; }
.icon-apcelerator::before         { content: "\e90d"; }
.icon-API::before                 { content: "\e90e"; }
.icon-app-movil::before           { content: "\e90f"; }
.icon-Aps_moviles::before         { content: "\e910"; }
.icon-avisos_pago::before         { content: "\e911"; }
.icon-bootstrap::before           { content: "\e91f"; }
.icon-candado2::before            { content: "\e920"; }
.icon-catalogizacion::before      { content: "\e921"; }
.icon-cerrar::before              { content: "\e922"; }
.icon-chat::before                { content: "\e923"; }
.icon-chavascript::before         { content: "\e924"; }
.icon-chompu::before              { content: "\e925"; }
.icon-citas::before               { content: "\e926"; }
.icon-config_users::before        { content: "\e927"; }
.icon-contacto::before            { content: "\e928"; }
.icon-contingencias::before       { content: "\e929"; }
.icon-control-informa::before     { content: "\e92a"; }
.icon-control-paqueteria::before  { content: "\e92b"; }
.icon-cotizaciones::before        { content: "\e92c"; }
.icon-cotizador::before           { content: "\e92d"; }
.icon-ctrl_comp::before           { content: "\e92e"; }
.icon-ejecuciones::before         { content: "\e92f"; }
.icon-estadisticas::before        { content: "\e930"; }
.icon-evento::before              { content: "\e931"; }
.icon-eventos::before             { content: "\e932"; }
.icon-facturas::before            { content: "\e933"; }
.icon-folder::before              { content: "\e934"; }
.icon-galeria::before             { content: "\e935"; }
.icon-html5::before               { content: "\e936"; }
.icon-ico_koha::before            { content: "\e937"; }
.icon-ico_mysql::before           { content: "\e938"; }
.icon-ico_pentaho::before         { content: "\e939"; }
.icon-ico1::before                { content: "\e93a"; }
.icon-info_lotes::before          { content: "\e93b"; }
.icon-informes::before            { content: "\e93c"; }
.icon-ios::before,
.icon-apple::before               { content: "\e93d"; }
.icon-IT::before                  { content: "\e93e"; }
.icon-java::before                { content: "\e93f"; }
.icon-jquery::before              { content: "\e940"; }
.icon-juego::before               { content: "\e941"; }
.icon-koha::before                { content: "\e942"; }
.icon-laravel::before             { content: "\e943"; }
.icon-linia_codigo::before        { content: "\e944"; }
.icon-mabe::before                { content: "\e97c"; }
.icon-mas::before                 { content: "\e9a3"; }
.icon-mensajeria::before          { content: "\e9a4"; }
.icon-mensajero::before           { content: "\e9a5"; }
.icon-monitor::before             { content: "\e9a6"; }
.icon-mundo::before               { content: "\e9a7"; }
.icon-mundo1::before              { content: "\e9a8"; }
.icon-nodos::before               { content: "\e9a9"; }
.icon-opac_ico-02::before         { content: "\e9aa"; }
.icon-orden_compra::before        { content: "\e9ab"; }
.icon-php::before                 { content: "\e9ac"; }
.icon-plugins::before             { content: "\e9ad"; }
.icon-programadores::before       { content: "\e9ae"; }
.icon-suricata_disenador::before  { content: "\e9ae"; }
.icon-proyectos::before           { content: "\e9af"; }
.icon-pto_cancun_logo::before     { content: "\e9b0"; }
.icon-rails::before               { content: "\e9b1"; }
.icon-rest_api::before            { content: "\e9b3"; }
.icon-robot::before               { content: "\e9b4"; }
.icon-secciones::before           { content: "\e9ba"; }
.icon-servicios::before           { content: "\e9bb"; }
.icon-servidor2::before           { content: "\e9bc"; }
.icon-sipad_logo::before          { content: "\e9bd"; }
.icon-taza_cafe::before           { content: "\e9e4"; }
.icon-tickets::before             { content: "\e9e5"; }
.icon-tiempo::before              { content: "\e9e6"; }
.icon-TT::before                  { content: "\e9e7"; }
.icon-usuarios::before            { content: "\e9e8"; }
.icon-web::before                 { content: "\e9e9"; }
.icon-wordpress::before           { content: "\e9ea"; }
.icon-pizza::before               { content: "\e9eb"; }
.icon-pago::before                { content: "\e9ec"; }
.icon-lealtad::before             { content: "\e9ed"; }
.icon-c_inventario::before        { content: "\e9ee"; }
.icon-staff::before               { content: "\e9ef"; }
.icon-reservaciones::before       { content: "\e9fa"; }
.icon-m_pedidos::before           { content: "\e9fb"; }
.icon-envio::before               { content: "\e9fc"; }
.icon-productos::before           { content: "\e9fd"; }
.icon-i_ventas::before            { content: "\e9fe"; }
.icon-gps::before                 { content: "\e9ff"; }
.icon-flotilla::before            { content: "\effa"; }

.icon-diseador_1,
.icon-diseador_2,
.icon-pm_1,
.icon-pm_2,
.icon-progra_1,
.icon-progra_2,
.icon-reportes,
.icon-producto,
.icon-proceso,
.icon-ionic,
.icon-inocuidad,
.icon-dashboard {
  font-family: 'icomoonProject' !important;
}
.icon-diseador_1::before { content: "\e900"; font-family: 'icomoonProject' !important; }
.icon-diseador_2::before { content: "\e901"; font-family: 'icomoonProject' !important; }
.icon-pm_1::before       { content: "\e902"; font-family: 'icomoonProject' !important; }
.icon-pm_2::before       { content: "\e903"; font-family: 'icomoonProject' !important; }
.icon-progra_1::before   { content: "\e904"; font-family: 'icomoonProject' !important; }
.icon-progra_2::before   { content: "\e905"; font-family: 'icomoonProject' !important; }
.icon-reportes::before   { content: "\e906"; font-family: 'icomoonProject' !important; }
.icon-producto::before   { content: "\e907"; font-family: 'icomoonProject' !important; }
.icon-proceso::before    { content: "\e908"; font-family: 'icomoonProject' !important; }
.icon-ionic::before      { content: "\e909"; font-family: 'icomoonProject' !important; }
.icon-inocuidad::before  { content: "\e90a"; font-family: 'icomoonProject' !important; }
.icon-dashboard::before  { content: "\e90b"; font-family: 'icomoonProject' !important; }

.icon-jobs::before,
.icon-jobs-h::before {
  font-family: 'icomoonJobs' !important;
  content: "\e900";
}

.icon-grailsDos::before {
  font-family: 'icomoonGrails' !important;
  content: "\e900";
}

:root {
  --zenit-red: #D32E37;
  --zenit-red-dark: #A81D24;
  --zenit-red-soft: rgba(211, 46, 55, 0.10);
  --zenit-green: #0F9D58;
  --zenit-dark: #0D0D0D;
  --zenit-dark-elevated: #16191F;
  --zenit-dark-card: #1E222A;
  --zenit-light-bg: #FFFFFF;
  --zenit-muted-bg: #F4F5F7;
  --zenit-card-gray: #EEEEF0;
  --zenit-text: #181B20;
  --zenit-text-muted: #585858;
  --zenit-text-on-dark: #F9FAFB;
  --zenit-text-muted-dark: #CFD8DC;
  --zenit-border: #E5E7EB;
  --zenit-border-dark: rgba(255, 255, 255, 0.16);
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-soft: 0 12px 32px -8px rgba(17, 19, 23, 0.08);
  --shadow-card: 0 16px 40px -12px rgba(17, 19, 23, 0.16);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-med: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--zenit-text);
  background-color: var(--zenit-light-bg);
  line-height: 1.6;
}

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

html, body {
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--zenit-light-bg);
  color: var(--zenit-text);
  font-size: 16px;
}

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

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--zenit-red);
  outline-offset: 2px;
}

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

/* Signature Zenit Section Header (from zenit.mx .section-title + .slope) */
.zenit-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
  text-align: center;
}

.zenit-section-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #58595B;
  margin: 0;
  line-height: 1.05;
}

.zenit-section-title::first-letter {
  font-size: 1.16em;
}

.zenit-section-divider {
  width: 6px;
  height: 52px;
  background-color: var(--zenit-red);
  border-radius: 2px;
  flex: none;
}

.zenit-section-subtitle {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--zenit-red);
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.zenit-section-subtitle--dark {
  color: #58595B;
}

.zenit-section-lead {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--zenit-text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Pleca Roja Central de zenit.mx */
.zenit-red-pleca {
  background-color: var(--zenit-red);
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  max-width: 960px;
  margin: 0 auto 40px;
  box-shadow: 0 10px 24px rgba(211, 46, 55, 0.22);
}

/* Buttons */
.btn-zenit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background-color: var(--zenit-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--zenit-red);
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 6px 18px rgba(211, 46, 55, 0.28);
}

@media (hover: hover) {
  .btn-zenit:hover {
    background-color: var(--zenit-red-dark);
    border-color: var(--zenit-red-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(211, 46, 55, 0.36);
  }
}

.btn-zenit-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

@media (hover: hover) {
  .btn-zenit-outline:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: #FFFFFF;
    color: #FFFFFF;
  }
}

.btn-zenit-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background-color: #FFFFFF;
  color: var(--zenit-red);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1.5px solid rgba(211, 46, 55, 0.35);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
  .btn-zenit-ghost:hover {
    background-color: var(--zenit-red);
    color: #FFFFFF;
  }
}

/* Top Contact Bar (combines zenit.mx .bar-contacto-top with PDF red bar) */
.site-topbar {
  background-color: var(--zenit-red);
  color: #FFFFFF;
  font-size: 0.8rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.site-topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.topbar-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.topbar-label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.topbar-sep {
  opacity: 0.7;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
  .topbar-link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    color: #FFFFFF;
  }
}

.topbar-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.35);
}

.topbar-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-coverage-badge {
  opacity: 0.92;
  font-weight: 600;
  font-size: 0.78rem;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: #FFFFFF;
  color: var(--zenit-red);
  transition: transform var(--transition-fast);
}

@media (hover: hover) {
  .social-pill:hover {
    transform: translateY(-1px);
  }
}

.site-header-wrapper {
  display: contents;
}

/* Sticky Dark Navbar with Compact Official Brand Logo */
.site-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #08090C;
  border-bottom: 1px solid var(--zenit-border-dark);
  padding: 8px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.site-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.brand-header-logo,
.brand-logo {
  display: block;
  width: auto !important;
  max-width: 156px !important;
  height: 52px !important;
  object-fit: contain;
}

.brand-suri-gif {
  width: auto !important;
  max-width: 82px !important;
  height: 28px !important;
  display: block;
  object-fit: contain;
}

.main-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}

.nav-item {
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  color: var(--zenit-text-on-dark);
  font-size: 0.81rem;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  border: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) {
  .nav-item:hover {
    color: var(--zenit-red);
    background-color: rgba(255, 255, 255, 0.07);
  }
}

.nav-item--badge {
  border: 1px solid rgba(211, 46, 55, 0.65);
  background-color: rgba(211, 46, 55, 0.18);
  color: #FFFFFF;
  font-weight: 700;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Control de Cambio de Idioma (Bilingüe ES / EN Nearshore CST) */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lang-switch-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.lang-switch-btn .lang-tag {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.18s ease;
}

.lang-switch-btn .lang-tag.is-active {
  color: #FFFFFF;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.lang-switch-btn .lang-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}

@media (max-width: 991px) {
  .znt-nav-arrow span {
    display: none;
  }
}
@media (max-width: 640px) {
  .lang-switch-btn {
    padding: 4px 8px;
    font-size: 0.72rem;
  }
}

.topbar-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.18s ease;
}

.topbar-lang-pill:hover {
  background: #FFFFFF;
  color: var(--zenit-red);
}

/* Nearshore English Notification Bar / Banner */
.nearshore-banner {
  background: linear-gradient(90deg, #07172F 0%, #1E3A8A 50%, #07172F 100%);
  border-bottom: 1px solid rgba(96, 165, 250, 0.35);
  color: #BFDBFE;
  padding: 8px 16px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 1050;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nearshore-banner strong {
  color: #FFFFFF;
}

.nearshore-badge {
  background: #2563EB;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.navbar-cta-btn {
  padding: 7px 14px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Hamburger Button from zenit.mx (#slidemenu trigger) */
.zenit-burger-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.zenit-burger-btn .icon-bar {
  width: 20px;
  height: 2.5px;
  background-color: var(--zenit-red);
  border-radius: 2px;
  transition: background-color var(--transition-fast);
}

@media (hover: hover) {
  .zenit-burger-btn:hover {
    background-color: var(--zenit-red);
    border-color: var(--zenit-red);
  }
  .zenit-burger-btn:hover .icon-bar {
    background-color: #FFFFFF;
  }
}

/* Full-screen Red Slide Menu Overlay from zenit.mx (#slidemenu) — Responsive & Proportionate */
.zenit-slidemenu-dialog {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 0;
  max-width: 760px;
  width: calc(100vw - 24px);
  max-height: calc(100vh - 28px);
  height: auto;
  margin: auto;
  overflow-y: auto;
  background-color: var(--zenit-red);
  color: #FFFFFF;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.zenit-slidemenu-dialog::backdrop {
  background: rgba(8, 10, 14, 0.78);
  backdrop-filter: blur(4px);
}

.slidemenu-inner {
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px 24px;
  text-align: center;
  position: relative;
}

.slidemenu-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.slidemenu-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
}

.slidemenu-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  margin: 0;
  color: #FFFFFF;
}

.slidemenu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slidemenu-item-btn {
  width: 100%;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 14px;
  padding: 14px 8px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) {
  .slidemenu-item-btn:hover {
    background: rgba(0, 0, 0, 0.30);
    transform: translateY(-2px);
    color: #FFFFFF;
  }
}

.slidemenu-glyph {
  font-size: 42px;
  line-height: 1;
  color: #FFFFFF;
  position: relative;
  display: inline-block;
}

.slidemenu-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.slidemenu-logo-img {
  display: block;
  width: 100% !important;
  max-width: 136px !important;
  height: auto !important;
  max-height: 26px !important;
  object-fit: contain;
}

.slidemenu-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.slidemenu-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.slidemenu-contact-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  font-size: 0.88rem;
  color: #FFFFFF;
}

.slidemenu-contact-label {
  font-weight: 600;
  opacity: 0.9;
}

.slidemenu-phone-link,
.slidemenu-wa-link {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.slidemenu-phone-link:hover,
.slidemenu-wa-link:hover {
  text-decoration: underline;
}

/* Signature zenit.mx scalehover / scalehover-ico ring pulse */
.scalehover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scalehover-wrap .scalehover-clone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}

@media (hover: hover) {
  .scalehover-trigger:hover .scalehover-clone {
    transform: scale(1.32);
    opacity: 0;
  }
}

/* Hero Section using live cover-home.jpg and transparent logo.png */
.hero-section {
  position: relative;
  background-color: var(--zenit-dark);
  background-image:
    linear-gradient(110deg, rgba(10, 12, 16, 0.90) 0%, rgba(15, 18, 24, 0.80) 52%, rgba(15, 18, 24, 0.74) 100%),
    url('../assets/cover-home-live.jpg');
  background-size: cover;
  background-position: top center;
  color: var(--zenit-text-on-dark);
  padding: 44px 0 36px;
  border-bottom: 4px solid var(--zenit-red);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background-color: rgba(211, 46, 55, 0.24);
  border: 1px solid rgba(211, 46, 55, 0.6);
  color: #FCA5A5;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero-h1 {
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 14px;
  color: #FFFFFF;
}

.hero-h1 span {
  color: #F87171;
}

.hero-lead {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--zenit-text-muted-dark);
  margin: 0 0 22px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.hero-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--zenit-border-dark);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #E5E7EB;
}

.trust-check {
  color: var(--zenit-red);
  font-weight: 800;
  flex: none;
}

/* Right Hero Visual Showcase with Compact Header Logo */
.hero-visual-panel {
  background: rgba(16, 19, 25, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
}

.hero-brand-stage {
  display: block;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.hero-logo-transparent,
.hero-logo-img {
  display: block;
  width: 100% !important;
  max-width: 274px !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 auto;
}

.hero-stage-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FCA5A5;
  background: rgba(211, 46, 55, 0.18);
  border: 1px solid rgba(211, 46, 55, 0.45);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.hero-screens-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hero-mini-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #111317;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 9px;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-mini-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #141820;
}

.hero-screen-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-mini-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(211, 46, 55, 0.18);
  border: 1px solid rgba(211, 46, 55, 0.45);
  color: #FCA5A5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
  .hero-mini-screen:hover {
    border-color: var(--zenit-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  }
  .hero-mini-screen:hover .hero-mini-icon {
    background-color: var(--zenit-red);
    color: #FFFFFF;
  }
}

.hero-mini-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #F3F4F6;
  line-height: 1.2;
}

.hero-mini-tag {
  display: block;
  font-size: 0.68rem;
  color: #9CA3AF;
  line-height: 1.25;
}

/* Original Circular MenuICo Bar from zenit.mx Hero — Proportionate */
.hero-quick-circles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 840px;
  margin: 28px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.quick-circle-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: #E5E7EB;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 4px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.quick-circle-glyph {
  font-size: 52px;
  line-height: 1;
  color: #D1D5DB;
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .quick-circle-link:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
  }
  .quick-circle-link:hover .quick-circle-glyph {
    color: var(--zenit-red);
  }
}

/* Sections spacing */
.section-light {
  padding: 64px 0;
  background-color: var(--zenit-light-bg);
}

.section-muted {
  padding: 64px 0;
  background-color: var(--zenit-muted-bg);
}

.section-dark-poly {
  padding: 64px 0;
  background-color: var(--zenit-dark);
  background-image: linear-gradient(180deg, rgba(13, 13, 13, 0.88) 0%, rgba(17, 19, 23, 0.94) 100%), url('../assets/bg-dark-lowpoly.jpg');
  background-size: cover;
  background-position: center;
  color: var(--zenit-text-on-dark);
}

/* Sobre Nosotros + Metodología (using transparent integrantes.png) */
.about-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 36px;
  align-items: center;
  margin-top: 24px;
}

.about-photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--zenit-border);
}

.about-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 22px;
  display: grid;
  gap: 10px;
}

.about-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--zenit-text);
}

.about-bullet-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--zenit-red);
  margin-top: 7px;
  flex: none;
}

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.method-card {
  background: var(--zenit-muted-bg);
  border: 1px solid var(--zenit-border);
  border-radius: var(--radius-md);
  padding: 20px;
}

.method-step-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background-color: var(--zenit-red);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

.method-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--zenit-text);
}

.method-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--zenit-text-muted);
}

/* 4 Pilares de Ingeniería (with original zenit.mx .scalehover-ico glyphs) */
.pillars-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1040px;
  margin-inline: auto;
}

.pillar-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 28px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-soft);
}

.pillar-row--reverse {
  grid-template-columns: 1fr 168px;
}

.pillar-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.pillar-medallion {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(145deg, #E0353E 0%, #B81D25 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(211, 46, 55, 0.24);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pillar-medallion-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(211, 46, 55, 0.28);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease;
  pointer-events: none;
}

.pillar-medallion-svg {
  width: 58px;
  height: 58px;
  display: block;
}

@media (hover: hover) {
  .pillar-row:hover .pillar-medallion {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 32px rgba(211, 46, 55, 0.34);
  }
  .pillar-row:hover .pillar-medallion-ring {
    transform: scale(1.1);
    opacity: 0;
  }
}

.pillar-circle-caption {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--zenit-red);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pillar-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zenit-red);
  margin-bottom: 6px;
}

.pillar-title {
  font-size: 1.38rem;
  font-weight: 800;
  color: var(--zenit-text);
  margin: 0 0 12px;
}

.pillar-desc {
  font-size: 0.96rem;
  color: var(--zenit-text-muted);
  margin: 0 0 18px;
  line-height: 1.65;
}

.pillar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Interactive Stack Tecnológico (14 Iconos en Medallones Circulares Homogéneos + llaveIzq.png / llaveDer.png) */
.tech-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 28px;
}

.tech-selector-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  background: #FAFAFB;
  border: 1.5px solid var(--zenit-border);
  border-radius: 14px;
  padding: 12px 6px;
  color: #4B5563;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.tech-selector-btn[aria-pressed="true"] {
  border-color: var(--zenit-red);
  background-color: var(--zenit-red-soft);
}

.tech-selector-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #374151;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tech-selector-glyph {
  font-size: 24px;
  line-height: 1;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-selector-btn[aria-pressed="true"] .tech-selector-circle {
  background-color: var(--zenit-red);
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(211, 46, 55, 0.25);
}

@media (hover: hover) {
  .tech-selector-btn:hover {
    transform: translateY(-2px);
    border-color: var(--zenit-red);
  }
  .tech-selector-btn:hover .tech-selector-circle {
    background-color: var(--zenit-red);
  }
}

.tech-badge-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--zenit-text);
  text-align: center;
  line-height: 1.2;
}

/* Official Curly-Brace Box from zenit.mx (.descripTecnologia with llaveIzq.png and llaveDer.png) */
.tech-bracket-box {
  position: relative;
  max-width: 920px;
  margin: 0 auto 40px;
  padding: 28px 56px;
  background-color: #FAFAFB;
  background-image: url('../assets/llaveIzq.png'), url('../assets/llaveDer.png');
  background-position: 0% 50%, 100% 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tech-bracket-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4B5563;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-decoration: underline;
  text-decoration-color: var(--zenit-red);
}

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

.tech-card {
  background: var(--zenit-muted-bg);
  border: 1px solid var(--zenit-border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.tech-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--zenit-text);
}

.tech-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--zenit-text-muted);
}

/* Productos Propios: ZENIT WMS & ZENIT CRM */
.products-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 36px;
}

.product-showcase-card {
  background-color: var(--zenit-card-gray);
  border: 1px solid #D1D5DB;
  border-radius: 28px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.95fr;
  gap: 28px;
  align-items: center;
  box-shadow: var(--shadow-soft);
}

.product-laptop-wrap {
  background: #FFFFFF;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--zenit-border);
}

.product-narrative-col {
  padding-right: 20px;
  border-right: 3px solid var(--zenit-red);
}

.product-kicker-red {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--zenit-red);
  line-height: 1.25;
  margin: 0 0 12px;
}

.product-h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--zenit-text);
  margin: 0 0 10px;
}

.product-copy {
  font-size: 0.92rem;
  color: #374151;
  margin: 0 0 18px;
  line-height: 1.6;
}

.product-features-col {
  padding-left: 8px;
}

.product-brand-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 16px;
}

.product-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.product-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #374151;
}

.check-circle-red {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--zenit-red);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex: none;
}

/* Proyectos: Filter Pills + Original zenit.mx view-third Hover Masks (13 Proyectos — Cero Redundancia en el Home) */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 32px;
}

.filter-pill {
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.88rem;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background-color: #181B20;
  color: #FFFFFF;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.filter-pill[aria-pressed="true"] {
  background-color: var(--zenit-green);
  border-color: var(--zenit-green);
  color: #FFFFFF;
}

@media (hover: hover) {
  .filter-pill:hover {
    transform: translateY(-1px);
  }
}

.portfolio-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 12px;
}

/* Signature view-third portfolio card from zenit.mx */
.mosaic-item {
  position: relative;
  background: #14171D;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

@media (hover: hover) {
  .mosaic-item:hover {
    transform: translateY(-2px);
    border-color: rgba(211, 46, 55, 0.55);
  }
}

.mosaic-thumb-wrap {
  position: relative;
  background: #0B0D11;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mosaic-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Estado activo / seleccionado para tarjetas de casos de éxito (proyectos.html) */
.mosaic-item.is-active {
  border-color: var(--zenit-red);
  box-shadow: 0 0 0 1.5px var(--zenit-red), 0 14px 32px rgba(227, 30, 36, 0.28);
}

.mosaic-item.is-active .mosaic-open-btn {
  background-color: var(--zenit-red);
  border-color: var(--zenit-red);
  color: #FFFFFF;
}

.mosaic-hover-mask {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.28s ease, transform 0.28s ease;
  color: #FFFFFF;
  cursor: pointer;
}

@media (hover: hover) {
  .mosaic-item:hover .mosaic-hover-mask,
  .mosaic-item:focus-within .mosaic-hover-mask {
    opacity: 1;
    transform: scale(1);
  }
}

/* Exact mask colors from zenit.mx CSS */
.mask--mensajeria   { background-color: rgba(32, 35, 41, 0.95); }
.mask--pdv          { background-color: rgba(0, 0, 0, 0.92); }
.mask--marketplace  { background-color: rgba(217, 138, 18, 0.95); }
.mask--fleet        { background-color: rgba(64, 47, 80, 0.95); }
.mask--sipad        { background-color: rgba(38, 86, 86, 0.94); }
.mask--tracking     { background-color: rgba(0, 132, 162, 0.95); }
.mask--scancube     { background-color: rgba(56, 56, 56, 0.95); }
.mask--cuervo       { background-color: rgba(12, 46, 40, 0.94); }
.mask--mundo        { background-color: rgba(5, 95, 99, 0.95); }
.mask--zenit        { background-color: rgba(21, 23, 22, 0.95); }
.mask--qcheck       { background-color: rgba(37, 65, 76, 0.94); }
.mask--puertocancun { background-color: rgba(14, 98, 128, 0.94); }

.mask-logo-img {
  max-height: 42px;
  width: auto;
  max-width: 158px;
  object-fit: contain;
}

.mask-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}

.mask-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
}

.mask-plus-icon {
  width: 20px;
  height: 20px;
}

.mosaic-caption-bar {
  padding: 12px 14px;
  background: rgba(13, 15, 19, 0.98);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 2px solid var(--zenit-red);
  flex: 1;
  justify-content: space-between;
}

.mosaic-caption-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mosaic-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #FFFFFF;
  display: block;
  letter-spacing: -0.01em;
}

.mosaic-subtitle {
  font-size: 0.81rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 4px 0 0;
}

.mosaic-cat {
  font-size: 0.73rem;
  color: #FF8A90;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(227, 30, 36, 0.18);
  border: 1px solid rgba(227, 30, 36, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.mosaic-open-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .mosaic-open-btn:hover {
    background-color: var(--zenit-red);
    border-color: var(--zenit-red);
  }
}

/* Case Detail Box (reused in /gracias steps and Project Dedicated View) */
.case-detail-box {
  background: rgba(17, 19, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: #E5E7EB;
}

.case-detail-box strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

.case-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Página Dedicada de Proyecto (/proyectos/*) Modal View */
.project-page-dialog {
  border: 1px solid var(--zenit-border);
  border-radius: 20px;
  padding: 0;
  max-width: 1060px;
  width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  background: #F4F5F7;
  color: var(--zenit-text);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.65);
}

.project-page-dialog::backdrop {
  background: rgba(9, 11, 16, 0.82);
  backdrop-filter: blur(5px);
}

.project-page-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #111317;
  color: #FFFFFF;
  padding: 14px 22px;
  border-bottom: 3px solid var(--zenit-red);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-page-nav-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.project-nav-select {
  background: #1C2026;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.project-page-body {
  padding: 26px 24px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-hero-card {
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow-soft);
}

.project-url-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--zenit-red-soft);
  color: var(--zenit-red);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}

.project-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-module-card {
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-left: 4px solid var(--zenit-red);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}

.project-module-card h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: var(--zenit-text);
}

.project-module-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--zenit-text-muted);
  line-height: 1.55;
}

.project-case-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.project-case-col {
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.project-case-col h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--zenit-text);
}

/* Sello Original de zenit.mx: "DURANTE EL PROCESO" (6 Medallones Rojos) */
.project-process-card {
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.process-medallions-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.process-medallion-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: var(--zenit-muted-bg);
  border: 1px solid var(--zenit-border);
  border-radius: 12px;
}

.process-medallion-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--zenit-red);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(211, 46, 55, 0.22);
}

.process-medallion-text {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--zenit-text-muted);
  line-height: 1.35;
}

/* FAQ Section */
.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--zenit-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: var(--zenit-text);
}

.faq-trigger-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--zenit-red-soft);
  color: var(--zenit-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.faq-trigger[aria-expanded="true"] .faq-trigger-icon {
  transform: rotate(45deg);
  background: var(--zenit-red);
  color: #FFFFFF;
}

.faq-answer {
  padding: 0 24px 20px;
  font-size: 0.94rem;
  color: var(--zenit-text-muted);
  line-height: 1.65;
}

/* Space Contact Section + Floating Tech Planets + Lunar Scene (aligned to Zenit---Final.pdf p. 1 & 2) */
.space-contact-section {
  position: relative;
  background-color: #050608;
  background-image:
    radial-gradient(circle at 50% 24%, rgba(211, 46, 55, 0.14), transparent 58%),
    url('../assets/bg_stars.jpg');
  background-size: 960px auto;
  background-position: top center;
  background-repeat: repeat;
  color: #FFFFFF;
  padding: 36px 0 0;
  overflow: hidden;
}

.space-planet {
  display: block;
  height: auto !important;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
}

/* Zona 1: Constelación Superior de 3 Planetas (Node.js arriba al centro, Apple abajo a la izquierda, Android abajo a la derecha — final de pág. 1 de referencia) */
.space-planets-top {
  position: relative;
  max-width: 1320px;
  height: clamp(128px, 15.5vw, 210px);
  margin: 0 auto 14px;
}

.planet--node {
  position: absolute;
  top: 4%;
  left: 46.5%;
  width: clamp(56px, 7.2vw, 102px) !important;
}

.planet--apple {
  position: absolute;
  bottom: 6%;
  left: 11%;
  width: clamp(62px, 8vw, 112px) !important;
}

.planet--android {
  position: absolute;
  bottom: 4%;
  right: 9.5%;
  width: clamp(64px, 8.2vw, 116px) !important;
}

/* Zona 2: Formulario Central Flanqueado por Planetas Tecnológicos (Bootstrap y Angular a la izquierda; Python, Appcelerator y WordPress a la derecha — pág. 2 de referencia) */
.space-form-stage {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.planet--bootstrap {
  position: absolute;
  top: 22%;
  left: 3.5%;
  width: clamp(72px, 9vw, 130px) !important;
  z-index: 2;
}

.planet--angular {
  position: absolute;
  bottom: -14px;
  left: 7.5%;
  width: clamp(46px, 5.2vw, 74px) !important;
  z-index: 2;
}

.planet--python {
  position: absolute;
  top: 20%;
  right: 3.5%;
  width: clamp(76px, 9.4vw, 136px) !important;
  z-index: 2;
}

.planet--apcelerator {
  position: absolute;
  bottom: 48px;
  right: 2.2%;
  width: clamp(42px, 4.8vw, 68px) !important;
  z-index: 2;
}

.planet--wordpress {
  position: absolute;
  bottom: -28px;
  right: 8.5%;
  width: clamp(58px, 7vw, 102px) !important;
  z-index: 2;
}

.contact-card-dark {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
  background: rgba(13, 15, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg, 18px);
  padding: 38px 36px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
}

.contact-form-grid,
.zenit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
  width: 100%;
  box-sizing: border-box;
}

.form-group,
.zenit-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.form-group--full,
.zenit-field--full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.form-label,
.zenit-label {
  display: block !important;
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #E5E7EB !important;
  margin: 0 !important;
  text-align: left !important;
}

.form-input,
.form-select,
.form-textarea,
.zenit-input,
.zenit-select,
.zenit-textarea {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  transition: border-color var(--transition-fast, 0.2s ease), background-color var(--transition-fast, 0.2s ease), box-shadow var(--transition-fast, 0.2s ease) !important;
  outline: none !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.zenit-input:focus,
.zenit-select:focus,
.zenit-textarea:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #E31E24 !important;
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.28) !important;
}

.form-select,
.zenit-select {
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

.form-select option,
.zenit-select option {
  background: #181B20 !important;
  color: #FFFFFF !important;
  padding: 10px !important;
}

.form-textarea,
.zenit-textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

.privacy-consent-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 6px !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.privacy-consent-box input[type="checkbox"] {
  margin-top: 3px !important;
  accent-color: #E31E24 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.privacy-consent-box label {
  cursor: pointer !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.field-error {
  font-size: 0.78rem;
  color: #FCA5A5;
  margin-top: 2px;
}

.privacy-consent-box {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: #D1D5DB;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Zona 3: Escenario Lunar Inferior con Planetas Centrales (Laravel y jQuery) y las 3 Ilustraciones Posadas en la Luna (pág. 2 de Zenit---Final.pdf) */
.space-scene-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: clamp(32px, 4.5vw, 64px) auto 0;
}

.planet--laravel {
  position: absolute;
  left: 37.5%;
  bottom: 68%;
  width: clamp(42px, 5.5vw, 82px) !important;
  z-index: 3;
}

.planet--jquery {
  position: absolute;
  left: 57.5%;
  bottom: 70%;
  width: clamp(46px, 6vw, 90px) !important;
  z-index: 3;
}

.space-rocket-img {
  position: absolute;
  left: 11.5%;
  bottom: 9%;
  width: clamp(86px, 16vw, 244px) !important;
  height: auto !important;
  z-index: 4;
  pointer-events: none;
}

.space-mascot-img {
  position: absolute;
  left: 46.5%;
  bottom: 20%;
  width: clamp(38px, 5.6vw, 86px) !important;
  height: auto !important;
  z-index: 4;
  pointer-events: none;
}

.space-astronaut-img {
  position: absolute;
  right: 12.5%;
  bottom: 8%;
  width: clamp(72px, 12.6vw, 190px) !important;
  height: auto !important;
  z-index: 4;
  pointer-events: none;
}

.space-moon-floor {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

/* Official Dark Footer with Red Top Border */
.site-footer {
  background-color: #000000;
  color: #E5E7EB;
  border-top: 3px solid var(--zenit-red);
  padding: 48px 0 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: 36px;
  align-items: start;
}

.footer-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 6px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  max-width: 274px;
  width: fit-content;
  margin-bottom: 16px;
}

.footer-logo-link {
  display: block;
  width: 100%;
}

.footer-logo {
  display: block;
  width: 100% !important;
  max-width: 274px !important;
  height: auto !important;
  object-fit: contain;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
}

.footer-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #9CA3AF;
  margin: 0 0 16px;
}

.footer-nap {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.83rem;
  color: #D1D5DB;
}

.nap-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.nap-item .od-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--zenit-red);
}

.footer-sep {
  color: #6B7280;
  margin: 0 4px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  color: #9CA3AF;
  text-decoration: none !important;
  font-size: 0.84rem;
  line-height: 1.45;
  display: inline-block;
  transition: color var(--transition-fast, 0.2s ease), transform var(--transition-fast, 0.2s ease);
}

@media (hover: hover) {
  .footer-link:hover {
    color: #FFFFFF;
    text-decoration: none !important;
    transform: translateX(4px);
  }
}

.footer-badge {
  display: inline-block;
  font-size: 0.78rem;
  color: #D1D5DB;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.footer-red-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--zenit-red);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: grid;
  gap: 8px;
}

.footer-nav-list a, .footer-nav-list button {
  color: #D1D5DB;
  font-size: 0.88rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: none !important;
  display: inline-block;
  transition: color var(--transition-fast, 0.2s ease), transform var(--transition-fast, 0.2s ease);
}

@media (hover: hover) {
  .footer-nav-list a:hover, .footer-nav-list button:hover {
    color: var(--zenit-red);
    text-decoration: none !important;
    transform: translateX(4px);
  }
}

.footer-map-card {
  background: #12151C;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px;
}

.footer-map-link {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
}

.footer-map-img {
  width: 100%;
  height: auto;
  aspect-ratio: 470 / 274;
  display: block;
  border-radius: 8px;
  transition: transform var(--transition-fast);
}

.footer-map-open-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(17, 19, 23, 0.90);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 3;
}

.footer-map-marker {
  position: absolute;
  left: 55.3%;
  top: 50.4%;
  transform: translate(-50%, -100%);
  height: 62px;
  width: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  transition: transform var(--transition-fast);
  animation: mapMarkerFloat 2.6s ease-in-out infinite;
}

@keyframes mapMarkerFloat {
  0%, 100% {
    transform: translate(-50%, -100%);
  }
  50% {
    transform: translate(-50%, -110%);
  }
}

@media (hover: hover) {
  .footer-map-link:hover .footer-map-img {
    transform: scale(1.02);
  }
  .footer-map-link:hover .footer-map-marker {
    animation-play-state: paused;
    transform: translate(-50%, -114%) scale(1.08);
  }
  .footer-map-link:hover .footer-map-open-badge {
    background: var(--zenit-red);
    border-color: var(--zenit-red);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-map-marker {
    animation: none;
  }
}

.footer-bottom-row,
.footer-bottom-bar {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.82rem;
  color: #9CA3AF;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.footer-copy,
.footer-copyright {
  font-size: 0.82rem;
  color: #9CA3AF;
  margin: 0;
  line-height: 1.5;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-legal-sep,
.legal-sep {
  color: #4B5563;
  font-size: 0.8rem;
  user-select: none;
}

.btn-text-link,
.legal-link-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #9CA3AF !important;
  font-size: 0.82rem !important;
  font-family: inherit !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.18s ease;
  line-height: inherit !important;
  display: inline-block !important;
}

@media (hover: hover) {
  .btn-text-link:hover,
  .legal-link-btn:hover {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transform: translateY(-1px);
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .znt-nav-arrow span {
    display: none;
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .footer-bottom-row,
  .footer-bottom-bar,
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Official Floating Nit Eyecatcher Widget (3x scale, flush to top edge of green WhatsApp pleca) */
.floating-astronaut-widget {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: auto;
}

.astronaut-drawer {
  width: min(300px, calc(100vw - 28px));
  background: #12151C;
  color: #FFFFFF;
  border: 1.5px solid var(--zenit-red);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65);
}

.nit-mascot-bubble-wrap {
  position: relative;
  display: block;
  line-height: 0;
  padding: 0;
  margin: 0 0 -2px 0;
  z-index: 10;
}

.nit-mascot-bubble-wrap[hidden] {
  display: none !important;
}

.nit-dismiss-x-btn {
  position: absolute;
  top: -12px;
  right: 4px;
  z-index: 20;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #111317;
  border: 2px solid #111317;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.nit-eyecatcher-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: block;
  width: 230px; /* Reducción del 20% (de 288px a 230px) para máxima nitidez */
  height: auto;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform var(--transition-fast);
  filter: drop-shadow(0 -2px 12px rgba(0, 0, 0, 0.28));
}

.nit-eyecatcher-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 180 / 136;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.wa-help-green-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background-color: #0B8A44;
  color: #FFFFFF;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11, 138, 68, 0.35);
  transition: background-color var(--transition-fast);
}

.nit-reopen-btn {
  position: relative;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #12151C;
  color: #FFFFFF;
  border: 1.5px solid var(--zenit-red);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin: 0 0 8px 0;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.nit-reopen-btn[hidden] {
  display: none !important;
}

.nit-reopen-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.nit-reopen-text {
  display: inline-block;
  white-space: nowrap;
}

.nit-reopen-btn:active {
  transform: translateY(0);
}

.wa-help-green-pleca {
  position: relative;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 292px;
  height: 44px;
  padding: 0 24px;
  margin: 0;
  border-radius: 6px 6px 0 0;
  background-color: #0B8A44;
  color: #FFFFFF;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.32);
  border: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

@media (hover: hover) {
  .nit-eyecatcher-btn:hover {
    transform: scale(1.03);
  }
  .nit-dismiss-x-btn:hover {
    background-color: #F3F4F6;
    transform: scale(1.08);
  }
  .nit-reopen-btn:hover {
    background: #1D222D;
    border-color: #EF4444;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    color: #FFFFFF;
  }
  .wa-help-green-pill:hover,
  .wa-help-green-pleca:hover {
    background-color: #097539;
    color: #FFFFFF;
  }
}

/* Dialog Modals */
.zenit-dialog {
  border: 1px solid var(--zenit-border);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 720px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  color: var(--zenit-text);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
}

.zenit-dialog::backdrop {
  background: rgba(9, 11, 16, 0.72);
  backdrop-filter: blur(4px);
}

.dialog-header {
  padding: 18px 22px;
  background: #111317;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--zenit-red);
}

.dialog-body {
  padding: 20px 22px;
  max-height: 70vh;
  overflow-y: auto;
}

.dialog-footer {
  padding: 14px 22px;
  background: var(--zenit-muted-bg);
  border-top: 1px solid var(--zenit-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Responsive Breakpoints (1140px, 1024px, 768px, 480px) */
@media (max-width: 1140px) {
  /* Collapse desktop inline menu so sticky navbar stays a single 54px bar on tablets & mobile */
  .main-nav {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .product-showcase-card,
  .project-hero-card,
  .project-case-3col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-narrative-col {
    border-right: 0;
    border-bottom: 2px solid var(--zenit-red);
    padding-right: 0;
    padding-bottom: 18px;
  }
  .tech-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .methodology-grid,
  .portfolio-mosaic-grid,
  .project-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-medallions-grid,
  .slidemenu-grid,
  .hero-quick-circles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .topbar-label,
  .topbar-coverage-badge {
    display: none;
  }
  .planet--bootstrap,
  .planet--python,
  .planet--apcelerator {
    opacity: 0.35;
  }
}

@media (max-width: 768px) {
  .site-topbar {
    font-size: 0.74rem;
    padding: 5px 0;
  }
  .topbar-email-link,
  .topbar-email-sep,
  .topbar-divider {
    display: none;
  }
  .site-navbar {
    padding: 6px 0;
  }
  .brand-header-logo,
  .brand-logo {
    max-width: 132px !important;
    height: 44px !important;
  }
  .brand-suri-gif {
    display: none !important;
  }
  .navbar-cta-suffix {
    display: none;
  }
  .navbar-cta-btn {
    padding: 6px 12px;
    font-size: 0.76rem;
  }
  .hero-section {
    padding: 28px 0 28px;
  }
  .hero-h1 {
    font-size: clamp(1.42rem, 6vw, 1.9rem);
  }
  .hero-lead {
    font-size: 0.92rem;
  }
  .hero-visual-panel {
    padding: 14px;
  }
  .hero-logo-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px;
  }
  .hero-logo-transparent,
  .hero-logo-img {
    max-width: 240px !important;
    height: auto !important;
    margin: 0 auto;
  }
  .quick-circle-glyph {
    font-size: 40px;
  }
  .quick-circle-link {
    font-size: 0.74rem;
  }
  .section-light,
  .section-muted,
  .section-dark-poly {
    padding: 44px 0;
  }
  .pillar-row,
  .pillar-row--reverse {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 20px;
    gap: 16px;
  }
  .pillar-icon-col {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
  }
  .pillar-medallion {
    width: 64px;
    height: 64px;
  }
  .pillar-medallion-svg {
    width: 34px;
    height: 34px;
  }
  .tech-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tech-selector-btn {
    width: 100%;
    padding: 10px 6px;
  }
  .tech-selector-glyph {
    font-size: 20px;
  }
  .tech-selector-circle {
    width: 38px;
    height: 38px;
  }
  .tech-cards-grid,
  .zenit-form-grid,
  .contact-form-grid,
  .hero-trust-strip,
  .methodology-grid,
  .project-modules-grid {
    grid-template-columns: 1fr !important;
  }
  .process-medallions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .project-page-topbar {
    padding: 12px 14px;
  }
  .project-page-body {
    padding: 16px 14px;
  }
  .product-showcase-card {
    padding: 20px;
    border-radius: 20px;
  }
  .contact-card-dark {
    padding: 22px 16px;
  }
  .zenit-section-divider {
    display: none;
  }
  .zenit-section-header {
    flex-direction: column;
    gap: 6px;
  }
  .zenit-section-subtitle {
    text-align: center;
  }
  .tech-bracket-box {
    padding: 18px 28px;
  }
  .space-planets-top {
    height: 110px;
    margin-bottom: 10px;
  }
  .planet--bootstrap,
  .planet--python,
  .planet--apcelerator {
    display: none;
  }
  .planet--angular {
    left: 4%;
    bottom: -24px;
    width: 40px !important;
  }
  .planet--wordpress {
    right: 4%;
    bottom: -26px;
    width: 48px !important;
  }
  .space-scene-stage {
    margin-top: 38px;
  }
  .footer-logo-card {
    max-width: 220px !important;
    padding: 4px 10px;
  }
  .footer-logo {
    width: 100% !important;
    max-width: 220px !important;
  }
  .nit-eyecatcher-btn {
    width: 180px; /* Reducción del 20% para 1:1 en móviles */
    height: auto;
  }
  .nit-dismiss-x-btn {
    top: -10px;
    right: 2px;
    width: 26px;
    height: 26px;
  }
  .wa-help-green-pleca {
    min-width: 244px;
    height: 40px;
    padding: 0 18px;
    font-size: 0.92rem;
  }
  .slidemenu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .slidemenu-glyph {
    font-size: 34px;
  }
  .slidemenu-item-btn {
    padding: 12px 8px;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 14px;
  }
  .brand-suri-gif {
    display: none;
  }
  .portfolio-mosaic-grid,
  .hero-screens-preview {
    grid-template-columns: 1fr;
  }
  .floating-astronaut-widget {
    right: 8px;
    bottom: 0;
  }
}


/* ==========================================================================
   INTERIOR PAGES, PRODUCT LANDINGS (WMS / CRM), PROJECTS (ZENIT.MX) & BLOG HUB
   ========================================================================== */

/* Sub-header Navigation Strip for Architecture / Landings / Projects */
.zenit-subnav-bar {
  background: rgba(20, 23, 29, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px 0;
  position: sticky;
  top: 60px;
  z-index: 980;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.zenit-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.zenit-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
.zenit-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-block;
  transition: color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .zenit-breadcrumb a:hover {
    color: #FF6B72;
    text-decoration: none;
    transform: translateX(2px);
  }
}
.zenit-breadcrumb .bc-sep {
  opacity: 0.45;
}
.zenit-breadcrumb .bc-current {
  color: #FF6B72;
  font-weight: 700;
}
.zenit-subnav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.zenit-subnav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
  cursor: pointer;
}
@media (hover: hover) {
  .zenit-subnav-pill:hover {
    color: #FFFFFF;
    background: rgba(211, 46, 55, 0.22);
    border-color: rgba(211, 46, 55, 0.5);
    transform: translateY(-1px);
  }
}
.zenit-subnav-pill.is-active {
  color: #FFFFFF;
  background: var(--zenit-red);
  border-color: var(--zenit-red);
  box-shadow: 0 4px 14px rgba(211, 46, 55, 0.35);
}

/* ==========================================================================
   ZENIT.MX MULTI-SECTION PROJECT CASE STUDY ARCHITECTURE (proyectos.html)
   ========================================================================== */
.znt-project-selector-strip {
  background: #0F1217;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 12px 0;
}
.znt-project-selector-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.znt-proj-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.znt-proj-tab:hover {
  color: #FFFFFF;
  border-color: rgba(211, 46, 55, 0.55);
  background: rgba(211, 46, 55, 0.16);
  transform: translateY(-2px);
}
.znt-proj-tab.is-active {
  color: #FFFFFF;
  background: var(--zenit-red);
  border-color: var(--zenit-red);
  box-shadow: 0 4px 16px rgba(211, 46, 55, 0.4);
}
.znt-proj-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

/* 1. Full-Bleed Hero Header (#header-proyecto) */
.znt-header-proyecto {
  position: relative;
  min-height: 440px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 68px 0;
  color: #FFFFFF;
  overflow: hidden;
}
.znt-header-proyecto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 14, 0.94) 0%, rgba(11, 14, 20, 0.84) 52%, rgba(11, 14, 20, 0.38) 100%);
  z-index: 1;
}
.znt-header-proyecto .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.znt-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(211, 46, 55, 0.92);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  max-width: clamp(120px, 14vw, 175px);
  white-space: nowrap;
  box-sizing: border-box;
}
.znt-nav-arrow:hover {
  background: #B81F27;
}
.znt-nav-arrow--prev {
  left: 0;
  border-radius: 0 999px 999px 0;
}
.znt-nav-arrow--next {
  right: 0;
  border-radius: 999px 0 0 999px;
}
.znt-nav-arrow span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  vertical-align: middle;
}
.znt-hero-content-box {
  max-width: 660px;
  margin: 0;
  margin-right: auto;
  padding-left: clamp(35px, 6.5vw, 90px);
  padding-right: 0;
  text-align: left;
}
.znt-hero-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.znt-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0;
}
.znt-hero-divider {
  width: 3px;
  height: 44px;
  background: var(--zenit-red);
  flex-shrink: 0;
}
.znt-hero-slope {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}
.znt-hero-lead {
  font-size: 1.04rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 22px;
}
.znt-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.znt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* 2. HTML5 Video Player Section (.video-znt) */
.znt-video-section {
  background: #0B0D11;
  padding: 44px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.znt-video-container {
  max-width: 960px;
  margin: 0 auto;
}
.znt-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.znt-video-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FF6B72;
}
.znt-video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  background: #000000;
}
.znt-video-player {
  display: block;
  width: 100%;
  max-height: 540px;
  background: #000000;
}

/* 3. Split Presentation Banner (#ini-header.cont-proyecto) */
.znt-ini-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.znt-ini-photo {
  background-size: cover;
  background-position: center;
  min-height: 380px;
  position: relative;
}
.znt-ini-panel {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
}
.znt-ini-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 22px;
}
.znt-ini-logo-wrap {
  margin-bottom: 22px;
  padding: 14px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.znt-ini-logo {
  max-width: 240px;
  max-height: 86px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.znt-ini-desc {
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.72;
  margin-bottom: 26px;
}
.znt-ini-tech-label {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  opacity: 0.9;
}
.znt-cont-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.znt-cont-icono [class^="icon-"],
.znt-cont-icono [class*=" icon-"] {
  font-size: 54px;
  transition: transform 0.2s ease;
}
.znt-cont-icono [class^="icon-"]:hover,
.znt-cont-icono [class*=" icon-"]:hover {
  transform: translateY(-4px) scale(1.06);
}

/* 4. Alternating Visual Showcase Sections (bg-wht / bg-grisO) */
.znt-cont-proyecto {
  padding: 72px 0;
}
.znt-bg-wht {
  background: #FFFFFF;
  color: #1A1D24;
}
.znt-bg-grisO {
  background: #2C2F36;
  color: #FFFFFF;
}
.znt-bg-dark {
  background: #171A21;
  color: #FFFFFF;
}
.znt-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 10px;
}
.znt-section-subtitle {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 42px;
}
.znt-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 48px;
}
.znt-showcase-row:last-child {
  margin-bottom: 0;
}
.znt-showcase-row.is-reverse .znt-showcase-media {
  order: 2;
}
.znt-showcase-row.is-reverse .znt-showcase-copy {
  order: 1;
}
.znt-showcase-media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.znt-showcase-media img {
  max-width: 100%;
  max-height: 430px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.18));
}
.znt-showcase-copy h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}
.znt-showcase-copy p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 14px;
}
.znt-showcase-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.znt-showcase-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.znt-showcase-list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--zenit-red);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 5. Feature Icon Grid (thumbnail-info with 110px–150px icomoon glyphs) */
.znt-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.znt-thumbnail-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.znt-bg-wht .znt-thumbnail-info {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
.znt-thumbnail-info:hover {
  transform: translateY(-5px);
  border-color: var(--zenit-red);
}
.znt-thumbnail-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 88px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--project-accent, #D32E37);
}
.znt-thumbnail-info h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.znt-thumbnail-info p {
  font-size: 0.92rem;
  line-height: 1.65;
  opacity: 0.88;
  margin: 0;
}

/* 6. Multi-Device Composite + El Reto / Proceso / Resultado + Durante El Proceso */
.znt-devices-hero {
  text-align: center;
  margin-bottom: 44px;
}
.znt-devices-hero img {
  max-width: min(100%, 880px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.18));
}
.znt-rpr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 52px;
  text-align: left;
}
.znt-rpr-card {
  padding: 28px;
  border-radius: 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-top: 4px solid var(--project-accent, #D32E37);
}
.znt-bg-grisO .znt-rpr-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  border-top: 4px solid var(--project-accent, #D32E37);
}
.znt-rpr-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--project-accent, #D32E37);
  margin-bottom: 10px;
}
.znt-rpr-card p {
  font-size: 0.95rem;
  line-height: 1.68;
  margin: 0;
}
.znt-cont-proceso-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 28px;
  color: var(--project-accent, #D32E37);
}
.znt-cont-proceso {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.znt-cont-proceso li {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease;
}
.znt-bg-grisO .znt-cont-proceso li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.znt-cont-proceso li:hover {
  transform: translateY(-4px);
}
.znt-cont-proceso .znt-proc-icon {
  font-size: 64px;
  line-height: 1;
  color: var(--project-accent, #D32E37);
}
.znt-cont-proceso li p {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

/* ==========================================================================
   WMS & CRM CAMPAIGN LANDING PAGES (Mockup_Zenit_CRM.pdf + Wireframe 05)
   ========================================================================== */
.product-landing-hero {
  background: radial-gradient(circle at 80% 20%, rgba(211, 46, 55, 0.22), transparent 48%),
              linear-gradient(135deg, #0E1117 0%, #171B24 55%, #1E1419 100%);
  color: #FFFFFF;
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.product-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 44px;
  align-items: center;
}
.product-hero-brand-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.product-hero-logo-pill {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.product-hero-logo-pill .hero-brand-logo {
  height: 22px;
  width: auto;
  display: block;
}
.product-hero-brand-header .product-hero-kicker {
  margin-bottom: 0;
}

.product-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(211, 46, 55, 0.2);
  border: 1px solid rgba(211, 46, 55, 0.45);
  color: #FF8A90;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.product-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: #FFFFFF;
}
.product-hero-h1 span {
  color: #FF5A62;
}
.product-hero-lead {
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 24px;
}
.product-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.product-hero-Visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-ui-window {
  background: #161A23;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48);
}
.product-ui-window--secondary {
  margin-left: 36px;
  border-color: rgba(211, 46, 55, 0.45);
}
.product-ui-topbar {
  background: #0D1017;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.product-ui-dots {
  display: flex;
  gap: 6px;
}
.product-ui-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.product-ui-dots span:nth-child(1) { background: #EF4444; }
.product-ui-dots span:nth-child(2) { background: #F59E0B; }
.product-ui-dots span:nth-child(3) { background: #10B981; }
.product-ui-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-family: monospace;
}
.product-ui-body {
  padding: 18px;
}
.product-hero-meerkat {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 132px;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* Integrations Bar */
.integrations-strip-section {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 24px 0;
}
.integrations-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.integrations-strip-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.integrations-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.integration-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1E293B;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.integration-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zenit-red);
}

/* Interactive Module Carousel (11 WMS / 12 CRM Slides) */
.module-carousel-shell {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
}
.module-carousel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E2E8F0;
}
.module-pill-btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  transition: all 0.18s ease;
}
.module-pill-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}
.module-pill-btn.is-active {
  background: var(--zenit-red);
  color: #FFFFFF;
  border-color: var(--zenit-red);
  box-shadow: 0 6px 16px rgba(211, 46, 55, 0.3);
}
.module-carousel-stage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
}
.module-mockup-window {
  background: #0F172A;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #334155;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
  color: #FFFFFF;
}
.module-mockup-body {
  padding: 24px;
}
.module-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.module-kpi-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.module-kpi-box strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #FF6B72;
}
.module-kpi-box span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
}
.module-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
}

/* 3+2 Dark Dashboards Grid */
.dashboards-dark-section {
  background: #11141C;
  color: #FFFFFF;
  padding: 80px 0;
}
.dashboards-3plus2-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}
.dashboard-dark-card {
  grid-column: span 2;
  background: #1A1F2B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 26px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.dashboard-dark-card:nth-child(4) {
  grid-column: 2 / span 2;
}
.dashboard-dark-card:nth-child(5) {
  grid-column: 4 / span 2;
}
.dashboard-dark-card:hover {
  transform: translateY(-4px);
  border-color: var(--zenit-red);
}
.dashboard-card-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(211, 46, 55, 0.2);
  color: #FF7A80;
  margin-bottom: 12px;
}
.dashboard-dark-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #FFFFFF;
}
.dashboard-dark-card p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* 5-Column Ventaja Única Grid */
.ventaja-5col-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.ventaja-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-top: 4px solid var(--zenit-red);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.ventaja-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  text-transform: uppercase;
  margin: 12px 0 8px;
  color: #0F172A;
}
.ventaja-card p {
  font-size: 0.85rem;
  line-height: 1.58;
  color: #475569;
  margin: 0;
}

/* Synergy Banner + 3 Pricing Plans */
.synergy-space-banner {
  background: radial-gradient(circle at 85% 50%, rgba(211, 46, 55, 0.28), transparent 55%),
              linear-gradient(135deg, #0D1017 0%, #191E2B 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 42px;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin: 48px 0;
}
.pricing-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 38px;
}
.pricing-plan-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 22px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.pricing-plan-card.is-featured {
  border: 2px solid var(--zenit-red);
  box-shadow: 0 22px 48px rgba(211, 46, 55, 0.16);
  transform: translateY(-6px);
}
.pricing-ribbon {
  position: absolute;
  top: -13px;
  right: 22px;
  background: var(--zenit-red);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 999px;
}

/* Blog Hub & Reader Modal */
.blog-silo-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.blog-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.blog-article-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-article-card:hover {
  transform: translateY(-5px);
  border-color: var(--zenit-red);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
}

/* AI Comparison Table */
.ai-comparison-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid #CBD5E1;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.ai-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  text-align: left;
}
.ai-comparison-table th,
.ai-comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 0.94rem;
}
.ai-comparison-table thead th {
  background: #0F172A;
  color: #FFFFFF;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-comparison-table thead th:last-child {
  background: var(--zenit-red);
}

@media (max-width: 992px) {
  .znt-ini-header,
  .znt-showcase-row,
  .product-hero-grid,
  .module-carousel-stage,
  .synergy-space-banner {
    grid-template-columns: 1fr;
  }
  .znt-showcase-row.is-reverse .znt-showcase-media,
  .znt-showcase-row.is-reverse .znt-showcase-copy {
    order: 0;
  }
  .znt-features-grid,
  .znt-rpr-grid,
  .pricing-3col-grid,
  .blog-articles-grid {
    grid-template-columns: 1fr;
  }
  .znt-cont-proceso {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboards-3plus2-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-dark-card,
  .dashboard-dark-card:nth-child(4),
  .dashboard-dark-card:nth-child(5) {
    grid-column: span 1;
  }
  .ventaja-5col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .znt-nav-arrow span {
    display: none;
  }
}
@media (max-width: 640px) {
  .hide-sm {
    display: none !important;
  }
  .znt-cont-proceso,
  .ventaja-5col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .znt-nav-arrow span {
    display: none;
  }
  .znt-hero-content-box {
    padding-left: 28px;
    padding-right: 28px;
    max-width: 100%;
  }
}

/* ==========================================================================
   13. UNIFICACIÓN DE CHROME, BOTONES, FORMULARIOS, ESCENA ESPACIAL, FOOTER
       Y WIDGET NIT EN TODAS LAS PÁGINAS INTERIORES (MISMA LÍNEA DEL HOME)
   ========================================================================== */

/* 13.1 Barra Superior (.zenit-topbar — idéntica a .site-topbar del Home) */
.zenit-topbar {
  background: #14181F;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1035;
}
.zenit-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  padding-bottom: 4px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .topbar-item:hover {
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
  }
}
.topbar-item strong {
  color: #FFFFFF;
  font-weight: 700;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: all 0.18s ease;
}
.topbar-pill:hover {
  background: var(--zenit-red);
  border-color: var(--zenit-red);
  color: #FFFFFF;
}

/* 13.2 Header Principal (.zenit-header — idéntico a .site-navbar del Home) */
.zenit-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(25, 29, 36, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.zenit-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
}
.zenit-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-suri-gif {
  display: none !important;
}
.brand-logo {
  height: 52px;
  width: auto;
  max-width: 156px;
  object-fit: contain;
  display: block;
}
.zenit-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.nav-link--dropdown {
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

/* Estilo unificado de "selected" / activo en la navegación:
   Adoptado de forma consistente a partir del pill de Agentes IA (borde + fondo traslúcido rojo + texto coral) */
.nav-link.is-active {
  color: #FF8A90;
  background: rgba(227, 30, 36, 0.14);
  border: 1px solid rgba(227, 30, 36, 0.35);
  box-shadow: none;
}
.nav-link.is-active:hover {
  color: #FFFFFF;
  background: rgba(227, 30, 36, 0.25);
  border-color: rgba(227, 30, 36, 0.55);
}

/* Dropdown de Servicios y Productos */
.nav-dropdown-wrapper {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 290px;
  background: #1A1F29;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1050;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown-wrapper:hover .nav-dropdown-menu,
.nav-dropdown-wrapper:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease;
}
.dropdown-item:hover {
  background: rgba(227, 30, 36, 0.16);
  transform: translateX(4px);
}
.dropdown-item strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
}
.dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zenit-red);
  margin-top: 0;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Slide Menu Desplegable en páginas interiores (.zenit-slidemenu) */
.zenit-slidemenu {
  background: #141820;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid var(--zenit-red);
  padding: 20px 0 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.zenit-slidemenu[hidden] {
  display: none !important;
}
.zenit-slidemenu-inner {
  position: relative;
}
.zenit-slidemenu .slidemenu-close-btn {
  position: absolute;
  top: -6px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zenit-slidemenu .slidemenu-close-btn:hover {
  background: var(--zenit-red);
  border-color: var(--zenit-red);
}

/* 13.3 Sistema Unificado de Botones (.btn, .btn-primary, .btn-outline, etc.) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  line-height: 1.2;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--zenit-red);
  color: #FFFFFF;
  border-color: var(--zenit-red);
  box-shadow: 0 8px 22px rgba(227, 30, 36, 0.28);
}
.btn-primary:hover {
  background: #C8161C;
  border-color: #C8161C;
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(227, 30, 36, 0.38);
}
.btn-outline {
  background: transparent;
  color: #0F172A;
  border-color: #CBD5E1;
}
.btn-outline:hover {
  border-color: var(--zenit-red);
  color: var(--zenit-red);
  background: rgba(227, 30, 36, 0.04);
}
.btn-outline-light {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}
.btn-sm {
  padding: 8px 15px;
  font-size: 0.8rem;
}
.btn-block {
  width: 100%;
  display: flex;
}

/* Kickers de sección */
.section-kicker {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zenit-red);
  background: rgba(227, 30, 36, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.section-kicker--light {
  color: #FF8A90;
  background: rgba(227, 30, 36, 0.2);
  border: 1px solid rgba(255, 138, 144, 0.3);
}

/* 13.4 FAQ Accordion en Páginas Interiores (.faq-section, details.faq-item) */
.faq-section {
  padding: 72px 0;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}
.faq-accordion-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
details.faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
details.faq-item[open] {
  border-color: rgba(227, 30, 36, 0.45);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
summary.faq-question {
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0F172A;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary.faq-question::-webkit-details-marker {
  display: none;
}
summary.faq-question::after {
  content: '+';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(227, 30, 36, 0.1);
  color: var(--zenit-red);
  font-weight: 800;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
details.faq-item[open] summary.faq-question::after {
  content: '−';
  background: var(--zenit-red);
  color: #FFFFFF;
}
.faq-answer {
  padding: 0 22px 20px;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.68;
}
.faq-answer p {
  margin: 0;
}

/* 13.5 Escena Espacial de Contacto y Formulario Oscuro en Páginas Interiores */
.space-contact-container {
  position: relative;
  z-index: 4;
  max-width: 860px;
  margin: 0 auto;
}
.contact-card-header {
  text-align: center;
  margin-bottom: 26px;
}
.contact-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 6px 0 10px;
  letter-spacing: 0.02em;
}
.contact-card-subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.zenit-contact-form .zenit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--zenit-red);
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.25);
}
.form-submit-row {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Personajes Espaciales y Superficie Lunar en Páginas Interiores */
.space-characters-layer {
  position: relative;
  max-width: 1180px;
  height: 250px;
  margin: 12px auto -64px;
  z-index: 3;
  pointer-events: none;
}
.space-char {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
}
.space-char--floating {
  left: 8%;
  top: 8px;
  width: clamp(78px, 9vw, 118px);
  animation: floatSlow 6s ease-in-out infinite;
}
.space-char--rocket {
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: clamp(190px, 24vw, 310px);
}
.space-char--astronaut {
  right: 8%;
  bottom: 4px;
  width: clamp(120px, 14vw, 185px);
}
.space-lunar-surface {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

/* 13.6 Footer Corporativo en Páginas Interiores (.zenit-footer — idéntico a .site-footer) */
.zenit-footer {
  background: #11151C;
  color: rgba(255, 255, 255, 0.78);
  padding: 64px 0 28px;
  border-top: 3px solid var(--zenit-red);
  font-size: 0.9rem;
}
.footer-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.footer-col--brand,
.footer-col--map {
  display: flex;
  flex-direction: column;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.footer-legal-entity {
  color: #FFFFFF;
  font-size: 0.92rem;
  margin: 12px 0 8px;
}
.footer-tagline {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.84rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.footer-contact-pill:hover {
  border-color: var(--zenit-red);
  background: rgba(227, 30, 36, 0.14);
  color: #FFFFFF;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}
.footer-links a:hover {
  color: #FFFFFF;
  transform: translateX(3px);
}
.footer-map-visual-link {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.map-open-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-address {
  font-style: normal;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
  margin-top: 10px;
}
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 13.7 Mosaico de Portafolio en proyectos.html y Modal Lector en blog.html */
.portfolio-section {
  padding: 72px 0;
  background: #141821;
  color: #FFFFFF;
}
.portfolio-section .zenit-section-title {
  color: #FFFFFF;
}
.portfolio-section .zenit-section-subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.portfolio-tile {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #1E2430;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.portfolio-tile:hover {
  transform: translateY(-4px);
  border-color: var(--zenit-red);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}
.tile-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.portfolio-tile:hover .tile-bg-img {
  transform: scale(1.06);
}
.tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 18, 27, 0.4) 0%, rgba(14, 18, 27, 0.94) 85%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transition: background 0.25s ease;
}
.portfolio-tile:hover .tile-overlay {
  background: linear-gradient(180deg, rgba(227, 30, 36, 0.35) 0%, rgba(14, 18, 27, 0.96) 80%);
}
.tile-brand-logo {
  max-height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  margin-bottom: 12px;
}
.tile-category {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zenit-red);
  margin-bottom: 4px;
}
.portfolio-tile:hover .tile-category {
  color: #FF6B72;
}
.tile-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.25;
}
.tile-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.portfolio-tile:hover .tile-cta {
  transform: translateX(4px);
  color: var(--zenit-red);
}
.portfolio-tile.is-active {
  border-color: var(--zenit-red);
  box-shadow: 0 0 0 2px var(--zenit-red), 0 18px 36px rgba(227, 30, 36, 0.35);
}


/* Modal Lector de Blog (.zenit-modal-backdrop) */
.zenit-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.zenit-modal-backdrop[hidden] {
  display: none !important;
}
.zenit-modal-dialog {
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
  border: 1px solid #E2E8F0;
}
.project-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #0F172A;
  color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 2;
}
.project-page-url {
  font-family: monospace;
  font-size: 0.82rem;
  color: #94A3B8;
}
.modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  cursor: pointer;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn:hover {
  background: var(--zenit-red);
  border-color: var(--zenit-red);
}

/* 13.8 Widget Flotante Nit Eyecatcher en Páginas Interiores (.nit-eyecatcher + barra verde WhatsApp) */
.nit-eyecatcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: -2px;
  z-index: 2;
}
.nit-eyecatcher[hidden] {
  display: none !important;
}
.nit-eyecatcher-btn,
.astronaut-trigger-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.nit-eyecatcher-img,
.astronaut-trigger-img {
  width: 230px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.36));
  transition: transform 0.2s ease;
}
.nit-eyecatcher-btn:hover .nit-eyecatcher-img,
.astronaut-trigger-btn:hover .astronaut-trigger-img {
  transform: translateY(-3px) scale(1.02);
}
.astronaut-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.astronaut-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6EE7B7;
}
.astronaut-status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}
.astronaut-drawer-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.astronaut-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.astronaut-close-btn:hover {
  background: var(--zenit-red);
  border-color: var(--zenit-red);
}
.astronaut-drawer-copy {
  margin: 0 0 12px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.astronaut-quick-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.astronaut-wa-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1DA851;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.18s ease;
}
.astronaut-wa-cta:hover {
  background: #158C42;
  color: #FFFFFF;
}
.astronaut-Quick-btn {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.astronaut-Quick-btn:hover {
  background: rgba(211, 46, 55, 0.2);
  border-color: var(--zenit-red);
  color: #FFFFFF;
}
.nit-chat-popover {
  width: 320px;
  background: #181C24;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  margin-bottom: 10px;
  color: #FFFFFF;
}
.nit-chat-popover[hidden] {
  display: none !important;
}
.nit-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #E31E24 0%, #B31217 100%);
}
.nit-popover-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nit-popover-brand strong {
  display: block;
  font-size: 0.9rem;
}
.nit-popover-brand small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.84);
}
.nit-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.28);
}
.nit-popover-close {
  background: rgba(0, 0, 0, 0.22);
  border: none;
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
}
.nit-popover-body {
  padding: 16px;
}
.nit-greeting {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  margin: 0 0 12px;
}
.nit-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nit-Action-btn {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.nit-Action-btn:hover {
  background: rgba(227, 30, 36, 0.18);
  border-color: var(--zenit-red);
}
.nit-whatsapp-cta {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #25D366;
  color: #072614;
  font-weight: 800;
  font-size: 0.84rem;
  text-decoration: none;
  margin-top: 4px;
}
.wa-pleca-text {
  font-weight: 800;
  font-size: 0.88rem;
  color: #FFFFFF;
}

/* Responsividad de Header, Formulario y Escena Espacial en Páginas Interiores */
@media (max-width: 1140px) {
  .zenit-topbar-inner {
    min-height: 32px;
    font-size: 0.74rem;
  }
  .zenit-header-inner {
    min-height: 52px;
  }
  .zenit-subnav-bar {
    top: 52px;
  }
  .brand-logo {
    height: 44px;
    max-width: 132px;
  }
  .zenit-nav {
    display: none;
  }
  .header-actions .btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
}
@media (max-width: 768px) {
  .zenit-topbar .topbar-right {
    display: none;
  }
  .zenit-subnav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .zenit-subnav-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .zenit-subnav-links::-webkit-scrollbar {
    display: none;
  }
  .zenit-contact-form .zenit-form-grid {
    grid-template-columns: 1fr;
  }
  .space-characters-layer {
    height: 180px;
    margin-bottom: -36px;
  }
  .nit-eyecatcher-img,
  .astronaut-trigger-img {
    width: 180px;
  }
}

/* ==========================================================================
   Dedicated Blog Article Layout (.blog-article-view)
   ========================================================================== */
.blog-article-header {
  background: #0B0E14;
  color: #FFFFFF;
  padding: 60px 0 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.blog-article-header .container {
  max-width: 860px;
}
.blog-article-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FF6B72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.blog-article-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 20px;
}
.blog-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}
.blog-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-article-content {
  background: #FFFFFF;
  padding: 56px 0 72px;
}
.blog-article-content .container {
  max-width: 860px;
}
.blog-summary-callout {
  background: #F8FAFC;
  border-left: 4px solid var(--zenit-red);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #1E293B;
  margin-bottom: 36px;
}
.blog-article-body h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: #0F172A;
  margin: 36px 0 16px;
  line-height: 1.3;
}
.blog-article-body p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 20px;
}
.blog-section-list {
  margin: 0 0 24px 0;
  padding-left: 24px;
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.75;
}
.blog-section-list--ordered {
  padding-left: 26px;
}
.blog-section-list li {
  margin-bottom: 12px;
}
.blog-section-list li strong {
  color: #0F172A;
}
.blog-article-body a {
  color: var(--zenit-red, #FF333D);
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.blog-article-body a:hover {
  color: #D62828;
}
.blog-table-wrapper {
  overflow-x: auto;
  margin: 24px 0 28px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  text-align: left;
}
.blog-table th {
  background: #F8FAFC;
  padding: 12px 16px;
  font-weight: 700;
  color: #0F172A;
  border-bottom: 2px solid #E2E8F0;
}
.blog-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
  line-height: 1.55;
}
.blog-lead-magnet-card {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 32px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-lead-magnet-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1D4ED8;
  background: #DBEAFE;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.blog-lead-magnet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1E3A8A;
  line-height: 1.5;
}
.blog-cta-box {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 18px;
  padding: 32px 36px;
  color: #FFFFFF;
  margin: 48px 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.blog-cta-box h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #FFFFFF;
  margin: 0 0 6px;
}
.blog-cta-box p {
  color: #94A3B8;
  font-size: 0.92rem;
  margin: 0;
  max-width: 480px;
}
.blog-article-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid #E2E8F0;
  margin-top: 48px;
}

/* ==========================================================================
   SPLASH DE ENTRADA CLÁSICO DE ZENIT.MX (.zenit-splash-hero)
   Efecto Telón Progresivo Atado al Scroll (Curtain Scroll Reveal)
   ========================================================================== */
.zenit-splash-hero {
  position: relative;
  z-index: 25;
  min-height: clamp(540px, calc(100vh - var(--splash-curtain-top, 86px)), 820px);
  display: flex;
  align-items: stretch;
  background-color: #090B0E;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.84) 1.35px, rgba(8, 10, 14, 0.34) 1.35px),
    linear-gradient(180deg, rgba(8, 10, 14, 0.16) 0%, rgba(8, 10, 14, 0.32) 64%, rgba(6, 8, 12, 0.84) 100%),
    url('../assets/cover-home-live.jpg');
  background-size: 6px 6px, 100% 100%, cover;
  background-position: 0 0, center center, center top;
  color: #FFFFFF;
  border-bottom: 2px solid rgba(211, 46, 55, 0.65);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.92), 0 10px 28px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  will-change: transform;
}

body.has-splash-curtain .hero-section--index2 {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--splash-curtain-top, 56px));
  display: flex;
  align-items: center;
  transform: translate3d(0, var(--curtain-pin-offset, 0px), 0);
  will-change: transform;
}

body.has-splash-curtain .hero-section--index2 > .container {
  width: 100%;
  transform: scale(var(--curtain-reveal-scale, 1));
  opacity: var(--curtain-reveal-opacity, 1);
  transform-origin: center center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  body.has-splash-curtain .hero-section--index2 {
    transform: none;
  }
  body.has-splash-curtain .hero-section--index2 > .container {
    transform: none;
    opacity: 1;
  }
}

.zenit-splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(28px, 4.5vh, 52px) 24px clamp(24px, 3.8vh, 42px);
}

.zenit-splash-stage {
  width: min(100%, 790px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 44px);
  margin-inline: auto;
  text-align: center;
}

.zenit-splash-logo-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: clamp(4px, 1.5vh, 18px);
}

.zenit-splash-logo {
  display: block;
  width: min(100%, 670px);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 725 / 225;
  object-fit: contain;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.65));
}

.zenit-splash-scroll-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.56);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.zenit-splash-scroll-svg {
  display: block;
  width: 34px;
  height: 68px;
}

.zenit-splash-scroll-chevrons {
  animation: zenitSplashChevronPulse 2s ease-in-out infinite;
}

@keyframes zenitSplashChevronPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.68;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@keyframes zenitSpin {
  to {
    transform: rotate(360deg);
  }
}

.zenit-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: zenitSpin 0.75s linear infinite;
  vertical-align: middle;
}

@media (hover: hover) {
  .zenit-splash-scroll-btn:hover {
    color: #FFFFFF;
    transform: translateY(2px);
  }
}

.zenit-splash-circles {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  align-items: start;
  justify-items: center;
}

.zenit-splash-circle-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 1.1vw, 1.06rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

button.zenit-splash-circle-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  margin: 0;
  line-height: inherit;
}

.zenit-splash-circle-glyph {
  font-size: clamp(56px, 5.8vw, 82px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.52);
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .zenit-splash-circle-link:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
  }
  .zenit-splash-circle-link:hover .zenit-splash-circle-glyph {
    color: #FFFFFF;
  }
}

/* Ajuste del bloque Hero B2B cuando va precedido por el Splash */
.hero-section--index2 {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(211, 46, 55, 0.16) 0%, transparent 46%),
    linear-gradient(135deg, rgba(11, 13, 18, 0.95) 0%, rgba(17, 20, 28, 0.92) 55%, rgba(14, 17, 24, 0.96) 100%),
    url('../assets/bg-dark-lowpoly.jpg');
  background-size: cover;
  background-position: center;
  padding: 52px 0 48px;
}

@media (max-width: 991px) {
  .zenit-splash-container {
    justify-content: center;
  }
  .zenit-splash-stage {
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .zenit-splash-hero {
    min-height: 500px;
  }
  .zenit-splash-circles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 16px;
  }
  .zenit-splash-circle-glyph {
    font-size: 52px;
  }
}