/* ============================================================
   Página: Splatter Room (page-templates/template-splatter-room.php)
   Todos los selectores van bajo .tpl-splatter-room.
   ============================================================ */

/* ---------- Utilidades de acento ---------- */
.tpl-splatter-room .hl-magenta { color: var(--bj-magenta); }
.tpl-splatter-room .hl-cyan { color: var(--bj-cyan); }

/* Botón blanco del CTA final (bg-white text-magenta del original) */
.tpl-splatter-room .bj-btn--white {
	background: var(--bj-white);
	color: var(--bj-magenta);
}
.tpl-splatter-room .bj-btn--white:hover { background: rgba(255, 255, 255, 0.9); }

/* ---------- Iconos lucide ---------- */
.tpl-splatter-room .sr-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	display: block;
}

/* ---------- Título de sección genérico ---------- */
.tpl-splatter-room .sr-section-title {
	text-align: center;
	font-size: clamp(2.25rem, 5vw, 3rem);
	margin-bottom: 3rem;
}

/* ---------- Manchas de pintura (SplatterSVG) ---------- */
.tpl-splatter-room .sr-splat {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.tpl-splatter-room .sr-splat--hero-1 {
	top: 5rem;
	left: 2.5rem;
	width: 8rem;
	height: 8rem;
	fill: var(--bj-magenta);
	opacity: 0.6;
}
.tpl-splatter-room .sr-splat--hero-2 {
	bottom: 5rem;
	right: 2.5rem;
	width: 10rem;
	height: 10rem;
	fill: var(--bj-cyan);
	opacity: 0.5;
}
.tpl-splatter-room .sr-splat--whatis {
	bottom: -1.5rem;
	left: -1.5rem;
	width: 6rem;
	height: 6rem;
	fill: var(--bj-yellow);
}
.tpl-splatter-room .sr-splat--cta-1 {
	top: 0;
	left: 0;
	width: 12rem;
	height: 12rem;
	fill: var(--bj-yellow);
	opacity: 0.3;
}
.tpl-splatter-room .sr-splat--cta-2 {
	bottom: 0;
	right: 0;
	width: 16rem;
	height: 16rem;
	fill: var(--bj-cyan);
	opacity: 0.2;
}

/* ---------- Hero ---------- */
.tpl-splatter-room .sr-hero {
	min-height: 80vh;
	background: var(--bj-charcoal);
}
.tpl-splatter-room .sr-hero .bj-hero__bg::after {
	background: rgba(0, 0, 0, 0.6);
}
.tpl-splatter-room .sr-hero__inner { text-align: center; }
.tpl-splatter-room .sr-hero__title { font-size: clamp(3rem, 9vw, 6rem); }
.tpl-splatter-room .sr-hero .bj-hero__subtitle {
	margin-inline: auto;
	color: var(--bj-gray-soft);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	max-width: 42rem;
}
.tpl-splatter-room .sr-hero .bj-hero__actions { justify-content: center; }
.tpl-splatter-room .sr-hero__badge {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: rgba(255, 46, 99, 0.2);
	color: var(--bj-magenta);
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}

/* ---------- Definición SEO ---------- */
.tpl-splatter-room .sr-definition {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tpl-splatter-room .sr-def-box {
	max-width: 56rem;
	margin-inline: auto;
	background: rgba(10, 10, 10, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 2rem;
}
.tpl-splatter-room .sr-def-box__title {
	font-size: 1.5rem;
	color: var(--bj-yellow);
	margin-bottom: 1rem;
}
.tpl-splatter-room .sr-def-box p {
	color: var(--bj-gray-soft);
	font-size: 1.125rem;
	line-height: 1.75;
	margin: 0;
}
.tpl-splatter-room .sr-def-box strong { color: var(--bj-white); }

/* ---------- Qué es (split) ---------- */
.tpl-splatter-room .sr-split {
	display: grid;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.tpl-splatter-room .sr-split { grid-template-columns: 1fr 1fr; }
}
.tpl-splatter-room .sr-split__title {
	font-size: clamp(2.25rem, 5vw, 3rem);
	margin-bottom: 1.5rem;
}
.tpl-splatter-room .sr-split__text {
	color: var(--bj-gray-soft);
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}
.tpl-splatter-room .sr-split__list {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}
.tpl-splatter-room .sr-split__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--bj-white);
}
.tpl-splatter-room .sr-split__list .sr-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--bj-magenta);
}
.tpl-splatter-room .sr-split__media { position: relative; }
.tpl-splatter-room .sr-split__img {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
}
.tpl-splatter-room .sr-split__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Beneficios ---------- */
.tpl-splatter-room .sr-benefit {
	background: rgba(10, 10, 10, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
	transition: border-color 0.3s ease;
}
.tpl-splatter-room .sr-benefit:hover {
	border-color: rgba(255, 46, 99, 0.5);
}
.tpl-splatter-room .sr-benefit .sr-icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--bj-magenta);
	margin-bottom: 1rem;
}
.tpl-splatter-room .sr-benefit__title {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.tpl-splatter-room .sr-benefit__text {
	color: var(--bj-gray-soft);
	margin: 0;
}

/* ---------- Galería ---------- */
.tpl-splatter-room .sr-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 768px) {
	.tpl-splatter-room .sr-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
.tpl-splatter-room .sr-gallery__item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.tpl-splatter-room .sr-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.tpl-splatter-room .sr-gallery__item:hover img { transform: scale(1.1); }
.tpl-splatter-room .sr-gallery__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 46, 99, 0);
	transition: background 0.3s ease;
}
.tpl-splatter-room .sr-gallery__item:hover::after { background: rgba(255, 46, 99, 0.2); }

