/* ==========================================================================
   NX Design System v2.1 — Nexo Creativo CR
   Propuesta aprobada: P3 · Scroll Cinemático + proyectos en retícula bento.

   ¿Qué se puede tocar aquí sin miedo?
   - Los valores de :root (colores, tipografías, medidas). Todo el sitio los usa.
   Lo demás conviene editarlo desde Elementor.
   ========================================================================== */

:root{
  --nx-paper:#FAF9F6;        /* fondo dominante del sitio */
  --nx-white:#ffffff;
  --nx-ink:#010307;          /* títulos sobre fondo claro */
  --nx-ink70:#41444A;        /* cuerpo de texto sobre fondo claro */
  --nx-dark:#101010;         /* bandas oscuras y footer */
  --nx-dark-txt:#BDBDBD;     /* cuerpo de texto sobre oscuro */
  --nx-accent:#d30b4e;       /* mono-acento */
  --nx-btn:#c40b49;          /* fondo de botón sobre oscuro */
  --nx-rule:#E5E2DA;         /* líneas sobre claro */
  --nx-rule-dark:#262626;    /* líneas sobre oscuro */
  --nx-serif:"DM Serif Text",Georgia,"Times New Roman",serif;
  --nx-sans:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --nx-ease:cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────────────────── */
body{background:var(--nx-paper);color:var(--nx-ink);font-family:var(--nx-sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}

/* El módulo de rendimiento envuelve las imágenes con .webp en un <picture>.
   `display:contents` hace que ese envoltorio no genere caja: la <img> sigue
   siendo, a efectos de maquetado, hija directa de su contenedor (flex/grid
   intactos). */
picture{display:contents}

/* NO usar overflow-x:hidden en body ni en los contenedores.
   `overflow-x:hidden` obliga al navegador a calcular `overflow-y:auto`, y eso
   convierte al elemento en contenedor de scroll: cualquier position:sticky que
   tenga dentro deja de funcionar (fue exactamente lo que rompió el panel de
   imagen de la sección de servicios).
   `overflow-x:clip` recorta igual el desborde horizontal pero NO crea contenedor
   de scroll, así que el sticky sigue vivo. */
html{overflow-x:clip}
h1,h2,.nx-serif{font-family:var(--nx-serif);font-weight:400;letter-spacing:-.034em}
h3,h4,h5,h6{font-family:var(--nx-sans);font-weight:600;letter-spacing:-.01em}
p{color:var(--nx-ink70)}
a{color:inherit}
img{max-width:100%;height:auto}

/* La "i" acentuada: gesto de marca. Se escribe <span class="nx-i">i</span> */
.nx-i{color:var(--nx-accent)}

/* Etiqueta pequeña en versalitas */
.nx-kicker,.nx-kicker .elementor-heading-title{
  font-family:var(--nx-sans);font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--nx-accent)
}

/* ── Botones globales ─────────────────────────────────────────────────
   UNA sola especificación para todo el sitio, sin excepciones:
     reposo → fondo #c40b49, texto blanco
     hover  → fondo #101010, texto blanco
   Se mantienen las clases de variante (--light, --dark, --ghost) para no
   tener que reconstruir las páginas, pero las tres renderizan igual. */
body .nx-btn .elementor-button,
body a.nx-btn,
body .nx-btn--light .elementor-button, body a.nx-btn--light,
body .nx-btn--dark .elementor-button,  body a.nx-btn--dark,
body .nx-btn--ghost .elementor-button, body a.nx-btn--ghost{
  display:inline-block;padding:17px 32px;border:0;border-radius:0;
  font-family:var(--nx-sans);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  text-decoration:none;min-height:48px;
  background:var(--nx-btn);color:#fff;
  transition:background .35s var(--nx-ease),color .35s var(--nx-ease);
}
body .nx-btn .elementor-button:hover,
body a.nx-btn:hover,
body .nx-btn--light .elementor-button:hover, body a.nx-btn--light:hover,
body .nx-btn--dark .elementor-button:hover,  body a.nx-btn--dark:hover,
body .nx-btn--ghost .elementor-button:hover, body a.nx-btn--ghost:hover,
body .nx-btn .elementor-button:focus-visible,
body a.nx-btn:focus-visible{
  background:var(--nx-dark);color:#fff;border:0;
}

/* El CTA del header sigue la misma regla, esté el header transparente o
   sólido. Antes tenía tratamiento de contorno propio; se elimina. */
.nx-header.nx-solid a.nx-btn--ghost,
body:not(.home) .nx-header a.nx-btn--ghost{background:var(--nx-btn);color:#fff;border:0}
.nx-header.nx-solid a.nx-btn--ghost:hover,
body:not(.home) .nx-header a.nx-btn--ghost:hover{background:var(--nx-dark);color:#fff}

/* ── Header (Theme Builder) ─────────────────────────────────────────── */
.nx-header{position:fixed;top:0;left:0;right:0;z-index:999;border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s}
.nx-header.nx-solid{background:rgba(250,249,246,.95);backdrop-filter:blur(14px);border-bottom-color:var(--nx-rule)}
/* Alto del logo en un solo sitio, para poder ajustarlo sin tocar el PHP. */
:root{--nx-logo-h:44px}
.nx-header .nx-logo-white,
.nx-header .nx-logo-color{height:var(--nx-logo-h);width:auto}
.nx-logo-white{display:block}
.nx-logo-color{display:none}
.nx-header.nx-solid .nx-logo-white{display:none}
.nx-header.nx-solid .nx-logo-color{display:block}
/* El widget de menú de Pro genera su color desde el global «Accent» con un
   selector de 3 niveles. Estas reglas lo igualan para poder mandar nosotros. */
.nx-header .elementor-widget-nav-menu .elementor-nav-menu a{color:#fff;font-family:var(--nx-sans);font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;transition:color .3s}
.nx-header.nx-solid .elementor-widget-nav-menu .elementor-nav-menu a{color:var(--nx-ink)}
.nx-header .elementor-widget-nav-menu .elementor-nav-menu a:hover,
.nx-header .elementor-widget-nav-menu .elementor-nav-menu a.elementor-item-active{color:var(--nx-accent)}
/* ── Submenú de Servicios ────────────────────────────────────────────
   El panel del desplegable es claro, así que sus enlaces van en tinta.
   OJO con la especificidad: la regla de arriba
   (.nx-header .elementor-widget-nav-menu .elementor-nav-menu a) pesa 0-4-1 y
   pinta los enlaces de blanco. Con menos peso, el submenú quedaba BLANCO
   SOBRE BLANCO y solo se leía al hacer scroll, cuando el header se vuelve
   sólido y cambia el color del menú. Aquí se iguala ese peso. */
.nx-header .elementor-widget-nav-menu .elementor-nav-menu .sub-menu a,
.nx-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown a,
.nx-header.nx-solid .elementor-widget-nav-menu .elementor-nav-menu .sub-menu a{
  color:var(--nx-ink);background:var(--nx-paper)
}
.nx-header .elementor-widget-nav-menu .elementor-nav-menu .sub-menu a:hover{
  color:#fff;background:var(--nx-ink)
}
/* Página de servicio ACTIVA: se resalta dentro del desplegable para que la
   persona sepa en cuál está. Fondo acento (#d30b4e) y texto blanco. Lleva
   `.elementor-item-active` para ganarle en especificidad a la regla de
   reposo y a la de hover de arriba. */
.nx-header .elementor-widget-nav-menu .elementor-nav-menu .sub-menu a.elementor-item-active,
.nx-header .elementor-widget-nav-menu .elementor-nav-menu .sub-menu a.elementor-item-active:hover{
  color:#fff;background:var(--nx-accent)
}
/* El panel en sí: fondo sólido y borde fino, nunca semitransparente. */
.nx-header .elementor-nav-menu .sub-menu{
  background:var(--nx-paper);border:1px solid var(--nx-rule);
  box-shadow:0 24px 48px rgba(1,3,7,.14);padding:0
}

/* ── Menú móvil ─────────────────────────────────────────────────────
   El desplegable de Elementor se convierte en un panel a pantalla completa:
   fondo sólido (nunca semitransparente sobre contenido en movimiento),
   tipografía grande y filas de 56px para acertar con el pulgar. */
/* La barra del header SIEMPRE en fila: logo · menú · CTA.
   Los contenedores de Elementor pasan a columna en tablet/móvil por defecto,
   y eso apilaba los tres bloques uno debajo de otro comiéndose media pantalla. */
/* OJO con la estructura: cuando el contenedor es «boxed», Elementor mete un
   `.e-con-inner` entre la barra y sus columnas. Las tres columnas NO son hijos
   directos de `.nx-header-bar`, así que las reglas con `>` no las alcanzaban:
   la barra quedaba en fila con un único hijo, y ese hijo apilaba logo, menú y
   CTA en vertical. Por eso hay que poner en fila a los dos niveles. */
.nx-header .nx-header-bar,
.nx-header .nx-header-bar > .e-con-inner{
  flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:12px
}
@media(max-width:1024px){
  .nx-header .nx-header-bar .e-con{width:auto!important}
  /* logo a la izquierda · CTA · hamburguesa a la derecha */
  .nx-header .nx-header-bar .e-con-inner > .e-con:first-child{flex:0 0 auto;margin-right:auto}
  .nx-header .nx-header-bar .e-con-inner > .e-con:nth-child(2){flex:0 0 auto;order:3}
  .nx-header .nx-header-bar .e-con-inner > .nx-header-cta-col{flex:0 0 auto;order:2}
}

.nx-header .elementor-menu-toggle{color:#fff;background:transparent;padding:10px;min-width:48px;min-height:48px}
.nx-header.nx-solid .elementor-menu-toggle,
body:not(.home) .nx-header .elementor-menu-toggle{color:var(--nx-ink)}

.nx-header .elementor-nav-menu--dropdown{
  background:var(--nx-paper);
  border-top:1px solid var(--nx-rule);
  box-shadow:0 24px 48px rgba(1,3,7,.12);
  max-height:calc(100svh - 72px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.nx-header .elementor-nav-menu--dropdown a{
  min-height:56px;display:flex;align-items:center;
  font-family:var(--nx-sans);font-size:1.05rem;font-weight:600;
  padding:14px clamp(18px,5vw,32px);
  border-bottom:1px solid var(--nx-rule);
}
.nx-header .elementor-nav-menu--dropdown a:hover,
.nx-header .elementor-nav-menu--dropdown a.elementor-item-active{
  background:var(--nx-ink);color:#fff;
}
/* Los 7 servicios del submenú: un escalón visual por debajo del nivel 1 */
.nx-header .elementor-nav-menu--dropdown .sub-menu a{
  font-size:.9rem;font-weight:400;padding-left:clamp(32px,9vw,52px);
  color:var(--nx-ink70);min-height:48px;
}
/* Misma marca de página activa en el menú móvil: acento y texto blanco. */
.nx-header .elementor-nav-menu--dropdown .sub-menu a.elementor-item-active{
  background:var(--nx-accent);color:#fff;
}
/* CTA dentro del panel móvil: en escritorio vive en la barra, pero al
   colapsar el menú el usuario se quedaba sin acción principal. */
.nx-header .elementor-nav-menu--dropdown::after{content:none}
.nx-header.nx-solid a.nx-btn--ghost{color:var(--nx-ink);border-color:var(--nx-ink)}
.nx-header.nx-solid a.nx-btn--ghost:hover{background:var(--nx-ink);color:#fff}
/* páginas interiores: el header arranca sólido */
body:not(.home) .nx-header{background:rgba(250,249,246,.95);backdrop-filter:blur(14px);border-bottom-color:var(--nx-rule)}
body:not(.home) .nx-logo-white{display:none}
body:not(.home) .nx-logo-color{display:block}
body:not(.home) .nx-header .elementor-nav-menu a{color:var(--nx-ink)}
body:not(.home) .nx-header a.nx-btn--ghost{color:var(--nx-ink);border-color:var(--nx-ink)}
body:not(.home) .nx-header a.nx-btn--ghost:hover{background:var(--nx-ink);color:#fff}

/* ── Hero cinemático ────────────────────────────────────────────────── */
/* Los contenedores de Elementor son flex en columna: para bajar el contenido
   al pie hay que usar justify-content, no align-items. */
.nx-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--nx-dark)}

/* Elementor le pone position:relative a cada widget. Eso convertía al widget
   en el bloque contenedor de la imagen absoluta y la dejaba en 0×0. Con static
   el contenedor vuelve a ser .nx-hero y la imagen ocupa todo el hero. */
.nx-hero .nx-hero-media-wrap{position:static}
.nx-hero-media{position:absolute;inset:0;z-index:0}
/* La exposición ya viene corregida en el archivo nx-hero.jpg (la original tenía
   brillo 64/255 y se veía negra). Aquí no se aplica filtro: un filter sobre una
   imagen a pantalla completa obliga a repintar y castiga el LCP. */
.nx-hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:nx-kenburns 22s ease-out forwards}
/* Velo del hero. Equilibrio buscado: la imagen se ve en el tercio superior y
   se oscurece donde va el texto, para que el blanco mantenga contraste AA.
   La franja del texto (40-100%) tiene brillo 98/255; con .82 de velo queda en
   ~18/255, lo que da >12:1 contra el blanco. */
.nx-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,3,7,.58) 0%,rgba(1,3,7,.34) 26%,rgba(1,3,7,.72) 58%,rgba(1,3,7,.88) 82%,rgba(1,3,7,.94) 100%)}
@keyframes nx-kenburns{to{transform:scale(1)}}
.nx-hero-inner{position:relative;z-index:2;width:100%}
.nx-hero-slide{position:relative}
/* El rotador del hero también cruza con fundido puro: el titular es
   tipografía serif a 7rem y cualquier desplazamiento lo deja borroso
   durante la transición. */
.nx-hero-slide:not(.nx-on){position:absolute;inset:0;opacity:0;pointer-events:none}
.nx-hero-slide{transition:opacity .6s ease-out}
.nx-hero-slide.nx-on{opacity:1;pointer-events:auto}
/* Elementor genera CSS por página con selectores de 3 niveles
   (.elementor-39 .elementor-element-abc .elementor-heading-title).
   Para ganarle sin !important, estas reglas igualan esa especificidad;
   como nx.css se encola después, prevalece. */
.nx-hero .elementor-widget-heading .elementor-heading-title,
.nx-hero .elementor-widget-text-editor .elementor-widget-container{color:#fff}
.nx-hero h1,.nx-hero h1 .elementor-heading-title{font-size:clamp(2.9rem,7.6vw,6.8rem);line-height:.94}
.nx-hero .nx-hero-title{font-family:var(--nx-serif);font-weight:400;letter-spacing:-.034em;font-size:clamp(2.9rem,7.6vw,6.8rem);line-height:.94}
.nx-hero p{color:rgba(255,255,255,.88);font-size:1.15rem;max-width:46ch}
/* Sobre la foto del hero el acento no alcanza contraste AA: la etiqueta va en
   blanco. El acento se reserva para la "i" del titular y el botón. */
.nx-hero .nx-kicker .elementor-heading-title{color:rgba(255,255,255,.9)}
.nx-hero-dots{display:flex;gap:9px;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
/* El kit de Elementor estiliza TODOS los <button> (padding 17/32). Se usa
   .nx-hero-dots .nx-hero-dot (2 clases) para poder ganarle sin !important. */
.nx-hero-dots .nx-hero-dot{width:30px;height:3px;min-height:0;background:rgba(255,255,255,.3);border:0;border-radius:0;padding:0;margin:0;cursor:pointer;transition:all .4s var(--nx-ease)}
.nx-hero-dots .nx-hero-dot:hover{background:rgba(255,255,255,.6)}
.nx-hero-dots .nx-hero-dot.nx-on{background:var(--nx-accent);width:52px}
/* Área táctil de 48px sin agrandar la marca visible (WCAG 2.1 AA · 2.5.5).
   El punto mide 3px de alto a propósito; quien lo toca dispone de 49px. */
.nx-hero-dots .nx-hero-dot::after{content:"";position:absolute;inset:-23px -8px}
.nx-hero-dots .nx-hero-dot{position:relative}

/* ── Hero corto (páginas interiores) ────────────────────────────────── */
.nx-hero-sm{padding-top:clamp(130px,15vw,190px);padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--nx-rule)}
.nx-hero-sm h1,.nx-hero-sm h1 .elementor-heading-title{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:.96}

/* ── Páginas de reseña de proyecto ───────────────────────────────────────
   La imagen se muestra COMPLETA y se topa a una altura razonable para que las
   piezas muy verticales (posters) no dominen la sección; las capturas anchas
   ocupan el ancho de su columna. Centrada y con un borde fino como en la
   galería, para que se lea como «pieza». */
.nx-proj-hero .nx-proj-img img{
  /* El tope de alto solo afecta a las piezas MUY verticales (posters): las
     capturas anchas ya están limitadas por el ancho de columna. Se subió para
     que esos posters se vean más grandes. */
  width:auto;max-width:100%;max-height:clamp(480px,82vh,820px);height:auto;
  object-fit:contain;margin-inline:auto;display:block;
  border:1px solid var(--nx-rule)
}
.nx-proj-hero .nx-proj-img .elementor-widget-container{text-align:center}

/* ── Galería de piezas del proyecto (estilo bento) ───────────────────────
   Como el bloque «Creatividad que cobra vida»: cuadrícula pareja con todas las
   piezas del MISMO tamaño (celdas cuadradas) y las imágenes en `object-fit:
   cover`, más un leve zoom al pasar el cursor. Lightbox de Elementor al hacer
   clic (muestra la pieza completa).
   OJO: WordPress core impone a cada `.gallery-item` un `max-width:33.33%` y un
   `float` que hay que ANULAR (si no, salen chiquitas y con hueco a la derecha).
   Se cuadra a 1/1 a propósito: los 4 productos ya son cuadrados (quedan
   completos, con su etiqueta); solo las piezas apaisadas se recortan un poco. */
.nx-fb-gallery .elementor-image-gallery .gallery{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px;width:100%
}
.nx-fb-gallery .elementor-image-gallery .gallery-item{
  width:auto!important;max-width:none!important;float:none!important;margin:0!important;
  overflow:hidden;border:1px solid var(--nx-rule);background:var(--nx-paper);
  aspect-ratio:1/1;display:flex;padding:10px
}
.nx-fb-gallery .elementor-image-gallery .gallery-icon,
.nx-fb-gallery .elementor-image-gallery .gallery-icon a{display:flex;width:100%;height:100%;margin:0!important;line-height:0}
.nx-fb-gallery .elementor-image-gallery img{
  width:100%!important;height:100%!important;
  object-fit:contain;object-position:center;
  transition:transform .55s var(--nx-ease)
}
.nx-fb-gallery .elementor-image-gallery .gallery-item:hover img{transform:scale(1.05)}
@media(max-width:1024px){
  .nx-fb-gallery .elementor-image-gallery .gallery{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
  .nx-fb-gallery .elementor-image-gallery .gallery{grid-template-columns:1fr}
}

@media(max-width:767px){
  /* En móvil las columnas se apilan; se limita el alto de la imagen para no
     empujar el texto demasiado abajo. */
  .nx-proj-hero .nx-proj-img img{max-height:74vh}
  /* Heroes con imagen a dos columnas (subpáginas de SERVICIO y reseñas de
     PROYECTO): se apilan en COLUMNA (evita artefactos de row+wrap) y se ajusta
     el hueco header→kicker a ~40px. El `:has(.elementor-widget-image)` los
     distingue de los heroes de solo texto (Conócenos, Proyectos, legales), que
     NO deben cambiar.
     El padding real del contenido lo pone Elementor en el .e-con-inner, no en
     el .e-con: se anula el del .e-con y se fija el del inner. Cuenta: header
     móvil ~79px + 40px deseados = 119px sobre el kicker; la columna de texto
     aporta ~10px, así que el inner lleva ~109px. (Sale igual con o sin barra de
     admin, porque esta desplaza header y contenido por igual.) */
  body .nx-hero-sm:has(.elementor-widget-image) > .e-con-inner{flex-direction:column!important;align-items:stretch!important;padding-top:109px!important}
  body .nx-hero-sm:has(.elementor-widget-image){padding-top:0!important}
}

/* ── Marquee infinito ───────────────────────────────────────────────── */
.nx-marquee{--nx-marquee-speed:30s;overflow:hidden;white-space:nowrap;background:var(--nx-paper);border-top:1px solid var(--nx-rule);border-bottom:1px solid var(--nx-rule);padding:22px 0}
.nx-marquee-track{display:inline-flex;gap:44px;animation:nx-mq var(--nx-marquee-speed) linear infinite;will-change:transform}
.nx-marquee:hover .nx-marquee-track{animation-play-state:paused}
.nx-marquee-track span{font-family:var(--nx-sans);font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--nx-ink)}
.nx-marquee-track span i{color:var(--nx-accent);font-style:normal}
@keyframes nx-mq{to{transform:translateX(-50%)}}

/* ── Servicios: panel de imagen fijo (sticky) ───────────────────────── */
.nx-sticky-pane{position:sticky;top:96px;height:min(74vh,620px);overflow:hidden;background:var(--nx-dark)}
/* El cambio de imagen es un fundido, sin escalado.
   Escalar una foto de 620px mientras el usuario hace scroll la re-muestrea
   fotograma a fotograma y se percibe como distorsión. */
.nx-sticky-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.78);transition:opacity .55s ease-out}
.nx-sticky-pane img.nx-on{opacity:1}
.nx-sticky-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px;color:#fff;background:linear-gradient(transparent,rgba(1,3,7,.86))}
.nx-sticky-cap b{display:block;font-family:var(--nx-serif);font-size:2.4rem;line-height:1;color:var(--nx-accent)}
.nx-sticky-cap span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.88}

/* ── Variante «captura completa» (página Proyectos) ──────────────────
   En Servicios el recorte funciona porque son fotos verticales. Las capturas
   de sitios web son apaisadas (~2.3:1) y con `cover` se perdía casi la mitad
   del diseño. Aquí se muestran enteras: `contain` respeta la proporción y el
   panel se ajusta a un formato apaisado para que sobre poco fondo. */
/* width:100% es obligatorio aquí. Con `aspect-ratio` y el ancho en `auto`, el
   navegador deriva el ANCHO a partir del alto: el panel salía de 989px dentro
   de una columna de 625 e invadía la columna de texto. Fijando el ancho, la
   proporción trabaja en el sentido correcto y el alto sale del ancho. */
.nx-sticky-pane--fit{width:100%;height:auto;aspect-ratio:16/11;padding:22px 22px 92px}
.nx-sticky-pane--fit img{position:absolute;inset:22px 22px 92px;width:auto;height:auto;
  max-width:calc(100% - 44px);max-height:calc(100% - 114px);margin:auto;object-fit:contain}
/* La leyenda queda sobre la franja libre inferior, sin tapar la captura. */
.nx-sticky-pane--fit .nx-sticky-cap{background:none;padding:0 22px 22px}

/* Misma lógica para la imagen que aparece en móvil dentro de cada proyecto. */
.nx-svc-img--fit img{aspect-ratio:auto;object-fit:contain;background:var(--nx-dark)}

/* El servicio que no está en foco se atenúa, pero no por debajo de .7:
   más abajo el texto deja de cumplir el contraste AA y se vuelve ilegible. */
.nx-svc-item{padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid var(--nx-rule);opacity:.7;transition:opacity .5s var(--nx-ease)}
.nx-svc-item.nx-active{opacity:1}
/* ── Recorrido del panel sticky ──────────────────────────────────────
   Un elemento sticky solo se desplaza dentro de su ELEMENTO PADRE. Elementor
   envuelve cada widget en .elementor-widget-html (y a veces en un
   .elementor-widget-container adentro), y ese envoltorio se ajusta al alto del
   contenido: 620 px, igual que el panel. Resultado: cero recorrido y el panel
   se va con el scroll aunque position:sticky esté bien puesto.
   Aquí se estira toda la cadena columna → widget → contenedor para que el
   padre real del panel mida lo mismo que la lista de servicios. */
.nx-sticky-col{align-self:stretch;display:flex;flex-direction:column}
.nx-sticky-col > .elementor-widget-html{flex:1 1 auto;align-self:stretch;height:100%}
.nx-sticky-col > .elementor-widget-html > .elementor-widget-container{height:100%}

/* ── Proyectos: título + imagen fijos juntos ─────────────────────────────
   A diferencia de Servicios (donde solo la imagen se fija y el título va full
   width arriba), aquí el título vive DENTRO de la columna izquierda y es la
   COLUMNA ENTERA la que se fija. Así, al recorrer la lista de la derecha, se
   ven a la vez el título del bloque y la imagen del proyecto en foco. */
@media(min-width:1025px){
  /* El header mide ~94px, por eso se fija más abajo que en Servicios: ahí lo
     fijo es una imagen y un pequeño recorte no se nota, pero aquí es el TÍTULO
     y no puede quedar tapado. La barra de admin de WordPress (solo visible al
     estar logueado) suma 32px, que se contemplan aparte. */
  .nx-sticky-col.nx-proj-col{
    position:sticky;top:108px;align-self:flex-start;height:auto
  }
  body.admin-bar .nx-sticky-col.nx-proj-col{top:140px}
  /* Dentro de la columna fija el panel no necesita su propio sticky ni
     estirarse: manda la columna. */
  .nx-proj-col > .elementor-widget-html{flex:0 0 auto;align-self:auto;height:auto}
  .nx-proj-col .nx-sticky-pane{position:static;top:auto}
  .nx-proj-title{margin-bottom:22px}
}
@media(max-width:1024px){
  /* En móvil/tablet la columna se MUESTRA (a diferencia de Servicios, que la
     oculta): el título queda full width sobre la lista. Solo se esconde el
     panel de imagen, porque cada proyecto ya trae la suya. */
  .nx-sticky-col.nx-proj-col{display:block}
  .nx-proj-col .nx-sticky-pane{display:none}
  .nx-proj-title{margin-bottom:8px}
}
.nx-svc-item .nx-svc-num,.nx-svc-item .nx-svc-num .elementor-heading-title{font-family:var(--nx-serif);font-size:1.3rem;color:var(--nx-accent)}
.nx-svc-item h3,.nx-svc-item h3 .elementor-heading-title{font-family:var(--nx-serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.025em;line-height:1.08}

/* ── Bandas oscuras ─────────────────────────────────────────────────── */
.nx-dark{background:var(--nx-dark)}
/* Misma especificidad que el CSS por página de Elementor (ver nota del hero). */
.nx-dark .elementor-widget-heading .elementor-heading-title,
.nx-dark .elementor-widget-icon-list .elementor-icon-list-text{color:#fff}
.nx-dark h1,.nx-dark h2,.nx-dark h3,.nx-dark h4{color:#fff}
.nx-dark .elementor-widget-text-editor .elementor-widget-container,
.nx-dark p,.nx-dark li{color:var(--nx-dark-txt)}
.nx-dark .nx-kicker .elementor-heading-title{color:var(--nx-accent)}
.nx-dark .nx-num .elementor-heading-title{color:var(--nx-accent)}
.nx-dark .nx-rule{border-color:var(--nx-rule-dark)}

.nx-reason{border-top:1px solid var(--nx-rule-dark);padding-top:20px}
.nx-reason .nx-num,.nx-reason .nx-num .elementor-heading-title{font-family:var(--nx-serif);font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;color:var(--nx-accent)}

/* ── Nuestros Valores (página Conócenos) ─────────────────────────────────
   Bloques tipo tarjeta que se RELLENAN con el color de acento al pasar el
   cursor; el número, el título y el texto pasan a blanco para el contraste. */
.nx-valor{transition:background .35s var(--nx-ease),border-color .35s var(--nx-ease),transform .35s var(--nx-ease)}
.nx-valor:hover{background:var(--nx-accent);border-color:var(--nx-accent)}
.nx-valor:hover .nx-kicker .elementor-heading-title,
.nx-valor:hover h3,
.nx-valor:hover h3 .elementor-heading-title,
.nx-valor:hover p{color:#fff}
@media(prefers-reduced-motion:reduce){.nx-valor{transition:background .35s,border-color .35s}}

/* ── Tarjetas del hub de servicios ─────────────────────────────────────
   Las tarjetas de una misma fila ya miden igual (Elementor las estira),
   pero el botón iba justo detrás del texto: como los extractos tienen
   distinto largo, cada botón caía a una altura. `margin-top:auto` se come
   el sobrante y lo deja pegado al pie, así todos quedan en la misma línea.
   La imagen se fija a 3:2 para que además arranquen todos los títulos a la
   misma altura; las fotos vienen con proporciones ligeramente distintas.
   -------------------------------------------------------------------- */
.nx-hub-card{display:flex;flex-direction:column}
/* La imagen va a sangre (de borde a borde); el resto del contenido sí lleva
   aire lateral para que el texto no toque el filo de la tarjeta. Se aplica a
   todos los hijos MENOS la imagen. */
.nx-hub-card > .elementor-widget:not(.elementor-widget-image){
  padding-left:28px;padding-right:28px
}
/* El botón se empuja al pie (misma altura en toda la fila) y se centra.
   El enlace es inline-block, así que basta con centrar el texto del widget
   que lo contiene; no hay un wrapper intermedio al que apuntar. */
.nx-hub-card > .elementor-widget-button{margin-top:auto;padding-top:22px;text-align:center}
/* Solo el título de cada tarjeta va centrado, a petición del cliente. El
   kicker (01) y el texto descriptivo siguen alineados a la izquierda. */
.nx-hub-card > .elementor-widget-heading:not(.nx-kicker),
.nx-hub-card > .elementor-widget-heading:not(.nx-kicker) .elementor-heading-title{text-align:center}
.nx-hub-card > .elementor-widget-image img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block
}

/* ── Páginas legales ───────────────────────────────────────────────────
   Columna de medida corta (unos 70 caracteres): un texto legal a todo el
   ancho de la pantalla es muy incómodo de leer. Cada apartado va separado
   por una línea fina para que se distingan de un vistazo.
   -------------------------------------------------------------------- */
/* El límite de ancho va en los BLOQUES de contenido, no en el `.e-con-inner`
   de la sección. Ese envoltorio es la caja centrada de 1360px que define el
   margen de la página: al estrecharlo, el texto o se descolgaba del H1 (si se
   dejaba centrado) o se pegaba al borde de la pantalla (si se alineaba a la
   izquierda). Limitando los hijos, la columna arranca en el mismo margen que
   el título y respeta la retícula del resto del sitio.
   Lleva `body` delante porque Elementor fuerza `max-width:100%` en todo
   widget que viva dentro de un contenedor. */
body .nx-legal .nx-legal-entrada,
body .nx-legal .nx-legal-apartado{max-width:720px}
.nx-legal-apartado{padding:26px 0 0;margin-top:26px;border-top:1px solid var(--nx-rule)}
.nx-legal-apartado h2,
.nx-legal-apartado h2 .elementor-heading-title{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:14px}
.nx-legal-cuerpo p{margin:0 0 14px}
.nx-legal-cuerpo ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.nx-legal-cuerpo li{margin-bottom:7px}
.nx-legal-cuerpo a{color:var(--nx-accent);text-decoration:underline;text-underline-offset:3px}
/* El ancho de la entrada se limita en el <p>, no en el widget: Elementor
   gana la especificidad en el contenedor, pero el párrafo interior es
   terreno libre y el resultado visual es el mismo. */
.nx-legal-entrada p{font-size:1.06rem;max-width:720px}
.nx-legal-fecha p{font-size:.85rem;color:#6B6B6B;margin:0}

.nx-chip{display:inline-block;border:1px solid var(--nx-rule-dark);padding:10px 20px;margin:0 8px 8px 0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:.35s}
.nx-chip:hover{border-color:var(--nx-accent);color:var(--nx-accent)}

/* ── Proyectos: retícula bento ──────────────────────────────────────── */
.nx-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.nx-pj{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;background:var(--nx-dark)}
.nx-pj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.82);transition:transform .95s var(--nx-ease),filter .5s}
.nx-pj:hover img{transform:scale(1.05);filter:saturate(1)}
.nx-pj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,3,7,.06),rgba(1,3,7,.84));transition:background .5s}
.nx-pj:hover::after{background:linear-gradient(180deg,rgba(211,11,78,.24),rgba(1,3,7,.9))}
.nx-pj-c{position:relative;z-index:2;padding:26px;color:#fff}
.nx-pj-c small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:6px}
.nx-pj-c h3{color:#fff;font-family:var(--nx-serif);font-weight:400;font-size:clamp(1.25rem,2.1vw,1.95rem);letter-spacing:-.025em;line-height:1.05}
.nx-pj-c .nx-go{display:inline-block;margin-top:12px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--nx-accent);opacity:0;transform:translateY(6px);transition:.45s var(--nx-ease)}
.nx-pj:hover .nx-pj-c .nx-go{opacity:1;transform:none}
/* Retratos del equipo (Conócenos): se muestran COMPLETOS.
   Con el recorte por defecto se perdía parte de la cara y los hombros. La
   proporción 4/5 acompaña a los retratos verticales y deja poco fondo. */
