/* Mexfrut — estilos propios de venta-exportacion-mango.html (secciones y estados :hover de esta página). */

/* --- mango --- */
  @keyframes mg-fa{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(0deg)}}
@keyframes mg-fb{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-20px) rotate(0deg)}}
@keyframes mg-fc{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mg-float-a{animation:mg-fa 6.4s ease-in-out infinite}
.mg-float-b{animation:mg-fb 5.6s ease-in-out infinite .4s}
.mg-float-c{animation:mg-fc 7s ease-in-out infinite .9s}
@media (prefers-reduced-motion:reduce){.mg-float-a,.mg-float-b,.mg-float-c{animation:none}}
.mg-hchip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(240,169,45,.5);background:rgba(240,169,45,.12);font-size:13px;font-weight:600;color:#f3c977}
.mg-vars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mg-card{background:#fff;border:1px solid rgba(31,38,20,.08);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.mg-card:hover{transform:translateY(-8px);box-shadow:0 28px 54px -26px rgba(31,38,20,.34);border-color:rgba(240,169,45,.6)}
.mg-img{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mg-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.mg-card:hover .mg-img img{transform:scale(1.08) rotate(-2deg)}
.mg-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.mg-chip{display:inline-flex;padding:7px 13px;border-radius:999px;background:#FDF3E0;font-size:12px;font-weight:600;color:#8a5a12}
.mg-ico{width:44px;height:44px;border-radius:12px;background:#FDF3E0;display:flex;align-items:center;justify-content:center;color:#C97A1E}
.mg-tablewrap{margin-top:40px}
.mg-table{background:#fff;border:1px solid rgba(31,38,20,.08);border-radius:18px;overflow:hidden}
.mg-trow{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.3fr;gap:14px;align-items:center;padding:16px 22px;border-top:1px solid rgba(31,38,20,.07)}
.mg-trow:first-child{border-top:0}
.mg-thead{background:#F1F5E6;font:600 12px 'Inter','Inter Fallback',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5E7D24}
.mg-tname{font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;font-size:17px;font-weight:700;color:#1F2614}
.mg-d{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(31,38,20,.12);margin-right:5px}
.mg-d.on{background:#F0A92D}
.mg-use{background:#fff;border:1px solid rgba(31,38,20,.08);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:7px;transition:transform .25s ease,box-shadow .25s ease}
.mg-use:hover{transform:translateY(-5px);box-shadow:0 22px 44px -24px rgba(31,38,20,.3)}
.mg-usek{font:700 11.5px 'Inter','Inter Fallback',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#C97A1E}
.mg-use strong{font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;font-size:19px;font-weight:700;color:#1F2614}
.mg-uset{font-size:13.5px;line-height:1.55;color:#3A4429}

@media (max-width:1100px){.mg-vars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
    .mg-vars{grid-template-columns:1fr}
    .mg-trow{grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px}
    .mg-thead{display:none}
    .mg-trow .mg-tname{grid-column:1/-1}
    .mg-trow span[data-l]::before{content:attr(data-l);display:block;font:600 10px 'Inter','Inter Fallback',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5C6650;margin-bottom:5px}
  }
.h-mango-1:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-mango-2:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-mango-3:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-mango-4:hover{background:#D8421E}
.h-mango-5:hover{color:#98C23D}
.h-mango-6:hover{color:#98C23D}
.h-mango-7:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)}
.h-mango-8:hover{background:rgba(252,251,247,.14)}
.h-mango-9:hover{background:#D8421E}
.h-mango-10:hover{background:rgba(252,251,247,.16)}
.h-mango-11:hover{background:#3f5318}
.h-mango-12:hover{background:rgba(152,194,61,.14);border-color:#5E7D24}
.h-mango-13:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)}
.h-mango-14:hover{background:rgba(252,251,247,.14)}
.h-mango-15:hover{background:#D8421E}
.h-mango-16:hover{color:#98C23D}
.h-mango-17:hover{color:#98C23D}
.h-mango-18:hover{color:#98C23D}
.h-mango-19:hover{color:#98C23D}
.h-mango-20:hover{color:#98C23D}
.h-mango-21:hover{color:#98C23D}
.h-mango-22:hover{color:#98C23D}
.h-mango-23:hover{color:#98C23D}
.h-mango-24:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-mango-25:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-mango-26:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-mango-27:hover{color:#98C23D}
.h-mango-28:hover{color:#98C23D}
.h-mango-29:hover{color:#98C23D}
.h-mango-30:hover{color:#98C23D}
.h-mango-31:hover{transform:scale(1.06)}

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