/* ==========================================================================
   Break&Joy — componentes de páginas comerciales y locales (inc/components.php)
   Se carga solo en las plantillas que los usan (inc/setup.php).
   Mobile-first. Acento por plantilla con --bj-accent.
   ========================================================================== */

.tpl-local { --bj-accent: var(--bj-yellow); }
.tpl-local--rage { --bj-accent: var(--bj-orange); }
.tpl-local--splatter { --bj-accent: var(--bj-magenta); }

.bj-hl { color: var(--bj-accent, var(--bj-yellow)); }
.bj-c-icon { flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.bj-c-section { padding-block: 3.5rem; }
@media (min-width: 768px) { .bj-c-section { padding-block: 5rem; } }

.bj-c-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 1.5rem;
}
.bj-c-lead { color: var(--bj-gray-soft); margin-bottom: 1.25rem; }
.bj-c-note { font-size: 0.8rem; color: var(--bj-gray-soft); margin: 0.5rem 0 0; }
.bj-c-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--bj-accent, var(--bj-yellow));
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bj-c-link:hover { color: var(--bj-white); }
.bj-c-split { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .bj-c-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- Hero genérico (hub, guías, próximas aperturas) ---------- */
.bj-c-hero { padding: calc(var(--header-h) + 2.5rem) 0 3rem; background: radial-gradient(ellipse at top right, rgba(255, 214, 10, 0.08), transparent 60%); }
.bj-c-hero .bj-breadcrumbs { margin-bottom: 1.75rem; }
.bj-c-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .bj-c-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.bj-c-hero__eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--bj-accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.85rem; margin: 0 0 1rem; }
.bj-c-hero__title { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1; margin: 0 0 1.25rem; }
.bj-c-hero__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(255, 255, 255, 0.82); max-width: 38rem; margin: 0 0 1.75rem; }
.bj-c-hero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 34rem; background: var(--bj-charcoal); }
.bj-c-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.bj-c-hero--compact { padding-bottom: 2rem; }
.bj-c-intro { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 56rem; margin: 0 auto; text-align: center; color: rgba(255, 255, 255, 0.88); }

/* Hero de las landings de ciudad: imagen en la columna derecha */
.tpl-local .city-hero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 36rem; background: var(--bj-charcoal); }
.tpl-local .city-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .tpl-local .city-hero__media { aspect-ratio: 16 / 10; } }

/* ---------- Fichas rápidas ---------- */
.bj-c-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}
@media (min-width: 640px) { .bj-c-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bj-c-facts__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.5rem;
	align-items: center;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.03);
	min-width: 0;
}
.bj-c-facts__item .bj-c-icon { grid-row: 1 / 3; color: var(--bj-accent); width: 1.4rem; height: 1.4rem; }
.bj-c-facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bj-gray-soft); }
.bj-c-facts dd { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.bj-c-facts dd small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0; color: var(--bj-gray-soft); }
.bj-c-facts__item--price dd { color: var(--bj-yellow); font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; }

/* ---------- CTAs ---------- */
.bj-c-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.bj-c-ctas .bj-btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 640px) { .bj-c-ctas .bj-btn { flex: 0 0 auto; } }

.bj-c-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 45;
	display: flex;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(10, 10, 10, 0.94);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	transform: translateY(0);
	transition: transform 0.25s ease;
}
.bj-c-sticky[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.bj-c-sticky .bj-btn { padding-block: 0.7rem; }
.bj-c-sticky__book { flex: 1; justify-content: center; }
.bj-c-sticky__gift { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (min-width: 1024px) { .bj-c-sticky { display: none !important; } }
/* El WhatsApp flotante sube cuando la barra está visible. */
body.bj-has-sticky .bj-whatsapp-float { bottom: 5.25rem; }
@media (min-width: 1024px) { body.bj-has-sticky .bj-whatsapp-float { bottom: 1.5rem; } }
body.bj-has-sticky .site-footer { padding-bottom: 4.5rem; }
@media (min-width: 1024px) { body.bj-has-sticky .site-footer { padding-bottom: 0; } }

/* ---------- Qué incluye / pasos / seguridad ---------- */
.bj-c-included__list, .bj-c-safety__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.bj-c-included__list li, .bj-c-safety__list li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.5; }
.bj-c-included__list .bj-c-icon, .bj-c-safety__list .bj-c-icon { color: var(--bj-accent); margin-top: 0.15rem; }
.bj-c-included__list strong { color: var(--bj-white); }
.bj-c-included__list span { color: rgba(255, 255, 255, 0.82); }
.bj-c-safety__list span { color: rgba(255, 255, 255, 0.82); }
.bj-c-safety__list strong { color: var(--bj-white); }

.bj-c-steps__list { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1rem; }
.bj-c-steps__list li {
	counter-increment: step;
	position: relative;
	padding: 1rem 1rem 1rem 3.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.03);
}
.bj-c-steps__list li::before {
	content: counter(step);
	position: absolute;
	left: 1rem; top: 1rem;
	width: 2rem; height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bj-accent);
	color: var(--bj-black);
	font-family: var(--font-display);
	font-size: 1.1rem;
}
.bj-c-steps__title { font-size: 1.15rem; margin: 0 0 0.25rem; }
.bj-c-steps__list p { margin: 0; color: rgba(255, 255, 255, 0.78); }

