/* Mexfrut — estilos propios de venta-exportacion-aguacate-hass.html (secciones y estados :hover de esta página). */
@media (max-width:900px){
    
    
    
    .hx-boxes{grid-template-columns:repeat(2,1fr) !important} /* Instruccion 02: la 5a tarjeta (20 kg) hace inviable 5 columnas en movil */
    
    
  }
.h-aguacate-hass-1:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-aguacate-hass-2:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-aguacate-hass-3:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-aguacate-hass-4:hover{background:#D8421E}
.h-aguacate-hass-5:hover{color:#98C23D}
.h-aguacate-hass-6:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)}
.h-aguacate-hass-7:hover{background:rgba(252,251,247,.14)}
.h-aguacate-hass-8:hover{background:#D8421E;box-shadow:0 22px 44px -14px rgba(240,83,45,.9)}
.h-aguacate-hass-9:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)}
.h-aguacate-hass-10:hover{background:rgba(252,251,247,.14)}
.h-aguacate-hass-11:hover{background:#D8421E}
.h-aguacate-hass-12:hover{color:#98C23D}
.h-aguacate-hass-13:hover{color:#98C23D}
.h-aguacate-hass-14:hover{color:#98C23D}
.h-aguacate-hass-15:hover{color:#98C23D}
.h-aguacate-hass-16:hover{color:#98C23D}
.h-aguacate-hass-17:hover{color:#98C23D}
.h-aguacate-hass-18:hover{color:#98C23D}
.h-aguacate-hass-19:hover{color:#98C23D}
.h-aguacate-hass-20:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-aguacate-hass-21:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-aguacate-hass-22:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-aguacate-hass-23:hover{color:#98C23D}
.h-aguacate-hass-24:hover{color:#98C23D}
.h-aguacate-hass-25:hover{color:#98C23D}
.h-aguacate-hass-26:hover{color:#98C23D}
.h-aguacate-hass-27:hover{transform:scale(1.06)}

/* Instruccion 13: ficha comercial en telefono. Cada fila era icono + etiqueta rigida de 150px +
   valor alineado a la derecha -> a 360px el valor quedaba mutilado contra el borde. En telefono
   la fila se apila: icono + etiqueta arriba, valor debajo alineado a la izquierda bajo la etiqueta. */
@media (max-width:560px){
  .hx-frow{flex-wrap:wrap;row-gap:4px;padding:14px 16px !important}
  .hx-flab{width:auto !important;flex:1 1 auto}
  .hx-fval{margin-left:0 !important;text-align:left !important;flex-basis:100%;padding-left:52px}
}

/* ============================================================================
   Instruccion 14 — REGLA PERMANENTE DEL CLIENTE: cero scroll horizontal en
   componentes moviles. Los strips/tablas se REORGANIZAN para caber en viewport.
   ============================================================================ */

/* (1) Equivalencias de calibre: de strip horizontal a lista vertical compacta.
   Cada tarjeta pasa a fila: [circulo calibre] [banda de peso] / [equivalencias en linea]. */
@media (max-width:900px){
  .hx-eq-wrap{overflow-x:visible !important}
  .hx-info-in{min-width:0 !important}
  .hx-info-grid{grid-template-columns:1fr !important;gap:10px !important;align-items:stretch !important}
  .hx-info-grid > .hx-step{display:grid !important;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;text-align:left !important;padding:12px 14px !important}
  .hx-info-grid > .hx-step > div:nth-child(1){display:none !important} /* imagen decorativa del aguacate (display inline en el markup) */
  .hx-info-grid > .hx-step > div:nth-child(2){grid-row:1 / span 2;margin:0 !important}
  .hx-info-grid > .hx-step > div:nth-child(3){margin:0 !important;justify-self:start;padding:4px 12px !important}
  .hx-info-grid > .hx-step > div:nth-child(4){flex-direction:row !important;flex-wrap:wrap;column-gap:16px;margin:2px 0 0 !important}
  .hx-info-grid > .hx-step > div:nth-child(4) > span{border-bottom:0 !important;padding:2px 0 !important}
  .hx-info-grid > .hx-step > div:nth-child(4) > span > strong{margin-left:6px !important}
}

/* (3) Calendario de disponibilidad sin scroll: producto en su propia linea y
   12 celdas de mes a lo ancho, con iniciales de mes (ENE -> E via first-letter). */
@media (max-width:900px){
  .hx-cal-in{min-width:0 !important}
  .hx-calrow{grid-template-columns:repeat(12,1fr) !important;gap:3px !important}
  .hx-calrow > span:first-child{grid-column:1 / -1;margin-bottom:3px}
  .hx-calrow-h > span:first-child{display:none}
  .hx-calrow-h > span{font-size:0 !important}
  .hx-calrow-h > span::first-letter{font-size:10.5px}
  .hx-cell{height:22px !important}
}

/* (6) Paletizado: de tabla de 5 columnas a tarjetas apiladas por tipo de caja.
   Cada celda trae su etiqueta en data-l -> se pinta con ::before. */
@media (max-width:900px){
  .hx-pal-wrap{overflow-x:visible !important}
  .hx-pal-in{min-width:0 !important}
  .hx-palhead{display:none !important}
  .hx-palrow{grid-template-columns:1fr !important;gap:7px !important;padding:16px 4px !important}
  .hx-palrow > span:first-child{font-size:15.5px !important;padding-bottom:2px}
  .hx-palrow > span[data-l]{display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:right !important}
  .hx-palrow > span[data-l]::before{content:attr(data-l);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#bcd47a;text-align:left;flex:none}
}

/* (2) Etapas de maduracion apiladas en telefono, con su anotacion junto a la etapa;
   (4) logistica a 1 tarjeta por fila; (5) boton de ficha contenido en su tarjeta. */
.hx-stage-note{display:none}
@media (max-width:560px){
  .hx-stages{flex-direction:column;height:auto !important}
  .hx-stages > div{min-height:46px;justify-content:space-between !important;padding:0 14px;gap:10px}
  .hx-stages > div span{text-align:left !important}
  .hx-stages > div span br{display:none}
  .hx-stage-note{display:block !important;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.82);text-align:right}
  .hx-stages-notes{display:none !important}
  .hx-transit{grid-template-columns:1fr !important}
  
}

/* Instruccion 15: en movil la imagen de la Ficha comercial va DESPUES de los datos.
   El split .r-2 colapsa a 1 columna a <=900px (styles.css); order:2 manda la columna
   de la imagen al final. El gap del grid mantiene el ritmo vertical de la seccion.
   Desktop (>900px) intacto: imagen a la izquierda como siempre. */
@media (max-width:900px){
  .hx-ficha-img{order:2}
}

/* Instruccion 18: reglas de componentes compartidos migradas a css/styles.css */