/* 11/12 es el punto medio entre las dos fotos reales (Kim es 708×836 y Albin
   800×800). Con 4/5 la foto cuadrada dejaba una franja negra muy marcada. */
/* Proporción casi cuadrada (11/12): las fotos son una vertical (Kim, 0.85) y
   una cuadrada (Albin, 1.0). Un encuadre casi cuadrado recorta poquísimo a
   ambas con `cover`; un 4/5 más alto le cortaba los lados a la cuadrada. */
.nx-pj--photo{aspect-ratio:11/12;min-height:0}
/* `cover` (antes `contain`): así las dos fotos llenan su tarjeta por igual y se
   ven del MISMO tamaño, aunque los archivos tengan proporciones distintas
   (Kim vertical, Albin cuadrada). `center top` conserva la cabeza al recortar. */
.nx-pj--photo img{object-fit:cover;object-position:center top}
/* Bloque de representantes más chico: se acota el ancho y se centra, para que
   las dos fichas no ocupen todo el ancho de la sección. El `:has()` hace que
   funcione ya sin reconstruir (identifica el bento por sus fichas de foto); la
   clase `.nx-reps` queda para cuando se vuelva a correr el builder. */
.nx-reps,
.nx-bento:has(> .nx-pj--photo){max-width:1080px;margin-inline:auto}
@media(max-width:767px){
  /* En móvil las fichas quedaban casi pegadas a la banda oscura siguiente.
     Un margin-bottom en el bento se COLAPSA por la estructura de widgets, así
     que el aire se pone como PADDING en la propia sección (no colapsa). El
     `:has()` identifica la sección de representantes por sus fichas de foto. */
  .e-con:has(> .e-con-inner .nx-pj--photo){padding-bottom:80px}
}
.nx-pj--photo::after{background:linear-gradient(180deg,rgba(1,3,7,0) 55%,rgba(1,3,7,.9) 100%)}
.nx-pj--photo:hover::after{background:linear-gradient(180deg,rgba(211,11,78,.12) 0%,rgba(1,3,7,.92) 100%)}

