/* el botón de hamburguesa solo existe en tablet y móvil */
.rx-burger { display: none; }

/* RENTOX · adaptación a tablet y móvil.
   El diseño usa estilos en línea, así que las reglas apuntan al patrón de estilo
   (tal como el navegador lo normaliza, con espacio tras los dos puntos)
   y solo se aplican dentro de las media queries. */

/* ---------- TABLET (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
  [style*="px 48px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* cabecera: el menú se desplaza en lugar de desbordarse */
  [style*="position: sticky"][style*="justify-content: space-between"] { gap: 12px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  [style*="position: sticky"][style*="justify-content: space-between"] > a > img,
  [style*="position: sticky"][style*="justify-content: space-between"] > img { height: 52px !important; }
  /* menú de hamburguesa */
  .rx-burger { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; border: 1.5px solid currentColor; border-radius: 5px; background: none; color: inherit; cursor: pointer; flex-shrink: 0; }
  .rx-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
  .rx-burger[data-open] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rx-burger[data-open] span:nth-child(2) { opacity: 0; }
  .rx-burger[data-open] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  [data-rx-menu] {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    margin: 0 !important; padding: 6px 0 10px !important;
    background: var(--petrol-900); border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .6);
    max-height: calc(100vh - 100%); overflow-y: auto; overscroll-behavior: contain;
    display: none !important;
  }
  [data-rx-menu][data-open] { display: flex !important; }
  [data-rx-menu] .navitem { width: 100%; }
  [data-rx-menu] .navlink { display: flex !important; padding: 15px 24px !important; font-size: 17px !important; color: #fff !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  [data-rx-menu] .navlink::after { display: none; }
  [data-rx-menu] .ddcaret { display: none !important; }
  .navitem .dropdown { display: none !important; }

  /* el botón de hamburguesa se alinea a la derecha, junto al teléfono */
  .rx-burger { margin-left: auto !important; color: #fff !important; }
  [style*="color: var(--petrol-900)"] > .rx-burger { color: inherit !important; }

  /* la ficha se desplaza con el fondo y la X se queda pegada arriba */
  /* sin backdrop-filter: si no, el overlay sería el bloque contenedor de la X fija */
  .modal-ov { overflow-y: auto !important; align-items: flex-start !important; padding: 0 !important; backdrop-filter: none !important; background: rgba(11, 30, 36, .78) !important; }
  .modal { max-width: none !important; height: auto !important; min-height: 100% !important; max-height: none !important; border-radius: 0 !important; overflow: visible !important; animation: none !important; }
  .modal-x { position: fixed !important; top: 16px !important; right: 16px !important; z-index: 210 !important; background: #fff !important; box-shadow: 0 8px 20px -8px rgba(11, 30, 36, .5); }
  .mhero { aspect-ratio: auto !important; height: 240px !important; object-fit: contain !important; }

  /* hero */
  [style*="height: 760px"] { height: auto !important; min-height: 660px !important; }
  [style*="font-size: 112px"] { font-size: clamp(38px, 8.4vw, 92px) !important; max-width: 20ch !important; }
  [style*="bottom: 168px"] { bottom: auto !important; top: 130px !important; }

  /* titulares grandes */
  [style*="font-size: 66px"], [style*="font-size: 64px"] { font-size: clamp(34px, 6.2vw, 58px) !important; }
  [style*="font-size: 62px"], [style*="font-size: 60px"], [style*="font-size: 58px"] { font-size: clamp(32px, 5.8vw, 54px) !important; }
  [style*="font-size: 56px"], [style*="font-size: 54px"] { font-size: clamp(30px, 5.4vw, 48px) !important; }
  [style*="font-size: 48px"], [style*="font-size: 42px"] { font-size: clamp(28px, 4.6vw, 40px) !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: clamp(26px, 4vw, 34px) !important; }
  [style*="font-size: 34px"] { font-size: 28px !important; }

  /* rejillas */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* columnas con barra lateral → una sola columna */
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1.25fr 0.9fr"],
  [style*="grid-template-columns: 340px 1fr auto"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* la barra lateral deja de ser fija */
  aside[style*="position: sticky"] { position: static !important; max-height: none !important; top: auto !important; }
  aside[style*="position: sticky"] > div[style*="overflow-y: auto"] { max-height: 320px; }

  /* tarjeta de familia del catálogo */
  [style*="grid-template-columns: 340px 1fr auto"] > div:first-child { min-height: 220px !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }

  /* pie */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1.1fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* ficha de máquina */
  .modal-grid { grid-template-columns: 1fr !important; }

  /* al apilar, el contenido principal va antes que la navegación secundaria */
  [style*="grid-template-columns: 260px 1fr"] > main { order: 1 !important; }
  [style*="grid-template-columns: 260px 1fr"] > aside { order: 2 !important; }
}

/* el catálogo conserva sus dos columnas mientras quepan */
@media (max-width: 900px) {
  [style*="grid-template-columns: 280px 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns: 280px 1fr"] > main { order: 1 !important; }
  [style*="grid-template-columns: 280px 1fr"] > aside { order: 2 !important; }
}

/* ---------- MÓVIL (≤ 640 px) ---------- */
@media (max-width: 640px) {
  [style*="px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }

  [style*="position: sticky"][style*="justify-content: space-between"] > a > img,
  [style*="position: sticky"][style*="justify-content: space-between"] > img { height: 44px !important; }
  .rx-burger { width: 42px; height: 42px; }
  .modal-x { top: 12px !important; right: 12px !important; }

  /* hero */
  [style*="height: 760px"] { height: auto !important; min-height: 620px !important; }
  [style*="bottom: 168px"] { position: static !important; top: auto !important; padding: 170px 0 48px !important; }
  [style*="font-size: 112px"] { font-size: clamp(34px, 11vw, 52px) !important; max-width: 100% !important; }

  /* botoneras */
  [style*="display: flex"][style*="gap: 14px"] { flex-wrap: wrap !important; }
  [style*="display: flex"][style*="gap: 14px"] > a { flex: 1 1 100%; }
  [style*="display: flex"][style*="gap: 14px"] > a > span > button,
  [style*="display: flex"][style*="gap: 14px"] > a button { width: 100% !important; justify-content: center !important; }

  /* cifras de confianza del hero: en flujo normal, sin tapar los botones */
  [style*="backdrop-filter"] { position: static !important; flex-wrap: wrap !important; }
  [style*="backdrop-filter"] > div { flex: 1 1 50% !important; }
  [style*="height: 760px"] { min-height: 0 !important; }

  /* rejillas a una columna */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1.1fr"],
  [style*="minmax(258px, 1fr)"] { grid-template-columns: 1fr !important; }

  /* tarjeta de familia */
  [style*="grid-template-columns: 340px 1fr auto"] > div:last-child { padding: 0 24px 24px !important; }

  /* franjas de dos columnas */
  [style*="justify-content: space-between"][style*="flex-wrap: wrap"] { flex-direction: column !important; align-items: flex-start !important; }

  /* buscador de la portada */
  .sfield { flex: 1 1 100% !important; }

  /* tipografía general */
  [style*="font-size: 19px"] { font-size: 17px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }

  /* ficha de máquina */
  .mhero { height: 220px !important; }
  .modal-body { padding: 24px !important; }

  /* botón de WhatsApp */
  .wa { width: 56px !important; height: 56px !important; left: 16px !important; bottom: 16px !important; }
  .wa svg { width: 32px !important; height: 32px !important; }

  /* legal y artículos */
  .doc p, .doc li { font-size: 16px !important; }
  table { font-size: 14px !important; }
}