/* Mexfrut — estilos propios de empaque-aguacate-frutas.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. */ .ep-hero-bg{background-image:url(../img/hero-empacadora.webp)} @media (max-width:768px){.ep-hero-bg{background-image:url(../img/hero-empacadora-movil.webp)}} @media (max-width:900px){ .r-3{grid-template-columns:repeat(2,1fr) !important} } /* --- empaque --- */ .ep-ph{position:relative;border-radius:20px;background:repeating-linear-gradient(45deg,#EDF3EE 0 14px,#E4EDE6 14px 28px);border:1px dashed rgba(31,38,20,.22);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:220px} .ep-ph span{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#5c6a52;background:rgba(252,251,247,.85);padding:5px 10px;border-radius:6px;text-align:center} .ep-num{display:inline-flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;font-size:15px;font-weight:800;color:#22331B;background:#98C23D;border-radius:999px;padding:7px 16px;letter-spacing:.06em} .ep-proc{padding-left:0} .ep-rail{position:absolute;top:10px;bottom:10px;left:50%;width:4px;transform:translateX(-50%);background:#EDEFE3;border-radius:2px;overflow:hidden} .ep-rail-fill{display:block;width:100%;height:0;background:linear-gradient(180deg,#98C23D,#F0532D);border-radius:2px;transition:height .25s linear} .ep-step{position:relative;z-index:1} .ep-step > div{background:transparent} @media (prefers-reduced-motion:reduce){.ep-rail-fill{transition:none}} @media (max-width:900px){ .ep-step{grid-template-columns:1fr !important} .ep-flip > div:first-child{order:2} .ep-rail{left:8px;transform:none} .ep-proc{padding-left:30px} } .ep-map{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:10px} .ep-zone{background:#fff;border:1px solid rgba(31,38,20,.1);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ep-zone:hover{transform:translateY(-5px);box-shadow:0 22px 44px -24px rgba(31,38,20,.32);border-color:rgba(152,194,61,.6)} .ep-znum{font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;font-size:13px;font-weight:800;color:#5E7D24;letter-spacing:.08em} .ep-zname{font-size:14.5px;font-weight:700;color:#1F2614;line-height:1.3} .ep-zone-hi{background:#2E3D14;border-color:transparent} .ep-zone-hi .ep-znum{color:#98C23D} .ep-zone-hi .ep-zname{color:#FCFBF7} .ep-zone-cold{background:#EAF2F6;border-color:rgba(31,38,20,.08)} .ep-zarrow{display:none} .ep-eqs{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px} .ep-eq{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid rgba(31,38,20,.12);font-size:12.5px;font-weight:600;color:#2E3D14;color:#2E3D14} .ep-eq svg{color:#5E7D24;flex:none} @media (min-width:1180px){ .ep-map{display:flex;flex-wrap:nowrap} .ep-zone{flex:1 1 0;min-width:0} .ep-zarrow{display:flex;align-items:center;color:#98C23D;font-size:18px;flex:none} } @media (max-width:560px){.ep-map{grid-template-columns:repeat(2,1fr)}} .h-empaque-1:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empaque-2:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empaque-3:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14;opacity:1} .h-empaque-4:hover{background:#D8421E} .h-empaque-5:hover{color:#98C23D} .h-empaque-6:hover{background:#D8421E} .h-empaque-7:hover{transform:scale(1.08)} .h-empaque-8:hover{transform:scale(1.08)} .h-empaque-9:hover{transform:scale(1.08)} .h-empaque-10:hover{background:#D8421E;box-shadow:0 22px 44px -12px rgba(240,83,45,.95)} .h-empaque-11:hover{background:rgba(252,251,247,.14)} .h-empaque-12:hover{background:#D8421E} .h-empaque-13:hover{color:#98C23D} .h-empaque-14:hover{color:#98C23D} .h-empaque-15:hover{color:#98C23D} .h-empaque-16:hover{color:#98C23D} .h-empaque-17:hover{color:#98C23D} .h-empaque-18:hover{color:#98C23D} .h-empaque-19:hover{color:#98C23D} .h-empaque-20:hover{color:#98C23D} .h-empaque-21:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empaque-22:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empaque-23:hover{background:#98C23D;border-color:#98C23D;color:#2E3D14} .h-empaque-24:hover{color:#98C23D} .h-empaque-25:hover{color:#98C23D} .h-empaque-26:hover{color:#98C23D} .h-empaque-27:hover{color:#98C23D} .h-empaque-28:hover{transform:scale(1.06)} /* Revision humana (empaque): las 3 miniaturas de galeria median 414px fijos (flex:none) y la tercera quedaba cortada en telefono. A <=560px se reparten el ancho disponible en una sola fila. */ @media (max-width:560px){ .ep-gal{flex:1 1 100% !important;justify-content:center;align-items:flex-start} .ep-gal a{width:calc((100% - 24px)/3) !important;height:auto !important;aspect-ratio:1/1} } /* Instruccion 18: reglas de componentes compartidos migradas a css/styles.css */