@charset "utf-8";
/* CSS Document */

.lds-ripple {
	display: inline-block;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	width: 80px; height: 80px;
	z-index: 1;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}


.cl-middle
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 1 / 1; /* Mantiene la forma cuadrada */
}


.cl-collage
{
	position: absolute;
	width: 100%;
	height: 100%;
}
.cl-collage .le
{
	box-shadow: inset 0 0 0 2px #FFF;
	background-color: #EBEBEB;
}
.cl-collage .ig
{
	position: relative;
	height: 100%; width: 100%;
	box-shadow: inset 0 0 0 2px #FFF;
	background-image: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	cursor: pointer;
	display: none;
}

.cl-hidden
{
	position: relative;
	display:  none;
}

.cl-hidden span
{
	position: relative;
	display: block;
}

.cl-min-clge {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 49%;
    aspect-ratio: 1 / 1; /* El alto es un 10% más grande que el ancho */
    margin: 0% 0% 1.5% 1.5%;
    float: left;
	cursor: pointer;
}

/* Elimina el margen para los elementos en el left y right */
.cl-min-clge:nth-child(odd) {
    margin-left: 0;
}

.cl-min-clge:nth-child(even) {
    margin-right: -2%;
}

.cl-min-clge .le
{
	box-shadow: inset 0 0 0 2px #FFF;
	background-color:#EBEBEB;
}
.cl-min-clge .ig
{
	position: relative;
	height: 100%; width: 100%;
	box-shadow: inset 0 0 0 2px #FFF;
	background-image: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: none;
}
.cl-min-clge .fav
{
	position: absolute;
	right: 20px; top: 0px;
	width: 35px; height: 35px;
	background-image: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image:url("../icos/favorite.svg");
	z-index: 1;
}
.cl-min-clge .fav .star
{
	position: relative;
	width: 100%; height: 90%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50% 50%;
	background-image:url("../icos/star.svg");
}

.cl-CA0-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 100%;
}
.cl-CA0-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA0-c
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}


.cl-CA1-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA1-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA1-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA1-d
{
	position: absolute;
	right: 0px; bottom: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA1-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}





.cl-CA2-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA2-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA2-c
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}

.cl-CA2-d
{
	position: absolute;
	right: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}

.cl-CA2-e
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA2-f
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}





.cl-CA3-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA3-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA3-c
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA3-d
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA3-e
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA3-f
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}





.cl-CA4-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA4-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 66.66%;
}
.cl-CA4-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}
.cl-CA4-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}





.cl-CA5-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA5-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA5-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA5-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA5-e
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA5-f
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA5-g
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}



.cl-CA6-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA6-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA6-c
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA6-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA6-e
{
	position: absolute;
	left: 33.33%; bottom: 33.33%;
	width: 33.33%;
	height: 33.33%;
}





.cl-CA7-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA7-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA7-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA7-d
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 100%;
	height: 33.33%;
}
.cl-CA7-e
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA7-f
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA7-g
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}




.cl-CA8-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA8-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA8-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA8-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA8-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}




.cl-CA9-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA9-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA9-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA9-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA9-e
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA9-f
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA9-g
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}




.cl-CA10-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA10-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA10-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA10-d
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}




.cl-CA11-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA11-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA11-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA11-d
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA11-e
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA11-f
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA11-g
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}




.cl-CA12-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA12-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA12-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA12-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA12-e
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA12-f
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}




.cl-CA13-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA13-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA13-c
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA13-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA13-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 66.66%;
	height: 66.66%;
}



.cl-CA14-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA14-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA14-c
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA14-d
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA14-e
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA14-f
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 100%;
	height: 33.33%;
}







.cl-CA15-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA15-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA15-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}
.cl-CA15-d
{
	position: absolute;
	right: 0px; bottom: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA15-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}


.cl-CA16-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA16-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA16-c
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA16-d
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA16-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 50%;
}


.cl-CA17-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 100%;
	height: 33.33%;
}
.cl-CA17-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}
.cl-CA17-c
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}


.cl-CA18-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA18-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA18-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA18-d
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA18-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 100%;
	height: 33.33%;
}


.cl-CA19-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA19-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA19-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 50%;
}
.cl-CA19-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA19-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}

.cl-CA20-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA20-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA20-c
{
	position: absolute;
	bottom: 0px; left: 0px;
	width: 50%;
	height: 66.66%;
}
.cl-CA20-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}

.cl-CA21-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA21-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA21-c
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA21-d
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA21-e
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 100%;
	height: 33.33%;
}

.cl-CA22-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 100%;
}
.cl-CA22-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA22-c
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}