.nx-pj--a{grid-column:span 7;min-height:360px}
.nx-pj--b{grid-column:span 5;min-height:360px}
.nx-pj--c,.nx-pj--d,.nx-pj--e{grid-column:span 4;min-height:270px}

/* La galería de diseño gráfico (.nx-gallery) se retiró junto con su sección en
   la página Proyectos (jul-2026). */

/* ── Listas de viñetas ──────────────────────────────────────────────── */
.nx-bullets{list-style:none;margin:14px 0 0;padding:0}
.nx-bullets li{position:relative;padding:7px 0 7px 22px;border-top:1px solid var(--nx-rule);font-size:.95rem;color:var(--nx-ink70)}
.nx-bullets li:first-child{border-top:0}
.nx-bullets li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--nx-accent)}
.nx-dark .nx-bullets li{border-color:var(--nx-rule-dark);color:var(--nx-dark-txt)}

/* ── Planes de hosting ──────────────────────────────────────────────── */
.nx-plan{background:var(--nx-white);border:1px solid var(--nx-rule);padding:0 0 28px;height:100%}
.nx-plan--featured{border-color:var(--nx-accent);border-width:2px}
.nx-plan-badge{display:inline-block;background:var(--nx-accent);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px}

/* ── Tablet: tarjetas y planes con el texto centrado ──────────────────────
   A petición del cliente, en el rango tablet (768–1024) el texto de las
   tarjetas de subservicio y de los planes de hosting va centrado. Es donde
   caben de dos en dos y el bloque respira mejor centrado.
   Las listas de especificaciones (.nx-bullets) se dejan a la izquierda: sus
   viñetas con guion y sus divisores solo se leen bien alineadas; centrarlas
   dejaría el guion colgando y el renglón difícil de seguir.
   Se apunta también a `.elementor-heading-title` porque Elementor fija ahí su
   propia alineación y sin esa línea el título ignoraría el centrado. */
