/* Ajustes exclusivos para teléfono: composición completa, sin solapamientos. */
@media (max-width:767px){
  /* El primer bloque blanco ocupa toda la altura visible; Ecosistema empieza al hacer scroll. */
  .hero{
    min-height:calc(100svh - var(--header))!important;
    min-height:calc(100dvh - var(--header))!important;
  }
  .hero-grid{
    min-height:calc(100svh - var(--header))!important;
    min-height:calc(100dvh - var(--header))!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    padding-top:32px!important;
    padding-bottom:32px!important;
  }
  .hero-copy{
    width:100%!important;
    margin:0 auto!important;
    justify-items:center!important;
    text-align:center!important;
  }
  .hero-visual{display:none!important;}

  /* En móvil el sello no puede quedar entre ambos perfiles ni tapar el contenido. */
  .responsive-ecosystem .onesta-medallion{display:none!important;}
  .responsive-ecosystem .ecosystem-panel,
  .responsive-ecosystem .ecosystem-panel:first-child,
  .responsive-ecosystem .ecosystem-panel:last-child{min-height:440px!important;}
  .responsive-ecosystem .panel-content{
    position:relative!important;
    z-index:2!important;
    padding:174px 24px 32px!important;
  }
  .responsive-ecosystem .panel-content .mini-label{
    display:inline-flex!important;
    position:relative!important;
    z-index:3!important;
    margin:0 0 10px!important;
    color:#fff!important;
    line-height:1.2!important;
  }
  /* La capa azul empieza donde inicia el rótulo, igual que en Productores. */
  .responsive-ecosystem .buyer .panel-shade{
    background:linear-gradient(to bottom,transparent 0 32%,rgba(17,73,190,.98) 32% 100%)!important;
  }

  /* Datos de contacto: icono y texto comparten una misma línea. */
  .contact-links a,
  .footer-contact .footer-icon-link{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }
  .contact-links a{justify-content:flex-start!important;text-align:left!important;}
  .contact-links a img,
  .footer-contact .footer-icon-link img{
    flex:0 0 auto!important;
    margin:0!important;
  }
  .contact-links a span{min-width:0!important;text-align:left!important;}
  .footer-contact .footer-icon-link{white-space:normal!important;text-align:center!important;}
  .footer-grid > div:not(.footer-brand) > h4,
  .footer-grid > div:not(.footer-brand) > a{text-align:center!important;}
}