/* ===========================================================
   RL Tecnology — Estilos responsive (móvil / tablet)
   Enlazado en las 5 páginas. Adapta los layouts de ancho fijo
   a una sola columna sin tocar el HTML.
   Nota: el runtime serializa los estilos con espacio tras ":",
   por eso los selectores usan "display: grid", "z-index: 40", etc.
   =========================================================== */

/* ---------- TABLET (≤ 1024px): 4 y 3 columnas -> 2 ---------- */
@media (max-width: 1024px){
  [style*="repeat(4"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-column:"]{grid-column:auto !important; grid-row:auto !important;}
}

/* ---------- MÓVIL (≤ 760px): todo a una columna ---------- */
@media (max-width: 760px){

  /* Oculta la barra utilitaria superior (decorativa) */
  [style*="z-index: 40"]{display:none !important;}

  /* Encabezado: no fijo, apilado y compacto */
  header{position:static !important;}
  header > div{flex-direction:column !important; height:auto !important; padding:16px 16px !important; gap:12px !important;}
  header nav{flex-wrap:wrap !important; justify-content:center !important; gap:14px 18px !important; width:100% !important;}
  header nav a[style*="linear-gradient(135deg"]{display:none !important;}   /* botón CTA del nav (redundante en móvil) */
  header img[src*="rl-letters"]{height:54px !important;}
  header img[src*="rl-robot"]{height:64px !important;}
  footer img[src*="rl-letters"]{height:56px !important;}
  footer img[src*="rl-robot"]{height:70px !important;}

  /* TODOS los grids multi-columna -> una sola columna */
  [style*="display: grid"]{grid-template-columns:1fr !important; gap:22px !important;}
  [style*="grid-column:"]{grid-column:auto !important; grid-row:auto !important;}

  /* Títulos a escala móvil */
  h1{font-size:33px !important; line-height:1.08 !important; letter-spacing:-0.8px !important;}
  h2{font-size:27px !important; line-height:1.15 !important; letter-spacing:-0.5px !important;}
  h3{font-size:22px !important; line-height:1.2 !important;}

  /* Menos padding lateral en secciones y footer */
  section{padding-left:18px !important; padding-right:18px !important;}
  footer{padding-left:18px !important; padding-right:18px !important;}

  /* Tarjetas con padding grande -> más compactas */
  [style*="padding: 60px 56px"]{padding:30px 20px !important;}
  [style*="padding: 48px 46px"]{padding:30px 22px !important;}
  [style*="padding: 44px"]{padding:26px 20px !important;}
  [style*="padding: 46px"]{padding:26px 20px !important;}
  [style*="padding: 38px"]{padding:24px 18px !important;}

  /* Sticky -> estático en móvil (encabezado y resumen de cotización) */
  [style*="position: sticky"]{position:static !important; top:auto !important;}

  /* Botón flotante de WhatsApp un poco más compacto */
  a[style*="position: fixed"]{padding:13px 18px 13px 14px !important; font-size:13px !important;}
}

/* ---------- MÓVIL ESTRECHO (≤ 420px) ---------- */
@media (max-width: 420px){
  h1{font-size:29px !important;}
  header img[src*="rl-letters"]{height:48px !important;}
  header img[src*="rl-robot"]{height:56px !important;}
}