/* Numartech UX — mejoras accesibles (Fase 3). */

/* Base tipográfica: cuerpo mínimo 16px (nudge de línea base, no fuerza tamaños Elementor explícitos). */
body { font-size: 16px; }

/* Miga de pan (breadcrumb): barra sutil bajo la cabecera, en páginas interiores. */
.numartech-breadcrumb { background: #F5F7FA; border-bottom: 1px solid #E6EAF0; }
.numartech-breadcrumb__inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 24px;
  font-size: 13.5px; color: #6B7B89; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.numartech-breadcrumb a { color: #294293; text-decoration: none; }
.numartech-breadcrumb a:hover { text-decoration: underline; }
.numartech-breadcrumb span[aria-current="page"] { color: #1C1C1C; font-weight: 600; }
.numartech-breadcrumb__sep { color: #B4BEC8; }

/* Tap targets accesibles ≥44px (solo añade altura si el elemento es menor; no reduce). */
.elementor-button,
.menu-link,
.main-header-menu a,
.ht-btn,
button:not(.n2-ss-button):not(.ast-mobile-menu-buttons),
.n2-ss-button-container [role="button"] {
  min-height: 44px;
}
/* Asegurar centrado vertical del texto en botones con min-height. */
.elementor-button { display: inline-flex; align-items: center; justify-content: center; }

/* Regla de marca (ManualIdentidad.pdf): todos los botones del sitio, en cualquier
   página e idioma, usan el naranja oficial (#E73B1F) con texto blanco. El hover
   (fondo blanco + texto naranja) lo aplica automáticamente el JS genérico de
   inversión de color, que lee estos valores como "originales" al cargar la página. */
.elementor-button,
.wpforms-submit,
button[type="submit"],
input[type="submit"] {
  background-color: #E73B1F !important;
  color: #FFFFFF !important;
  border-color: #E73B1F !important;
}

/* Enlaces de menú: área táctil cómoda sin alterar el diseño de escritorio. */
.ast-header-break-point .menu-link { min-height: 44px; display: flex; align-items: center; }

/* Menú header: color casi blanco (el degradado azul tapaba el logo). La topbar
   se deja igual (azul oscuro) — ya no comparten color, prioridad a la legibilidad del logo.
   En el home (ES/EN) con header transparente de Astra activo (body.ast-theme-transparent-header),
   el header no lleva este fondo mientras está arriba del todo — se ve el slider detrás — y solo
   lo recupera al hacer scroll (clase .nt-scrolled, ver más abajo). En el resto del sitio, donde
   Astra no aplica transparencia, el fondo claro se mantiene siempre como hasta ahora. */
body:not(.ast-theme-transparent-header) .site-header,
body:not(.ast-theme-transparent-header) header#masthead,
body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) .main-header-bar-wrap,
body:not(.ast-theme-transparent-header) .main-header-bar,
.nt-scrolled .site-header,
.nt-scrolled header#masthead,
.nt-scrolled .ast-primary-header-bar,
.nt-scrolled .main-header-bar-wrap,
.nt-scrolled .main-header-bar {
  background: #F8F9FA !important;
}
/* Con el header claro, el texto del menú vuelve a sus colores originales (oscuro,
   rojo en hover/activo) — no hace falta forzarlos, ya tenían buen contraste en claro. */
/* Sombra sutil entre el header y el contenido (slider): igual que el fondo, solo mientras
   el header es sólido (fuera del home, o en el home tras hacer scroll). */
body:not(.ast-theme-transparent-header) .site-header,
body:not(.ast-theme-transparent-header) header#masthead,
.nt-scrolled .site-header,
.nt-scrolled header#masthead {
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
/* Home con header transparente, arriba del todo: menú y logo en blanco para leerse bien
   sobre la imagen del slider (que siempre trae overlay oscuro detrás del texto). Al hacer
   scroll (.nt-scrolled) el header vuelve a fondo claro y el texto recupera sus colores
   originales (ver regla de arriba, sin :not(.nt-scrolled) porque ya no aplica). */
body.ast-theme-transparent-header:not(.nt-scrolled) .site-header .main-header-menu > .menu-item > a,
body.ast-theme-transparent-header:not(.nt-scrolled) .site-header .ast-search-icon,
body.ast-theme-transparent-header:not(.nt-scrolled) .site-header .astra-search-icon {
  color: #FFFFFF !important;
}
/* El color de fondo transparente de Astra (Personalizar > Header > Transparent Header)
   quedó sin configurar, así que su propia regla condicional no llega a pintar nada y el
   fondo blanco por defecto de la barra del menú (.main-header-bar/.ast-primary-header-bar)
   se queda tal cual — se fuerza aquí explícitamente en vez de depender de esa opción. */
body.ast-theme-transparent-header:not(.nt-scrolled) .main-header-bar,
body.ast-theme-transparent-header:not(.nt-scrolled) .ast-primary-header-bar {
  background: transparent !important;
}

/* Barra superior delgada: contacto + selector de idioma con banderas. Mismo azul del logo
   (#294293) y de las bandas de color del sitio (degradado ya usado en los CTA del home). */
.numartech-topbar { background: #294293; color: #cfd6dc; font-size: 13px; line-height: 1.4; }
.numartech-topbar__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 20px; padding: 6px 20px; }
.numartech-topbar__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.numartech-topbar__label { font-weight: 700; color: #fff; letter-spacing: .02em; }
.numartech-topbar a { color: #cfd6dc; text-decoration: none; }
.numartech-topbar__contact a:hover { color: #fff; }
.numartech-topbar__lang { display: flex; align-items: center; gap: 12px; }
.numartech-topbar__lang a.ntlang { display: inline-flex; align-items: center; gap: 5px; opacity: .55; filter: grayscale(70%); transition: opacity .15s, filter .15s; }
.numartech-topbar__lang a.ntlang.is-current { opacity: 1; filter: none; font-weight: 700; color: #fff; }
.numartech-topbar__lang a.ntlang:hover { opacity: 1; filter: none; }
.numartech-topbar__lang img { width: 20px; height: auto; border-radius: 2px; box-shadow: 0 0 1px rgba(255,255,255,.4); }

/* Buscador reubicado del header a la barra superior (misma funcionalidad, nueva posición). */
.numartech-topbar__search { display: flex; align-items: center; position: relative; }
.numartech-topbar__search .ast-search-menu-icon { position: relative; display: flex; align-items: center; }
.numartech-topbar__search .astra-search-icon { display: flex; align-items: center; color: #cfd6dc; }
.numartech-topbar__search .astra-search-icon:hover { color: #fff; }
.numartech-topbar__search .ast-icon.icon-search { font-size: 14px; }
.numartech-topbar__search .search-form { position: absolute; top: 100%; right: 0; z-index: 1002; margin-top: 8px; }

/* Header que se ENCOGE y se FIJA al hacer scroll (junto con la barra superior).
   En el tope de la página todo está en flujo normal; al hacer scroll (clase .nt-scrolled
   añadida por JS) la barra superior y la cabecera quedan fijas y compactas. */
.numartech-topbar,
.site-header, header#masthead {
  transition: top .2s ease, padding .2s ease;
}
.nt-scrolled .numartech-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
}
.nt-scrolled .site-header,
.nt-scrolled header#masthead {
  position: fixed; left: 0; right: 0; z-index: 1000;
  /* 'top' (alto de la barra superior) lo fija el JS. */
  box-shadow: 0 2px 12px rgba(11,27,41,.14);
}
/* Encoger la cabecera al hacer scroll: logo más pequeño y menos padding. */
.nt-scrolled .site-header .custom-logo,
.nt-scrolled .site-header img.custom-logo { max-width: 80px !important; height: auto !important; transition: max-width .2s ease; }
.nt-scrolled .site-header .ast-primary-header-bar .site-primary-header-wrap,
.nt-scrolled .site-header .main-header-bar,
.nt-scrolled .site-header .ast-primary-header-bar { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 0 !important; }

/* Home (ES/EN, mismo ID de Elementor en ambas): quitar el margen superior de 130px de la
   sección del slider — con la cabecera ya compacta, ese margen dejaba un vacío excesivo. */
.elementor-element-5f3eb4b { margin-top: 0 !important; }
/* Quedaba un resto de 10px: el wrap del widget del slider trae padding vertical de 10px
   (mismo ID de widget en ES/EN) que separaba el slider del header. */
.elementor-widget-wrap:has(> .elementor-element-7f91b97) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Página Contáctenos/Contact Us (ES/EN, mismo ID de sección): el mismo patrón del
   slider del home — margen superior de 166px que, con la cabecera ya compacta,
   deja un vacío excesivo entre el menú y la sección de contacto. */
.elementor-element-5c70b03 { margin-top: 0 !important; }

/* Botón "Ver Más"/"See More" del slider: además del padding asimétrico del contenedor
   (corregido por JS) y su propio padding vertical de 14px, el contenedor padre es flex
   con "align-items: stretch" (por defecto), así que el botón se estira a la altura del
   padre; al ser "inline-block" su texto no se centra en esa altura y queda pegado arriba.
   Se fuerza flex+centrado en el propio botón. Misma clase de estilo en las 5 diapositivas
   (hash generado por Smart Slider). */
.n2-style-6eeb7ccb8f0817b0df02c81a6644477e-heading {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  transition: background-color .15s ease, color .15s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}
.n2-style-6eeb7ccb8f0817b0df02c81a6644477e-heading:hover,
.n2-style-6eeb7ccb8f0817b0df02c81a6644477e-heading:focus-visible {
  background-color: #fff !important;
  color: #E73B1F !important;
}

/* ============ Fase 9 — Afinamiento ============ */

/* Footer: evitar que el email se parta a media palabra; logo y espaciados coherentes */
.site-footer, .site-footer p, .site-footer a, .footer-widget-area a, .footer-widget-area p { overflow-wrap: normal; word-break: normal; }

/* ---------------------------------------------------------------------------
   Rediseño del footer (inspirado en colegioandino.edu.co): 3 secciones iguales
   (Datos de Contacto | Enlaces Rápidos | Síguenos) y una barra inferior más
   grande y prominente para el copyright. Footer principal en blanco (el fondo
   azul no convenció); la barra inferior conserva su azul de siempre.
   --------------------------------------------------------------------------- */

/* Footer principal: blanco, texto oscuro (como el resto del sitio). */
.site-primary-footer-wrap { background: #FFFFFF !important; padding-top: 48px !important; padding-bottom: 40px !important; }
.footer-widget-area li, .footer-widget-area p { margin-bottom: 4px; line-height: 1.5; }

/* 3 columnas iguales: Contacto (sección 2) | Enlaces (sección 4) | Síguenos
   (sección 1, reordenada al final con "order"). La columna 3 (vacía, era un
   simple separador) se oculta: ya no hace falta con columnas de ancho igual. */
.site-primary-footer-wrap .ast-builder-footer-grid-columns {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: start;
}
.site-footer-primary-section-1, .site-footer-primary-section-2, .site-footer-primary-section-4 {
  flex: 1 1 0; min-width: 220px;
}
.site-footer-primary-section-1 { order: 3; border-left: 1px solid #E2E6EC; padding-left: 32px; }
.site-footer-primary-section-2 { order: 1; }
.site-footer-primary-section-4 { order: 2; border-left: 1px solid #E2E6EC; padding-left: 32px; }
.site-footer-primary-section-3 { display: none; }
@media (max-width: 767px) {
  .site-footer-primary-section-1, .site-footer-primary-section-4 { border-left: none; padding-left: 0; }
}

/* Títulos de columna: mismo tamaño en las 3 secciones (Datos de Contacto,
   Enlaces Rápidos, Síguenos) — pequeños, en mayúscula, acento naranja. */
.footer-widget-area .widget-title {
  color: #E73B1F !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 16px;
}

/* Enlaces del footer: lista limpia, sin viñetas. */
.site-footer-primary-section-4 .menu > li { list-style: none; }
.site-footer-primary-section-4 .menu-link:hover { color: #E73B1F !important; }

/* Contacto del footer: ícono y texto en una sola fila (evita que el ícono quede solo en su línea) */
.site-footer .widget_block table { width: 100%; }
.site-footer .widget_block table td { padding: 0 0 8px 0; }
.site-footer .widget_block table .nt-footer-contact-row { display: flex; align-items: flex-start; gap: 8px; }
.site-footer .widget_block table .nt-footer-contact-row i { flex: 0 0 16px; margin-top: 3px; text-align: center; color: #E73B1F; }
.site-footer .widget_block table .nt-footer-contact-row .fa-whatsapp { color: #25D366; font-size: 17px; }

/* Redes sociales (columna "Síguenos"): íconos circulares discretos sobre blanco. */
.nt-footer-social { display: flex; gap: 10px; margin-top: 2px; }
.nt-footer-social__link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #F1F1F2; color: #6D6E70; transition: background .15s ease, color .15s ease;
}
.nt-footer-social__link:hover { background: #E73B1F; color: #fff; }

/* Barra inferior: sin logo (se quitó), solo 2 secciones — copyright a la
   izquierda, "Política de Devoluciones" + mensaje a la derecha — en letra
   pequeña (12px). */
.site-below-footer-wrap {
  padding-top: 16px !important; padding-bottom: 16px !important;
  border-top: 1px solid rgba(255,255,255,.18);
}
.site-below-footer-wrap .ast-builder-footer-grid-columns { align-items: center; }
.site-below-footer-wrap a { color: #FFFFFF !important; text-decoration: underline; }
.site-below-footer-wrap a:hover { color: #C0DE32 !important; }
.ast-footer-copyright, .ast-footer-copyright p { font-size: 12px !important; margin: 0; }
.site-footer-below-section-2 .ast-builder-html-element p {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; margin: 0;
  font-size: 12px !important;
}
@media (max-width: 767px) {
  .ast-footer-copyright { justify-content: center; }
  .site-footer-below-section-2 .ast-builder-html-element p { justify-content: center; }
}

/* Contacto: colapsar columna vacía que genera el bloque gris */
.page-id-3197 .elementor-column:not(:has(.elementor-element-populated)) { display: none !important; }
.page-id-3197 .elementor-section:has(.elementor-column:not(:has(.elementor-element-populated))) .elementor-column:has(.elementor-element-populated) { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; }

/* Contáctenos/Contact Us: formulario con impresión más profesional — bordes
   redondeados, más aire entre campos y un foco visible con el azul de marca
   (antes eran cajas planas pegadas entre sí, sin ningún estado de foco propio). */
.page-id-3197 .wpforms-field, .page-id-7574 .wpforms-field { margin-bottom: 18px !important; }
.page-id-3197 .wpforms-field input:not([type="submit"]),
.page-id-3197 .wpforms-field textarea,
.page-id-7574 .wpforms-field input:not([type="submit"]),
.page-id-7574 .wpforms-field textarea {
  border: 1px solid #DADFE6 !important; border-radius: 8px !important;
  padding: 12px 14px !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.page-id-3197 .wpforms-field input:not([type="submit"]):focus,
.page-id-3197 .wpforms-field textarea:focus,
.page-id-7574 .wpforms-field input:not([type="submit"]):focus,
.page-id-7574 .wpforms-field textarea:focus {
  border-color: #294293 !important; box-shadow: 0 0 0 3px rgba(41,66,147,.15); outline: none;
}
/* Mapa de Google: esquinas coherentes con el resto de tarjetas/imágenes de la página. */
.page-id-3197 .elementor-widget-google_maps iframe,
.page-id-7574 .elementor-widget-google_maps iframe { border-radius: 12px; }

/* Contáctenos/Contact Us: con el overlay más oscuro sobre el video/imagen de
   fondo, el texto (títulos, iconos de contacto y sus enlaces) pasa a blanco
   para mantener buen contraste — antes heredaba el color oscuro por defecto,
   pensado para el fondo claro que tenía el overlay original. */
.page-id-3197 .elementor-element-5c70b03 .elementor-heading-title,
.page-id-7574 .elementor-element-5c70b03 .elementor-heading-title,
.page-id-3197 .elementor-element-5c70b03 .elementor-icon-box-title,
.page-id-7574 .elementor-element-5c70b03 .elementor-icon-box-title,
.page-id-3197 .elementor-element-5c70b03 .elementor-icon-box-description,
.page-id-7574 .elementor-element-5c70b03 .elementor-icon-box-description {
  color: #FFFFFF !important;
}
.page-id-3197 .elementor-element-5c70b03 .elementor-icon-box-description a,
.page-id-7574 .elementor-element-5c70b03 .elementor-icon-box-description a {
  color: #FFFFFF !important; text-decoration: underline;
}
.page-id-3197 .elementor-element-5c70b03 .elementor-icon-box-description a:hover,
.page-id-7574 .elementor-element-5c70b03 .elementor-icon-box-description a:hover {
  color: #FFB199 !important;
}

/* Tarjetas/posts: esquinas y sombra suave coherentes */
.ht-post, .htmega-single-post-slide, .elementor-widget-image-box .elementor-image-box-content { border-radius: 10px; }
.ht-post { overflow: hidden; box-shadow: 0 4px 16px rgba(11,27,41,.08); transition: transform .15s ease, box-shadow .15s ease; }
.ht-post:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(11,27,41,.14); }

/* Contenido plano sin Elementor (entradas de blog, archivos de categoría,
   búsqueda, etc.): Astra deja de aplicar su propio ancho de contenido cuando
   detecta Elementor activo en el sitio (asume que Elementor maneja el layout
   de cada página); en cualquier plantilla que NO sea una página/entrada
   construida con Elementor, no hay ningún contenedor que se encargue del
   ancho, y el contenido queda a lo ancho completo de la pantalla, sin margen
   de lectura. Se restaura el ancho legible en todo lo que no sea
   ".elementor-page" (páginas/entradas sí construidas con Elementor, que ya
   manejan su propio ancho y no deben tocarse). */
/* Excluye además las páginas HTML plano que ya tienen su propio sistema de
   ancho a pantalla completa por secciones (Quiénes Somos/About Us con
   .nt-about, Testimonios/Política con .numartech-page-wrap) — si no,
   quedaban encogidas dentro de otro contenedor de 1200px encima del suyo. */
body:not(.elementor-page):not(:has(.nt-about)):not(:has(.numartech-page-wrap)) #content.site-content > .ast-container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
body:not(.elementor-page):not(:has(.nt-about)):not(:has(.numartech-page-wrap)) .entry-content { font-size: 17px; line-height: 1.75; }
body:not(.elementor-page):not(:has(.nt-about)):not(:has(.numartech-page-wrap)) .entry-content h2 { font-size: 28px; margin-top: 1.4em; }
body:not(.elementor-page):not(:has(.nt-about)):not(:has(.numartech-page-wrap)) .entry-content h3 { font-size: 22px; margin-top: 1.2em; }
@media (max-width: 600px) {
  body:not(.elementor-page):not(:has(.nt-about)):not(:has(.numartech-page-wrap)) #content.site-content > .ast-container { padding: 0 16px; }
}

/* ===== Artículos de blog (Fase 8): identidad de marca aplicada según el
   manual (ManualIdentidad.pdf: azul #294293 + naranja #E73B1F; Poppins,
   ver docs/manual-imagen.md §7). Antes el contenido era texto plano sin
   ningún acento de marca — sin fotos propias por artículo todavía, la banda
   de título hace de "hero" en su lugar. ===== */

/* Banda de título: fondo azul de marca, título en blanco, categoría como
   badge naranja (en vez del enlace de texto plano "Rastreo de Activos"). */
body.single-post:not(.elementor-page) .entry-header {
  background: linear-gradient(135deg, #294293, #172a5e);
  padding: 48px 40px 36px; margin: 0 0 40px; border-radius: 14px;
}
body.single-post:not(.elementor-page) .entry-header .entry-title {
  color: #fff !important; font-weight: 800; font-size: 36px; line-height: 1.25; max-width: 900px;
}
body.single-post:not(.elementor-page) .entry-header .entry-meta {
  margin-top: 18px; font-size: 14px; color: #C7D2EE;
}
body.single-post:not(.elementor-page) .entry-header .entry-meta a { color: #C7D2EE; }
body.single-post:not(.elementor-page) .entry-header .ast-terms-link a {
  display: inline-block; background: #E73B1F; color: #fff !important; padding: 5px 14px;
  border-radius: 999px; font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; text-decoration: none;
}
@media (max-width: 600px) {
  body.single-post:not(.elementor-page) .entry-header { padding: 32px 24px 28px; border-radius: 10px; }
  body.single-post:not(.elementor-page) .entry-header .entry-title { font-size: 26px; }
}

/* Encabezados del cuerpo: azul de marca con acento naranja a la izquierda. */
body.single-post:not(.elementor-page) .entry-content h2 {
  color: #294293; font-weight: 800; border-left: 4px solid #E73B1F; padding-left: 14px;
}
body.single-post:not(.elementor-page) .entry-content h3 { color: #172a5e; font-weight: 700; }
body.single-post:not(.elementor-page) .entry-content strong { color: #172a5e; }

/* Primer párrafo (entradilla): un poco más grande, para enganchar la lectura. */
body.single-post:not(.elementor-page) .entry-content > p:first-of-type { font-size: 19px; color: #333; }

/* Enlaces del cuerpo: naranja de marca con subrayado (según §6 del manual:
   naranja/rojo accionable = enlaces y botones). */
body.single-post:not(.elementor-page) .entry-content a { color: #E73B1F; font-weight: 600; }
body.single-post:not(.elementor-page) .entry-content a:hover { color: #294293; }

/* Listas: viñeta de check naranja en vez del punto por defecto. */
body.single-post:not(.elementor-page) .entry-content ul { list-style: none; margin-left: 0; padding-left: 0; }
body.single-post:not(.elementor-page) .entry-content ul li { position: relative; padding-left: 28px; margin-bottom: 10px; }
body.single-post:not(.elementor-page) .entry-content ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; color: #E73B1F; font-weight: 800;
}

/* Último párrafo (siempre la invitación a la acción de cierre, con enlaces a
   la página de producto/contacto): destacado como una tarjeta, no un párrafo
   más entre el resto del texto. */
body.single-post:not(.elementor-page) .entry-content > p:last-of-type {
  background: #F5F7FA; border-left: 4px solid #294293; border-radius: 0 10px 10px 0;
  padding: 18px 22px; margin-top: 32px; font-weight: 600; color: #1C1C1C;
}

/* Navegación entrada anterior/siguiente: tarjetas en vez de enlaces sueltos. */
body.single-post:not(.elementor-page) .post-navigation .nav-links {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
}
body.single-post:not(.elementor-page) .post-navigation .nav-previous,
body.single-post:not(.elementor-page) .post-navigation .nav-next { flex: 1 1 0; min-width: 220px; }
body.single-post:not(.elementor-page) .post-navigation a {
  display: flex !important; align-items: center; justify-content: center; text-align: center; gap: 6px;
  width: 100% !important; max-width: none !important; box-sizing: border-box; padding: 16px 20px;
  background: #F5F7FA; border-radius: 10px;
  color: #294293 !important; font-weight: 700; text-decoration: none !important;
  transition: background .15s ease;
}
body.single-post:not(.elementor-page) .post-navigation a:hover { background: #E9EEF9; }

/* Formulario de comentarios: mismo tratamiento que el resto del sitio
   (bordes redondeados, foco visible con el azul de marca). */
body.single-post:not(.elementor-page) #respond input:not([type="submit"]),
body.single-post:not(.elementor-page) #respond textarea {
  border: 1px solid #DADFE6 !important; border-radius: 8px !important; padding: 12px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.single-post:not(.elementor-page) #respond input:not([type="submit"]):focus,
body.single-post:not(.elementor-page) #respond textarea:focus {
  border-color: #294293 !important; box-shadow: 0 0 0 3px rgba(41,66,147,.15); outline: none;
}

/* Archivos de categoría: título en azul de marca, enlaces "Leer más" en
   naranja, separación clara entre artículos. */
body.archive:not(.elementor-page) .page-title { color: #294293; font-weight: 800; }
body.archive:not(.elementor-page) article.type-post { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #E6EAF0; }
body.archive:not(.elementor-page) .entry-title a { color: #172a5e; }
body.archive:not(.elementor-page) .ast-terms-link a { color: #E73B1F; font-weight: 700; }
body.archive:not(.elementor-page) .ast-button, body.archive:not(.elementor-page) a.ast-button {
  background: #E73B1F !important; color: #fff !important; border-color: #E73B1F !important;
}

/* Navegación por categorías (para que un visitante pueda ver y recorrer
   todas las categorías del blog): en archivos de categoría, arriba, bajo la
   miga de pan; en entradas individuales, al final del artículo. */
.numartech-cat-nav { background: #F5F7FA; border-radius: 12px; padding: 18px 22px; margin: 24px 0; }
body.archive .numartech-cat-nav { margin: 0 0 32px; }
.numartech-cat-nav__label { display: block; font-weight: 700; color: #294293; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.numartech-cat-nav__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.numartech-cat-nav__pill {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #DADFE6;
  color: #294293 !important; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px;
  text-decoration: none !important; transition: background .15s ease, border-color .15s ease;
}
.numartech-cat-nav__pill:hover { background: #E9EEF9; border-color: #294293; }
.numartech-cat-nav__pill.is-current { background: #E73B1F; border-color: #E73B1F; color: #fff !important; }
.numartech-cat-nav__count { color: #8A97A5; font-size: 12px; }
.numartech-cat-nav__pill.is-current .numartech-cat-nav__count { color: #FFD9D0; }

/* Autor de la entrada: fondo blanco (chip), y al hacer clic muestra una
   breve bio en vez de ir al archivo del autor (sin contenido propio). */
.posted-by { position: relative; display: inline-block; }
.posted-by > a {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid #DADFE6;
  border-radius: 999px; padding: 4px 12px; color: #172a5e !important; font-weight: 600;
  text-decoration: none !important; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.posted-by > a:hover { border-color: #294293; box-shadow: 0 2px 8px rgba(41,66,147,.12); }
.numartech-author-bio {
  display: none; position: absolute; left: 0; top: calc(100% + 10px); z-index: 5;
  width: 280px; background: #fff; border: 1px solid #E6EAF0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(11,27,41,.14); padding: 16px; text-align: left;
}
.numartech-author-bio.is-open { display: block; }
.numartech-author-bio strong { display: block; color: #294293; font-size: 14px; margin-bottom: 6px; }
.numartech-author-bio span { display: block; color: #5a6472; font-size: 13px; line-height: 1.6; }

/* Tienda WooCommerce: la barra lateral (#secondary) traía un margin-top de
   60px que el contenido principal (#primary) no tenía, desalineando las dos
   columnas verticalmente (el buscador/filtros arrancaban más abajo que el
   título/cuadrícula de productos, dando una falsa sensación de superposición). */
#secondary.widget-area { margin-top: 0 !important; }

/* Fase 9 — Footer: ocultar columna vacía (3ª) y rebalancear (contacto más ancho para el email) */
@media (min-width: 922px) {
  .site-primary-footer-wrap .ast-builder-grid-row.ast-builder-grid-row-4-equal { grid-template-columns: auto minmax(250px, 1.4fr) 1fr !important; }
  .site-primary-footer-wrap .ast-builder-grid-row.ast-builder-grid-row-4-equal > *:nth-child(3) { display: none !important; }
}

/* Sección de estadísticas del home (cifras reales de la BD) */
.numartech-stats { background: #262b30; padding: 48px 20px; }
.numartech-stats__inner {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: space-around; gap: 32px; text-align: center;
}
.numartech-stats__item { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.numartech-stats__number { font-size: 40px; font-weight: 800; color: #FF6259; line-height: 1; }
.numartech-stats__label { color: #E8EAED; font-size: 15px; letter-spacing: .01em; }

/* Sección de reseñas: tarjetas reales (testimonios) o placeholder honesto si no hay ninguna aún */
.numartech-reviews { background: #F7F7F8; padding: 56px 20px; text-align: center; }
.numartech-reviews__inner { max-width: 640px; margin: 0 auto; }
.numartech-reviews__inner--grid { max-width: 1100px; }
.numartech-reviews__title { font-size: 26px; font-weight: 800; color: #1C1C1C; margin: 0 0 24px; }
.numartech-reviews__placeholder {
  background: #fff; border: 1px dashed #d8dadd; border-radius: 12px; padding: 32px 24px;
}
.numartech-reviews__stars { color: #d8dadd; font-size: 22px; letter-spacing: 3px; display: block; margin-bottom: 12px; }
.numartech-reviews__placeholder p { color: #6D6E70; margin: 0 0 10px; }
.numartech-reviews__cta a { color: #E73B1F; font-weight: 700; text-decoration: underline; }
/* Tarjetas de testimonios reales */
.numartech-reviews__grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.numartech-reviews__card {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(11,27,41,.08);
  padding: 24px; text-align: left; width: 320px; display: flex; flex-direction: column; gap: 10px;
}
.numartech-reviews__stars--filled { color: #FFB400; text-align: left; }
.numartech-reviews__quote { color: #3a3a3a; margin: 0; line-height: 1.5; flex: 1 1 auto; }
.numartech-reviews__name { margin: 0; font-weight: 700; color: #1C1C1C; }

/* Mapa junto al CTA "Estamos dispuestos a asesorarte": tarjeta blanca para que
   no choque directo contra el degradado azul de fondo. */
.numartech-map-card { padding: 20px; }
.numartech-map-card .elementor-widget-google_maps .elementor-widget-container {
  border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Tarjetas de categoría bajo el slider (Rastreo Vehicular, Rastreo y Control de
   Activos, Video Telemática, Accesorios, Automatización y Control de Acceso):
   invertir colores al hacer hover (fondo azul + texto blanco -> fondo blanco +
   texto azul). Mismo ID de sección en ES/EN. */
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated {
  transition: background-color .2s ease;
}
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover {
  background-color: #fff !important;
}
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover .elementor-icon-box-title,
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover .elementor-icon-box-title a,
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover .elementor-icon-box-icon,
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover .elementor-icon-box-icon a,
.elementor-element-ee26348 .elementor-widget-wrap.elementor-element-populated:hover .elementor-icon-box-icon i {
  color: #294293 !important;
}

/* "LA MEJOR GARANTÍA PARA TI" / "THE BEST GUARANTEE FOR YOU": mismo ID de sección
   en ES/EN. Fondo gris claro con presencia propia + tarjetas por ítem (antes: fotos
   de stock genéricas flotando en blanco, sin relación con la marca). */
.elementor-element-b31c216 {
  background: #EDF0F4 !important;
  padding-top: 36px !important; padding-bottom: 48px !important;
}
.elementor-element-b31c216 .elementor-column > .elementor-widget-wrap {
  background: #fff !important; border-radius: 16px; padding: 32px 24px !important;
  box-shadow: 0 6px 24px rgba(11,27,41,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-element-b31c216 .elementor-column:hover > .elementor-widget-wrap {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(11,27,41,.13);
}
/* Insignia de icono en vez de la foto de stock (misma imagen oculta, mismo espacio).
   Tamaño reducido (antes 150px/56px, se veía desproporcionado) y colores invertidos
   al pasar el mouse (fondo blanco + icono a color, en vez de fondo a color + icono blanco). */
.elementor-element-6e8f453 img,
.elementor-element-b15a765 img,
.elementor-element-49211af img { display: none !important; }
.elementor-element-6e8f453 .elementor-widget-container,
.elementor-element-b15a765 .elementor-widget-container,
.elementor-element-49211af .elementor-widget-container {
  width: 100px; height: 100px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border: 2px solid transparent; box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease;
}
.elementor-element-6e8f453 .elementor-widget-container::before,
.elementor-element-b15a765 .elementor-widget-container::before,
.elementor-element-49211af .elementor-widget-container::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 38px; color: #fff;
  transition: color .2s ease;
}
.elementor-element-6e8f453 .elementor-widget-container { background: linear-gradient(135deg, #294293, #294293); }
.elementor-element-6e8f453 .elementor-widget-container::before { content: "\f00c"; } /* calidad: check */
.elementor-element-b15a765 .elementor-widget-container { background: linear-gradient(135deg, #ff6b4a, #E63D1D); }
.elementor-element-b15a765 .elementor-widget-container::before { content: "\f02b"; } /* precios: etiqueta */
.elementor-element-49211af .elementor-widget-container { background: linear-gradient(135deg, #294293, #294293); }
.elementor-element-49211af .elementor-widget-container::before { content: "\f0d1"; } /* envíos: camión */
.elementor-element-6e8f453 .elementor-widget-container:hover,
.elementor-element-49211af .elementor-widget-container:hover {
  background: #fff; border-color: #294293;
}
.elementor-element-6e8f453 .elementor-widget-container:hover::before,
.elementor-element-49211af .elementor-widget-container:hover::before { color: #294293; }
.elementor-element-b15a765 .elementor-widget-container:hover {
  background: #fff; border-color: #E63D1D;
}
.elementor-element-b15a765 .elementor-widget-container:hover::before { color: #E63D1D; }

/* Botón flotante "volver arriba": solo una flecha en "V" (SVG), sin círculo ni
   fondo (encima del botón de WhatsApp para no superponerse). Al pasar el mouse
   el relleno pasa a blanco con borde negro (vía drop-shadow, simula un trazo). */
.nt-back-to-top,
.nt-back-to-top:hover,
.nt-back-to-top:focus,
.nt-back-to-top:active {
  position: fixed; right: 24px; bottom: 96px; z-index: 999;
  width: 44px; height: 44px; border: none !important; background: transparent !important;
  border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.nt-back-to-top { opacity: 0; pointer-events: none; }
.nt-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nt-back-to-top svg path { fill: #1C1C1C; transition: fill .15s ease; }
.nt-back-to-top:hover svg,
.nt-back-to-top:focus-visible svg {
  filter: drop-shadow(1px 0 0 #1C1C1C) drop-shadow(-1px 0 0 #1C1C1C) drop-shadow(0 1px 0 #1C1C1C) drop-shadow(0 -1px 0 #1C1C1C);
}
.nt-back-to-top:hover svg path,
.nt-back-to-top:focus-visible svg path { fill: #fff; }
@media (max-width: 600px) { .nt-back-to-top { right: 16px; bottom: 84px; width: 38px; height: 38px; } .nt-back-to-top svg { width: 20px; height: 20px; } }

/* Contenedor genérico para páginas simples (sin Elementor): Testimonios, Política de
   Devoluciones. Sin esto el contenido queda pegado al borde del viewport y al header. */
.numartech-page-wrap {
  max-width: 1100px; margin: 0 auto; padding: 56px 24px 72px;
}
.numartech-page-wrap--narrow { max-width: 760px; }
.numartech-page-wrap__title {
  font-size: 34px; font-weight: 800; color: #1C1C1C; margin: 0 0 12px;
}
.numartech-page-wrap__intro {
  font-size: 16px; line-height: 1.7; color: #3a3a3a; margin: 0 0 32px; max-width: 62ch;
}
.numartech-page-wrap__card {
  background: #F7F7F8; border-radius: 16px; padding: 36px 32px;
}
@media (max-width: 600px) {
  .numartech-page-wrap { padding: 36px 20px 48px; }
  .numartech-page-wrap__card { padding: 24px 20px; }
}

/* Página Política de Devoluciones: da estructura y estilo al contenido ampliado. */
.numartech-policy { max-width: 820px; }
.numartech-policy__highlight {
  background: #F5F7FA; border-left: 4px solid #294293; border-radius: 8px;
  padding: 20px 24px; margin: 0 0 32px;
}
.numartech-policy__highlight p { margin: 0; color: #1C1C1C; font-weight: 600; }
.numartech-policy h2 {
  color: #294293; font-size: 22px; margin: 32px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid #F5F7FA;
}
.numartech-policy p { line-height: 1.7; color: #3a3a3a; }

/* ============ Quiénes Somos / About Us (rediseño) ============ */
.nt-about { color: #1C1C1C; }
/* Hero */
.nt-about__hero {
  background-size: cover; background-position: center;
  color: #fff; text-align: center; padding: 96px 24px;
}
.nt-about__hero-inner { max-width: 900px; margin: 0 auto; }
.nt-about__hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
.nt-about__hero p { color: #E8EDF5; font-size: 18px; margin: 0; font-style: italic; }
/* Perfil (2 columnas) */
.nt-about__profile { padding: 56px 24px; background: #EDF0F4; }
.nt-about__profile-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center;
  /* Contenedor redondeado con sombra suave */
  background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(11,27,41,.08); padding: 40px;
}
.nt-about__profile-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(11,27,41,.14); display: block; }
.nt-about__profile-text h2 { color: #294293; font-size: 30px; font-weight: 800; margin: 0 0 16px; }
.nt-about__profile-text p { line-height: 1.75; color: #3a3a3a; margin: 0; text-align: justify; }
/* Misión / Visión (tarjetas) */
.nt-about__mv { padding: 8px 24px 64px; background: #EDF0F4; }
.nt-about__mv { padding-top: 64px; }
.nt-about__mv-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.nt-about__card { background: #fff; border-radius: 16px; padding: 36px 32px; box-shadow: 0 6px 24px rgba(11,27,41,.07); }
.nt-about__card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; margin-bottom: 18px; font-size: 24px; color: #fff;
}
.nt-about__card-icon--m { background: linear-gradient(135deg, #2b52a8, #294293); }
.nt-about__card-icon--v { background: linear-gradient(135deg, #ff6b4a, #E73B1F); }
.nt-about__card h2 { font-size: 24px; font-weight: 800; color: #1C1C1C; margin: 0 0 14px; }
.nt-about__card p { line-height: 1.75; color: #3a3a3a; margin: 0 0 12px; text-align: justify; }
.nt-about__card p:last-child { margin-bottom: 0; }
/* CTA */
.nt-about__cta { background: #294293; color: #fff; text-align: center; padding: 64px 24px; }
.nt-about__cta-inner { max-width: 720px; margin: 0 auto; }
.nt-about__cta h2 { color: #fff; font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.nt-about__cta p { color: #D8E1F2; font-size: 17px; margin: 0 0 26px; }
.nt-about__cta-btn {
  display: inline-block; background: #E73B1F; color: #fff !important; text-decoration: none;
  padding: 14px 36px; border-radius: 8px; font-weight: 700; letter-spacing: .02em;
  transition: background-color .15s ease, color .15s ease;
}
.nt-about__cta-btn:hover { background: #fff; color: #E73B1F !important; }
@media (max-width: 860px) {
  .nt-about__profile-inner { grid-template-columns: 1fr; gap: 28px; }
  .nt-about__mv-inner { grid-template-columns: 1fr; }
  .nt-about__hero { padding: 64px 20px; }
  .nt-about__profile, .nt-about__cta { padding: 44px 20px; }
  .nt-about__mv { padding: 44px 20px; }
}

/* ============ "Ellos ya confían en nosotros" (clientes en el home) ============
   Estilo copiado de la sección "Nuestros clientes" de kap-online.com: foto de
   fondo con overlay oscuro (azul muy oscuro de marca en vez de negro puro),
   contenedor más grande, título en blanco, logos en escala de grises
   flotando sin tarjetas/bordes, carrusel en loop automático. La imagen de
   fondo (background-image) se define inline desde PHP; acá solo el overlay. */
.numartech-clients {
  position: relative; padding: 88px 0; text-align: center;
  background-color: #0E1730; background-size: cover; background-position: center;
}
.numartech-clients::before {
  content: ""; position: absolute; inset: 0; background: rgba(14, 23, 48, .93);
}
.numartech-clients__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.numartech-clients__title { font-size: 30px; font-weight: 800; color: #FFFFFF !important; margin: 0 0 40px; padding: 0 24px; }

/* Carrusel horizontal infinito: la lista de logos se imprime 2 veces (ver PHP)
   y se anima con translateX(-50%) en loop, para que escale bien sin importar
   cuántas marcas se agreguen a futuro (no hay que rediseñar el grid cada vez). */
.numartech-clients__viewport { position: relative; overflow: hidden; }
.numartech-clients__grid {
  display: flex; align-items: center; gap: 56px; width: max-content;
  animation: nt-clients-scroll 28s linear infinite;
}
.numartech-clients__viewport:hover .numartech-clients__grid,
.numartech-clients__viewport:focus-within .numartech-clients__grid { animation-play-state: paused; }
@keyframes nt-clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .numartech-clients__grid { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}
/* Capa semitransparente al frente, en ambos bordes, del mismo tono oscuro del
   fondo: difumina la entrada y salida de los logos en vez de que se corten
   de golpe. */
.numartech-clients__fade {
  position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.numartech-clients__fade--left { left: 0; background: linear-gradient(to right, #0E1730, rgba(14,23,48,0)); }
.numartech-clients__fade--right { right: 0; background: linear-gradient(to left, #0E1730, rgba(14,23,48,0)); }
@media (max-width: 600px) {
  .numartech-clients__fade { width: 40px; }
}
/* Logos flotando directamente sobre el fondo oscuro, sin tarjeta/borde
   (a diferencia del diseño anterior con chips). El chip de texto (mientras
   no haya logo, ej. BYD Inversiones) se mantiene sobrio, en blanco. */
.numartech-clients__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px; font-size: 20px; font-weight: 700; letter-spacing: .01em;
  color: #FFFFFF; white-space: nowrap;
}
.numartech-clients__logo--img img {
  max-width: 160px; max-height: 64px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(100%) brightness(1.6) contrast(.9);
}
@media (max-width: 600px) {
  .numartech-clients { padding: 40px 20px; }
  .numartech-clients__logo { height: 48px; font-size: 16px; }
  .numartech-clients__logo--img img { max-height: 48px; }
}

/* Quiénes Somos — sección "Tecnología respaldada por líderes globales" (aliados) */
.nt-about__partners { padding: 56px 24px; text-align: center; background: #EDF0F4; }
.nt-about__partners-inner {
  max-width: 960px; margin: 0 auto;
  /* Contenedor redondeado con sombra suave */
  background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(11,27,41,.08); padding: 44px 48px;
}
.nt-about__partners h2 { color: #294293; font-size: 28px; font-weight: 800; margin: 0 0 14px; }
.nt-about__partners > .nt-about__partners-inner > p { color: #3a3a3a; line-height: 1.7; margin: 0 0 28px; text-align: justify; }
.nt-about__partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nt-about__partner {
  display: inline-flex; align-items: center;
  padding: 10px 20px; background: #F5F7FA; border: 1px solid #E6EAF0; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: #294293;
}