.cl-CA23-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 100%;
	height: 33.33%;
}
.cl-CA23-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA23-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA23-d
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA23-e
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA23-f
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA23-g
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA24-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA24-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA24-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA24-d
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA24-e
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA24-f
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA24-g
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA25-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA25-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA25-c
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA25-d
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA25-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA26-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA26-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA26-c
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA26-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA26-e
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA26-f
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 100%;
}


.cl-CA27-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-c
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-d
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-e
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-f
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA27-g
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 100%;
	height: 33.33%;
}


.cl-CA28-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA28-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA28-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA28-d
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA28-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA29-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA29-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 100%;
}
.cl-CA29-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA29-d
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA29-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA30-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA30-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA30-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA30-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA31-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA31-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA31-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA31-d
{
	position: absolute;
	left: 33.33%; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA31-e
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}


.cl-CA32-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA32-b
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 66.66%;
	height: 33.33%;
}
.cl-CA32-c
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 66.66%;
	height: 66.66%;
}
.cl-CA32-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 33.33%;
	height: 66.66%;
}


.cl-CA33-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA33-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA33-c
{
	position: absolute;
	left: 33.33%; top: 0px;
	width: 33.33%;
	height: 33.33%;
}
.cl-CA33-d
{
	position: absolute;
	left: 33.33%; top: 33.33%;
	width: 33.33%;
	height: 66.66%;
}
.cl-CA33-e
{
	position: absolute;
	right: 0px; top: 0px;
	width: 33.33%;
	height: 100%;
}


.cl-CA34-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 100%;
}
.cl-CA34-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA34-c
{
	position: absolute;
	right: 0px; top: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA34-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}


.cl-CA35-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 100%;
	height: 33.33%;
}
.cl-CA35-b
{
	position: absolute;
	left: 0px; top: 33.33%;
	width: 50%;
	height: 33.33%;
}
.cl-CA35-c
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 33.33%;
}
.cl-CA35-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 66.66%;
}


.cl-CA36-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 100%;
}
.cl-CA36-b
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 100%;
}
.cl-CA36-c
{
	position: absolute;
	left: 25%; top: 25%;
	width: 50%;
	height: 50%;
}


