/* ═══════════════════════════════════════════════════════════════════════ RELIC — EL ENCUADRE DE LA FICHA Dónde cae el botón de comprar, y qué se lee sin bajar. POR QUÉ EXISTE ESTA HOJA ------------------------ Hoy, 19-08-2026, hay cuatro procesos escribiendo esta ficha a la vez: uno unifica el color del suelo de las cajas, otro rehace los filtros de /tienda, otro recompone los dibujos y otro porta el configurador de eclipseando. `estilo.css`, `venta.css` y `galeria.css` ya tienen dueño y escribir en las tres a cuatro manos pierde reglas —ya ha pasado hoy—. Aquí sólo va lo MÍO y sólo de una página: ALTURA y COLOCACIÓN. Ni un color, ni una tipografía, ni un borde: eso es de las otras tres hojas. Se carga la última de todas (ver el bloque `hoja_pagina` de pieza.html) para que, a igualdad de peso, gane la que conoce las medidas nuevas. EL ENCARGO, LITERAL ------------------- Del dueño, 19-08-2026: «El botón de añadir y comprar está muy abajo.» LO QUE HABÍA, MEDIDO (borde superior de «Comprar ahora», píxeles desde arriba del documento, las seis familias, con Playwright): 1440x900 390x844 camiseta 1.459 1.963 camiseta mujer 1.335 1.926 sudadera 1.352 1.878 capucha 1.287 1.881 taza 1.353 1.944 lámina 1.217 1.765 El pliegue está en 900 y en 844. O sea: entre 317 y 559 px de recorrido en escritorio y entre 921 y 1.119 en el móvil, sólo para VER el botón. La barra fija de abajo lo salvaba a medias, pero la ficha no lo enseñaba donde se decide. QUÉ BAJA (y no se borra: baja) ------------------------------ · la tira de 21 diseños ...... 315 px — a detrás del botón (pieza.html) · la línea de fábrica ........ 92 px — a detrás del botón (pieza.html) · el pie de la galería ....... 64 px — al bloque de detalle (pieza.html) · el nombre del país repetido. 30 px — lo dice sólo el del destino no se encoge por debajo de su opción más larga: se le deja encogerse y cortar con puntos suspensivos. El nombre entero sigue en la lista al desplegarla. */ .pieza-detalle .envio-pais{min-width:0; max-width:100%} .pieza-detalle .envio-pais select{max-width:100%; text-overflow:ellipsis} /* ── 7 · LA ETIQUETA DE LA OBRA, EN UN RENGLÓN EN EL MÓVIL ────────────── «PALEONTOLOGÍA Y DINOSAURIOS (CIENCIA, DOMINIO PÚBLICO)» más el sello son 55 px en dos renglones a 390 px de ancho. El sello NO se toca —es el argumento de la casa y va entero—; lo que se recorta con puntos suspensivos es el nombre de la obra, que además va escrito con todas sus letras dos veces más abajo en la ficha (en la miga de pan y en el bloque de procedencia). Un renglón: 27 px menos justo antes de la foto. */ @media (max-width:767.98px){ .ficha-cabecera .etiqueta{flex-wrap:nowrap; gap:.45rem} .ficha-cabecera .etiqueta-obra{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ficha-cabecera .sello-dp{flex:none} } /* ── 8 · LA MARQUESINA, FUERA DE LA FICHA EN EL MÓVIL ─────────────────── La cinta que corre bajo la cabecera —«Diseñado por nosotros · Impreso en la Unión Europea · Cada pieza con su procedencia · Dominio público, no fan art · Entrega en 3-4 días · 14 días para devolver»— mide 50 px y es DECORATIVA: lleva `aria-hidden="true"`, o sea que ni siquiera se lee en voz alta. En la portada y en la tienda hace su trabajo, que es prometer antes de que preguntes. En la ficha, no: las seis promesas están dichas otra vez y con más detalle dentro de la propia página —el sello de dominio público en la cabecera, el «impreso en la Unión Europea» en la línea de fábrica, el plazo pegado al precio, los 14 días en la lista de garantías y la procedencia en su propio bloque—. Repetirlas cuesta 50 px de la única pantalla donde se decide pagar, y en un móvil de 844 px eso es el 6 % del alto. Se quita SÓLO en la ficha (`:has(.pieza-detalle)`) y SÓLO por debajo de 768 px. En escritorio sobra sitio y se queda. */ @media (max-width:767.98px){ body:has(.pieza-detalle) .marquesina{display:none} } /* ── 9 · LA FOTO DEL MÓVIL: 200 px ────────────────────────────────────── La cuenta completa a 390x844, con todo lo de arriba ya aplicado y la barra fija tapando los 116 px de abajo (o sea 728 px de pantalla útil): 119 cabecera del sitio 31 miga de pan 20 etiqueta con el sello de dominio público 56 h1 (dos renglones: el diseño, y la prenda a media voz) 200 la foto ← esto 66 las miniaturas --- ~500 antes del primer dato de la compra Por debajo de 200 px la camiseta deja de leerse: el estampado, que es lo que se vende, baja de 120 px de lado. Es el suelo, y por eso se para aquí y lo que falta lo pone el recorrido —una sola pasada de dedo— y la barra fija, que lleva el botón que cobra pegado a la pantalla desde el píxel 0. */ @media (max-width:767.98px){ .pieza-detalle .galeria-principal{height:200px} } /* ── 10 · LOS ÚLTIMOS 40 PÍXELES ──────────────────────────────────────── Con todo lo anterior puesto, «Comprar ahora» caía en el píxel 874 a 1440x900: el borde de arriba se veía y el resto quedaba justo por debajo del pliegue. Estos recortes no quitan nada, sólo aire repetido: · el filete de la cantidad respiraba 12 px arriba y 12 abajo cuando el resto de bloques de la caja respiran 9; · «Color» y «Talla» llevaban 8 px por encima y 4 por debajo dentro de un paso que ya está separado del anterior por el hueco de la rejilla; · el borde interior de la caja, 16 px por los cuatro lados, es el del molde a 23 rem de ancho; a 21 rem sobra un punto. */ @media (min-width:768px){ .pieza-detalle .caja{padding:.9rem} .pieza-detalle .caja-cantidad{padding-top:.55rem} .pieza-detalle .paso-rotulo{margin:.35rem 0 .2rem} .pieza-detalle .tira-disenos{padding:.35rem 0} } /* Y los últimos: el aire de la cabecera de la ficha y el de entre bloques del formulario. Con esto «Comprar ahora» entra entero en 1440x900 con la barra fija ya retirada —que es lo que pasa en cuanto el botón de verdad asoma: la barra se esconde sola y no tapa nada—. */ .miga{padding-top:10px} .ficha-cabecera{margin-bottom:.5rem} @media (min-width:768px){ .pieza-detalle .comprar{gap:.6rem} }