/* Bandas: el mismo diseño que negocios (va después de negocios.css), con el cartel de cada banda en vertical
   y el lore completo en la ficha ampliada */

/* Portada: mosaico de carteles */
.b-mosaico { grid-template-columns: repeat(11, 1fr); }
.b-mosaico img { aspect-ratio: 5 / 7; }

/* Fichas en vertical: el cartel ya lleva el nombre grande; abajo, el nombre en texto tapa el pie del cartel */
.b-rejilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.b-ficha .g-ficha-img { aspect-ratio: 5 / 7; }
.b-ficha .g-ficha-img::after { background: linear-gradient(0deg, rgba(10, 14, 22, .95) 4%, transparent 30%); }
.b-ficha .g-ficha-info { margin-top: -3rem; padding-top: 0; }
.b-ficha .g-ficha-info b { font-size: 1.25rem; }
.b-ficha .g-ficha-info em { font: 700 .74rem "Rajdhani", sans-serif; letter-spacing: .16em; text-transform: uppercase; }

/* Ficha ampliada: el cartel a la izquierda (se queda quieto al bajar) y el lore a la derecha */
.b-modal { width: min(1100px, calc(100vw - 32px)); }
.b-modal-fila { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.b-modal .g-datos { grid-area: auto; } /* negocios.css le pone un área con nombre que aquí no existe */
.b-cartel { background: #05080e; padding: 14px; }
.b-cartel img { position: sticky; top: 14px; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }
.b-modal .g-precio { margin: .8rem 0 1.5rem; }
.b-lema { margin: 0 0 1.5rem; padding: .15rem 0 .15rem 1.1rem; border-left: 2px solid var(--rosa-vivo); color: #fff; font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: .02em; }
.b-lema[hidden] { display: none; }
.b-lore p + p { margin-top: 1rem; }
.b-lore strong { color: #fff; font-weight: 700; }

@media (max-width: 1020px) {
	.b-mosaico { grid-template-columns: repeat(6, 1fr); }
	.b-modal-fila { grid-template-columns: 1fr; }
	.b-cartel img { position: static; width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; }
}
@media (max-width: 620px) {
	.b-rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
	.b-ficha .g-ficha-info { padding: 0 .7rem .8rem; margin-top: -2.4rem; }
	.b-ficha .g-ficha-info b { font-size: 1rem; }
	.b-ficha .g-ficha-info em { display: none; }
	.b-ficha .g-estado { top: 8px; left: 8px; font-size: .68rem; }
}