.cl-CA37-a
{
	position: absolute;
	left: 0px; top: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA37-b
{
	position: absolute;
	left: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA37-c
{
	position: absolute;
	right: 0px; top: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA37-d
{
	position: absolute;
	right: 0px; bottom: 0px;
	width: 50%;
	height: 50%;
}
.cl-CA37-e
{
	position: absolute;
	left: 25%; top: 25%;
	width: 50%;
	height: 50%;
}


.cl-CA38-a {
    position:absolute;
    left:0; top:0;
    width:50%; height:50%;
}
.cl-CA38-b {
    position:absolute;
    right:0; top:0;
    width:50%; height:50%;
}
.cl-CA38-c {
    position:absolute;
    left:0; bottom:0;
    width:50%; height:50%;
}
.cl-CA38-d {
    position:absolute;
    right:0; bottom:0;
    width:50%; height:50%;
}


.cl-CA39-a {
    position:absolute;
    left:0; top:0;
    width:66.66%; height:66.66%;
}
.cl-CA39-b {
    position:absolute;
    right:0; top:0;
    width:33.33%; height:33.33%;
}
.cl-CA39-c {
    position:absolute;
    right:0; top:33.33%;
    width:33.33%; height:33.33%;
}
.cl-CA39-d {
    position:absolute;
    left:0; bottom:0;
    width:66.66%; height:33.33%;
}
.cl-CA39-e {
    position:absolute;
    right:0; bottom:0;
    width:33.33%; height:33.33%;
}



.cl-CA40-a {
    position:absolute;
    left:0; top:0;
    width:33.33%; height:50%;
}
.cl-CA40-b {
    position:absolute;
    left:33.33%; top:0;
    width:33.33%; height:50%;
}
.cl-CA40-c {
    position:absolute;
    right:0; top:0;
    width:33.33%; height:50%;
}
.cl-CA40-d {
    position:absolute;
    left:0; bottom:0;
    width:33.33%; height:50%;
}
.cl-CA40-e {
    position:absolute;
    left:33.33%; bottom:0;
    width:33.33%; height:50%;
}
.cl-CA40-f {
    position:absolute;
    right:0; bottom:0;
    width:33.33%; height:50%;
}



.cl-CA41-a {
    position:absolute;
    left:0; top:0;
    width:60%; height:100%;
}
.cl-CA41-b {
    position:absolute;
    right:0; top:0;
    width:40%; height:33.33%;
}
.cl-CA41-c {
    position:absolute;
    right:0; top:33.33%;
    width:40%; height:33.33%;
}
.cl-CA41-d {
    position:absolute;
    right:0; bottom:0;
    width:40%; height:33.33%;
}

.cl-CA42-a {
    position:absolute;
    left:0; top:0;
    width:33.33%; height:40%;
}
.cl-CA42-b {
    position:absolute;
    left:33.33%; top:0;
    width:33.33%; height:40%;
}
.cl-CA42-c {
    position:absolute;
    right:0; top:0;
    width:33.33%; height:40%;
}
.cl-CA42-d {
    position:absolute;
    left:0; bottom:0;
    width:50%; height:60%;
}
.cl-CA42-e {
    position:absolute;
    right:0; bottom:0;
    width:50%; height:60%;
}


.cl-CA43-a {
    position:absolute;
    left:0; top:0;
    width:100%; height:40%;
}
.cl-CA43-b {
    position:absolute;
    left:0; bottom:0;
    width:20%; height:60%;
}
.cl-CA43-c {
    position:absolute;
    left:20%; bottom:0;
    width:20%; height:60%;
}
.cl-CA43-d {
    position:absolute;
    left:40%; bottom:0;
    width:20%; height:60%;
}
.cl-CA43-e {
    position:absolute;
    left:60%; bottom:0;
    width:20%; height:60%;
}
.cl-CA43-f {
    position:absolute;
    right:0; bottom:0;
    width:20%; height:60%;
}


.cl-CA44-a {
    position:absolute;
    left:0; top:0;
    width:50%; height:40%;
}
.cl-CA44-b {
    position:absolute;
    right:0; top:0;
    width:50%; height:40%;
}
.cl-CA44-c {
    position:absolute;
    left:0; bottom:0;
    width:50%; height:60%;
}
.cl-CA44-d {
    position:absolute;
    right:0; bottom:0;
    width:50%; height:60%;
}


.cl-CA45-a {
    position:absolute;
    left:0; top:0;
    width:50%; height:33.33%;
}
.cl-CA45-b {
    position:absolute;
    left:0; top:33.33%;
    width:50%; height:33.33%;
}
.cl-CA45-c {
    position:absolute;
    left:0; bottom:0;
    width:50%; height:33.33%;
}
.cl-CA45-d {
    position:absolute;
    right:0; top:0;
    width:50%; height:50%;
}
.cl-CA45-e {
    position:absolute;
    right:0; top:50%;
    width:50%; height:25%;
}
.cl-CA45-f {
    position:absolute;
    right:0; bottom:0;
    width:50%; height:25%;
}


.cl-CA46-a {
    position:absolute;
    left:25%; top:25%;
    width:50%; height:50%;
}
.cl-CA46-b {
    position:absolute;
    left:0; top:0;
    width:75%; height:25%;
}
.cl-CA46-c {
    position:absolute;
    right:0; top:0;
    width:25%; height:75%;
}
.cl-CA46-d {
    position:absolute;
    left:0; bottom:0;
    width:25%; height:75%;
}
.cl-CA46-e {
    position:absolute;
    right:0; bottom:0;
    width:75%; height:25%;
}


.cl-CA47-a {
    position:absolute;
    left:0; top:0;
    width:40%; height:100%;
}
.cl-CA47-b {
    position:absolute;
    right:0; top:0;
    width:60%; height:33.33%;
}
.cl-CA47-c {
    position:absolute;
    right:0; top:33.33%;
    width:60%; height:33.33%;
}
.cl-CA47-d {
    position:absolute;
    right:0; bottom:0;
    width:60%; height:33.33%;
}


.cl-CA48-a {
  position: absolute;
  left: 0; top: 0;
  width: 50%; height: 33.33%;
}
.cl-CA48-b {
  position: absolute;
  left: 0; top: 33.33%;
  width: 50%; height: 33.33%;
}
.cl-CA48-c {
  position: absolute;
  left: 0; bottom: 0;
  width: 50%; height: 33.33%;
}
.cl-CA48-d {
  position: absolute;
  right: 0; top: 0;
  width: 50%; height: 50%;
}
.cl-CA48-e {
  position: absolute;
  right: 0; top: 50%;
  width: 50%; height: 25%;
}
.cl-CA48-f {
  position: absolute;
  right: 0; bottom: 0;
  width: 50%; height: 25%;
}


.cl-CA49-a {
    position:absolute;
    left:0; top:0;
    width:50%; height:40%;
}
.cl-CA49-b {
    position:absolute;
    right:0; top:0;
    width:50%; height:40%;
}
.cl-CA49-c {
    position:absolute;
    left:0; bottom:0;
    width:33.33%; height:60%;
}
.cl-CA49-d {
    position:absolute;
    left:33.33%; bottom:0;
    width:33.33%; height:60%;
}
.cl-CA49-e {
    position:absolute;
    right:0; bottom:0;
    width:33.33%; height:60%;
}


/* CA50 con 9 imágenes: cruz + esquinas */

.cl-CA50-a {
  /* imagen central */
  position: absolute;
  left: 25%; top: 0%;
  width: 50%; height: 50%;
}

.cl-CA50-b {
  /* izquierda centro */
  position: absolute;
  left: 0; top: 25%;
  width: 25%; height: 50%;
}

.cl-CA50-c {
  /* derecha centro */
  position: absolute;
  right: 0; top: 25%;
  width: 25%; height: 50%;
}

.cl-CA50-d {
  /* parte baja izquierda-central */
  position: absolute;
  left: 25%; bottom: 0;
  width: 25%; height: 50%;
}

.cl-CA50-e {
  /* parte baja derecha-central */
  position: absolute;
  right: 25%; bottom: 0;
  width: 25%; height: 50%;
}

/* esquinas: 4 imágenes más */
.cl-CA50-f {
  position: absolute;
  left: 0; top: 0;
  width: 25%; height: 25%;
}

.cl-CA50-g {
  position: absolute;
  right: 0; top: 0;
  width: 25%; height: 25%;
}

.cl-CA50-h {
  position: absolute;
  left: 0; bottom: 0;
  width: 25%; height: 25%;
}

.cl-CA50-i {
  position: absolute;
  right: 0; bottom: 0;
  width: 25%; height: 25%;
}

/* ==========================================================
   BRINTAGE COLLAGES - contorno blanco + favorito al borde
   2026-07-06
   Mantiene 2 collages por fila, misma altura proporcional.
   ========================================================== */
.cl-min-clge{
    width:calc((100% - 14px) / 2)!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin:0 0 14px 0!important;
    padding:0!important;
    border:6px solid #fff!important;
    box-sizing:border-box!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(13,28,45,.06)!important;
    overflow:hidden!important;
    float:left!important;
    display:flex!important;
    flex-direction:column!important;
}
.cl-min-clge .cl-mini-canvas{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    flex:0 0 auto;
    overflow:hidden;
    border-radius:7px 7px 0 0;
    background:#ebebeb;
}
.cl-min-clge:nth-child(odd){
    margin-left:0!important;
    margin-right:0!important;
}
.cl-min-clge:nth-child(even){
    margin-left:14px!important;
    margin-right:0!important;
}
.cl-min-clge .cl-collage,
.cl-min-clge .cl-middle{
    border-radius:7px!important;
    overflow:hidden!important;
}
.cl-min-clge .le,
.cl-min-clge .ig,
.cl-min-clge .imge{
    box-shadow:inset 0 0 0 1.5px #fff!important;
}
.cl-min-clge .fav{
    top:0!important;
    right:0!important;
    width:34px!important;
    height:34px!important;
    z-index:10!important;
    filter:drop-shadow(0 3px 5px rgba(255,72,72,.20))!important;
}


/* ===== Brintage TOP SEMANAL 2026 ===== */
.top-weekly-head{
    position:relative;
    width:100%;
    min-height:126px;
    flex:0 0 auto;
    clear:both;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    background:transparent;
    text-align:center;
    z-index:2;
    margin-bottom:8px;
}
.top-weekly-trophy{
    width:36px;
    height:36px;
    background:url("../icos/trophy.svg") center/contain no-repeat;
    margin:0 0 2px;
}
.top-weekly-title-row{
    width:100%;
    display:grid;
    grid-template-columns:minmax(28px,1fr) auto minmax(28px,1fr);
    align-items:center;
    gap:13px;
}
.top-weekly-title-row h1{
    margin:0;
    color:#101625;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.2px;
    white-space:nowrap;
}
.top-weekly-line{
    position:relative;
    display:block;
    height:1.5px;
    background:#2f84f6;
    opacity:.85;
}
.top-weekly-line:first-child:after,
.top-weekly-line:last-child:before{
    content:"";
    position:absolute;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-3.5px;
    border-radius:50%;
    background:#2f84f6;
}
.top-weekly-line:first-child:after{right:-1px}
.top-weekly-line:last-child:before{left:-1px}
.top-weekly-detail{
    height:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:2px;
}
.top-weekly-detail i{
    display:block;
    width:22px;
    height:2px;
    border-radius:2px;
    background:#2f84f6;
}
.top-weekly-detail b{
    display:block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#2f84f6;
}
.top-weekly-head p{
    margin:2px 0 0;
    color:#858b96;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.25;
    font-weight:400;
}
#favorites{
    padding-top:10px;
    box-sizing:border-box;
}
#favorites > .cl-min-clge:nth-of-type(odd){
    margin-left:0!important;
    margin-right:0!important;
}
#favorites > .cl-min-clge:nth-of-type(even){
    margin-left:14px!important;
    margin-right:0!important;
}
#favorites .cl-min-clge{
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 14px rgba(32,78,135,.09);
}
#favorites .cl-mini-canvas{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#ebebeb;
}
#favorites .cl-min-clge .fav{
    display:none!important;
}
.top-weekly-rank{
    --rank-border:#4fa6f8;
    --rank-fill:rgba(255,255,255,.96);
    --rank-text:#2f84f6;
    --rank-shadow:rgba(47,132,246,.16);
    position:absolute;
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    z-index:12;
    pointer-events:none;
    font-family:Arial,Helvetica,sans-serif;
}
.top-weekly-rank b{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--rank-border);
    border-radius:50%;
    background:var(--rank-fill);
    color:var(--rank-text);
    box-shadow:
        0 3px 8px var(--rank-shadow),
        inset 0 0 0 2px rgba(255,255,255,.75);
    font-size:13px;
    line-height:1;
    font-weight:800;
}
.top-weekly-rank-medal:before,
.top-weekly-rank-medal:after{
    content:"";
    position:absolute;
    z-index:1;
    top:10px;
    width:13px;
    height:10px;
    background:var(--rank-border);
    opacity:.92;
    filter:drop-shadow(0 2px 2px var(--rank-shadow));
}
.top-weekly-rank-medal:before{
    left:-8px;
    clip-path:polygon(0 18%,100% 0,82% 100%,0 82%);
    transform:rotate(-8deg);
}
.top-weekly-rank-medal:after{
    right:-8px;
    clip-path:polygon(0 0,100% 18%,100% 82%,18% 100%);
    transform:rotate(8deg);
}
.top-weekly-rank-1{
    --rank-border:#d2a43a;
    --rank-fill:#fff9e9;
    --rank-text:#8b6405;
    --rank-shadow:rgba(184,132,22,.25);
}
.top-weekly-rank-2{
    --rank-border:#aab5c1;
    --rank-fill:#f8fafc;
    --rank-text:#667382;
    --rank-shadow:rgba(91,108,126,.22);
}
.top-weekly-rank-3{
    --rank-border:#bb7950;
    --rank-fill:#fff4ec;
    --rank-text:#875033;
    --rank-shadow:rgba(142,79,43,.22);
}
.top-weekly-rank-standard{
    width:28px;
    height:28px;
}
.top-weekly-rank-standard b{
    border-width:1.5px;
    font-size:12px;
}
.top-weekly-stats{
    height:31px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:0 8px;
    background:#fff;
    color:#687080;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    line-height:1;
}
.top-weekly-stat{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:45px;
    justify-content:center;
}
.top-weekly-stat b{font-weight:500}
.top-weekly-stat i{
    width:17px;
    height:17px;
    display:block;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}
