/* Coop. Bunge — capa responsive (copiada del diseño de Claude Design).
   El diseño base está pensado para Full HD (1920px); estas reglas sólo
   entran en anchos menores. Usan !important porque el layout base vive
   en estilos inline. */

/* ---------- Tablet: 1024px y menos ---------- */
@media (max-width: 1024px) {
  .r-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .r-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-split  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .r-split-cell { border-right: none !important; border-bottom: 2px solid var(--color-divider) !important; }
  .r-split-panel { padding-left: 0 !important; }
  .r-footer { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .r-hero   { height: 78vh !important; min-height: 480px !important; }
  .r-hero-title { font-size: 44px !important; }
  .r-hero-typed { font-size: 22px !important; }
}

/* ---------- Móvil: 700px y menos ---------- */
@media (max-width: 700px) {
  .r-cols-5,
  .r-cols-4,
  .r-cols-3,
  .r-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-1-mobile { grid-template-columns: 1fr !important; }
  .r-footer { grid-template-columns: 1fr !important; gap: 22px !important; }
  .r-hero { height: 72vh !important; min-height: 420px !important; }
  .r-hero-title { font-size: 32px !important; max-width: 22ch !important; }
  .r-hero-typed { font-size: 19px !important; }
  .r-hero-body { font-size: 15px !important; }

  /* filas tipo "corte programado": se apilan */
  .r-row { grid-template-columns: auto 1fr !important; gap: 12px !important; }
  .r-row > :last-child { grid-column: 2 !important; justify-self: start !important; }

  /* aviso de necrológica del inicio: se apila */
  .r-necro { grid-template-columns: 1fr !important; gap: 10px !important; }
  .r-necro > :last-child { text-align: left !important; }

  /* bloques con encabezado + acción a la derecha */
  .r-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .r-head > * { align-items: flex-start !important; text-align: left !important; }
  .r-head p { text-align: left !important; }

  /* aire lateral y tipografía */
  .r-sec { padding-left: 18px !important; padding-right: 18px !important; }
  h1 { font-size: 32px !important; }
  h2 { font-size: 25px !important; }
  h3 { font-size: 21px !important; }

  /* agregado al pasar a Django: el libro de los 50 años deja de flotar */
  .aside-libro { float: none !important; width: auto !important; margin: 0 0 28px !important; }
}

/* ---------- Móvil chico: 460px y menos ---------- */
@media (max-width: 460px) {
  .r-cols-5,
  .r-cols-4,
  .r-cols-3,
  .r-cols-2 { grid-template-columns: 1fr !important; }
  .r-hero-title { font-size: 28px !important; }
}

/* ---------- Menú de navegación ---------- */
.r-navtoggle { display: none; }
@media (max-width: 1100px) {
  .r-navtoggle { display: inline-flex !important; }
  .r-navlinks {
    display: none !important;
    order: 3;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px 0 4px !important;
    border-top: 1px solid rgba(32, 30, 29, 0.12);
    margin-top: 10px !important;
  }
  .r-navlinks[data-open="true"] { display: flex !important; }
  .r-navlinks .navlink {
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  .r-navcta { order: 2; }
}
@media (max-width: 520px) {
  .r-navcta { font-size: 13px !important; padding: 10px 14px !important; }
}