@media(min-width:768px) and (max-width:1024px){
  /* Dos por fila SIEMPRE, no solo en tablet ancha.
     El width que pone Elementor (49% las tarjetas, 50% los planes) más el gap
     de 16px suma más de 100% cuando la fila es angosta: a 768px la fila mide
     713px y dos tarjetas de 349px + 16px = 714px, así que la segunda se caía
     al renglón siguiente dejando media fila vacía. Con calc(50% - 10px) dos
     piezas + el gap entran siempre, con 4px de holgura contra el redondeo.
     Selector `.e-con.` (0-2-0) para ganarle al de Elementor (0-1-0). */
  .e-con.nx-svc-block,
  .e-con.nx-plan{
    width:calc(50% - 10px);max-width:calc(50% - 10px);
    flex-basis:calc(50% - 10px)
  }

  /* Texto centrado en tablet (las viñetas se quedan a la izquierda: su guion
     y sus divisores solo se leen bien alineados). */
  .nx-svc-block,
  .nx-svc-block .elementor-heading-title,
  .nx-plan,
  .nx-plan .elementor-heading-title{text-align:center}
  .nx-svc-block .nx-bullets,
  .nx-plan .nx-bullets{text-align:left}
}

/* ── Páginas de perfil (/kim-quiros/ · /albin-alvarez/) ─────────────── */
.nx-profile-hero .nx-profile-role,
.nx-profile-role{font-family:var(--nx-sans);font-weight:600;font-size:clamp(.95rem,1.5vw,1.15rem);
  color:var(--nx-ink70);line-height:1.45;max-width:34ch;margin-top:14px}
.nx-profile-foto img{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:cover;display:block;margin-left:auto}
/* ── «Acerca de mí» en dos columnas ──────────────────────────────────
   El título acompaña la lectura desde la izquierda y los párrafos van en
   bloques de a dos, para no dejar medio ancho de página vacío. */
.nx-bio-head{position:sticky;top:110px}
.nx-bio-block{position:relative;padding-top:20px;border-top:1px solid var(--nx-rule)}
.nx-bio-block .nx-bio-num,
.nx-bio-block .nx-bio-num .elementor-heading-title{
  font-family:var(--nx-serif);font-size:1.5rem;line-height:1;
  color:var(--nx-rule);letter-spacing:-.02em;transition:color .35s var(--nx-ease)
}
.nx-bio-block:hover .nx-bio-num .elementor-heading-title{color:var(--nx-accent)}
.nx-bio-block p{margin-top:10px;font-size:1rem;line-height:1.68;max-width:none}
.nx-bio-block strong{color:var(--nx-ink);font-weight:600}

@media(max-width:1024px){
  .nx-bio-head{position:static;margin-bottom:26px}
}

/* ── Tarjetas de habilidades (perfiles) ──────────────────────────────
   Van sobre la banda oscura, así que necesitan más especificidad que la
   regla `.nx-dark .elementor-widget-heading .elementor-heading-title{color:#fff}`.
   Sin eso el título quedaba BLANCO SOBRE BLANCO: el texto estaba ahí pero no
   se veía, y la tarjeta parecía tener un hueco vacío entre el número y la lista. */
body .nx-profile-skills .nx-skill{
  background:var(--nx-white)!important;
  border:1px solid var(--nx-rule)!important;
  padding:30px 30px 26px!important;
  position:relative;
  transition:border-color .35s var(--nx-ease),box-shadow .35s var(--nx-ease);
}
/* Barra de acento que se traza al pasar el cursor. */
body .nx-profile-skills .nx-skill::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--nx-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--nx-ease);
}
body .nx-profile-skills .nx-skill:hover::before{transform:scaleX(1)}
body .nx-profile-skills .nx-skill:hover{
  border-color:var(--nx-ink)!important;
  box-shadow:0 18px 40px rgba(1,3,7,.28);
}

