se estira: con poco contenido el pie queda apoyado en el borde inferior de la pantalla en vez de subirse hasta la mitad. Es mejor que un min-height con numeros a mano (100vh menos el alto del header) porque no hay que mantener esas restas cuando cambia el alto del header o del pie. */ html { min-height: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } body > main { flex: 1 0 auto; } body > footer { flex: 0 0 auto; } img { max-width: 100%; display: block; border: 0; } a { color: var(--action); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.25; } s { color: var(--text-3); } :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--surface); color: var(--text); padding: 10px 16px; } .skip:focus { left: 8px; top: 8px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 12px; } /* ================================================================== HEADER ================================================================== */ .hd { background: var(--hd-bg); color: var(--hd-ink); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 50; } /* ---------- header que se esconde al bajar (solo desktop) ---------- */ .hd { transition: transform .25s ease; } .hd.hd-arriba { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .hd { transition: none; } } /* la lupa solo existe en mobile */ button.hd-lupa { display: none; } /* Hamburguesa: oculta en desktop, visible solo en mobile. Va como button.hd-burger (especificidad 0,1,1) y no como .hd-burger (0,1,0): el boton tambien lleva la clase .ico-btn, que declara display:grid mas abajo en este archivo. Con la misma especificidad ganaba la regla de mas abajo y la hamburguesa se veia en desktop. */ button.hd-burger { display: none; margin-left: -6px; } .hd-in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 14px; height: var(--hd-h); padding: 0 12px; } .hd-logo { flex: 0 0 auto; display: flex; align-items: center; } .hd-logo img { height: 34px; width: auto; object-fit: contain; } :root[data-theme="dark"] .hd-logo img { filter: brightness(1.35); } .hd-search { flex: 1 1 auto; position: relative; display: flex; max-width: 620px; } .hd-search input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text); padding: 0 42px 0 14px; font-size: 14px; outline: none; transition: box-shadow .15s, border-color .15s, background .15s; } .hd-search input:hover { background: var(--surface); } .hd-search input::placeholder { color: var(--text-3); } .hd-search input:focus { border-color: var(--action); background: var(--surface); box-shadow: 0 0 0 3px var(--action-sf); } .hd-search button { position: absolute; right: 0; top: 0; height: 38px; width: 40px; background: none; border: 0; color: var(--text-3); display: grid; place-items: center; border-radius: 0 var(--r) var(--r) 0; } .hd-search button:hover { color: var(--action); } .hd-search svg { fill: currentColor; } /* ---------- desplegable de sugerencias del buscador ---------- */ .sug { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60; background: var(--surface); border-radius: var(--r); box-shadow: 0 8px 28px rgba(0,0,0,.22); border: 1px solid var(--border); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; } .sug-g + .sug-g { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; } .sug-t { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; padding: 6px 14px 4px; } .sug a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--text); } .sug a:hover, .sug a.sel { background: var(--surface-2); text-decoration: none; } .sug a b { font-weight: 700; color: var(--text); } .sug-cat svg { flex: 0 0 auto; color: var(--text-3); } .sug-cat span { flex: 1; font-size: 13.5px; } .sug-cat em { font-style: normal; font-size: 11px; color: var(--text-3); } .sug-p img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: var(--r-sm); } .sug-p .ph-img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm); } .sug-n { flex: 1; font-size: 13px; line-height: 1.3; } .sug-pr { flex: 0 0 auto; font-size: 14px; font-weight: 600; white-space: nowrap; } .sug-todo { border-top: 1px solid var(--border); margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--action) !important; justify-content: center; } .sug-vacio { padding: 18px 14px; font-size: 13px; color: var(--text-2); text-align: center; } .hd-acc { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; } .ico-btn { position: relative; width: 38px; height: 38px; border: 0; background: none; color: var(--hd-ink); border-radius: 50%; display: grid; place-items: center; text-decoration: none; opacity: .8; } .ico-btn:hover { background: rgba(0,0,0,.08); opacity: 1; text-decoration: none; } :root[data-theme="dark"] .ico-btn:hover { background: rgba(255,255,255,.1); } .ico-btn .badge { position: absolute; top: 2px; right: 0; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; } /* iconos de tema: se muestra el que corresponde */ .i-moon { display: none; } :root[data-theme="dark"] .i-sun { display: none; } :root[data-theme="dark"] .i-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display: none; } :root:not([data-theme="light"]) .i-moon { display: block; } } /* nav de categorias: mismo fondo que el header, separado por una linea sutil */ .hd-nav { border-top: 1px solid rgba(0,0,0,.08); background: var(--hd-bg); } :root[data-theme="dark"] .hd-nav { border-top-color: rgba(255,255,255,.08); } .hd-nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 12px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hd-nav-in::-webkit-scrollbar { display: none; } .hd-nav-in a { flex: 0 0 auto; padding: 9px 11px; font-size: 13px; color: var(--hd-ink); opacity: .75; white-space: nowrap; border-bottom: 2px solid transparent; } .hd-nav-in a:hover { opacity: 1; text-decoration: none; } .hd-nav-in a.on { opacity: 1; border-bottom-color: currentColor; font-weight: 700; } /* Los dos extremos de la tira NO son rubros: uno vuelve al inicio y el otro abre el catalogo entero. Van en el color de accion para que se lean como lo que son -acciones- y no se confundan con una categoria mas de la lista. */ .hd-nav-in a.hd-nav-home, .hd-nav-in a.hd-nav-mas { color: var(--action); opacity: 1; font-weight: 600; } /* Una linea separa el "Ir a Home" del primer rubro, y otra el ultimo rubro del "Otras categorias": marcan donde empieza y termina la lista sin agregar markup. */ .hd-nav-in a.hd-nav-home { border-right: 1px solid var(--border); margin-right: 4px; } .hd-nav-in a.hd-nav-mas { border-left: 1px solid var(--border); margin-left: 4px; } /* ================================================================== HERO / MARQUESINA (scroll-snap: sin JS) ================================================================== */ /* Marquesina a todo el ancho (full bleed), como la de MELI. */ .hero { width: 100%; margin: 0; padding: 0; position: relative; } .hero-t { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* scroll-behavior NO va: pelea con el snap y anula el scroll por JS */ scroll-behavior: auto; scrollbar-width: none; gap: 0; background: var(--surface-2); } .hero-t::-webkit-scrollbar { display: none; } .hero-s { flex: 0 0 100%; scroll-snap-align: center; position: relative; /* que el ancla no empuje la pagina hacia arriba al usar las flechas */ scroll-margin-top: 0; } .hero-l { display: block; position: relative; } .hero-s img { width: 100%; /* Alto generoso: la marquesina es lo que abre el home y abajo se le monta la fila de categorias, asi que buena parte de lo que se ve tiene que quedar por ENCIMA de las tarjetas. */ height: clamp(210px, 34vw, 470px); object-fit: cover; } /* Degrade del pie de la marquesina hacia el color de fondo del sitio, para que la imagen no corte de golpe. Va como pseudo-elemento: no agrega markup ni pedidos de red. ARRANCA DONDE EMPIEZAN LAS TARJETAS, no a media foto. Estaba en 42% -145px de una marquesina de 346- y se comia el tercio inferior de la imagen: los banners traen el texto ahi y quedaba lavado. Ahora mide lo mismo que monta la fila de categorias, asi que solo desvanece la franja que igual queda tapada por las tarjetas. Sale de la misma variable que el solape: si se cambia una, la otra acompana sola y no pueden quedar desfasadas. */ .hero-l::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hero-solape); pointer-events: none; background: linear-gradient(to bottom, rgba(235,235,235,0) 0%, rgba(235,235,235,.55) 55%, var(--bg) 100%); } :root[data-theme="dark"] .hero-l::after { background: linear-gradient(to bottom, rgba(15,17,21,0) 0%, rgba(15,17,21,.55) 55%, var(--bg) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-l::after { background: linear-gradient(to bottom, rgba(15,17,21,0) 0%, rgba(15,17,21,.55) 55%, var(--bg) 100%); } } /* "Orejas": flechas circulares a los costados, estilo MELI. Son a la slide anterior/siguiente: el scroll lo hace el navegador. */ .hero-ar { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); color: #333; display: none; place-items: center; font-size: 17px; box-shadow: 0 2px 10px rgba(0,0,0,.22); text-decoration: none; transition: background .15s, transform .15s; } .hero-ar:hover { background: #fff; text-decoration: none; transform: translateY(-50%) scale(1.06); } .hero-ar.prev { left: 14px; } .hero-ar.next { right: 14px; } @media (min-width: 760px) { .hero-ar { display: grid; } } :root[data-theme="dark"] .hero-ar { background: rgba(30,34,42,.92); color: #e8eaed; } /* Dots redondos (como MELI), superpuestos sobre la imagen */ .hero-dots { position: absolute; left: 0; right: 0; bottom: 74px; display: flex; justify-content: center; gap: 7px; z-index: 3; } .hero-dots a { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.62); box-shadow: 0 0 3px rgba(0,0,0,.35); transition: background .15s, transform .15s; } .hero-dots a:hover { background: #fff; transform: scale(1.25); } @media (max-width: 759px) { .hero-dots { bottom: 62px; } } /* ------------------------------------------------------------------ FILA DE CATEGORIAS PREMIUM: monta sobre la marquesina ------------------------------------------------------------------ */ :root { --hero-solape: 92px; } /* cuanto monta la fila sobre la foto */ .cats-top { max-width: var(--maxw); margin: 0 auto; padding: 0 12px; position: relative; z-index: 4; margin-top: calc(-1 * var(--hero-solape)); /* "flota un poquito por abajo" */ } /* aire entre la fila de categorias y la primera tira de productos */ .cats-top { margin-bottom: 26px; } @media (max-width: 699px) { .cats-top { margin-bottom: 18px; } } /* H1 del home: presente para SEO pero discreto, no compite con la marquesina */ /* El H1 del home queda para Google pero NO se dibuja: encima de la marquesina metia una linea de texto suelta que ensuciaba la apertura. No se usa display:none -eso lo saca tambien del HTML que lee el buscador-, sino la tecnica de sacarlo del area visible dejandolo en el arbol de accesibilidad. */ .home-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* En pantallas chicas la fila monta menos. Se cambia la VARIABLE y no el margen: asi el degrade de la marquesina se acomoda solo y no queda arrancando mas arriba que el borde de las tarjetas. */ @media (max-width: 759px) { :root { --hero-solape: 56px; } } /* ================================================================== CARD DE PRODUCTO ================================================================== */ .card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: box-shadow .18s ease, transform .18s ease; } .card:hover { box-shadow: var(--shadow-h); transform: translateY(-2px); } .card-img { display: block; position: relative; background: #fff; aspect-ratio: 1 / 1; overflow: hidden; } :root[data-theme="dark"] .card-img { background: #f2f2f2; } .card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .card-off { position: absolute; left: 8px; top: 8px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-sm); } .ph-img { width: 100%; height: 100%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); } .card-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; } /* h3 sin estilos de titulo: es semantica para SEO, no jerarquia visual */ .card-h { margin: 0; font-weight: 400; font-size: inherit; } .card-t { display: -webkit-box; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 400; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .card-t:hover { color: var(--action); text-decoration: none; } /* line-height ajustado en cada renglon del bloque de precio: por defecto heredaban 1.45 del body y entre el tachado, el precio, las cuotas y el envio se iban casi 20px de aire muerto por card. */ .card-p { display: flex; flex-direction: column; gap: 0; margin-top: auto; } .card-old { font-size: 12px; line-height: 1.25; } .card-now { font-size: 21px; font-weight: 400; letter-spacing: -.4px; color: var(--text); line-height: 1.2; } .card-now.sm { font-size: 15px; color: var(--text-2); } .card-cuot { font-size: 12px; color: var(--ok); font-weight: 600; line-height: 1.35; } .tag-envio { font-size: 12px; font-weight: 600; color: var(--ok); line-height: 1.3; } .tag-envio img { display: inline-block; vertical-align: middle; height: 15px; width: auto; margin-right: 3px; } /* grilla */ .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } /* ================================================================== SLIDER HORIZONTAL (scroll-snap + 2 flechas) ================================================================== */ .slider { max-width: var(--maxw); margin: 22px auto 0; padding: 0 12px; } .slider-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .slider-h h2 { font-size: clamp(16px, 2.4vw, 21px); font-weight: 600; color: var(--text); } .slider-h h2 a { font-size: 13px; font-weight: 500; margin-left: 10px; } .verlink { font-size: 13px; font-weight: 500; white-space: nowrap; } /* "Ver mas" al pie de la tira: en desktop no va (ya esta el del titulo) */ .sl-mas { display: none; } .slider-w { position: relative; } .slider-t { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: auto; scrollbar-width: none; padding: 4px 2px 6px; -webkit-overflow-scrolling: touch; /* overflow-y explicito: con overflow-x:auto el navegador convierte el eje Y a auto tambien, y la tira pasa a ser un contenedor scrolleable vertical que compite con la pagina. Es el mismo cuidado que ya tenia la galeria del producto. */ overflow-y: hidden; /* que al llegar al final de la tira el impulso no siga en la pagina */ overscroll-behavior-x: contain; } /* EL SCROLL DE LA PAGINA NO SE FRENA SOBRE LAS TIRAS ------------------------------------------------------------------ Chrome, cuando un contenedor SOLO puede moverse en horizontal, convierte el giro vertical de la rueda en desplazamiento lateral y se queda con el gesto: pasas el mouse sobre una tira, seguis girando y la pagina deja de bajar. Se probo interceptarlo por JS y fue peor: cancelar el evento obliga a mover la pagina a mano, y eso pierde la inercia del sistema. Medido: 5 giros avanzaban exactamente 600px -120 por giro- contra bastante mas del scroll nativo. Se sentia lento y entrecortado. Asi que se ataca la causa: con mouse, la tira deja de scrollear por gesto y se mueve con las flechas, que ya estan. El scrollLeft por JS sigue andando con overflow-x:hidden, asi que las flechas no se ven afectadas. En tactil no se toca nada: el swipe sigue igual. */ @media (hover: hover) and (pointer: fine) { .slider-t { overflow-x: hidden; } } .slider-t::-webkit-scrollbar { display: none; } .sl-i { flex: 0 0 auto; width: 168px; scroll-snap-align: start; } @media (min-width: 700px) { .sl-i { width: 200px; } } @media (min-width: 1000px) { .sl-i { width: 214px; } } .sl-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-h); display: none; place-items: center; font-size: 15px; } .sl-nav:hover { background: var(--surface-2); } .sl-nav.prev { left: 2px; } .sl-nav.next { right: 2px; } @media (min-width: 900px) and (hover: hover) { .sl-nav { display: grid; } } /* ================================================================== TILES DE CATEGORIA (foto circular + nombre, estilo MELI) ================================================================== */ /* Tarjetas tipo MELI: titulo arriba, foto del producto abajo. En mobile scrollean en horizontal; en desktop entran todas en la grilla. */ .cats { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .cats::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .cats { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; } } .cat { flex: 0 0 158px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 9px; color: var(--text); overflow: hidden; min-height: 300px; /* misma altura que las de MELI */ transition: box-shadow .18s ease, transform .18s ease; } @media (min-width: 900px) { .cat { flex: 1 1 auto; } } .cat:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); text-decoration: none; } /* OJO con estos dos: Los hijos DIRECTOS de un flex container se "blockifican": el display:-webkit-box se convierte en flow-root y -webkit-line-clamp deja de funcionar. Por eso el recorte a 2 lineas se hace con alto fijo + overflow, que ademas anda en todos los navegadores. */ .cat-t { width: 100%; font-size: 14px; font-weight: 600; line-height: 1.25; height: 2.5em; overflow: hidden; } .cat-d { width: 100%; font-size: 12px; color: var(--text-2); line-height: 1.35; height: 2.7em; overflow: hidden; } /* Y aca: con height:100% dentro de un grid la imagen ignoraba el alto del contenedor y salia a 160px tapando el texto. Con max-height si respeta. */ /* la foto ocupa el alto que sobra: asi la tarjeta llega a los 300px sin que quede un hueco vacio abajo */ .cat-img { display: grid; place-items: center; background: #fff; border-radius: var(--r-sm); /* flex-basis 0 (no auto): el contenedor se dimensiona por el espacio que sobra en la tarjeta, NO por el alto natural de la foto. Con "auto" una imagen vertical (ej. una botella) estiraba la card y, al ser grid, se llevaba puesta toda la fila. min-height:0 desarma el minimo automatico del flex item, que es lo que dejaba desbordar igual. */ flex: 1 1 0; min-height: 0; height: 150px; max-height: 150px; overflow: hidden; } .cat-img img { /* width/height 100% + object-fit (mismo patron que .card-img img). NO usar max-height:100% con height:auto: los grid/flex items traen min-height:auto, que se resuelve al alto del contenido y le gana al max-height. Con una foto muy vertical (300x936) la imagen quedaba en 469px dentro de un box de 141 y se veia recortada. */ width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 4px; } .cat-b { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--marca, #e7191f); background: rgba(var(--marca-rgb, 231,25,31), .10); border-radius: var(--r-sm); padding: 7px 10px; text-align: center; transition: background .15s; } .cat:hover .cat-b { background: rgba(var(--marca-rgb, 231,25,31), .18); } /* ================================================================== APARICION AL SCROLLEAR El JS solo agrega la clase .in cuando el elemento entra en pantalla (IntersectionObserver). Toda la animacion se resuelve en CSS. ================================================================== */ /* IMPORTANTE: el estado oculto va bajo .js (la clase la pone el script del ). Sin JS el contenido se ve normal: nunca se puede dar el caso de que el catalogo quede invisible porque fallo el observer. */ .js .reveal { opacity: 0; transform: translateY(14px); will-change: opacity, transform; } .js .reveal.in { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.7,.3,1); } /* escalonado: cada tarjeta entra apenas despues que la anterior */ .js .reveal.in:nth-child(2) { transition-delay: .04s; } .js .reveal.in:nth-child(3) { transition-delay: .08s; } .js .reveal.in:nth-child(4) { transition-delay: .12s; } .js .reveal.in:nth-child(5) { transition-delay: .16s; } .js .reveal.in:nth-child(6) { transition-delay: .20s; } .js .reveal.in:nth-child(7) { transition-delay: .24s; } .js .reveal.in:nth-child(8) { transition-delay: .28s; } /* Fallback explicito: navegador sin IntersectionObserver */ .no-reveal .reveal { opacity: 1 !important; transform: none !important; } /* Fade-in de la foto cuando termina de bajar (lazy nativo). Se aplica sobre el ya cargado via el atributo data-ok. */ .card-img img, .cat-img img { animation: vfade .35s ease-out both; } @keyframes vfade { from { opacity: 0; } to { opacity: 1; } } /* banner html suelto del siteconfig */ .banner { max-width: var(--maxw); margin: 22px auto 0; padding: 0 12px; } .banner img { width: 100%; height: auto; border-radius: var(--r-lg); } .banner table { width: 100% !important; } /* ================================================================== LISTADO / BUSQUEDA ================================================================== */ .lay { max-width: var(--maxw); margin: 14px auto; padding: 0 12px; display: grid; gap: 16px; } @media (min-width: 900px) { .lay.con-side { grid-template-columns: 220px 1fr; } } /* CLAVE PARA MOBILE: Los items de un grid/flex arrancan con min-width:auto, que equivale a min-content. Si adentro hay algo que no puede achicarse -por ejemplo la fila de chips con flex-wrap:nowrap, cuyo min-content son ~900px- la columna se estira a ese ancho y se lleva puesta toda la pagina: el documento terminaba midiendo 914px dentro de un viewport de 390. Con min-width:0 el item puede achicarse y el overflow-x:auto interno recien ahi hace su trabajo. */ .lay > * { min-width: 0; } /* Paginas de poco contenido (carrito, checkout, mis pedidos). El alto ya lo resuelve el flex del (ver arriba): aca solo se centra el contenido en el espacio que sobra y se deja aire abajo. Antes habia un min-height con restas a mano -100vh menos 92 del header menos 180 del pie- que se desajustaba cada vez que cambiaba alguno. */ .lay-alto { align-content: center; padding-top: 24px; padding-bottom: 56px; } @media (max-width: 699px) { .lay-alto { padding-bottom: 36px; } } .grid > *, .slider-t > *, .cats > * { min-width: 0; } .card-b > *, .card-p > * { min-width: 0; } .side { display: none; } @media (min-width: 900px) { .side { display: block; margin-top: 20px; } } .side h3 { font-size: 14px; margin-bottom: 8px; color: var(--text); } .side ul { list-style: none; margin: 0 0 20px; padding: 0; } .side li { margin-bottom: 5px; } .side a { font-size: 13px; color: var(--text-2); } .side a:hover { color: var(--action); } .side a.on { color: var(--marca, #e7191f); font-weight: 700; } /* ================================================================== INTERRUPTORES DE ATRIBUTO (Compra Internacional, Outlet) ------------------------------------------------------------------ Son links con pinta de switch, como los de MercadoLibre. Van como y no como checkbox a proposito: cada combinacion tiene su URL, se puede compartir, y funciona con el JavaScript apagado. La perilla es un pseudo-elemento del riel, asi que todo el control son dos cajas y no hace falta markup extra. ================================================================== */ .side-sw { list-style: none; margin: 0 0 18px; padding: 0; } .side-sw li { margin-bottom: 8px; } .side-sw .sw { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--bg-card, #fff); border: 1px solid var(--linea, #e6e6e6); border-radius: 8px; font-size: 13px; color: var(--text); /* El interruptor es un , asi que le pegaba la regla general "a:hover { text-decoration: underline }" y se subrayaba entero, titulo y bajada incluidos. Es un control, no un enlace de texto: el mismo reset que ya tienen .cat, .com y .card-t. */ text-decoration: none; transition: border-color .15s, box-shadow .15s; } .side-sw .sw:hover { border-color: var(--text-3, #999); text-decoration: none; } .side-sw .sw-t { flex: 1; min-width: 0; display: block; } .side-sw .sw-t b { display: block; font-weight: 600; line-height: 1.3; } .side-sw .sw-t i { display: block; font-style: normal; font-size: 12px; color: var(--text-2); line-height: 1.35; margin-top: 2px; } /* el riel */ .side-sw .sw-k { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--linea, #e0e0e0); transition: background .18s; } /* la perilla */ .side-sw .sw-k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; } .side-sw .sw.on { border-color: var(--action, #3483fa); } .side-sw .sw.on .sw-k { background: var(--action, #3483fa); } .side-sw .sw.on .sw-k::after { transform: translateX(16px); } /* Sin animacion para quien la pidio apagada en el sistema */ @media (prefers-reduced-motion: reduce) { .side-sw .sw, .side-sw .sw-k, .side-sw .sw-k::after { transition: none; } } /* ------------------------------------------------------------------ EN MOBILE: chips arriba de los resultados ------------------------------------------------------------------ El lateral entero no se muestra en pantallas chicas, pero estos filtros SI tienen que estar: sin ellos, desde el telefono no hay forma de pedir "solo outlet". Se deja visible unicamente esta lista -el resto del lateral sigue oculto- y se acuesta en una tira horizontal, como hace MercadoLibre en el celular. El