/* =========================================================================== ARLUMA · Adaptación a cada dispositivo -------------------------------------------------------------------------- Este archivo va SIEMPRE ÚLTIMO en el : sus reglas corrigen a las anteriores. Acá vive todo lo que cambia según el tamaño de pantalla, para no tener que buscarlo repartido en cinco archivos. Puntos de quiebre 1200 px escritorio angosto / notebook chico 940 px tablet horizontal — acá aparece el menú de hamburguesa 760 px tablet vertical 560 px celular grande 380 px celular chico (iPhone SE, Galaxy A la vieja) La regla que gobierna todo: NADA puede provocar barra horizontal. =========================================================================== */ /* ============================ GUARDAS GLOBALES ============================ Un solo elemento que se pase de ancho arruina la página entera en celular, y encontrar cuál es después cuesta horas. Mejor prevenirlo de raíz. */ html, body { max-width: 100%; } /* Ningún medio se pasa de su contenedor, aunque el HTML traiga width fijo. */ img, svg, video, iframe, canvas, table { max-width: 100%; } /* Las fotos de producto van envueltas en para servir WebP y el tamaño que corresponda a cada pantalla (ver ui/foto.js). `display: contents` hace que el envoltorio desaparezca del layout: la queda como hija directa de la tarjeta, así que todas las reglas de grilla, flex y aspecto que ya existían siguen aplicando sin tocar una línea. */ picture { display: contents; } /* Red de seguridad para los iconos en línea. ARLUMA.icon() devuelve un con viewBox pero SIN width ni height, para que cada componente le dé su tamaño. Cuando alguno se usa en un lugar que nadie previó, el SVG se estira hasta el ancho disponible: así apareció un camión de 546 px en la ficha de producto. Este tope lo deja del alto de la línea de texto, y cualquier regla de componente lo sigue sobrescribiendo porque tiene más especificidad. */ p > svg, li > svg, span > svg, small > svg, strong > svg, em > svg, label > svg, td > svg { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.15em; } /* Las palabras largas (URLs, correos, nombres de producto sin espacios) parten en vez de estirar el contenedor. */ h1, h2, h3, h4, p, li, td, th, summary, label, .btn, .badge { overflow-wrap: break-word; } /* Cualquier cosa que se dibuje dentro de una tarjeta respeta su caja. */ .card, .product-card, .pillar, .cat-tile, .store-card, .channel { min-width: 0; } /* Las grillas y los flex de CSS no encogen sus hijos por debajo del contenido salvo que se les diga (min-width: auto es el valor inicial). Sin esto, una tabla o un nombre largo estira la columna y aparece la barra horizontal. Este bloque fue la causa de un desborde real de 342 px en pantalla de 320. */ .grid > *, .pillars > *, .cats > *, .form-grid > *, .checkout > *, .catalog > *, .pdp > *, .contact-grid > *, .stores > *, .store-card > *, .hero > *, .footer__top > *, .section-head > *, .cart-line > *, .mini-line > *, .channel > * { min-width: 0; } /* La ficha técnica no puede empujar la columna: se desplaza dentro de su caja. */ .specs, .pdp__info, .pdp__buy { max-width: 100%; } /* Los grid de una sola columna crean un track implícito de tamaño `auto`, que se estira hasta el contenido más ancho AUNQUE el contenedor sea más chico. Es exactamente lo que rompía la ficha de producto en pantallas de 320 px: la caja medía 288 px y su columna, 326. `minmax(0, 1fr)` le pone techo. (A los contenedores flex de esta lista la regla simplemente no les aplica.) */ .pdp__info, .pdp__buy, .custom-fields, .checkout__aside, .catalog__aside, .checkout__step, .stack, .summary, .stores, .faq, .channel-list, .filter-group, .filter-list, .timeline, .newsletter, .cart-line__info, .store-card__info, .empty, .field, .pillar, .cat-tile { grid-template-columns: minmax(0, 1fr); } /* ======================== ESCRITORIO ANGOSTO · 1200 ======================= */ @media (max-width: 1200px) { :root { --container: 100%; } .container { width: min(100% - var(--sp-5) * 2, 1100px); } } /* ============================== TABLET · 940 ============================== */ @media (max-width: 940px) { :root { --sp-9: 4.5rem; --sp-10: 6rem; } /* El menú se vuelve hamburguesa y sale del flujo (position: fixed). Los tres iconos quedaban entonces pegados al logotipo, con medio encabezado vacío a la derecha. Este margen automático los devuelve a su borde. */ .header__actions { margin-left: auto; } /* El hero pasa a una columna y se centra: la foto va abajo del texto. */ .hero { gap: var(--sp-6); } .hero__art { grid-template-columns: repeat(3, 1fr); max-width: 620px; } .hero__art figure:nth-child(1) { grid-row: auto; } .hero__art figure:nth-child(2) { margin-top: 0; } .hero__art figcaption { font-size: 11px; padding: var(--sp-4) var(--sp-3) var(--sp-2); } /* El buscador del catálogo ocupa toda la fila; el orden queda debajo. */ .catalog__toolbar { gap: var(--sp-3); } .search-box { flex: 1 1 100%; } } /* ========================= TABLET VERTICAL · 700–940 ====================== Un iPad en vertical mide entre 744 y 834 px. Sin esta banda caía en el diseño de celular y desperdiciaba media pantalla: la foto del producto ocupaba sola todo el primer pantallazo y el catálogo mostraba dos columnas donde caben tres cómodamente. Es un tamaño intermedio de verdad, no un teléfono grande. ======================================================================== */ @media (min-width: 700px) and (max-width: 940px) { /* Tres productos por fila. Con dos, cada tarjeta quedaba enorme y había que desplazarse cinco pantallas para ver una categoría de quince. */ .grid--3, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } /* La ficha vuelve a dos columnas: la foto a la izquierda y —lo importante— el precio y "Agregar al carrito" visibles sin desplazarse. */ .pdp { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--sp-5); } .pdp__media { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } /* La vitrina de la portada aprovecha el ancho disponible. */ .showcase { max-width: 560px; } /* Formulario de contacto y checkout siguen en una columna —escribir es más cómodo con campos anchos—, pero el resumen se acompaña al lado. */ .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-5); } /* El botón flotante del chat vive en la esquina: sin este colchón tapa el último elemento de la página y no hay forma de alcanzarlo. */ main { padding-bottom: 84px; } } /* ========================= TABLET VERTICAL · 760 ========================== */ @media (max-width: 760px) { :root { --sp-9: 3.5rem; --header-h: 64px; } .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-6); } /* Los encabezados de sección apilan el enlace debajo del título. */ .section-head { flex-direction: column; align-items: flex-start; } /* La ficha técnica se desplaza sola en vez de estirar la página. */ .specs { display: block; overflow-x: auto; white-space: nowrap; } .specs th { white-space: normal; } .newsletter { padding: var(--sp-6) var(--sp-5); } .store-card__map { min-height: 220px; } /* El resumen del pedido deja de ser pegajoso: en vertical estorba. */ .checkout__aside, .catalog__aside { position: static; } /* Catálogo filtrado por una categoría: fuera el encabezado de la sección. La pastilla marcada arriba ya dice cuál es y el contador, cuántos son. */ #catalog-sections.is-filtrado .cat-seccion__head { display: none; } #catalog-sections.is-filtrado .cat-seccion { padding-top: 0; } } /* =========================== CELULAR GRANDE · 560 ========================= */ @media (max-width: 560px) { :root { --fs-3xl: 1.75rem; --fs-2xl: 1.45rem; --sp-9: 3rem; } .container { width: calc(100% - var(--sp-4) * 2); } /* El logotipo con el nombre, más tres botones de 46 px y el espaciado de escritorio sumaban 366 px dentro de un contenedor de 358: los iconos se salían 8 px y quedaban desalineados con el resto de la página. Se recorta el espaciado, nunca el tamaño de los controles. */ .header__inner { gap: var(--sp-3); } .header__actions { gap: var(--sp-1); } .brand img { max-width: 100%; } /* Tres productos por fila. A este ancho cada tarjeta queda angosta, así que el texto y los espaciados se ajustan en bloque: con los tamaños de dos columnas, el nombre se partía en cuatro renglones. */ .grid--3, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .product-card__body { padding: var(--sp-2) var(--sp-2) var(--sp-3); gap: 2px; } .product-card__cat { font-size: 9.5px; letter-spacing: .04em; } .product-card__name { font-size: 12px; line-height: 1.25; } .product-card__short { display: none; } /* el nombre y el precio bastan */ .product-card__foot { padding-top: var(--sp-2); } .price { font-size: 13px; } /* El botón rápido se encoge de ancho, nunca de alto: 44 px es el mínimo con el que un dedo acierta y por debajo de eso agregar al carrito es lotería. */ .product-card__quick { right: 6px; bottom: 6px; padding-inline: 10px; font-size: 10.5px; gap: 4px; } .product-card__quick svg { width: 13px; height: 13px; } /* Los botones de acción ocupan el ancho completo: son más fáciles de tocar y evitan que dos botones queden pegados en la misma fila. */ .hero__actions .btn, .empty .row .btn, .newsletter .row .btn { width: 100%; } .hero__actions, .newsletter .row, .empty .row { width: 100%; } .hero__proof { gap: var(--sp-4); justify-content: space-between; } .hero__proof div strong { font-size: var(--fs-xl); } /* Sólo dos imágenes en el collage: con tres, cada una queda diminuta. */ .hero__art { grid-template-columns: repeat(2, 1fr); max-width: 380px; } .hero__art figure:nth-child(3) { display: none; } /* En la ficha de producto, cantidad arriba y "Agregar" ancho completo. */ .pdp__buy-row { flex-direction: column; align-items: stretch; } .pdp__buy-row .btn { min-width: 0; width: 100%; } .pdp__buy { padding: var(--sp-4); } .timeline { padding-left: var(--sp-5); } .faq summary { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); } .faq details > div { padding: 0 var(--sp-4) var(--sp-4); } /* El carrito ocupa toda la pantalla. */ .drawer { width: 100%; } .cart-line__img { width: 64px; height: 64px; } /* El chat, también: en celular un panel flotante chico no sirve. */ .chat-panel { border-radius: var(--r-lg); } .toast-host { bottom: 88px; } /* que no lo tape el botón del chat */ /* El botón del chat es fijo y en celular se come la esquina inferior derecha. Sin este colchón, el último elemento de cada página queda tapado para siempre y no hay forma de alcanzarlo. */ main { padding-bottom: 72px; } .chat-fab { width: 54px; height: 54px; padding: 0; justify-content: center; } .chat-fab svg { width: 26px; height: 26px; } /* En el catálogo el buscador queda justo debajo del botón del chat: le damos aire para que no se pisen. */ .catalog__toolbar { padding-right: 0; } .search-box .input { padding-right: var(--sp-5); } } /* =========================== CELULAR CHICO · 380 ========================== */ @media (max-width: 380px) { :root { --fs-hero: 2.1rem; } /* El logotipo completo no entra junto a los botones: dejamos sólo el símbolo. */ /* En pantallas muy angostas el nombre no entra junto a los botones: queda sólo la Ä, que es lo que identifica la marca. */ .brand img { content: url('../../logo/arluma-isotipo.svg'); height: 34px; width: 30px; } /* Se recorta el espacio entre controles, NO su tamaño: 44 px es el mínimo con el que un dedo acierta, y por debajo de eso el header se vuelve una lotería. Preferimos apretar los márgenes. */ .header__inner { gap: var(--sp-2); } .header__actions { gap: 2px; } .icon-btn { width: 44px; height: 44px; border-radius: var(--r-sm); } /* A 320 px tres columnas dejan tarjetas de 90 px: el nombre no se lee y el botón de agregar no cabe. Ahí sí bajamos a dos. */ .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-card__name { font-size: 13px; } .product-card__quick { padding-inline: 12px; font-size: 11px; } .hero__proof { flex-direction: column; gap: var(--sp-3); } .form-grid { gap: var(--sp-3); } } /* ======================= PANTALLAS MUY ANCHAS · 1600 ====================== */ @media (min-width: 1600px) { :root { --container: 1400px; } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } /* ============================ ALTURA REDUCIDA ============================= */ /* Celular en horizontal: el hero a pantalla completa deja el contenido fuera. */ @media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 0; padding-block: var(--sp-6); } .chat-panel { height: calc(100dvh - var(--sp-6)); } } /* ============================== IMPRESIÓN ================================= */ @media print { .header, .footer, .chat-fab, .chat-panel, .drawer, .drawer-backdrop, .toast-host, .skip-link { display: none !important; } body { background: #fff; color: #000; } body::before { display: none; } a { color: #000; text-decoration: underline; } }