.cruz {
margin: var(--s7) 0 0;
padding: var(--s5);
background: #fff;
border: 1px solid var(--hilo);
}
.cruz__rotulo {
margin: 0 0 var(--s2);
font-family: var(--dato);
font-size: .7rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--laca);
}
.cruz__t {
margin: 0 0 var(--s5);
font-family: var(--display);
font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem);
font-weight: 400;
line-height: 1.2;
color: var(--tinta);
}
.cruz__ficha {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto;
gap: var(--s5);
align-items: center;
}
.cruz__foto {
display: block;
border: 1px solid var(--hilo);
background: var(--papel);
}
.cruz__foto img {
display: block;
width: 100%;
height: auto;
}
.cruz__cuerpo { min-width: 0; }
.cruz__nombre {
display: block;
font-family: var(--display);
font-size: 1.05rem;
line-height: 1.3;
color: var(--tinta);
text-decoration: none;
}
.cruz__nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.cruz__precios {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
align-items: baseline;
margin: var(--s2) 0 0;
}
.cruz__antes {
color: var(--humo);
text-decoration: line-through;
font-size: .95rem;
}
.cruz__ahora {
font-family: var(--display);
font-size: 1.25rem;
color: var(--tinta);
font-variant-numeric: tabular-nums;
}
.cruz__nota {
margin: var(--s2) 0 0;
font-size: .85rem;
line-height: 1.5;
color: var(--humo);
}
.cruz__btn {
display: inline-block;
white-space: nowrap;
padding: var(--s4) var(--s6);
background: var(--tinta);
color: var(--papel);
font-family: var(--dato);
font-size: .78rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
transition: background .18s ease;
}
.cruz__btn:hover,
.cruz__btn:focus-visible {
background: var(--laca);
color: var(--papel);
}
@media (max-width: 640px) {
.cruz { padding: var(--s4); }
.cruz__ficha {
grid-template-columns: 76px minmax(0, 1fr);
gap: var(--s4);
}
.cruz__btn {
grid-column: 1 / -1;
text-align: center;
padding: var(--s4);
}
}
.cruz--cajon {
margin: 0;
padding: var(--s3) var(--s4);
border-left: 0;
border-right: 0;
border-radius: 0;
}
.cruz--cajon .cruz__rotulo {
margin-bottom: 1px;
font-size: .58rem;
letter-spacing: .12em;
}
.cruz--cajon .cruz__t {
margin-bottom: var(--s2);
font-family: var(--texto);
font-size: .82rem;
font-weight: 600;
line-height: 1.2;
}
.cruz--cajon .cruz__ficha {
grid-template-columns: 44px minmax(0, 1fr);
gap: 6px var(--s3);
align-items: center;
}
.cruz--cajon .cruz__nombre {
font-family: var(--texto);
font-size: .78rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cruz--cajon .cruz__precios {
margin-top: 1px;
gap: var(--s2);
}
.cruz--cajon .cruz__antes { font-size: .72rem; }
.cruz--cajon .cruz__ahora {
font-family: var(--texto);
font-size: .88rem;
font-weight: 600;
}
.cruz--cajon .cruz__btn {
grid-column: 1 / -1;
margin-top: 6px;
padding: 9px var(--s3);
text-align: center;
font-size: .66rem;
letter-spacing: .09em;
}