.top-weekly-likes i{background-image:url("../icos/like.svg")}
.top-weekly-comments i{background-image:url("../icos/comment.svg")}

@media (max-width:600px){
    .top-weekly-head{min-height:126px;padding-left:13px;padding-right:13px}
    .top-weekly-title-row{gap:10px}
    .top-weekly-title-row h1{font-size:21px}
    .top-weekly-head p{font-size:12.5px}
    #favorites{padding:8px 7px 0}
    #favorites .cl-min-clge{width:48.5%;margin-bottom:2.2%;}
    .top-weekly-stats{gap:17px;font-size:11.5px}
}

/* ===== TOP SEMANAL: adaptación específica para modo FIXED ===== */
@media (min-width:769px){
    #favorites .top-weekly-head{
        min-height:126px;
        padding:12px 18px!important;
        justify-content:center!important;
    }

    #favorites .top-weekly-trophy{
        width:38px;
        height:38px;
        margin-bottom:3px;
    }

    #favorites .top-weekly-title-row{
        max-width:620px;
        gap:16px;
    }

    #favorites .top-weekly-title-row h1{
        font-size:23px;
    }

    #favorites .top-weekly-head p{
        font-size:13px;
        margin-top:3px;
    }
}

/* =========================================================
   BRINTAGE - ENCABEZADO USUARIOS EN LÍNEA
   Cambios limitados exclusivamente a la sección Online.
   ========================================================= */