/* ---------- Galería / vídeo ---------- */
.bj-c-gallery__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 1024px) { .bj-c-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.bj-c-gallery__item { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: var(--bj-black); }
.bj-c-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.bj-c-video { margin-top: 3rem; }
.bj-c-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.bj-c-video__frame img, .bj-c-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.bj-c-video__play {
	position: absolute; inset: 0; margin: auto;
	width: max-content; height: max-content;
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.9rem 1.4rem;
	border: 0; border-radius: 999px;
	background: var(--bj-yellow); color: var(--bj-black);
	font-weight: 800;
}

/* ---------- Ubicación ---------- */
.bj-c-location__grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .bj-c-location__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.bj-c-location__card, .bj-c-card {
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.03);
}
.bj-c-location__name { font-size: 1.5rem; margin-bottom: 1rem; }
.bj-c-location__nap { margin: 0 0 1.25rem; display: grid; gap: 0.9rem; }
.bj-c-location__nap dt { display: flex; gap: 0.4rem; align-items: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bj-gray-soft); }
.bj-c-location__nap dt .bj-c-icon { color: var(--bj-accent); }
.bj-c-location__nap dd { margin: 0.2rem 0 0; }
.bj-c-location__nap a { color: var(--bj-white); }
.bj-c-location__nap a:hover { color: var(--bj-accent); }
.bj-c-location__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bj-c-location__actions .bj-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.bj-c-location__extra { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .bj-c-location__extra { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.bj-c-card__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; margin-bottom: 0.75rem; }
.bj-c-card__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bj-gray-soft); margin: 0.75rem 0 0.35rem; display: flex; gap: 0.35rem; align-items: center; }
.bj-c-card__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; color: rgba(255, 255, 255, 0.85); }
.bj-c-card__list--places { list-style: none; padding: 0; }
.bj-c-card__list--places span { color: var(--bj-gray-soft); font-size: 0.9rem; }
.bj-c-card--cta { text-align: center; max-width: 44rem; margin-inline: auto; }

/* Mapa bajo demanda: nada de Google hasta pulsar. */
.bj-c-map {
	position: relative;
	min-height: 18rem;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	overflow: hidden;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px),
		var(--bj-charcoal);
	border: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}
.bj-c-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.bj-c-map__placeholder { position: relative; display: grid; justify-items: center; gap: 0.35rem; font-weight: 600; }
.bj-c-map__placeholder .bj-c-icon { width: 2.25rem; height: 2.25rem; color: var(--bj-accent); }
.bj-c-map__load { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.bj-c-map .bj-c-note { position: relative; }
.bj-c-map.is-loaded { padding: 0; display: block; }
.bj-c-map.is-loaded iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }

/* ---------- Tarjetas de enlace (otras experiencias, grupos) ---------- */
.bj-c-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .bj-c-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bj-c-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.bj-c-linkcard {
	position: relative;
	display: grid;
	gap: 0.35rem;
	height: 100%;
	padding: 1.25rem 3rem 1.25rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.bj-c-linkcard:hover, .bj-c-linkcard:focus-visible { border-color: var(--bj-accent); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.bj-c-linkcard__title { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bj-white); }
.bj-c-linkcard__text { color: var(--bj-gray-soft); font-size: 0.92rem; }
.bj-c-linkcard > .bj-c-icon { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--bj-accent); }
.bj-c-linkcard--rage { --bj-accent: var(--bj-orange); }
.bj-c-linkcard--splatter { --bj-accent: var(--bj-magenta); }
.bj-c-linkcard--spin { --bj-accent: var(--bj-cyan); }
.bj-c-linkcard--hub { --bj-accent: var(--bj-yellow); }

