/*
 * Boreh · Collage — detalles visuales.
 * Lo esencial (posiciones, recortes, alturas) va en línea en el HTML; esta hoja solo agrega
 * valores por defecto de las variables, sombras, el efecto al pasar el mouse y el pie de foto.
 */
.bcg{
	--bcg-line:6px;          /* grosor de las líneas entre fotos */
	--bcg-frame:6px;         /* marco exterior de cada bloque */
	--bcg-color:#fff;        /* color de líneas, marco y polaroid */
	--bcg-radius:0px;        /* esquinas del bloque */
	--bcg-gap:16px;          /* espacio entre bloques */
	--bcg-ring:8px;          /* aro del círculo protagonista */
	--bcg-filter:none;       /* tono de las fotos */
	--bcg-pol-space:5%;      /* espacio entre filas de polaroid */
}
.bcg .bcg-piece{ -webkit-tap-highlight-color:transparent; }
.bcg .bcg-piece--circle{ box-shadow:0 6px 22px rgba(0,0,0,.18); }

/* Polaroid: sombra suave (se puede cambiar con el control «Sombra»). */
.bcg-pol{ box-shadow:0 10px 24px rgba(40,30,20,.16), 0 2px 5px rgba(40,30,20,.10); }
.bcg-pol__cap{ font-size:clamp(12px, 3.6vw, 18px); }

/* Acercamiento suave al pasar el mouse (solo en equipos con mouse). */
@media (hover:hover){
	.bcg--hover .bcg-piece img{ transition:transform .9s cubic-bezier(.2,.7,.2,1); }
	.bcg--hover a.bcg-piece:hover img{ transform:scale(1.05); }
}

/* Aviso en el editor cuando aún no hay fotos. */
.bcg-empty{
	padding:28px 18px;
	border:1px dashed rgba(0,0,0,.25);
	border-radius:8px;
	text-align:center;
	font-size:14px;
	opacity:.75;
}