/* ===================================================================== goodlook — estilos EXCLUSIVOS de la portada (la "vidriera") --------------------------------------------------------------------- Esta hoja se carga desde ADENTRO del
de portada.html (la plantilla base sólo recibe el y el <main>, así que un <link> en el <head> de la página hija se descartaría). Como entra última, gana sobre todas las demás hojas: acá se puede afinar sin pelear con nadie. Puede apoyarse en todo lo que define tienda.css: las variables de color (--marca, --tinta, --borde, --radio…), la tipografía de títulos (--tipografia-titulo, que es Playfair Display servida desde nuestro propio servidor) y las clases base (.contenedor, .boton…). Acá NO se redefine ninguna variable de color: si mañana cambia el violeta de la marca, cambia en un solo lugar y esta hoja lo sigue. LA IDEA DE FONDO, que es lo que pidió Ramiro: que la portada se lea como la de una marca de ropa y no como una grilla de productos. Eso se consigue con tres cosas, y las tres están en este archivo: · ESCALA: los títulos y las fotos son grandes de verdad; · AIRE: entre bloque y bloque hay silencio (la variable --ritmo); · RITMO: fila de producto / bloque grande / fila de producto, para que el ojo tenga dónde descansar. QUÉ NO ESTÁ ACÁ (y es a propósito, cada archivo tiene un dueño): · .categoria-chip -> tienda.css · .tarjeta… de producto -> tarjetas.css · .hero… -> hero.css · .encabezado -> encabezado.css · las flechas, el velo y el arrastre del carrusel -> carrusel.css Índice: 1. Medidas y ritmo propios de la portada 2. Barra de categorías (respaldo provisorio) 3. Filas de la vidriera (la cabecera de cada fila) 4. Carruseles horizontales: la grilla base 5. La ayudita del carrusel 6. Banda de marca (la franja oscura con el logo de Miwok) 7. Bloque editorial (foto grande de campaña + texto) 8. Frases de marca 9. Tarjetas de sección (Mujer / Hombre) 10. Tira de servicios 11. Cierre del catálogo ===================================================================== */ /* --- 1. Medidas y ritmo ---------------------------------------------- --aire-lateral tiene que valer EXACTAMENTE lo mismo que el padding horizontal de .contenedor (20px en tienda.css). Los carruseles y la foto del editorial se salen del contenedor con un margen negativo de esa medida para llegar al borde de la pantalla, y vuelven a meter ese aire como padding propio. Resultado: todo sigue alineado con el resto de la página, pero las fotos tocan el borde. Si algún día cambia el padding de .contenedor, hay que cambiar este número también. --ritmo es el silencio entre un bloque y el siguiente. Es UNA sola variable a propósito: mientras todos los bloques la usen, la portada respira parejo y se puede aflojar o apretar la página entera tocando dos líneas. En el celular es más chico porque la pantalla es corta y ahí el aire de escritorio se siente como que la página está vacía. LA REGLA DEL AIRE, y conviene respetarla si mañana se agrega un bloque nuevo: cada bloque se hace cargo SÓLO del espacio de ARRIBA (padding o margen superior de --ritmo) y nunca del de abajo. Si los dos pusieran aire, entre bloque y bloque quedaría el doble y la portada se desarmaría en pedazos sueltos. -------------------------------------------------------------------- */ .portada { --aire-lateral: 20px; --carrusel-gap: 20px; --ritmo: 64px; } @media (min-width: 700px) { .portada { --ritmo: 88px; } } @media (min-width: 1000px) { .portada { --ritmo: 116px; } } /* --- 3. Filas de la vidriera ----------------------------------------- Cada fila es "cabecera + carrusel". La cabecera es lo que le da tono a la página: una volanta chiquita en mayúsculas, un título grande en serif y, si hace falta, una bajada corta. -------------------------------------------------------------------- */ .vidriera-fila { padding-top: var(--ritmo); } .vidriera-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: 28px; } /* Volanta: "Recién llegado", "Categoría", "Para quién"… Va en mayúsculas y MUY separada de letra: es el recurso de las revistas de moda para que un texto de 11px se lea como un encabezado y no como letra chica. El rayita de adelante la ancla al título de abajo. */ .vidriera-volanta { display: block; margin-bottom: 10px; font-family: var(--tipografia); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--marca); } .vidriera-volanta::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; /* currentColor y no var(--marca): así la rayita acompaña sola si esta volanta se usa alguna vez sobre un fondo oscuro. */ background: currentColor; vertical-align: middle; } /* El título de la fila. Playfair, grande y con el interlineado apretado: en serif, las líneas muy separadas hacen que un título de dos renglones se lea como dos títulos distintos. */ .vidriera-titulo { margin: 0; font-family: var(--tipografia-titulo); font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; /* Reparte las palabras entre los renglones en vez de dejar una sola colgada abajo. Si el navegador no lo entiende, lo ignora y listo. */ text-wrap: balance; } .vidriera-bajada { margin: 12px 0 0; font-size: .9375rem; line-height: 1.65; color: var(--gris); /* texto para leer: nunca --gris-claro */ max-width: 50ch; } /* "Ver todo": un link con una línea abajo, no un botón. Un botón acá compite con el título; la línea fina dice lo mismo sin levantar la voz. La flechita se corre unos píxeles al pasar el mouse. */ .vidriera-vertodo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .7em; padding-bottom: 5px; border-bottom: 1px solid var(--borde); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); transition: color var(--transicion), border-color var(--transicion); } .vidriera-vertodo:hover { color: var(--marca); border-color: var(--marca); /* tienda.css subraya los links al pasar el mouse; acá la línea de abajo ya cumple esa función y las dos juntas se ven sucias. */ text-decoration: none; } .vidriera-vertodo span { transition: transform var(--transicion); } .vidriera-vertodo:hover span { transform: translateX(4px); } @media (max-width: 640px) { .vidriera-cabecera { margin-bottom: 20px; } /* En el teléfono la cabecera se apila; el "Ver todo" queda debajo de la bajada, alineado a la izquierda como todo lo demás. */ .vidriera-vertodo { align-self: flex-start; } } /* --- 4. Carruseles: la grilla vive en carrusel.css -------------------- La base del carrusel (la grilla de una fila, el scroll horizontal, el snap y el sangrado hasta el borde) estuvo un tiempo duplicada acá y en carrusel.css con los mismos valores. Quedó en carrusel.css, que es su dueño: ahí también están las flechas, el velo de los costados y el arrastre con el mouse, y todo eso da por sentada esa base. Lo que esta hoja sí le presta son dos medidas, definidas en .portada (punto 1): --aire-lateral y --carrusel-gap. Ese es el contrato entre los dos archivos. Si cambian acá, el carrusel las toma solo. Lo único del carrusel que sigue siendo de esta hoja es la ayudita de abajo, que es texto de la portada y no parte del mecanismo. -------------------------------------------------------------------- */ /* --- 5. La ayudita del carrusel -------------------------------------- "Deslizá para ver más →". Es sólo para el celular: en escritorio el carrusel se arrastra con el trackpad o con Shift + rueda y el cartel sobra. Va chiquito y apagado: es una ayuda, no un anuncio. -------------------------------------------------------------------- */ .carrusel-ayuda { margin: 14px 0 0; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); /* texto para leer: nunca --gris-claro */ } @media (min-width: 641px) { .carrusel-ayuda { display: none; } } @keyframes banda-respirar { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } } /* Quien pidió menos movimiento en su sistema no ve la respiración. La regla global de tienda.css ya achica la duración a cero, pero ahí el logo quedaría clavado en el fotograma final (agrandado); apagándola acá queda en su tamaño real. */ @media (prefers-reduced-motion: reduce) { .banda-marca-fondo { animation: none; } } /* --- 7. Bloque editorial --------------------------------------------- La pieza que más tiene que impresionar: una foto grande de campaña a un lado y el texto de la marca al otro. Corta el ritmo de "título + carrusel, título + carrusel". LA FOTO ES VERTICAL Y ESO MANDA, y es la parte más delicada de todo el archivo. Las fotos de la marca vienen bien altas: las originales son de 2400x4100 y las que sirve el sitio andan por 815x1400, o sea una proporción de casi 4 de alto por 2,3 de ancho. Dos cosas que NUNCA hay que hacer con una foto así: 1. estirarla para que llene un hueco apaisado (deforma a la modelo); 2. recortarla desde arriba (le corta la cabeza). Por eso el hueco también es vertical y con una proporción parecida a la de la foto: 5/7. Cuanto más se parecen las dos proporciones, menos sobra y menos hay que recortar — con 5/7 sobra un 18% del alto, contra el 27% que sobraba con 4/5. Y ese sobrante se saca casi todo de ABAJO, que es lo que hace `object-position: 50% 15%`: ese número dice qué parte de la foto se mantiene fija, y el 15% deja el recorte de arriba en apenas un 3% de la imagen. La cabeza siempre queda adentro. Y como el bloque tiene que funcionar con CUALQUIER foto, si entra una apaisada (hoy, cuando no hay prenda de abrigo cargada, cae a la foto del hero) tampoco se deforma: se recorta a los costados, que es el recorte que menos se nota. -------------------------------------------------------------------- */ .editorial { display: grid; /* minmax(0, …) y no 1.05fr a secas: sin eso, una palabra larga en el texto puede empujar la columna y desarmar la proporción. */ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding-top: var(--ritmo); /* sólo arriba: ver "la regla del aire" */ } .editorial-foto { position: relative; aspect-ratio: 5 / 7; overflow: hidden; border-radius: var(--radio); /* Un gris apenas más oscuro que la página: mientras la foto carga se ve un rectángulo, no un agujero blanco. */ background: var(--fondo-hueco); } .editorial-foto img { display: block; width: 100%; height: 100%; /* cover + object-position: llena el hueco sin estirar la foto. Nunca poner `fill` acá: eso sí deformaría a la modelo. */ object-fit: cover; object-position: 50% 15%; } /* Velo violeta muy suave, más fuerte abajo: hermana la foto con la identidad de goodlook y le da peso al pie de la imagen, sin ensuciar el color real de la prenda (que es lo que el cliente viene a ver). */ .editorial-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, color-mix(in srgb, var(--marca) 16%, transparent), transparent 58%), linear-gradient(to top, rgba(13, 18, 32, .18), transparent 34%); pointer-events: none; } /* La columna del texto no tiene clase propia (el HTML es de otro agente), así que se la agarra por su lugar: es el hermano que sigue a la foto. */ .editorial-foto + div { /* Un empujoncito hacia adentro en escritorio: el texto no arranca pegado a la foto, arranca donde arrancaría un párrafo de revista. */ padding-right: clamp(0px, 2vw, 24px); } .editorial-volanta { margin: 0 0 16px; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--marca); } .editorial-volanta::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; background: currentColor; vertical-align: middle; } .editorial-titulo { margin: 0 0 18px; font-family: var(--tipografia-titulo); font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; } .editorial-texto { margin: 0 0 28px; max-width: 40ch; /* más ancho que esto y el ojo se pierde al volver */ color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.7; } @media (max-width: 900px) { /* Las dos columnas ya no entran: la foto arriba y el texto abajo. */ .editorial { grid-template-columns: 1fr; gap: 28px; } .editorial-foto + div { padding-right: 0; } /* Y acá viene el freno: apilada, la foto ocuparía TODO el ancho, y a 880px de ancho una foto vertical mide más de 1200px de alto — o sea, el cliente tendría que scrollear dos pantallas de foto. Se le pone un techo al ancho y se centra. */ .editorial-foto { max-width: 520px; margin-inline: auto; } } @media (max-width: 640px) { /* En el teléfono la foto se sale del contenedor y toca los dos bordes de la pantalla. Una foto de campaña con 20px de margen blanco a los costados se ve como la ilustración de un artículo; a sangre se ve como una campaña. Los 20px son --aire-lateral, o sea exactamente el padding de .contenedor: por eso hay que mantener los dos iguales. Acá la proporción se achata un poco (4/5 en vez de 5/7) porque la foto pasa a ser tan ancha como la pantalla: con 5/7, en un teléfono de 390px la foto mediría 546px de alto y se comería la pantalla entera. Recorta un poco más, pero el object-position de arriba sigue cuidando la cabeza. */ .editorial-foto { max-width: none; margin-inline: calc(-1 * var(--aire-lateral)); border-radius: 0; aspect-ratio: 4 / 5; } } /* --- 8. Frases de marca ---------------------------------------------- Una frase sola, centrada, con mucho aire alrededor. Es el respiro entre dos bloques de producto: sin esto la portada es una pila de grillas. La rayita vertical de arriba es el "punto y aparte": avisa que acá se corta un tema y empieza otro. -------------------------------------------------------------------- */ /* La frase es el único bloque que lleva algo de aire abajo, y es por una razón: pide MÁS silencio que el resto (1,15 de --ritmo arriba) y tiene que quedar igual de sola por los dos lados. Como el bloque que sigue ya pone un --ritmo entero, acá abajo alcanza con la diferencia (0,15). */ .frase-marca { padding: calc(var(--ritmo) * 1.15) 0 calc(var(--ritmo) * .15); text-align: center; } .frase-marca::before { content: ""; display: block; width: 1px; height: clamp(34px, 6vw, 56px); margin: 0 auto clamp(26px, 4vw, 40px); background: linear-gradient(to bottom, transparent, var(--marca)); } .frase-marca-texto { max-width: 19ch; margin: 0 auto; font-family: var(--tipografia-titulo); font-size: clamp(1.9rem, 5.4vw, 3.4rem); font-weight: 500; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; } .frase-marca-pie { margin: 26px 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); /* texto para leer: nunca --gris-claro */ } /* Variante angosta, para la frase corta del medio. */ .frase-marca-suelta .frase-marca-texto { max-width: 24ch; } /* --- 9. Tarjetas de sección (Mujer / Hombre) -------------------------- Dos fotos grandes, una para cada sección. No son tarjetas de producto (ésas viven en tarjetas.css): son dos puertas de entrada. -------------------------------------------------------------------- */ .tarjetas-genero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); } /* La proporción cambia con el ancho para que las dos tarjetas LLENEN sus columnas: con una proporción fija y alta, en escritorio quedaba un hueco enorme entre las dos. */ .tarjeta-genero { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--marca); color: #fff; } .tarjeta-genero img { width: 100%; height: 100%; object-fit: cover; /* Igual que en el editorial: las fotos son verticales y la cara está arriba, así que el recorte sale de abajo. */ object-position: 50% 26%; transition: transform 700ms ease; } .tarjeta-genero:hover img { transform: scale(1.04); } .tarjeta-genero:hover { text-decoration: none; } /* Degradado oscuro abajo para que el título se lea sobre cualquier foto, incluso sobre una foto clara de fondo blanco. */ .tarjeta-genero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .34) 44%, rgba(10, 10, 10, 0) 74%); } .tarjeta-genero-texto { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2.4vw, 30px); } .tarjeta-genero-titulo { margin: 0 0 8px; font-family: var(--tipografia-titulo); font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; } .tarjeta-genero-detalle { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .84); } .tarjeta-genero-flecha { display: inline-block; margin-top: 14px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background var(--transicion), border-color var(--transicion), color var(--transicion); } .tarjeta-genero:hover .tarjeta-genero-flecha { background: #fff; border-color: #fff; color: var(--tinta); } /* Foco visible: son links grandes, tienen que marcarse enteros. */ .tarjeta-genero:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; } @media (max-width: 640px) { /* En dos columnas de teléfono la tarjeta mide unos 170px de ancho: el detalle no entra sin montarse encima del título, así que se va. El título y la flecha alcanzan para saber a dónde lleva. */ .tarjeta-genero { aspect-ratio: 3 / 4; } .tarjeta-genero-detalle { display: none; } .tarjeta-genero-flecha { margin-top: 10px; padding: 6px 12px; font-size: .65rem; letter-spacing: .08em; } } /* --- 10. Tira de servicios -------------------------------------------- Las tres razones para comprar acá, en una franja sobre fondo suave. Va abajo de la vidriera, cuando el cliente ya vio la ropa y está por decidir: antes de eso no le interesa cómo son los envíos. -------------------------------------------------------------------- */ .tira-servicios { display: grid; grid-template-columns: repeat(3, 1fr); /* 1px de hueco y el fondo del borde asomando: así las tres celdas quedan separadas por una línea fina sin dibujar bordes que se dupliquen en el medio. */ gap: 1px; margin-top: var(--ritmo); border-radius: var(--radio); overflow: hidden; background: var(--borde); } .servicio { background: var(--fondo-suave); padding: clamp(22px, 3vw, 34px); } .servicio h3 { margin: 0 0 8px; font-family: var(--tipografia-titulo); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; } .servicio p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--gris); } @media (max-width: 760px) { .tira-servicios { grid-template-columns: 1fr; } } /* --- 11. Cierre del catálogo ------------------------------------------- Separador fino antes del "Todo el catálogo": marca que ahí termina la vidriera curada y empieza el listado completo. Sin esa línea, el catálogo parece una fila más de la vidriera. -------------------------------------------------------------------- */ .catalogo-completo { margin-top: var(--ritmo); padding-top: clamp(34px, 5vw, 56px); border-top: 1px solid var(--borde); } /* ====================================================================== CABECERA DE RESULTADOS, FILTROS Y GRILLA A LOS BORDES ====================================================================== */ /* --- El título centrado ----------------------------------------------- "cuando buscas cualquier producto ejemplo campera dice campera al lado izquierdo, quiero q lo diga en el medio igual q miwok". -------------------------------------------------------------------- */ .resultados-cabecera { text-align: center; padding-top: calc(var(--ritmo) * .55); } .resultados-cabecera h1 { margin: 0 0 8px; font-size: clamp(2rem, 4.4vw, 3.2rem); } .resultados-cabecera p { margin: 0; } /* --- La barra de filtros ---------------------------------------------- Una fila fina arriba de la grilla, con una línea abajo que la separa. -------------------------------------------------------------------- */ .filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 12px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); } /* El orden se va a la derecha del todo. margin-left:auto se come todo el espacio sobrante, que es la forma de separar dos grupos en una fila sin inventar un contenedor de más. */ .filtro-orden { margin-left: auto; } .filtro { position: relative; } /* El <summary> es el botón que abre el panel. Se le saca la flechita que los navegadores le ponen solos y se le dibuja una propia, para que las tres se vean iguales en Chrome, Safari y Firefox. */ .filtro > summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borde); border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); cursor: pointer; list-style: none; /* Firefox */ white-space: nowrap; } .filtro > summary::-webkit-details-marker { display: none; } /* Safari */ .filtro > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--transicion); } .filtro[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .filtro > summary:hover { border-color: var(--gris-claro); } /* Un filtro que está aplicando algo se marca: sin esto el cliente no tiene forma de saber por qué ve sólo diez prendas. */ .filtro > summary.filtro-activo { background: var(--marca); border-color: var(--marca); color: #fff; } /* El panel flota SOBRE la grilla en vez de empujarla. Si empujara, al abrir un filtro toda la página daría un salto y se perdería de vista lo que se estaba mirando. */ .filtro-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra-alta); } /* El de la derecha se abre hacia la izquierda: si no, se sale de la pantalla. */ .filtro-orden .filtro-panel { left: auto; right: 0; } .filtro-opcion { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radio-chico); font-size: .9rem; color: var(--tinta-suave); white-space: nowrap; } .filtro-opcion:hover { background: var(--fondo-hueco); color: var(--tinta); text-decoration: none; } .filtro-opcion.activo { color: var(--marca); font-weight: 600; } /* La muestra de color. El tono sale del mapa de tienda.css, que lo resuelve leyendo el data-color. El aro interior existe para que el blanco y los claros no desaparezcan sobre el fondo blanco del panel. */ .filtro-muestra { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: var(--tono, var(--gris-claro)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent); } /* Los talles van en cuadraditos, no en renglones: son cortos y así se ven todos de un vistazo en vez de obligar a bajar una lista. */ .filtro-panel-talles { display: flex; flex-wrap: wrap; gap: 6px; min-width: 200px; } .filtro-talle { min-width: 44px; padding: 9px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); font-size: .82rem; font-weight: 600; text-align: center; color: var(--tinta-suave); } .filtro-talle:hover { border-color: var(--gris-claro); text-decoration: none; } .filtro-talle.activo { background: var(--marca); border-color: var(--marca); color: #fff; } .filtro-limpiar { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); text-decoration: underline; } .filtro-limpiar:hover { color: var(--marca); } /* En el celular la fila no entra: se desplaza de costado, como la de ellos. */ @media (max-width: 640px) { .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filtros::-webkit-scrollbar { display: none; } /* Con overflow el panel quedaría recortado adentro de la barra, así que se lo saca del flujo fijándolo a la pantalla. Y se ancla ABAJO, no arriba: "top: auto" con position:fixed deja al navegador ubicarlo donde el flujo lo hubiera puesto, que es un comportamiento que cada motor resuelve distinto —en algunos quedaba tapando la barra—. Anclado al borde inferior queda como una hoja que sube, que además es donde el pulgar llega sin estirarse. */ .filtro-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 55vh; min-width: 0; box-shadow: 0 -6px 30px rgba(13, 18, 32, .18); } .filtro-orden { margin-left: 0; } } /* --- La grilla llegando a los bordes ----------------------------------- Pedido de Ramiro: "cuando fui bajando veo q hay mucho espacio en los costados ... en miwok llegan a ambos laterales". Tenía razón y el motivo era el ancho máximo del contenedor: en un monitor grande el catálogo quedaba en una columna de 1360px con dos franjas vacías a los lados. En una tienda de ropa el aire tiene que estar ENTRE las fotos, no alrededor del bloque: las fotos son el producto. Sólo se ensancha la grilla de productos. Los textos NO: un párrafo que cruza una pantalla de 27 pulgadas es ilegible, hay que mover la cabeza para seguir el renglón. Por eso el título de resultados y los filtros siguen dentro del contenedor normal. -------------------------------------------------------------------- */ .portada .catalogo-completo .grilla-productos, .portada .seccion .grilla-productos { /* Se sale del contenedor por los dos lados hasta tocar la pantalla, y se vuelve a meter apenas el aire mínimo del borde. calc() con el ancho de la ventana es lo que permite "desanclarse" de un padre angosto. */ width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); margin-right: calc(50% - 50vw + 12px); } /* Con todo ese ancho entran más columnas, y hay que decírselo: si no, cuatro columnas de 260px sobre 1900px de pantalla dejan tarjetas gigantes. */ @media (min-width: 1100px) { .portada .catalogo-completo .grilla-productos, .portada .seccion .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } } /* ====================================================================== LA VIDRIERA TAMBIÉN LLEGA A LOS BORDES ====================================================================== Pedido de Ramiro: "lo nuevo d invierno y todas las categorias q siguen esta corto, quiero q llegue a los 2 costados". Es el mismo problema que tenía la grilla del catálogo: los carruseles vivían adentro del contenedor de 1360px, así que en un monitor grande la fila de prendas terminaba a 175px de cada borde. En una tienda de ropa eso se lee como que la página quedó chica. Y hay algo más que se gana: un carrusel que llega al borde de la pantalla deja la prenda siguiente CORTADA por el borde, y eso es lo que le dice al cliente "hay más para el costado". Terminando antes, la fila parece que se acabó ahí. Los TÍTULOS de cada fila acompañan el mismo ancho, para que el nombre de la sección quede a plomo con la primera foto. Lo que no se ensancha son los textos largos: siguen adentro del contenedor normal. ---------------------------------------------------------------------- */ @media (min-width: 1100px) { .portada .carrusel-marco, .portada .vidriera-cabecera { /* Se sale del contenedor por los dos lados hasta tocar la pantalla y se vuelve a meter apenas el aire mínimo del borde. Es el mismo cálculo que usa la grilla del catálogo, y a propósito: si los dos bloques no arrancaran exactamente en el mismo punto, al bajar la página se vería un escalón. */ width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); margin-right: calc(50% - 50vw + 12px); } /* Con todo ese ancho entran más prendas por pantalla. Sin esto, las tarjetas se estirarían hasta quedar enormes y se verían tres. */ .portada .carrusel-productos { grid-auto-columns: calc((100% - 5 * var(--carrusel-gap)) / 5.4); } /* La bajada de cada fila sí mantiene ancho de lectura: es un párrafo. */ .portada .vidriera-bajada { max-width: 52ch; } } /* Y hay que apagar el sangrado INTERNO del carrusel cuando el marco ya es de borde a borde. carrusel.css le da a .carrusel-productos un margen negativo propio para asomarse fuera del contenedor: era lo correcto cuando el marco estaba adentro de la columna de 1360px, pero ahora que el marco ya llega a la pantalla ese margen se SUMA y la fila se pasa 8px de largo, lo que hace aparecer una barra de desplazamiento horizontal en toda la página. Un sangrado doble es de esos errores que no se ven mirando: la página se corre unos pixeles y uno cree que es del navegador. */ @media (min-width: 1100px) { .portada .carrusel-marco > .carrusel-productos { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } } /* ====================================================================== LA TIRA DE MARCAS ====================================================================== Los logos de las marcas pasando de costado, en bucle. La referencia es la fila "NAVEGÁ POR MARCAS" de dexter.com.ar, pero con la sobriedad de este sitio: la de ellos es roja y gritada; ésta va en gris apagado sobre la banda oscura, con mucho aire entre logo y logo. El movimiento es lento a propósito (40 segundos la vuelta entera). Una cinta rápida se lee como un cartel de promoción; una lenta se lee como una marca contando quién es. ---------------------------------------------------------------------- */ .tira-marcas { /* De borde a borde de la pantalla: una franja recortada dentro del contenedor parece un error, no una decisión. */ width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); margin-right: calc(50% - 50vw + 12px); margin-top: var(--ritmo); padding: 44px 0; overflow: hidden; background: var(--tinta); border-radius: var(--radio); } .tira-marcas-pista { display: flex; width: max-content; /* La velocidad se mide en "cuánto tarda en pasar un juego de logos", no en un número fijo: con más marcas la cinta es más larga y con 40s de antes pasaría volando. */ animation: desfile-de-marcas 46s linear infinite; } /* Se desplaza la MITAD del ancho, que es exactamente un juego de logos. Al volver a cero, lo que se ve es idéntico a lo que se veía: por eso el bucle no tiene salto. */ @keyframes desfile-de-marcas { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tira-marcas-grupo { display: flex; align-items: center; gap: clamp(56px, 8vw, 110px); padding-right: clamp(56px, 8vw, 110px); /* PISO DE UNA PANTALLA DE ANCHO. La cinta se movía media pantalla y dejaba la otra media vacía: con dos marcas, cada mitad de la cinta medía menos que la pantalla. El HTML ya repite la lista cuatro veces, y esto es el seguro para el caso extremo (una sola marca en un monitor muy ancho): cada mitad nunca mide menos que la pantalla, así que nunca se ve un hueco. space-around sólo entra en acción si sobrara lugar; cuando los logos ya llenan —que es lo normal— manda el gap de arriba. */ flex: 0 0 auto; min-width: 100vw; justify-content: space-around; } .tira-marca { display: inline-flex; align-items: center; flex: 0 0 auto; opacity: .62; transition: opacity var(--transicion); } .tira-marca:hover { opacity: 1; text-decoration: none; } /* Los logos vienen en blanco y en negro según la marca. Sobre la banda oscura hacen falta claros, y en vez de pedir un archivo por fondo se los invierte: filter brightness/invert los lleva a blanco sea cual sea su color original. Así sumar una marca sigue siendo dejar UN archivo. */ .tira-marca img { height: clamp(24px, 2.4vw, 34px); width: auto; filter: brightness(0) invert(1); } .tira-marca span { font-family: var(--tipografia-titulo); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; color: #fff; } /* Quien pidió menos movimiento ve la tira quieta. No se esconde: los logos siguen ahí y siguen siendo links; lo único que se apaga es el desfile. */ @media (prefers-reduced-motion: reduce) { .tira-marcas-pista { animation: none; } } /* En el celular la tira ocupa menos alto y los logos van más juntos: con el espaciado de escritorio se vería un solo logo por pantalla. */ @media (max-width: 640px) { .tira-marcas { padding: 30px 0; } .tira-marcas-grupo { gap: 44px; padding-right: 44px; } } /* --- 14. Una marca que todavía no tiene prendas ------------------------- La pantalla que ve quien toca el logo de una marca que está en el menú pero cuyos productos el local todavía no cargó (hoy, Boniques). Antes esta pantalla se armaba con lo que hubiera y terminaba mostrando la foto y el texto de otra marca. Ahora es el logo y una palabra. Tuvo el nombre escrito, un párrafo y dos botones, y se sacaron: el logo ya dice el nombre, y explicar por qué algo todavía no está le da importancia a la ausencia. Dos elementos centrados con mucho aire se leen como una decisión de diseño; un párrafo pidiendo disculpas, como una obra en construcción. -------------------------------------------------------------------- */ .marca-en-camino { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; /* Alto suficiente para que el logo no quede flotando en una franja angosta entre el encabezado y el pie. */ min-height: 62vh; justify-content: center; padding-block: clamp(48px, 9vw, 120px); } .marca-en-camino-logo { height: clamp(34px, 4vw, 54px); width: auto; /* Los logos vienen en el color de cada marca; acá van en gris para que no le griten al texto. Es la misma idea que en la tira, al revés: allá el fondo es oscuro y se los aclara, acá es claro y se los oscurece. */ filter: grayscale(1) brightness(.35); opacity: .75; } .marca-en-camino-volanta { margin: 10px 0 0; font-family: var(--tipografia-titulo); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); } /* --- 15. La puerta de entrada: las marcas ------------------------------- Las tarjetas que abren la portada general. Una por marca, a pantalla completa entre las dos. Reemplazan a la foto de modelo que ocupaba toda la primera pantalla. Esa foto se veía bien pero no decía qué vende el local; estas dos lo dicen en un segundo, y además son el camino más corto a cada marca. -------------------------------------------------------------------- */ .puerta-marcas { /* De borde a borde, como estaba el hero: la primera pantalla de una tienda de ropa no tiene márgenes. */ width: 100vw; margin-inline: calc(50% - 50vw); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 6px; /* Alto de pantalla menos el encabezado, así entra entera sin que sobre ni falte. El mínimo es para pantallas muy bajas (una notebook chica con el navegador a media pantalla). */ height: 100svh; min-height: 540px; } .puerta-marca { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(22px, 3vw, 44px); background-size: cover; background-position: center 20%; text-decoration: none; /* El zoom lento al pasar por encima: la única animación de la pieza. Dice "esto se puede apretar" sin necesidad de un cartel que lo aclare. */ transition: background-size var(--transicion); } .puerta-marca:hover, .puerta-marca:focus-visible { text-decoration: none; background-size: 106% auto; } /* El velo: sin esto el logo blanco desaparece sobre la parte clara de la foto. Va de abajo hacia arriba porque abajo es donde está el texto. */ .puerta-marca::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 14, 30, .58) 0%, rgba(18, 14, 30, .16) 44%, rgba(18, 14, 30, 0) 70%); } .puerta-marca-logo { width: auto; height: clamp(26px, 3.4vw, 46px); /* Los logos vienen cada uno de su color; acá van todos en blanco para que las dos marcas se lean como iguales. Es el mismo truco de la tira. */ filter: brightness(0) invert(1); align-self: flex-start; } .puerta-marca-nombre { font-family: var(--tipografia-titulo); font-size: clamp(1.6rem, 3vw, 2.4rem); color: #fff; } .puerta-marca-pie { display: flex; } .puerta-marca-boton { padding: 11px 22px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--tinta); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background var(--transicion); } .puerta-marca:hover .puerta-marca-boton { background: #fff; } /* --- Celular --- Las tarjetas se apilan. Cada una toma poco más de media pantalla: lo suficiente para que se vea la foto, y lo justo para que la segunda asome por abajo y se entienda que hay más de una marca. */ @media (max-width: 760px) { .puerta-marcas { grid-auto-flow: row; grid-auto-columns: auto; height: auto; min-height: 0; } .puerta-marca { min-height: 58svh; background-position: center 16%; } } /* Quien pidió menos movimiento no tiene zoom. */ @media (prefers-reduced-motion: reduce) { .puerta-marca { transition: none; } .puerta-marca:hover { background-size: cover; } } /* --- 16. La portada de una marca ---------------------------------------- La primera pantalla al entrar a Miwok o a Boniques: el logo de ESA marca, enorme, sobre su color. Antes acá se mostraba la foto grande del sitio, que es de modelos de Miwok. En la página de Boniques eso era directamente un error: el cliente entraba a una marca y veía otra. EL LOGO QUEDA FIJO Y LOS PRODUCTOS PASAN POR ENCIMA Pedido de Ramiro. Se hace con background-attachment: fixed, sin una línea de JavaScript: el fondo se ancla a la VENTANA en vez de al bloque, así que la página se desliza y el logo se queda quieto atrás. -------------------------------------------------------------------- */ .marca-portada { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); display: grid; place-items: center; height: 100svh; min-height: 460px; padding: clamp(30px, 6vw, 80px); /* El color de fondo por defecto, para una marca que todavía no tenga el suyo. Nunca queda una pantalla sin fondo. */ background-color: var(--fondo-suave); /* Y el logo va como IMAGEN de fondo, no como <img>, porque sólo una imagen de fondo se puede anclar a la ventana. El <img> del HTML queda igual para los lectores de pantalla y para el buscador, escondido. */ background-image: var(--logo-marca, none); background-repeat: no-repeat; background-position: center; background-size: min(52vw, 460px) auto; background-attachment: fixed; } /* El <img> del logo existe por accesibilidad y por Google: el fondo de CSS no lo lee nadie. Se lo esconde a la vista, no al lector de pantalla. */ .marca-portada-logo { width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Si la marca no tuviera archivo de logo, se escribe el nombre. */ .marca-portada-nombre { margin: 0; font-family: var(--tipografia-titulo); font-size: clamp(2.4rem, 9vw, 6rem); letter-spacing: -.02em; color: var(--tinta); opacity: .9; } /* --- El color y el logo de cada marca --- Una regla por marca. Es a mano a propósito: el color de una marca es una decisión de diseño, no algo que se pueda calcular. Una marca nueva sin regla acá se ve igual, con el gris de arriba. */ .marca-portada--miwok { /* Azul acero: el mismo mundo que el fondo de sus fotos de catálogo. */ background-color: #c3ced9; --logo-marca: url("/img/marcas/miwok-b65270da2c569b4f0414fa97f1a4007a.svg"); } .marca-portada--boniques { /* Arena cálida: el mundo de sus fotos, de cuero y beige. */ background-color: #ded3c2; --logo-marca: url("/img/marcas/boniques-f52e4571d6c669c2bdb615dc28891116.png"); } /* En el celular el fondo fijo lo ignoran varios navegadores (iOS entre ellos): se lo pasa a normal para que al menos se vea centrado y del tamaño justo, en vez de quedar gigante y cortado. */ @media (max-width: 900px) { .marca-portada { height: 62svh; background-attachment: scroll; background-size: min(74vw, 340px) auto; } } /* --- La flecha de la portada de una marca ------------------------------- La misma flecha del hero, pero acá tiene que RESALTAR: en el hero se apoya sobre una foto con contraste, y en la portada de marca cae sobre un color plano donde una flechita fina desaparece. Pedido de Ramiro: "alguna flecha que resalte". Se la mete en un círculo sólido, que es lo que la vuelve un botón evidente, y se le agrega un rebote lento: el movimiento es lo que dice "hay más abajo" sin escribirlo. */ .marca-portada .hero-flecha { position: absolute; left: 50%; /* BIEN SEPARADA DEL BORDE DE ABAJO. Estaba a 26-52px y quedaba pegada al canto: entre el rebote y la barra del navegador del celular, se cortaba y no se veía. Ramiro la pidió más arriba y tenía razón — una flecha que hay que buscar no invita a nada. Con este valor queda a la vista en cualquier pantalla. */ bottom: clamp(72px, 13vh, 132px); transform: translateX(-50%); z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--tinta); color: #fff; box-shadow: 0 10px 26px -10px rgba(18, 14, 30, .55); /* La flecha base de tienda.css viene al 55% de opacidad, porque allá se apoya sobre una foto y no tiene que competirle. Acá es un botón sólido sobre un color plano: al 55% se veía gris y desteñido. */ opacity: 1; animation: flecha-rebota 2.4s ease-in-out infinite; transition: background var(--transicion), transform var(--transicion); } .marca-portada .hero-flecha:hover, .marca-portada .hero-flecha:focus-visible { background: var(--marca); animation-play-state: paused; } @keyframes flecha-rebota { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } } /* Al bajar, la flecha se apaga: ya cumplió y estorbaría flotando sobre los productos. Lo hace animaciones.js poniéndole una clase al <html>; acá sólo hay que repetir la regla para que le gane a la opacidad: 1 de arriba. */ html.pagina-desplazada .marca-portada .hero-flecha { opacity: 0; pointer-events: none; } /* Quien pidió menos movimiento ve la flecha quieta: sigue siendo un botón redondo y sigue llevando abajo, sólo que sin rebotar. */ @media (prefers-reduced-motion: reduce) { .marca-portada .hero-flecha { animation: none; } } /* --- 17. La campaña de una marca ---------------------------------------- La franja que va debajo de la portada de Miwok, con su foto de campaña de temporada. Es el "anuncio grande" que Ramiro quería, puesto adentro de la marca y no en la portada del local. -------------------------------------------------------------------- */ .campana-marca { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); display: flex; align-items: flex-end; aspect-ratio: 2 / 1; max-height: 74vh; background-size: cover; background-position: center; padding: clamp(26px, 4vw, 60px); } /* Un velo abajo: la foto es clara en la parte de la pista y el texto blanco se perdía. Sólo cubre el tercio inferior, que es donde va el texto. */ .campana-marca::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 14, 30, .62) 0%, rgba(18, 14, 30, .18) 34%, rgba(18, 14, 30, 0) 58%); } .campana-marca-texto { position: relative; z-index: 1; color: #fff; max-width: 34ch; } .campana-marca-volanta { margin: 0 0 10px; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; opacity: .9; } .campana-marca-titulo { margin: 0 0 20px; font-family: var(--tipografia-titulo); font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.06; color: #fff; } .campana-marca .boton { background: #fff; color: var(--tinta); } .campana-marca .boton:hover { background: var(--fondo-suave); } /* Una foto por marca. Como el logo de la portada, se escribe a mano: elegir qué foto representa a una marca es una decisión, no un cálculo. */ .campana-marca--miwok { background-image: url("/img/campana-miwok-b6e233f248c0bab1aba1a4ab68178089.jpg"); } @media (max-width: 760px) { .campana-marca { aspect-ratio: 3 / 4; max-height: none; } .campana-marca--miwok { background-image: url("/img/campana-miwok-movil-9bc691ac75bf44a520e73d3af88e3134.jpg"); } .campana-marca-texto { max-width: none; } } /* --- 19. Fila de otra marca ------------------------------------------- La fila que la portada le dedica a cada marca que no es la principal (hoy, Boniques abajo de todo lo de Miwok). El título es el LOGO. Es la marca misma: cualquier texto que le pusiéramos arriba sería nuestro, no de ellos, y Ramiro fue claro con que las marcas van sin historias inventadas. El <h2> con el nombre sigue en el HTML pero sólo para lectores de pantalla y buscadores —el logo es una imagen, y una imagen no es un encabezado. Del alto: el mismo rango que la tira de logos de arriba, para que la marca se vea igual de grande en los dos lugares. No se invierte el color como allá, porque acá el fondo es claro. */ .fila-de-marca-logo { height: clamp(26px, 3vw, 42px); width: auto; display: block; } /* --- 20. La campaña en fotos ------------------------------------------ Las fotos de la modelo usando el producto, en la página de su marca. TRES VERTICALES EN FILA, de borde a borde de la pantalla. Van pegadas —sin separación— porque así se leen como una sola imagen ancha en vez de como tres tarjetas: es lo que hace que parezca una campaña y no una galería. El aspecto lo fija el contenedor (2/3, que es como se exportaron) y la foto lo llena con object-fit: cover. Sin esa altura fija, tres fotos de proporciones apenas distintas dejarían dientes abajo. */ .campana-fotos { width: 100vw; margin-inline: calc(50% - 50vw); margin-top: var(--ritmo); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fondo-hueco); /* EL ALTO VA ACÁ, EN LA FILA, y no en cada foto. Primero se hizo con aspect-ratio: 2/3 más max-height en la figura y salió mal: con un techo de alto, aspect-ratio le achica TAMBIÉN el ancho para mantener la proporción, así que cada foto quedaba más angosta que su columna y entre una y otra aparecían franjas grises. Con el alto en la fila, la figura se estira a lo ancho de su columna —que es lo que hacen los ítems de una grilla— y el recorte lo resuelve object-fit. 50vw es el alto natural de una columna de 33vw en proporción 2:3; el 68vh es el techo, porque sin él, en una pantalla ancha la campaña sola mide más que la pantalla y hay que scrollear una tapa entera antes de llegar a la ropa. */ grid-auto-rows: min(68vh, 50vw); } .campana-foto { margin: 0; height: 100%; overflow: hidden; } .campana-foto img { width: 100%; height: 100%; /* Al recortar por el techo de arriba, el recorte se lleva desde abajo: encuadrado al centro se comía la cara. Arriba está la persona; abajo, el piso. */ object-fit: cover; object-position: 50% 22%; display: block; } /* En el celular tres fotos en fila miden 130px de ancho cada una: la modelo entra del tamaño de una uña y el bolso no se ve. Se pasa a dos columnas y la TERCERA se esconde —una campaña de dos fotos sigue siendo una campaña; una tercera sola y desalineada abajo, no—. */ @media (max-width: 700px) { .campana-fotos { grid-template-columns: repeat(2, 1fr); /* Dos columnas: cada una mide 50vw, y su alto natural en 2:3 es 75vw. */ grid-auto-rows: min(68vh, 75vw); } .campana-foto:nth-child(3) { display: none; } } /* --- La fila del SALE ------------------------------------------------------ Es una fila de vidriera más, con una sola diferencia: la volanta va en el violeta invertido para que se distinga de "New in FW26" y "En tendencia" sin romper el ritmo de la página. La referencia (miwok.com.ar) hace lo mismo: el SALE no cambia el diseño, cambia una palabra de color. ------------------------------------------------------------------------ */ /* EL TÍTULO DEL SALE, GRANDE DE VERDAD. Ramiro: "winter sale ponelo mas grandeeee". Casi el doble que un título de vidriera normal (hasta 5.4rem contra 3rem) y en el violeta de la marca: una liquidación tiene que frenar al que está bajando la página, y el título de una sección más no frena a nadie. El clamp arranca en 2.6rem para que en un celular siga entrando en un renglón: "Winter sale" partido en dos deja de leerse como un cartel. */ .sale-titulo { margin: 0 0 4px; font-family: var(--tipografia-titulo); font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 700; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; /* EN NEGRO, no en violeta. Pedido de Ramiro: "el winter sale ponelo negro q se vea mejor". Y tiene razón por una cuestión de contraste: a 5,4rem el violeta --marca-oscuro sobre blanco se lee lavado, mientras que --tinta es el mismo negro azulado que usa todo el texto del sitio y pega mucho más fuerte en una pieza tan grande. El violeta sigue estando donde importa —las etiquetas, los botones— así que la marca no se pierde. */ color: var(--tinta); } /* El "2x1" es cortito, así que aguanta todavía más tamaño sin desbordar. La x en minúscula es a propósito: "2X1" en versalitas se lee como una fórmula, "2x1" se lee como una promoción de local. */ .sale-titulo-2x1 { font-size: clamp(3rem, 9vw, 6rem); text-transform: none; } /* La aclaración de que los descuentos no se acumulan. Va al pie de la fila, en letra chica pero LEGIBLE (--gris, 5,5:1): es una condición de venta, no un descargo escondido. Que el cliente la lea acá y no en el checkout es la diferencia entre una expectativa bien puesta y un carrito abandonado. */ .sale-letra-chica { max-width: 62ch; margin: 14px auto 0; padding: 0 var(--borde-pagina, 20px); font-size: .8125rem; line-height: 1.5; color: var(--gris); text-align: center; } .sale-letra-chica strong { color: var(--marca-oscuro); }