/* =====================================================================
tarjetas.css — la tarjeta de producto.
La tarjeta es la pieza que más se repite en todo el sitio: la portada la
dibuja decenas de veces. Por eso tiene hoja propia, y por eso vale la
pena pulirla: cada mejora acá se multiplica por doscientas prendas.
Se enlaza desde layout/base.html DESPUES de tienda.css:
Ese orden importa y es la única razón por la que este archivo puede
pisar reglas de tienda.css sin usar !important: entre dos reglas que
pesan lo mismo, gana la última que se cargó.
Lo que queda en tienda.css (agente 9) y NO se toca acá: el esqueleto de
la tarjeta, el recuadro 4/5 de la foto, las etiquetas "Destacado" y
"Agotado" y las variables (--marca, --borde, --gris…). Este archivo
afina: el cambio de foto, el zoom, la elevación y la letra chica.
Nada de todo esto lleva estilos en línea en la plantilla. Un style= en
el HTML le gana a este archivo entero, incluida la versión de celular:
si ves uno peleando con estas reglas, el que sobra es el style=.
===================================================================== */
/* =====================================================================
1. LAS DOS FOTOS: el cambio de imagen al pasar el mouse
=====================================================================
Es EL gesto de las tiendas de ropa buenas y lo que pidió Ramiro: al
pasar por encima, la prenda aparece en otra pose. La plantilla pone dos
![]()
en el mismo recuadro:
.tarjeta-foto-principal la foto 0 de la galería, la de siempre
.tarjeta-foto-alterna la foto 1, apilada encima e INVISIBLE
La alterna arranca en opacity 0 y se enciende al hacer hover. Se hace
así, y no apagando la principal, porque una prenda con UNA sola foto no
tiene alterna: si el efecto fuera "apagar la de adelante", esas nueve
prendas del catálogo mostrarían el hueco gris del fondo. Encendiendo la
de atrás no hay caso borde que atender: si no hay segunda foto, no hay
elemento, y no pasa nada.
-------------------------------------------------------------------- */
.tarjeta-foto-alterna {
/* Apilada exactamente sobre la principal. El padre .tarjeta-foto ya es
position: relative (tienda.css), así que "inset: 0" la estira justo
sobre el recuadro 4/5, sin importar cuánto mida la tarjeta. */
position: absolute;
inset: 0;
opacity: 0;
}
/* El fundido y el zoom van juntos en la misma transición porque son el
mismo gesto. Dos tiempos distintos a propósito:
· la opacidad, 450ms: el cruce tiene que sentirse suave, no un corte
de cámara. Menos de 300ms se lee como un parpadeo.
· el transform, 900ms: el zoom es el detalle "caro". Lento y apenas
perceptible, como el de miwok.com.ar. Rápido parece un botón; lento
parece una vidriera.
La curva es casi-lineal al final (el cubic-bezier arranca decidido y
frena de a poco) para que el zoom no tenga un tirón inicial. */
.tarjeta-foto img {
transition: transform 900ms cubic-bezier(.22, .61, .24, 1),
opacity 450ms ease;
}
/* Cuánto se ve la foto alterna cuando está encendida. Es una variable y no
un 1 fijo porque la prenda AGOTADA muestra sus fotos apagadas (regla de
tienda.css) y la de atrás tiene que apagarse igual: si no, pasar el
mouse por un agotado lo "revive" y engaña. */
.tarjeta-foto { --opacidad-alterna: 1; }
.agotado .tarjeta-foto { --opacidad-alterna: .88; }
/* --- El efecto, sólo donde hay mouse de verdad -----------------------
(hover: hover) y (pointer: fine) = hay un puntero que puede quedarse
apoyado encima. En el celular no existe: ahí un "hover" es en realidad
el dedo tocando, y el efecto quedaría trabado después del toque. Fuera
de este bloque, la tarjeta del teléfono no tiene ni fundido ni zoom, que
es exactamente lo que corresponde.
El :focus-visible va acompañando al :hover: quien navega con el teclado
(Tab) ve lo mismo que quien usa el mouse. */
@media (hover: hover) and (pointer: fine) {
.tarjeta:hover .tarjeta-foto-alterna,
.tarjeta:focus-visible .tarjeta-foto-alterna {
opacity: var(--opacidad-alterna);
}
/* Zoom apenas más largo que el de tienda.css (1.04) porque acá dura el
doble: con 900ms de recorrido, 1.06 se mueve igual de suave y se nota
más. Las DOS fotos escalan juntas; si sólo escalara la de arriba, en
el cruce se vería una saltando sobre la otra quieta. */
.tarjeta:hover .tarjeta-foto img,
.tarjeta:focus-visible .tarjeta-foto img {
transform: scale(1.06);
}
}
/* En pantallas sin mouse la foto alterna no se va a ver nunca, así que se
saca del dibujo: un ![]()
con display:none y loading="lazy" no se
descarga. Son 200 fotos menos en la portada del celular, que es
justamente donde entran Ramiro y sus clientas, muchas con datos. */
@media (hover: none) {
.tarjeta-foto-alterna { display: none; }
}
/* =====================================================================
2. LA ELEVACIÓN
=====================================================================
tienda.css ya sube la sombra al pasar el mouse. Acá se le agrega el
movimiento: la foto se despega cuatro píxeles del papel.
Lo que se mueve es la FOTO, no la tarjeta entera, y es a propósito. Si
levantáramos el completo, su borde de abajo se correría hacia
arriba; con el mouse apoyado justo ahí, el puntero queda afuera, se
apaga el hover, la tarjeta baja, vuelve a quedar debajo del mouse… y
parpadea sin parar. Moviendo sólo la foto, la caja que detecta el hover
se queda quieta y el temblequeo no puede pasar.
320ms y no los 160 de --transicion: la sombra y el movimiento tienen que
acompañar al zoom largo, no llegar antes que él.
-------------------------------------------------------------------- */
/* Sin will-change a propósito: sería lo "correcto" para avisarle al
navegador que esto se va a mover, pero en la portada hay hasta doscientas
tarjetas y cada una se llevaría su propia capa de memoria de video. En un
teléfono eso se paga caro y el movimiento acá es tan simple que no lo
necesita. */
.tarjeta-foto {
transition: box-shadow 320ms ease, transform 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
.tarjeta:hover .tarjeta-foto,
.tarjeta:focus-visible .tarjeta-foto {
transform: translateY(-4px);
}
}
/* =====================================================================
3. NOMBRE, PRECIO Y TALLES: la jerarquía
=====================================================================
El orden en que se lee una tarjeta de ropa es: foto → nombre → precio.
Los colores y los talles son el detalle, y tienen que verse como
detalle. Todo esto es afinar lo que ya define tienda.css.
-------------------------------------------------------------------- */
/* El nombre en Playfair ya viene de tienda.css. Acá se le da aire y se le
pone un techo de DOS renglones: en la grilla, un nombre de tres líneas
empuja el precio hacia abajo y las tarjetas de la misma fila dejan de
estar alineadas. El nombre más largo del catálogo tiene 26 letras, así
que el corte es un seguro, no algo que se vea todos los días. */
.tarjeta-nombre {
font-size: 1.1rem;
line-height: 1.25;
margin: 0 0 6px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
transition: color var(--transicion);
}
/* Al pasar el mouse el nombre se tiñe del violeta de goodlook. Es la única
pista de que la tarjeta entera es un enlace: no lleva subrayado ni
flechita, y sin esto no hay nada que lo diga. */
@media (hover: hover) and (pointer: fine) {
.tarjeta:hover .tarjeta-nombre { color: var(--marca); }
}
/* Los números con ancho fijo (tabular-nums) hacen que una columna de
precios quede pareja: sin eso el "1" es más angosto que el "8" y los
$ 12.000 y $ 88.000 de dos tarjetas vecinas no arrancan a la misma
altura visual. */
.tarjeta-precio {
font-size: 1rem;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
margin-top: auto; /* empuja el precio al pie de la tarjeta */
padding-top: 2px;
}
/* "Consultar precio" — que HOY es el caso de las 214 prendas, o sea lo
normal y no la excepción. Se lo trata como lo que es: una etiqueta, no
un precio. Chica, en versalitas espaciadas y en gris, se lee como una
decisión de la tienda; con el cuerpo de un precio se leería como un
error de carga. El color gris lo pone la clase .apagado de tienda.css. */
.tarjeta-precio.apagado {
font-size: .75rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
}
/* El precio viejo, tachado, al lado del nuevo. Va más chico y en gris: tiene
que estar —sin él la oferta no se entiende— pero no puede competir con el
número que el cliente realmente va a pagar. El gris es --gris, 5,5:1, que
sigue siendo texto legible y no decoración. */
.tarjeta-precio .precio-viejo {
color: var(--gris);
font-size: .85em;
margin-right: 6px;
text-decoration-thickness: 1px;
}
.tarjeta-precio .precio-oferta {
color: var(--marca-oscuro);
font-weight: 700;
}
/* Los talles son el dato más chico de todos: informan, no llaman. */
.tarjeta-talles {
font-size: .75rem;
letter-spacing: .05em;
margin-top: 5px;
}
/* =====================================================================
4. LOS COLORES DISPONIBLES
===================================================================== */
/* --- La fila de colores debajo del nombre ---------------------------- */
.tarjeta-colores {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 2px 0 8px;
}
/* --- Miniatura: la foto del color ------------------------------------
Es lo que muestra miwok.com.ar: un cuadradito con la prenda en ese
color. Sólo aparece cuando la foto tiene el color asignado (hoy casi
ninguna lo tiene; ver el comentario largo en fragmentos/comunes.html). */
.tarjeta-color-foto {
display: block;
width: 34px;
height: 34px;
object-fit: cover;
border: 1px solid var(--borde);
border-radius: 5px;
background: var(--fondo-hueco);
transition: border-color var(--transicion);
}
.tarjeta:hover .tarjeta-color-foto { border-color: var(--gris-claro); }
/* --- Pastilla: el NOMBRE del color -----------------------------------
El reemplazo para cuando las fotos todavía no distinguen color.
La pastilla puede ocupar todo el ancho de la tarjeta y prefiere gastar
un renglón antes que recortar. El catálogo tiene "Gris melange claro" y
"Gris melange oscuro" en la misma prenda: recortadas quedan las dos en
"Gris mela…", idénticas e inútiles. El text-overflow queda igual, pero
como red de seguridad para un nombre absurdamente largo. */
.tarjeta-color-nombre {
display: inline-block;
max-width: 100%;
padding: 3px 9px;
border: 1px solid var(--borde);
border-radius: 999px;
background: var(--fondo);
color: var(--tinta-suave);
font-size: .6875rem;
line-height: 1.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: border-color var(--transicion), color var(--transicion);
}
/* Al pasar el mouse las pastillas acompañan con un borde apenas más
marcado. Es el mismo recurso que las miniaturas: la fila entera
pertenece a la tarjeta y reacciona con ella. */
.tarjeta:hover .tarjeta-color-nombre {
border-color: var(--gris-claro);
color: var(--tinta);
}
/* --- Color sin stock -------------------------------------------------
No se esconde: que el cliente sepa que la prenda existe en ese color
y que hoy no lo tenemos. Se distingue por DOS vías a la vez (opacidad
y tachado / gris) para que también se note sin percibir bien el color. */
.tarjeta-color-nombre.sin-stock {
opacity: .5;
text-decoration: line-through;
}
/* Apagada se queda apagada aunque se pase el mouse por la tarjeta. */
.tarjeta:hover .tarjeta-color-nombre.sin-stock {
border-color: var(--borde);
color: var(--tinta-suave);
}
.tarjeta-color-foto.sin-stock {
opacity: .42;
filter: grayscale(1);
}
/* --- "+2" cuando hay más colores de los que entran ------------------- */
.tarjeta-color-mas {
font-size: .6875rem;
color: var(--gris);
white-space: nowrap;
}
/* =====================================================================
5. CELULAR
=====================================================================
La grilla pasa a dos columnas: cada tarjeta mide unos 170px de ancho en
un teléfono de 390px. Todo lo de abajo es para que en ese ancho no se
apriete nada ni se desborde el nombre de un color.
-------------------------------------------------------------------- */
@media (max-width: 640px) {
/* Playfair a 1.1rem en 170px de ancho corta demasiadas palabras. */
.tarjeta-nombre { font-size: .975rem; }
.tarjeta-precio { font-size: .9375rem; }
/* "Consultar precio" son dos palabras largas: en versalitas y con este
espaciado entra en dos renglones cómodos y no se parte al medio. */
.tarjeta-precio.apagado {
font-size: .6875rem;
letter-spacing: .05em;
}
.tarjeta-talles { font-size: .6875rem; }
.tarjeta-colores { gap: 5px; }
/* Cuatro cuadraditos de 34px entran justos; a 30px nunca quedan
apretados contra el borde ni empujan el precio a una línea de más. */
.tarjeta-color-foto { width: 30px; height: 30px; }
.tarjeta-color-nombre {
padding: 2px 7px;
font-size: .6563rem;
}
}
/* =====================================================================
6. QUIEN PIDIÓ QUE NADA SE MUEVA
=====================================================================
tienda.css ya apaga TODAS las transiciones del sitio para quien tenga
activado "reducir movimiento" en su sistema (hay gente a la que el
movimiento en pantalla le da mareo o dolor de cabeza; es una opción del
teléfono, no un capricho).
Pero apagar la transición no apaga el EFECTO: sin transición, el zoom
pasa de golpe de 1 a 1.06 y la foto pega un salto seco, que es peor que
el movimiento suave. Así que acá se anula el zoom y la elevación por
completo.
El cambio de foto SÍ se conserva: pasa a ser instantáneo, como dar
vuelta una hoja. No hay desplazamiento en pantalla, y es información
útil (la otra pose de la prenda), no decoración.
-------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.tarjeta:hover .tarjeta-foto img,
.tarjeta:focus-visible .tarjeta-foto img {
transform: none;
}
.tarjeta:hover .tarjeta-foto,
.tarjeta:focus-visible .tarjeta-foto {
transform: none;
}
}
/* ======================================================================
LA GRILLA ORDENADA
======================================================================
Pedido de Ramiro: "q las fotos y prendas q esten todas alineadas en el
sentido ordenadas, porq lo veo todo como desprolijo".
El desorden NO era del CSS: es de las fotos. Miwok no manda las fotos con
una proporción única. Sobre 400 de las que tenemos cargadas conviven al
menos seis: 2:3 (las más), 7:5, 5:3, 12:7 y un par casi 2:1. Al meterlas
todas en la misma caja, a cada una se le recortaba un pedazo distinto, y
el cuerpo del modelo terminaba a distinta altura en cada tarjeta. Con las
cajas del mismo tamaño igual se veía torcido, porque lo que estaba
desalineado era lo de ADENTRO.
Tres cambios, y cada uno resuelve una parte:
-------------------------------------------------------------------- */
.tarjeta-foto {
/* 1. LA PROPORCIÓN: 2:3, la misma que usa miwok.com.ar (lo medí en su
grilla: 960x1440). Y es también la proporción más común de nuestras
fotos, así que en la mayoría el recorte pasa a ser CERO: se ve
exactamente el encuadre que eligió el fotógrafo.
De paso, una caja más alta que la anterior (era 4:5) muestra la
prenda entera en vez de un pedazo, que es de lo que se trata cuando
lo que se vende es ropa. */
aspect-ratio: 2 / 3;
/* 2. LAS ESQUINAS RECTAS. Parece un detalle y es la mitad del asunto: con
las esquinas redondeadas cada foto se lee como una figurita suelta
apoyada sobre la página, y doce figuritas juntas se ven desordenadas
por más que estén perfectamente alineadas. Con las esquinas rectas
las fotos forman una retícula y el ojo la lee como una sola pieza.
Miwok tiene 0 de radio, y por esto. */
border-radius: 0;
/* Y sin sombra, por lo mismo: la sombra despega cada tarjeta de la página
y vuelve a romper la retícula. El aire entre columnas alcanza para
separarlas. */
box-shadow: none;
}
.tarjeta:hover .tarjeta-foto { box-shadow: none; }
/* 3. DÓNDE SE RECORTA lo que sobra. Las fotos más altas que la caja (las de
5:3 para arriba) igual tienen que perder algo. Anclando el encuadre
arriba, lo que se pierde son los pies; centrado —como estaba— se comía
mitad y mitad, y en varias fotos cortaba la cara.
No es simetría mal entendida: en una foto de catálogo la cara y el torso
son la información, los pies son relleno. Cortar siempre por el mismo
lado es además lo que hace que todas las prendas queden a la misma
altura de una tarjeta a la otra.
En las fotos MÁS ANCHAS que la caja este número no hace nada: ahí lo que
sobra está a los costados, y el 50% horizontal las deja centradas. */
.tarjeta-foto img {
object-position: 50% 12%;
}