.online-users-head{
    position:relative;
    width:100%;
    min-height:112px;
    flex:0 0 auto;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 14px 12px;
    background:transparent;
    text-align:center;
    z-index:2;
}
.online-users-title-row{
    width:100%;
    max-width:720px;
    display:grid;
    grid-template-columns:minmax(26px,1fr) 42px auto minmax(26px,1fr);
    align-items:center;
    gap:13px;
}
.online-users-title-row h1{
    margin:0;
    color:#101a35;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.35px;
    white-space:nowrap;
}
.online-users-line{
    position:relative;
    display:block;
    height:1.5px;
    background:#2f84f6;
    opacity:.9;
}
.online-users-line:first-child:after,
.online-users-line:last-child:before{
    content:"";
    position:absolute;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-3.5px;
    border-radius:50%;
    background:#2f84f6;
}
.online-users-line:first-child:after{right:-1px}
.online-users-line:last-child:before{left:-1px}
.online-users-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    position:relative;
    background:#2f84f6;
    box-shadow:0 0 0 7px rgba(47,132,246,.08);
}
.online-users-icon:before{
    content:"";
    position:absolute;
    inset:9px;
    background:#fff;
    -webkit-mask:url("../icos/online.svg") center/contain no-repeat;
    mask:url("../icos/online.svg") center/contain no-repeat;
}
.online-users-head p{
    margin:5px 0 0;
    color:#7b8492;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.2;
    font-weight:400;
}

