/* ========================================================================
   EXEGIA — Responsive / touch layer (v1, jul 2026)
   Solo corrige móvil, tablet, Safari iOS y dispositivos táctiles.
   Todas las reglas están limitadas por max-width o (hover:none) para que
   la versión de escritorio aprobada NO cambie.
   ======================================================================== */

/* ---- 0 · Base segura (no afecta el layout de escritorio) ---- */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
img, svg, video, iframe, canvas { max-width: 100%; }
:where(section, header, footer, .container, .container-narrow) { min-width: 0; }
:where([id]) { scroll-margin-top: 104px; }

/* Estados de foco visibles (accesibilidad, todos los dispositivos) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Enlaces: color heredado del sistema (definido en styles.css), nunca azul del navegador */
:where(a:not([class])) { color: inherit; text-decoration-color: var(--rule-blue); }

/* Alturas de Safari iOS: 100vh salta al mostrarse/ocultarse las barras */
@media (max-width: 1024px) {
  @supports (height: 100svh) {
    .hero { min-height: 100svh; }
    .contact-wrap { min-height: auto; }
  }
}

/* ---- 1 · Menú móvil ---- */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none;
}
.mnav.open { visibility: visible; pointer-events: auto; }
.mnav-scrim {
  position: absolute; inset: 0;
  background: rgba(11, 24, 40, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.mnav.open .mnav-scrim { opacity: 1; }
.mnav-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(90vw, 360px);
  background: #fff;
  box-shadow: -14px 0 44px rgba(16, 32, 53, 0.20);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(102%);
  transition: transform 300ms var(--ease);
  padding:
    calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) 18px;
  gap: var(--s-4);
}
.mnav.open .mnav-panel { transform: none; }
.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
}
.mnav-head img { height: 18px; width: auto; }
.mnav-close {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid; place-items: center;
  color: var(--text-primary);
  border-radius: 50%;
  background: none;
  border: 0;
}
.mnav-close:active { background: var(--n-50); }
.mnav-list { display: flex; flex-direction: column; gap: 2px; }
.mnav-group-title {
  display: flex; align-items: center;
  min-height: 48px;
  padding: 0 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  border-radius: 10px;
}
.mnav-group-title:active { background: var(--n-50); }
.mnav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--s-4) 10px; padding-left: 12px; border-left: 1px solid var(--rule); }
.mnav-sub a {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: 8px;
}
.mnav-sub a:active { background: var(--n-50); color: var(--text-primary); }
.mnav-foot {
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.mnav-foot .btn { justify-content: center; width: 100%; min-height: 48px; }
.mnav-foot .mnav-mail {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
  min-height: 44px;
  display: grid; place-items: center;
}
@media (min-width: 881px) { .mnav { display: none; } }

/* ---- 2 · Header / nav en pantallas chicas ---- */
@media (max-width: 880px) {
  .nav-wrap {
    padding:
      calc(var(--s-3) + env(safe-area-inset-top))
      max(var(--s-4), env(safe-area-inset-right))
      0
      max(var(--s-4), env(safe-area-inset-left));
  }
  .nav-wrap.scrolled {
    padding-top: calc(var(--s-2) + env(safe-area-inset-top));
  }
  .nav { padding: 8px 10px 8px var(--s-3); gap: var(--s-2); }
  .nav-burger { width: 44px; height: 44px; margin-right: -6px; }
  .nav-cta-wrap { gap: 4px; }
  :where([id]) { scroll-margin-top: 88px; }
}
@media (max-width: 460px) {
  .nav-brand-mark { display: none; }
  .nav-brand { padding-left: 4px; gap: var(--s-2); }
  .nav-brand-wordmark { height: 15px; }
  .nav-cta-wrap .btn-primary { padding: 10px 13px; font-size: 12px; }
  .nav-cta-wrap .btn-primary .arrow { display: none; }
}
@media (max-width: 340px) {
  .nav-cta-wrap .btn-primary { padding: 9px 10px; font-size: 11.5px; }
}

/* ---- 3 · Áreas táctiles mínimas ---- */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .footer-col a, .nav-menu a, .meta-block, .faq-q { min-height: 44px; }
  .footer-col ul { gap: var(--s-1); }
  .footer-col li a { display: flex; align-items: center; }
  /* Los decorativos nunca capturan el toque */
  .hero-grid, .cta-grid-bg, .footer-mountain, .neural-halo,
  .neural-core-ring, .circuit-lights, .lightning-svg, .tx-layer,
  .dive-flash, .exp-scene::before { pointer-events: none !important; }
}

/* ---- 4 · Contenido que dependía de :hover ---- */
@media (hover: none) {
  /* Tooltips de los chips del hero: inservibles al tacto */
  .chip-reto::after, .chip-sol::after { display: none !important; }

  /* Tarjetas de casos de uso: se muestra TODO, nada oculto tras hover */
  .use-card { min-height: 0; cursor: default; }
  .use-card .use-cover { opacity: 1 !important; }
  .use-card .use-reveal {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px dashed var(--rule);
  }

  /* Listas del método: el texto vivía en un span colapsado por hover */
  .method-items li { overflow: visible; align-items: flex-start; }
  .method-items li::before { margin-top: 11px; }
  .method-items li::after { display: none; }
  .method-items .lit {
    white-space: normal;
    max-width: none !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-secondary) !important;
  }

  /* Spotlight que seguía al cursor */
  .cap-cell::before { display: none; }
}