/* Tarjetas de experiencia del hub */
.bj-c-expcards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .bj-c-expcards { grid-template-columns: 1fr 1fr; } }
.bj-c-expcard { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); overflow: hidden; background: var(--bj-charcoal); display: grid; }
.bj-c-expcard--rage-room { --bj-accent: var(--bj-orange); }
.bj-c-expcard--splatter-room { --bj-accent: var(--bj-magenta); }
.bj-c-expcard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.bj-c-expcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bj-c-expcard__body { padding: 1.5rem; }
.bj-c-expcard__title { font-size: 1.9rem; margin-bottom: 0.5rem; }
.bj-c-expcard__title a { color: var(--bj-white); text-decoration: none; }
.bj-c-expcard__title a:hover { color: var(--bj-accent); }
.bj-c-expcard__body > p { color: rgba(255, 255, 255, 0.8); }
.bj-c-expcard .bj-c-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bj-c-expcard__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.bj-c-highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .bj-c-highlights { grid-template-columns: repeat(2, 1fr); } }
.bj-c-highlights li { display: flex; gap: 1rem; align-items: baseline; padding: 1.1rem 1.25rem; border-left: 3px solid var(--bj-accent); background: rgba(255, 255, 255, 0.03); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.bj-c-highlights__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--bj-accent); }

/* ---------- Regalo ---------- */
.bj-c-gift { background: linear-gradient(135deg, rgba(255, 46, 99, 0.18), rgba(255, 214, 10, 0.14)); border-block: 1px solid rgba(255, 255, 255, 0.08); padding-block: 2.5rem; }
.bj-c-gift__inner { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 768px) { .bj-c-gift__inner { grid-template-columns: auto 1fr auto; gap: 2rem; } }
.bj-c-gift__icon .bj-c-icon { width: 3rem; height: 3rem; color: var(--bj-yellow); }
.bj-c-gift__title { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 0.35rem; }
.bj-c-gift__text { margin: 0; color: rgba(255, 255, 255, 0.85); }

/* ---------- Reseñas ---------- */
.bj-c-reviews__grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.bj-c-review { margin: 0; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); }
.bj-c-review__stars { color: var(--bj-yellow); letter-spacing: 0.1em; margin: 0 0 0.5rem; }
.bj-c-review blockquote { margin: 0 0 0.6rem; color: rgba(255, 255, 255, 0.88); }
.bj-c-review blockquote p { margin: 0; }
.bj-c-review figcaption { font-weight: 700; font-size: 0.9rem; }
.bj-c-reviews__links { margin: 0; }

/* ---------- Posts relacionados ---------- */
.bj-c-posts__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .bj-c-posts__grid { grid-template-columns: repeat(3, 1fr); } }
.bj-c-post { display: grid; gap: 0.75rem; height: 100%; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s ease; }
.bj-c-post:hover, .bj-c-post:focus-visible { border-color: var(--bj-accent, var(--bj-yellow)); }
.bj-c-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.bj-c-post__media img { width: 100%; height: 100%; object-fit: cover; }
.bj-c-post__title { padding: 0 1.1rem 1.1rem; font-weight: 700; line-height: 1.35; color: var(--bj-white); }
.bj-c-soonlink { margin-top: 2rem; color: var(--bj-gray-soft); }

/* ---------- Próximas aperturas ---------- */
.bj-c-soongrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.bj-c-soon { position: relative; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); display: grid; gap: 0.5rem; align-content: start; }
.bj-c-soon--featured { border-color: var(--bj-magenta); background: rgba(255, 46, 99, 0.08); }
.bj-c-soon__badge { justify-self: start; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bj-black); background: var(--bj-magenta); padding: 0.15rem 0.5rem; border-radius: 999px; }
.bj-c-soon__name { font-size: 1.5rem; margin: 0; }
.bj-c-soon__meta { color: var(--bj-gray-soft); font-size: 0.85rem; margin: 0 0 0.5rem; }

/* ---------- Guías, índice y CTA contextual ---------- */
.bj-c-guide__body { max-width: 52rem; padding-bottom: 3rem; }
.bj-c-toc { margin: 0 0 2rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); }
.bj-c-toc__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; margin: 0 0 0.6rem; }
.bj-c-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.bj-c-toc a { color: rgba(255, 255, 255, 0.85); }
.bj-c-toc a:hover { color: var(--bj-yellow); }
.bj-c-ctx { margin: 2.5rem 0; padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(255, 214, 10, 0.35); background: rgba(255, 214, 10, 0.06); }
.bj-c-ctx__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; margin: 0 0 0.4rem; }
.bj-c-ctx__text { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.85); }
.bj-c-ctx .bj-c-ctas { margin: 0; }
.bj-c-faq .bj-faq { max-width: none; }

/* ---------- 404 / archivos ---------- */
.bj-c-search { display: flex; gap: 0.5rem; max-width: 32rem; margin: 1.5rem auto; }
.bj-c-search .bj-input { flex: 1; }

@media (prefers-reduced-motion: reduce) {
	.bj-c-linkcard, .bj-c-sticky { transition: none; }
	.bj-c-linkcard:hover { transform: none; }
}
.bj-404__links { padding-block: 1rem 4rem; }
.tpl-archive .bj-pagination, .tpl-search .bj-pagination { margin-top: 2rem; }