/* Separación explícita entre composición tablet y teléfono real. */
@media (min-width:600px) and (max-width:1024px){
  /* Los dos perfiles se comparan lado a lado en tablet. */
  .ecosystem-pair{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }
  .ecosystem-panel,
  .ecosystem-panel:first-child,
  .ecosystem-panel:last-child{
    min-height:420px!important;
    border-radius:24px!important;
  }
  .panel-content{padding:42px 30px 30px!important;}

  /* Marca arriba; Home, Cultivos y Contacto en tres bloques paralelos. */
  .footer-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:24px 16px!important;
    text-align:center!important;
  }
  .footer-brand{grid-column:1/-1!important;text-align:center!important;}
  .footer-brand img,.footer-brand p{margin-left:auto!important;margin-right:auto!important;}
  .footer-grid>div:not(.footer-brand),.footer-contact{grid-column:auto!important;text-align:center!important;}
  .footer-icon-link{justify-content:center!important;}
}

@media (max-width:599px){
  /* En teléfono el mapa no se muestra; se conserva solo la palta. */
  .hero-map-composite,.hero-avocado{display:none!important;}
  .hero-mobile-crate{display:block!important;}

  /* Evita que el badge se corte en pantallas angostas. */
  .hero-copy .badge{
    min-width:180px!important;
    padding-inline:14px!important;
    font-size:8px!important;
    letter-spacing:.025em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  /* Solo móvil: las secciones del footer van una debajo de otra. */
  .footer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    text-align:center!important;
  }
  .footer-brand,.footer-grid>div:last-child,.footer-contact{grid-column:auto!important;text-align:center!important;}
  .footer-icon-link{justify-content:center!important;}
}