/* El número pasa a cifra grande en serif: da jerarquía y ritmo a la retícula. */
body .nx-profile-skills .nx-skill .nx-kicker .elementor-heading-title{
  font-family:var(--nx-serif);font-size:2.4rem;font-weight:400;
  letter-spacing:-.02em;line-height:1;text-transform:none;
  color:var(--nx-rule);padding-bottom:0;transition:color .35s
}
body .nx-profile-skills .nx-skill .nx-kicker .elementor-heading-title::after{display:none}
body .nx-profile-skills .nx-skill:hover .nx-kicker .elementor-heading-title{color:var(--nx-accent)}

/* Título: en tinta y separado de la lista por una regla. */
body .nx-profile-skills .nx-skill .elementor-widget-heading:not(.nx-kicker) .elementor-heading-title{
  color:var(--nx-ink);font-family:var(--nx-sans);font-weight:600;
  font-size:clamp(1.1rem,1.4vw,1.28rem);line-height:1.25;
  padding-bottom:16px;border-bottom:1px solid var(--nx-rule);
}
body .nx-profile-skills .nx-skill p,
body .nx-profile-skills .nx-skill li{color:var(--nx-ink70)}
body .nx-profile-skills .nx-skill .nx-bullets{margin-top:4px}
body .nx-profile-skills .nx-skill .nx-bullets li{border-color:var(--nx-rule);font-size:.92rem;padding:9px 0 9px 22px}
/* Kim describe sus habilidades en un párrafo en vez de lista. */
body .nx-profile-skills .nx-skill .elementor-widget-text-editor p{font-size:.95rem;line-height:1.6;margin-top:14px}

/* Galería de proyectos del perfil: las capturas son verticales y muy altas,
   así que se recortan a una proporción fija y se revela el resto al pasar. */
.nx-pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.nx-pf-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--nx-rule);background:var(--nx-white)}
.nx-pf-shot{display:block;overflow:hidden;aspect-ratio:3/4;background:var(--nx-rule)}
.nx-pf-shot img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:object-position 2.4s var(--nx-ease),transform .6s var(--nx-ease)}
.nx-pf-card:hover .nx-pf-shot img{object-position:bottom}
.nx-pf-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px;border-top:1px solid var(--nx-rule)}
.nx-pf-meta b{font-family:var(--nx-sans);font-weight:600;font-size:.95rem;color:var(--nx-ink)}
.nx-pf-meta i{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nx-accent);opacity:0;transition:opacity .35s}
.nx-pf-card:hover{border-color:var(--nx-accent)}
.nx-pf-card:hover .nx-pf-meta i{opacity:1}

.nx-profile-contact .elementor-icon-list-text{color:#fff}

@media(max-width:767px){
  .nx-profile-foto img{margin:0 auto;max-width:100%}
  .nx-pf-grid{grid-template-columns:1fr 1fr;gap:10px}
  .nx-pf-meta{padding:10px 12px;flex-direction:column;gap:4px}
  .nx-pf-meta b{font-size:.85rem}
  .nx-pf-meta i{opacity:1;font-size:.6rem}
}
@media(max-width:380px){
  .nx-pf-grid{grid-template-columns:1fr}
}
@media(hover:none),(pointer:coarse){
  .nx-pf-meta i{opacity:1}
}

/* ── Listado del blog ────────────────────────────────────────────────
   Mismo lenguaje que las tarjetas del resto del sitio: fondo blanco, borde
   fino, esquinas rectas y una barra de acento que se traza al pasar el cursor. */
body .nx-blog .elementor-post{
  background:var(--nx-white);border:1px solid var(--nx-rule);
  position:relative;overflow:hidden;
  transition:border-color .35s var(--nx-ease),box-shadow .35s var(--nx-ease)
}
body .nx-blog .elementor-post::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--nx-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--nx-ease)
}
body .nx-blog .elementor-post:hover::before{transform:scaleX(1)}
body .nx-blog .elementor-post:hover{border-color:var(--nx-ink);box-shadow:0 18px 40px rgba(1,3,7,.10)}

/* Portada: el hover cambia el velo de color, igual que las piezas de
   proyectos del inicio. Sin zoom ni cambio de saturación — la imagen no se
   mueve, solo se tiñe. */
/* Caja cuadrada porque las portadas SON cuadradas (800×800). Con la caja en
   3/2 el `cover` cortaba arriba y abajo; al coincidir las proporciones, la
   imagen entra completa sin recorte y sin franjas vacías. */
body .nx-blog .elementor-post__thumbnail{aspect-ratio:1/1;overflow:hidden;position:relative}
body .nx-blog .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82);transform:none}
body .nx-blog .elementor-post__thumbnail::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,3,7,.06),rgba(1,3,7,.58));
  transition:background .5s var(--nx-ease)
}
body .nx-blog .elementor-post:hover .elementor-post__thumbnail::after{
  background:linear-gradient(180deg,rgba(211,11,78,.24),rgba(1,3,7,.82))
}

/* Sin metadatos en las tarjetas (fecha / número de comentarios). */
body .nx-blog .elementor-post__meta-data{display:none}

body .nx-blog .elementor-post__text{padding:24px 24px 26px}
body .nx-blog .elementor-post__title,
body .nx-blog .elementor-post__title a{
  font-family:var(--nx-sans);font-weight:600;font-size:1.12rem;line-height:1.32;
  color:var(--nx-ink);letter-spacing:-.01em
}
body .nx-blog .elementor-post__title a:hover{color:var(--nx-accent)}
body .nx-blog .elementor-post__excerpt p{font-size:.94rem;line-height:1.6;color:var(--nx-ink70)}
body .nx-blog .elementor-post__read-more{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nx-ink);border-bottom:1.5px solid var(--nx-ink);padding-bottom:4px;
  display:inline-block;margin-top:6px;transition:.3s
}
body .nx-blog .elementor-post__read-more:hover{color:var(--nx-accent);border-color:var(--nx-accent)}

/* Paginación */
body .nx-blog .elementor-pagination{margin-top:44px;padding-top:26px;border-top:1px solid var(--nx-rule)}
body .nx-blog .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;margin:0 3px;
  font-family:var(--nx-sans);font-size:.9rem;font-weight:600;
  color:var(--nx-ink);border:1px solid var(--nx-rule);transition:.3s
}
body .nx-blog .page-numbers:hover{border-color:var(--nx-ink)}
body .nx-blog .page-numbers.current{background:var(--nx-btn);border-color:var(--nx-btn);color:#fff}

/* Sin entradas todavía */
body .nx-blog .elementor-posts-nothing-found{
  padding:40px;border:1px dashed var(--nx-rule);color:var(--nx-ink70);text-align:center
}

/* ── Entradas del blog (plantilla del tema, no del builder) ──────────
   Estas páginas las arma Hello Elementor, así que no pasan por las secciones
   NX y no tenían compensación para el header fijo: el título quedaba tapado
   por la barra y el texto llegaba pegado al footer. */
body.single-post .site-main,
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.error404 .site-main{
  padding-top:clamp(120px,13vw,180px);
  padding-bottom:clamp(64px,9vw,120px);
  padding-left:clamp(20px,5vw,40px);
  padding-right:clamp(20px,5vw,40px);
}

/* Medida de lectura: el texto a 1300px de ancho cansa la vista. */
body.single-post .page-content,
body.single-post .page-header{max-width:760px;margin-left:auto;margin-right:auto}

body.single-post .page-title, body.single-post .entry-title{
  font-family:var(--nx-serif);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;color:var(--nx-ink);
  margin-bottom:14px
}
body.single-post .page-header{
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--nx-rule)
}

body.single-post .page-content{font-size:1.0625rem;line-height:1.72;color:var(--nx-ink70)}
body.single-post .page-content p{margin-bottom:1.25em}
body.single-post .page-content h2{
  font-family:var(--nx-serif);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1.16;color:var(--nx-ink);margin:2em 0 .6em
}
body.single-post .page-content h3{
  font-family:var(--nx-sans);font-weight:600;font-size:1.18rem;
  color:var(--nx-ink);margin:1.7em 0 .5em
}
body.single-post .page-content strong{color:var(--nx-ink);font-weight:600}
body.single-post .page-content a{color:var(--nx-accent);text-decoration:underline;text-underline-offset:3px}

/* Listas con el mismo guion de acento que el resto del sitio. */
body.single-post .page-content ul{list-style:none;padding:0;margin:0 0 1.4em}
body.single-post .page-content ul li{position:relative;padding:8px 0 8px 24px;border-top:1px solid var(--nx-rule)}
body.single-post .page-content ul li:first-child{border-top:0}
body.single-post .page-content ul li::before{
  content:"";position:absolute;left:0;top:1.05em;width:10px;height:1px;background:var(--nx-accent)
}
body.single-post .page-content ol{padding-left:1.2em;margin:0 0 1.4em}
body.single-post .page-content ol li{padding:5px 0}

body.single-post .page-content img{margin:1.6em 0;border:1px solid var(--nx-rule)}
body.single-post .page-content blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid var(--nx-accent);
  font-family:var(--nx-serif);font-size:1.3rem;line-height:1.4;color:var(--nx-ink)
}

/* ── Formularios ───────────────────────────────────────────────────── */
.nx-form .elementor-field-group>label{font-family:var(--nx-sans);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink);margin-bottom:8px}
.nx-form .elementor-field-textual{background:transparent;border:0;border-bottom:1.5px solid var(--nx-rule);border-radius:0;padding:12px 2px;font-family:var(--nx-sans);font-size:1rem;color:var(--nx-ink);transition:border-color .3s}
.nx-form .elementor-field-textual:focus{border-bottom-color:var(--nx-accent);outline:2px solid transparent;outline-offset:2px;box-shadow:none}
.nx-form .elementor-field-textual:focus-visible{outline:2px solid var(--nx-accent);outline-offset:3px}
.nx-form .elementor-message{font-family:var(--nx-sans);font-size:.9rem}
.nx-form .elementor-message-danger{color:var(--nx-accent)}

