/* ============================================================
   Neurya · responsive.css
   El kit original es solo-escritorio (estilos inline fijos, sin
   media queries). Estas reglas adaptan el layout a tablet/móvil
   SIN tocar el escritorio. Usan !important porque sobrescriben
   estilos inline. Los hooks (.r-grid, .r-navdesktop, etc.) los
   coloca el convertidor.
   ============================================================ */

/* Hamburguesa y menú móvil: ocultos en escritorio */
.r-navtoggle { display: none; }
.r-navmenu { display: none; }

/* Honeypot anti-bot del formulario de Contacto: invisible para humanos (sin
   display:none ni visibility:hidden, que los bots detectan), fuera de pantalla. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .r-grid[data-cols="4"],
  .r-grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  /* imágenes/videos nunca desbordan */
  img, video, canvas, svg { max-width: 100%; }

  /* todas las rejillas multi-columna se apilan (especificidad [data-cols]
     para ganarle a la regla de tablet .r-grid[data-cols="4/5"]) */
  .r-grid[data-cols] { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* filas de CTAs (flex con 2+ botones .r-btn) → apilar a ancho completo en móvil
     (el kit las deja en fila y se salían de la pantalla). :has() = navegadores
     modernos; si no lo soporta, degrada al comportamiento actual sin romper nada. */
  [style*="display: flex"]:has(> .r-btn ~ .r-btn) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display: flex"]:has(> .r-btn ~ .r-btn) > .r-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Casos: la fila de chips de filtro (flex con [data-filter]) envuelve en móvil
     (si no, "Financiero/SOFOM" y "Servicios" se salían de la pantalla). */
  [style*="display: flex"]:has(> [data-filter]) { flex-wrap: wrap !important; }

  /* Bloques decorativos de tamaño fijo que no refluyen (p.ej. el "arco de
     acompañamiento" de Método) → ocultos en móvil. El convertidor les pone la clase
     r-hide-mobile; el contenido equivalente vive apilado más abajo. */
  .r-hide-mobile { display: none !important; }

  /* nav: ocultar menú de escritorio + CTA, mostrar hamburguesa */
  .r-navdesktop { display: none !important; }
  .r-navcta { display: none !important; }
  .r-navtoggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    background: rgba(207,234,255,0.06); border: 1px solid var(--linea-navy);
    color: var(--text-strong); margin-left: auto;
  }
  .r-navtoggle svg { width: 22px; height: 22px; }

  /* menú desplegable móvil */
  .r-navmenu[data-open="true"] { display: flex !important; }
  .r-navmenu {
    flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy-1); border-bottom: 1px solid var(--linea-navy);
    padding: 12px 20px 20px; box-shadow: var(--shadow-lg); z-index: 60;
  }
  .r-navmenu a {
    padding: 12px 8px; font-family: var(--font-display); font-weight: 600;
    font-size: 16px; color: var(--text-body); border-bottom: 1px solid var(--linea-navy);
  }
  .r-navmenu a.r-navmenu-cta {
    margin-top: 10px; border: none; background: var(--cyan); color: var(--navy-void);
    border-radius: 999px; text-align: center; font-weight: 700;
  }

  /* topbar comprimido: ocultar teléfono/ubicación, dejar idioma */
  .r-topbar-hide { display: none !important; }

  /* reducir el ritmo vertical de secciones muy altas */
  section { padding-left: 0 !important; padding-right: 0 !important; }
  section > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* titulares gigantes: que no rebasen */
  h1 { font-size: clamp(34px, 9vw, 52px) !important; }
  h2 { font-size: clamp(26px, 6.5vw, 40px) !important; }
}

/* ---------- Móvil chico ---------- */
@media (max-width: 420px) {
  .r-grid { gap: 14px !important; }
}