/* ===================================================================================

* Theme Name: GrupoNexus
* Description: Tema hijo de GrupoNexus.
* Version: 1.0.0
* Template: creatim
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html

====================================================================================== */

/* GrupoNexus — el ícono de flecha de los botones circulares se ve mal en blanco
   sobre el verde de la marca (--theme). Lo pasamos a negro en todas sus variantes,
   sin tocar los casos donde el círculo ya es negro y el ícono blanco (esos quedan bien). */
.hero-1 .hero-list .arrow-icon,
.project-box-items .thumb .arrow-icon,
.project-box-items-2 .thumb .arrow-icon,
.project-box-items-3 .content-items .arrow-icon:hover,
.news-box-items-2 .content .arrow-icon:hover,
.hero-2 .hero-image .arrow-icon:hover {
  color: var(--header) !important;
}

/* GrupoNexus — la "caja" del menú (fondo oscuro sólido #220d0d) pasa a semitransparente.
   Mismo tratamiento en el buscador, "Get In Touch" y el botón de hamburguesa, que usan
   el mismo relleno sólido #220d0d con el truco de gradiente en el borde. */
.header-1 .header-main .main-menu,
.header-1 .header-right .search-toggler,
.header-1 .header-right .header-button .theme-btn,
.header-1 .header-right .header__hamburger .sidebar__toggle {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 16%,
      rgba(255, 255, 255, 0.2) 100%
    ) !important;
}

/* GrupoNexus — ocultar la imagen chica con el botón de video del hero. */
.hero-small-image {
  display: none !important;
}

/* GrupoNexus — la flechita circular verde de los botones "theme-btn" (header-bg /
   header-bg-2: "Get In Touch", "Conocé Más", etc.) también se ve mal en blanco;
   mismo criterio que el resto de los .arrow-icon: negra sobre verde. Cubre cualquier
   botón de este tipo en el sitio, no solo el del header. */
.theme-btn.header-bg .btn-arrow-left,
.theme-btn.header-bg .btn-arrow-right,
.theme-btn.header-bg-2 .btn-arrow-left,
.theme-btn.header-bg-2 .btn-arrow-right {
  color: var(--header) !important;
}

/* GrupoNexus — la cruz de cerrar del panel de info (offcanvas) es negra sobre un
   fondo oscuro y casi no se ve. La pasamos a verde. */
.offcanvas__close .fas,
.offcanvas__close span {
  color: var(--theme) !important;
}

/* GrupoNexus — el logo nuevo (PNG horizontal) no tenía límite de tamaño y se veía
   gigante: el theme no fija ancho/alto en .header-logo img (los SVG de la demo eran
   chicos de por sí). Lo acotamos a una altura prolija, ancho automático. */
.header-1 .logo .header-logo img,
.header-1 .logo .header-logo-2 img,
.offcanvas__wrapper .offcanvas__logo img,
.footer-logo img {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
}

/* GrupoNexus — la marquesina (texto gigante en loop) recortaba la tilde de la Ñ:
   line-height:1 + overflow:hidden en el contenedor no dejaban lugar para el acento.
   Le damos un poco más de aire vertical al texto, sin tocar el layout horizontal. */
.marquee-section .text {
  line-height: 1.25 !important;
}

/* GrupoNexus — separación entre líneas del panel de contacto, más compacta. */
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 14px !important;
}

/* GrupoNexus — el tema pone "Capitalize" en el texto de contacto (afecta emails
   y horarios, ej. "Correo@Gruponexus.Com.Ar"). Lo dejamos tal cual se escribe. */
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  text-transform: none !important;
}

/* GrupoNexus — el ícono de flecha de "Servicios" (círculo verde cuando el ítem está
   activo) tenía el mismo problema de blanco sobre verde. */
.service-list-items.active .service-title .icon,
.service-list-items-2.active .service-title .icon {
  color: var(--header) !important;
}

/* GrupoNexus — los "tags" bajo cada servicio ya no son links (apuntaban a "#").
   El PHP los renderiza como <span> ahora; les damos el mismo look que tenían como <a>. */
.service-list-items .list-tag,
.service-list-items-2 .list-tag {
  flex-wrap: wrap;
  row-gap: 10px;
}
/* al permitir que envuelvan en varias filas, el panel activo necesita más alto que
   los 100px fijos del tema (si no, corta la segunda fila de tags). */
.service-list-items.active .list-tag,
.service-list-items-2.active .list-tag {
  max-height: 220px !important;
}
.service-list-items .list-tag span,
.service-list-items-2 .list-tag span {
  display: inline-block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: "Geist", sans-serif;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .service-list-items .list-tag span,
  .service-list-items-2 .list-tag span {
    padding: 0 12px;
    font-size: 13px;
  }
}
.service-list-items .list-tag span:hover,
.service-list-items-2 .list-tag span:hover {
  background-color: var(--theme);
  color: var(--header);
}

/* GrupoNexus — las cajas de "Por qué nos eligen" venían en rosa (#fceeed) por defecto
   del tema; las pasamos a gris neutro. */
.choose-us-wrapper .choose-us-content .choose-list-items li {
  background-color: #f0f0f0 !important;
}

/* GrupoNexus — overlay de texto real sobre "Hero Image 2" (ej. Inmobilo): pretítulo,
   logo, título y botón pill con circulito de flecha, directo sobre la foto. Markup
   agregado a mano en creatim-core/.../banner-1.php (controles hero_image_2_overlay_*). */
.hero-image-2 {
  position: relative;
  overflow: hidden;
}
.gnx-hero-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 60px;
  /* alinea el texto con el borde izquierdo de la caja de 1200px del sitio, en vez
     de pegarlo al borde de la imagen (que es full-bleed, no respeta el container). */
  padding-left: max(30px, calc((100% - 1200px) / 2));
  padding-right: max(30px, calc((100% - 1200px) / 2));
  background: linear-gradient(90deg, rgba(5, 10, 7, 0.72) 0%, rgba(5, 10, 7, 0.5) 45%, rgba(5, 10, 7, 0.15) 100%);
}
.gnx-product-eyebrow {
  color: var(--white) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}
/* especificidad extra: el tema fuerza `.hero-image-2 img { width:100%; height:100% }`
   para la foto de fondo, y sin esto se lo aplicaba también al logo del overlay. */
.hero-image-2 .gnx-hero-image-overlay img.gnx-product-logo {
  width: 400px !important; /* 220px base +40%, +30% de nuevo */
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 26px;
}
.gnx-product-title {
  color: var(--white) !important;
  font-size: 2.4em; /* 1.2em previo x2 */
  margin-bottom: 56px !important;
}
.gnx-cta-pill-native,
.gnx-cta-pill .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: rgba(15, 15, 15, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 60px !important;
  padding: 6px 6px 6px 26px !important;
  text-decoration: none;
}
.gnx-cta-pill-text,
.gnx-cta-pill .elementor-button-text {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1;
}
.gnx-cta-pill-icon,
.gnx-cta-pill .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--theme);
  color: var(--header) !important;
  margin: 0 !important;
  line-height: 1;
}
.gnx-cta-pill-icon span,
.gnx-cta-pill .elementor-button-icon i {
  color: var(--header) !important;
  display: inline-flex;
}
.gnx-cta-pill-native:hover,
.gnx-cta-pill .elementor-button:hover {
  background-color: rgba(15, 15, 15, 0.85) !important;
}

/* GrupoNexus — en las tarjetas de "Proyectos destacados", el degradé oscuro que da
   legibilidad al título/tag (.thumb::before) se pinta ANTES que las dos imágenes en
   el orden del documento, así que sin z-index queda tapado apenas la imagen de hover
   (img:first-child) se pone opaca. Se sube el degradé por encima de las imágenes
   (pero por debajo del ícono de flecha, que ya usa z-index:99) para que no desaparezca. */
.project-box-items .thumb::before {
  z-index: 2;
  pointer-events: none;
}

/* GrupoNexus — la caja del título/año y el tag de cada tarjeta de proyecto eran
   blanco translúcido; con letra blanca encima quedaba con poco contraste. Pasan a
   negro translúcido para que el texto resalte más. */
.project-box-items .thumb .content-items {
  background: rgba(5, 8, 6, 0.38) !important;
}
.project-box-items .thumb .content-items .content .tag-items a {
  background: rgba(0, 0, 0, 0.28) !important;
}

/* GrupoNexus — el círculo con flecha del hover tenía z-index:99, igual que la caja
   del título (.content-items), y como la caja va después en el HTML terminaba encima
   del círculo cuando se pisaban. Se sube el círculo para que quede siempre arriba. */
.project-box-items .thumb .arrow-icon {
  z-index: 120 !important;
}
/* GrupoNexus — muro de clientes: filas de marquesina en gris oscuro sobre negro,
   alternando dirección (1ª hacia la derecha, 2ª hacia la izquierda, etc.).
   Markup en inc/clientes-marquee.php, animación/loop en assets/clientes-marquee.js. */
#clientes-marquee {
  background: #000;
  overflow: hidden;
  padding: 0;
}
#clientes-marquee > .e-con-inner {
  max-width: 100% !important;
  padding: 0;
}
#clientes-marquee .elementor-widget {
  width: 100%;
  margin: 0 !important;
}
.gnx-mq {
  --gnx-rows: 20;
  --gnx-h: 90vh;
  --gnx-row-h: calc(var(--gnx-h) / var(--gnx-rows));
  --gnx-mq-color: #3a3a3a;
  --gnx-mq-dot: #242424;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.gnx-mq__row {
  height: max(44px, var(--gnx-row-h));
  overflow: hidden;
}
.gnx-mq__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnx-mq__track li {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-right: 1.1em; /* separación entre nombres: ~4-5 espacios, sin punto */
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: clamp(16px, calc(var(--gnx-row-h) * 0.72), 46px);
  color: var(--gnx-mq-color);
  transition: color 0.25s ease;
}
.gnx-mq__track li:hover {
  color: var(--theme);
}
/* la animación arranca recién cuando el JS duplicó las filas (si no, se vería vacío) */
.gnx-mq.is-ready .gnx-mq__track {
  animation: gnx-mq-scroll var(--gnx-mq-dur, 240s) linear infinite;
  will-change: transform;
}
.gnx-mq.is-ready .gnx-mq__row:nth-child(odd) .gnx-mq__track {
  animation-direction: reverse; /* filas 1, 3, 5… hacia la derecha */
}
.gnx-mq.is-paused .gnx-mq__track { /* solo cuando el muro está fuera de pantalla; el hover NO frena nada */
  animation-play-state: paused;
}
@keyframes gnx-mq-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gnx-mq.is-ready .gnx-mq__track { animation: none; }
}

/* GrupoNexus — número gigante decorativo detrás del muro de clientes (ej. "+800").
   Gris intermedio entre el texto de las filas (#3a3a3a) y el fondo negro. El tamaño
   se limita por el ANCHO del muro (4 caracteres) y por su alto, para que siempre
   entre completo. Las filas van por encima (z-index 1). */
.gnx-mq {
  position: relative;
  --gnx-mq-big: #141414;
}
.gnx-mq__big {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  font-size: min(37vw, calc(var(--gnx-h) * 1.1));
  color: var(--gnx-mq-big);
  pointer-events: none;
  user-select: none;
}
.gnx-mq__row {
  position: relative;
  z-index: 1;
}