/* ---------- Comparativa ---------- */
.tpl-splatter-room .sr-cmp-wrap { overflow-x: auto; }
.tpl-splatter-room .sr-cmp-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
}
.tpl-splatter-room .sr-cmp-table thead tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.tpl-splatter-room .sr-cmp-table th,
.tpl-splatter-room .sr-cmp-table td {
	padding: 1rem;
	text-align: center;
}
.tpl-splatter-room .sr-cmp-table th {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.tpl-splatter-room .sr-cmp-th-feature {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	color: var(--bj-gray-soft);
}
.tpl-splatter-room .sr-cmp-th-splatter { color: var(--bj-magenta); }
.tpl-splatter-room .sr-cmp-th-rage { color: var(--bj-orange); }
.tpl-splatter-room .sr-cmp-th-spin { color: var(--bj-cyan); }
.tpl-splatter-room .sr-cmp-table tbody tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tpl-splatter-room .sr-cmp-table td { color: var(--bj-gray-soft); }
.tpl-splatter-room .sr-cmp-feature {
	text-align: left;
	color: var(--bj-white) !important;
	font-weight: 500;
}

/* ---------- Para quién ---------- */
.tpl-splatter-room .sr-audience__grid { gap: 2rem; }
.tpl-splatter-room .sr-audience-item { text-align: center; }
.tpl-splatter-room .sr-audience-item__circle {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}
.tpl-splatter-room .sr-audience-item__circle .sr-icon {
	width: 2.5rem;
	height: 2.5rem;
}
.tpl-splatter-room .sr-audience-item__circle--magenta {
	background: rgba(255, 46, 99, 0.2);
	color: var(--bj-magenta);
}
.tpl-splatter-room .sr-audience-item__circle--yellow {
	background: rgba(255, 214, 10, 0.2);
	color: var(--bj-yellow);
}
.tpl-splatter-room .sr-audience-item__circle--cyan {
	background: rgba(8, 217, 214, 0.2);
	color: var(--bj-cyan);
}
.tpl-splatter-room .sr-audience-item__title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}
.tpl-splatter-room .sr-audience-item__text {
	color: var(--bj-gray-soft);
	margin: 0;
}