/* Estado visible de cada usuario conectado */
#online .on-pos:after{
    content:"";
    position:absolute;
    right:3px;
    top:3px;
    width:11px;
    height:11px;
    border-radius:50%;
    box-sizing:border-box;
    background:#13c94c;
    border:2px solid #fff;
    z-index:5;
}
#online .on-status{
    width:100%;
    margin-top:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#0dbf48;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    line-height:15px;
    white-space:nowrap;
}
#online .on-status i{
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:#0dbf48;
}

/* Los usuarios desconectados permanecen visibles con una jerarquía más suave. */
#online .on-user3.is-offline .on-pos:after{
    background:#9aa4b2;
}
#online .on-status.is-offline{
    color:#8b95a3;
    font-size:9.5px;
    letter-spacing:-.1px;
}
#online .on-status.is-offline i{
    background:#9aa4b2;
}

@media (min-width:769px){
    #online .online-users-head{
        min-height:112px;
        padding:12px 18px!important;
    }
    #online .online-users-title-row{
        max-width:650px;
        gap:15px;
    }
    #online .online-users-title-row h1{
        font-size:23px;
    }
}

@media (max-width:600px){
    .online-users-head{
        padding-left:11px;
        padding-right:11px;
    }
    .online-users-title-row{
        grid-template-columns:minmax(18px,1fr) 36px auto minmax(18px,1fr);
        gap:8px;
    }
    .online-users-title-row h1{
        font-size:17px;
        letter-spacing:.1px;
    }
    .online-users-icon{
        width:36px;
        height:36px;
        box-shadow:0 0 0 5px rgba(47,132,246,.08);
    }
    .online-users-icon:before{
    content:"";
    position:absolute;
    inset:9px;
    background:#fff;
    -webkit-mask:url("../icos/online.svg") center/contain no-repeat;
    mask:url("../icos/online.svg") center/contain no-repeat;
}
.online-users-head p{font-size:12px}
    #online .on-status{font-size:10.5px}
}

@media (max-width:360px){
    .online-users-title-row{
        grid-template-columns:minmax(10px,1fr) 32px auto minmax(10px,1fr);
        gap:6px;
    }
    .online-users-title-row h1{font-size:15px}
    .online-users-icon{width:32px;height:32px;}
}

/* Brintage: diseño CA36 — foto central perfectamente circular */
.cl-CA36-c{
    border-radius:50%!important;
    border:2px solid #fff!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background-clip:padding-box!important;
}


/* ==========================================================
   BRINTAGE — FAVORITOS SKELETON
   12 minicollages fantasma por tanda. Copia el canvas 1:1,
   ranking y pie de estadísticas de la tarjeta real.
   ========================================================== */
