/* Nunky design system: shared components.
   Header, navigation, buttons, footer and reusable component corrections. */

/* Preserve hover while the pointer crosses the visual gap between a desktop
   navigation trigger and its dropdown. The dropdown itself remains above the
   bridge because it already has z-index: 50. */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .nav-dropdown::before {
    content: "";
    position: absolute;
    z-index: 49;
    top: 100%;
    left: -8px;
    right: -8px;
    height: 18px;
  }
}

/* =========================================================
   NUNKY — NAVEGACIÓN / USABILIDAD V3
   Fecha: 2026-09-08
   Alcance: interacción del header únicamente. No cambia contenido,
   rutas, breakpoints ni composición visual del menú.
========================================================= */

/* Amplía el área efectiva de clic de los enlaces de primer nivel sin
   modificar su caja de layout ni desplazar el subrayado/los textos. */
@media (min-width: 1181px) {
  .nav .nav-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav .nav-link::before {
    content: "";
    position: absolute;
    top: -13px;
    bottom: -13px;
    left: 0;
    right: 0;
  }

  /* Blog es el único enlace superior cuyo texto puede quedar por debajo de
     44 px de ancho. Ampliamos solo su zona invisible hacia los lados. */
  .nav > a.nav-link::before {
    left: -7px;
    right: -7px;
  }

  /* Smart Company usa enlace + botón de flecha separados. El área extra
     crece hacia el espacio libre de la derecha, no encima del enlace. */
  .dropdown-arrow-button {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .dropdown-arrow-button::before {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 0;
    right: -14px;
  }

  /* El teclado abre los desplegables de forma explícita con Enter/Espacio.
     Evitamos que solo recibir foco abra un megamenú automáticamente. Hover
     sigue funcionando exactamente como antes en ratón. */
  .nav-dropdown:not(.is-open):focus-within:not(:hover) > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-dropdown:not(.is-open):focus-within:not(:hover) .dropdown-arrow {
    transform: none !important;
  }

  /* Objetivo de interacción mínimo para enlaces dentro de menús, sin
     aumentar innecesariamente el padding horizontal. */
  .dropdown-menu .dropdown-link,
  .dropdown-menu .product-mega-family > a,
  .dropdown-menu .service-mega-title,
  .dropdown-menu .services-mega-all {
    min-height: 44px;
  }

}

/* Indica con claridad el estado abierto en los desplegables móviles nativos. */
.mobile-dropdown[open] > summary .dropdown-arrow {
  transform: rotate(180deg);
}

.nav a,
.nav button,
.mobile-menu a,
.mobile-menu summary,
.header-actions a,
.menu-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   COOKIE CONSENT — panel básico de preferencias
========================================================= */
.footer-legal .footer-cookie-settings {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(8,17,29,.62);
  cursor: pointer;
  transition: color .25s ease;
}
.footer-legal .footer-cookie-settings:hover,
.footer-legal .footer-cookie-settings:focus-visible { color: var(--cyan); outline: none; }
.footer-legal .footer-cookie-settings:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.cookie-consent-banner {
  position: fixed;
  z-index: 10000;
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  display: none;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(7,17,31,.97);
  color: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.cookie-consent-banner.is-visible { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.25rem; align-items: center; }
.cookie-consent-copy h2 { margin: 0 0 .35rem; color: #fff; font-size: 1.05rem; }
.cookie-consent-copy p { margin: 0; color: rgba(234,246,255,.76); font-size: .88rem; line-height: 1.55; }
.cookie-consent-copy a { color: #7de7ff; font-weight: 700; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }
.cookie-action {
  min-height: 42px;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font: inherit;
  font-size: .83rem;
  font-weight: 800;
  cursor: pointer;
}
.cookie-action-primary { background: #fff; color: #07111f; }
.cookie-action-secondary { background: transparent; color: #fff; }
.cookie-action:hover { transform: translateY(-1px); }

.cookie-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(3,10,18,.68);
  backdrop-filter: blur(8px);
}
.cookie-modal-backdrop.is-visible { display: grid; }
.cookie-modal {
  width: min(100%, 640px);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  color: #08111d;
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
}
.cookie-modal-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.4rem 1rem; border-bottom: 1px solid rgba(8,17,29,.08); }
.cookie-modal-header h2 { margin: 0; font-size: 1.35rem; }
.cookie-modal-close { border: 0; background: #eef4f8; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.cookie-modal-body { padding: 1.25rem 1.4rem; }
.cookie-modal-body > p { margin: 0 0 1rem; color: #59677a; line-height: 1.6; }
.cookie-pref-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid rgba(8,17,29,.08); }
.cookie-pref-row h3 { margin: 0 0 .25rem; font-size: 1rem; }
.cookie-pref-row p { margin: 0; color: #64748b; font-size: .88rem; line-height: 1.45; }
.cookie-switch { position: relative; width: 48px; height: 28px; }
.cookie-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: .2s ease; }
.cookie-switch span::after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: .2s ease; }
.cookie-switch input:checked + span { background: #0891b2; }
.cookie-switch input:checked + span::after { transform: translateX(20px); }
.cookie-switch input:disabled + span { opacity: .7; cursor: not-allowed; }
.cookie-modal-footer { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; padding: 1rem 1.4rem 1.35rem; border-top: 1px solid rgba(8,17,29,.08); }
.cookie-modal-footer button { min-height: 42px; padding: .72rem 1rem; border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.cookie-save { border: 0; background: #07111f; color: #fff; }
.cookie-reject-all, .cookie-accept-all { border: 1px solid rgba(8,17,29,.14); background: #fff; color: #08111d; }

@media (max-width: 760px) {
  .cookie-consent-banner.is-visible { grid-template-columns: 1fr; }
  .cookie-consent-actions { justify-content: stretch; }
  .cookie-consent-actions .cookie-action { flex: 1 1 140px; }
  .cookie-modal-footer > button { flex: 1 1 150px; }
}

.footer-brand .footer-social-links{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1rem}
.footer-brand .footer-social-links a{color:inherit;text-decoration:none;font-size:.95rem;font-weight:500}
.footer-brand .footer-social-links a:hover,.footer-brand .footer-social-links a:focus-visible{text-decoration:underline;text-underline-offset:.25em}

/* Cambios solicitados: equipo, navegacion y redes. */
#siteHeader .smart-company-nav-dropdown > .nav-parent-link,
#siteHeader .mobile-dropdown:first-child > summary,
.footer .smart-nav-accent { color:#00bcd4 !important; }
.footer-social-links a { display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; }
.footer-social-links svg { width:25px;height:25px; }
.team-card-nunky .team-role { font-size:14px !important;line-height:1.4 !important;white-space:normal; }