/* ---------- Grupos grandes ---------- */
.tpl-splatter-room .sr-groups__inner {
	max-width: 56rem;
	margin-inline: auto;
}
.tpl-splatter-room .sr-groups__head {
	text-align: center;
	margin-bottom: 2.5rem;
}
.tpl-splatter-room .sr-groups__head .sr-section-title { margin-bottom: 1rem; }
.tpl-splatter-room .sr-groups__lead {
	color: var(--bj-gray-soft);
	font-size: 1.125rem;
	line-height: 1.625;
	max-width: 42rem;
	margin: 0 auto;
}
.tpl-splatter-room .sr-groups__lead strong { color: var(--bj-white); }
.tpl-splatter-room .sr-groups__img {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.tpl-splatter-room .sr-groups__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tpl-splatter-room .sr-group-card {
	background: var(--bj-charcoal);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.tpl-splatter-room .sr-group-card__icon {
	display: block;
	margin-bottom: 1rem;
}
.tpl-splatter-room .sr-group-card__icon .sr-icon {
	width: 2rem;
	height: 2rem;
}
.tpl-splatter-room .sr-group-card__icon--magenta { color: var(--bj-magenta); }
.tpl-splatter-room .sr-group-card__icon--yellow { color: var(--bj-yellow); }
.tpl-splatter-room .sr-group-card__title {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.tpl-splatter-room .sr-group-card__text {
	color: var(--bj-gray-soft);
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 0;
}

/* ---------- FAQ ---------- */
.tpl-splatter-room .sr-faq .sr-section-title { margin-bottom: 3rem; }

/* ---------- Encuentra tu ciudad (city-grid) ---------- */
.tpl-splatter-room .city-grid__franchise {
	color: var(--bj-yellow);
	text-decoration: none;
}
.tpl-splatter-room .city-grid__franchise:hover { text-decoration: underline; }
.tpl-splatter-room .city-grid__counter-wrap {
	text-align: center;
	margin: -1.5rem 0 3rem;
}
.tpl-splatter-room .city-grid__counter {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bj-charcoal);
	border: 1px solid rgba(255, 214, 10, 0.4);
	border-radius: var(--radius);
	padding: 1rem 1.5rem;
	text-align: left;
}
.tpl-splatter-room .city-grid__counter svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--bj-yellow);
	flex-shrink: 0;
}
.tpl-splatter-room .city-grid__total {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 3vw, 2.25rem);
	color: var(--bj-yellow);
	line-height: 1;
}
.tpl-splatter-room .city-grid__total-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 0.25rem;
}
.tpl-splatter-room .city-grid__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 640px) {
	.tpl-splatter-room .city-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
	.tpl-splatter-room .city-grid__cards { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
	.tpl-splatter-room .city-grid__cards { grid-template-columns: repeat(5, 1fr); }
}
.tpl-splatter-room .city-card {
	position: relative;
	display: block;
	height: 100%;
	padding: 1rem;
	background: var(--bj-charcoal);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.tpl-splatter-room .city-card__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.tpl-splatter-room .city-card__pin {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.tpl-splatter-room .city-card__name {
	color: var(--bj-white);
	font-weight: 500;
	transition: color 0.2s ease;
}
.tpl-splatter-room .city-card--active .city-card__pin { color: var(--bj-yellow); }
.tpl-splatter-room .city-card--active:hover {
	border-color: rgba(255, 214, 10, 0.5);
	background: rgba(255, 214, 10, 0.05);
}
.tpl-splatter-room .city-card--active:hover .city-card__name { color: var(--bj-yellow); }
.tpl-splatter-room .city-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tpl-splatter-room .city-card__price {
	font-size: 0.75rem;
	color: var(--bj-gray-soft);
}
.tpl-splatter-room .city-card__arrow {
	width: 1rem;
	height: 1rem;
	color: var(--bj-yellow);
	opacity: 0;
	margin-left: auto;
	transition: opacity 0.2s ease;
}
.tpl-splatter-room .city-card--active:hover .city-card__arrow { opacity: 1; }
.tpl-splatter-room .city-card--soon .city-card__pin { color: rgba(255, 255, 255, 0.4); }
.tpl-splatter-room .city-card--soon .city-card__name { color: rgba(255, 255, 255, 0.9); }
.tpl-splatter-room .city-card--soon:hover {
	border-color: rgba(255, 46, 99, 0.5);
	background: rgba(255, 46, 99, 0.05);
}
.tpl-splatter-room .city-card--soon:hover .city-card__name { color: var(--bj-white); }
.tpl-splatter-room .city-card--featured {
	background: rgba(255, 46, 99, 0.1);
	border: 2px solid rgba(255, 46, 99, 0.5);
}
.tpl-splatter-room .city-card--featured .city-card__pin { color: var(--bj-magenta); }
.tpl-splatter-room .city-card--featured:hover { background: rgba(255, 46, 99, 0.2); }
.tpl-splatter-room .city-card__badge {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--bj-magenta);
	color: var(--bj-white);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
}
.tpl-splatter-room .city-card__badge svg {
	width: 0.75rem;
	height: 0.75rem;
}
.tpl-splatter-room .city-card__pop {
	display: block;
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 0.5rem;
}
.tpl-splatter-room .city-card__count {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: rgba(255, 214, 10, 0.1);
	border: 1px solid rgba(255, 214, 10, 0.3);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
}
.tpl-splatter-room .city-card__count svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--bj-yellow);
	flex-shrink: 0;
}
.tpl-splatter-room .city-card__count-num {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--bj-yellow);
	line-height: 1;
}
.tpl-splatter-room .city-card__count-label {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 214, 10, 0.8);
}
.tpl-splatter-room .city-card__soon-label {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: rgba(255, 46, 99, 0.85);
}
.tpl-splatter-room .city-card__soon-label svg {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

/* ---------- CTA final ---------- */
.tpl-splatter-room .sr-cta {
	position: relative;
	overflow: hidden;
	background: var(--bj-magenta);
	padding-block: 5rem;
	text-align: center;
}
.tpl-splatter-room .sr-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 48rem;
}
.tpl-splatter-room .sr-cta__title {
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	color: var(--bj-white);
	margin-bottom: 1.5rem;
}
.tpl-splatter-room .sr-cta__subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.25rem;
	margin-bottom: 2rem;
}
.tpl-splatter-room .sr-cta .bj-btn--white {
	padding: 1.25rem 3rem;
	font-size: 1.125rem;
}

/* ---------- Glosario ---------- */
.tpl-splatter-room .sr-glossary {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tpl-splatter-room .sr-glossary__title {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}
.tpl-splatter-room .sr-glossary__list {
	display: grid;
	gap: 1.5rem;
	font-size: 0.875rem;
	margin: 0;
}
@media (min-width: 768px) {
	.tpl-splatter-room .sr-glossary__list { grid-template-columns: 1fr 1fr; }
}
.tpl-splatter-room .sr-glossary__list dt {
	color: var(--bj-white);
	font-weight: 500;
}
.tpl-splatter-room .sr-glossary__list dd {
	color: var(--bj-gray-soft);
	margin: 0.25rem 0 0;
}