/* GrupoNexus — Geist no figura en la lista interna de fuentes de Elementor (y subir
   fuentes propias es de Elementor Pro), así que las fuentes globales del kit quedaban
   en Roboto / Roboto Slab, que usan los widgets NATIVOS (Heading, Text Editor, Button).
   Se pisan las variables del kit con Geist: cualquier widget nativo con la fuente en
   "Default" la hereda, sin tener que elegirla en Elementor. `body.elementor-kit-61`
   tiene más especificidad que `.elementor-kit-61`, donde el kit define las variables.
   (Si el kit activo cambia de ID, actualizar este selector.) */
body.elementor-kit-61 {
  --e-global-typography-primary-font-family: "Geist";
  --e-global-typography-secondary-font-family: "Geist";
  --e-global-typography-text-font-family: "Geist";
  --e-global-typography-accent-font-family: "Geist";
}

/* GrupoNexus — galería de portfolio ([gnx_portfolio]): cada trabajo en un marco de
   "ventana de navegador", filtros, hover que recorre la captura y vista ampliada.
   Markup en inc/portfolio-gallery.php, comportamiento en assets/portfolio-gallery.js. */
.gnx-pf {
  --gnx-pf-bg: #0a0a0a;
  --gnx-pf-line: #262626;
  --gnx-pf-muted: #8a8a8a;
  background: var(--gnx-pf-bg);
  color: #fff;
}
.gnx-pf__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.gnx-pf__head { margin-bottom: 34px; }
.gnx-pf__title {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 700;
}
.gnx-pf__lead { margin: 0; max-width: 640px; color: #9a9a9a; font-size: 18px; line-height: 1.5; }

.gnx-pf__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.gnx-pf__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.gnx-pf__chip {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 40px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gnx-pf__chip span { opacity: 0.55; margin-left: 4px; font-weight: 500; }
.gnx-pf__chip:hover { background: rgba(255, 255, 255, 0.16); }
.gnx-pf__chip.is-active { background: var(--theme); color: #000; }
.gnx-pf__year select {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #dcdcdc;
  background: #141414;
  border: 1px solid var(--gnx-pf-line);
  border-radius: 40px;
  padding: 9px 16px;
  cursor: pointer;
}
.gnx-pf__status { min-height: 22px; margin: 0 0 18px; color: var(--gnx-pf-muted); font-size: 14px; }

.gnx-pf__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 34px 28px;
}
.gnx-pf__item[hidden] { display: none; }
.gnx-pf__card { display: block; color: inherit; text-decoration: none; }

/* marco de "ventana de navegador" */
.gnx-pf__frame {
  border: 1px solid var(--gnx-pf-line);
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gnx-pf__card:hover .gnx-pf__frame,
.gnx-pf__card:focus-visible .gnx-pf__frame {
  border-color: var(--theme);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px -14px rgba(125, 255, 59, 0.3);
}
.gnx-pf__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  background: #181818;
  border-bottom: 1px solid var(--gnx-pf-line);
}
.gnx-pf__dots { display: inline-flex; gap: 6px; flex: none; }
.gnx-pf__dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.gnx-pf__dots i:last-child { background: var(--theme); }
.gnx-pf__addr {
  flex: 1;
  min-width: 0;
  padding: 4px 12px;
  border-radius: 20px;
  background: #0b0b0b;
  color: var(--gnx-pf-muted);
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gnx-pf__shot { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.gnx-pf__shot img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s ease;
  will-change: transform;
}
/* al pasar el mouse, la captura larga se recorre de arriba a abajo */
.gnx-pf__card:hover .is-scrollable img,
.gnx-pf__card:focus-visible .is-scrollable img,
.gnx-pf__card.is-playing .is-scrollable img { /* .is-playing: lo agrega el JS en celulares */
  transform: translateY(calc(var(--gnx-dy) * -1));
  transition: transform var(--gnx-dur, 6s) linear;
}
.gnx-pf__cap { padding: 14px 4px 0; }
.gnx-pf__cap h3 { margin: 0 0 4px; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.25; }
.gnx-pf__cap p { margin: 0; color: var(--gnx-pf-muted); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }

/* vista ampliada */
html.gnx-pf-lock { overflow: hidden; }
.gnx-pf__lb[hidden] { display: none; }
.gnx-pf__lb { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.gnx-pf__lb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(4px); }
.gnx-pf__lb-panel { position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); height: 100%; max-height: 94vh; }
.gnx-pf__lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.gnx-pf__lb-text { min-width: 0; }
.gnx-pf__lb-head h3 { margin: 0; color: #fff; font-size: 22px; font-weight: 600; }
.gnx-pf__lb-meta { margin: 2px 0 0; color: var(--gnx-pf-muted); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.gnx-pf__lb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.gnx-pf__visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 40px;
  background: var(--theme);
  color: #000 !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.gnx-pf__visit[hidden] { display: none; }
.gnx-pf__round {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 50%;
  background: #141414;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.gnx-pf__round:hover { border-color: var(--theme); color: var(--theme); }
.gnx-pf__lb-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; transform: none !important; }
.gnx-pf__lb-scroll { flex: 1; overflow: auto; background: #fff; }
.gnx-pf__lb-scroll img { display: block; width: 100%; height: auto; }

@media (max-width: 575px) {
  .gnx-pf__inner { padding: 0 20px; }
  .gnx-pf__lb-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .gnx-pf__shot img, .gnx-pf__frame { transition: none !important; }
}
#portfolio > .e-con-inner { max-width: 100% !important; padding: 0; }
#portfolio .elementor-widget { width: 100%; margin: 0 !important; }

/* GrupoNexus — portfolio: colores por variable, para poder probar fondo claro
   ([gnx_portfolio tema="claro"] o ?tema=claro en la URL). La vista ampliada (.gnx-pf__lb)
   queda siempre oscura, aunque viva en <body>. */
.gnx-pf,
.gnx-pf__lb {
  --gnx-pf-bg: #0a0a0a;
  --gnx-pf-line: #262626;
  --gnx-pf-muted: #8a8a8a;
  --gnx-pf-fg: #fff;
  --gnx-pf-lead: #9a9a9a;
  --gnx-pf-chip-bg: rgba(255, 255, 255, 0.08);
  --gnx-pf-chip-bg-h: rgba(255, 255, 255, 0.16);
  --gnx-pf-chip-fg: #cfcfcf;
  --gnx-pf-frame: #111;
  --gnx-pf-bar: #181818;
  --gnx-pf-dot: #3a3a3a;
  --gnx-pf-addr: #0b0b0b;
  --gnx-pf-select: #141414;
  --gnx-pf-select-fg: #dcdcdc;
}
.gnx-pf { color: var(--gnx-pf-fg); }
.gnx-pf__title,
.gnx-pf__cap h3 { color: var(--gnx-pf-fg); }
.gnx-pf__lead { color: var(--gnx-pf-lead); }
.gnx-pf__chip { color: var(--gnx-pf-chip-fg); background: var(--gnx-pf-chip-bg); }
.gnx-pf__chip:hover { background: var(--gnx-pf-chip-bg-h); }
.gnx-pf__chip.is-active,
.gnx-pf__chip.is-active:hover { background: var(--theme); color: #000; }
.gnx-pf__year select { background: var(--gnx-pf-select); color: var(--gnx-pf-select-fg); border-color: var(--gnx-pf-line); }
.gnx-pf__frame { background: var(--gnx-pf-frame); }
.gnx-pf__bar { background: var(--gnx-pf-bar); }
.gnx-pf__dots i { background: var(--gnx-pf-dot); }
.gnx-pf__dots i:last-child { background: var(--theme); }
.gnx-pf__addr { background: var(--gnx-pf-addr); }

.gnx-pf.gnx-pf--light {
  --gnx-pf-bg: #fff;
  --gnx-pf-line: #e2e2e2;
  --gnx-pf-muted: #6f6f6f;
  --gnx-pf-fg: #0d0d0d;
  --gnx-pf-lead: #5c5c5c;
  --gnx-pf-chip-bg: rgba(0, 0, 0, 0.06);
  --gnx-pf-chip-bg-h: rgba(0, 0, 0, 0.12);
  --gnx-pf-chip-fg: #2a2a2a;
  --gnx-pf-frame: #f3f3f3;
  --gnx-pf-bar: #ececec;
  --gnx-pf-dot: #cfcfcf;
  --gnx-pf-addr: #fff;
  --gnx-pf-select: #fff;
  --gnx-pf-select-fg: #222;
}
.gnx-pf--light .gnx-pf__card:hover .gnx-pf__frame,
.gnx-pf--light .gnx-pf__card:focus-visible .gnx-pf__frame { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.3); }
#portfolio:has(.gnx-pf--light) { background: #fff !important; }

/* GrupoNexus — contenedor de la galería en la página /portfolio/ (id portfolio-content):
   a todo el ancho, sin el padding lateral del contenedor boxed de Elementor. */
#portfolio-content > .e-con-inner { max-width: 100% !important; padding: 0; }
#portfolio-content .elementor-widget { width: 100%; margin: 0 !important; }

/* GrupoNexus — portfolio: botón "Ver más trabajos" (paginación de la galería). */
.gnx-pf__morewrap { display: flex; justify-content: center; margin-top: 46px; }
.gnx-pf__more {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--gnx-pf-fg);
  background: var(--gnx-pf-chip-bg);
  border: 1px solid var(--gnx-pf-line);
  border-radius: 40px;
  padding: 14px 30px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gnx-pf__more:hover { background: var(--theme); border-color: var(--theme); color: #000; }
.gnx-pf__more[hidden] { display: none; }

/* GrupoNexus — carrusel de logos de clientes (brand-3 / about-3): tamaño parejo, cinta continua y alt real */
.brand-slider .brand-box-1 .brand-img-1 img{width:auto;height:auto;max-width:78%;max-height:62px;object-fit:contain;opacity:.62}
.brand-slider .brand-box-1:hover .brand-img-1:last-child img{opacity:1}
.brand-slider.is-linear .swiper-wrapper{transition-timing-function:linear !important}

/* GrupoNexus — trail de logos (about-4): logos 30% más chicos (278x207 → 195x145) y sección a pantalla completa */
.branding-section.image-trail-animation .image-trail-images{width:195px;height:145px}
.branding-section.image-trail-animation{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* GrupoNexus — fondo del trail (about-4): red de nodos + cinta de años 1997→2027 (assets/nexus-bg.js) */
.branding-section.image-trail-animation{isolation:isolate}
.branding-section.image-trail-animation .gnx-net{position:absolute;left:0;top:0;z-index:-1;pointer-events:none}
.branding-section.image-trail-animation .gnx-years{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:-2;overflow:hidden;pointer-events:none;user-select:none}
.gnx-years__track{display:flex;width:max-content;gap:.55em;font-family:"Geist",sans-serif;font-weight:700;font-size:clamp(150px,36vh,420px);line-height:1;letter-spacing:-.03em;animation:gnx-years-run 600s linear infinite;will-change:transform}
.gnx-years__track span{color:transparent;-webkit-text-stroke:1px #1f1f1f}
.gnx-years__track span.is-now{-webkit-text-stroke:1px rgba(125,255,59,.38)}
.gnx-offscreen .gnx-years__track{animation-play-state:paused}
@keyframes gnx-years-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gnx-years__track{animation:none}}

/* GrupoNexus — "bajada" (párrafo bajo el título del trail): 30px, blanca, entra sube+enfoca (assets/nexus-bg.js) */
.branding-section .section-title-2 .bajada{display:block;max-width:780px;margin:34px auto 0;font-size:30px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:#fff}
.branding-section .section-title-2 .bajada::before{content:"";display:block;width:48px;height:2px;margin:0 auto 18px;background:#7DFF3B;transition:width .9s cubic-bezier(.2,.7,.2,1) .15s}
.gnx-bajada-armed .bajada{opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1),filter 1s ease}
.gnx-bajada-armed .bajada.is-in{opacity:1;transform:none;filter:none}
.gnx-bajada-armed .bajada::before{width:0}
.gnx-bajada-armed .bajada.is-in::before{width:48px}
@media (max-width:767px){.branding-section .section-title-2 .bajada{font-size:22px;margin-top:22px}}

/* GrupoNexus — punto verde (green-dot.webp): siempre 16x16, donde se use */
img[src*="green-dot"]{width:16px !important;height:16px !important;max-width:none !important;object-fit:contain;vertical-align:middle}

/* GrupoNexus — sección Acción Social (shortcode [gnx_accion_social], inc/accion-social.php) */
.gnx-as{background:#000;padding:120px 0 130px;position:relative}
.gnx-as__head{text-align:center;margin-bottom:64px}
.gnx-as__intro{max-width:760px;margin:28px auto 0;color:#fff;font-size:22px;line-height:1.5}
.gnx-as__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gnx-as__card{position:relative;grid-column:span 1;display:flex;flex-direction:column;background:#0a0a0a;border:0;border-radius:20px;overflow:hidden;transition:transform .3s ease,opacity .8s ease}
/* Borde que sigue al puntero: dos anillos de 1px (base gris + verde con foco radial en --mx/--my), assets/accion-social.js */
.gnx-as__card::before,.gnx-as__card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gnx-as__card::after{z-index:3;background:#1f1f1f}
.gnx-as__card::before{z-index:4;padding:2px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#7DFF3B 0,rgba(125,255,59,.55) 35%,rgba(125,255,59,0) 72%);opacity:0;transition:opacity .35s ease}
.gnx-as__card:hover::before{opacity:1}
.gnx-as__card:hover{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(125,255,59,.07),rgba(125,255,59,0) 65%),#0a0a0a}
.gnx-as__card.is-wide{grid-column:span 2}
.gnx-as__card.is-wide.has-img{flex-direction:row}
.gnx-as__card.is-wide.has-img .gnx-as__media{flex:0 0 46%;aspect-ratio:auto;min-height:100%}
.gnx-as__card.is-wide.has-img.is-stack{flex-direction:column}
.gnx-as__card.is-wide.has-img.is-stack .gnx-as__media{flex:none;aspect-ratio:900/473;min-height:0}
.gnx-as__media{margin:0;aspect-ratio:16/10;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gnx-as__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gnx-as__card:hover .gnx-as__media.is-cover img{transform:scale(1.04)}
.gnx-as__media.is-contain{background:#f4f4f2}
.gnx-as__media.is-contain img{object-fit:contain;padding:14px}
.gnx-as__media.is-white{background:#fff}
.gnx-as__media.is-white img{object-fit:contain;padding:24px}
.gnx-as__media.is-logo{background:#fff}
.gnx-as__media.is-logo img{width:143px;height:143px;object-fit:contain}
.gnx-as__body{display:flex;flex-direction:column;flex:1;padding:30px 30px 32px}
.gnx-as__tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7DFF3B;border:1px solid rgba(125,255,59,.4);border-radius:999px;padding:5px 12px;margin-bottom:20px}
.gnx-as__stat{margin:0 0 14px;display:flex;flex-direction:column;gap:2px}
.gnx-as__stat strong{font-size:clamp(40px,4.4vw,64px);line-height:1;font-weight:700;letter-spacing:-.02em;color:#7DFF3B}
.gnx-as__stat span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.gnx-as__card.is-wide.no-img .gnx-as__stat strong{font-size:clamp(64px,9vw,120px)}
.gnx-as__title{margin:0 0 12px;font-size:26px;line-height:1.2;font-weight:600;color:#fff}
.gnx-as__text{margin:0 0 20px;font-size:16px;line-height:1.65;color:#b9b9b9}
.gnx-as__who{margin:auto 0 0;font-size:14px;color:#7a7a7a;display:flex;align-items:center;gap:8px}
.gnx-as__who::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#7DFF3B}
.gnx-as__link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:15px;font-weight:600;color:#7DFF3B;text-decoration:none}
.gnx-as__link::after{content:"";position:absolute;inset:0;z-index:1}
.gnx-as__link:hover,.gnx-as__link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.gnx-as__card.is-link{position:relative;cursor:pointer}
.gnx-as__cta{margin:56px 0 0;text-align:center;font-size:18px;color:#b9b9b9}
.gnx-as__cta a{color:#7DFF3B;text-decoration:underline;text-underline-offset:4px}
.gnx-as-anim .gnx-as__card{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.gnx-as-anim .gnx-as__card.is-in{opacity:1;transform:none}
@media (max-width:991px){
	.gnx-as{padding:90px 0 100px}
	.gnx-as__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.gnx-as__intro{font-size:20px}
}
@media (max-width:640px){
	.gnx-as__grid{grid-template-columns:minmax(0,1fr)}
	.gnx-as__card.is-wide{grid-column:span 1}
	.gnx-as__card.is-wide.has-img{flex-direction:column}
	.gnx-as__card.is-wide.has-img .gnx-as__media{flex:none;aspect-ratio:16/10;min-height:0}
	.gnx-as__body{padding:24px 22px 26px}
}
.gnx-as .screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* GrupoNexus — menú sticky (cuando el header se fija al hacer scroll): fondo verde #7DFF3B,
   logo con texto negro y círculo blanco (logo_dark del widget header-1), menú sin "caja" y
   botones redondos (buscador / hamburguesa) en negro. */
.sticky.header-1 {
  background: #7DFF3B !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sticky.header-1 .header-main .main-menu {
  background-image: none !important;
  border-color: transparent;
}
.sticky.header-1 .header-main .main-menu ul li a,
.sticky.header-1 .header-main .main-menu ul li:hover > a {
  color: #000 !important;
}
.sticky.header-1 .header-main .main-menu ul li:hover > a {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.sticky.header-1 .header-right .search-toggler,
.sticky.header-1 .header-right .header__hamburger .sidebar__toggle {
  background-image: linear-gradient(#000, #000) !important;
}

/* GrupoNexus — páginas de texto legal (Política de privacidad / Términos y condiciones): columna angosta, legible, en Geist */
.gnx-legal{max-width:820px;margin:0 auto;font-family:"Geist",sans-serif;font-size:17px;line-height:1.75;color:#1c1c1c}
.gnx-legal__updated{display:inline-block;margin:0 0 28px;padding:6px 14px;border:1px solid #d9d9d9;border-radius:999px;font-size:13px;color:#555}
.gnx-legal h2{margin:44px 0 14px;font-size:26px;line-height:1.25;font-weight:600;color:#000}
.gnx-legal p{margin:0 0 16px}
.gnx-legal ul{margin:0 0 20px;padding-left:22px}
.gnx-legal li{margin-bottom:8px}
.gnx-legal a{color:#000;text-decoration:underline;text-decoration-color:#7DFF3B;text-decoration-thickness:2px;text-underline-offset:3px}
.gnx-legal a:hover{background:#7DFF3B}
@media (max-width:575px){.gnx-legal{font-size:16px}.gnx-legal h2{font-size:22px;margin-top:34px}}

/* GrupoNexus — hero de páginas internas: el tema lo deja 80px más abajo (pensado para un header blanco); con el header
   transparente del sitio quedaba una franja blanca arriba y el logo/menú blancos se perdían. */
.breadcrumb-wrapper{margin-top:0}

/* GrupoNexus — ocultar el botón circular "Play our promotional video" del hero de banner-4 (Servicios y demos). */
.hero-section-4 .video-icon{display:none !important}
/* GrupoNexus — ocultar la columna de redes sociales (Facebook/Instagram/Twitter/LinkedIn) del hero de banner-4. */
.hero-section-4 .social-icon{display:none !important}
.pin-spacer:has(> .hero-4){padding:0 !important;height:auto !important;min-height:0 !important}

/* GrupoNexus — hero de banner-4 a pantalla completa (100vh), contenido centrado verticalmente. */
.hero-section-4.hero-4{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero-section-4.hero-4 > .container{width:100%}
@media (min-width:992px){.hero-section-4.hero-4{padding-top:110px;padding-bottom:70px}}

/* GrupoNexus — bloque de título con foto propia (ver functions.php, clase body gnx-has-hero-photo):
   el overlay general es negro sólido #050806 para tapar la imagen genérica del tema; acá, con foto
   real, se aclara a semitransparente para que la foto se vea y el título siga siendo legible. */
.gnx-has-hero-photo .breadcrumb-wrapper::before {
  background: rgba(5, 8, 6, 0.55) !important;
}

/* GrupoNexus — pills de tags reutilizables (misma línea que .list-tag de Servicios, versión
   para fondo claro): widget HTML `.gnx-tags` insertado bajo un párrafo/heading de intro. */
.gnx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.gnx-tags span {
  display: inline-block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: "Geist", sans-serif;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 40px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.gnx-tags span:hover {
  background-color: var(--theme);
  color: var(--header);
}
@media (max-width: 575px) {
  .gnx-tags span {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* GrupoNexus — caso de éxito Quebrada del Condorito: el bloque de servicios (service-6) que sigue
   al párrafo de intro traía 140px de padding superior (clase genérica .section-padding); -30% acá. */
.elementor-element-b6f79f8 .service-section-5 {
  padding-top: 98px !important;
}

/* GrupoNexus — caso de éxito Quebrada del Condorito (service-6, id b6f79f8): tarjetas con fondo
   gris en vez del rosa del tema. */
.elementor-element-b6f79f8 .services-main-card-items-5.style-2 {
  background-color: #f0f0f0 !important;
}

/* Las 3 tarjetas llevan foto real, no un ícono: que ocupen todo el ancho de la tarjeta en vez
   del círculo verde de 90px pensado para íconos SVG (aplica a las 3, aunque hoy solo la primera
   tenga foto puesta; las otras dos van a llevar foto también). */
.elementor-element-b6f79f8 .top-content {
  display: block !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
.elementor-element-b6f79f8 .bottom-content {
  padding-top: 40px !important;
}
.elementor-element-b6f79f8 .icon {
  width: 100% !important;
  height: auto !important;
  line-height: normal !important;
  text-align: left !important;
  border-radius: 0 !important;
  background: none !important;
  display: block !important;
  overflow: hidden !important; /* la foto no se sale del recuadro al hacer zoom en hover */
}
.elementor-element-b6f79f8 .icon img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  filter: none !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.5s ease !important;
}
/* El hover de fábrica de esta tarjeta hace "temblar" el ícono (animation: jello), pensado para
   un ícono chico; sobre una foto grande queda raro y se sale del recuadro. Se cambia por un
   zoom suave y contenido (overflow:hidden arriba, en el recuadro que envuelve la foto). */
.elementor-element-b6f79f8 .services-main-card-items-5.style-2:hover .icon img {
  animation: none !important;
  transform: scale(1.06);
}

/* "Read more" (texto de relleno del tema): sacado de las 3 tarjetas, no hay página de destino
   para cada una todavía. */
.elementor-element-b6f79f8 .service-btn {
  display: none !important;
}

/* Las 3 tarjetas quedaban de distinto alto porque la caja de la tarjeta no llenaba la columna
   (Bootstrap ya estira las columnas parejo; faltaba que la tarjeta ocupe el 100% de esa columna). */
.elementor-element-b6f79f8 .services-main-card-items-5.style-2 {
  height: 100%;
}

/* GrupoNexus — caso de éxito Quebrada del Condorito: el círculo central (ft-video-2, id 5f84667)
   linkea al sitio real del parque, no a un video: sin borde exterior, ícono de flecha en vez de
   play, y la imagen que gira un poco más grande. El "abrir en pestaña nueva sin modal" va en
   assets/quebrada-video-link.js (el click en .video-popup lo intercepta un popup de video). */
.elementor-element-5f84667 .video-icon.style-2 {
  border: 0 !important;
}
.elementor-element-5f84667 .video-text img {
  transform: scale(1.2);
}

/* Casos de éxito (Quebrada del Condorito, Soluciones web para entidades, Hotel Alpre): se
   esconde la línea "(Home . ...)" bajo el título; el título grande y la foto de fondo quedan
   igual. Agregar acá el "page-id-N" de cada caso de éxito nuevo. */
.page-id-2372 .breadcrumb-wrapper .breadcrumb-items,
.page-id-2440 .breadcrumb-wrapper .breadcrumb-items,
.page-id-2467 .breadcrumb-wrapper .breadcrumb-items {
  display: none;
}

/* GrupoNexus — "Soluciones web para entidades" (project-2, id 7a297c6): tarjetas de entidades.
   1) se esconde el año "[ 2026 ]" (el plugin lo pone SIEMPRE con ese valor por defecto si el
   campo está vacío, así que no alcanza con dejarlo en blanco: hay que ocultarlo por CSS).
   2) descripción debajo del título (campo nuevo "description" agregado al repeater en
   creatim-core/.../project-2.php, se renderiza como <p class="project-description">).
   3) la foto ya no hace el efecto de distorsión de fábrica (dos copias de la imagen que se
      cruzan con blur al hacer hover); en su lugar recorre la captura completa de la web de
      arriba a abajo, igual que en el portfolio (ver assets/entidades-scrollshot.js). */
.elementor-element-7a297c6 .year-text {
  display: none !important;
}
.elementor-element-7a297c6 .content-items .content .title {
  padding-right: 0;
}
.elementor-element-7a297c6 .project-description {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}
.elementor-element-7a297c6 .gnx-scrollshot {
  display: flex;
  flex-direction: column;
  background: #f4f4f2;
  border: 2px solid #d9d9d4;
}
/* barrita tipo navegador (como el marco del portfolio): 3 puntos + la dirección real del sitio */
.elementor-element-7a297c6 .gnx-scrollshot__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  flex: none;
  padding: 0 14px;
  background: #e9e9e6;
  border-bottom: 1px solid #dcdcd8;
}
.elementor-element-7a297c6 .gnx-scrollshot__dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.elementor-element-7a297c6 .gnx-scrollshot__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfcfc9;
}
.elementor-element-7a297c6 .gnx-scrollshot__dots i:last-child {
  background: var(--theme);
}
.elementor-element-7a297c6 .gnx-scrollshot__addr {
  flex: 1;
  min-width: 0;
  padding: 4px 12px;
  border-radius: 20px;
  background: #fff;
  color: #6f6f6f;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* la "ventana" recorta la captura: el marco fijo (325px, -30% de los 464px originales) es lo
   que hace que sobre imagen para recorrer con el mouse. OJO: iba con "flex: 1" (flex-basis 0%),
   y en un contenedor flex de alto automático (sin altura propia, como este) un ítem con
   flex-grow no tiene "espacio libre" para crecer y termina midiendo el alto de su contenido en
   vez del alto fijo — se veía bien SOLO cuando el thumb tenía una altura fija por otro lado (ej.
   la media query del tema por debajo de 1199px, como al abrir las herramientas de desarrollador
   y angostar la ventana), y se rompía en pantalla completa. Con "flex: none" el alto fijo manda
   siempre, sin depender de eso. */
.elementor-element-7a297c6 .gnx-scrollshot__window {
  position: relative;
  flex: none;
  height: 325px !important;
  overflow: hidden;
}
.elementor-element-7a297c6 .gnx-scrollshot__img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  /* SIN min-height/object-fit: con eso, una web corta (más ancha que alta, como CPRSM) no
     llegaba a llenar la ventana y se estiraba recortando los costados para tapar el hueco —
     se veía "cortada en el ancho". Así, una web corta deja un poco de fondo vacío abajo (nada
     grave) en vez de perder los bordes; una web larga sigue recortándose por abajo (por el
     overflow:hidden de la ventana) como corresponde. */
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) !important;
  transition: transform var(--gnx-dur, 6s) linear !important; /* el tema pone "transition: all
    500ms ease" en `.thumb img`, y por tener también un elemento en el selector le ganaba a esta
    regla en especificidad — el recorrido se veía siempre a 500ms, muy rápido. */
  will-change: transform;
}
.elementor-element-7a297c6 .gnx-scrollshot.is-scrollable:hover .gnx-scrollshot__img {
  transform: translateY(calc(var(--gnx-dy, 0px) * -1)) !important;
}
.elementor-element-7a297c6 .arrow-icon {
  top: 50% !important;
  left: 50% !important;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-element-7a297c6 .gnx-scrollshot__img {
    transition: none !important;
  }
}

/* GrupoNexus — entidades: se prueba un esquema nuevo, un proyecto por fila, a todo el ancho,
   con la captura a la izquierda y el texto a la derecha (en vez de dos columnas de tarjetas
   apiladas). El widget arma dos columnas de Bootstrap (mitad de los ítems en cada una, para un
   masonry de dos columnas); acá se las fuerza a 100% de ancho para que se apilen una debajo de
   la otra — como la primera columna trae los ítems 1..n/2 y la segunda n/2+1..n, apiladas así
   el orden final queda igual que el orden cargado en Elementor. */
.elementor-element-7a297c6 .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important; /* Bootstrap 5 usa "width: 50%" (no max-width) para .col-xl-6 y
    similares; sin pisar width quedaba encajado en la mitad izquierda del container. */
}
.elementor-element-7a297c6 .project-box-items-2 {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 110px !important;
  max-width: none !important; /* el tema trae "max-width: 750px" (pensado para el esquema viejo
    de 2 columnas angostas); con la columna ya a 100%, esto era lo que seguía achicando la
    tarjeta y, sumado al "margin-left:auto" de .style-auto, la corría toda a un lado. */
}
.elementor-element-7a297c6 .project-box-items-2.style-auto {
  margin-left: 0 !important;
}
.elementor-element-7a297c6 .project-box-items-2 .thumb {
  flex: 0 0 46%;
  max-width: 46%;
}
.elementor-element-7a297c6 .project-box-items-2 .content-items {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  display: block;
}
.elementor-element-7a297c6 .project-box-items-2 .content-items .content {
  max-width: none;
}
@media (max-width: 767px) {
  .elementor-element-7a297c6 .project-box-items-2 {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 40px !important;
  }
  .elementor-element-7a297c6 .project-box-items-2 .thumb {
    flex: none;
    max-width: 100%;
  }
}

/* GrupoNexus — Hotel Alpre: el video propio (autohospedado, hotel-alpre-fondo.mp4) va en el
   contenedor de más abajo (antes ft-video-2, ahora un widget "html"), centrado en vertical
   sobre fondo negro. La foto del dron con su botón de play quedó como estaba, sin video. */
.page-id-2467 .gnx-short {
  display: flex;
  justify-content: center;
  padding: 90px 20px;
  background: #000;
}
.page-id-2467 .gnx-short__frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.page-id-2467 .gnx-short__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bajada chica bajo el título (about-7, campo nuevo title_bajada). */
.gnx-title-bajada {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
}

/* GrupoNexus — Hotel Alpre: el user arma a mano (con los nuevos Flexbox "atómicos" de Elementor)
   un encabezado de 2 celdas — título a un lado, el video de fondo en la celda marcada "AQUI!!!!"
   (widget html id 471dec2) — en vez de usar el widget about-7 de más abajo. El video llena toda
   la celda (cover), sin bordes, con un alto mínimo por si la celda no tiene altura propia todavía. */
.page-id-2467 .elementor-element-d431ce5 {
  align-items: stretch;
}
.page-id-2467 .elementor-element-471dec2,
.page-id-2467 .elementor-element-471dec2 .elementor-widget-container {
  height: 100%;
}
.page-id-2467 .gnx-bgvideo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}
.page-id-2467 .gnx-bgvideo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GrupoNexus — Hotel Alpre: se borró un contenedor demo entero (banner-5, "Hero image" + un
   link con una flecha suelta sin texto) que había quedado entre el encabezado nuevo y la
   sección de features. Sin eso, el padding superior de "features-section-5" (140px, la clase
   genérica .section-padding del tema) quedaba con demasiado aire; se lo baja a la mitad. */
.page-id-2467 .elementor-element-c12716e .features-section-5 {
  padding-top: 70px;
}
@media (max-width: 1199px) {
  .page-id-2467 .elementor-element-c12716e .features-section-5 {
    padding-top: 50px;
  }
}

/* GrupoNexus — Hotel Alpre: se restauró la "Hero image" (banner-5, tiene el efecto
   xb-clip-animation que le gustó al user). El link vacío (una flecha sin texto, el widget lo
   renderiza igual porque su link de botón trae "#" por defecto aunque no haya texto de botón)
   estaba adentro de ".hero-bottom", que sin "info-item" ni texto sigue de pie con
   margin-top/bottom de 115px cada uno (230px en total) porque el tema los usa como separador
   entre el título y ese bloque — con todo vacío, quedan como aire muerto. Se esconde
   ".hero-bottom" entero en vez de solo ".content". */
.page-id-2467 .elementor-element-8d559ed .hero-bottom {
  display: none;
}

/* El espacio en blanco arriba de la "Hero image" es el padding-top de .hero-5 (180px, pensado
   para un título grande que acá está vacío); se reduce un 70% (queda en el 30%). */
.page-id-2467 .elementor-element-8d559ed .hero-5 {
  padding-top: 54px !important;
}
@media (max-width: 1600px) {
  .page-id-2467 .elementor-element-8d559ed .hero-5 {
    padding-top: 45px !important;
  }
}

/* GrupoNexus — Hotel Alpre, sección de 4 tarjetas (feature_3, id c12716e): se saca el ícono
   circular rojo de arriba en las 4 (y el espacio que dejaba libre para él). Las primeras 3
   ("Sitio web", "Fotografía", "Identidad y gráfica") llevan foto real de fondo en vez del rosa;
   la 4ª queda pendiente. El barrido a negro en hover (::before, del tema) sigue igual — queda
   por encima de la foto y por debajo del texto. */
.page-id-2467 .elementor-element-c12716e .icon {
  display: none;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content {
  margin-top: 0;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 {
  height: 360px; /* alto fijo e igual para las 4, con o sin foto de fondo */
  box-sizing: border-box;
}
.page-id-2467 .elementor-element-c12716e .row > div:nth-child(1) .feature-card-items-5 {
  background-image: url('http://localhost/gruponexus30/wp-content/uploads/2026/09/reservas-hotel-alpre.webp') !important;
}
.page-id-2467 .elementor-element-c12716e .row > div:nth-child(2) .feature-card-items-5 {
  background-image: url('http://localhost/gruponexus30/wp-content/uploads/2026/09/sesion-fotografia-hotel-alpre.webp') !important;
}
.page-id-2467 .elementor-element-c12716e .row > div:nth-child(3) .feature-card-items-5 {
  background-image: url('http://localhost/gruponexus30/wp-content/uploads/2026/09/grafica-hotel-alpre.webp') !important;
}
.page-id-2467 .elementor-element-c12716e .row > div:nth-child(4) .feature-card-items-5 {
  background-image: url('http://localhost/gruponexus30/wp-content/uploads/2026/09/redes-sociales-hotel-alpre.webp') !important;
}
/* las 4 ya llevan foto, así que estas reglas compartidas van sin restringir por nth-child */
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content h3 {
  position: relative;
  z-index: 9;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content {
  position: relative; /* para que el párrafo (position:absolute) tenga de dónde colgarse */
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content p {
  /* el texto es largo (varias líneas); en flujo normal empujaba la tarjeta a más de 900px de
     alto aun estando invisible. Con position:absolute deja de "ocupar lugar": la tarjeta
     puede volver a una altura prolija y el texto se superpone a la foto solo al mostrarse. */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 10px !important;
  z-index: 9;
  opacity: 0 !important; /* en reposo, invisible */
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: opacity 0.35s ease;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5:hover .content p {
  opacity: 1 !important; /* en hover, blanco de lleno (no el 0.8 que deja el tema por defecto) */
}

/* GrupoNexus — Home, "Por qué nos eligen": el video (feature-1 › video_file) ocupa el mismo lugar
   que la foto; la foto queda como póster hasta que el video carga. */
.choose-us-wrapper .choose-us-image:has(video) {
  height: auto; /* el alto lo da el propio video (sin recorte), no los 727px fijos del tema */
}
.choose-us-wrapper .choose-us-image video {
  width: 100%;
  height: auto;
  aspect-ratio: 1072 / 1184; /* proporción real del video: se ve completo y el póster ocupa el mismo lugar */
  object-fit: contain;
  display: block;
}

/* GrupoNexus — Home, "Por qué nos eligen": fondo #FBFBFB. */
.choose-us-section {
  background-color: #FBFBFB;
}

/* GrupoNexus — Home, "Por qué nos eligen": cajas de la derecha más juntas (30px → 12px). */
.choose-us-wrapper .choose-us-content .choose-list-items li:not(:last-child) {
  margin-bottom: 12px;
}

/* GrupoNexus — Home, "Por qué nos eligen": 10% menos de relleno vertical en cada caja (30px → 27px). */
.choose-us-wrapper .choose-us-content .choose-list-items li {
  padding-top: 27px;
  padding-bottom: 27px;
}
@media (max-width: 575px) {
  .choose-us-wrapper .choose-us-content .choose-list-items li {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

/* GrupoNexus — Servicios: más aire arriba de "MUCHO MÁS QUE UNA WEB" (el hero es 100vh con el
   contenido centrado, así que el relleno superior lo baja un poco). */
@media (min-width: 992px) {
  .page-id-2018 .hero-section-4.hero-4 {
    padding-top: 200px;
  }
}
@media (max-width: 991px) {
  .page-id-2018 .hero-section-4.hero-4 {
    padding-top: 190px;
  }
}

/* GrupoNexus — Servicios: más separación entre el título y la bajada "Diseñamos marcas…". */
.page-id-2018 .hero-4 .hero-content p {
  margin-top: 300px;
}
@media (max-width: 1399px) {
  .page-id-2018 .hero-4 .hero-content p {
    margin-top: 60px;
  }
}

/* GrupoNexus — Servicios: la bajada va pegada directamente debajo del título (pisa los
   márgenes de arriba, que la separaban). */
.page-id-2018 .hero-4 .hero-content p {
  margin-top: 30px;
}

/* GrupoNexus — Caso Melina Distefano: el logo (PNG transparente) va solo, sin botón de play ni
   el velo oscuro (::before, rgba(3,7,13,.2)) que el tema pone sobre esta imagen y lo teñía de gris. */
.page-id-2559 .elementor-element-eca41f3 .video-image::before {
  display: none;
}

/* GrupoNexus — Servicios › "Diseño gráfico y branding" (project-4, c465e3c): se saca el link con
   la flechita (href="#", no lleva a ningún lado) de cada ítem, empezando por "Papelería comercial". */
.page-id-2018 .elementor-element-c465e3c .project-box-items-2 .text a.icon,
.page-id-2018 .elementor-element-c465e3c a.icon {
  display: none !important;
}

/* GrupoNexus — team-2: el cargo/descripción de cada tarjeta ahora admite varias líneas
   (campo de texto largo en Elementor), así que el <span> pasa a bloque para que envuelva. */
.team-card-items-4 .team-content .content span {
  display: block;
  line-height: 1.5;
}

/* GrupoNexus — Servicios › "Todo conectado" (team-2, a9041c2): las 4 tarjetas con el mismo alto,
   aunque una tenga un texto más largo. La columna pasa a flex para que la tarjeta se estire. */
.page-id-2018 .elementor-element-a9041c2 .row > div {
  display: flex;
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4 {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4 .team-content {
  flex: 1 1 auto;
  align-items: flex-start;
}

/* GrupoNexus — Servicios › "Todo conectado": aparición 3D. Cada tarjeta parte girada sobre su eje
   vertical (de canto, casi invisible) y se abre hasta quedar de frente; el JS agrega .is-in. */
.gnx-t3d .page-id-2018 .elementor-element-a9041c2 .row {
  perspective: 1400px;
}
.gnx-t3d .page-id-2018 .elementor-element-a9041c2 .team-card-items-4 {
  opacity: 0;
  transform: rotateY(-100deg) translateY(30px);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s ease;
  will-change: transform, opacity;
}
.gnx-t3d .page-id-2018 .elementor-element-a9041c2 .team-card-items-4.is-in {
  opacity: 1;
  transform: rotateY(0) translateY(0);
}

/* GrupoNexus — Servicios › "Todo conectado": en hover la parte del texto pasa a fondo negro con
   tipografía blanca (título y descripción). */
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4 .team-content {
  transition: background-color 0.35s ease;
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4 .team-content .content h3 a,
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4 .team-content .content span {
  transition: color 0.35s ease;
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4:hover .team-content {
  background-color: #000;
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4:hover .team-content .content h3 a,
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4:hover .team-content .content span {
  color: #fff;
}

/* GrupoNexus — Hotel Alpre › tarjeta "Sitio web": el botón "Visitar" aparece solo en hover, fijo
   abajo a la izquierda de la tarjeta. Para eso `.content` deja de ser el punto de referencia
   (static) y la tarjeta (position:relative del tema) pasa a serlo; el párrafo queda pegado bajo el
   título porque su posición automática es la que tendría en el flujo. */
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content {
  position: static !important;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content p {
  left: 30px;
  right: 30px;
  top: auto;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5 .content .more-btn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 9;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.page-id-2467 .elementor-element-c12716e .feature-card-items-5:hover .content .more-btn {
  opacity: 1;
  transform: translateY(0);
}

/* GrupoNexus — flechas blancas sobre el verde fluo → negras (mismo criterio que el resto de los
   .arrow-icon). Casos que faltaban: círculo del botón de las secciones "Hablemos" (CTA), variante
   bg-white-style del theme-btn, flecha del botón sólido .thems-btn (vuelve a blanca en hover porque
   ahí el fondo se barre a negro) y la flecha de "volver arriba". */
.lets-talk-section .lets-talk-content .theme-btn .btn-arrow-left,
.lets-talk-section .lets-talk-content .theme-btn .btn-arrow-right,
.theme-btn.bg-white-style .btn-arrow-left,
.theme-btn.bg-white-style .btn-arrow-right {
  color: var(--header) !important;
}
.thems-btn .fa-arrow-up-right {
  color: var(--header);
  transition: color 0.4s ease-in-out;
}
.thems-btn:hover .fa-arrow-up-right {
  color: var(--white);
}
.back-to-top,
.back-to-top span {
  color: var(--header);
}

/* GrupoNexus — caso Melina Distéfano (service-6, id b6f79f8, página 2559): el botón "Visitar" se
   muestra solo en la tarjeta que tiene link real (Desarrollo web: Inmobilo → distefanoinmo.com.ar);
   las otras dos no tienen destino y siguen sin botón. */
.page-id-2559 .elementor-element-b6f79f8 .service-btn[href^="http"] {
  display: inline-flex !important;
  margin-top: 6px;
}

/* GrupoNexus — se esconde la línea "(Home . Página)" bajo el título de TODAS las páginas y entradas
   (antes solo en los casos de éxito, ver más arriba). El título grande y la foto de fondo quedan igual. */
.breadcrumb-wrapper .breadcrumb-items {
  display: none !important;
}

/* GrupoNexus — etiquetas de cada trabajo (project-2 › .tag-items): sin link ahora son <span>, así
   no heredan la "manito" ni el efecto de cursor de los <a>. Mismo aspecto de píldora que el <a>
   del tema (main.css), sin el cambio de color en hover (no son clickeables). */
.project-box-items-2 .content-items .content .tag-items span {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
  border: 1px solid rgba(3, 7, 13, 0.15);
  border-radius: 48px;
  padding: 3px 14px;
  cursor: default;
}

/* GrupoNexus — panel lateral de contacto: dirección y horario sin link (antes <a href="#">) ahora
   van como texto plano, con el mismo color blanco que los links de teléfono y mail. */
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-plain {
  color: var(--white);
  cursor: default;
}

/* GrupoNexus — caso Melina Distéfano: se quita la línea gris que el tema dibuja arriba de la
   sección "Una web potenciada por Inmobilo" (border-top de .about-section-5), pegada bajo las
   etiquetas del encabezado. */
.page-id-2559 .elementor-element-eca41f3 .about-section-5 {
  border-top: 0;
}


/* GrupoNexus — about-10 (Servicios, "Diseño + tecnología + estrategia"): el texto queda más cerca
   de la foto de la izquierda. El tema separa foto y texto con 100px (gap); se baja a 40px. */
.about-wrapper-4 .about-content .about-left-item {
  gap: 40px;
}

/* GrupoNexus — títulos que dejaron de ser <a> (sin link, texto plano en <h3>): el tema les daba color
   solo al <a> (blanco en el bloque oscuro de project-4, blanco en hover/activo en service-4 y team-2),
   así que el texto plano heredaba el negro y desaparecía sobre fondo oscuro. Se replica el color acá. */
.project-main-item .project-left-content .content h3 {
  color: var(--white);
}
.service-box-item-4 .service-top-item .text-item h3 {
  color: var(--header);
}
.service-box-item-4.active .service-top-item .text-item h3,
.service-box-item-4:hover .service-top-item .text-item h3 {
  color: var(--header);
}
.page-id-2018 .elementor-element-a9041c2 .team-card-items-4:hover .team-content .content h3 {
  color: #fff;
}

/* GrupoNexus — botón verde sólido (.thems-btn, ej. "Contactanos"): texto negro en reposo (en hover
   sigue blanco sobre el barrido negro, como ya estaba) y más aire entre la palabra y la flecha. */
.thems-btn {
  color: var(--header);
  transition: color 0.4s ease-in-out;
}
.thems-btn:hover {
  color: var(--white);
}
.thems-btn .fa-arrow-up-right {
  margin-left: 14px;
}

/* GrupoNexus — etiquetas dentro de las cajas de Servicios (service-4, ".service-tag"): el tema las
   deja pegadas (gap:0) en pantallas grandes. Se separan 10px entre sí y entre filas, y la caja
   puede crecer si hay más de dos filas (antes tenía alto fijo de 97px). */
.service-box-item-4 .service-tag {
  height: auto;
  min-height: 97px;
}
.service-box-item-4 .service-tag .tag {
  flex-wrap: wrap;
  gap: 10px;
}
.service-box-item-4 .service-tag .tag.mb-2 {
  margin-bottom: 10px !important;
}

/* GrupoNexus — cajas de Servicios (service-box-item-4: "Sitios corporativos", "Branding design"…):
   fondo gris neutro en vez del rosa del tema; en hover/activa el barrido verde fluo (ya era
   --theme) pero con la tipografía en NEGRO (el tema la ponía blanca). */
.service-box-item-4 {
  background-color: #f0f0f0;
}
.service-box-item-4:hover .service-top-item .text-item span,
.service-box-item-4.active .service-top-item .text-item span,
.service-box-item-4:hover .service-top-item .text-item h3,
.service-box-item-4.active .service-top-item .text-item h3,
.service-box-item-4:hover .service-top-item .text-item h3 a,
.service-box-item-4.active .service-top-item .text-item h3 a,
.service-box-item-4:hover .service-bottom-item p,
.service-box-item-4.active .service-bottom-item p {
  color: var(--header);
}
/* el círculo con la flecha pasa de blanco a negro con flecha blanca, para que se lea sobre el verde */
.service-box-item-4:hover .service-top-item .icon,
.service-box-item-4.active .service-top-item .icon {
  background-color: var(--header);
  border-color: var(--header);
  color: var(--white);
}

/* GrupoNexus — cajas de Servicios (service-box-item-4): el botón circular de "link" deja de ir
   al lado del título y pasa al lugar donde aparece la imagen decorativa (abajo a la derecha,
   dentro del padding de la caja; el tema la muestra en hover/activa). En las cajas con link
   la imagen se oculta para que no se pisen; en las que no tienen link queda como estaba.
   Con mouse el botón aparece junto con ese sector (hover/activa); en táctil queda siempre visible. */
.service-box-item-4 .service-top-item .icon {
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 3;
}
@media (min-width: 1400px) {
  .service-box-item-4 .service-top-item .icon {
    right: 30px;
    bottom: 60px;
  }
}
.service-box-item-4:has(.service-top-item .icon) .service-bottom-item img {
  display: none;
}
@media (hover: hover) {
  .service-box-item-4 .service-top-item .icon {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, background-color 0.4s ease-in-out;
  }
  .service-box-item-4:hover .service-top-item .icon,
  .service-box-item-4.active .service-top-item .icon {
    opacity: 1;
    visibility: visible;
  }
}

/* El tema pone position:relative a .service-top-item en hover/activa, y entonces el botón (absoluto)
   se anclaba a esa fila del título en vez de a la caja. Se deja static para que la referencia sea
   la caja (.service-box-item-4, position:relative) y el botón caiga abajo a la derecha. */
.service-box-item-4 .service-top-item,
.service-box-item-4:hover .service-top-item,
.service-box-item-4.active .service-top-item {
  position: static;
}

/* Al dejar .service-top-item en static (para anclar el botón a la caja), el barrido verde (::before,
   absoluto) pasaba por encima del título y lo tapaba en hover. Se sube el título (.text-item) por
   encima del barrido con su propio position/z-index. */
.service-box-item-4 .service-top-item .text-item {
  position: relative;
  z-index: 2;
}
/* En las cajas con botón de link, el párrafo deja un margen a la derecha (110px: 60 del círculo +
   aire) para que no quede pegado al botón. */
.service-box-item-4:has(.service-top-item .icon) .service-bottom-item p {
  max-width: min(480px, calc(100% - 110px));
}

/* GrupoNexus — cajas de Servicios: menos espacio entre el título y el contenido de abajo
   (etiquetas en reposo / descripción en hover). El tema deja 210px (100px en pantallas medianas);
   ambos bloques comparten el mismo margen, así la caja no cambia de alto al pasar el mouse. */
.service-box-item-4 .service-tag,
.service-box-item-4 .service-bottom-item {
  margin-top: 90px;
}
@media (max-width: 1399px) {
  .service-box-item-4 .service-tag,
  .service-box-item-4 .service-bottom-item {
    margin-top: 50px;
  }
}

/* GrupoNexus — preguntas frecuentes (acordeón style-4, Servicios): cada pregunta en gris claro (en
   vez del rosa del tema) y, al abrirse, pasa al verde de marca con texto negro. El tema fuerza los
   colores con !important, por eso acá también. */
.grt-faq-content-1 .accordion-box.style-4 .block.acc-bg {
  background-color: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.grt-faq-content-1 .accordion-box.style-4 .block.active-block {
  background-color: var(--theme) !important;
  border-color: var(--theme) !important;
}
.grt-faq-content-1 .accordion-box.style-4 .block.active-block .acc-btn,
.grt-faq-content-1 .accordion-box.style-4 .block.active-block .acc-btn .icon,
.grt-faq-content-1 .accordion-box.style-4 .block.active-block .acc-content .content .text {
  color: var(--header);
  opacity: 1;
}

/* GrupoNexus — portfolio: la línea "Rubro · tags · año" bajo cada trabajo, con tipografía más chica y
   menos interlineado (el párrafo del tema le daba un alto de línea muy grande cuando ocupaba dos filas). */
.gnx-pf .gnx-pf__cap p,
.gnx-pf__lb .gnx-pf__lb-meta {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

/* GrupoNexus — portfolio: segundo nivel de filtros (tags de la categoría elegida). Chips más chicos
   que los de categoría; la fila aparece solo cuando hay una categoría activa. */
.gnx-pf__subs { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.gnx-pf__subs[hidden] { display: none; }
.gnx-pf__chip--sub { font-size: 13px; padding: 7px 14px; }

/* GrupoNexus — Contacto: fondo del formulario en gris neutro (#f0f0f0) en vez del rosa del tema. */
.contact-map-wrapper .contact-from-box {
  background-color: #f0f0f0;
}

/* GrupoNexus — se desactiva la mayúscula inicial automática (text-transform: capitalize) que el tema
   aplica a menús, botones, formularios, desplegables y otros textos: cada texto se muestra como está
   escrito. Las reglas con text-transform: uppercase (rótulos en mayúsculas) no se tocan. */
.theme-btn,
.theme-btn .btn-title,
.thems-btn,
.thems-btn-2,
.mean-container .mean-nav ul li a,
.header-main .main-menu ul li a,
.header-1.header-3 .header-main .header-right .header-button .text-btn,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn,
.breadcrumb-wrapper .page-heading .breadcrumb-items li,
.footer-widget-wrapper .footer-widget-items .footer-contact .talk-title,
.footer-widget-wrapper .footer-form-3 .subscribe-text,
.footer-bottom .footer-bottom-wrapper p,
.about-counter-wrapper .section-title-2 .text-btn,
.about-wrapper-4 .about-content .about-btn,
.about-section-6 .section-title-4 .breadcrumb-about-items li,
.funfact-wrapper-4 .funfact-left-cont .text-btn,
.funfact-wrapper-4 .funfact-content .funfact-button .funfact-btn,
.services-main-card-items-5.style-2 .bottom-content .service-btn,
.project-main-item .project-btn,
.project-section-6 .project-nav .nav li .nav-link,
.team-contact-items .team-right-items .contact-form-box .form-clt input,
.team-contact-items .team-right-items .contact-form-box .form-clt textarea,
.team-contact-items .team-right-items .contact-form-box .form-clt .form .single-select,
.news-box-items .content .news-btn,
.news-box-items-3 .content .news-btn,
.news-card-items-4 .news-image .content .news-btn,
.news-box-items-5 .content .news-btn,
.main-sideber .single-sideber-widget .category-list li,
.main-sideber .single-sideber-widget .tagcloud a,
.news-section-6 .news-grid-top .nav li .nav-link,
.branding-section .section-title-2 .text-btn,
.contact-map-wrapper .contact-from-box .form-clt input,
.contact-map-wrapper .contact-from-box .form-clt textarea,
.contact-map-wrapper .contact-from-box .form-clt .form .single-select,
.header-section .navbar-nav li a,
.header-section .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
.header-section .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-item,
.nice-select,
.nice-select .current,
.nice-select .option,
.nice-select .list {
  text-transform: none;
}

/* GrupoNexus — carrusel de logos (brand-3) en modo continuo: el desplazamiento es lineal, sin
   aceleración ni frenado entre slides, para que se vea como una cinta que corre sin parar. */
.brand-slider.is-continuous .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* GrupoNexus — carrusel de logos en modo continuo (Conocenos): logos al doble de tamaño (antes
   máx. 62px de alto en cajas de 125px; ahora 124px en cajas de 250px). En pantallas chicas se
   achica un poco para que la cinta no ocupe demasiado alto. */
.brand-slider.is-continuous .brand-box-1 {
  height: 190px;
  line-height: 190px;
}
.brand-slider.is-continuous .brand-box-1 .brand-img-1 img {
  max-width: 82%;
  max-height: 118px;
}
@media (max-width: 767px) {
  .brand-slider.is-continuous .brand-box-1 {
    height: 150px;
    line-height: 150px;
  }
  .brand-slider.is-continuous .brand-box-1 .brand-img-1 img {
    max-height: 90px;
  }
}

/* GrupoNexus — carrusel de logos continuo: los logos ahora son versiones recortadas al contenido
   (sin el aire transparente del lienzo de 279x209), así que se muestran en un recuadro fijo de
   78% del ancho x 108px de alto, escalados para llenarlo (object-fit: contain). Caja más baja. */
.brand-slider.is-continuous .brand-box-1 {
  height: 96px;
  line-height: 96px;
}
.brand-slider.is-continuous .brand-box-1 .brand-img-1 img {
  width: 78%;
  height: 65px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 767px) {
  .brand-slider.is-continuous .brand-box-1 {
    height: 72px;
    line-height: 72px;
  }
  .brand-slider.is-continuous .brand-box-1 .brand-img-1 img {
    height: 48px;
  }
}

/* GrupoNexus — Home, "Por qué nos eligen": raya negra que aparecía y desaparecía bajo el video. El video
   en sí no la tiene (se revisaron sus 180 fotogramas: las últimas 12 filas son claras), es un borde de
   renderizado: la altura del <video> queda con decimales y la fila de píxeles parcial se mezcla con el
   fondo negro por defecto del elemento. Se corrige con (1) fondo del video igual al de la sección en
   vez de negro y (2) un 1% de escala anclado arriba, que recorta ~12px de abajo (el contenedor ya
   tiene overflow:hidden) y cubre cualquier borde parcial. */
.choose-us-wrapper .choose-us-image {
  background-color: #FBFBFB;
  overflow: hidden;
}
.choose-us-wrapper .choose-us-image video {
  background-color: #FBFBFB;
}

/* GrupoNexus — Home, "Por qué nos eligen": tapa de color bajo el video. La raya negra del borde inferior
   no se pudo quitar del propio video, así que se la cubre con una franja del color de la sección
   (#FBFBFB) pegada al borde de abajo, que se monta 14px sobre el video y sobresale 4px por debajo. */
.choose-us-wrapper .choose-us-image {
  position: relative;
  overflow: visible;
}
.choose-us-wrapper .choose-us-image:has(video)::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 18px; /* 14px sobre el video + 4px por fuera */
  background-color: #FBFBFB;
  z-index: 3;
  pointer-events: none;
}

/* GrupoNexus — Servicios: al llegar por un enlace con ancla (#diseno-web, #identidad-y-grafica,
   #preguntas-frecuentes) el título queda debajo del menú fijo, no tapado por él. */
#diseno-web,
#identidad-y-grafica,
#preguntas-frecuentes {
  scroll-margin-top: 110px;
}

/* GrupoNexus — menú: la lupa de búsqueda se reemplaza por un acceso directo a WhatsApp (header-1 › whatsapp_url).
   Mismo círculo de vidrio que tenía la lupa; ícono en el verde de marca. */
.header-1 .header-right .gnx-wa-link {
  width: 56px;
  height: 56px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%, rgba(255, 255, 255, 0.2) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.header-1 .header-right .gnx-wa-link:hover {
  transform: scale(1.08);
  color: var(--theme);
}
.sticky.header-1 .header-right .gnx-wa-link {
  background-image: linear-gradient(#000, #000) !important;
}
@media (max-width: 1199px) {
  .header-1 .header-right .gnx-wa-link {
    width: 50px;
    height: 50px;
    font-size: 23px;
  }
}
/* GrupoNexus — logo del menú: 40% más chico en tablet y celular (de 40px a 24px de alto). En celular el
   logo + ícono de WhatsApp + hamburguesa sumaban más que el ancho de la pantalla y empujaban toda la
   página hacia la derecha (el contenido quedaba cortado). */
@media (max-width: 991px) {
  .header-1 .logo .header-logo img,
  .header-1 .logo .header-logo-2 img {
    height: 24px !important;
    width: auto !important;
  }
}

/* GrupoNexus — celular: los botones no pueden ser más anchos que la pantalla (el de Melina Distéfano
   medía 374px en una pantalla de 360px). */
@media (max-width: 575px) {
  .thems-btn,
  .thems-btn-2 {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}

/* GrupoNexus — Home, hero: la bajada ("Creamos soluciones…") queda en su propio renglón, separada del
   título; y en celular las dos "píldoras" de datos (+140 sitios / +800 proyectos) pierden la flechita,
   que con el texto largo caía a otra línea. En escritorio las flechas se mantienen. */
.hero-1 .hero-title .gnx-hero-sub {
  display: block;
  margin-top: 26px;
}
@media (max-width: 767px) {
  .hero-1 .hero-title .gnx-hero-sub {
    margin-top: 22px;
  }
  .hero-1 .hero-list .hero-box i {
    display: none;
  }
}

/* GrupoNexus — Home, hero en tablet/celular: las dos píldoras quedan casi pegadas (8px de aire en vez
   de los 20px del tema) y el botón circular de abajo conserva su distancia. */
@media (max-width: 991px) {
  .hero-1 .hero-list {
    gap: 8px;
  }
  .hero-1 .hero-list .arrow-icon {
    margin-top: 14px;
  }
}

/* GrupoNexus — Home, "Quiénes somos" en tablet y celular: el titular ("Creamos tu identidad. Construimos
   tu web…") en negrita y con interlineado más cerrado; y el bloque "30 / Años de trayectoria. Desde
   1997." centrado. */
@media (max-width: 991px) {
  .about-section .about-content .section-title h2 {
    font-weight: 700 !important;
    line-height: 1.05 !important; /* el tema fija un alto de línea en px (51px) que en celular queda enorme */
  }
  .about-section .about-bottom-items .about-left-items .counter-title,
  .about-section .about-bottom-items .about-left-items .text-2 {
    text-align: left;
  }
  /* GrupoNexus — mobile: el contador "30 años" va justo después del título y antes del párrafo */
  /* GrupoNexus — mobile: el gráfico Lego "30" (oculto en celular por el tema) va a la izquierda del contador, como en desktop */
  .about-section .about-bottom-items .about-left-items {
    display: grid;
    grid-template-columns: 42% 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .about-section .about-bottom-items .about-left-items .gnx-about-small-m { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; }
  .about-section .about-bottom-items .about-left-items .counter-title { grid-column: 2; grid-row: 1; align-self: end; }
  .about-section .about-bottom-items .about-left-items .text-2 { grid-column: 2; grid-row: 2; align-self: start; }
  .about-section .about-bottom-items .about-left-items .text { grid-column: 1 / -1; grid-row: 3; }
  .about-section .about-bottom-items .about-left-items > a { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}

/* GrupoNexus — Home, hero en celular: el botón circular que lleva al portfolio (debajo de las dos
   píldoras) se oculta. En tablet y escritorio se mantiene. */
@media (max-width: 767px) {
  .hero-1 .hero-list .arrow-icon {
    display: none;
  }
}

/* GrupoNexus — Home, "Quiénes somos" en celular: el gráfico de "30 años de evolución" debajo del bloque
   del 30 es un 30% más chico (70% del ancho) y queda centrado. Solo en celular. */
@media (max-width: 767px) {
  .about-section .about-bottom-items .about-image {
    text-align: center;
  }
  .about-wrapper .about-content .about-bottom-items .about-image img,
  .about-section .about-bottom-items .about-image img {
    width: 70% !important;
    height: auto !important;
    display: inline-block;
  }
}

/* GrupoNexus — celular: más aire a los costados (los contenedores pasan de 12px a 24px de margen
   interior) y el gráfico de Quiénes somos deja de reservar el alto fijo de 480px del tema, que dejaba
   un hueco debajo de la imagen achicada. */
@media (max-width: 767px) {
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .about-wrapper .about-content .about-bottom-items .about-image {
    height: auto !important;
  }
  /* las dos píldoras del hero deben caber dentro del nuevo margen */
  .hero-1 .hero-list .hero-box {
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    font-size: 14px;
    text-align: center;
  }
}

/* GrupoNexus — mobile: las etiquetas de cada trabajo pasan a la línea de abajo en vez de salirse de la pantalla. */
@media (max-width:767px){ .project-box-items-2 .content-items .content .tag-items{flex-wrap:wrap;} }

/* GrupoNexus — mobile/tablet: el menú de texto original (#mobile-menu) se imprimía crudo en el encabezado hasta que cargaba el JS
   (meanmenu lo copia al panel lateral). Se oculta por CSS para que no aparezca un instante antes del loader. */
@media (max-width:1199px){ .header-1 .mean__menu-wrapper{display:none !important;} }

.gnx-about-small-m{display:none;}
@media (max-width:991px){.about-section .gnx-about-small-m{display:block;}}

/* GrupoNexus — mobile: "Años de trayectoria. Desde 1997." con menos interlineado, aire antes del párrafo siguiente,
   y el gráfico de después del botón un 10% más grande (70% → 77%). */
@media (max-width: 767px) {
  .about-section .about-bottom-items .about-left-items .text-2 { line-height: 1.15 !important; margin-bottom: 0 !important; }
  .about-section .about-bottom-items .about-left-items .text { margin-top: 28px !important; }
  .about-wrapper .about-content .about-bottom-items .about-image img,
  .about-section .about-bottom-items .about-image img { width: 92% !important; }
}

/* GrupoNexus — home › servicios en celular/tablet: acordeón (assets/service-accordion.js). La columna de fotos
   de arriba se oculta; cada servicio abre su propia foto + tags al tocarlo; sin flechita de link. */
.service-list-items .gnx-svc-img { display: none; }
@media (max-width: 991px) {
  .service-section .gt-service-one-image-outer { display: none; }
  .service-section .service-list-items .service-title { cursor: pointer; }
  .service-section .service-list-items .service-title .icon { display: none; }
  .service-section .service-list-items .service-title { display: block; text-align: left; }
  .service-section .service-list-items .gnx-svc-img {
    display: block; max-height: 0; opacity: 0; overflow: hidden; border-radius: 14px;
    transition: max-height .45s ease, opacity .35s ease, margin .35s ease;
  }
  .service-section .service-list-items .gnx-svc-img img { display: block; width: 100%; height: auto; }
  .service-section .service-list-items.active .gnx-svc-img { max-height: 560px; opacity: 1; margin: 6px 0 14px; }
}

/* GrupoNexus — home › servicios en celular/tablet: "+" a la derecha del título que rota a "−" al abrirse. */
@media (max-width: 991px) {
  .service-section .service-list-items .service-title { padding-right: 52px; min-height: 36px; }
  .service-section .service-list-items .service-title::before,
  .service-section .service-list-items .service-title::after {
    content: ""; position: absolute; right: 9px; top: 50%; width: 18px; height: 2px; margin-top: -1px;
    background: #fff; border-radius: 2px; transition: transform .35s ease, background-color .3s ease;
  }
  .service-section .service-list-items .service-title::after { transform: rotate(90deg); }
  .service-section .service-list-items.active .service-title::before,
  .service-section .service-list-items.active .service-title::after { background: var(--theme); }
  .service-section .service-list-items.active .service-title::after { transform: rotate(0deg); }
}

/* GrupoNexus — home › servicios en celular/tablet: tags más separados de la foto y entre sí, letra +10% en blanco puro,
   y títulos de servicio siempre en blanco (antes el abierto se pintaba de verde; el verde queda en el "−"). */
@media (max-width: 991px) {
  .service-section .service-list-items .service-title .title a,
  .service-section .service-list-items.active .service-title .title a,
  .service-section .service-list-items .service-title .title a span { color: #fff !important; }
  .service-section .service-list-items.active .list-tag { margin-top: 26px !important; row-gap: 14px; column-gap: 12px; max-height: 320px !important; }
  .service-section .service-list-items .list-tag span { font-size: 15.4px; color: #fff; }
}
@media (max-width: 575px) {
  .service-section .service-list-items .list-tag span { font-size: 14.3px; }
}
@media (max-width: 991px) {
  .service-section .service-list-items .service-title,
  .service-section .service-list-items .service-title a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .service-section .service-list-items .service-title h3 { margin: 0; }
}

/* GrupoNexus — flecha "subir" en celular/tablet (assets/back-top-mobile.js). */
@media (max-width: 991px) {
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; line-height: 46px; text-align: center; z-index: 9990; }
  .back-to-top.gnx-top-show { opacity: 1; visibility: visible; transform: translate(0); }
}

/* GrupoNexus — footer en celular: se oculta la columna "Nuestros servicios" (4.ª columna, data-wow-delay=".6s"). */
@media (max-width: 767px) {
  .footer-section .footer-widget-wrapper .row > [data-wow-delay=".6s"] { display: none !important; }
}

/* GrupoNexus — acordeón de servicios en celular: el navegador y el script corregían el scroll a la vez (rebote). Solo corrige el script. */
@media (max-width: 991px) { html, body, .service-section, .service-section * { overflow-anchor: none; } }

/* GrupoNexus — botón "Ver servicios" bajo el acordeón de servicios (assets/service-accordion.js); solo celular/tablet. */
.gnx-svc-cta { display: none; }
@media (max-width: 991px) { .gnx-svc-cta { display: block; margin-top: 34px; } }
.gnx-svc-cta .theme-btn, .gnx-svc-cta .theme-btn span { color: var(--header) !important; }

/* GrupoNexus — Conocenos › "SOMOS TODOS ELLOS": letra 20% más chica en celular (100px → 80px). */
@media (max-width: 767px) {
  .section-title-2 .title.wa_title_spilt_1 { font-size: 80px !important; line-height: 80px !important; }
}

/* GrupoNexus — Conocenos: "Somos cada inmobiliaria…" + "Trayectoria" en celular van una columna debajo de la otra
   (en desktop quedan lado a lado). Contenedor c6b6619. */
@media (max-width: 767px) {
  .elementor-element-c6b6619 { flex-direction: column !important; padding: 50px 24px !important; gap: 24px !important; }
  .elementor-element-c6b6619 > .elementor-element-af77d59,
  .elementor-element-c6b6619 > .elementor-element-cd2a4f0 { width: 100% !important; max-width: 100% !important; flex: 0 0 auto; }
}

/* GrupoNexus — Servicios (hero "MUCHO MÁS QUE UNA WEB") en celular: el video de fondo (.grif-image) no tenía reglas
   de tamaño y se veía a su tamaño original (la mitad); ahora cubre toda la caratula. La bajada +20% (16px → 19.2px). */
.hero-4 .grif-image video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .page-id-2018 .hero-4 .hero-content p { font-size: 19.2px; max-width: 100%; }
}

/* GrupoNexus — Servicios en celular: las dos imágenes del bloque "Diseño + Tecnología + Estrategia" (.reveal-left) medían
   445 px dentro de una columna de 342 y empujaban el ancho de la página (scroll horizontal de 2 px). */
@media (max-width: 767px) {
  .about-section-4 .about-image img, .about-section-4 .about-thumb img { max-width: 100%; height: auto; }
}

/* GrupoNexus — Servicios en celular: la cinta de texto (marque-section-4) sobresalía 2 px y generaba scroll horizontal. */
.marque-section-4 { overflow: hidden; }

/* GrupoNexus — menú lateral en celular/tablet: el logo tiene el mismo tamaño que el del encabezado (24px de alto). */
@media (max-width: 991px) { .offcanvas__logo img { height: 24px !important; width: auto !important; } }

/* GrupoNexus — menú lateral en celular/tablet: el logo del panel mide igual que el del encabezado (24px de alto);
   misma especificidad que la regla de 40px de arriba para poder pisarla. */
@media (max-width: 991px) {
  .offcanvas__wrapper .offcanvas__logo img { height: 24px !important; }
}

/* GrupoNexus — Servicios (hero "MUCHO MÁS QUE UNA WEB") en celular: título +10% y el fondo verde deja de ocupar
   toda la altura de la pantalla (antes min-height 100svh con 190px arriba y 250px abajo de relleno). */
@media (max-width: 991px) {
  .page-id-2018 .hero-section-4.hero-4 { min-height: 0 !important; padding-top: 150px !important; padding-bottom: 80px !important; }
}
@media (max-width: 767px) {
  .page-id-2018 .hero-4 .hero-content h1 { font-size: 44px; }
  .page-id-2018 .hero-4 .hero-content h1 img { width: 44px; }
}
@media (max-width: 575px) {
  .page-id-2018 .hero-4 .hero-content h1 { font-size: 49.5px; }
  .page-id-2018 .hero-4 .hero-content h1 img { width: 44px; }
}

/* GrupoNexus — Servicios en celular: el gráfico Lego "GNX" sobre "Tu marca vive…" al 50% de su tamaño, alineado a la izquierda. */
@media (max-width: 767px) {
  .about-section-4 .about-left-item .about-image { width: 50% !important; flex: 0 0 50% !important; margin-left: 0 !important; margin-right: auto !important; }
  .about-section-4 .about-left-item .about-image img { width: 100% !important; height: auto !important; }
}

/* GrupoNexus — Servicios en celular: "DISEÑO + TECNOLOGÍA + ESTRATEGIA." +30% (32px → 41.6px). */
@media (max-width: 767px) {
  .about-section-4 .section-title-4 h2.title { font-size: 41.6px !important; line-height: 1.08 !important; }
}

/* GrupoNexus — Servicios › tarjetas de tipos de sitio (service-4): el título ya no es link (solo la flechita del círculo)
   y en celular el título es 10% más chico (45px → 40.5px). */
@media (max-width: 767px) {
  .service-box-item-4 .service-top-item .text-item h3 { font-size: 40.5px !important; line-height: 40.5px !important; }
}

/* GrupoNexus — Servicios › Diseño gráfico y branding en celular/tablet: el estado "abierto" (toque) replica el hover
   del tema; la descripción, oculta por el tema en ≤575px, se muestra al abrir (assets/project-tap.js). */
@media (max-width: 991px) {
  .project-main-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .project-main-item.gnx-open { padding-bottom: 32px; }
  .project-main-item.gnx-open .project-left-content span { color: var(--theme); }
  .project-main-item.gnx-open .project-left-content .content .text { display: block; max-height: 260px; opacity: 1; visibility: visible; }
  .project-main-item.gnx-open .project-image { opacity: 1; visibility: visible; }
  .project-main-item .project-left-content .content h3 a,
  .project-main-item .project-left-content .content .text .icon { pointer-events: none; }
}

/* GrupoNexus — Servicios en celular: se oculta la línea gris bajo "…hablen el mismo idioma" (border-bottom del párrafo). */
@media (max-width: 767px) {
  .about-wrapper-4 .about-content .about-left-item .about-cont p { border-bottom: 0 !important; }
}

/* GrupoNexus — Servicios › Diseño gráfico y branding en celular/tablet: al abrir un ítem se muestra su imagen. El tema la
   oculta (display:none) y en desktop va flotando a la derecha sobre el texto; acá va en el flujo, a todo el ancho,
   entre la descripción y el botón "+ info". */
@media (max-width: 991px) {
  .project-main-item { flex-direction: column; align-items: stretch; gap: 20px; }
  .project-main-item .project-left-content { order: 1; }
  .project-main-item.gnx-open .project-image {
    display: block; position: static; order: 2; width: 100%; max-height: none;
    border-radius: 14px; overflow: hidden; z-index: auto;
  }
  .project-main-item.gnx-open .project-image img { display: block; width: 100%; height: auto !important; }
  .project-main-item .project-btn { order: 3; align-self: flex-start; }
}

/* GrupoNexus — Servicios › Diseño gráfico y branding en celular: se oculta el botón "+ info" de cada ítem. */
@media (max-width: 767px) {
  .project-main-item .project-btn { display: none !important; }
}

/* GrupoNexus — Portfolio › muro de clientes en celular: el "+800" de fondo (#141414 sobre negro) casi no se distinguía
   en pantallas chicas; se aclara a #2a2a2a (el texto de las filas es #3a3a3a, así que sigue quedando por detrás). */
@media (max-width: 767px) {
  .gnx-mq { --gnx-mq-big: #2a2a2a; }
}

/* GrupoNexus — Portfolio › muro de clientes en celular: el contenedor mide la mitad de la pantalla (50vh = 10 filas),
   los nombres un 10% más chicos (27.4px → 24.7px) y el "+800" en un gris intermedio más oscuro (#1c1c1c). */
@media (max-width: 767px) {
  .gnx-mq { --gnx-h: 50vh !important; --gnx-rows: 10 !important; --gnx-mq-big: #1c1c1c; height: 50vh; }
  .gnx-mq__row { height: 5vh; }
  .gnx-mq__track li { font-size: 24.7px; }
}

/* GrupoNexus — Portfolio › muro de clientes en celular: la caja negra contenedora (#clientes-marquee, min-height 90vh) pasa
   a medir la mitad de la pantalla igual que el muro, y los nombres otro 20% más chicos (24.7px → 19.8px). */
@media (max-width: 767px) {
  #clientes-marquee { min-height: 50vh !important; height: 50vh; }
  .gnx-mq__track li { font-size: 19.8px; }
}

/* GrupoNexus — Portfolio en celular: el párrafo "Es difícil mostrar…" (contenedor 4abf0ae) con el mismo margen lateral de 24px
   que el resto del contenido, y las píldoras de los filtros 30% más chicas (tipografía, relleno y separación × 0.7). */
@media (max-width: 767px) {
  .elementor-element-4abf0ae { padding-left: 24px !important; padding-right: 24px !important; }
  .gnx-pf__filters { gap: 7px; }
  .gnx-pf__chip { font-size: 14px; line-height: 1.3 !important; padding: 6.3px 11.2px; height: auto; min-height: 0; }
  .gnx-pf__chip span { margin-left: 3px; }
  .gnx-pf__subs { gap: 6px; }
  .gnx-pf__chip--sub { font-size: 13px; line-height: 1.3 !important; padding: 4.9px 9.8px; }
}

/* GrupoNexus — Portfolio en celular: 20% menos de blanco sobre "Es difícil mostrar…" (90px → 72px: 80px de relleno del
   widget de título pasan a 62px; los 10px del contenedor quedan). */
@media (max-width: 767px) {
  .elementor-element-4abf0ae .elementor-element-001c047 { padding-top: 51px !important; } /* otro 15%: 72px → 61px */
}

/* GrupoNexus — Caso Quebrada del Condorito en celular: el bloque de texto y las etiquetas (contenedor d03a88d) estaban
   pegados a los bordes de la pantalla; mismo margen lateral de 24px que el resto del sitio. */
@media (max-width: 767px) {
  .elementor-element-d03a88d { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; }
}

/* GrupoNexus — Hotel Alpre en celular: el texto (1ff430c) y las tarjetas (d8aefe2) eran dos columnas de 195px con 10px de
   margen; pasan una debajo de la otra, a todo el ancho, con 24px de margen lateral como el resto del sitio. */
@media (max-width: 767px) {
  .page-id-2467 .elementor-element-d431ce5 { flex-direction: column !important; }
  .page-id-2467 .elementor-element-d431ce5 > .elementor-element-1ff430c,
  .page-id-2467 .elementor-element-d431ce5 > .elementor-element-d8aefe2 {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding-left: 24px !important; padding-right: 24px !important;
  }
}

/* GrupoNexus — casos de éxito en celular: "¿NECESITÁS UNA SOLUCIÓN SIMILAR?" 30% más chico (70px → 49px). */
@media (max-width: 767px) {
  .page-id-2372 .lets-talk-section .as-partner-3-big-title .title,
  .page-id-2467 .lets-talk-section .as-partner-3-big-title .title,
  .page-id-2559 .lets-talk-section .as-partner-3-big-title .title,
  .page-id-2440 .lets-talk-section .as-partner-3-big-title .title { font-size: 49px !important; line-height: 49px !important; }
}

/* GrupoNexus — Entidades en celular: el marco de cada captura mide lo que mide la captura (hasta 325px) en vez de un alto
   fijo igual para todas; las webs cortas dejaban un fondo gris largo debajo (assets/entidades-scrollshot.js → --gnx-win-h). */
@media (max-width: 767px) {
  .elementor-element-7a297c6 .gnx-scrollshot { height: auto !important; min-height: 0 !important; }
  .elementor-element-7a297c6 .gnx-scrollshot__window { height: var(--gnx-win-h, 325px) !important; }
}

/* GrupoNexus — Hotel Alpre en celular: "CONSTRUYENDO LA PRESENCIA…" 40% más chico (80px → 48px). */
@media (max-width: 767px) {
  .page-id-2467 .elementor-element-98dd0ce .elementor-heading-title { font-size: 34px !important; line-height: 36px !important; overflow-wrap: anywhere; }
}

/* GrupoNexus — Hotel Alpre en celular: el párrafo "Hotel Alpre es un ejemplo…" y las etiquetas tenían 80px de relleno a la
   derecha (pensado para la columna de desktop); ocupan todo el ancho útil. */
@media (max-width: 767px) {
  .page-id-2467 .elementor-element-48ac0dd,
  .page-id-2467 .elementor-element-da0fd65 { padding-right: 0 !important; }
}

/* GrupoNexus — Hotel Alpre en celular: el video (hotel-alpre-fondo-2.mp4) es vertical, 540×960 (9:16). La celda apilada
   medía 320px de alto y el "cover" lo recortaba a un casi cuadrado; ahora la caja respeta su proporción original. */
@media (max-width: 767px) {
  .page-id-2467 .elementor-element-471dec2,
  .page-id-2467 .elementor-element-471dec2 .elementor-widget-container { height: auto; }
  .page-id-2467 .gnx-bgvideo { aspect-ratio: 9 / 16; height: auto; min-height: 0; }
}

/* GrupoNexus — Caso Melina Distéfano en celular: el blanco entre el botón "Visitar sitio web" y el bloque que sigue se
   reduce a la mitad (154px → 74px): relleno inferior 80 → 40px y superior de la sección siguiente 98 → 58px. */
@media (max-width: 767px) {
  .page-id-2559 .about-section-5 { padding-bottom: 40px !important; }
  .page-id-2559 .service-section-5 { padding-top: 58px !important; }
}