/* Mexfrut — estilos propios de mexfrut-exportadora-aguacate.html (secciones y estados :hover de esta página). */ /* Instruccion 25: el fondo del hero sale del inline style para servir la version movil (800px) en telefonos. Los preloads del usan exactamente los mismos media queries. */ .em-hero-bg{background-image:url(../img/aguacates-arbol.webp)} @media (max-width:768px){.em-hero-bg{background-image:url(../img/aguacates-arbol-movil.webp)}} @media (max-width:900px){ .r-3{grid-template-columns:repeat(2,1fr) !important} } /* --- empresa --- */ .em-chip{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid rgba(31,38,20,.12);font-size:12.5px;font-weight:600;color:#2E3D14} .em-ph{position:relative;background:repeating-linear-gradient(45deg,#EDF3EE 0 12px,#E4EDE6 12px 24px);display:flex;align-items:center;justify-content:center;overflow:hidden} .em-ph span{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:#5c6a52;background:rgba(252,251,247,.9);padding:4px 7px;border-radius:5px;text-align:center;line-height:1.3} /* timeline */ .em-tl{padding-top:34px} .em-tl-bar{position:absolute;top:0;left:0;right:0;height:4px;background:#EDEFE3;border-radius:2px;overflow:hidden} .em-tl-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#98C23D,#F0532D);border-radius:2px;transition:width 1.6s cubic-bezier(.22,.61,.36,1)} .em-tl[data-tl-on] .em-tl-fill{width:100%} .em-milestone{position:relative;padding-top:8px} .em-dot{position:absolute;top:-40px;left:0;width:16px;height:16px;border-radius:50%;background:#98C23D;border:3px solid #FCFBF7;box-shadow:0 0 0 2px #98C23D} .em-dot-pending{background:#C9CF9F;box-shadow:0 0 0 2px #C9CF9F} .em-dot-now{background:#F0532D;box-shadow:0 0 0 2px #F0532D} @keyframes em-now-pulse{0%{box-shadow:0 0 0 2px #F0532D}70%{box-shadow:0 0 0 10px rgba(240,83,45,0)}100%{box-shadow:0 0 0 2px #F0532D}} .em-dot-now{animation:em-now-pulse 2.4s ease-out infinite} @media (prefers-reduced-motion:reduce){.em-dot-now{animation:none}.em-tl-fill{transition:none}} @media (max-width:900px){ .em-tl{grid-template-columns:1fr !important;padding-top:0;padding-left:30px} .em-tl-bar{top:0;bottom:0;left:6px;right:auto;width:4px;height:auto} .em-tl-fill{width:100% !important;height:0;transition:height 1.6s cubic-bezier(.22,.61,.36,1)} .em-tl[data-tl-on] .em-tl-fill{height:100%} .em-dot{top:6px;left:-30px} .em-adv{grid-template-columns:1fr !important} } .h-empresa-1:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empresa-2:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empresa-3:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empresa-4:hover{background:#D8421E} .h-empresa-5:hover{color:#98C23D} .h-empresa-6:hover{color:#5E7D24} .h-empresa-7:hover{background:#D8421E} .h-empresa-8:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)} .h-empresa-9:hover{background:rgba(252,251,247,.14)} .h-empresa-10:hover{background:#D8421E} .h-empresa-11:hover{color:#98C23D} .h-empresa-12:hover{color:#98C23D} .h-empresa-13:hover{color:#98C23D} .h-empresa-14:hover{color:#98C23D} .h-empresa-15:hover{color:#98C23D} .h-empresa-16:hover{color:#98C23D} .h-empresa-17:hover{color:#98C23D} .h-empresa-18:hover{color:#98C23D} .h-empresa-19:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empresa-20:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empresa-21:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empresa-22:hover{color:#98C23D} .h-empresa-23:hover{color:#98C23D} .h-empresa-24:hover{color:#98C23D} .h-empresa-25:hover{color:#98C23D} .h-empresa-26:hover{transform:scale(1.06)} /* Instruccion 18: reglas de componentes compartidos migradas a css/styles.css */