/** * main.css — Hoja de estilos única de la home (Mercado Vibrante). * Organizada por secciones: tokens, base, navbar, hero, categorías, * productos destacados, distribuidores, footer, responsive. * Sin CSS por componente separado (KISS): un solo archivo, un solo . */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* El atributo hidden deja de funcionar en cualquier elemento que tenga su propio "display" explícito en el CSS (empata en especificidad con la regla nativa [hidden]{display:none} del navegador, y gana la más reciente en la cascada — o sea, la nuestra). Esta regla, bien arriba del archivo y con !important, garantiza que hidden siempre gane sin tener que acordarse de pisarlo a mano en cada componente nuevo. */ [hidden]{ display:none !important; } /* Transición nativa entre páginas (crossfade). Solo la entienden Chrome/Edge recientes — en el resto no hace nada y cae a la navegación normal del navegador, sin romper nada. */ @view-transition{ navigation:auto; } /* Respaldo que funciona en cualquier navegador: fundido de entrada al cargar cada página, para que el salto entre una y otra no se sienta como un corte seco. */ body{ animation:pageFadeIn 0.3s ease; } @keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } } /* El header/footer se arman por JS (Web Components) apenas carga la página — en vez de que "aparezcan de golpe", entran con un fundido corto una vez que ya están armados. */ /* display:contents en el wrapper: el custom element no genera su propia "caja" de layout, así el
/