/* ════════════════════════════════════════════════════════════════
   HIDROPURO — MOBILE OVERRIDES
   ════════════════════════════════════════════════════════════════
   Reglas para que el sitio (diseñado a 1440px) sea legible y usable
   en celulares. Se activan automáticamente cuando el ancho de pantalla
   es ≤ 768px (la mayoría de los teléfonos).
   ════════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }

@media (max-width: 768px) {

  /* ─── CONTENEDOR PRINCIPAL ────────────────────────────────────
     PageShell tiene width:1440px hardcoded. Lo forzamos a 100%. */
  div[style*="width: 1440px"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ─── PADDINGS DE SECCIONES ───────────────────────────────────
     Las secciones tienen padding horizontal grande (56px / 64px).
     En mobile lo reducimos a 16-20px. */
  section[style*="padding"],
  footer[style*="padding"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Hero, CTAs y bloques destacados — reducir el padding interno */
  div[style*="padding: 72px"],
  div[style*="padding: 96px"],
  div[style*="padding: 80px"],
  div[style*="padding: 64px"],
  div[style*="padding: 56px"] {
    padding: 28px 18px !important;
  }

  /* ─── GRILLAS ─────────────────────────────────────────────────
     Todo lo que es grid multi-columna pasa a una sola columna. */
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr auto"],
  div[style*="grid-template-columns: 2fr"],
  div[style*="grid-template-columns: 1fr 480px"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  /* ─── ENCABEZADOS GIGANTES → tamaños móvil ────────────────────
     Estos son los font-size enormes del hero, page-headers, etc. */
  h1[style*="font-size: 132px"] { font-size: 34px !important; letter-spacing: -0.5px !important; line-height: 1.05 !important; margin: 14px 0 16px !important; word-break: break-word !important; }
  h1[style*="font-size: 104px"] { font-size: 34px !important; letter-spacing: -0.5px !important; line-height: 1.05 !important; margin: 14px 0 16px !important; word-break: break-word !important; }
  h1[style*="font-size: 88px"]  { font-size: 32px !important; letter-spacing: -0.5px !important; line-height: 1.05 !important; word-break: break-word !important; }

  /* Quitar <br /> en hero del título — deja que fluya natural */
  h1[style*="font-size: 132px"] br { display: none !important; }
  h1[style*="font-size: 104px"] br { display: none !important; }

  h2[style*="font-size: 88px"]  { font-size: 36px !important; letter-spacing: -0.8px !important; }
  h2[style*="font-size: 72px"]  { font-size: 34px !important; letter-spacing: -0.8px !important; }
  h2[style*="font-size: 64px"]  { font-size: 32px !important; letter-spacing: -0.8px !important; }
  h2[style*="font-size: 56px"]  { font-size: 30px !important; letter-spacing: -0.6px !important; }
  h2[style*="font-size: 44px"]  { font-size: 26px !important; letter-spacing: -0.4px !important; }

  h3[style*="font-size: 32px"]  { font-size: 22px !important; }
  h3[style*="font-size: 28px"]  { font-size: 20px !important; }
  h3[style*="font-size: 22px"]  { font-size: 18px !important; }

  /* Párrafos grandes */
  p[style*="font-size: 20px"]   { font-size: 16px !important; line-height: 1.55 !important; }
  p[style*="font-size: 18px"]   { font-size: 15px !important; line-height: 1.55 !important; }
  p[style*="font-size: 17px"]   { font-size: 15px !important; }
  p[style*="font-size: 16px"]   { font-size: 15px !important; }

  /* Texto serif italic grande (decoraciones) */
  div[style*="font-size: 56px"][style*="italic"],
  div[style*="font-size: 36px"][style*="italic"] {
    font-size: 28px !important;
  }

  /* ─── BORDER RADIUS GIGANTE ───────────────────────────────────
     Las cards con border-radius:32px se ven raras en móvil. */
  div[style*="border-radius: 32px"] {
    border-radius: 18px !important;
  }

  /* ─── HERO IMAGE 480px → fluida ───────────────────────────────
     La columna fija de imagen 480px en hero pasa a fluida. */
  div[style*="width: 480px"],
  div[style*="width: 360px"],
  img[style*="width: 480px"],
  img[style*="width: 360px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ─── NAV — esconder links del centro, mostrar hamburguesa ──── */
  nav[style*="display: flex"][style*="gap: 32px"] {
    display: none !important;
  }
  /* CTA WhatsApp del nav — compacto en mobile (solo icono + "WhatsApp") */
  .nav-cta-wa {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .nav-cta-wa-label {
    display: none !important;
  }
  /* Botón hamburguesa visible solo en mobile */
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
  }
  /* El nav contiene a + nav + a — los hacemos compactos */
  div[style*="padding: 22px 56px"] {
    padding: 14px 18px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  img[style*="height: 110px"] {
    height: 56px !important;
  }
  /* Botón WhatsApp del nav más compacto (solo si se llegara a mostrar) */
  a[style*="padding: 14px 22px"][style*="background: rgb(37, 211, 102)"],
  a[style*="padding: 14px 22px"][style*="#25D366"] {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* ─── TICKER — texto más chico y sin tantos spans ─────────────
     El ticker tiene varios spans con dots. Lo dejamos compacto. */
  div[style*="background: rgb(46, 179, 97)"][style*="padding: 11px"],
  div[style*="background: #2eb361"][style*="padding: 11px"] {
    padding: 8px 12px !important;
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    white-space: normal !important;
  }

  /* ─── BOTÓN WHATSAPP FLOTANTE — más chico ─────────────────────
     El "WhatsAppFloat" no es necesario tan grande en mobile. */
  a[style*="position: fixed"][style*="bottom: 24px"] {
    bottom: 16px !important;
    right: 16px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* ─── MARGENES LATERALES DE BLOQUES GRANDES ───────────────────
     Bloques como "Cómo cultivamos" tienen margin: 0 32px o 40px 32px.
     Lo reducimos. */
  section[style*="margin: 40px 32px"],
  section[style*="margin: 0 32px"] {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* ─── ARTÍCULOS DE PRODUCTO/RECETA — más compactos ───────────*/
  article[style*="border-radius: 24px"] {
    border-radius: 16px !important;
  }
  article[style*="padding: 22px"] {
    padding: 16px !important;
  }
  article div[style*="padding: 24px"] {
    padding: 16px !important;
  }

  /* ─── MODAL DE RECETA — más cómodo en móvil ──────────────────*/
  div[style*="max-width: 720px"] {
    border-radius: 18px !important;
  }
  div[style*="max-width: 720px"] > div[style*="padding: 32px 36px"] {
    padding: 22px 20px !important;
  }
  div[style*="max-width: 720px"] h2 {
    font-size: 24px !important;
  }

  /* ─── FOOTER — quitar el justify-between de la última línea ──*/
  div[style*="justify-content: space-between"][style*="font-size: 12px"] {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  /* ─── IMÁGENES DE LOGO DECORATIVAS — ocultar las muy grandes ─*/
  img[style*="width: 600px"],
  img[style*="width: 560px"],
  img[style*="width: 520px"] {
    width: 320px !important;
  }

  /* ─── BLOQUES GRANDES DE PESO RELLENO ────────────────────────*/
  div[style*="padding: 96px 64px"] {
    padding: 36px 20px !important;
  }
  div[style*="padding: 72px 64px"] {
    padding: 32px 20px !important;
  }

  /* ─── CTA CON GRID 1fr+auto → stack ──────────────────────────*/
  div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  /* Chips un toque más chicos */
  span[style*="padding: 8px 14px"][style*="border-radius: 999"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* ─── HERO — esconder decoraciones absolutas que tapan texto ──
     En el hero verde tenemos 3 elementos decorativos posicionados
     absolutamente (blob amarillo, blob celeste, texto serif itálico
     "¡cosechada hoy!"). En móvil se superponen al H1 y al párrafo,
     por lo que los ocultamos para que el contenido respire. */
  div[style*="background: rgb(46, 179, 97)"] > div[style*="position: absolute"][style*="top: 40px"],
  div[style*="background: rgb(46, 179, 97)"] > div[style*="position: absolute"][style*="bottom: -40px"],
  div[style*="background: rgb(46, 179, 97)"] > div[style*="position: absolute"][style*="top: 210px"] {
    display: none !important;
  }

  /* Botones del hero — que ocupen el ancho completo y se apilen */
  div[style*="display: flex"][style*="gap: 14px"][style*="flex-wrap: wrap"] > a {
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }

  /* Badges flotantes sobre la imagen del hero — más chicos */
  div[style*="position: absolute"][style*="top: -16px"][style*="left: -16px"],
  div[style*="position: absolute"][style*="bottom: -20px"][style*="right: -20px"] {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
}