/* Mexfrut — estilos compartidos por todas las páginas del sitio: resets, tipografía, header + top bar + menú móvil, submenús, botones, animaciones de entrada (reveal), footer y breakpoints responsivos comunes. */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#FCFBF7;color:#1F2614;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:'Bricolage Grotesque','Inter',sans-serif;margin:0;letter-spacing:-.02em;text-wrap:balance} p{margin:0;text-wrap:pretty} button{font-family:inherit;cursor:pointer} a{color:inherit;text-decoration:none} @keyframes mf-fa{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} @keyframes mf-fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-23px)}} @keyframes mf-rise{from{transform:translateY(24px)}to{transform:none}} @keyframes mf-avo-live{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(1.6deg)}} .mf-avo{opacity:0;transform:translateY(90px) scale(.6) rotate(-12deg);transform-origin:50% 70%} [data-shown] .mf-avo{animation:mf-avo-in 1.2s cubic-bezier(.18,.75,.25,1) both} [data-shown] .mf-avo-inner{animation:mf-avo-live 6s ease-in-out infinite 1.2s} /* Instruccion 08: los keyframes de entrada del hero (.mf-avo) vivian solo en home.css, pero la regla que oculta .mf-avo (opacity:0) es compartida -> en hass y congelados la animacion nunca corria y el hero quedaba invisible. Los keyframes y el fallback de reduced-motion deben ser compartidos. */ @keyframes mf-avo-in{0%{opacity:0;transform:translateY(90px) scale(.6) rotate(-12deg)}55%{opacity:1;transform:translateY(-14px) scale(1.05) rotate(3deg)}75%{transform:translateY(4px) scale(.99) rotate(-1.5deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}} @media (prefers-reduced-motion:reduce){.mf-avo,.mf-avo-inner,.mf-avo-halo{animation:none;opacity:1;transform:none}} @keyframes mf-ping{0%{transform:scale(.6);opacity:.85}70%,100%{transform:scale(2.6);opacity:0}} @keyframes mf-orig{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}} /* Instruccion 11: @keyframes mf-flow vivia solo en home.css -> el mapa de mercados quedaba congelado en las demas paginas que lo usan (ej. Aguacate Hass). Keyframes junto a su regla. */ @keyframes mf-flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}} .mf-flow{animation:mf-flow 3s linear infinite} .mf-ping{transform-box:fill-box;transform-origin:center;animation:mf-ping 3s ease-out infinite} .mf-orig{transform-box:fill-box;transform-origin:center;animation:mf-orig 2.2s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.mf-flow,.mf-ping,.mf-orig{animation:none}.mf-flow{stroke-dashoffset:0;stroke-dasharray:none;opacity:.7}} @media (max-width:400px){ .mf-brandlogo{height:34px !important} .mf-collab-div{height:24px !important} .mf-collab-cap{display:none !important} .mf-collab-logo{height:12px !important} } /* Instruccion 17: sistema de reveals sin "brinco". - El estado oculto se aplica ANTES del primer pintado: un script inline de 1 linea en el agrega la clase js a ; solo bajo esa clase existe el estado oculto (sin JS todo se ve). - Antes, el estado oculto vivia solo en home.css y llegaba tarde via data-anim-on: en las internas el elemento se veia en su posicion final, brincaba 24px abajo (mf-rise both) y volvia a subir. - Los elementos visibles en el primer viewport se marcan data-instant (aparicion inmediata, sin translate) para que el above-the-fold no baile. */ html.js [data-reveal]:not([data-shown]){opacity:0;transform:translateY(24px)} [data-anim-on] [data-reveal][data-shown]{opacity:1;animation:mf-rise .7s cubic-bezier(.22,.61,.36,1) both} [data-reveal][data-instant]{animation:none !important;opacity:1 !important;transform:none !important} @media (prefers-reduced-motion: reduce){html.js [data-reveal],[data-anim-on] [data-reveal]{opacity:1 !important;transform:none !important;animation:none !important}} /* Instruccion 07: regla base de .mf-nav (antes solo en home.css -> los