:root { --brand: #2056c9; }
body { min-height: 100vh; color: #172033; }
.hero { color: #fff; background: linear-gradient(125deg, #123c9b, #2a77ec); }
.solidarity-banner { position: sticky; top: .5rem; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(120deg, #0d347e, #1766c2); border: 1px solid rgba(255,255,255,.25); border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(14,44,91,.2); }
.solidarity-photo { flex: 0 0 auto; width: 126px; height: 126px; object-fit: cover; object-position: center 30%; border-radius: 50%; border: 4px solid #fff; background: #fff; }
.number-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(58px,1fr)); gap: .45rem; max-height: 650px; overflow-y: auto; padding: .25rem; }
.number { border: 1px solid #aeb8c6; background: #fff; border-radius: .4rem; padding: .55rem .15rem; font-size: .82rem; font-weight: 600; transition: .12s ease; }
.number.disponible:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.number.reservado { background: #ffe8a3; border-color: #e9b949; color: #73510d; }
.number.vendido { background: #d9dee5; border-color: #c3cad4; color: #687386; text-decoration: line-through; }
.number.is-selected { color: #fff; background: var(--brand); border-color: var(--brand); }
.legend { display:inline-block; width:.8rem; height:.8rem; border-radius:.2rem; margin-right:.3rem; border:1px solid #aaa; }
.legend.available{background:#fff}.legend.reserved{background:#ffe8a3}.legend.sold{background:#d9dee5}.legend.selected{background:var(--brand)}
@media (max-width: 575px) { .solidarity-banner { gap: .85rem; padding: .85rem; align-items: flex-start; } .solidarity-photo { width: 82px; height: 82px; border-width: 3px; } .solidarity-banner h2 { font-size: 1.15rem; } .solidarity-banner p { font-size: .82rem; line-height: 1.3; } .number-grid { grid-template-columns: repeat(5,1fr); } .number { font-size: .75rem; } }