/* ── Aparición del contenido ──────────────────────────────────────────
   DECISIÓN: el contenido NO se anima. Ni fundido, ni desplazamiento.

   Se probaron las dos variantes y ninguna funcionaba con este diseño:
   el desplazamiento rasteriza el texto en posiciones fraccionarias y lo
   deja borroso, y el fundido sobre tipografía serif de gran tamaño
   produce un parpadeo igual de molesto. Además, animar el contenido lo
   deja invisible si el JavaScript falla.

   La clase .nx-rv se conserva para no tener que reconstruir las páginas,
   pero ya no oculta nada: es solo un gancho para el JS. */
body .elementor-element.nx-rv,
body .e-con.nx-rv,
.nx-rv{opacity:1}

/* Red de seguridad contra el fundido del lazy load de Elementor.
   El experimento queda desactivado en el kit; esto solo cubre el caso de que
   alguien lo reactive desde Elementor → Experimentos.

   ALCANCE: SOLO imágenes. Nunca contenedores.
   La primera versión de esta regla incluía `.e-lazyloaded` con !important, y
   esa clase también la llevan los contenedores — entre ellos los tres mensajes
   del hero, que se ocultan con opacity:0. El !important les forzaba opacidad 1
   y los tres titulares aparecían superpuestos. Por eso aquí se limita a <img>
   y no se usa !important. */
img.lazyload,
img.lazyloading,
img.lazyloaded{opacity:1;transition:none}

/* ── El movimiento vive en la regla de acento ─────────────────────────
   En su lugar, el gesto de entrada lo hace un elemento pensado para
   moverse: la línea de 1px que acompaña a cada etiqueta de sección se
   traza de izquierda a derecha al entrar en pantalla.

   Es coherente con la marca — el blueprint define «el Nexo» como una línea
   que conecta — y es imposible que distorsione nada: lo que se anima es un
   rectángulo de un píxel, sin texto ni imagen dentro. */
.nx-kicker .elementor-heading-title{position:relative;display:inline-block;padding-bottom:9px}
.nx-kicker .elementor-heading-title::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--nx-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .75s cubic-bezier(.22,.7,.2,1)}
.nx-kicker.nx-in .elementor-heading-title::after{transform:scaleX(1)}
/* Sobre el hero la etiqueta va en blanco: la línea la acompaña. */
.nx-hero .nx-kicker .elementor-heading-title::after{background:rgba(255,255,255,.55)}

/* ── Footer ─────────────────────────────────────────────────────────── */
.nx-footer{background:var(--nx-dark);border-top:1px solid var(--nx-rule-dark)}
.nx-footer p,.nx-footer li,.nx-footer a{color:var(--nx-dark-txt);font-size:.875rem}
/* La lista de contacto a 15px: la línea de dirección es la más larga y a su
   tamaño previo (17px, el que fija Elementor) «Costa Rica» saltaba a un
   segundo renglón. A 15px entra completa en una sola línea dentro de su
   columna en escritorio, y las tres líneas quedan del mismo tamaño.
   `.nx-footer` + doble clase para ganarle al tamaño por defecto del widget. */
.nx-footer .nx-footer-contact .elementor-icon-list-text{font-size:15px}
.nx-footer a{text-decoration:none;transition:color .3s}
.nx-footer a:hover{color:var(--nx-btn)}
.nx-footer .elementor-icon-list-item a:hover{color:var(--nx-btn)}

/* ── Footer centrado en móvil, tablet y portátiles chicos ────────────
   Al apilarse en una sola columna, el contenido alineado a la izquierda deja
   un bloque angosto pegado a un borde y mucho aire al otro lado. Centrado
   queda equilibrado. En escritorio se mantienen las tres columnas alineadas
   a la izquierda, que es donde esa retícula sí funciona. */
@media(max-width:1024px){
  .nx-footer{text-align:center}
  .nx-footer .e-con,
  .nx-footer .e-con-inner{align-items:center}
  /* Al apilarse, cada columna conserva su ancho de escritorio (42/30/28%) y
     el contenido quedaba centrado dentro de esa franja angosta, es decir
     descolocado respecto de la página. Ocupando el 100% el centrado coincide
     con el centro real del footer. */
  .nx-footer .e-con-inner > .e-con{width:100%!important;max-width:100%}

  /* Se centra la LISTA COMPLETA como bloque, no cada renglón por separado.
     Centrando renglón a renglón, como cada texto mide distinto, los iconos
     quedaban escalonados en diagonal. Así la lista se encoge al ancho de su
     contenido, se centra entera, y por dentro los iconos quedan alineados
     en columna con el texto a la izquierda. */
  .nx-footer .elementor-widget-icon-list{text-align:center}
  .nx-footer .elementor-icon-list-items{
    display:inline-block;width:auto;max-width:min(330px,88%);text-align:left
  }
  .nx-footer .elementor-icon-list-item,
  .nx-footer .elementor-icon-list-item a{
    justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:10px
  }
  /* El icono no se encoge y se alinea con la primera línea del texto. */
  .nx-footer .elementor-icon-list-icon{flex:0 0 auto;margin-top:.3em}
  .nx-footer .elementor-icon-list-text{flex:1 1 auto;text-align:left}

  /* Menú de enlaces en horizontal ─────────────────────────────────────
     Son etiquetas cortas: apiladas ocupaban cinco renglones para nada. En
     fila se leen de un vistazo y el footer queda más compacto. La lista de
     contacto se mantiene vertical porque la dirección es larga y en fila
     rompería el renglón. */
  /* La lista debe ocupar todo el ancho de su columna: con width:auto se
     encogía a 267px de los 287 disponibles y eso obligaba un renglón extra. */
  .nx-footer .nx-footer-links{width:100%}
  .nx-footer .nx-footer-links .elementor-icon-list-items{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:6px 18px;width:100%;max-width:100%
  }
  /* Como etiquetas en fila, 17px desperdiciaba ancho. 15px sigue muy por
     encima del mínimo legible y permite tres enlaces por renglón. */
  .nx-footer .nx-footer-links .elementor-icon-list-text{font-size:15px}
}

/* En móviles angostos los dos enlaces largos («Inicia un proyecto» y
   «Política de privacidad») no caben juntos por unos pocos píxeles y cada uno
   se quedaba solo en su renglón. Un punto menos de cuerpo y algo menos de
   separación los junta y la lista baja de tres renglones a dos. */
@media(max-width:420px){
  .nx-footer .nx-footer-links .elementor-icon-list-items{gap:6px 14px}
  .nx-footer .nx-footer-links .elementor-icon-list-text{font-size:14px}
  .nx-footer .nx-footer-links .elementor-icon-list-item:not(:last-child)::after{margin-left:14px}
  .nx-footer .nx-footer-links .elementor-icon-list-item{
    width:auto;margin:0;white-space:nowrap
  }
  .nx-footer .nx-footer-links .elementor-icon-list-item a{align-items:center;gap:0}
  /* Sin el icono de check: en un menú de enlaces no aporta información y
     ocupaba ~24px por ítem, lo que forzaba el doble de renglones. */
  .nx-footer .nx-footer-links .elementor-icon-list-icon{display:none}
  /* Separador entre enlaces, salvo el último de cada fila. */
  .nx-footer .nx-footer-links .elementor-icon-list-item:not(:last-child)::after{
    content:"·";margin-left:20px;color:var(--nx-rule-dark)
  }

  .nx-footer .elementor-widget-image{text-align:center}
  .nx-footer .elementor-widget-image img{margin-left:auto;margin-right:auto}

  /* Barra inferior: copyright y redes uno debajo del otro, centrados. */
  .nx-footer .nx-footer-bottom,
  .nx-footer .nx-footer-bottom > .e-con-inner{
    flex-direction:column!important;align-items:center;gap:12px;text-align:center
  }
  .nx-footer .nx-footer-bottom div[style*="flex-end"]{justify-content:center!important}
}

/* Claim del footer centrado. Se centra también el logo que va encima:
   los dos forman un mismo bloque y dejar el logo a la izquierda con el texto
   centrado se leía desalineado. */
.nx-footer .nx-footer-claim p{text-align:center;margin-left:auto;margin-right:auto}
.nx-footer .nx-footer-claim{text-align:center}
.nx-footer .elementor-widget-image:first-child{text-align:center}
.nx-footer .elementor-widget-image:first-child img{margin-left:auto;margin-right:auto}

/* Iconos del footer: blancos en reposo, #c40b49 al pasar el cursor.
   Se califica con `body` porque Elementor genera el color de los iconos por
   widget con un selector de 3 niveles que si no gana el empate. */
body .nx-footer .elementor-icon-list-icon i,
body .nx-footer .elementor-icon-list-icon svg,
body .nx-footer .elementor-social-icon i,
body .nx-footer .elementor-social-icon svg{
  color:#fff;fill:#fff;transition:color .3s,fill .3s
}
body .nx-footer .elementor-icon-list-item:hover .elementor-icon-list-icon i,
body .nx-footer .elementor-icon-list-item:hover .elementor-icon-list-icon svg,
body .nx-footer a:hover .elementor-social-icon i,
body .nx-footer a:hover .elementor-social-icon svg{
  color:var(--nx-btn);fill:var(--nx-btn)
}

/* Mismo criterio en los iconos de contacto de las páginas de perfil,
   que también viven sobre fondo oscuro. */
