/* ═══════════════════════════════════════════════════════════════════════
LA GALERÍA DE LA FICHA. Su propia hoja, y sólo la carga /pieza/.
VA APARTE POR LO MISMO QUE venta.css Y tema.css: estilo.css lo está
reescribiendo otro proceso y dos manos en el mismo fichero pierden reglas.
Y va LA ÚLTIMA de las cuatro, porque para ganarle a `.galeria-tiras .tira`
de venta.css —misma especificidad— hay que leerse después.
LO QUE ARREGLA, medido con Playwright el 19-08-2026 a 1440x1000 y 390x844
contra la ficha de eclipseando:
1. LA TIRA ESTABA FUERA DE PANTALLA EN ESCRITORIO. La caja de la foto
llevaba `aspect-ratio:5/6` sobre una columna de 680 px, o sea 825 px de
alto: la galería empezaba en el píxel 184 y las miniaturas caían en el
1.073, con la ventana acabada en el 1.000. Quien no baja no sabe que la
camiseta tiene cuatro colores ni que hay una foto del cartel. Aquí la
caja pasa a `min(56vh, 600px)`: la tira entera y su pie caben en la
primera pantalla desde 800 px de alto para arriba.
La foto NO se ve más pequeña por eso: dentro de la caja se pinta a unos
516 px, contra los 454 px de eclipseando.
2. LAS MINIATURAS NO DECÍAN QUÉ COLOR ERAN. Cuatro cuadros de 60 px sin
rótulo, y tres de los colores del catálogo —arena, blanco, gris— son la
misma mancha clara a ese tamaño. Eclipseando escribe el nombre debajo de
cada una y por eso su tira se lee de un vistazo. Ahora ésta también.
En móvil no: allí la tira es un carril que se arrastra con el dedo y la
altura de la galería está cerrada en 458 px por venta.css. El nombre del
color se sigue leyendo en el rótulo del selector, cuatro dedos más abajo.
3. LA MINIATURA DE LA PROCEDENCIA SE LEÍA COMO UN FALLO. Un cartel vertical
recortado, metido en la misma fila que cuatro camisetas cuadradas y sin
nada que dijera que no es otro color a la venta. Ahora va separada por un
filete y con su nombre debajo —«El cartel», «La estampa», «La portada»—.
═══════════════════════════════════════════════════════════════════════ */
/* ── la caja de la foto grande ─────────────────────────────────────── */
@media (min-width:701px){
/* `aspect-ratio:auto` es obligatorio: sin él la razón de aspecto y la altura
se pelean y gana la que quiera el navegador. La altura manda porque lo que
hay que garantizar es que la tira quepa debajo, no que la caja sea bonita.
56vh y no una altura fija para que en un portátil de 800 px la tira siga
entrando: 448 + 12 + 102 + 12 + 38 = 612 px de galería, sobre 616 de sitio. */
.galeria-principal{aspect-ratio:auto; height:min(56vh,600px)}
.galeria-principal img{width:100%; height:100%; object-fit:contain}
.galeria-tiras{flex-wrap:wrap; align-items:flex-start}
}
/* ── la tira ───────────────────────────────────────────────────────── */
/* La miniatura deja de ser el botón entero y pasa a ser `.tira-caja` dentro
del botón. Hace falta para poder colgar el rótulo debajo sin que entre en el
`aspect-ratio` de la casilla: si el nombre estuviera dentro de la caja de
5/6, la foto se aplastaría un 20 % en cuanto el color se llamara «antracita».
El botón se queda sin filete ni fondo propios; los lleva la caja. */
.galeria-tiras{display:flex; gap:10px}
/* `overflow:visible` HACE FALTA, y costó una muestra descubrirlo: estilo.css le
pone `overflow:hidden` al botón —lo necesitaba cuando el botón ERA la
miniatura—, y con el recorte puesto el filete separador de la procedencia,
que se dibuja 8 px a la izquierda del botón, se pintaba y no se veía. El
recorte que sí hace falta es el de la foto, y ése está en `.tira-caja`. */
.galeria-tiras .tira{
width:70px; padding:0; border:0; background:none; aspect-ratio:auto;
display:flex; flex-direction:column; gap:5px; cursor:pointer;
overflow:visible;
}
.galeria-tiras .tira .tira-caja{
display:grid; place-items:center; width:100%; aspect-ratio:5/6;
border:1px solid var(--borde); background:var(--suelo); padding:4px;
overflow:hidden; transition:border-color .15s;
}
.galeria-tiras .tira img{width:100%; height:100%; object-fit:contain; display:block}
/* EL SUELO DE LA MINIATURA ES EL DE TODA LA CASA, Y YA NO EL DE SU COLOR.
Aquí había dos líneas que lo cambiaban por miniatura (`.suelo--claro` /
`.suelo--oscuro`, movidas por fondo-prenda.js) y eran el mismo ajedrez del
que se quejó el dueño en /tienda, en pequeño: la fila de colores de una
ficha se pintaba mitad crema mitad grafito. Ahora la fila es una sola tira
de cartón y lo que recorta la camiseta blanca es --recorte-prenda-mini,
que va sobre la imagen (tema.css, bloque 4).
Ojo con lo que había antes de todo esto: `--sala-2` es casi blanco en tema
claro y una camiseta blanca daba ahí 1,12:1. El crema no arregla ESO por
contraste (1,16:1); lo arregla la sombra de silueta. */
/* LO QUE NO ES UN COLOR VA DESPUÉS DEL FILETE. La fila de colores es la
elección —«¿cuál me compro?»— y todo lo demás son fotos de la misma pieza:
el estampado de cerca y el cartel del que sale el diseño. Un separador y un
hueco es todo lo que hace falta para que no se lean como dos colores más.
`[hidden]` HACE FALTA CON `!important` DE HECHO NO, PERO SÍ CON MÁS PESO:
`.galeria-tiras .tira` le pone `display:flex` al botón, así que el `hidden`
del HTML —que en la hoja del navegador es `display:none` a secas— pierde. Y
sin esta línea las escenas de los otros tres colores se pintan todas. */
.galeria-tiras .tira[hidden]{display:none}
.galeria-tiras .tira--aparte{margin-left:14px; position:relative}
.galeria-tiras .tira--procedencia .tira-caja{background:var(--sala-3); padding:0}
/* La procedencia va a sangre: un cartel recortado dentro de su casilla se
reconoce; encajado con bandas, no. La escena NO: su encuadre es el que
compuso el guion y recortarlo otra vez se come el estampado. */
.galeria-tiras .tira--procedencia img{object-fit:cover}
/* El filete separador va en `--borde-vivo` y no en `--borde`: el segundo está
a 1,51:1 y en la pantalla no se ve —se probó y la separación la hacía sólo
el hueco—. `--borde-vivo` es el filete de mando de la paleta, 3,20:1, que es
el mínimo de WCAG 1.4.11 para un elemento que significa algo. */
.galeria-tiras .tira--aparte::before{
content:""; position:absolute; left:-8px; top:2px; bottom:18px;
border-left:1px solid var(--borde-vivo);
}
/* UN SOLO FILETE, EL PRIMERO. Con el estampado de cerca en la tira hay dos
casillas «aparte» —la escena y el cartel— y dos filetes seguidos parten la
fila en tres trozos de uno. El que va detrás de otra casilla aparte que SE
VE pierde el suyo; las escondidas no cuentan, que son las de los colores que
no están elegidos y podrían dejar la fila sin ningún separador. */
.galeria-tiras .tira--aparte:not([hidden]) ~ .tira--aparte::before{display:none}
.galeria-tiras .tira:hover .tira-caja{border-color:var(--borde-vivo)}
/* EL FILETE DE LA ELEGIDA VA EN `--haz`, EL ÁMBAR DE LA CASA, y no en la tinta
del texto. Con `--luz` (#14120E) la miniatura elegida de una lámina no se
distinguía: su suelo es el oscuro (#17151A) y el filete desaparecía dentro
—se vio en la muestra—. El ámbar recorta sobre los dos suelos, que son los
únicos dos fondos que puede haber aquí, y además es el color con el que esta
tienda dice «esto es lo que has elegido» en las tallas y en el botón.
El filete engorda de 1 a 2 px y la caja se come ese píxel de relleno: sin
eso la foto saltaría 1 px al cambiar de miniatura. */
.galeria-tiras .tira.activa .tira-caja{border:2px solid var(--haz); padding:3px}
.galeria-tiras .tira.activa.tira--procedencia .tira-caja{padding:0}
.galeria-tiras .tira:focus-visible .tira-caja{outline:2px solid var(--haz);
outline-offset:2px}
/* ── el nombre debajo de la miniatura ──────────────────────────────── */
.tira-rotulo{
display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
color:var(--luz-3); text-align:center; line-height:1.2;
/* Un color largo —«antracita»— no puede ensanchar la casilla ni partirse en
dos líneas: eso descuadraría la fila entera. Se recorta con puntos. */
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* `--luz` y NO `--tinta`. Medido: el rótulo de la miniatura elegida salía en
rgb(255,255,255) sobre el fondo claro de la ficha, o sea invisible —la tira
se pintaba con «MARINO ARENA BLANCO EL CARTEL» y un hueco donde tenía que
poner «NEGRO»—. En esta paleta `--tinta` es la tinta que va SOBRE `--papel`,
que es el chip invertido; el color del texto normal es `--luz`, que es lo
que usa `body`. */
.galeria-tiras .tira.activa .tira-rotulo{color:var(--luz)}
/* ── móvil ─────────────────────────────────────────────────────────── */
/* El carril horizontal lo monta venta.css; aquí sólo se repite lo que esta
hoja acaba de pisar (va después, así que gana) y se quita el rótulo, que en
458 px de presupuesto no cabe. */
@media (max-width:700px){
.galeria-tiras{gap:8px}
.galeria-tiras .tira{flex:0 0 auto; width:62px; scroll-snap-align:start; gap:0}
.tira-rotulo{display:none}
.galeria-tiras .tira--aparte{margin-left:12px}
.galeria-tiras .tira--aparte::before{bottom:2px; left:-7px}
}
/* ═══════════════════════════════════════════════════════════════════════
EL ENCUADRE DE LA FOTO GRANDE: «EL DISEÑO SE CORTA»
QUEJA DEL DUEÑO, 19-08-2026: en /pieza/ars-goetia-sudadera, …-capucha y
…-lamina la prenda sale recortada por abajo y el estampado queda partido.
POR QUÉ PASABA, medido con Playwright a 1440x1000 y a 390x844 (las cifras
son de la sudadera, y salían idénticas en las 8 piezas que se probaron):
caja .galeria-principal 725,8 x 560 overflow:hidden
foto ![]()
679,8 x 679,8 object-fit:contain
→ 119,8 px de imagen fuera de la caja, 142,8 px cortados POR ABAJO.
En móvil: caja 354x300, foto 332x332, 43 px cortados por abajo.
Y NO ERA `cover` EN NINGÚN SITIO, NI LA FOTO DE ORIGEN. El PNG es
2000x2000 con la prenda dentro (recuadro de tinta 71..1939 en la sudadera):
entra entera y con margen. El `object-fit:contain` también estaba puesto y
ganaba la cascada. Lo que se salía de la caja NO era el DIBUJO dentro del
![]()
: era la CAJA DEL PROPIO ![]()
.
LA CAUSA, y es una trampa de CSS Grid que no da ningún error:
· `.galeria-principal` es `display:grid; place-items:center` (estilo.css)
con altura fija —`min(56vh,600px)` aquí arriba, `300px` en venta.css—
y `overflow:hidden`.
· No declaraba NINGUNA pista, así que el ![]()
caía en una fila
IMPLÍCITA de tamaño `auto`.
· El `height:100%` del ![]()
es entonces un PORCENTAJE CÍCLICO: para
medir la fila hace falta el alto del hijo, y para el alto del hijo hace
falta la fila. El navegador rompe el bucle tratando ese 100 % como
`auto`, o sea la altura NATURAL de la foto: cuadrada y tan alta como
ancha es la caja → 679,75 px.
· Una pista `auto` sólo puede ESTIRARSE, nunca encogerse: la fila se
quedó en 679,75 dentro de una caja de 560 y `overflow:hidden` cortó el
bajo de la prenda.
· `object-fit:contain` no llegó a pintar nunca: sólo coloca el dibujo
DENTRO del ![]()
, y aquí lo que desbordaba era el ![]()
entero.
EL ARREGLO ES DECLARAR LA PISTA. Con `minmax(0,1fr)` sobre una caja de
altura definida la fila pasa a ser DEFINIDA, el `height:100%` del ![]()
ya
resuelve contra ella, y `contain` hace por fin su trabajo: la pieza entera,
centrada, sobre el mismo crema. El `minmax(0,…)` es obligatorio —un `1fr`
a secas lleva un suelo de `min-content` que es justo el alto natural de la
foto y devolvería el desbordamiento—.
POR QUÉ NO SE ARREGLA CAMBIANDO LA CAJA A CUADRADA: las fotos de la
galería NO son todas cuadradas. Los mockups sí (2000x2000), pero las
escenas compuestas con Pillow son 1400x1750 (4/5). Una caja cuadrada
volvería a cortar en cuanto entrara una escena vertical. Una caja de alto
fijo + `contain` de verdad aguanta cualquier proporción.
Y NO SE TOCA EL ALTO DE 56vh: está medido para que la tira de miniaturas y
su pie quepan en la primera pantalla desde 800 px de alto (ver la cabecera
de esta hoja). Lo que sí se recorta es el relleno, que era de 22 px sobre
una caja donde el alto es el lado que manda: cada píxel de relleno se
descuenta dos veces del tamaño al que se pinta la prenda, y el PNG ya trae
entre un 3,5 y un 5 % de aire pintado dentro. A 8 px la prenda se pinta a
542 px enteros, contra los 454 de la ficha de eclipseando.
═══════════════════════════════════════════════════════════════════════ */
.galeria-principal{
grid-template-columns:minmax(0,1fr);
grid-template-rows:minmax(0,1fr);
padding:8px;
}
/* `> img` y no `img`: en la caja no hay nada más, y si mañana entra un rótulo
o una lupa encima de la foto, esta regla no se lo lleva por delante. */
.galeria-principal > img,
.galeria-principal > svg{
width:100%; height:100%; min-width:0; min-height:0;
object-fit:contain; object-position:center;
}
/* MÓVIL: EL RELLENO SÍ, LA ALTURA NO. venta.css cierra la caja en 300 px y
10 de relleno. Con el `contain` ya funcionando eso deja la prenda en 278 px
enteros, y bajando el relleno a 6 se queda en 286.
SE PROBÓ SUBIR LA CAJA A 330 —la ficha de eclipseando pinta 332 en este
mismo teléfono— Y SE DESHIZO. Medido a 390x844 con la caja en 330: el
precio arrancaba en el píxel 852 y la ventana acaba en el 844, o sea que
entrar en la ficha dejaba de enseñar cuánto cuesta. Con la caja en 300
arranca en el 822 y se lee. 36 px de prenda no valen el precio: quien no ve
el precio no baja a buscarlo.
Y que quede dicho para el siguiente que pase por aquí: los 43 px que se
cortaban en móvil NO eran altura que se pudiera recuperar. La caja medía
300 px antes y mide 300 ahora; lo que sobraba se pintaba fuera y se tiraba.
Arreglar el recorte no ha movido ni un píxel de lo que hay debajo. */
@media (max-width:700px){
.galeria-principal{padding:6px}
}
/* ═══════════════════════════════════════════════════════════════════════
PORTE DE ECLIPSEANDO — LA FICHA DE PRODUCTO
Bloque del agente «ficha». Va al final de galeria.css, que es la única
hoja que sólo carga /pieza/ y la última de las cuatro: a igualdad de peso
gana, no pisa una regla de nadie y se puede borrar entero sin agujeros.
Origen: web/src/components/tienda/FichaMerch.astro (armazón),
ConfiguradorProducto.astro (la caja de compra y la barra fija),
GaleriaViva.astro (la galería) y Relacionados.astro, de
/Users/victorgomez/Code/eclipse-2026 — en producción en
https://eclipseando.es/tienda/merch/… Los valores están medidos con
getComputedStyle sobre la página publicada, no leídos del fichero.
── LO QUE ARREGLA ───────────────────────────────────────────────────
1. EL BOTÓN DE COMPRAR ESTABA MUY ABAJO. La columna de compra no era una
caja: era una lista suelta que se acababa donde se acababa. Medido a
1440×900 antes de esto, «Comprar ahora» caía en el píxel 970 y no
volvía a verse nunca. En eclipseando la caja es blanca, con filo, con
sombra y PEGADA (`position:sticky; top:4.75rem`): el botón acompaña al
lector. Aquí igual — y la plantilla ha bajado la ficha técnica, las
medidas y las preguntas a la columna izquierda, que es lo que le da
recorrido al `sticky`.
2. LA CAJA DE LA FOTO ERA CREMA. Orden literal del dueño: blanca. Lo que
separa a una prenda clara del blanco no es el fondo, es
--recorte-prenda, que tema.css ya le pone a esta misma imagen.
3. LOS RÓTULOS ERAN «— COLOR NEGRO / — TALLA / — CANTIDAD» en mono con
filete: tres secciones sueltas. En el molde son PASOS NUMERADOS con un
círculo ámbar, que es lo que dice que hay que hacer tres cosas y en qué
orden.
4. FALTABA LA TIRA DE DISEÑOS. En eclipseando es el paso 2 de la caja y
está encima del precio; aquí sólo se contestaba «¿qué otros dibujos
hay?» bajando hasta el carrusel del pie.
5. EL PRECIO ERA UN CARTEL ÁMBAR RELLENO (`.precio--bloque`) del mismo
color que los botones. Pasa a serif de 2 rem en tinta y el ámbar se
guarda entero para lo que se pulsa.
── LO QUE NO SE COPIA, Y POR QUÉ ────────────────────────────────────
· El municipio, la cuenta atrás contra el 12 de agosto y el «último día
seguro»: RELIC no personaliza por lugar y no vende contra una fecha
global. Se porta el molde del par «promesa / verdad», no la aritmética.
· Las maquetas SVG dibujadas: allí se tiraron el 27-07-2026 por orden del
dueño. RELIC ya sirve mockups reales.
· `object-fit:cover`: sus fotos vienen recortadas a 1200×1200 sobre
blanco. Aquí es `contain` + aire, y con `cover` se le cortan las mangas
a 89 piezas.
· La banda roja de oferta y el sello «+1 GRATIS»: hoy no hay oferta.
· El precio y el envío siguen SEPARADOS, que es regla de la casa y además
es lo que hace eclipseando.
═══════════════════════════════════════════════════════════════════════ */
/* ── 0. LOS CUATRO PRÉSTAMOS ──────────────────────────────────────────
Cuelgan del bloque del agente «rejilla» (final de tema.css) para que la
ficha y el catálogo no se separen nunca; con respaldo escrito por si
aquel bloque se borra, que es justo el caso en que esta hoja tiene que
seguir funcionando sola. */
:root{
--fc-caja:var(--tp-tarjeta,#FFFFFF); /* la caja de compra: elevada */
--fc-foto:var(--tp-caja,#FFFFFF); /* la caja de la foto: NUNCA oscura */
--fc-serif:var(--tp-serif,Georgia,"Iowan Old Style","Times New Roman",Charter,serif);
--fc-sombra-2:var(--tp-sombra-2,0 2px 6px rgba(38,34,43,.08),0 14px 34px rgba(38,34,43,.12));
--fc-radio:.6rem;
--fc-radio-grande:1rem;
}
/* ── 1. LA CABECERA: MIGA · ETIQUETA ÁMBAR · H1 EN SERIF ──────────────
El orden de FichaMerch.astro. El h1 estaba dentro de la columna de compra
—o sea empezando a la mitad del ancho y a la altura de la foto—, así que
lo primero que se leía de la ficha era la camiseta y no qué diseño era. */
.miga{font-size:.9rem; opacity:.75; padding-top:22px}
.ficha-cabecera{margin:0 0 var(--fc-radio-grande)}
.ficha-cabecera .etiqueta{
display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
margin:0; font-size:.8rem; font-weight:600; line-height:1.3;
text-transform:uppercase; letter-spacing:.08em; color:var(--haz);
}
/* El sello de dominio público se queda —es la prueba del argumento de la
tienda— pero deja de ser un recuadro suelto sobre el título: va en la
misma línea de la etiqueta, en su verde y en su tamaño. */
.ficha-cabecera .sello-dp{margin:0; align-self:center}
/* EL NOMBRE EN SERIF, en minúscula con inicial mayúscula: «El Pequod ·
camiseta unisex de algodón». Con Anton en mayúsculas —«EL PEQUOD»— la
ficha grita el nombre y no lo dice. Es la pila de sistema de eclipseando:
cero bytes de descarga, y no se sustituye por Bodoni «para mejorarlo». */
.ficha-cabecera h1.pieza-titulo{
font-family:var(--fc-serif); font-size:2rem; font-weight:700;
line-height:1.12; letter-spacing:-.012em; text-transform:none;
text-wrap:balance; margin:.25rem 0 .5rem; max-width:32ch;
}
.ficha-cabecera .pieza-titulo-forma{
display:inline; font-family:var(--fc-serif); font-weight:400;
font-size:1em; letter-spacing:inherit; text-transform:none;
color:var(--luz-2);
}
/* ── 2. LA HOJA: DOS COLUMNAS Y LA CAJA A CABALLO DE LAS DOS FILAS ────
Medido en eclipseando a 1440: 728 px de contenido + 368 de caja. Aquí era
1,12fr / 0,88fr, o sea una caja de compra de 570 px de ancho que se leía
como una segunda columna de texto y no como un formulario. */
.pieza-detalle.hoja{
grid-template-columns:minmax(0,1fr) minmax(19rem,23rem);
column-gap:1.5rem; row-gap:0; align-items:start; padding-top:0;
}
.pieza-detalle.hoja > .galeria{grid-column:1; grid-row:1; position:static; top:auto}
.pieza-detalle.hoja > .detalle{grid-column:1; grid-row:2; min-width:0}
.pieza-detalle.hoja > .caja{grid-column:2; grid-row:1 / span 2}
/* ── 3. LA GALERÍA: CAJA BLANCA, CUADRADA Y ACOTADA ───────────────────
`.gal-escenario` del molde: 1/1, 30 rem como máximo, centrada, filete de
1 px y esquina de 1 rem. La caja de RELIC iba a `min(56vh,600px)` de alto
para que la tira cupiera en la primera pantalla; con 30 rem cuadrados son
480 px —lo mismo que mide la suya, medido— y la tira sigue cabiendo. */
@media (min-width:701px){
.pieza-detalle .galeria-principal{
aspect-ratio:1/1; height:auto; max-height:none; max-width:30rem;
margin-inline:auto; border-radius:var(--fc-radio-grande);
}
}
/* LA ORDEN LITERAL DEL DUEÑO: la caja de la foto, blanca. Y no cuelga del
tema —una prenda se mira igual con la luz encendida que apagada—: en
oscuro eclipseando la deja en #F4F1EA y aquí igual, que es lo que ya hace
el token --tp-caja de la rejilla. El `contain` y el aire se quedan. */
.pieza-detalle .galeria-principal,
.pieza-detalle .galeria-principal.suelo,
.pieza-detalle .galeria-principal.suelo--claro,
.pieza-detalle .galeria-principal.suelo--oscuro{
background:var(--fc-foto); border:1px solid var(--borde);
}
.pieza-detalle .galeria-tiras{justify-content:center}
.pieza-detalle .galeria-tiras .tira .tira-caja{background:var(--fc-foto)}
/* El pie de la galería, centrado y CON ALTO RESERVADO: sin el `min-height`
la página daba un salto de 20 px al cambiar de miniatura. */
.pieza-detalle .pie-galeria,
.pieza-detalle .pie-obra{
margin-top:.5rem; font-size:.9rem; color:var(--luz-3);
text-align:center; min-height:2.8em; max-width:34rem; margin-inline:auto;
}
/* ── 4. LA CAJA DE COMPRA ─────────────────────────────────────────────
Una sola caja blanca con filo ámbar al 30 %, sombra-2 y pegada a 4,75 rem.
`align-content:start` es lo que impide que, siendo más corta que su celda,
la rejilla le reparta el aire sobrante entre los pasos. */
.pieza-detalle .caja{
position:sticky; top:4.75rem;
display:grid; gap:.75rem; align-content:start; min-width:0;
border:1px solid color-mix(in srgb,var(--campo) 30%,transparent);
border-radius:var(--fc-radio-grande);
background:var(--fc-caja); box-shadow:var(--fc-sombra-2);
padding:1rem;
}
.pieza-detalle .caja-cabeza{display:grid; gap:.25rem}
.pieza-detalle .caja-precio{
margin:0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.pieza-detalle .caja-precio strong{
font-family:var(--fc-serif); font-size:2rem; font-weight:700;
line-height:1; color:var(--luz);
}
/* El porte, en .8 rem gris y DEBAJO del precio, nunca dentro: el botón dice
23,95 € y el envío va aparte. Regla de la casa y además lo que hace el
molde («IVA incluido · envío gratis a este destino»). */
.pieza-detalle .caja-nota{margin:0; font-size:.8rem; color:var(--luz-3)}
.pieza-detalle .caja-plazo{
margin:0; padding-left:0; font-size:.9rem; font-weight:600; color:var(--luz);
}
.pieza-detalle .caja-plazo::before{content:none}
.pieza-detalle .caja-plazo strong{font-weight:600}
.pieza-detalle .caja-plazo .letra-chica{font-size:.9rem; font-weight:400; color:var(--luz-3)}
.pieza-detalle .caja-fabrica{
margin:0; padding-left:0; font-size:.8rem; line-height:1.45; color:var(--luz-3);
max-width:none;
}
.pieza-detalle .comprar{display:grid; gap:.75rem}
/* ── 5. LOS PASOS NUMERADOS ───────────────────────────────────────────
`border:0` y el número dentro del