/*
 * OMNIX · responsive.css
 * Objetivo: hacer el sitio funcional en 320-2560px SIN alterar el diseño hi-fi
 *
 * Estrategia:
 * 1. Se mantiene la maqueta pixel-perfect diseñada para 1440px como fuente única de verdad
 * 2. En pantallas < 1440 aplicamos un escalado proporcional (zoom + horizontal-safety) que
 *    mantiene TODAS las proporciones, tipografía, espaciados y jerarquía tal cual
 * 3. En pantallas > 1440 el layout se centra con márgenes uniformes (no se estira)
 * 4. Reglas puntuales de container-safety para evitar overflow horizontal
 *
 * Esta técnica es la más conservadora posible: cero cambios en JSX,
 * cero riesgo de romper animaciones/SVG/tablas.
 */

/* ─── Reset seguro (no modifica visual) ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Prevent iOS auto-zoom on inputs */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth scroll para anchor links (deep-links AEO) */
  scroll-behavior: smooth;
  /* Scroll padding para nav sticky */
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #FFF;
  color: #1E1F26;
  overflow-x: hidden; /* safety net · nunca scroll horizontal */
  overflow-x: clip;   /* moderno · mejor que hidden porque preserva position:sticky */
  /* Font smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── ACCESIBILIDAD ─────────────────────────────────────────────── */

/* Skip to content · WCAG 2.4.1 */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: #F4024C;
  color: #FFF;
  font-family: var(--font-body, system-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
}
.skip-to-content:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid #FFF;
  outline-offset: 2px;
}

/* Focus visible universal · WCAG 2.4.7 */
:focus-visible {
  outline: 2px solid #0050BD;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Elementos táctiles con hit-area mínima 44px (WCAG 2.5.5 · AAA target size) */
a, button, [role="button"], input, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid #F4024C;
  outline-offset: 3px;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ─── FONT LOADING SAFETY ────────────────────────────────────────── */
/* Font-display: swap forzado sobre @font-face para evitar FOIT.
   Si el CSS de tokens usa @import de Google Fonts, esto no aplica directo
   pero prepara el terreno para self-hosted futuras. */

/* ─── IMÁGENES RESPONSIVE POR DEFECTO ────────────────────────────── */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ─── RESPONSIVE STRATEGY ────────────────────────────────────────── */

/*
 * En viewports < 1440 aplicamos un escalado uniforme que mantiene la
 * maqueta hi-fi original a 1440px de ancho lógico.
 * El zoom preserva TODAS las proporciones · no rompe SVG/animaciones/tablas.
 *
 * En viewports >= 1440 no escalamos: el layout se muestra a su tamaño real
 * centrado con márgenes uniformes (ya lo hace Container maxWidth: 1280).
 */

/* Tablets grandes y laptops · 1024-1439 · zoom sutil ~72-99% */
@media (max-width: 1439.98px) and (min-width: 1024px) {
  html {
    /* zoom se soporta en Blink, WebKit e implementa como transform en gecko.
       min() garantiza que en el punto exacto de 1024 quedemos a ~72% */
    zoom: calc(100vw / 1440);
  }
}

/* Tablets · 768-1023 · zoom fluido con floor razonable */
@media (max-width: 1023.98px) and (min-width: 768px) {
  html {
    zoom: calc(100vw / 1440);
  }
}

/* Móviles · < 768 · viewport nativo, tablets colapsan */
@media (max-width: 767.98px) {
  html {
    /* Sin zoom global · usamos overrides puntuales por sección
       porque a esos anchos algunos grids necesitan colapsar */
    zoom: calc(100vw / 1440);
  }
  /* Habilitamos pinch-zoom para accesibilidad WCAG 1.4.4 */
}

/* ─── NAV OVERRIDE · anti-zoom para hamburguesa ──────────────────── */
/* El nav sticky se debe mostrar al tamaño real del dispositivo, no al escalado
   del zoom global. Compensamos el zoom con un contra-zoom en el nav para
   restaurar el sizing físico. Esto asegura que:
   - El logo tenga tamaño legible en móvil
   - El botón hamburguesa tenga hit-area de 44px (WCAG 2.5.5)
   - El menú desplegable ocupe el viewport físico real
*/
@media (max-width: 1080px) {
  nav[aria-label="Principal"] {
    zoom: calc(1440 / 100vw);
    /* height fijo para evitar layout shift del sticky */
  }
  /* Drawer y backdrop también viven fuera del zoom global */
  [id="mobile-drawer"],
  [aria-label="Menú de navegación"] {
    zoom: calc(1440 / 100vw);
  }
}
/* Para pantallas muy pequeñas mantenemos el nav a tamaño físico */
@media (max-width: 767.98px) {
  nav[aria-label="Principal"] {
    zoom: calc(1440 / 100vw);
  }
}

/* ─── FALLBACK PARA FIREFOX (zoom no estándar) ───────────────────── */
/* Firefox 129+ soporta zoom desde 2024 · para versiones antiguas usamos
   transform como respaldo aplicado sólo si zoom no funciona */
@supports not (zoom: 1) {
  @media (max-width: 1439.98px) {
    body {
      transform-origin: top left;
      transform: scale(calc(100vw / 1440));
      width: 1440px;
      /* Compensamos el alto perdido por el scale */
      min-height: calc(100vh * 1440 / 100vw);
    }
  }
}

/* ─── PANTALLAS ULTRA-WIDE · 1920+ ───────────────────────────────── */
/* No se escala hacia arriba · el Container maxWidth:1280 ya centra.
   Sólo mejoramos el aire en fondos oscuros para ultra-wide */
@media (min-width: 1920px) {
  body {
    background: #FFF;
  }
}

@media (min-width: 2560px) {
  html {
    font-size: 18px; /* opción sutil para 4K/UltraWide sin cambiar layout */
  }
}

/* ─── PRINT ──────────────────────────────────────────────────────── */
@media print {
  html { zoom: 1 !important; }
  nav, footer, .no-print { display: none !important; }
  section { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ─── UTILITY: high-contrast forced-colors ───────────────────────── */
@media (forced-colors: active) {
  * {
    border-color: CanvasText !important;
  }
  a { color: LinkText !important; }
  button { border: 1px solid ButtonText !important; }
}