body .nx-profile-contact .elementor-icon-list-icon i,
body .nx-profile-contact .elementor-icon-list-icon svg{color:#fff;fill:#fff;transition:color .3s,fill .3s}
body .nx-profile-contact .elementor-icon-list-item:hover .elementor-icon-list-icon i,
body .nx-profile-contact .elementor-icon-list-item:hover .elementor-icon-list-icon svg{color:var(--nx-btn);fill:var(--nx-btn)}

/* ── Accesibilidad ─────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,.elementor-button:focus-visible{outline:2px solid var(--nx-accent);outline-offset:3px}
.nx-skip{position:absolute;left:-9999px}
.nx-skip:focus{left:8px;top:8px;z-index:9999;background:var(--nx-accent);color:#fff;
  padding:12px 18px;min-height:44px;display:flex;align-items:center;font-weight:600}
/* El logo es el enlace al inicio: también necesita área táctil suficiente. */
.nx-logo-link{display:flex;align-items:center;min-height:44px}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Verificado en 360 · 390 · 414 · 768 · 1024 · 1280 · 1440 · 1920.
   Principio: no se "encoge" el diseño de escritorio — en cada corte cambia
   la jerarquía. Lo que en escritorio es simultáneo (imagen + texto), en
   móvil pasa a ser secuencial.
   ══════════════════════════════════════════════════════════════════════ */

/* La imagen que acompaña a cada servicio en móvil: oculta en escritorio,
   donde ese trabajo lo hace el panel sticky. */
.nx-svc-img{display:none}

/* ── ≤1280 · portátiles ─────────────────────────────────────────────── */
@media(max-width:1280px){
  .nx-sticky-pane{height:min(66vh,540px)}
  /* La variante «captura completa» conserva su proporción: si le imponemos
     una altura fija, el panel queda mucho más alto que la captura y sobra
     medio panel en negro. */
  .nx-sticky-pane--fit{height:auto}
  .nx-pj--a{grid-column:span 6}
  .nx-pj--b{grid-column:span 6}
  .nx-pj--c,.nx-pj--d,.nx-pj--e{grid-column:span 4;min-height:240px}
}

/* ── ≤1024 · tablet horizontal. Cae el panel sticky ─────────────────── */
@media(max-width:1024px){
  /* Se oculta la columna entera, no solo el panel: si no, queda una
     columna vacía ocupando la mitad del ancho. */
  .nx-sticky-col{display:none}
  /* Al ocultar la columna del panel, la columna hermana (la lista de
     servicios) conservaba su ancho de escritorio —la mitad— y todo el bloque
     quedaba pegado a la izquierda con medio ancho vacío a la derecha.
     Recupera el 100% ahora que está sola. */
  .nx-sticky-col + .e-con{width:100%;flex:1 1 100%;max-width:100%}
  .nx-svc-item{opacity:1}
  /* Cada servicio recupera su imagen, ahora dentro del propio bloque. */
  .nx-svc-img{display:block;margin-bottom:20px}
  .nx-svc-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

  /* Bento a 2 columnas: en tablet el stack de 5 piezas es demasiado largo. */
  .nx-pj--a,.nx-pj--b{grid-column:span 12;min-height:300px}
  .nx-pj--c,.nx-pj--d,.nx-pj--e{grid-column:span 6;min-height:240px}
  .nx-pj-c .nx-go{opacity:1;transform:none}
}

/* ── 768–1024 · retícula de «¿Por qué elegirnos?» ────────────────────────
   Los bloques venían al 50% exacto, pero con la separación de 26px dos ya no
   caben en un renglón: cada uno se quedaba solo, ocupando media pantalla y
   dejando la otra mitad vacía. Descontando la separación vuelven a ir de dos
   en dos. Se acota a este rango porque por debajo de 768 van a ancho completo.
   ------------------------------------------------------------------------ */
@media(min-width:768px) and (max-width:1024px){
  .nx-reason{width:calc(50% - 13px);flex:0 0 calc(50% - 13px);max-width:calc(50% - 13px)}
}

/* ── ≤767 · móvil ───────────────────────────────────────────────────── */
@media(max-width:767px){
  body{font-size:16px;line-height:1.6}

  /* El hero no ocupa la pantalla completa: se deja ver que hay más abajo. */
  .nx-hero{min-height:86svh}
  .nx-hero-media img{animation:none;transform:none}   /* sin Ken Burns: ahorra batería */
  .nx-hero h1,.nx-hero .nx-hero-title{font-size:clamp(2.1rem,10vw,3.2rem);line-height:.98}
  .nx-hero p{font-size:1rem;max-width:100%}
  .nx-hero-dots{margin-top:24px;padding-top:20px}

  /* La etiqueta en versalitas hereda el interlineado de los títulos (~1.2),
     que en escritorio va en un solo renglón. En móvil parte en dos o tres y
     los renglones quedaban montados. Se le da aire y se afloja algo el
     espaciado entre letras para que quepa más texto por renglón. */
  .nx-kicker,.nx-kicker .elementor-heading-title{line-height:1.9;letter-spacing:.15em}
  .nx-kicker .elementor-heading-title{padding-bottom:12px}

  .nx-hero-sm{padding-top:112px}
  .nx-hero-sm h1,.nx-hero-sm h1 .elementor-heading-title{font-size:clamp(2rem,9vw,2.8rem)}

  /* Una sola columna en todo lo que era retícula. */
  .nx-bento{grid-template-columns:1fr;gap:10px}
  .nx-pj--a,.nx-pj--b,.nx-pj--c,.nx-pj--d,.nx-pj--e{grid-column:span 1;min-height:220px}
  .nx-pj-c{padding:20px}

  .nx-svc-item{padding:28px 0}
  .nx-marquee{padding:16px 0}
  .nx-marquee-track{gap:28px}
  .nx-marquee-track span{font-size:.7rem;letter-spacing:.16em}

  .nx-plan{padding-bottom:20px}
  .nx-reason{padding-top:16px}
  .nx-chip{padding:9px 16px;margin:0 6px 6px 0}

  /* Botones a ancho completo: más fáciles de acertar con el pulgar. */
  .nx-btn .elementor-button,a.nx-btn{width:100%;text-align:center;padding:16px 24px}
  .nx-btn--ghost .elementor-button,a.nx-btn--ghost{width:auto}

  /* El CTA del header se compacta pero sigue visible junto al hamburguesa.
     OJO: `_css_classes` de Elementor va al CONTENEDOR del widget, no al <a>.
     Por eso hay que apuntar a `.nx-header-cta .elementor-button`; con
     `a.nx-header-cta` la regla no aplicaba y el botón salía a ancho completo
     ocupando una fila entera del header en móvil. */
  /* CTA compacto. El alto táctil se mantiene en 44px, pero el texto va
     CENTRADO en vez de arriba: con `inline-block` los píxeles que sobran del
     min-height se agregaban todos debajo de la línea de texto y el botón se
     veía grueso y desbalanceado. Con inline-flex el aire queda repartido. */
  body .nx-header .nx-header-cta .elementor-button{
    display:inline-flex;align-items:center;justify-content:center;
    width:auto;padding:0 14px;font-size:.66rem;letter-spacing:.04em;
    line-height:1;min-height:40px;height:40px
  }
  :root{--nx-logo-h:30px}
  .nx-header .nx-header-bar{gap:10px;padding-top:8px;padding-bottom:8px}

  /* El hamburguesa quedaba pegado al borde. Se le da aire por dentro del
     área táctil: el icono se separa 6px del margen sin achicar el objetivo. */
  .nx-header .nx-header-bar .e-con-inner{padding-right:6px}
  .nx-header .elementor-menu-toggle{
    padding:4px;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center
  }
  .nx-header .elementor-menu-toggle svg,
  .nx-header .elementor-menu-toggle i{font-size:24px;width:24px;height:24px}

  /* Formularios: una columna y campos con altura táctil cómoda. */
  .nx-form .elementor-field-group{width:100%!important}
  .nx-form .elementor-field-textual{min-height:48px;font-size:16px} /* 16px evita el zoom automático de iOS */

  /* Área táctil por ancho de pantalla, no solo por tipo de puntero:
     los listados del footer quedaban en 28px de alto. */
  .nx-footer .elementor-icon-list-item{margin-bottom:2px}
  .nx-footer .elementor-icon-list-item a,
  .nx-footer .elementor-icon-list-text{min-height:48px;display:flex;align-items:center}
  .nx-footer .elementor-social-icon,
  .nx-footer a[href*="instagram"],.nx-footer a[href*="facebook"]{
    min-height:48px;display:inline-flex;align-items:center;padding-right:14px}
}

/* ── ≤410 · el header en pantallas angostas ──────────────────────────
   Logo + CTA + hamburguesa no entran en 360px con los tamaños normales: el
   hamburguesa terminaba 30px FUERA de la pantalla. No lo detectó la auditoría
   de desbordes porque el header es `position:fixed` y su desborde no cuenta
   en el scroll del documento; se vio midiendo la posición del propio botón. */
@media(max-width:410px){
  :root{--nx-logo-h:26px}
  body .nx-header .nx-header-cta .elementor-button{
    padding:7px 10px;font-size:.6rem;letter-spacing:.02em
  }
  .nx-header .nx-header-bar{gap:6px}
  .nx-header .nx-header-bar .e-con-inner{padding-right:2px}
}

/* ── ≤380 · pantallas pequeñas (iPhone SE, Android compactos) ───────── */
@media(max-width:380px){
  .nx-hero h1,.nx-hero .nx-hero-title{font-size:clamp(1.9rem,9.5vw,2.4rem)}
  .nx-pj-c h3{font-size:1.1rem}
  .nx-bullets li{font-size:.9rem}
}

/* ── ≥1600 · pantallas grandes ──────────────────────────────────────── */
@media(min-width:1600px){
  /* El contenedor ya tope a 1360px; se agranda la escala tipográfica para
     que el hero no se vea perdido en un monitor de 24". */
  .nx-hero h1,.nx-hero .nx-hero-title{font-size:clamp(5rem,6vw,7.5rem)}
  .nx-sticky-pane{height:min(74vh,680px)}
  .nx-sticky-pane--fit{height:auto}
}

/* ── Reglas táctiles y de puntero grueso ────────────────────────────── */
@media(hover:none),(pointer:coarse){
  /* Sin hover no hay estados ocultos: todo lo que se revela al pasar el
     cursor tiene que estar visible desde el principio. */
  .nx-pj-c .nx-go{opacity:1;transform:none}
  .nx-svc-item{opacity:1}
  /* Área táctil mínima de 48px (WCAG 2.1 AA · 2.5.5) */
  .nx-header .elementor-nav-menu a,
  .nx-footer .elementor-icon-list-item a{min-height:48px;display:flex;align-items:center}
}

/* ── prefers-reduced-motion: se anula TODO el movimiento ───────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .nx-rv{opacity:1!important;transform:none!important}
  .nx-svc-item{opacity:1!important}
  .nx-hero-media img{transform:none!important}
}

/* ══ Consentimiento de cookies ═════════════════════════════════════════════
   Aviso al pie + panel de preferencias. El aviso NO tapa la pantalla: es una
   franja al pie que deja seguir leyendo. El panel sí es modal, porque ahí la
   persona está tomando una decisión y conviene que no se distraiga.
   Se apoya en las variables del sistema, así que sigue la marca sin más.
   ────────────────────────────────────────────────────────────────────────── */

.nx-ck{
  position:fixed;left:0;right:0;bottom:0;z-index:995;
  background:var(--nx-dark);color:#fff;
  border-top:1px solid #2A2A2A;
  box-shadow:0 -8px 30px rgba(1,3,7,.28);
  animation:nx-ck-entra .4s cubic-bezier(.4,0,.2,1)
}
@keyframes nx-ck-entra{from{transform:translateY(100%)}to{transform:translateY(0)}}

.nx-ck__caja{
  max-width:1360px;margin:0 auto;padding:20px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap
}
.nx-ck__texto{
  flex:1 1 420px;margin:0;
  font-size:.86rem;line-height:1.65;color:#D8D8D8
}
.nx-ck__texto a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.nx-ck__texto a:hover{color:var(--nx-accent)}

.nx-ck__acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* OJO con la especificidad: el Kit de Elementor pinta TODO <button> del sitio
   con el color de marca (`.elementor-kit-6 button`, que vale más que una sola
   clase). Por eso estas reglas van con `body` y doble clase: si no, los
   botones «Rechazar» y «Preferencias» salían rosados como el principal y se
   perdía la jerarquía entre aceptar y rechazar.
   44px de alto mínimo: es el tamaño táctil accesible. */
body .nx-ck__btn.nx-ck__btn{
  min-height:44px;padding:12px 22px;border:1px solid transparent;border-radius:0;
  font-family:var(--nx-sans);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:.3s cubic-bezier(.4,0,.2,1);white-space:nowrap
}
body .nx-ck__btn.nx-ck__btn--solido{background:var(--nx-btn);color:#fff}
body .nx-ck__btn.nx-ck__btn--solido:hover{background:#fff;color:var(--nx-dark)}
body .nx-ck__btn.nx-ck__btn--fantasma{background:transparent;color:#fff;border-color:#4A4A4A}
body .nx-ck__btn.nx-ck__btn--fantasma:hover{border-color:#fff;background:rgba(255,255,255,.06)}
body .nx-ck__btn.nx-ck__btn--texto{background:transparent;color:#BFBFBF;border-color:transparent;text-decoration:underline;text-underline-offset:4px}
body .nx-ck__btn.nx-ck__btn--texto:hover{color:#fff}
body .nx-ck__btn.nx-ck__btn:focus-visible{outline:2px solid var(--nx-accent);outline-offset:3px}

/* ── Panel de preferencias ─────────────────────────────────────────────── */

.nx-ck-fondo{position:fixed;inset:0;z-index:998;background:rgba(1,3,7,.62)}

/* `hidden` tiene que ganarle al `display:flex` de abajo. Sin esta línea el
   panel se veía abierto nada más cargar la página, porque una clase pesa lo
   mismo que el atributo y nx.css se carga después del reset del tema. */
.nx-ck-panel[hidden],.nx-ck[hidden],.nx-ck-fondo[hidden]{display:none}

.nx-ck-panel{
  position:fixed;z-index:999;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px));max-height:min(86vh,720px);
  display:flex;flex-direction:column;
  background:var(--nx-dark);color:#fff;border:1px solid #2A2A2A;
  box-shadow:0 24px 70px rgba(1,3,7,.5)
}
.nx-ck-panel__cab{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid #262626
}
.nx-ck-panel__cab h2{
  margin:0;font-family:var(--nx-serif);font-size:1.35rem;color:#fff;font-weight:400
}
body .nx-ck-panel__cerrar{
  background:none;border:0;border-radius:0;color:#9A9A9A;font-size:1.9rem;line-height:1;
  cursor:pointer;padding:0;width:44px;height:44px;transition:color .3s
}
body .nx-ck-panel__cerrar:hover{background:none;color:#fff}
.nx-ck-panel__cerrar:focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}

.nx-ck-panel__cuerpo{padding:8px 24px 4px;overflow-y:auto}

.nx-ck-cat{padding:18px 0;border-bottom:1px solid #1E1E1E}
.nx-ck-cat:last-of-type{border-bottom:0}
.nx-ck-cat__fila{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:34px}
.nx-ck-cat__fila input{width:18px;height:18px;accent-color:var(--nx-accent);cursor:pointer;flex:0 0 auto}
.nx-ck-cat__fila input:disabled{cursor:default;opacity:.55}
.nx-ck-cat__nombre{font-weight:700;font-size:.95rem;color:#fff}
.nx-ck-cat__estado{
  margin-left:auto;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8A8A8A
}
.nx-ck-cat__desc{margin:8px 0 0 30px;font-size:.82rem;line-height:1.6;color:#B4B4B4}

.nx-ck-panel__nota{
  margin:18px 0 4px;padding-top:16px;border-top:1px solid #1E1E1E;
  font-size:.78rem;line-height:1.6;color:#9A9A9A
}
.nx-ck-panel__nota a{color:#D8D8D8;text-decoration:underline;text-underline-offset:3px}
.nx-ck-panel__nota a:hover{color:var(--nx-accent)}

.nx-ck-panel__pie{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding:18px 24px;border-top:1px solid #262626
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */

@media(max-width:767px){
  .nx-ck__caja{padding:18px;gap:16px}
  .nx-ck__texto{flex:1 1 100%;font-size:.82rem}
  /* Los botones en fila, con «Aceptar» primero por ser la acción esperada,
     pero sin quitarle presencia a «Rechazar»: ambos con el mismo peso visual. */
  .nx-ck__acciones{width:100%;gap:8px}
  .nx-ck__btn--solido,.nx-ck__btn--fantasma{flex:1 1 0;padding:12px 14px;text-align:center}
  .nx-ck__btn--texto{flex:1 1 100%;order:3;padding:6px}

  .nx-ck-panel{width:100vw;max-width:100vw;max-height:92vh;left:0;top:auto;bottom:0;transform:none}
  .nx-ck-panel__pie .nx-ck__btn{flex:1 1 0}
}

/* El botón flotante de WhatsApp se aparta mientras el aviso está a la vista:
   si no, quedan uno encima del otro en móvil. La altura la publica
   nx-consent.js en `--nx-ck-alto`, porque el aviso mide muy distinto según
   el ancho (86px en escritorio, ~280px en un móvil angosto) y un número fijo
   se quedaba corto justo donde más estorbaba. */
.nx-wa{transition:transform .3s cubic-bezier(.4,0,.2,1),bottom .3s cubic-bezier(.4,0,.2,1)}
@media(max-width:767px){
  body:has(.nx-ck:not([hidden])) .nx-wa{bottom:calc(var(--nx-ck-alto,0px) + 16px)}
}
@media(prefers-reduced-motion:reduce){.nx-wa{transition:none}}

@media(prefers-reduced-motion:reduce){
  .nx-ck{animation:none}
  .nx-ck__btn,.nx-ck-panel__cerrar{transition:none}
}

/* ══ Error 404 ═════════════════════════════════════════════════════════════
   Página de «no encontrado». Centrada, con un 404 grande decorativo detrás del
   mensaje y accesos rápidos a las secciones para rescatar la visita. Usa el
   header y footer normales del sitio (se aplican por la condición «todo el
   sitio»), así que aquí solo se maqueta el cuerpo.
   ────────────────────────────────────────────────────────────────────────── */
.nx-404{position:relative;text-align:center;overflow:hidden}
/* max-width con min(...,100%): el 720px es para escritorio, pero en móvil el
   inner tiene que ceñirse al viewport o el contenido centrado se desborda. */
.nx-404 > .e-con-inner{align-items:center;max-width:min(720px,100%);margin-inline:auto}

/* El «404» gigante: marca de agua tenue detrás del contenido, en la serif de
   la marca. No estorba la lectura porque va muy claro y sin eventos de puntero. */
.nx-404-num{
  font-family:var(--nx-serif);
  font-size:clamp(9rem,34vw,22rem);
  line-height:.8;color:var(--nx-accent);opacity:.10;
  letter-spacing:-.03em;pointer-events:none;user-select:none;
  margin-bottom:-.18em
}

.nx-404 .nx-kicker .elementor-heading-title{color:var(--nx-accent)}
.nx-404 h1,.nx-404 .elementor-heading-title{margin-top:.2em}
.nx-404-texto p{
  /* min(...,100%) para que en pantallas angostas nunca supere el ancho
     disponible: sin el 100% de tope, la caja de 46ch quedaba más ancha que el
     móvil y el texto centrado se salía y se cortaba por el borde. */
  max-width:min(46ch,100%);margin:14px auto 0;color:var(--nx-ink70);font-size:1.06rem;
  overflow-wrap:break-word
}
.nx-404-cta{margin-top:30px}
/* El segundo botón (Contáctenos) es la acción secundaria: contorno en vez de
   relleno, para no competir con «Volver al inicio». La variante ghost por
   defecto sale rellena fuera del header, así que aquí se le da su forma de
   contorno sobre fondo claro. */
.nx-404-cta .nx-btn--ghost .elementor-button,
.nx-404-cta a.nx-btn--ghost{
  background:transparent;color:var(--nx-ink);border:1px solid var(--nx-rule)
}
.nx-404-cta .nx-btn--ghost .elementor-button:hover,
.nx-404-cta a.nx-btn--ghost:hover{
  background:var(--nx-ink);color:#fff;border-color:var(--nx-ink)
}

/* Accesos rápidos como chips: fáciles de tocar y visualmente distintos de los
   dos botones principales de arriba. */
.nx-404-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px
}
.nx-404-links a{
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 18px;border:1px solid var(--nx-rule);border-radius:999px;
  font-family:var(--nx-sans);font-size:.85rem;font-weight:600;
  color:var(--nx-ink);text-decoration:none;
  transition:background .3s var(--nx-ease),color .3s var(--nx-ease),border-color .3s var(--nx-ease)
}
.nx-404-links a:hover{background:var(--nx-accent);border-color:var(--nx-accent);color:#fff}
.nx-404-links a:focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}

@media(max-width:767px){
  /* Se topa a 34vw para que «404» quepa siempre en pantallas angostas y no
     empuje el ancho de la página. */
  .nx-404-num{font-size:clamp(6rem,34vw,10rem);max-width:100%;overflow:hidden}
  .nx-404-cta .nx-btn .elementor-button,.nx-404-cta a.nx-btn{width:auto}
  .nx-404-links a{font-size:.8rem;padding:8px 15px}
}