/* Itappi On Demand — reglas responsive.
   Los atributos data-r* los coloca assets/responsive.js sobre los nodos
   maquetados con estilos en línea. */

html { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
.brand-logo { width: auto; flex: 0 0 auto; }

/* ---------- Tablet / laptop pequeña ---------- */
@media (max-width: 980px) {
  [data-rgrid="3"], [data-rgrid="4"], [data-rgrid="5"], [data-rgrid="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-rgrid] > * { min-width: 0; }

  [data-rfs="xl"] { font-size: calc(var(--rfs) * 0.74) !important; letter-spacing: -1px !important; }
  [data-rfs="lg"] { font-size: calc(var(--rfs) * 0.82) !important; }
  [data-rfs="md"] { font-size: calc(var(--rfs) * 0.9) !important; }

  [data-rpad] { padding-left: 24px !important; padding-right: 24px !important; }

  /* Nav: los enlaces pasan a una fila deslizable en vez de desbordar. */
  header nav { flex-wrap: wrap !important; gap: 12px !important; padding: 12px 20px !important; }
  header .brand-logo { height: 32px !important; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 640px) {
  [data-rgrid] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; }
  [data-rdecor] { display: none !important; }

  [data-rfs="xl"] { font-size: calc(var(--rfs) * 0.5) !important; letter-spacing: -0.5px !important; }
  [data-rfs="lg"] { font-size: calc(var(--rfs) * 0.62) !important; letter-spacing: -0.5px !important; }
  [data-rfs="md"] { font-size: calc(var(--rfs) * 0.78) !important; }

  [data-rpad] { padding-left: 18px !important; padding-right: 18px !important; }
  [data-rgap]  { gap: 16px !important; }
  [data-rflex] { flex-wrap: wrap !important; }
  [data-rwide] { width: auto !important; min-width: 0 !important; max-width: 100% !important; }

  /* Adornos flotantes: se quedan dentro del ancho del teléfono. */
  [data-rneg-l] { left: 0 !important; }
  [data-rneg-r] { right: 0 !important; }

  /* Botones de sección a ancho completo para que no se corten. */
  [data-rflex] > a[style*="padding: 16px"],
  [data-rflex] > a[style*="padding: 15px"],
  [data-rflex] > a[style*="padding: 17px"],
  [data-rflex] > a[style*="padding: 18px"] { flex: 1 1 100% !important; text-align: center; }

  /* Nav compacto: logo fijo y enlaces en una fila deslizable. */
  header nav[data-rflex] { flex-wrap: nowrap !important; gap: 12px !important;
                           padding-top: 11px !important; padding-bottom: 11px !important; }
  header nav > div[data-rflex] { flex-wrap: nowrap !important; margin-left: auto !important;
                                 overflow-x: auto; -webkit-overflow-scrolling: touch;
                                 scrollbar-width: none; gap: 14px !important; }
  header nav > div[data-rflex]::-webkit-scrollbar { display: none; }
  header nav a { flex: 0 0 auto !important; white-space: nowrap; }
  header .brand-logo { height: 26px !important; }
  footer .brand-logo { height: 24px !important; }

  /* Tablas y bloques anchos: que se desplacen ellos, no la página. */
  table { display: block; overflow-x: auto; }
}