/* Omniatix Holding — Components */

/* Hero Glow (subtle warm on navy) */
.hero-glow-v2 {
   position: absolute;
   top: -20%;
   left: 50%;
   transform: translateX(-50%);
   width: 60vw;
   height: 60vw;
   background: radial-gradient(circle, rgba(244, 241, 234, 0.04) 0%, rgba(11, 20, 38, 0) 70%);
   filter: blur(80px);
   pointer-events: none;
   z-index: 0;
}

/* Feature Ticker / Marquee */
.ticker-wrap {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   border-top: 1px solid var(--color-border-subtle);
   border-bottom: 1px solid var(--color-border-subtle);
   padding: 1rem 0;
   margin: 4rem 0;
   font-family: var(--font-mono);
   color: var(--color-text-secondary);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
}

.ticker-item {
   display: inline-block;
   padding-left: 3rem;
   animation: ticker 30s linear infinite;
}

@keyframes ticker {
   0% { transform: translate3d(0, 0, 0); }
   100% { transform: translate3d(-100%, 0, 0); }
}

/* Technical Grid Overlay */
.tech-grid-overlay {
   background-size: 40px 40px;
   background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
}

/* Code Snippet Block */
.code-block {
   font-family: var(--font-mono);
   background: var(--navy-2);
   border: 1px solid var(--color-border-subtle);
   border-radius: 8px;
   padding: 1.5rem;
   font-size: 13px;
   font-weight: 500;
   color: var(--paper);
   position: relative;
   overflow: hidden;
}

.code-block::before {
   content: "TERMINAL";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   background: rgba(20, 32, 54, 0.8);
   color: var(--mute);
   font-size: 11px;
   padding: 0.25rem 1rem;
   border-bottom: 1px solid var(--color-border-subtle);
}

.code-line {
   display: block;
   margin-bottom: 0.25rem;
}

.code-line::before {
   content: ">";
   color: var(--mute);
   margin-right: 0.5rem;
}

/* Nav Link Hover Effect */
.nav-link {
   position: relative;
   text-decoration: none;
   color: var(--color-text-secondary);
   transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
   color: var(--color-text-primary);
}

.nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 1px;
   bottom: -4px;
   left: 0;
   background-color: var(--color-text-primary);
   transition: width 0.3s ease;
}

.nav-link:hover::after {
   width: 100%;
}

/* Header: con las cuatro secciones y el botón de contacto, el menú de escritorio necesita unos 900 px.
   Hasta 1024 px se usa el menú móvil, el mismo que por debajo de 768 px. Sólo el header del componente
   (<omni-header>; revisión O05). */
@media (max-width: 1024px) {
   omni-header .header-v2 .hidden-mobile {
      display: none !important;
   }

   omni-header .mobile-menu-btn {
      display: flex;
   }

   omni-header .mobile-menu-overlay {
      display: flex;
   }
}

/* Títulos del hero en el teléfono (revisión O05): el <br> que parte el título en dos líneas en la
   pantalla grande deja una palabra sola en la angosta («Dedicate a lo / que / sabés hacer.»). Por debajo
   de 768 px el salto se apaga y el navegador reparte las líneas. Desde O06 vale para las páginas de
   todos los idiomas (las que llevan el header del sitio), no sólo para el castellano: un idioma nuevo de
   la lista la tiene sin tocar el CSS. */
@media (max-width: 768px) {
   omni-header ~ main .text-hero {
      text-wrap: balance;
   }

   omni-header ~ main .text-hero br {
      display: none;
   }
}

/* Menú móvil del componente (revisión O05): cerrado, sólo se corre fuera de la pantalla y sus enlaces
   seguían en el orden del tabulador y para los lectores de pantalla. Cerrado, queda oculto también para
   ellos; la visibilidad cambia al terminar la animación de cierre. */
omni-header .mobile-menu-overlay:not(.open) {
   visibility: hidden;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s;
}

/* Ejemplos de empresas (nota del founder F2): las tres empresas ilustrativas de Enterprise (#store, #lender,
   #distributor) y la versión corta de Mi Comercio en la home. Todo sale de la misma estructura: un título, lo
   que hace la empresa y la lista de momentos de su día, cada uno con su hora. */
.example-notice {
   margin-top: 1.5rem;
   padding: 1rem 1.25rem;
   max-width: 760px;
   border: 1px solid var(--color-border-subtle);
   border-left: 2px solid var(--mute);
   background: var(--color-bg-glass);
   color: var(--paper);
   line-height: 1.6;
}

.example {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 2rem 3rem;
   padding: 2.5rem;
   border: 1px solid var(--color-border-subtle);
   background: var(--color-bg-card);
   scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.example + .example {
   margin-top: 1.5rem;
}

.example-name {
   margin-top: 0.75rem;
   font-size: 1.75rem;
}

.example-line {
   margin-top: 1rem;
   color: var(--color-text-secondary);
   line-height: 1.7;
}

.example-sub {
   font-family: var(--font-mono);
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--mute);
}

.example-day {
   list-style: none;
   margin: 1.25rem 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.example-day li {
   display: grid;
   grid-template-columns: 4rem minmax(0, 1fr);
   gap: 1rem;
   line-height: 1.7;
   color: var(--color-text-secondary);
}

.example-day time {
   font-family: var(--font-mono);
   font-size: 0.875rem;
   color: var(--paper);
   padding-top: 0.15rem;
}

.example-assistant {
   margin-top: 2rem;
   padding-left: 1.25rem;
   border-left: 2px solid var(--color-border-subtle);
}

.example-note {
   margin-top: 0.75rem;
   color: var(--color-text-secondary);
   line-height: 1.7;
}

.example-link {
   display: inline-block;
   margin-top: 2rem;
   color: var(--paper);
   text-transform: none;
}

.example-home {
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
}

.example-home .example-link {
   margin-top: 1.75rem;
}

@media (max-width: 768px) {
   .example {
      grid-template-columns: minmax(0, 1fr);
      padding: 1.5rem;
   }

   .example-day li {
      grid-template-columns: 3.25rem minmax(0, 1fr);
      gap: 0.75rem;
   }
}