/* Novrix Tech — hoja compartida del sitio publico.
   Generada al implementar el proyecto "Diseño web Novrix.tech" (Fase 25).

   POR QUE EXISTE ESTE FICHERO
   El diseño de origen lleva TODOS los estilos en atributos style= en linea.
   Eso se conserva tal cual —es lo que garantiza que la pagina se vea como se
   diseño— pero hay tres cosas que un atributo en linea no puede expresar:

       1. :hover        (el diseño lo anota como style-hover=, que no es CSS)
       2. @font-face    (la tipografia va autoalojada, ver abajo)
       3. media queries (el diseño es de escritorio fijo, sin puntos de corte)

   Esas tres viven aqui.

   SOBRE LOS !important DEL BLOQUE RESPONSIVE
   No son descuido. Un estilo en linea gana a cualquier regla de hoja, asi que
   sin !important las media queries no podrian corregir la rejilla ni los
   margenes del diseño. Estan acotados: solo dentro de @media y solo sobre las
   clases nvx-* que se añadieron para eso.

   MANUAL DE IDENTIDAD v1.0 (Agosto 2026)
   Deep Blue #0F172A · Pure White #FFFFFF · Electric Cyan #06B6D4
   Steel Gray #64748B · Light Background #F8FAFC
   Sin sombras duras, biseles ni efectos 3D (prohibidos por el manual).

   PESOS: el manual del sitio traia cuatro (300/400/600/800). El handoff del
   diseño pide seis y exige fidelidad exacta, asi que se generaron los dos que
   faltaban —500 y 700— desde los OTF oficiales del paquete fonts-inter, con el
   mismo subconjunto latino que los otros cuatro (22 KB cada uno). El
   subconjunto incluye U+2190-2193 a proposito: el diseño usa la flecha -> en
   varios enlaces, y sin ella el navegador la sacaria de otra tipografia. */

/* --- Tipografia -------------------------------------------------------------
   Inter va autoalojada: el sitio se sirve por tunel de Cloudflare y no debe
   depender de un tercero para renderizar la marca. El diseño de origen cargaba
   fonts.googleapis.com; eso se ha eliminado a proposito. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300;
  font-display:swap; src:url('/assets/fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700;
  font-display:swap; src:url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800;
  font-display:swap; src:url('/assets/fonts/inter-800.woff2') format('woff2'); }

/* --- Base ------------------------------------------------------------------ */
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
       background:#FFFFFF; color:#0F172A; -webkit-font-smoothing:antialiased; }
a { color:#06B6D4; text-decoration:none; transition:color .16s ease,
    background-color .16s ease, border-color .16s ease; }
img, svg { max-width:100%; }
h1,h2,h3 { text-wrap:pretty; }

/* Foco visible: el diseño no lo contempla y sin esto la pagina no se puede
   recorrer con teclado. */
