/* ==========================================================================
   Omega — Dirección Editorial V23
   Menos azul, más papel y grafito. El azul marino pasa a ser acento, no fondo.
   Capa aditiva: se carga al final y no modifica ninguna hoja original.
   Para revertir por completo, se quita el <link> de esta hoja.

   Paleta (la de siempre, redistribuida):
     tinta      #101418   negro frío — titulares
     grafito    #2A2F36   gris oscuro — paneles y pie
     acero      #6B7280   gris medio — texto secundario
     niebla     #F4F5F6   gris claro — fondos de sección
     línea      #E2E4E7   hairline
     marino     #12294A   azul oscuro — SOLO acento
     blanco     #FFFFFF
   ========================================================================== */

:root{
  --o-ink:#101418;
  --o-graphite:#2A2F36;
  --o-steel:#6B7280;
  --o-mist:#F4F5F6;
  --o-line:#E2E4E7;
  --o-navy:#12294A;
  --o-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Se redefinen los tokens heredados. Todo lo que antes era azul brillante
   ahora es grafito o marino profundo. */
body,
body.theme-group,
body.theme-construction,
body.theme-software,
body.theme-webs,
body.theme-pos{
  --navy:#101418;
  --navy2:#12294A;
  --blue:#12294A;
  --cyan:#6B7280;
  --ink:#101418;
  --text:#3B4149;
  --muted:#6B7280;
  --line:#E2E4E7;
  --surface:#F4F5F6;
  --surface2:#ECEEF0;
  --shadow:0 18px 50px rgba(16,20,24,.07);
}

body{ background:#fff; color:var(--o-ink) }

/* ---------------------------------------------------------------- 1. Anotación
   La firma de esta dirección: etiquetas, numeración y cifras en monoespaciada,
   como las acotaciones de un plano. Es el lenguaje común de la construcción
   y del software, y es lo que hace que no parezca una plantilla más. */
.eyebrow, .group-kicker, .group-section-label, .division-eyebrow,
.software-kicker, .construction-kicker, .pos-kicker, .webs-kicker,
.breadcrumbs, .price-tag, .division-badge, .mo-ba-tag{
  font-family:var(--o-mono) !important;
  font-weight:500 !important;
  font-size:.7rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:var(--o-steel) !important;
}
.step-num, .service-number, .mo-stat b, .price{
  font-family:var(--o-mono) !important;
  font-variant-numeric:tabular-nums;
}

/* La regla del eyebrow: hairline larga, no gradiente de color. */
.eyebrow:before{
  width:42px !important;
  height:1px !important;
  background:var(--o-graphite) !important;
}

/* ---------------------------------------------------------------- 2. Portadas claras
   El cambio de fondo: los héroes dejan de ser campos azules saturados y pasan
   a papel con una retícula hairline. El azul se guarda para el panel del logo. */
.group-home-hero,
.construction-home-hero,
.software-home-hero,
.webs-home-hero,
.pos-home-hero{
  background:#fff !important;
  color:var(--o-ink) !important;
  border-bottom:1px solid var(--o-line);
}
.group-home-hero::before,
.construction-home-hero::before,
.software-home-hero::before,
.webs-home-hero::before,
.pos-home-hero::before{
  background-image:
    linear-gradient(rgba(16,20,24,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,20,24,.045) 1px,transparent 1px) !important;
  background-size:44px 44px !important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 70%) !important;
}
.group-hero-grid-overlay,
.group-visual-glow,
.software-hero-mesh{ display:none !important }

.group-hero-copy h1,
.construction-hero-copy h1,
.software-hero-copy h1,
.pos-hero-copy h1,
.webs-hero-copy h1{
  color:var(--o-ink) !important;
  letter-spacing:-.045em !important;
}
.group-hero-copy h1 span,
.construction-hero-copy h1 span,
.software-hero-copy h1 span,
.pos-hero-copy h1 span,
.webs-hero-copy h1 span{
  color:var(--o-steel) !important;
}
.group-hero-lead,
.construction-hero-lead,
.software-hero-lead,
.pos-hero-lead,
.webs-hero-lead{ color:var(--o-steel) !important }

/* Barra de confianza bajo los botones: hairlines verticales, sin cajas. */
.group-hero-trust > div,
.construction-hero-points > div,
.software-hero-principles > div,
.pos-hero-points > div{
  background:transparent !important;
  border:0 !important;
  border-left:1px solid var(--o-line) !important;
  border-radius:0 !important;
  padding:2px 0 2px 16px !important;
  color:var(--o-steel) !important;
}
.group-hero-trust strong,
.construction-hero-points strong,
.software-hero-principles strong,
.pos-hero-points strong{ color:var(--o-ink) !important }
.group-hero-trust i,
.construction-hero-points i{ color:var(--o-steel) !important }

/* ---------------------------------------------------------------- 3. El panel oscuro
   Un único bloque grafito por página, que sostiene el símbolo. Toda la
   audacia gastada en un solo lugar; el resto queda callado. */
.group-hero-visual{
  background:linear-gradient(160deg,#1B2027,#0C0F13) !important;
  border-radius:26px;
  padding:38px 30px 30px !important;
  overflow:hidden;
  position:relative;
}
.group-hero-visual::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}
.group-skyline span{ background:rgba(255,255,255,.07) !important }

.group-division-tags a{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  transition:background-color .22s ease,border-color .22s ease;
}
.group-division-tags a:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.group-division-tags strong{ color:#fff !important }
.group-division-tags small{ color:#9AA1AA !important }
.tag-icon{ background:rgba(255,255,255,.08) !important; color:#C9CED4 !important }

/* ---------------------------------------------------------------- 4. Botones
   Sólidos y monocromos. Un solo botón lleno por vista; el resto, hairline. */
.btn{ border-radius:8px !important; font-weight:700 !important; letter-spacing:-.005em }
.btn-primary,
.group-btn-primary,
.construction-btn-primary,
.software-btn-primary,
.pos-btn-primary,
.webs-btn-primary{
  background:var(--o-ink) !important;
  color:#fff !important;
  border:1px solid var(--o-ink) !important;
  box-shadow:none !important;
}
.btn-primary:hover,
.group-btn-primary:hover,
.construction-btn-primary:hover,
.software-btn-primary:hover,
.pos-btn-primary:hover,
.webs-btn-primary:hover{
  background:var(--o-navy) !important;
  border-color:var(--o-navy) !important;
  box-shadow:none !important;
}
.btn-outline,
.group-btn-secondary,
.construction-btn-secondary,
.software-btn-secondary,
.pos-btn-secondary,
.webs-btn-secondary{
  background:transparent !important;
  color:var(--o-ink) !important;
  border:1px solid var(--o-line) !important;
}
.btn-outline:hover,
.group-btn-secondary:hover,
.construction-btn-secondary:hover,
.software-btn-secondary:hover,
.pos-btn-secondary:hover,
.webs-btn-secondary:hover{
  border-color:var(--o-ink) !important;
  color:var(--o-ink) !important;
  background:transparent !important;
}

/* ---------------------------------------------------------------- 5. Superficies
   Menos radios, menos sombra, más hairline. La elegancia es la contención. */
.card, .branch-card, .project-card, .content-panel, .price-card,
.contact-box, .step, .hero-aside, .notice, details,
.group-division-card, .mo-shot, .mo-ba{
  border-radius:14px !important;
  border-color:var(--o-line) !important;
  box-shadow:none !important;
}
.card:hover, .branch-card:hover, .project-card:hover,
.price-card:hover, .contact-box:hover, .group-division-card:hover{
  border-color:var(--o-graphite) !important;
  box-shadow:none !important;
  transform:translate3d(0,-3px,0) !important;
}
.hero-aside:hover{ box-shadow:none !important; transform:translate3d(0,-3px,0) !important }

.card-icon, .quick-list i, .capability-icon{
  background:var(--o-mist) !important;
  color:var(--o-graphite) !important;
  border-radius:9px !important;
}
.step-num{
  background:var(--o-ink) !important;
  color:#fff !important;
  border-radius:9px !important;
  font-size:.9rem;
}
.feature{ background:var(--o-mist) !important; border-color:var(--o-line) !important; border-radius:10px !important }
.feature i{ color:var(--o-graphite) !important }
.notice{ background:var(--o-mist) !important; border-color:var(--o-line) !important }
.notice i{ color:var(--o-graphite) !important }
.card-link, .division-link{ color:var(--o-ink) !important; font-weight:700 !important }
.card-link:hover, .division-link:hover{ color:var(--o-navy) !important }
.blue{ color:var(--o-steel) !important }

.group-capability-bar > div{
  background:#fff !important;
  border-color:var(--o-line) !important;
}
.group-capability-bar strong{ color:var(--o-ink) !important }
.group-capability-bar small{ color:var(--o-steel) !important }

/* Tarjetas de división: papel, no campos de color. */
.group-division-card--software,
.group-division-card--construction,
.branch-card.software,
.branch-card.construction{
  background:#fff !important;
  border:1px solid var(--o-line) !important;
}
.group-division-card--software .division-card-copy p,
.group-division-card--construction .division-card-copy p{ color:var(--o-steel) !important }
.group-division-card--software .division-card-copy h3,
.group-division-card--construction .division-card-copy h3{ color:var(--o-ink) !important }
.division-services span{
  background:var(--o-mist) !important;
  color:var(--o-graphite) !important;
  border:1px solid var(--o-line) !important;
}
.division-badge{ background:var(--o-mist) !important; color:var(--o-steel) !important }
.division-card-top{ background:var(--o-mist) !important }

/* ---------------------------------------------------------------- 6. Navegación */
.nav{
  background:rgba(255,255,255,.92) !important;
  border-top:0 !important;
  border-bottom:1px solid var(--o-line) !important;
}
.nav.mo-scrolled{ background:rgba(255,255,255,.96) !important; box-shadow:0 1px 0 var(--o-line) !important }
.nav-links a, .links a{ color:var(--o-steel) !important; font-weight:600 !important }
.nav-links a:hover, .links a:hover,
.nav-links a[aria-current="page"], .links a[aria-current="page"]{ color:var(--o-ink) !important }
.nav-links a[aria-current="page"]:after{ background:var(--o-ink) !important }
.brand-icon, .brand-symbol{ border-color:var(--o-line) !important; border-radius:9px !important }
.brand-copy span{ color:var(--o-steel) !important }
.nav-parent{ border-color:var(--o-line) !important; color:var(--o-steel) !important }
.nav-parent:hover{ border-color:var(--o-ink) !important; color:var(--o-ink) !important; background:transparent !important }

/* ---------------------------------------------------------------- 7. Cierre y pie
   El segundo y último bloque oscuro de la página. */
.cta, .group-closing-cta, .construction-closing-cta,
.software-closing-cta, .pos-closing-cta, .webs-closing-cta{
  background:var(--o-ink) !important;
  color:#fff !important;
}
.cta p, .group-closing-cta p{ color:#9AA1AA !important }
.cta h2, .group-closing-cta h2{ color:#fff !important }
.cta .btn-primary{ background:#fff !important; color:var(--o-ink) !important; border-color:#fff !important }
.cta .btn-primary:hover{ background:#E2E4E7 !important; border-color:#E2E4E7 !important; color:var(--o-ink) !important }
.cta .btn-outline{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.28) !important }
.cta .btn-outline:hover{ border-color:#fff !important; color:#fff !important }

footer{ background:var(--o-ink) !important; color:#9AA1AA !important }
.footer-links a, .footer-links span{ color:#9AA1AA !important }
.footer-links a:hover{ color:#fff !important }
.footer-bottom{ color:#6B7280 !important; border-top-color:rgba(255,255,255,.09) !important }

/* ---------------------------------------------------------------- 8. Aire
   El 15% minimalista vive acá: espacio y medida de línea, no adornos. */
@media (min-width:1100px){
  .section{ padding:118px 0 !important }
  .section-head + *{ margin-top:58px !important }
  .group-home-hero{ padding:64px 0 0 !important }
}
.section-head h2, .group-section-heading h2{ letter-spacing:-.045em !important }
.section-head p, .group-section-heading p{ color:var(--o-steel) !important; max-width:44ch }
p{ max-width:68ch }

/* ---------------------------------------------------------------- 9. Detalles */
.mo-progress{ background:var(--o-ink) !important }
.mo-wa{
  background:var(--o-ink) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 12px 30px rgba(16,20,24,.28) !important;
}
.mo-wa:hover{ background:var(--o-navy) !important }
.mo-shot{ background:var(--o-mist) !important }
.mo-stat{ border-top-color:var(--o-ink) !important }
.mo-stat b{ color:var(--o-ink) !important }
.price-card.recommended{ border-color:var(--o-ink) !important }
.check-list i{ color:var(--o-graphite) !important }
.side-nav a:hover, .side-nav a.active{ background:var(--o-mist) !important; color:var(--o-ink) !important }
summary:after{ color:var(--o-graphite) !important }
::selection{ background:var(--o-ink); color:#fff }
a:focus-visible, button:focus-visible{ outline-color:var(--o-ink) !important }

@media(prefers-reduced-motion:reduce){
  .card:hover,.branch-card:hover,.project-card:hover,
  .price-card:hover,.contact-box:hover,.group-division-card:hover,
  .hero-aside:hover{ transform:none !important }
}

/* ==========================================================================
   10. Portadas de división — ajuste tras pasar el hero a claro
   Los elementos que estaban diseñados para flotar sobre un campo azul
   se recolocan: el panel oscuro se queda (es el ancla visual de cada
   división) pero pasa de azul marino a grafito.
   ========================================================================== */

/* Panel de plano de Construcciones: grafito, no azul. */
.construction-blueprint{
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(158deg, #232830, #0C0F13) !important;
  background-size:22px 22px, 22px 22px, auto !important;
  border-color:rgba(255,255,255,.12) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
.blueprint-axis, .blueprint-dimension{ opacity:.5 }
.structure-roof, .structure-column, .structure-beam{ opacity:.55 }

/* Etiquetas de servicio sobre el panel. */
.construction-service-tags a,
.software-orbit-card{
  background:rgba(12,15,19,.86) !important;
  border-color:rgba(255,255,255,.12) !important;
  border-radius:11px !important;
  box-shadow:none !important;
  color:#fff !important;
}
.construction-service-tags small,
.software-orbit-card small{ color:#9AA1AA !important }
.construction-service-tags i{ color:#C9CED4 !important }

/* Barras de resumen bajo el hero: papel con hairline, no vidrio oscuro. */
.construction-summary-bar,
.software-capability-bar,
.pos-capability-bar,
.webs-trust-bar{
  background:var(--o-line) !important;
  border:1px solid var(--o-line) !important;
  border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
  backdrop-filter:none !important;
}
.construction-summary-bar > div,
.software-capability-bar > div,
.pos-capability-bar > div,
.webs-trust-bar > div{
  background:#fff !important;
  color:var(--o-steel) !important;
}
.construction-summary-bar strong,
.software-capability-bar strong,
.pos-capability-bar strong,
.webs-trust-bar strong{ color:var(--o-ink) !important }
.construction-summary-bar small,
.software-capability-bar small,
.pos-capability-bar small,
.webs-trust-bar small{ color:var(--o-steel) !important }
.construction-summary-bar i,
.software-capability-bar i,
.pos-capability-bar i,
.webs-trust-bar i{ color:var(--o-graphite) !important }

/* Placa del logo dentro del panel: se mantiene blanca, es donde vive la marca. */
.construction-logo-plate,
.software-logo-plate{
  background:#fff !important;
  border-radius:14px !important;
  box-shadow:0 20px 45px rgba(0,0,0,.28) !important;
}

/* Escenarios de producto (Omega Webs / Omega POS): grafito en vez de azul. */
.webs-device-stage,
.pos-interface-stage,
.webs-backing-panel,
.software-hero-visual > .software-orbit-ring{
  background:linear-gradient(158deg,#232830,#0C0F13) !important;
  border-color:rgba(255,255,255,.10) !important;
}
.pos-app-topbar, .pos-app-sidebar{
  background:#171B21 !important;
  border-color:rgba(255,255,255,.08) !important;
}
.webs-showcase-toolbar{ background:var(--o-mist) !important; border-color:var(--o-line) !important }
.webs-price-card--featured, .software-product-card--webs, .software-product-card--pos,
.pos-flow-card{
  background:#fff !important;
  border-color:var(--o-line) !important;
}

/* Cualquier degradado azul que quede suelto en botones de las divisiones. */
[class*="-btn-primary"], [class*="btn-primary"]{
  background-image:none !important;
}

/* ==========================================================================
   11. Últimos focos de azul
   Barrido final: cuadros de icono, acentos dentro de las maquetas de producto
   y cualquier degradado suelto.
   ========================================================================== */

/* Cuadros de icono que quedaban en azul pálido o marino. */
.construction-summary-bar i, .software-capability-bar i,
.pos-capability-bar i, .webs-trust-bar i,
.construction-summary-bar .capability-icon,
.software-capability-bar .capability-icon,
.pos-capability-bar .capability-icon,
.group-capability-bar .capability-icon,
.summary-icon, .trust-icon{
  background:var(--o-mist) !important;
  color:var(--o-graphite) !important;
  border-radius:8px !important;
}
.construction-service-tags i, .software-orbit-card i, .tag-icon{
  background:rgba(255,255,255,.09) !important;
  color:#C9CED4 !important;
}

/* Maqueta de Omega POS: el acento pasa a tinta. Sigue leyéndose como una
   interfaz real, pero deja de competir con el resto de la página. */
.pos-app-sidebar span.active,
.theme-preview-body aside span.active{
  background:var(--o-ink) !important;
  color:#fff !important;
}
.pos-charge-button,
.theme-preview-content button{
  background:var(--o-ink) !important;
  background-image:none !important;
  color:#fff !important;
}
.pos-interface-stage [class*="subtotal"],
.pos-cart-panel strong,
.pos-product-panel small{ color:var(--o-steel) !important }
.pos-badge, .pos-chip, .pos-count-chip{
  background:var(--o-mist) !important;
  color:var(--o-graphite) !important;
}

/* Ningún degradado azul suelto en toda la familia. */
[class*="-btn-primary"],
[class*="-btn-outline-light"],
.division-link, .card-link{ background-image:none !important }