/* ==========================================================================
MOIRE - ficha de producto
--------------------------------------------------------------------------
Medidas leidas del componente "Menu Perfume", instancia 321:488 del
fichero Rr8bUx2mFVPGNQ9mOHNwDT, y no solo de la especificacion.
QUE ES LA BANDA Y DONDE VIVE
No es una franja que se apile debajo de la foto: es una instancia
SUPERPUESTA a la seccion, a todo el ancho. La primera mitad de esta hoja
maqueta el texto y su aire; la segunda, la seccion que lo sostiene, su
fondo y su foto.
LO QUE EL DISENO HACE EN CADA SECCION, QUE NO ES LO MISMO EN LAS CINCO.
Leido de los nodos, no deducido de FRASCO:
Seccion alto instancia de la banda alto y (en la seccion)
FRASCO 306:1899 924 321:488 924 0
PACK 313:2064 924 313:2068 924 0
SHOOT 310:1943 768 167:1572 733,9 17
PIRAM. 361:3374 924 361:3407 610 157
PERF. 361:3316 924 361:3323 610 160
O sea que la banda solo ocupa la seccion entera en FRASCO y en PACK. En
las otras tres es mas baja y va desplazada hacia abajo. En Figma eso se
puede hacer porque una instancia se encoge y su contenido se sale; en CSS
no: una caja crece con lo que lleva dentro.
Y EL ORDEN CON LA FOTO TAMPOCO ES SIEMPRE EL MISMO. En FRASCO la foto
(28:996, 700x700) va antes que la instancia, o sea detras. En SHOOT
(310:1943) esta al reves: primero la instancia y despues el rectangulo de
614x768, o sea la foto POR ENCIMA del texto. Hoy no cambia lo que se ve
-no se solapan- pero la tarea 4 no puede dar por hecho que la foto va
siempre detras.
LA RESTRICCION QUE ESTA BANDA IMPONE, Y COMO SE RESOLVIO
Su suelo son 184 + 524 + 144 = 852px a 1920 (medido: 851,98), que es el
aire de arriba, el alto del marco del bloque derecho y el aire de abajo.
Por debajo de 1920 encoge en proporcion (44,375vw). Con eso:
- FRASCO, PACK, PIRAMIDE y PERFUMISTA (924): caben.
- SHOOT (768): NO CABE. La banda empujaria la seccion hasta 852.
SHOOT se queda en sus 768 y la banda se comprime ahi por 768/852, con el
factor --banda-escala que se declara unas lineas mas abajo y se cambia al
final de la hoja. El razonamiento completo esta en "SHOOT no cabe", al
final: aqui basta con saber que las cuatro medidas verticales de la banda
llevan ese factor y que en cuatro de las cinco secciones vale 1.
0 1920
+-----------------------------------------------------------+
| 184 de aire por arriba |
| 169 | The Feast Of Excess | | MOIRE | 169 |
| | AMOR | | Amor L. | |
| | LACTEO | | Eau De.. | |
| | la descripcion... | | | |
| 144 de aire por abajo |
+-----------------------------------------------------------+
<--------- 470 ---------> <-- 380 -->
LOS DOS BLOQUES NO ESTAN A LA MISMA ALTURA, y no es un descuido del
diseno: los dos van centrados en vertical, pero el de la derecha vive
dentro de un marco de 524 de alto con 238 de aire por encima, asi que su
texto cae por debajo del de la izquierda. Se reproduce con ese marco (ver
.banda__info) y no con un margen a ojo: asi la separacion entre los dos
bloques la calcula el centrado, y no hay que recalcularla a mano cada vez
que la seccion cambie de alto.
Ojo con lo que eso NO significa: el marco de 524 es tambien el suelo de
la banda (ver la restriccion de mas arriba), asi que "vale para cualquier
alto" solo es cierto de 852px para arriba.
LAS MEDIDAS VAN EN clamp(min, Nvw, diseno)
Cada N es la medida del diseno dividida entre 1920: asi a 1920 sale el
numero exacto de Figma y por debajo encoge en proporcion, que es como ya
escala /collections.
EL MOVIL SI ESTA DISENADO, Y ESTA HOJA DECIA LO CONTRARIO.
Corregido el 16/09/2026. El fichero Rr8bUx2mFVPGNQ9mOHNwDT tiene un
artboard de movil por fragancia, de 375 de ancho y 4116,45 de alto:
AMOR LACTEO 403:2138 LICKORICE 419:658
CHERRY ON TOP 419:344 LEMONUDE 419:815
BAKE MY CHERRY 419:501 CANDYNUDE 419:972
Son las cinco secciones otra vez, con su propia composicion -no la de
1920 encogida- y con su propia instancia de la banda ("Menu Perfume
Mobile", 408:368, 343x240). Lo que sigue sin estar dibujado es el TABLET:
entre 768 y 1279 no hay artboard de ficha, asi que esa franja sigue
siendo deducida y se somete a revision.
Por eso esta hoja tiene ahora tres composiciones y no dos:
- menos de 768 el artboard de movil, al pie de esta hoja.
- 768 a 1279 deducido: la banda a dos columnas superpuesta, y la
piramide y el perfumista apilados.
- 1280 y arriba el artboard de 1920.
========================================================================== */
/* --- La banda -------------------------------------------------------------
El padding es el del contenedor del componente: 184px 169px 144px.
max-width y margin-inline SON NECESARIOS, pero no por lo que parece: el
padding ya topa solo -clamp(20px, 8.802vw, 169px) da 169 exactos a 2560,
medido- asi que el aire lateral no se dispara. Lo que se dispara sin tope
es el HUECO ENTRE LOS DOS BLOQUES: justify-content: space-between los
manda a los extremos de lo que haya, o sea 2222px de contenido en un
monitor de 2560, y la banda deja de leerse como una composicion para
parecer dos textos sin relacion en las esquinas.
Es el mismo criterio de .contenedor en base.css, que aqui no se puede
usar porque su padding lateral es otro (80, no 169). */
.banda {
/* EL FACTOR DE COMPRESION DE LA BANDA. Vale 1 en cuatro de las cinco
secciones y 768/852 en SHOOT, que es la unica que no da de si. El
porque y la cuenta, en "SHOOT no cabe" al final de esta hoja. */
--banda-escala: 1;
display: flex;
flex-direction: column; /* movil: una columna. Ver el @media de abajo */
gap: var(--paso-5);
max-width: var(--ancho-maximo);
margin-inline: auto;
padding: calc(clamp(40px, 9.583vw, 184px) * var(--banda-escala)) /* 184 a 1920 */
clamp(20px, 8.802vw, 169px) /* 169 a 1920 */
calc(clamp(30px, 7.5vw, 144px) * var(--banda-escala)); /* 144 a 1920 */
}
/* --- Bloque izquierdo: coleccion, nombre y descripcion --------------------
Los tres van en flujo normal con 15px entre ellos. En Figma estan
colocados uno a uno sobre una reticula -no hay auto-layout- pero al medir
los huecos salen 14,997 y 15,000: es una separacion intencionada y no tres
empujones a ojo, asi que se escribe como un hueco y no como tres
posiciones absolutas.
El bloque mide 470 de ancho, que es lo que el nombre necesita; la
coleccion y la descripcion son mas estrechas (327,8) y se acotan aparte. */
.banda__nombre,
.banda__claim {
margin-top: 15px;
}
.banda__coleccion {
font-size: clamp(16px, 1.354vw, 26px); /* 26 a 1920 */
line-height: 1; /* 26/26 */
font-weight: var(--peso-bold);
color: var(--c-rojo);
}
/* EL NOMBRE NO LLEVA EL SALTO DE LINEA ESCRITO A MANO.
El diseno parte "AMOR LACTEO" en dos lineas, y la tentacion es meter un
en el marcado. No se hace: el nombre sale de products.php y las seis
fragancias no se parten igual -LEMONUDE, CANDYNUDE y LICKORICE son una
sola palabra-. Lo que parte el nombre es el ancho de la caja, 470, que es
el del diseno: con el, el nombre de dos palabras cae en dos lineas solo y
el de una sola palabra no se rompe por la mitad. */
.banda__nombre {
font-size: clamp(34px, 3.958vw, 76px); /* 76 a 1920 */
line-height: 0.934; /* 71/76 */
font-weight: var(--peso-bold);
color: var(--c-rojo);
text-transform: uppercase;
}
/* --- La descripcion -------------------------------------------------------
DESVIACION TIPOGRAFICA, ANOTADA AQUI A PROPOSITO.
El diseno compone esto en Financier Display Medium, una serif que el
proyecto NO tiene: en assets/fonts/ solo estan los tres pesos de Neue
Montreal. Decision del responsable del 16/09/2026: se usa Neue Montreal
y marca lo valida.
NO es un detalle menor y no debe colarse como si lo fuera: es el UNICO
texto con serif de toda la ficha, asi que la sustitucion no cambia una
letra, cambia el caracter del bloque -una serif de editorial contra una
grotesca geometrica- y con el, el tono de la pagina.
Si algun dia llega el fichero, mirar la licencia: el derecho de uso web
es distinto del de escritorio.
La font-family se declara aqui aunque se herede igual del body: es
redundante a proposito, para que la sustitucion tenga una linea visible
donde apoyarse en vez de ser una ausencia que nadie nota. */
.banda__claim {
font-family: var(--font-display); /* el diseno pide Financier Display Medium */
font-size: clamp(16px, 1.302vw, 25px); /* 25 a 1920 */
line-height: 1.04; /* 26/25 */
letter-spacing: 0.09em; /* 2,25px sobre un cuerpo de 25 */
color: var(--c-negro);
}
/* --- Bloque derecho: marca, nombre y formato ------------------------------
El diseno lleva el letter-spacing en la caja "Producto Info"
(I321:488;175:1610), que envuelve los dos textos: 2,34px sobre un cuerpo
de 26, o sea 0,09em. Es el mismo tracking relativo que la descripcion de
la izquierda (2,25 sobre 25), asi que escrito en em se ve que son la
misma decision y no dos numeros sueltos.
PERO SE DECLARA EN CADA TEXTO Y NO EN EL BLOQUE QUE LOS ENVUELVE, y esto
es una trampa que ya se comio una version de esta hoja: em se resuelve
contra el font-size del PROPIO elemento, y .banda__info no tiene ninguno,
asi que hereda los 16px del body y 0,09em salen 1,44px. Peor aun, lo que
se hereda no es "0,09em" sino esos 1,44px ya calculados: los hijos, que
si estan a 26, no lo vuelven a resolver. Medido en el navegador daba
1,44px a 1920 y a 375, o sea ni el valor del diseno ni escalado.
Declarado en los dos textos, que si tienen su cuerpo, sale 2,34px y
acompana al clamp cuando la pantalla encoge.
AQUI NO HAY CORAZON NI ICONO DE COMPARTIR. El diseno los pone debajo del
formato; se quitan (decision del responsable del 16/09/2026). No queda ni
la regla ni el hueco. */
.banda__marca {
font-size: clamp(16px, 1.354vw, 26px); /* 26 a 1920 */
line-height: 1.154; /* 30/26 */
letter-spacing: 0.09em; /* 2,34px sobre un cuerpo de 26 */
font-weight: var(--peso-bold);
color: var(--c-rojo);
}
.banda__formato {
margin-top: 4px; /* el hueco del diseno entre los dos textos */
font-size: clamp(16px, 1.354vw, 26px); /* 26 a 1920 */
line-height: 1.231; /* 32/26 */
letter-spacing: 0.09em; /* 2,34px sobre un cuerpo de 26 */
color: var(--c-negro);
}
/* --- Las dos columnas del diseno -----------------------------------------
A partir de 768 la banda es la del diseno: dos bloques a los extremos,
centrados en vertical.
EL BLOQUE DERECHO CONSERVA EL AIRE DE LOS ICONOS QUE SE QUITARON, y es
una decision, no un olvido. Su marco mide 524 de alto con 238 de aire por
encima; dentro caben el texto (124) y, en el diseno, los dos iconos. Al
quitarlos, el marco podria encogerse a lo que ocupa el texto... y
entonces el bloque, que va centrado, subiria unos 80px y dejaria de
alinearse con lo que el disenador dibujo. Lo que coloca este bloque en la
composicion es el alto de su caja, asi que la caja se queda. */
@media (min-width: 768px) {
.banda {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0;
}
.banda__texto {
width: clamp(260px, 24.479vw, 470px); /* 470 a 1920 */
}
.banda__coleccion,
.banda__claim {
max-width: clamp(200px, 17.073vw, 327.8px); /* 327,8 a 1920 */
}
.banda__info {
width: clamp(240px, 19.792vw, 380px); /* 380 a 1920 */
padding-top: calc(min(12.396vw, 238px) * var(--banda-escala)); /* 238 a 1920 */
min-height: calc(min(27.292vw, 524px) * var(--banda-escala)); /* 524 a 1920 */
}
}
/* ==========================================================================
LAS CINCO SECCIONES Y SUS FOTOS
--------------------------------------------------------------------------
Lo de arriba maqueta la banda; de aqui abajo, la seccion que la sostiene y
la foto que va detras.
LO QUE EL DISENO PONE EN CADA UNA, leido de los nodos del fichero
Rr8bUx2mFVPGNQ9mOHNwDT y no de la especificacion:
Seccion alto fondo foto caja colocada
FRASCO 924 blanco 28:996 700x700 centrada, 112 arriba
PACK 924 LA FOTO 313:2065 1920x924 a sangre
SHOOT 768 - 306:1576 614x768 centrada, alto entero
PIRAMIDE 924 transparente 361:3394 724x724 centrada, 86 arriba
PERFUMISTA 924 #400f17 361:3320 478x653 centrada, 40 arriba
EL 'pack' NO TIENE CAPA DE FOTO, y era la duda que traia esta tarea. No es
que falte: la foto ES el relleno del rectangulo de fondo de la seccion
(313:2065, 1920x924, object-cover). O sea que en PACK la banda no se
superpone a una foto centrada sino a la seccion entera, y por eso es la
unica donde el texto cae SIEMPRE sobre la fotografia.
Y AHI HAY UN PROBLEMA QUE EL DISENO NO PUEDE HABER VISTO, porque solo
dibujo Amor Lacteo. Las seis tomas de pack NO comparten fondo: tres estan
sobre crema (#d3d1c9 aprox: amor-lacteo, lemonude, bake-my-cherry) y TRES
SOBRE UN ROJO OSCURO (#8d0116 aprox: cherry-on-top, candynude, lickorice).
Los numeros, con la formula de WCAG sobre el color plano y muestreando
ademas los pixeles del fichero debajo de cada rectangulo de texto:
sobre #8d0116 medido en las tres
rojo #e42529 2,14 : 1 1,88 - 2,13
negro #000000 2,15 : 1 2,15 - 2,29
blanco #ffffff 9,77 : 1 9,18 - 9,77
Y NO SON SOLO TRES FICHAS. El titular de 76px, medido ficha a ficha sobre
el fondo que le toca, da 3,23 en amor-lacteo y 3,31 en lemonude -pasan- pero
2,99 en bake-my-cherry y 1,88-1,89 en las tres oscuras: falla el 3:1 en
CUATRO DE LAS SEIS. Y el bloque rojo de la derecha, que es de 26px en
negrita y por tanto tiene el mismo umbral, da 2,73 - 2,96 en las claras y
2,10 - 2,13 en las oscuras: FALLA EN LAS SEIS. El fondo claro no salva al
rojo, solo lo deja mas cerca.
LO QUE SE ARREGLA AQUI Y LO QUE NO. El responsable decidio el 16/09/2026
pasar a blanco los textos DESCRIPTIVOS -la descripcion y el formato- en las
fichas cuyo pack esta sobre fondo oscuro, y dejar los rojos como estan
aunque sigan por debajo del minimo. Es decision suya y expresa: los rojos
NO se tocan. La regla y de donde sale el dato, mas abajo.
Lo que queda sin resolver es el rojo, y no tiene arreglo en esta hoja: no
lo arregla ningun object-fit -la foto es el fondo, no hay encuadre que
elegir- ni la solucion que el disenador uso en PERFUMISTA, porque alli el
que fallaba era el negro y aqui el que falla es el rojo. Otra toma, un velo
o un segundo color de marca son decisiones de marca. Levantado en el
informe de la tarea 4.
EL FONDO DE PIRAMIDE es rgba(217,217,217,0), o sea transparente del todo:
se ve el blanco de la pagina. No se declara nada, y queda escrito aqui
para que el dia que alguien lo mire en Figma y vea un gris no lo pinte.
LAS SECCIONES VAN PEGADAS MENOS UNA. En el lienzo hay 90px entre FRASCO y
PACK, 78 entre PACK y SHOOT, 125 entre SHOOT y PIRAMIDE y 0 entre PIRAMIDE
y PERFUMISTA. Cuatro numeros distintos, ninguno de la escala de espaciado y
con un cero en medio: eso no se implementa como un ritmo, porque no lo es.
La excepcion es SHOOT, y no sale del lienzo sino de una decision del
responsable del 16/09/2026: la foto de SHOOT ocupa el alto entero de su
seccion, asi que llegaba a besar el borde del pack de arriba y las dos
fotografias se tocaban sin nada en medio. Lleva 80px de aire por encima.
Que ese numero se parezca a los 78 del lienzo es una coincidencia util,
no su origen. Las otras tres juntas siguen a hueso hasta que marca diga
otra cosa.
========================================================================== */
/* --- Movil: la foto EN FLUJO, encima de su banda -------------------------
Por debajo de 768 no hay superposicion posible: la banda es de una sola
columna y ocupa el ancho entero, asi que el texto caeria justo encima de
la foto y no se leeria ninguno de los dos. Se apilan: foto y debajo el
texto, que es el orden del marcado.
LA FOTO CONSERVA LA PROPORCION DE UNA CAJA DEL DISENO TAMBIEN AQUI, con
aspect-ratio, y no la del fichero. Lo que cambia es CUAL: el artboard de
movil le da a tres de las cinco una caja distinta de la de 1920 (ver al
pie de esta hoja), asi que las proporciones de aqui abajo son las de
escritorio y se reescriben por debajo de 768. Lo que NO cambia es el
reparto de contain y cover, que es el mismo a 375 que a 1920: el criterio
de recorte es de la fotografia, no de la anchura.
EL height:auto NO SOBRA, Y ES LA LINEA QUE ESTUVO MAL. Sin ella el
aspect-ratio de aqui abajo NO SE APLICA NUNCA, y no da ningun error: el
atributo height del (700, 924, 768, 724, 653) entra como pista de
presentacion y fija el alto en pixeles, asi que entre el width:100% de
esta regla y esa pista las dos dimensiones quedan definidas y el
aspect-ratio se queda sin nada que decidir.
Lo que pasaba medido, y sirve de aviso: a 1440 el frasco salia en una caja
de 525x700 en vez de 525x525 -un 33% mas alta- y SE SALIA 91px por debajo
de su seccion; la piramide se salia 95,5; el retrato del perfumista se
recortaba un 31% por lado en vez del 4% documentado. A 375 las cinco cajas
daban 0,536 / 0,406 / 0,488 / 0,518 / 0,574 de proporcion en vez de
1,000 / 2,078 / 0,800 / 1,000 / 0,732, y el pack ensenaba el 19,5% del
ancho de su foto.
Y SOLO SE VEIA BIEN A 1920 Y POR ENCIMA, que es justo donde el min() de
cada ancho topa y coincide con el atributo. Es la misma linea, y por el
mismo motivo, que ya lleva .col-hero en collections.css.
El height:100% de pack y de shoot, que se declara mas abajo, sigue ganando
a este auto: van despues en la hoja. */
.ficha__foto {
width: 100%;
height: auto;
object-fit: contain; /* el reparto por seccion, justo debajo */
}
/* --- CONTAIN O COVER, SECCION POR SECCION -------------------------------
El criterio es el de /collections y no es el mismo para todas: contain
cuando recortar puede comerse parte del producto, cover cuando el encuadre
da igual. Aqui hace falta decidirlo cinco veces porque la caja del diseno y
la proporcion del fichero solo coinciden en dos de los cinco casos.
FRASCO caja 1,000 (700x700) fichero 0,699 (1105x1581) -> CONTAIN
Es LA foto de producto. Con cover, un frasco de 0,699 metido en un
cuadrado pierde el 30% de su alto: le corta el tapon, que en esta
coleccion es justo lo que distingue una fragancia de otra (la cereza de
Amor Lacteo, el limon de Lemonude). Con contain entra entero, 489x700, y
el aire que sobra no se ve porque estas fotos llevan fondo transparente
-es lo que ya se comprobo en las tarjetas de /collections-. Y es lo que
hace el diseno: el nodo 28:996 tambien esta en contain.
PACK caja 2,078 (1920x924) fichero 2,078 (2400x1155) -> COVER (igual)
Coinciden al tercer decimal: 1920/924 y 2400/1155 son la misma
proporcion, asi que hoy contain y cover pintan exactamente lo mismo. Se
escribe cover porque es lo que dice el diseno y porque es la que se
comporta bien el dia que la seccion cambie de alto: un fondo a sangre
tiene que seguir cubriendo, no dejar dos franjas blancas.
SHOOT caja 0,800 (614x768) fichero 0,558 a 0,800 -> COVER
Las seis tomas de ambiente NO comparten proporcion: amor-lacteo,
bake-my-cherry y lickorice dan 0,800 clavado -coinciden con la caja-, pero
cherry-on-top da 0,747 y candynude y lemonude bajan a 0,562 y 0,558. Con
contain, esas dos ultimas dejarian una franja de fondo del 30% y cada
ficha tendria un hueco de distinto tamano. Es el mismo problema que ya se
resolvio igual en el roll over de las tarjetas (ver collections.css): el
argumento del frasco no aplica porque esto no es una foto de producto
sino una toma de ambiente, y su encuadre es decision del fotografo, no
dato de catalogo. Centrado para las seis; el dia que alguna pida otro
encuadre se le pone su object-position, que es una linea.
PIRAMIDE caja 1,000 (724x724) fichero 1,000 (1200x1200) -> CONTAIN
Tambien coinciden, asi que hoy da igual cual se ponga. Se escribe contain
-y no el cover del diseno- por lo que pasaria si algun dia no
coincidieran: la piramide es un DIBUJO CERRADO, con sus bordes dentro del
cuadro, y la tarea 5 va a colgarle rotulos alrededor. Recortarlo en
silencio se comeria una punta y descuadraria los rotulos; dejarlo entero,
no.
PERFUMISTA caja 0,732 (478x653) fichero 0,796 (1138x1430) -> COVER
El fichero es mas ancho que la caja, asi que cover recorta POR LOS
LADOS -un 4% por cada uno- y no por arriba: el retrato esta centrado y la
cara no corre ningun peligro. Con contain, en cambio, la foto entraria
478x601 y quedarian 52px de burdeos por debajo, o sea el retrato
flotando dentro de un hueco que el diseno fija en 653. Se recorta. */
/* LA CAJA DEL NOMBRE PISA LA CAJA DE LA FOTO, Y AUN ASI NO SE TOCAN.
Medido en un monitor de 1920 de verdad, o sea con 1905 de maquetacion
porque la barra de scroll se lleva 15. El nombre ocupa de 169 a 639, y el
texto mas largo de las seis fragancias -CANDYNUDE, 464,4 de los 470; "BAKE
MY CHERRY" parte en dos lineas cortas y gasta mucho menos- llega hasta
633,4. Contra eso, donde empieza cada foto:
PIRAMIDE 590,5 el nombre entra 42,9 en la caja
FRASCO 602,5 el nombre entra 30,9 en la caja
SHOOT 645,5 12,1px de aire <- EL MAS JUSTO DE LOS CINCO
PERFUMISTA 713,5 80,1px de aire
En FRASCO y en PIRAMIDE las cajas SI se solapan, y aun asi los dibujos no
se tocan, por dos motivos que no estan en esta hoja:
- FRASCO va en contain, asi que un fichero de 0,699 dentro de un cuadrado
de 700 se pinta 489 de ancho y arranca en 708,5. Quedan 75px de aire.
Si esto se pusiera en cover -que es la tentacion de siempre- el frasco
llenaria la caja, empezaria en 602,5 y el nombre le caeria encima. Es
una segunda razon para el contain, ademas de no cortarle el tapon.
- PIRAMIDE va en un cuadrado que si llena, pero el fichero tiene 240 de
sus 1200 pixeles en transparente por la izquierda (medido el alfa en
las seis): a escala son 145px vacios, y el nombre solo entra 43.
OJO CON SHOOT, QUE ES EL QUE MENOS MARGEN TIENE: 12,1px, y al reves que los
dos anteriores no tiene con que absorberlos. Va en cover, o sea que la foto
llena su caja de borde a borde y ahi no hay ni aire de contain ni margen
transparente. Cualquier cosa que ensanche el nombre -un nombre nuevo mas
largo, otra tipografia, un ajuste del cuerpo- se lo come primero a el.
O sea que el margen existe pero lo sostienen tres cosas ajenas al CSS: un
object-fit, el encuadre de un .webp y la longitud de seis nombres propios.
Si alguna llega a cambiar -una piramide reencuadrada, un frasco mas
apaisado, una septima fragancia con un nombre largo- el nombre se sube
encima sin que nada avise. Dicho aqui para quien cambie el material. */
/* --- Los 80px de aire por encima de SHOOT --------------------------------
Decision del responsable del 16/09/2026. SHOOT es la unica seccion cuya
foto ocupa el alto ENTERO -614x768, de borde a borde- asi que llegaba a
besar el pack de arriba, que ademas va a sangre: las dos fotografias se
tocaban sin nada en medio y la ficha se leia como una sola mancha.
VA EN LA SECCION Y NO EN LA FOTO. Metido como hueco dentro de la seccion,
habria que descontarlo del alto y la foto dejaria de medir 768; como
margen, la seccion conserva sus medidas y lo que se separa son las dos
secciones, que es lo que se pidio.
EL CLAMP, y no 80px pelados: el resto de esta hoja escribe cada medida
como "el numero del diseno a 1920 y proporcional por debajo", y un hueco
fijo de 80 en un movil de 375 seria mas de un quinto de lo que mide la
foto que separa. 4,167vw es 80/1920. El suelo de 40 no es deducido: es
--paso-5, el paso de la escala de espaciado del proyecto, y es lo que
evita que en movil el hueco se quede en 15px y no separe nada.
A 1920 y por encima da 80 exactos, que es el numero que se pidio. */
.ficha__seccion--shoot {
margin-top: clamp(var(--paso-5), 4.167vw, 80px);
}
.ficha__foto--frasco { aspect-ratio: 700 / 700; }
.ficha__foto--pack { aspect-ratio: 1920 / 924; object-fit: cover; }
.ficha__foto--shoot { aspect-ratio: 614 / 768; object-fit: cover; }
.ficha__foto--piramide { aspect-ratio: 724 / 724; }
.ficha__foto--perfumista { aspect-ratio: 478 / 653; object-fit: cover; }
/* --- El burdeos de PERFUMISTA, y lo que obliga a repintar ----------------
El unico fondo de color de la ficha. Es exactamente --c-burdeos (#400f17
en el nodo 361:3318, el mismo token que ya usa el texto del sitio).
Y AQUI LA BANDA CAMBIA DE COLOR, que es lo que se ve leyendo la instancia
361:3323 y no se ve mirando el diseno por encima: sobre el burdeos, la
descripcion y el formato dejan de ser negros y pasan a Linen (#f1efe7,
--c-crema). El nombre y el rotulo se quedan en rojo.
NO ES UN CAPRICHO DEL DISENADOR, ES QUE EL NEGRO NO SE VE. Negro sobre
#400f17 da 1,2987:1 de contraste -por debajo de cualquier minimo, y por
debajo de lo que se lee-; crema sobre el mismo fondo da 14,0453:1. El rojo
se queda porque da 3,5385:1 y los dos textos que lo llevan son grandes
(76px, y 26px en negrita, que pasa de los 18,66 que WCAG pide para el
umbral de 3:1). Los tres numeros van con sus decimales a proposito: el del
rojo pasa por 35 milesimas, asi que redondearlo a "3,55" -como estuvo
escrito- hace que parezca que sobra margen cuando no sobra ninguno.
Se escribe como una regla de la SECCION y no como una variante de la banda
porque lo que cambia el color no es la banda: es el fondo que tiene detras.
Si manana otra seccion se pintara de oscuro, la regla se copia aqui y la
banda no se entera.
ESTA SI VALE A CUALQUIER ANCHURA, al reves que la del pack de mas abajo:
lo que hay detras del texto es el FONDO de la seccion, que es burdeos
tambien en movil. */
.ficha__seccion--perfumista {
background: var(--c-burdeos);
}
/* OJO (29/09/2026): ESTA REGLA YA NO ALCANZA NADA QUE SE VEA, y se deja
escrita a proposito. Pinta la banda que vive DENTRO de la seccion, y esas
cinco bandas estan escondidas desde que la ficha ensena una sola banda
pegada: en anchos grandes desde el 28/09 y en movil desde el 29/09. La
que se ve esta fuera de las secciones.
Lo que hoy aclara el texto sobre el burdeos esta al final de esta hoja
(.ficha__fija[data-fondo="perfumista"]) y reusa este mismo color. Esto se
queda porque es donde esta escrito el porque -el contraste- y porque
vuelve a valer sola el dia que la banda regrese a su seccion. */
.ficha__seccion--perfumista .banda__claim,
.ficha__seccion--perfumista .banda__formato {
color: var(--c-crema);
}
/* --- Y lo mismo en PACK, pero solo donde la foto es oscura ---------------
Decision del responsable del 16/09/2026: en las fichas cuyo pack esta
fotografiado sobre el rojo oscuro, la descripcion y el formato pasan a
BLANCO. Negro sobre ese fondo da 2,15:1 y no se lee; blanco da 9,77:1, que
pasa incluso el umbral de texto pequeno (4,5:1).
LOS TEXTOS ROJOS NO SE TOCAN, y es decision expresa suya aunque el rojo
siga por debajo del minimo ahi (2,14:1). No es un olvido de esta hoja: el
nombre y el rotulo son color de marca y cambiarlos es otra conversacion.
CUAL ES OSCURA NO SE DECIDE AQUI. La clase la pone producto.php leyendo
'pack_fondo' de inc/products.php. Escribir aqui los tres slugs habria sido
mas corto y habria puesto un dato de catalogo -sobre que fondo se
fotografio un pack- dentro de una hoja de estilo, donde nadie lo va a
buscar el dia que se cambie la fotografia.
POR QUE NO SE JUNTA CON LA REGLA DE PERFUMISTA DE AQUI ARRIBA, que hace
algo parecido: no es lo mismo y no conviene que lo parezca. Alli el color
es CREMA porque el diseno lo dice -esta en la instancia 361:3323- y es una
decision de composicion. Aqui es BLANCO porque una fotografia salio oscura
y hubo que corregir. Una sola regla con los dos casos dentro dejaria de
contar de donde viene cada color, y el dia que marca revise uno no se
sabria si el otro iba incluido.
Y VA DENTRO DE UN @media, QUE ES LA OTRA MITAD DEL ARREGLO. Esta regla
nacio pensando en la superposicion, que solo existe de 768 para arriba:
por debajo la foto va en flujo y la banda cae DEBAJO, sobre el blanco de
la pagina. Suelta, o sea a cualquier anchura, pintaba la descripcion y el
formato de blanco sobre blanco en las tres fichas de pack oscuro
-cherry-on-top, candynude y lickorice- y el texto desaparecia entero en
movil. Encontrado al maquetar el artboard de 375 el 16/09/2026. */
/* MISMO AVISO QUE EN LA DEL PERFUMISTA (29/09/2026): esta regla pinta la
banda de dentro de la seccion, que ya no se ve. Lo que hoy aclara el
texto sobre el pack oscuro esta al final de esta hoja
(.ficha__fija[data-fondo="pack"]), de 1280 en adelante y reusando este
mismo color. */
@media (min-width: 768px) {
.ficha__seccion--pack-oscuro .banda__claim,
.ficha__seccion--pack-oscuro .banda__formato {
color: var(--c-blanco);
}
}
/* --- De 768 en adelante: la banda se superpone a la foto -----------------
Aqui entra la composicion del diseno. La seccion pasa a ser el marco -con
el alto que le da el diseno- la foto sale del flujo y se coloca donde va, y
la banda queda como unico hijo en flujo, centrado en vertical.
POR QUE LA SECCION CENTRA SU BANDA, y no es un detalle de gusto: la banda
mide 852 de alto y la seccion 924, asi que sobran 72. Dejandolos abajo (que
es lo que pasa sin centrar) el bloque de la derecha cae a 422px del borde
superior; centrando, a 458, que es EXACTAMENTE donde lo dibujo el diseno.
Los 36px de diferencia son la mitad de lo que sobra, y en SHOOT, donde no
sobra nada, el mismo centrado da 380 contra los 380 del diseno. O sea que
una sola regla reproduce las dos.
min-height Y NO height: si algun dia el texto de una fragancia creciera
-una descripcion mas larga, otro idioma-, con height fijo se saldria de la
seccion y se montaria sobre la siguiente. Con min-height la seccion crece y
no se rompe nada. Que hoy nunca crezca es lo deseable, no algo en lo que
apoyarse. */
@media (min-width: 768px) {
.ficha__seccion {
position: relative; /* el marco contra el que se coloca la foto */
display: flex;
flex-direction: column;
justify-content: center;
}
/* 924/1920 y 768/1920. Por debajo de 1920 encogen en proporcion y por
encima topan, igual que todas las medidas de esta hoja. */
.ficha__seccion--frasco,
.ficha__seccion--pack,
.ficha__seccion--piramide,
.ficha__seccion--perfumista {
min-height: min(48.125vw, 924px); /* 924 a 1920 */
}
.ficha__seccion--shoot {
min-height: min(40vw, 768px); /* 768 a 1920 */
}
/* La banda se pinta ENCIMA de la foto. El z-index hace falta de verdad y no
es precaucion: un es un elemento reemplazado y se pinta en una capa
posterior a los fondos de bloque, asi que sin esto el orden entre la foto
de PACK -que cubre la seccion entera- y el texto queda en manos del
navegador. Es la misma trampa que el titular de /collections.
EL width:100% NO SOBRA, aunque lo parezca. La banda ya traia
max-width + margin-inline:auto y en flujo normal eso la dejaba a todo el
ancho; convertida en hijo de un flex en columna, deja de estarlo: un
margen AUTO en el eje transversal cancela el estirado por defecto
(align-items: stretch), asi que la banda se encogia a su contenido -1188
de 1905, medido- y los dos bloques se juntaban en el centro en vez de
irse a los extremos. Con un ancho declarado, el max-width vuelve a tener
de que recortar y el margen automatico vuelve a centrar. */
.banda {
position: relative;
z-index: 1;
width: 100%;
}
/* LA FOTO, FUERA DEL FLUJO. Centrada en horizontal con left/right a cero y
margin-inline:auto -las cinco lo estan en el diseno- y no con un
translate: con un ancho definido esto es la forma estandar de centrar un
absoluto y no gasta una transformacion que luego estorbe.
El desplazamiento vertical va en numeros del diseno y no en un centrado,
porque solo FRASCO esta centrado: PIRAMIDE cae a 86 del borde (86 arriba,
114 abajo) y PERFUMISTA a 40, que es donde tiene que estar para que debajo
quepan la firma y la biografia que traera la tarea 6. */
.ficha__foto {
position: absolute;
left: 0;
right: 0;
margin-inline: auto;
}
.ficha__foto--frasco {
top: min(5.833vw, 112px); /* (924-700)/2: centrada */
width: min(36.458vw, 700px); /* 700 a 1920 */
}
/* A sangre: es el fondo de la seccion, no una foto colocada dentro. */
.ficha__foto--pack {
inset: 0;
width: 100%;
height: 100%;
}
/* Alto entero de la seccion. Se escribe height:100% y no se deja que lo
ponga el aspect-ratio (614/768 daria el mismo numero a 1920) para que
siga cubriendo si la seccion crece: en SHOOT la foto ES el alto de la
seccion, y una franja blanca arriba o abajo seria justo lo que el diseno
no tiene. */
.ficha__foto--shoot {
top: 0;
height: 100%;
width: min(31.979vw, 614px); /* 614 a 1920 */
}
.ficha__foto--piramide {
top: min(4.479vw, 86px); /* 86 a 1920 */
width: min(37.708vw, 724px); /* 724 a 1920 */
}
.ficha__foto--perfumista {
top: min(2.083vw, 40px); /* 40 a 1920 */
width: min(24.896vw, 478px); /* 478 a 1920 */
}
/* --- SHOOT NO CABE, y esta es la decision ------------------------------
La banda tiene un suelo de 184 + 524 + 144 = 852px a 1920 (medido por la
tarea 3: 851,98). FRASCO, PACK, PIRAMIDE y PERFUMISTA miden 924 y les
sobra; SHOOT mide 768 y la banda lo empujaria hasta 852, un 11% mas alto
que el diseno.
Habia tres salidas: que SHOOT creciera a 852, que la banda se comprimiera
ahi, o que el marco de 524 dejara de ser fijo. Se comprime la banda, y
los motivos son estos:
1. EN SHOOT LA FOTO ES EL ALTO DE LA SECCION. Es la unica de las cinco
que toca los dos bordes: 614x768, de arriba abajo. Si la seccion crece
a 852, la foto crece con ella y su caja pasa de 0,800 a 0,720 de
proporcion, o sea que se recorta mas de lo que el fotografo encuadro.
En las otras cuatro la foto flota dentro de la seccion y el alto de
esta no le afecta; aqui si.
2. ES LO QUE HIZO EL DISENADOR. La instancia de la banda en SHOOT
(167:1572) no mide 924 sino 733,9: la aplasto. En Figma una instancia
se encoge y su contenido se sale; en CSS hay que decir cuanto.
3. LO QUE SE COMPRIME NO ES CONTENIDO, ES AIRE. Los 524 del marco
derecho son en su mayor parte el hueco de los dos iconos que se
quitaron (ver .banda__info): dentro solo hay 124px de texto. Apretar
aire cuesta poco; recortar mas una fotografia, no.
EL FACTOR ES 768/852 = 0,9014, y se aplica a las cuatro medidas
verticales de la banda a la vez -los dos paddings, el aire del bloque
derecho y su marco-. Aplicarlo a todas y no solo a una es lo que mantiene
la composicion: el bloque derecho se coloca a (marco/2 - aire) del centro,
asi que escalar marco y aire por el mismo numero deja ese desplazamiento
casi igual (24px pasan a 21,6). Medido contra el diseno: el texto de la
derecha cae a 380,4 del borde de la seccion y el diseno lo pone en 380.
No lleva la escala el padding LATERAL: lo que no cabe es el alto. */
.ficha__seccion--shoot .banda {
--banda-escala: 0.9014; /* 768 / 852 */
}
}
/* ==========================================================================
LA PIRAMIDE OLFATIVA
--------------------------------------------------------------------------
Nodo 361:3374. La seccion PIRAMIDE es la unica que lleva una composicion
encima de su foto: cuatro marcos de esquina que enmarcan la seccion, tres
rotulos con sus notas y tres flechas curvas que salen del frasco hacia
cada rotulo. El responsable adjunto el render de CHERRY ON TOP y pidio
que quede exactamente asi.
LAS FLECHAS SON TRAZADOS SVG DEL DISENO, NO UN DIBUJO A OJO. Salen de los
nodos 396:1230 (a Top), 396:1227 (a Middle) y 396:1239 (a Dry-down), que
en el arbol de capas se llaman "Recurso 2/1/5" y estan puestos donde la
especificacion decia que habia ilustraciones de ingrediente. No las hay:
al abrir los tres nodos lo que sale son las tres flechas, y no queda
ningun otro vector en la seccion. Se exportaron con su giro ya aplicado
(47,58 / 92,33 / 23,80 grados), asi que aqui no hay ni una transformada:
cada fichero se pinta en su caja y cae donde el diseno lo puso.
LOS TRES SON COMUNES A LAS SEIS FICHAS, igual que el marco de esquina.
La especificacion decia que eran por fragancia -o sea dieciocho
ficheros-; se comparo el mismo nodo entre Amor Lacteo (396:1227) y Cherry
on Top (396:1324) y son identicos byte a byte. Por eso viven en
assets/img/producto/ y no en la carpeta de cada fragancia.
EL ROJO DE LOS MARCOS SE NORMALIZO. El vector trae #E52629 y el color de
marca del proyecto es #E42529 (--c-rojo, "Rancid Red", que es ademas el
que el propio diseno declara como estilo). Un digito de diferencia, que
nadie ve, pero dos rojos casi iguales conviviendo en la misma pagina es
como empiezan las paletas que ya no se pueden ordenar. Se cambio en el
fichero SVG.
POR QUE LOS DIBUJOS VAN EN ESTA HOJA Y NO EN EL MARCADO. No dicen nada
que el texto no diga -son el marco del cuadro y unas flechas que apuntan-
asi que su sitio es el CSS. Ademas la ficha tiene dos aserciones que un