/* ============================================================ HOBBIAR — lo que sólo pasa en el teléfono ============================================================ POR QUÉ UNA HOJA APARTE. El tema tiene DOS hojas grandes que definen las mismas clases: la de la home (`hobbiar-home.css`) y la de la tienda (`hobbiar.css`). Cada página carga una sola. Poner estas reglas en las dos era garantizar que un día queden distintas, así que van acá y `head.php` la carga siempre, DESPUÉS de la hoja del tema — por eso gana sin `!important`. TODO vive dentro de un `@media`: en el escritorio esta hoja no existe. Lo que arregla, tal como se reportó: 1. El botón del catálogo se veía como un "+" suelto. El ícono ERA una cruz (cuatro trazos cruzados) y el texto "Ver catálogo" se ocultaba en el teléfono: quedaba un más sin sentido. 2. No había navegación en el teléfono: `.topbar__nav` se ocultaba entero y no lo reemplazaba nada. Ahora hay un menú plegable con las secciones + contacto + carrito. 3. En el hero el título y los botones quedaban DEBAJO de la foto y fuera de la primera pantalla. 4. Las fichas del catálogo pasaban a UNA por fila: cada producto ocupaba una pantalla entera y ver diez era scrollear diez veces. ============================================================ */ @media (max-width: 720px) { /* ---------- 1 · EL MENÚ PLEGABLE ---------- */ /* El botón vive en el HTML siempre y se esconde en escritorio (ver abajo): así el tema no necesita saber en qué ancho está para dibujar el header. */ .hbmenu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line, rgba(22,22,26,.14)); background: transparent; color: inherit; cursor: pointer; padding: 0; } .hbmenu-btn svg { display: block; } /* La X aparece sólo con el menú abierto: dos íconos, uno visible por vez. */ .hbmenu-btn .ic-x { display: none; } .hbmenu-btn[aria-expanded="true"] .ic-x { display: block; } .hbmenu-btn[aria-expanded="true"] .ic-bars { display: none; } /* EL PANEL VA FIJO, PEGADO DEBAJO DE LA BARRA. La primera versión lo dejaba en el flujo normal, justo después del ``: como la barra es `position: fixed`, el menú se dibujaba en el tope del DOCUMENTO —o sea detrás de la barra y arriba de todo— y además empujaba la página entera hacia abajo. Estando a mitad de página uno lo abría, no veía nada, y tenía que subir hasta arriba para encontrarlo tapado por el header. Fijo a `top: var(--topbar)` sale siempre debajo de la barra, sin mover el contenido. `z-index: 54` = justo abajo de la barra (55) y arriba de todo lo demás. `max-height` + `overflow-y: auto`: en un teléfono apaisado seis opciones no entran. Se abre y cierra con `display`, sin animar `max-height`. La versión animada quedaba en cero: el valor de una propiedad en transición es el interpolado, y si el navegador no adelanta la animación (pestaña en segundo plano, motion reducido, un `rAF` frenado) el alto se queda en el valor inicial y el menú no aparece nunca. Medido: con `max-height: 420px !important` puesto a mano, el alto seguía siendo 1 px. Un menú que a veces no abre es peor que uno sin transición. */ .hbmenu { display: none; position: fixed; top: var(--topbar, 78px); left: 0; right: 0; z-index: 54; background: var(--paper, #fff); max-height: calc(100vh - var(--topbar, 78px)); overflow-y: auto; box-shadow: 0 18px 40px -24px rgba(22,22,26,.5); } .hbmenu.is-open { display: block; border-bottom: 1px solid var(--line, rgba(22,22,26,.14)); } .hbmenu__in { padding: 6px 18px 16px; display: flex; flex-direction: column; } .hbmenu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px; text-decoration: none; color: inherit; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line-soft, rgba(22,22,26,.08)); } .hbmenu a:last-child { border-bottom: 0; } .hbmenu a .n { font-family: var(--ff-mono, ui-monospace, monospace); font-size: 11px; opacity: .45; } /* El carrito, con su contador, cierra la lista: es la acción, no una sección más. */ .hbmenu .hbmenu__cart { color: var(--accent, #e0231c); } /* ---------- 2 · LA BARRA DE ARRIBA ---------- */ /* El CTA se queda pero como ÍCONO CON SENTIDO (una grilla de piezas, no una cruz). El texto sigue oculto por falta de lugar, así que el `aria-label` es lo que lee un lector de pantalla. */ .topbar__cta { width: 40px; height: 40px; padding: 0; justify-content: center; } /* ---------- 3 · EL HERO EN EL TELÉFONO ---------- EL PROBLEMA: el tema pone la foto primero (`order: -1`) y todo el texto debajo, así que en un teléfono la primera pantalla era una foto sola —sin saber qué es ni cuánto sale— y el título, el precio y los botones quedaban abajo del pliegue. EL ORDEN NUEVO: título chico → precio → la foto con sus miniaturas → los dos botones. `display: contents` en la columna izquierda es lo que lo hace posible: disuelve el contenedor y sus hijos (kicker, título, blurb, precio, botones) pasan a ser hermanos de la columna derecha, así cada uno se ordena por separado. Sin eso, o iba TODO el texto arriba o TODO abajo. ESCRITORIO INTACTO: nada de esto existe fuera del @media. */ .heroA .hero__inner { display: flex; flex-direction: column; /* `align-items: stretch` NO es de adorno: el tema trae `align-items: center` para centrar verticalmente las dos columnas de la grilla, y al pasar a flex en columna ese mismo valor pasa a centrar HORIZONTALMENTE — el kicker, el precio y los botones quedaban al medio y encogidos a su contenido. */ align-items: stretch; gap: 8px; padding: 10px 22px 0; } .heroA__left { display: contents; } /* `display: contents` BORRA LA CAJA de la columna izquierda, y con ella su `position: relative; z-index: 4` — que es lo único que mantenía al título, al precio y a los botones POR ENCIMA de la forma roja del fondo. Sin esto el texto quedaba tapado por la mancha. Cada hijo se lo pone. */ #heroCount, .heroA__title, .heroA__meta, .heroA__actions { position: relative; z-index: 4; } #heroCount { order: 1; font-size: 10px; } .heroA__title { order: 2; font-size: 27px; line-height: 1.1; margin: 0; } /* La descripción se saca: en el teléfono es la línea que empuja la foto fuera de la pantalla y no dice nada que el título y la categoría no digan ya. */ .heroA__blurb { display: none; } .heroA__meta { order: 3; margin: 0; gap: 6px; } .heroA__price { font-size: 24px; } .heroA__old { font-size: 13px; } /* los chips de transferencia / envío no van en el teléfono: la fila del precio queda limpia */ .heroA__perks { display: none; } .heroA__desc { padding: 4px 7px; } .heroA__desc b { font-size: 12.5px; } .heroA__desc small { font-size: 7.5px; } /* EL HERO LLENA LA PANTALLA Y LA FOTO TIENE UN LUGAR FIJO (2026-09-27). Antes el alto del stage lo ponía LA FOTO: con una pieza alta el hero se veía bien repartido, pero con una apaisada (el Tower Bridge: 774×581) el stage quedaba en ~220 px y todo —título, miniaturas, botones— se amontonaba arriba con media pantalla vacía abajo. Peor: al rotar, la foto nueva tarda en bajar (`loading=lazy`) y mientras tanto mide 0, así que el hero saltaba de alto en cada cambio. Ahora el hero ocupa la pantalla (`svh`: el alto real con la barra del navegador del iPhone), la columna de la foto se lleva el alto que sobra (`flex: 1`), y la foto va ABSOLUTA dentro del stage con `object-fit: contain`: se centra en los dos sentidos y no cambia el tamaño de nada. Título arriba, miniaturas y botones abajo, sea la foto alta o baja. */ .heroA { min-height: calc(100vh - var(--topbar, 78px)); min-height: calc(100svh - var(--topbar, 78px)); } .heroA__right { order: 4; flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; } /* Las miniaturas colgaban a 13vh del piso del hero: en el teléfono eso es un hueco enorme entre la foto y los botones. Y van CENTRADAS: son cuatro cuadraditos de 70 px en 331 de ancho, así que pegadas a la izquierda se leían como si faltara algo a la derecha. */ .heroA__right > .thumbs { margin-bottom: 0; justify-content: center; position: relative; z-index: 4; } .heroA .hero__stage { flex: 1 1 auto; min-height: 240px; } .heroA .hero__prod { position: absolute; top: 8px; left: 0; width: 100%; height: calc(100% - 16px); max-width: none; max-height: none; object-fit: contain; } /* LA MANCHA ROJA, A ESCALA DEL STAGE. Con un tamaño fijo (290×320) era más alta que el stage de una foto apaisada y se comía el título arriba y las miniaturas abajo. Ahora mide lo que mide el stage (en %: el stage es su caja de referencia) y nunca sale de él. Las miniaturas, además, van por encima (`z-index: 4`) por si la inclinación la asoma un par de píxeles. */ .heroA .hero__shape--torn { width: min(290px, 80%); height: 92%; max-height: 380px; } /* LA FICHITA DE CATEGORÍA / "EN STOCK" / ENVÍO: FUERA. Es la que rompe la idea de ver el título y la foto de una —son 70 px de alto— y lo que dice también está en la ficha del producto, a un toque. La de las cuotas se queda: eso sí decide una compra. */ .heroA__cards { margin-bottom: 8px; gap: 8px; } .heroA__cards > .infocard:not(#heroCuotasCard) { display: none; } /* LOS DOS BOTONES, UNO AL LADO DEL OTRO Y MÁS CHICOS. Estaban uno arriba del otro porque `flex-wrap: wrap` los parte en cuanto no entran: hace falta `nowrap` Y `min-width: 0`, si no el texto de adentro les pone un ancho mínimo y siguen partiendo igual. */ .heroA__actions { order: 5; margin: 2px 0 10px; flex-wrap: nowrap; gap: 8px; } .heroA__actions .btn { flex: 1 1 0; min-width: 0; padding: 11px 8px; font-size: 13px; justify-content: center; white-space: nowrap; } /* La flechita del "Ver producto" es lo primero que sobra cuando falta ancho. */ .heroA__actions .btn .arr { display: none; } /* ---------- 3b · «EXPLORÁ POR MUNDO» ---------- DOS COSAS, Y LAS DOS SON DEL MISMO `position: sticky`. En escritorio la imagen queda fija al costado mientras se recorre la lista de categorías: es el efecto que hace la sección. En el teléfono la lista va DEBAJO (el tema le pone `order: -1` a la imagen), así que la imagen fija se quedaba pegada arriba y **tapaba la primera categoría** —no se podía ni leer ni tocar—. Y como el bloque reserva `min(480px, 100vh − …)` de alto, entre el título y la foto quedaba un hueco enorme. En el teléfono va estático y con el alto de su contenido. */ .catindex__stage { position: static; height: auto; min-height: 240px; margin-bottom: 6px; } #categorias.section { padding-top: 44px; padding-bottom: 44px; } #categorias .section__head { margin-bottom: 22px; } .catindex { gap: 18px; } /* La forma roja está pensada para una columna de escritorio: en 375 px se come el título. */ .catindex__shape { width: clamp(190px, 52vw, 250px); } /* ---------- 3c · EL PIE ---------- «Tienda» y «Ayuda» son tres y cuatro links: apiladas se comían media pantalla de scroll para nada. Al lado una de la otra entran holgadas y el pie mide la mitad. El bloque del logo y el texto se queda a lo ancho: ahí sí hace falta el renglón entero. */ .foot { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 40px 22px 24px; } .foot > :first-child { grid-column: 1 / -1; } .foot__about { max-width: none; } .foot__col h4, .foot__col .foot__t { margin-bottom: 10px; } .foot__col a { padding: 5px 0; } /* ---------- 4 · LAS FICHAS DEL CATÁLOGO ---------- */ /* DOS POR FILA por defecto. Una por fila obligaba a scrollear una pantalla por producto: no se podía comparar nada ni hacerse una idea del catálogo. */ .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .pcard__media { padding: 12px; aspect-ratio: 1 / 1; } .pcard__body { padding: 12px 12px 14px; } .pcard__name { font-size: 14px; line-height: 1.2; } .pcard__cat, .pcard__sub { font-size: 10px; } /* EN EL TELÉFONO LA FOTO VA LIMPIA: ni el cartelito negro ni el cartel rojo (tapaban la pieza y salían mal); el descuento pasa a la línea del precio como un % chico al lado del tachado. El nivel tampoco: en 2 columnas no entra y el catálogo ya lo filtra. */ .pcard__media .pcard__badge, .pcard__media .pcard__desc, .pcard__dif { display: none; } .pcard__pct { display: inline-block; } .pcard__foot { flex-wrap: nowrap; gap: 8px; align-items: flex-end; } .pcard__price .now { font-size: 17px; } .pcard__price .antes { font-size: 11px; } .pcard__add { width: 40px; height: 40px; flex: 0 0 auto; } /* La "vista rápida" es un hover: en el teléfono no se puede hacer y ocupa lugar. */ .pcard__quick { display: none; } /* MODO LISTA — el que elige quien quiere ver muchos de un vistazo. Lo enciende el botón de la barra de filtros y queda guardado en ESTE navegador (localStorage). La foto pasa a una columna fija y el resto fluye al lado: entran cuatro o cinco productos por pantalla. */ .grid.is-list { grid-template-columns: 1fr; gap: 10px; } .grid.is-list .pcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; } .grid.is-list .pcard__media { aspect-ratio: 1 / 1; padding: 8px; border-radius: 18px 0 0 18px; } .grid.is-list .pcard__body { padding: 10px 12px; } .grid.is-list .pcard__cat { display: none; } .grid.is-list .pcard__name { font-size: 14.5px; } .grid.is-list .pcard__foot { margin-top: 6px; } /* Las etiquetas superpuestas no entran en 96 px: se deja sólo la primera. */ .grid.is-list .pcard__badge { font-size: 8.5px; padding: 3px 7px; top: 6px; left: 6px; } .grid.is-list .pcard__badge ~ .pcard__badge { display: none; } /* ---------- 5 · LA FICHA DEL PRODUCTO ---------- La foto entraba en un cuadrado de 331 px pero la imagen se dibujaba a 250: quedaba chica y con aire de sobra, que es lo caro en un teléfono. Y los tres botones salían repartidos en dos filas raras (dos arriba, uno abajo) sin jerarquía: los tres se leían igual de importantes. */ .pdp__media { padding: 18px; } /* LA FOTO SE IBA A LA DERECHA Y SE CORTABA. `.pdp__img` es `position:absolute; inset:40px` (hobbiar.css): el hueco real donde entra mide el ancho de la caja MENOS 80 px. Acá se le devolvía `max-width:100%` y `width:100%`, o sea el ancho ENTERO de la caja — 331 px de foto en un hueco de 251 —. Cuando un absoluto queda sobre-restringido, CSS descarta el margen derecho y lo pega a la izquierda: la foto terminaba 40 px corrida a la derecha y con el sobrante comido por el `overflow:hidden`. Medido a 390 px: la caja llegaba al pixel 353 y la foto al 392. El inset tiene que acompañar al padding de esta pantalla (18, no 40) y el máximo tiene que descontarlo. Con esto queda centrada y además más grande, que es lo que se buscaba. */ .pdp__img { inset: 18px; max-width: calc(100% - 36px); max-height: calc(100% - 36px); width: auto; height: auto; } .pdp__title { font-size: 26px; } .pdp__price { font-size: 28px; } /* «Agregar al carrito» a lo ancho —es LA acción— y los dos secundarios abajo, a la par. */ .pdp__cta { flex-wrap: wrap; gap: 10px; margin-top: 20px; } .pdp__cta > .btn:first-child { flex: 1 0 100%; justify-content: center; } .pdp__cta > .btn:not(:first-child) { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 13px; padding: 11px 8px; } /* Tres beneficios de 93 px son 300 px de scroll para decir lo mismo tres veces. */ .benefit { padding: 14px 16px; gap: 12px; } .benefit .ic { width: 36px; height: 36px; } .benefit .d { font-size: 12px; } /* ---------- 6 · EL CARRITO ---------- Cada línea medía 265 px: dos productos y el resumen ya no entraba en la pantalla. La foto de 104 px y el renglón de cantidad partido en dos eran casi todo ese alto. */ .citem { gap: 12px; padding: 16px 0; } .citem__media { width: 84px; height: 84px; padding: 8px; } .citem__name { font-size: 15px; } /* NOWRAP: con la foto en 84 px la columna derecha gana 20, y cantidad + precio entran juntos. Con `wrap` el precio se caía a su propio renglón y sumaba 40 px por producto. */ .citem__row { flex-wrap: nowrap; gap: 10px; margin-top: 10px; } /* ---------- 7 · LA BARRA DE FILTROS DEL CATÁLOGO ---------- DESBORDABA LA PANTALLA: medido, 413 px de ancho en un teléfono de 375 — toda la página se podía correr de costado. La culpa era de `.toolbar__sort`, que junta los botones grilla/lista, el contador y el "Ordenar" con su desplegable en una sola fila de 391 px. La barra tiene `flex-wrap: wrap`, pero eso parte ENTRE items, no adentro de uno. Acá el bloque toma el renglón entero y el desplegable se estira con lo que sobra. */ .toolbar { padding: 12px 22px; gap: 10px; } .toolbar__sort { margin-left: 0; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; gap: 8px; } /* `min-width: 0` en el `select`: sin eso su ancho mínimo es el de la opción más larga ("Precio: menor a mayor") y vuelve a empujar. */ .toolbar__sort select { flex: 1 1 auto; min-width: 0; max-width: 100%; } .toolbar__sort label { order: -1; } /* El contador se va al final del renglón: es información, no un control. */ .toolbar__sort .count { margin-left: auto; font-size: 11px; } /* El botón que cambia entre las dos vistas. Sólo tiene sentido en el teléfono. */ .hbview { display: inline-flex; gap: 4px; } .hbview button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line, rgba(22,22,26,.14)); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; } .hbview button.is-on { background: var(--ink, #16161a); color: #fff; border-color: var(--ink, #16161a); } } /* En escritorio nada de esto existe: ni el botón del menú, ni el del cambio de vista. */ @media (min-width: 721px) { .hbmenu-btn, .hbmenu, .hbview { display: none !important; } }