/* ============================================================
   Eurekant — Capa responsive (móvil / tablet)
   Los estilos de los componentes son inline en los JSX, así que
   esta hoja los sobreescribe con media queries usando selectores
   de atributo sobre el style inline. Escritorio (>1024px) intacto:
   todo vive dentro de @media. Se enlaza después de brand.css.
   ============================================================ */

/* ---------- NAV (home y 404: FNav con menú hamburguesa) ---------- */
@media (max-width: 960px) {
  .ek-nav { padding: 12px 20px !important; }
  .ek-nav img { height: 34px !important; }
  .ek-nav-right { gap: 10px !important; }
  .ek-nav-burger { display: inline-flex !important; }
  .ek-nav-links { display: none !important; }
  .ek-nav-links[data-open="true"] {
    display: flex !important; flex-direction: column; gap: 0 !important;
    position: fixed; top: 100%; left: 0; right: 0;
    padding: 8px 20px 20px; background: var(--brand-bg);
    border-bottom: 1px solid var(--brand-line-strong);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .ek-nav-links[data-open="true"] a {
    padding: 16px 4px; font-size: 13px !important;
    border-bottom: 1px solid var(--brand-line);
  }
}
@media (max-width: 520px) {
  .ek-nav-lang button { padding: 5px 9px !important; }
  .ek-nav-cta { padding: 9px 14px !important; font-size: 13px !important; }
}
@media (max-width: 400px) {
  .ek-nav-lang { display: none !important; }
}

/* ---------- NAV (soluciones y blog: LandingNav, sin links) ---------- */
@media (max-width: 960px) {
  .ek-landnav { padding: 12px 20px !important; grid-template-columns: auto 1fr !important; }
  .ek-landnav-spacer { display: none !important; }
  .ek-landnav > *:nth-child(2) { justify-self: start !important; }
  .ek-landnav img { height: 34px !important; }
  .ek-landnav-right { gap: 10px !important; }
}

/* ---------- ESTRUCTURA GLOBAL ---------- */
@media (max-width: 1024px) {
  /* Los brillos/órbitas decorativas sobresalen de su sección y hacían que el
     navegador móvil achicara toda la página; se recortan en la raíz. */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; }

  /* paddings de sección */
  [style*="padding: 140px 80px"],
  [style*="padding: 160px 80px"],
  [style*="padding: 200px 80px"] { padding: 96px 40px !important; }
  [style*="padding: 180px 80px 140px"],
  [style*="padding: 180px 80px 120px"],
  [style*="padding: 180px 40px 120px"] { padding: 140px 40px 96px !important; }
  [style*="padding: 100px 80px 40px"] { padding: 72px 40px 32px !important; }

  /* grillas de 4 columnas → 2 */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  /* splits de 2 columnas → 1 */
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 1.1fr 1px 0.9fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* grillas de 3 columnas → 2 */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="gap: 80px"], [style*="gap: 64px"] { gap: 40px !important; }
}

@media (max-width: 640px) {
  [style*="padding: 140px 80px"],
  [style*="padding: 160px 80px"],
  [style*="padding: 200px 80px"] { padding: 72px 20px !important; }
  [style*="padding: 180px 80px 140px"],
  [style*="padding: 180px 80px 120px"],
  [style*="padding: 180px 40px 120px"] { padding: 120px 20px 72px !important; }
  [style*="padding: 100px 80px 40px"] { padding: 64px 20px 32px !important; }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* tarjetas con padding de escritorio */
  [style*="padding: 56px 56px"],
  [style*="padding: 48px 40px"],
  [style*="padding: 48px 32px"] { padding: 36px 24px !important; }
  /* cajas de imagen con altura mínima de escritorio */
  [style*="min-height: 250px"] { min-height: 190px !important; }
  [style*="min-height: 340px"] { min-height: 240px !important; }
}

/* ---------- BLOG ---------- */
@media (max-width: 640px) {
  .ar-share { flex-wrap: wrap; row-gap: 8px; }
}