#favorites .br-favorites-skeleton-wrap{
    width:100%!important;
    clear:both!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    box-sizing:border-box!important;
    margin:0 0 14px!important;
    pointer-events:none!important;
}
#favorites .br-favorites-skeleton-card{
    position:relative!important;
    min-width:0!important;
    overflow:hidden!important;
    border:6px solid #fff!important;
    border-radius:13px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(32,78,135,.09)!important;
}
#favorites .br-favorites-sk{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    background:#e4e8ee!important;
}
#favorites .br-favorites-sk::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    transform:translateX(-105%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent)!important;
    animation:br-favorites-skeleton-shimmer 1.45s ease-in-out infinite!important;
}
#favorites .br-favorites-sk-canvas{
    width:100%!important;
    aspect-ratio:1 / 1!important;
    border-radius:7px 7px 0 0!important;
    background:#e3e7ed!important;
}
#favorites .br-favorites-sk-rank{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    width:28px!important;
    height:28px!important;
    border-radius:50%!important;
    background:#d9dee6!important;
    z-index:2!important;
}
#favorites .br-favorites-skeleton-stats{
    height:31px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:24px!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    background:#fff!important;
}
#favorites .br-favorites-skeleton-stat{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    min-width:45px!important;
}
#favorites .br-favorites-skeleton-stat i{
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
    border-radius:50%!important;
}
#favorites .br-favorites-skeleton-stat b{
    height:8px!important;
    border-radius:999px!important;
}
#favorites > .cl-min-clge.br-favorites-batch-pending{
    display:none!important;
}
@keyframes br-favorites-skeleton-shimmer{
    0%{transform:translateX(-105%)}
    55%,100%{transform:translateX(105%)}
}
@media (max-width:600px){
    #favorites .br-favorites-skeleton-wrap{
        gap:2.2%!important;
        row-gap:2.2vw!important;
        margin-bottom:2.2vw!important;
    }
}

/* ==========================================================
   BRINTAGE — PERFIL SKELETON DE MINICOLLAGES
   2026-08-14
   4 fantasmas (2x2) con la misma geometría del perfil.
   Permanecen hasta completar imagen + autoencuadre de toda la tanda.
   ========================================================== */
.pg.us > .br-profile-skeleton-wrap{
    width:100%!important;
    clear:both!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
}
.pg.us .br-profile-skeleton-card{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:6px solid #fff!important;
    box-sizing:border-box!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(13,28,45,.06)!important;
    overflow:hidden!important;
}
.pg.us .br-profile-sk{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    background:#e1e5eb!important;
}
.pg.us .br-profile-sk::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    transform:translateX(-105%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)!important;
    animation:br-profile-skeleton-shimmer 1.45s ease-in-out infinite;
}
.pg.us .br-profile-sk-canvas{
    width:100%!important;
    aspect-ratio:1 / 1!important;
    border-radius:7px 7px 0 0!important;
}
.pg.us .br-profile-skeleton-stats{
    height:31px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:24px!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    background:#fff!important;
}
.pg.us .br-profile-skeleton-stat{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    min-width:45px!important;
}
.pg.us .br-profile-skeleton-stat i{
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
    border-radius:50%!important;
}
.pg.us .br-profile-skeleton-stat b{
    height:8px!important;
    border-radius:999px!important;
}
.pg.us > .cl-min-clge.br-profile-batch-pending{
    display:none!important;
}
@keyframes br-profile-skeleton-shimmer{
    0%{transform:translateX(-105%)}
    55%,100%{transform:translateX(105%)}
}
@media (max-width:600px){
    .pg.us > .br-profile-skeleton-wrap{
        gap:14px!important;
    }
    .pg.us .br-profile-skeleton-stats{
        gap:17px!important;
    }
}
@media (prefers-reduced-motion:reduce){
    .pg.us .br-profile-sk::after{animation:none!important;}
}


/* ==========================================================
   BRINTAGE — CLÁSICOS CA37 / CA51
   CA37: mismo diseño de cuatro fondos con centro circular 1:1.
   CA51: copia de CA37 con centro en forma de corazón suave.
   Borde central blanco uniforme de 2 px.
   ========================================================== */

/* CA37: círculo central perfecto con borde blanco de 2 px. */
.cl-CA37-e{
    border-radius:50%!important;
    border:2px solid #fff!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    z-index:3!important;
    background-clip:padding-box!important;
}

/* CA51 mantiene exactamente la geometría exterior de CA37. */
.cl-CA51-a{
    position:absolute;
    left:0; top:0;
    width:50%; height:50%;
}
.cl-CA51-b{
    position:absolute;
    left:0; bottom:0;
    width:50%; height:50%;
}
.cl-CA51-c{
    position:absolute;
    right:0; top:0;
    width:50%; height:50%;
}
.cl-CA51-d{
    position:absolute;
    right:0; bottom:0;
    width:50%; height:50%;
}

/* Corazón central clásico, simétrico y completamente curvo.
   Se usa una máscara SVG escalable para evitar laterales rectos
   o la apariencia cuadrada que producía el polígono anterior. */
