/* =========================================================
   NUNKY — CORRECCIONES DE USABILIDAD, SAFARI Y RESPONSIVE
   Fecha: 2026-08-04
   Este archivo se carga al final para corregir conflictos sin
   alterar la identidad visual ni el contenido de las páginas.
========================================================= */

:root {
  --nk-header-max: 1220px;
  --nk-header-edge: 8px;
  --nk-mobile-breakpoint: 1180px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-width: 320px;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

main,
section,
.container,
.header-content,
[class*="-grid"],
[class*="-layout"],
[class*="-split"] {
  min-width: 0;
}

[class*="-grid"] > *,
[class*="-layout"] > *,
[class*="-split"] > * {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
a,
button,
summary,
li {
  overflow-wrap: break-word;
}

/* El header ya no se centra mediante transform. En Safari, la mezcla de
   position:fixed + transform + backdrop-filter podía crear bloqueos de
   composición, recortes de menús y zonas que dejaban de responder. */
.header {
  left: 0 !important;
  right: 0 !important;
  width: calc(100% - (var(--nk-header-edge) * 2)) !important;
  max-width: var(--nk-header-max) !important;
  margin-inline: auto !important;
  transform: none !important;
  isolation: isolate;
  background-clip: padding-box;
}

.header-light {
  background: rgba(255, 255, 255, .94) !important;
}

.header-dark {
  background: rgba(7, 17, 31, .94) !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header {
    -webkit-backdrop-filter: saturate(125%) blur(14px);
    backdrop-filter: saturate(125%) blur(14px);
  }
}

.header .container {
  width: 100% !important;
  max-width: none !important;
}

.header-content {
  position: relative;
}

.logo-wrap,
.logo-img {
  flex: 0 0 auto;
}

.logo-img {
  height: 42px !important;
  max-width: 164px !important;
}

/* Apertura explícita por teclado/clic además del hover. */
.nav-dropdown.is-open > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.nav-dropdown.is-open > .dropdown-menu:not(.dropdown-menu-smart-company):not(.dropdown-menu-products-mega):not(.dropdown-menu-services-full):not(.dropdown-menu-company) {
  transform: translateY(0) !important;
}

.nav-dropdown.is-open > .dropdown-menu-smart-company,
.nav-dropdown.is-open > .dropdown-menu-products-mega,
.nav-dropdown.is-open > .dropdown-menu-services-full {
  transform: translate(-50%, 0) !important;
}

.nav-dropdown.is-open > .dropdown-menu-company {
  transform: translate(-50%, 0) !important;
}

.nav-dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  pointer-events: none;
}

.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
  pointer-events: auto;
}

/* En pantallas táctiles, :hover puede quedarse bloqueado en Safari/iPadOS.
   Solo la clase controlada por JavaScript mantiene abierto el menú. */
@media (hover: none), (pointer: coarse) {
  .nav-dropdown:not(.is-open):hover > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Se activa el menú compacto antes de que los textos del header empiecen
   a comprimirse. Esto cubre MacBook con ventana reducida, iPad y tablets. */
@media (max-width: 1180px) {
  .header {
    top: max(8px, env(safe-area-inset-top)) !important;
  }

  .header.scrolled {
    top: max(6px, env(safe-area-inset-top)) !important;
  }

  .header-content {
    min-height: 70px !important;
    padding-inline: .8rem !important;
  }

  .nav,
  .header-actions {
    display: none !important;
  }

  .menu-toggle {
    display: block !important;
    position: relative;
    z-index: 1003;
    flex: 0 0 46px;
    min-width: 46px;
    min-height: 46px;
    border-color: rgba(127, 145, 166, .28) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom)) !important;
    padding: .55rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 18px !important;
    background: rgba(7, 15, 28, .985) !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .34) !important;
    z-index: 1001 !important;
  }

  .mobile-menu.open {
    display: grid !important;
  }

  .mobile-link,
  .mobile-dropdown summary {
    min-height: 52px;
    padding: .82rem .35rem !important;
    line-height: 1.35;
    touch-action: manipulation;
  }

  .mobile-sublink {
    min-height: 44px;
    padding: .7rem .55rem !important;
    line-height: 1.4;
  }

  .mobile-submenu {
    padding-left: .65rem !important;
  }

  body.menu-open {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    touch-action: none;
  }
}

