/* santiana/image-hotspots — presentación del bloque (front y editor).
   La imagen escala a ratio natural; cada hotspot se ancla por % (centro
   del elemento sobre la coordenada) y su ancho es % del ancho de la
   imagen, así la relación con la foto se mantiene en todo viewport. */

.sb-image-hotspots__wrap {
	position: relative;
	line-height: 0;
}

.sb-image-hotspots__bg {
	display: block;
	width: 100%;
	height: auto;
}

.sb-image-hotspots__spot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: block;
}

.sb-image-hotspots__spot img {
	display: block;
	width: 100%;
	height: auto;
}

a.sb-image-hotspots__spot {
	transition: transform 0.2s ease;
}

a.sb-image-hotspots__spot:hover,
a.sb-image-hotspots__spot:focus {
	transform: translate(-50%, -50%) scale(1.06);
}

/* --------------------------------------------
   Variante tarjeta (sb-tower-card): caja con muesca lateral que
   apunta a la torre. Tipografía y espaciados en cqw (container
   queries) para que TODO escale con el ancho de la tarjeta, que a
   su vez es % de la imagen → proporciones idénticas en cualquier
   viewport. Medidas derivadas del mock (tarjeta de 390px):
   título 44px→11cqw, subtítulo 16→4cqw, líneas 20→5cqw, etc.
   Colores: caja palette1 al 90%, contenido #b2c2a8 (≈palette7).
   -------------------------------------------- */

.sb-tower-card {
	container-type: inline-size;
	line-height: 1.2;
	text-decoration: none;
	/* colores definidos por Johann: contenido palette7 (re-apuntada a #b2c2a8);
	   caja = palette1 al 90% (color-mix mantiene el token de paleta) */
	--sb-card-content: var(--global-palette7, #b2c2a8);
	--sb-card-box: color-mix(in srgb, var(--global-palette1, #38453d) 90%, transparent);
}

.sb-tower-card,
a.sb-tower-card:hover,
a.sb-tower-card:focus {
	color: var(--sb-card-content);
}

.sb-tower-card > * {
	position: relative;
	z-index: 1;
}

.sb-tower-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sb-card-box);
	border-radius: 8px; /* fijo 8px en todo el sitio (Johann 2026-07-26) */
}

.sb-tower-card::after {
	content: "";
	position: absolute;
	top: 26%;
	width: 0;
	height: 0;
	/* proporciones del mock: alto total ~11.5% del ancho de tarjeta,
	   profundidad ~6.2% — en cqw para que escale con la tarjeta */
	border-top: 5.8cqw solid transparent;
	border-bottom: 5.8cqw solid transparent;
}

.sb-tower-card--notch-right::after {
	left: 100%;
	border-left: 6.2cqw solid var(--sb-card-box);
}

.sb-tower-card--notch-left::after {
	right: 100%;
	border-right: 6.2cqw solid var(--sb-card-box);
}

.sb-tower-card img.sb-tower-card__logo {
	display: block;
	width: 45cqw;
	margin: 10cqw auto 5cqw;
}

.sb-tower-card__divider {
	display: block;
	width: 75%;
	height: 1px;
	background: var(--sb-card-content);
	margin: 6cqw auto;
}

.sb-tower-card__desc {
	display: block;
	text-align: center;
	font-family: var(--global-body-font-family, inherit);
	font-size: 6cqw;
	line-height: 1.55;
	padding-bottom: 10cqw;
}

.sb-tower-card__line {
	display: block;
}