/* FICHA — "En el catálogo" como tablero de LEDs (relieve suave de la ficha) */
.tb { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; margin: 0 0 6px; padding: 0; list-style: none; }
.tb-cel {
    display: block; width: 100%; padding: 14px 16px 12px; border: 0; border-radius: 14px; text-align: left;
    font: inherit; color: var(--text-primary); cursor: pointer; position: relative;
    background: var(--fic-hueco); box-shadow: var(--fic-hondo);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tb-cel:hover { transform: translateY(-2px); box-shadow: var(--fic-suave); }
.tb-cel:focus-visible { outline: 2px solid var(--fic-acc); outline-offset: 2px; }
.tb-cel::after {
    content: "+"; position: absolute; top: 10px; right: 14px; font: 700 15px 'Courier New', monospace;
    color: var(--text-secondary); transition: transform .3s ease, color .2s;
}
.tb-cel[aria-expanded="true"]::after { transform: rotate(45deg); color: var(--fic-acc); }
.tb-et { display: block; padding-right: 22px; font: 700 11px 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.tb-val { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* 20 pines que crecen de izquierda a derecha; se encienden hasta donde cae la pieza */
.tb-pines { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin: 14px 0 10px; }
.tb-pin {
    flex: 1; height: calc(26% + var(--i) * 3.9%); border-radius: 3px;
    background: rgba(128, 128, 128, .2); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35);
    transform-origin: 50% 100%;
}
.tb-pin.l {
    background: linear-gradient(180deg, #ffa56b, var(--fic-acc));
    opacity: calc(.4 + var(--i) * .03); box-shadow: none;
}
.tb-pin.m { opacity: 1; box-shadow: 0 0 10px rgba(255, 123, 58, .65); }
/* con JS, se encienden en cadena al entrar en pantalla */
.tb-js .tb-pin.l { transition: transform .45s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 26ms), opacity .45s ease calc(var(--i) * 26ms); }
.tb-js:not(.on) .tb-pin.l { transform: scaleY(.15); opacity: 0; }

.tb-frase { display: block; font-size: 13px; line-height: 1.35; color: var(--text-primary); }
.tb-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.tb-cel[aria-expanded="true"] .tb-det { grid-template-rows: 1fr; }
.tb-det > span { overflow: hidden; font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }
.tb-det > span::before { content: ""; display: block; height: 8px; }

@media (prefers-reduced-motion: reduce) {
    .tb-cel, .tb-det, .tb-cel::after, .tb-js .tb-pin.l { transition: none !important; }
    .tb-js:not(.on) .tb-pin.l { transform: none; opacity: calc(.4 + var(--i) * .03); }
}