/* Mexfrut — estilos propios de index.html (secciones y estados :hover de esta página). */
/* Instruccion 25: el fondo del hero sale del inline style para poder servir una version movil
(800px, 81KB) en telefonos y la original (1920px, 384KB) en desktop. Los preloads del
usan exactamente los mismos media queries — si cambia el breakpoint, cambiar ambos lados. */
#hero-bg{background-image:url(../img/hero-empacadora.webp)}
@media (max-width:768px){#hero-bg{background-image:url(../img/hero-empacadora-movil.webp)}}
@keyframes mf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes mf-float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mf-fc{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes mf-fd{0%,100%{transform:translateY(0)}50%{transform:translateY(-19px)}}
@keyframes mf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mf-pop{0%{transform:scale(.72);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
[data-anim-on] [data-reveal][data-shown] .mf-feat-circle{animation:mf-pop .8s cubic-bezier(.34,1.4,.5,1) both}
.mf-feat-circle{transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.mf-feat:hover .mf-feat-circle{transform:translateY(-4px) scale(1.03)}
/* Bloomberg press photo entrance: cinematic vertical wipe + settle */
@keyframes mf-press-in{0%{clip-path:inset(100% 0 0 0);opacity:0;transform:scale(1.06)}60%{opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1;transform:scale(1)}}
[data-anim-on] [data-reveal][data-shown] .mf-press-frame{animation:mf-press-in 1.05s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.mf-press-frame{animation:none !important;clip-path:none !important}}
/* permanent life on the feature circles: a slowly rotating brand-color ring
behind each photo, plus a soft halo that keeps pulsing (staggered). */
@keyframes mf-spin{to{transform:rotate(360deg)}}
@keyframes mf-halo{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.22);opacity:0}}
.mf-feat-circle::before{content:"";position:absolute;inset:-8px;border-radius:50%;z-index:-2;background:conic-gradient(from 0deg,#98C23D,#F0532D,#C97A1E,#5E7D24,#98C23D);animation:mf-spin 8s linear infinite}
.mf-feat-circle::after{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;border:2px solid #98C23D;animation:mf-halo 3s ease-out infinite}
.r-4 .mf-feat:nth-child(2) .mf-feat-circle::after{border-color:#F0532D;animation-delay:.7s}
.r-4 .mf-feat:nth-child(2) .mf-feat-circle::before{animation-direction:reverse;animation-duration:9s}
.r-4 .mf-feat:nth-child(3) .mf-feat-circle::after{border-color:#5E7D24;animation-delay:1.4s}
.r-4 .mf-feat:nth-child(3) .mf-feat-circle::before{animation-duration:10s}
.r-4 .mf-feat:nth-child(4) .mf-feat-circle::after{border-color:#C97A1E;animation-delay:2.1s}
.r-4 .mf-feat:nth-child(4) .mf-feat-circle::before{animation-direction:reverse;animation-duration:11s}
@media (prefers-reduced-motion:reduce){.mf-feat-circle::before,.mf-feat-circle::after{animation:none}}
/* "A quién abastecemos" cards: hover = image zoom + title underline only.
Title + description always visible. */
.mf-serve .mf-serve-img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.mf-serve:hover .mf-serve-img{transform:scale(1.09)}
.mf-serve .mf-serve-rule{height:3px;width:0;background:#98C23D;border-radius:2px;margin-top:10px;margin-bottom:8px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.mf-serve:hover .mf-serve-rule{width:52px}
@media (prefers-reduced-motion:reduce){.mf-serve .mf-serve-img,.mf-serve .mf-serve-rule{transition:none}}
/* hero avocado (producto principal): dramatic entrance + gentle live float+tilt */
@keyframes mf-halo-breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.85}}
.mf-avo-halo{opacity:0}
[data-shown] .mf-avo-halo{animation:mf-halo-breathe 5s ease-in-out infinite .4s}
/* frozen product (producto intermedio): frost-reveal entrance + slow live drift */
@keyframes mf-frozen-in{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.12) translateY(24px)}60%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1) translateY(0)}}
@keyframes mf-frozen-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.8deg)}}
.mf-frozen{opacity:0}
[data-shown] .mf-frozen{animation:mf-frozen-in 1.15s cubic-bezier(.2,.75,.25,1) both}
[data-shown] .mf-frozen-inner{animation:mf-frozen-drift 7s ease-in-out infinite 1.15s}
@media (prefers-reduced-motion:reduce){.mf-frozen,.mf-frozen-inner{animation:none;opacity:1}}
/* animated export routes on the world map */
/* ============ RESPONSIVE (media queries can't live inline) ============ */
@media (max-width:920px){
.r-2{grid-template-columns:1fr !important;gap:40px !important;align-items:start !important}
.r-map{grid-template-columns:1fr !important;gap:36px !important}
.r-ceo{grid-template-columns:1fr !important;max-width:560px !important;gap:32px !important}
.r-ceo .r-ceo-photo{max-width:300px}
}
@media (max-width:760px){
.r-3{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:560px){
.r-4,.r-3,.r-2col{grid-template-columns:1fr !important}
.r-foot{grid-template-columns:1fr !important}
}
/* header on mobile: hide top bar, keep MexFrut logo + a shrunk EuroHass lockup + burger */
/* Instruccion 17: el estado oculto de los reveals ahora es compartido y pre-pintado
(html.js + regla en styles.css); la regla [data-anim-on] que vivia aqui se retiro. */
image-slot{display:block}
/* animated brand-green underline for nav links (a pseudo-class hover can't live in inline styles) */
/* dynamic button hover: lift + deepen shadow + sheen sweep */
/* dropdown submenu links: tint + slide on hover */
/* form fields (focus + placeholder can't be inline) — styled for the dark contact band */
.mf-input{width:100%;box-sizing:border-box;background:rgba(252,251,247,.06);border:1px solid rgba(252,251,247,.2);border-radius:10px;padding:13px 15px;color:#FCFBF7;font:15px/1.4 'Inter',system-ui,sans-serif;transition:border-color .2s,background .2s}
.mf-input::placeholder{color:rgba(252,251,247,.5)}
.mf-input:focus{outline:none;border-color:#98C23D;background:rgba(252,251,247,.11)}
.mf-input option{color:#1F2614}
.mf-input optgroup{color:#1F2614;font-weight:700}
/* FAQ accordion (native details — answer text stays in the DOM for SEO/AI) */
/* Frutas finas: single adaptive row of floating fruit tiles */
.mf-fruit{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 14px 22px;border-radius:18px;background:transparent;transition:background .3s ease}
.mf-fruit:hover{background:#fff}
.mf-fruit .mf-fruit-img{height:120px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(31,38,20,.25));transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
.mf-fruit:hover .mf-fruit-img{transform:translateY(-8px) scale(1.08) rotate(-2deg)}
.mf-fruit .mf-fruit-rule{height:2.5px;width:0;background:#98C23D;border-radius:2px;margin:10px auto 0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.mf-fruit:hover .mf-fruit-rule{width:44px}
.r-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1080px){.r-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.r-6{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.mf-fruit .mf-fruit-img,.mf-fruit .mf-fruit-rule{transition:none}}
/* Referente del sector: arched (∩) feature layout + centered box hero */
.mf-arch > .mf-feat:nth-child(1){margin-top:74px}
.mf-arch > .mf-feat:nth-child(2){margin-top:6px}
.mf-arch > .mf-feat:nth-child(3){margin-top:6px}
.mf-arch > .mf-feat:nth-child(4){margin-top:74px}
@media (max-width:900px){.mf-arch > .mf-feat{margin-top:0 !important}}
@media (max-width:900px){.mf-box-wrap{margin-top:34px !important}}
@media (max-width:560px){
.mf-stats{flex-wrap:nowrap !important;gap:13px !important}
.mf-stats > div > div:first-child{font-size:23px !important}
.mf-stats > div > div:last-child{font-size:10.5px !important}
.mf-stats > span{height:34px !important}
}
@keyframes mf-box-in{0%{opacity:0;transform:translateY(96px) scale(.82)}60%{opacity:1;transform:translateY(-10px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mf-box-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(.6deg)}}
.mf-box{opacity:0;transform:translateY(96px) scale(.82);transform-origin:50% 80%}
[data-shown] .mf-box{animation:mf-box-in 1.15s cubic-bezier(.18,.75,.25,1) both}
[data-shown] .mf-box-inner{animation:mf-box-float 6s ease-in-out infinite 1.15s}
@media (prefers-reduced-motion:reduce){.mf-box,.mf-box-inner{animation:none;opacity:1;transform:none}}
/* footer link lists with sliding arrow + icon contact lines */
/* footer legal strip — centered + stacked on mobile */
.h-home-1:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-home-2:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-home-3:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1}
.h-home-4:hover{background:#D8421E}
.h-home-5:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)}
.h-home-6:hover{background:rgba(252,251,247,.14);box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.h-home-7:hover{background:#D8421E;box-shadow:0 22px 44px -14px rgba(240,83,45,.9)}
.h-home-8:hover{background:rgba(252,251,247,.14)}
.h-home-9:hover{background:#D8421E;box-shadow:0 22px 44px -14px rgba(240,83,45,.9)}
.h-home-10:hover{background:rgba(152,194,61,.12);border-color:#5E7D24}
.h-home-11:hover{background:#D8421E;box-shadow:0 22px 44px -14px rgba(240,83,45,.9)}
.h-home-12:hover{color:#98C23D}
.h-home-13:hover{color:#98C23D}
.h-home-14:hover{background:#D8421E;box-shadow:0 22px 44px -14px rgba(240,83,45,.9)}
.h-home-15:hover{color:#98C23D}
.h-home-16:hover{background:#D8421E}
.h-home-17:hover{color:#98C23D}
.h-home-18:hover{color:#98C23D}
.h-home-19:hover{color:#98C23D}
.h-home-20:hover{color:#98C23D}
.h-home-21:hover{color:#98C23D}
.h-home-22:hover{color:#98C23D}
.h-home-23:hover{color:#98C23D}
.h-home-24:hover{color:#98C23D}
.h-home-25:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-home-26:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-home-27:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14}
.h-home-28:hover{color:#98C23D}
.h-home-29:hover{color:#98C23D}
.h-home-30:hover{color:#98C23D}
.h-home-31:hover{color:#98C23D}
.h-home-32:hover{transform:scale(1.06)}
/* Instruccion 18: reglas de componentes compartidos migradas a css/styles.css */