.cl-CA51-e{
    --br-heart-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='black'%20d='M50%2092%20C45%2087%209%2062%209%2034%20C9%2017%2020%207%2034%207%20C42%207%2047%2011%2050%2018%20C53%2011%2058%207%2066%207%20C80%207%2091%2017%2091%2034%20C91%2062%2055%2087%2050%2092%20Z'/%3E%3C/svg%3E");
    position:absolute;
    left:25%; top:25%;
    width:50%; height:50%;
    z-index:3!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    -webkit-clip-path:none!important;
    clip-path:none!important;
    -webkit-mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
    mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
}

/* El borde del corazón es una corona blanca de 2 px hacia adentro.
   Funciona tanto en el editor como en publicaciones y miniaturas. */
.cl-CA51-e::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
    background:#fff;
    -webkit-mask-image:var(--br-heart-mask),var(--br-heart-mask);
    -webkit-mask-repeat:no-repeat,no-repeat;
    -webkit-mask-position:center,center;
    -webkit-mask-size:100% 100%,calc(100% - 4px) calc(100% - 4px);
    -webkit-mask-composite:xor;
    mask-image:var(--br-heart-mask),var(--br-heart-mask);
    mask-repeat:no-repeat,no-repeat;
    mask-position:center,center;
    mask-size:100% 100%,calc(100% - 4px) calc(100% - 4px);
    mask-composite:exclude;
}

/* En publicaciones/minicollages la foto llena el corazón; la máscara
   y el borde viven en la celda padre para conservar exactamente la forma. */
.br-design-CA51 .cl-CA51-e.le > .ig,
.br-design-CA51 .cl-CA51-e.le > .imge{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    -webkit-clip-path:none!important;
    clip-path:none!important;
    -webkit-mask:none!important;
    mask:none!important;
}



/* ==========================================================
   BRINTAGE — FIX 2026-08-15
   CA36 / CA37 / CA51
   - fuerza borde blanco visible de 2 px en círculos centrales
   - agranda CA51 un 15%
   - rehace el borde del corazón con fondo blanco + foto inset
   ========================================================== */

/* Círculos centrales: el borde vive en la celda blanca y la foto
   se insetea 2 px para que el aro se vea siempre en editor, feed
   y miniaturas. */
.cl-CA36-c,
.cl-CA37-e{
    position:relative!important;
    overflow:hidden!important;
    background:#fff!important;
}

.br-design-CA36 .cl-CA36-c.le > .ig,
.br-design-CA36 .cl-CA36-c.le > .imge,
.br-design-CA37 .cl-CA37-e.le > .ig,
.br-design-CA37 .cl-CA37-e.le > .imge,
#createpost .cp-desings .sC.br-design-CA36 > .cl-CA36-c > .ig,
#createpost .cp-desings .sC.br-design-CA36 > .cl-CA36-c > .imge,
#createpost .cp-desings .sC.br-design-CA37 > .cl-CA37-e > .ig,
#createpost .cp-desings .sC.br-design-CA37 > .cl-CA37-e > .imge{
    position:absolute!important;
    top:2px!important;
    left:2px!important;
    width:calc(100% - 4px)!important;
    height:calc(100% - 4px)!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:none!important;
    object-fit:cover!important;
    -webkit-clip-path:circle(50% at 50% 50%)!important;
    clip-path:circle(50% at 50% 50%)!important;
}

/* Corazón central CA51:
   - +15% de ancho respecto del 50% original: 57.5%
   - +5% de alto respecto del 50% original: 52.5%
   - centrado dentro del collage
   - sin el box-shadow heredado de .cl-collage .le, que dibujaba
     el marco cuadrado blanco alrededor del corazón.
   El borde blanco del corazón se conserva en 2 px mediante ::before
   + la foto inseteada 2 px con la misma máscara. */
.cl-CA51-e{
    left:21.25%!important;
    top:23.75%!important;
    width:57.5%!important;
    height:52.5%!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-mask:none!important;
    mask:none!important;
}
.cl-CA51-e::after{
    content:none!important;
}
.cl-CA51-e::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:#fff!important;
    -webkit-mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
    mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
}
.br-design-CA51 .cl-CA51-e.le > .ig,
.br-design-CA51 .cl-CA51-e.le > .imge,
#createpost .cp-desings .sC.br-design-CA51 > .cl-CA51-e > .ig,
#createpost .cp-desings .sC.br-design-CA51 > .cl-CA51-e > .imge{
    position:absolute!important;
    top:2px!important;
    left:2px!important;
    width:calc(100% - 4px)!important;
    height:calc(100% - 4px)!important;
    z-index:2!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    object-fit:cover!important;
    -webkit-clip-path:none!important;
    clip-path:none!important;
    -webkit-mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
    mask:var(--br-heart-mask) center / 100% 100% no-repeat!important;
}