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

/* ---------- Utilidades de acento ---------- */
.tpl-splatter-room-movil .srm-accent { color: var(--bj-magenta); }
.tpl-splatter-room-movil .srm-req { color: #dc2626; }

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

/* ---------- Manchas de pintura (SplatterSVG) ---------- */
.tpl-splatter-room-movil .srm-splat {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.tpl-splatter-room-movil .srm-splat--hero-1 {
	top: 5rem;
	left: 2.5rem;
	width: 12rem;
	height: 12rem;
	fill: var(--bj-magenta);
	opacity: 0.5;
	transform: rotate(-15deg);
}
.tpl-splatter-room-movil .srm-splat--hero-2 {
	bottom: 5rem;
	right: 2.5rem;
	width: 8rem;
	height: 8rem;
	fill: var(--bj-yellow);
	opacity: 0.4;
	transform: rotate(30deg);
}
.tpl-splatter-room-movil .srm-splat--included {
	bottom: -1.5rem;
	left: -1.5rem;
	width: 6rem;
	height: 6rem;
	fill: var(--bj-yellow);
	opacity: 0.8;
	transform: rotate(20deg);
}
.tpl-splatter-room-movil .srm-splat--contact-1 {
	top: 0;
	left: 0;
	width: 12rem;
	height: 12rem;
	fill: var(--bj-yellow);
	opacity: 0.3;
	transform: rotate(20deg);
}
.tpl-splatter-room-movil .srm-splat--contact-2 {
	bottom: 0;
	right: 0;
	width: 12rem;
	height: 12rem;
	fill: var(--bj-cyan);
	opacity: 0.2;
	transform: rotate(-30deg);
}

/* ---------- Hero ---------- */
.tpl-splatter-room-movil .srm-hero {
	min-height: 80vh;
	background: var(--bj-charcoal);
}
.tpl-splatter-room-movil .srm-hero .bj-hero__bg::after {
	background: rgba(0, 0, 0, 0.7);
}
.tpl-splatter-room-movil .srm-hero__inner {
	text-align: center;
}
.tpl-splatter-room-movil .srm-hero .bj-hero__subtitle {
	margin-inline: auto;
	color: var(--bj-gray-soft);
}
.tpl-splatter-room-movil .srm-hero .bj-hero__actions {
	justify-content: center;
}
.tpl-splatter-room-movil .srm-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	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;
}
.tpl-splatter-room-movil .srm-hero__badge .srm-icon {
	width: 1rem;
	height: 1rem;
}

/* ---------- ¿En qué consiste? ---------- */
.tpl-splatter-room-movil .srm-intro {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tpl-splatter-room-movil .srm-intro__card {
	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-movil .srm-intro__title {
	font-size: 1.5rem;
	color: var(--bj-magenta);
	margin-bottom: 1rem;
}
.tpl-splatter-room-movil .srm-intro__text {
	color: var(--bj-gray-soft);
	font-size: 1.125rem;
	line-height: 1.75;
	margin: 0;
}
.tpl-splatter-room-movil .srm-intro__text strong { color: var(--bj-white); }

/* ---------- Cómo funciona ---------- */
.tpl-splatter-room-movil .srm-steps__grid {
	max-width: 64rem;
	margin-inline: auto;
	gap: 2rem;
}
.tpl-splatter-room-movil .srm-step { text-align: center; }
.tpl-splatter-room-movil .srm-step__num {
	display: block;
	font-family: var(--font-display);
	font-size: 3rem;
	line-height: 1;
	color: rgba(255, 46, 99, 0.3);
}
.tpl-splatter-room-movil .srm-step__title {
	font-size: 1.25rem;
	margin: -0.5rem 0 0.5rem;
}
.tpl-splatter-room-movil .srm-step__text {
	color: var(--bj-gray-soft);
	font-size: 0.875rem;
	margin: 0;
}

/* ---------- Todo incluido ---------- */
.tpl-splatter-room-movil .srm-included__grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.tpl-splatter-room-movil .srm-included__grid { grid-template-columns: 1fr 1fr; }
}
.tpl-splatter-room-movil .srm-included__title {
	font-size: clamp(2.25rem, 5vw, 3rem);
	margin-bottom: 1.5rem;
}
.tpl-splatter-room-movil .srm-included__text {
	color: var(--bj-gray-soft);
	font-size: 1.125rem;
	margin-bottom: 2rem;
}
.tpl-splatter-room-movil .srm-included__list {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.tpl-splatter-room-movil .srm-included__list { grid-template-columns: 1fr 1fr; }
}
.tpl-splatter-room-movil .srm-included__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--bj-white);
	font-size: 0.875rem;
}
.tpl-splatter-room-movil .srm-included__list .srm-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--bj-magenta);
	margin-top: 0.125rem;
}
.tpl-splatter-room-movil .srm-included__media { position: relative; }
.tpl-splatter-room-movil .srm-included__img {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
}
.tpl-splatter-room-movil .srm-included__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Casos de uso ---------- */
.tpl-splatter-room-movil .srm-usecase {
	background: rgba(26, 26, 26, 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-movil .srm-usecase:hover {
	border-color: rgba(255, 46, 99, 0.5);
}
.tpl-splatter-room-movil .srm-usecase .srm-icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--bj-magenta);
	margin-bottom: 1rem;
}
.tpl-splatter-room-movil .srm-usecase__title {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.tpl-splatter-room-movil .srm-usecase__text {
	color: var(--bj-gray-soft);
	font-size: 0.875rem;
	margin: 0;
}

/* ---------- Cobertura ---------- */
.tpl-splatter-room-movil .srm-zones__grid {
	max-width: 56rem;
	margin-inline: auto;
	gap: 2rem;
}
.tpl-splatter-room-movil .srm-zone {
	background: rgba(10, 10, 10, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
}
.tpl-splatter-room-movil .srm-zone .srm-icon {
	width: 2rem;
	height: 2rem;
	color: var(--bj-magenta);
	margin: 0 auto 1rem;
}
.tpl-splatter-room-movil .srm-zone__name {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}
.tpl-splatter-room-movil .srm-zone__cities {
	color: var(--bj-gray-soft);
	font-size: 0.875rem;
	margin-bottom: 0.75rem;
}
.tpl-splatter-room-movil .srm-zone__note {
	font-size: 0.75rem;
	color: var(--bj-magenta);
}

/* ---------- Formulario contacto ---------- */
.tpl-splatter-room-movil .srm-contact {
	position: relative;
	overflow: hidden;
	background: var(--bj-magenta);
	padding-block: 5rem;
}
.tpl-splatter-room-movil .srm-contact__inner {
	position: relative;
	z-index: 1;
	max-width: 42rem;
}
.tpl-splatter-room-movil .srm-contact__head {
	text-align: center;
	margin-bottom: 2.5rem;
}
.tpl-splatter-room-movil .srm-contact__title {
	font-size: clamp(2.25rem, 5vw, 3rem);
	color: var(--bj-black);
	margin-bottom: 1rem;
}
.tpl-splatter-room-movil .srm-contact__subtitle {
	color: rgba(0, 0, 0, 0.7);
	font-size: 1.125rem;
	margin: 0;
}

/* Tarjeta blanca del formulario (réplica de eventos-movil-form.tsx) */
.tpl-splatter-room-movil .srm-form {
	background: var(--bj-white);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.tpl-splatter-room-movil .srm-form .bj-form__field label {
	color: #374151;
}
.tpl-splatter-room-movil .srm-form .bj-input,
.tpl-splatter-room-movil .srm-form .bj-select,
.tpl-splatter-room-movil .srm-form .bj-textarea {
	background: var(--bj-white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	color: #111827;
}
.tpl-splatter-room-movil .srm-form .bj-input:focus,
.tpl-splatter-room-movil .srm-form .bj-select:focus,
.tpl-splatter-room-movil .srm-form .bj-textarea:focus {
	border-color: var(--bj-magenta);
	box-shadow: 0 0 0 2px rgba(255, 46, 99, 0.2);
}
.tpl-splatter-room-movil .srm-form .bj-input::placeholder,
.tpl-splatter-room-movil .srm-form .bj-textarea::placeholder {
	color: #9ca3af;
}
.tpl-splatter-room-movil .srm-form .bj-check {
	color: #374151;
}
.tpl-splatter-room-movil .srm-form .bj-check input {
	accent-color: var(--bj-black);
}
.tpl-splatter-room-movil .srm-form .bj-check a {
	color: #111827;
	text-decoration: underline;
}
.tpl-splatter-room-movil .srm-form .bj-check a:hover {
	text-decoration: none;
}
.tpl-splatter-room-movil .srm-form__note {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: center;
	margin: 0.25rem 0 0;
}

/* ---------- CTA flotante (solo móvil) ---------- */
.tpl-splatter-room-movil .srm-cta-floating {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.5rem;
	background: var(--bj-yellow);
	color: var(--bj-black);
	font-weight: 700;
	text-decoration: none;
	border-radius: 9999px;
	box-shadow: 0 10px 25px rgba(255, 214, 10, 0.3);
	transition: transform 0.2s ease;
}
.tpl-splatter-room-movil .srm-cta-floating:hover { transform: scale(1.04); }
.tpl-splatter-room-movil .srm-cta-floating .srm-icon {
	width: 1.25rem;
	height: 1.25rem;
}
@media (min-width: 1024px) {
	.tpl-splatter-room-movil .srm-cta-floating { display: none; }
}