/* Laptop chica / tablet horizontal: compactar header */
@media (max-width: 1240px) {
  .hx-portals .portal-client-button,
  .hx-portals .portal-company-button { font-size: 0; gap: 0; padding: 0 8px; }
  .hx-portals .portal-company-icon { font-size: 1rem; }
  .hx-socials { display: none; }
}

/* Tablet y mobile: menú hamburguesa */
@media (max-width: 980px) {
  :root { --header-h: 66px; }

  .hx-menu-toggle { display: inline-flex; }

  .hx-header { background: rgba(2, 10, 17, 0.92); }

  .hx-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    width: 100vw;
    max-width: 100vw;
    min-height: calc(100dvh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    margin: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
    padding: 22px 20px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(2, 9, 15, 0.98);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .hx-header.is-open .hx-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .hx-header .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hx-header .nav-links a {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(13, 30, 40, 0.7);
    font-size: 1.05rem;
  }

  .hx-header .nav-links a::after { display: none; }

  .hx-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hx-socials { display: flex; justify-content: center; }

  .hx-actions > .hx-btn-sm { min-height: 50px; font-size: 0.95rem; }

  .hx-portals { flex-direction: column; gap: 10px; }

  .hx-portals .portal-client-button,
  .hx-portals .portal-company-button {
    justify-content: center;
    min-height: 50px;
    font-size: 0.8rem;
    gap: 10px;
    padding: 0 14px;
  }

  .hx-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hx-hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hx-lead { max-width: 620px; }
  .hx-cta, .hx-trust { justify-content: center; }
  .hx-hero-visual { order: -1; }
  .hx-orbit { width: min(420px, 78vw); }

  .hx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-about-grid { grid-template-columns: 1fr; }
  .hx-steps { grid-template-columns: 1fr; }

  .corelab-video-grid { grid-template-columns: 1fr; gap: 30px; }
  .corelab-video-copy { text-align: center; }
  .corelab-video-copy .hx-eyebrow { justify-content: center; }
  .corelab-video-copy > p:not(.hx-eyebrow) { margin: 0 auto; }
  .corelab-video-meta { justify-content: center; }
  .corelab-video-frame { order: -1; }

  .coreos-panel { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 24px; }
  .coreos-intro h2 { font-size: 1.6rem; }
}

/* Mobile */
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }

  .hx-brand-text { font-size: 1rem; }
  .hx-brand-logo { width: 40px; height: 40px; }

  .hx-hero { padding-top: 24px; }

  .hx-orbit { width: min(300px, 76vw); margin: 14px 0 6px; }

  /* chips más chicos, dentro del área visible */
  .hx-chip { padding: 6px 10px; font-size: 0.68rem; gap: 6px; }
  .hx-chip svg { width: 14px; height: 14px; }
  .hx-chip-1 { top: 2%; left: -6%; }
  .hx-chip-2 { top: 14%; right: -8%; }
  .hx-chip-3 { bottom: 14%; left: -8%; }
  .hx-chip-4 { bottom: 2%; right: -2%; }

  .hx-eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; }

  .hx-hero-copy h1 { font-size: clamp(1.75rem, 8vw, 2.3rem); line-height: 1.12; }

  .hx-lead { font-size: 1.1rem; line-height: 1.5; }

  .hx-cta { flex-direction: column; width: 100%; gap: 12px; margin: 24px 0 22px; }
  .hx-cta .hx-btn { width: 100%; min-height: 54px; }

  .hx-trust { flex-direction: column; align-items: center; gap: 10px; }

  .hx-section { padding: 36px 0; }
  .hx-head { margin-bottom: 24px; text-align: center; }
  .hx-head .hx-eyebrow { justify-content: center; }

  .hx-cards { grid-template-columns: 1fr; gap: 14px; }
  .hx-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 20px 18px; border-radius: 20px; }
  .hx-card-icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .hx-card h3 { margin-bottom: 4px; align-self: end; }
  .hx-card p { font-size: 1.02rem; }

  .hx-about { text-align: center; }
  .hx-about .hx-eyebrow { justify-content: center; }
  .hx-about .hx-btn { width: 100%; }
  .hx-stats li { text-align: left; padding: 16px 18px; }

  .hx-steps li { padding: 22px 20px; }

  .hx-final-box { border-radius: 24px; }

  .corelab-video-frame { padding: 6px; border-radius: 20px; }
  .corelab-video-frame video { border-radius: 14px; }
  .corelab-video-brand { top: 15px; left: 15px; padding: 5px 8px 5px 5px; font-size: .56rem; }
  .corelab-video-brand img { width: 26px; height: 26px; }
  .corelab-video-brand small { font-size: .45rem; }
  .corelab-video-corner { right: 15px; bottom: 15px; }

  .coreos-section { padding-top: 36px; }
  .coreos-panel { gap: 28px; }
  .coreos-specs span { flex: 1 1 calc(50% - 10px); min-width: 0; }

  .hx-footer-content { flex-direction: column; text-align: center; }
  .hx-footer-links { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .hx-chip-2, .hx-chip-3 { display: none; }
}

/* Estado abierto con mayor especificidad para evitar que el panel quede invisible en móviles. */
@media (max-width: 980px) {
  body.hx-no-scroll .hx-header .hx-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}