@media (min-width: 1181px) {
  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
}

/* Alturas de portada más estables en Safari móvil. */
@supports (min-height: 100svh) {
  .hero-home-refined,
  .hero,
  .smart-hero,
  .factory-hero-v2,
  .human-editorial-hero,
  .nf-hero {
    min-height: 100svh;
  }
}

/* Logos del index: PNG transparentes, sin tarjetas y con ritmo uniforme.
   Cada elemento ocupa el mismo espacio y conserva la proporción de la marca. */
.logos-home-proof .logo-marquee {
  padding-block: .85rem 1.2rem !important;
}

.logos-home-proof .logo-track {
  gap: 0 !important;
  padding-inline: 0 !important;
  animation-name: marquee !important;
  animation-duration: 76s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}

.logos-home-proof .logo-item {
  width: 180px !important;
  height: 76px !important;
  flex: 0 0 180px !important;
  margin: 0 48px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.logos-home-proof .logo-item img {
  display: block;
  width: 180px !important;
  height: 76px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* El carrusel no se detiene al pasar el cursor o navegar con teclado. */
.logos-home-proof .logo-marquee:hover .logo-track,
.logos-home-proof .logo-marquee:focus-within .logo-track {
  animation-play-state: running !important;
}

@media (max-width: 640px) {
  .logos-home-proof .logo-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
  }

  .logos-home-proof .logo-track {
    animation-duration: 70s !important;
  }

  .logos-home-proof .logo-item {
    width: 156px !important;
    height: 66px !important;
    flex-basis: 156px !important;
    margin-right: 34px !important;
  }

  .logos-home-proof .logo-item img {
    width: 156px !important;
    height: 66px !important;
  }
}

/* Tablas y bloques anchos no deben forzar scroll horizontal de toda la web. */
.table-responsive,
table {
  max-width: 100%;
}

@media (max-width: 760px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn,
  a.btn,
  button.btn {
    white-space: normal;
    text-align: center;
  }
}

/* El foco permanece visible en Safari y navegación por teclado. */
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid #22d3ee !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none !important;
    transform: none !important;
  }

  .logo-marquee {
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* 2026-10-05: header fijo de borde a borde, también antes del scroll.
   El fondo ocupa la ventana; el contenido conserva el ancho de lectura. */
.header.header,
.header.header.scrolled {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-sizing: border-box;
  transform: none !important;
  padding-top: env(safe-area-inset-top, 0px);
}

.header.header > .container {
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.header.header .header-content {
  padding-inline: clamp(1rem, 2.5vw, 2.5rem) !important;
  gap: clamp(.65rem, 1.2vw, 1.25rem);
}

/* Evita que los nombres se partan en ordenadores con ventanas estrechas. */
@media (min-width: 1181px) {
  .header.header .nav {
    gap: clamp(.75rem, 1.5vw, 1.5rem);
    min-width: 0;
  }
  .header.header .nav-link,
  .header.header .header-cta {
    white-space: nowrap;
  }
}

@media (max-width: 1180px) {
  .header.header .mobile-menu {
    top: 100% !important;
    border-radius: 0 0 18px 18px !important;
    max-height: calc(100dvh - 71px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 2026-10-05: contenido más amplio en escritorio.
   Usa el ancho disponible en lugar del límite anterior de 1240px.
   El zoom del navegador sigue bajo el control de la persona usuaria. */
@media (min-width: 1181px) {
  body main .container.container {
    width: min(calc(100% - (2 * clamp(24px, 2.75vw, 64px))), 1920px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
  }

  /* La portada puede utilizar toda la columna de texto ampliada. */
  .hero.hero-home-refined .hero-title.hero-title-wide {
    max-width: 100% !important;
  }
  .hero.hero-home-refined .hero-request-copy {
    max-width: 100% !important;
  }
}