a:focus-visible, button:focus-visible {
  outline:2px solid #06B6D4; outline-offset:3px; border-radius:4px; }

/* --- Estados :hover ---------------------------------------------------------
   Traduccion literal de los style-hover= del diseño. Cada clase corresponde a
   un valor distinto que aparecia alli; no se ha inventado ninguno. */
.hv-cian:hover   { color:#06B6D4; }
.hv-cta:hover    { background:#0891B2; color:#FFFFFF; }
.hv-ghost:hover  { border-color:#06B6D4; color:#06B6D4; }
.hv-card         { transition:border-color .16s ease; }
.hv-card:hover   { border-color:#06B6D4; }
.hv-caso:hover   { border-color:#06B6D4; color:#0F172A; }

/* --- Bloque de imagen de marca ---------------------------------------------
   Sustituye al componente <image-slot> del diseño, que es un marcador de
   relleno del lienzo de previsualizacion y no algo servible.

   Las fotos llegaron en el paquete de handoff (no por el API, que las cortaba
   en 256 KiB). Se convirtieron de PNG a WebP: 6,4 MB -> 321 KB, un 95 % menos,
   sin diferencia visible. El motivo diagonal del heroe queda debajo y solo se
   ve mientras la imagen carga, o si falla.

       <div class="nvx-foto"><img src="/assets/photos/why.webp" alt="..."></div> */
.nvx-foto { position:relative; width:100%; height:100%; overflow:hidden;
            background:#0F172A; border-radius:16px; display:flex;
            align-items:flex-end; padding:22px; }
.nvx-foto[data-shape="rect"] { border-radius:0; }
.nvx-foto::before, .nvx-foto::after {
  content:""; position:absolute; width:150%; aspect-ratio:1;
  border-top:2px solid #06B6D4; transform:rotate(-45deg); pointer-events:none; }
.nvx-foto::before { top:-46%; right:-30%; opacity:.42; }
.nvx-foto::after  { top:-30%; right:-46%; border-top-width:1px; opacity:.26; }
.nvx-foto > span  { position:relative; color:#94A3B8; font-size:11px;
                    font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.nvx-foto > img   { position:absolute; inset:0; width:100%; height:100%;
                    object-fit:cover; }

/* --- Fichas tecnicas (paginas de producto) ----------------------------------
   El diseño arma las tablas con rejillas de columnas fijas. En un movil eso se
   sale de pantalla, asi que:

     .nvx-ficha   fila etiqueta/valor — se apila por debajo de 640 px
     .nvx-scroll  envoltura que desplaza en horizontal las tablas anchas
     .nvx-tabla   ancho minimo, para que la tabla SE DESPLACE en vez de
                  aplastarse hasta ser ilegible

   Desplazar una tabla ancha es preferible a apilarla: en una ficha tecnica la
   comparacion entre columnas es justamente lo que se quiere leer. */
.nvx-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nvx-tabla  { min-width:520px; }

@media (max-width:640px) {
  .nvx-ficha { grid-template-columns:minmax(0,1fr) !important; }
  /* Sin el borde superior en el valor, la etiqueta y su dato se leen como
     un bloque y no como dos filas sueltas. */
  .nvx-ficha > div:first-child { padding-bottom:2px !important; }
  .nvx-ficha > div:last-child  { padding-top:2px !important; }
}

/* --- Selector de idioma -----------------------------------------------------
   No existe en el diseño original: el handoff entrega solo castellano y anota
   "version EN pendiente". Se añade con el mismo lenguaje visual de la barra
   (gris de reposo, cian al pasar, blanco el activo) para que no parezca
   injertado.

   NO hay redireccion automatica por idioma del navegador: rompe los enlaces
   que la gente comparte y confunde a los buscadores. Elige el visitante. */
.nvx-idioma { display:inline-flex; align-items:center; gap:7px; font-size:13px;
              font-weight:600; letter-spacing:.04em; }
.nvx-idioma a { color:#64748B; }
.nvx-idioma a:hover { color:#06B6D4; }
.nvx-idioma a[aria-current="true"] { color:#FFFFFF; }
.nvx-idioma span { color:#334155; }

/* --- Formulario de contacto -------------------------------------------------
   El diseño expresa el foco como style-focus= y el chip seleccionado con
   valores interpolados por su runtime. Aqui son CSS y aria-pressed. */
.nvx-campo { border:1px solid #CBD5E1; border-radius:8px; padding:12px 14px;
             font-size:15px; font-family:inherit; color:#0F172A; outline:none;
             width:100%; transition:border-color .16s ease; }
.nvx-campo:focus { border-color:#06B6D4; }
.nvx-campo:user-invalid { border-color:#64748B; }

.nvx-chip { background:#FFFFFF; color:#475569; border:1px solid #CBD5E1;
            font-family:inherit; font-size:13px; font-weight:500;
            padding:8px 16px; border-radius:999px; cursor:pointer;
            white-space:nowrap; transition:background-color .16s ease,
            color .16s ease, border-color .16s ease; }
.nvx-chip:hover { border-color:#06B6D4; }
.nvx-chip[aria-pressed="true"] { background:#0F172A; color:#FFFFFF;
                                 border-color:#0F172A; }

.nvx-enviar { background:#06B6D4; color:#FFFFFF; border:none; font-family:inherit;
              font-size:15px; font-weight:600; padding:14px 28px; border-radius:8px;
              cursor:pointer; align-self:flex-start; transition:background-color .16s ease; }
.nvx-enviar:hover { background:#0891B2; }

.nvx-otro { background:none; border:1px solid #E2E8F0; color:#0F172A;
            font-family:inherit; font-size:14px; font-weight:600; padding:10px 24px;
            border-radius:8px; cursor:pointer; transition:border-color .16s ease, color .16s ease; }
.nvx-otro:hover { border-color:#06B6D4; color:#06B6D4; }

/* --- Responsive -------------------------------------------------------------
   El diseño es de escritorio fijo (rejilla de 3 columnas, 48 px de margen,
   titular de 56 px). Sin esto, en un movil se sale de pantalla. */
@media (max-width:1000px) {
  .nvx-g3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .nvx-g4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:860px) {
  .nvx-sec  { padding-left:28px !important; padding-right:28px !important; }
  /* Ficha de producto: etiqueta a la izquierda, texto a la derecha. Apilada. */
  .nvx-gspec{ grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
  .nvx-centro-botones { flex-wrap:wrap; }
  .nvx-g2   { grid-template-columns:minmax(0,1fr) !important; gap:36px !important; }
  .nvx-h1   { font-size:38px !important; }
  .nvx-h2   { font-size:27px !important; }
  .nvx-split{ flex-direction:column; align-items:flex-start !important; }
  .nvx-nav  { height:auto !important; flex-wrap:wrap; gap:14px;
              padding:14px 20px !important; }
  .nvx-navlinks { flex-wrap:wrap; gap:14px 18px !important; }
  .nvx-alto { height:280px !important; }
}
@media (max-width:560px) {
  .nvx-g3  { grid-template-columns:minmax(0,1fr) !important; }
  .nvx-sec { padding-left:20px !important; padding-right:20px !important; }
  .nvx-h1  { font-size:31px !important; }
  .nvx-cta-ancha { width:100%; text-align:center; }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

/* Banda intermedia del menu — Fase 47.
   Con el sexto enlace (Guias) el menu y el logotipo se tocaban entre 900 y
   1020px de ancho. Por debajo de 860 el menu ya se apila y no hay problema;
   por encima de 1020 sobra sitio. En medio quedaba en una sola linea y no
   cabia. Aqui se aprieta el hueco y el margen lateral antes de apilar, en vez
   de subir el punto de quiebre a 1020, que ademas apilaria los titulares y las
   fotos sin necesidad. */
@media (max-width:1020px) and (min-width:861px) {
  .nvx-nav      { padding-left:24px !important; padding-right:24px !important; }
  .nvx-navlinks { gap:18px !important; }
}

/* El rotulo de marca no se parte — Fase 47.
   Por debajo de 860px el menu esta puesto para apilarse (flex-wrap en
   .nvx-nav). No lo hacia: como el <span> de "NOVRIX TECH" puede partirse, flex
   prefiere encoger la marca antes que bajar el bloque de enlaces, y la marca
   quedaba en dos lineas con los enlaces pegados al lado. Ya pasaba con cinco
   enlaces; el sexto solo lo hizo evidente.
   Con nowrap la marca deja de ser encogible y el bloque de enlaces baja, que es
   lo que la media query de 860px pretendia desde el principio. */
.nvx-nav > a > span { white-space:nowrap; }
/* Y ademas la marca no se encoge. Con nowrap sola, entre 880 y 900px flex
   seguia estrechando el <a> por debajo de su contenido y el rotulo se
   superponia con el primer enlace. Con flex:none el unico que puede ceder es
   el bloque de enlaces, que es justamente el que debe bajar. */
.nvx-nav > a { flex:none; }