/* ---- 5 · Hero y visual del cerebro ---- */
@media (max-width: 980px) {
  .hero { padding: 132px 0 var(--s-16); }
  .hero-visual { max-width: 440px; margin: 0 auto; }
  .hero-content { gap: var(--s-10); }
  .scroll-hint { display: none; }
}
@media (max-width: 720px) {
  .hero { padding: 116px 0 var(--s-12); }
  .hero-headline { font-size: clamp(30px, 8.4vw, 46px) !important; line-height: 1.06; }
  .hero-typewriter { font-size: 15px; min-height: 3.2em; }
  .hero-actions { margin-top: var(--s-8); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-visual { max-width: min(360px, 84vw); }
  /* La rueda de conceptos se ajusta al escenario para no cortarse */
  .orbit { --orbit-r: 35cqmin; }
  .brain-wrap { width: 48%; }
  .chip { font-size: 9px; padding: 3px 8px; letter-spacing: 0.1em; }
  .hero-meta-statement p { font-size: 17px; }
  .hero-meta-statement .hero-meta-row { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .hero-meta-statement .hero-meta-item { align-items: flex-start; text-align: left; }
  .hero-meta-statement .hero-meta-num { font-size: 22px; }
  .hero-meta-statement .hero-meta-label { font-size: 10px; }
}
@media (max-width: 420px) {
  .hero-visual { max-width: 300px; }
  .hero-meta-statement .hero-meta-row { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* ---- 6 · Secciones y tarjetas ---- */
@media (max-width: 720px) {
  .section-head { margin-bottom: var(--s-8); }
  .cap-cell, .card, .card-tinted { padding: var(--s-6); }
  .exp-close { padding: var(--s-6); gap: var(--s-4); }
  .exp-close p { font-size: 16px; }
  .agent-screen { padding: var(--s-4); min-height: 0; }
  .agent-msg { flex-direction: column; gap: 2px; font-size: 13.5px; }
  .agent-msg .who { width: auto; padding-top: 0; }
  .proof-strip-inner { gap: var(--s-4); }
  .proof-tools { gap: var(--s-4) var(--s-5); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .footer-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cta-section { padding: var(--s-10) var(--s-5); }
  .page-head { padding: 130px 0 var(--s-12); }
  .contact-wrap { padding-top: 130px; }
  .form-card { padding: var(--s-5) !important; }
  .form-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .use-card { padding: var(--s-5); }
  .use-card .savings { grid-template-columns: auto 1fr; row-gap: var(--s-3); }
  .display-l { font-size: clamp(30px, 8.6vw, 44px); }
  .display-xl { font-size: clamp(32px, 9vw, 52px); }
}

/* Botones con etiquetas largas: pueden partirse en vez de desbordar */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .nav-cta-wrap .btn, .mnav-foot .btn { white-space: nowrap; }
  .result-banner .btn, .cta-section .btn { width: 100%; justify-content: center; }
}

/* Diagramas y paneles animados: que respiren, nunca se corten */
@media (max-width: 720px) {
  .transform-visual, .blueprint-visual, .learn-visual { max-width: min(420px, 100%); margin: 0 auto; }
  .sol-tabs { flex-wrap: wrap; }
  .exp-flow { row-gap: 6px; }
  .exp-scene { min-height: 0; }
  .exp-visual { min-height: 132px; }
}

/* Calendario embebido de contacto */
@media (max-width: 720px) {
  .calendar-embed { height: 620px !important; }
  .calendar-embed iframe { height: 940px !important; top: -300px !important; }
}
@media (max-width: 420px) {
  .calendar-embed { height: 560px !important; }
}

/* ---- 7 · Modal de agenda en móvil (Safari incluido) ---- */
@media (max-width: 640px) {
  .cal-modal-overlay { padding: 0; align-items: stretch; }
  .cal-modal {
    max-width: none;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cal-modal-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .cal-modal-close { width: 44px; height: 44px; font-size: 26px; }
  .cal-modal-body { flex: 1 1 auto; height: auto; }
  .cal-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; top: 0; }
}

/* Pantallas bajas (laptops chicas, horizontal): el modal se ajusta al alto
   disponible sin tocar el tamaño de escritorio normal (640px). */
@media (min-width: 641px) and (max-height: 780px) {
  .cal-modal-body { height: calc(90vh - 110px); }
}

/* ---- 8 · Orientación horizontal en celular ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 116px 0 var(--s-12); }
  .mnav-panel { width: min(70vw, 340px); }
}

/* ---- 8b · Chips de esquina (exp-map / exp-connect): en tarjetas angostas
   colisionaban entre sí. Pasan a grid 2x2 estático sin solaparse. ---- */
@media (max-width: 900px) {
  .exp-map, .exp-connect { height: auto; min-height: 90px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 8px 6px; padding: 6px 2px; }
  .exp-map .n, .exp-connect .tool {
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    text-align: center; white-space: normal; max-width: 100%;
  }
  .exp-map .scan { display: none; }
  .exp-connect svg, .exp-connect .hub { display: none; }
}

/* ---- 9 · Movimiento reducido: nada puede quedar invisible ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].pending,
  .method[data-step-reveal], .xf-vout i, .use-reveal, .lit {
    opacity: 1 !important;
    transform: none !important;
    max-width: none !important;
    transition: none !important;
  }
  .mnav-panel, .mnav-scrim { transition: none !important; }
}

/* ---- 10 · Sin JavaScript: todo el contenido sigue visible ---- */
.no-js [data-reveal],
.no-js .method[data-step-reveal],
.no-js .xf-vout i {
  opacity: 1 !important;
  transform: none !important;
}