/* ==========================================================================
   AlegriaPlay Hub -- bits.css
   Capa components: botones, tarjetas de zona, numeracion mono de secciones,
   divisores punteados, tabla comparativa, puntos del mapa, rail, contadores.
   ========================================================================== */

@layer components {

	/* ------------------------------------------------------------
	   botones
	   ------------------------------------------------------------ */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 48px;
		padding: 14px 30px;
		font-family: var(--f-display);
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		border-radius: var(--radius-s);
		border: 2px solid transparent;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.btn--accent {
		background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
		color: var(--c-ink);
	}

	.btn--accent:hover {
		background: var(--c-accent-2);
	}

	.btn--ghost {
		border-color: var(--c-white);
		color: var(--c-white);
	}

	.btn--ghost:hover {
		background-color: var(--c-white);
		color: var(--c-ink);
	}

	.btn--dark {
		border-color: var(--c-ink);
		color: var(--c-ink);
	}

	.btn--dark:hover {
		background-color: var(--c-ink);
		color: var(--c-white);
	}

	.btn--block {
		width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {

		.btn {
			transition: none;
		}

	}

	/* ------------------------------------------------------------
	   numeracion mono de secciones + divisor punteado
	   ------------------------------------------------------------ */
	.section__kicker {
		font-family: var(--f-display);
		font-size: 0.95rem;
		color: var(--c-accent);
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	.section__divider {
		border: 0;
		border-top: 2px dashed var(--c-line);
		margin: 0 0 44px;
	}

	.section--ink .section__divider {
		border-top-color: var(--c-ink-soft);
	}

	/* ------------------------------------------------------------
	   tarjetas de zona / experiencia
	   ------------------------------------------------------------ */
	.zone-card {
		position: relative;
		border-radius: var(--radius-m);
		overflow: hidden;
		background-color: var(--c-fog);
	}

	.zone-card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.zone-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(0.86);
		transition: filter 0.25s ease;
	}

	.zone-card:hover .zone-card__media img {
		filter: grayscale(0.2);
	}

	.zone-card__num {
		position: absolute;
		top: 14px;
		left: 14px;
		background-color: var(--c-accent);
		color: var(--c-ink);
		font-family: var(--f-display);
		font-size: 0.8rem;
		padding: 4px 10px;
		border-radius: var(--radius-s);
	}

	.zone-card__body {
		padding: 22px 22px 26px;
	}

	.zone-card__price {
		color: var(--c-accent-2);
		font-family: var(--f-display);
		font-weight: 600;
	}

	@media (prefers-reduced-motion: reduce) {

		.zone-card__media img {
			transition: none;
		}

	}

	/* ------------------------------------------------------------
	   tarjetas de equipo
	   ------------------------------------------------------------ */
	.team-card__media {
		aspect-ratio: 2 / 3;
		overflow: hidden;
		border-radius: var(--radius-m);
		border-bottom: 4px solid var(--c-accent);
	}

	.team-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(0.7);
	}

	.team-card__role {
		color: var(--c-accent-2);
		font-family: var(--f-display);
		font-size: 0.82rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	/* ------------------------------------------------------------
	   contadores (owner JS: signup.js)
	   ------------------------------------------------------------ */
	.stat {
		text-align: left;
	}

	.stat__num {
		font-family: var(--f-display);
		font-size: clamp(2.2rem, 4.4vw, 3.4rem);
		color: var(--c-accent);
		display: block;
	}

	.stat__label {
		color: var(--c-mute);
		font-size: 0.9rem;
	}

	/* ------------------------------------------------------------
	   compare-table (visual)
	   ------------------------------------------------------------ */
	.compare table {
		border: 1px solid var(--c-line);
	}

	.compare caption {
		text-align: left;
		font-family: var(--f-display);
		text-transform: uppercase;
		font-size: 0.85rem;
		color: var(--c-mute);
		margin-bottom: 14px;
	}

	.compare th,
	.compare td {
		padding: 14px 18px;
		border-bottom: 1px solid var(--c-line);
		text-align: left;
	}

	.compare thead th {
		background-color: var(--c-ink);
		color: var(--c-white);
		font-family: var(--f-display);
		text-transform: uppercase;
		font-size: 0.82rem;
		letter-spacing: 0.02em;
	}

	.compare tbody tr:nth-child(even) {
		background-color: var(--c-fog);
	}

	.compare td[data-hl="1"] {
		background-color: var(--c-accent);
		color: var(--c-ink);
		font-weight: 600;
	}

	/* ------------------------------------------------------------
	   puntos del mapa interactivo
	   ------------------------------------------------------------ */
	.map__point button {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background-color: var(--c-accent);
		color: var(--c-ink);
		font-family: var(--f-display);
		font-size: 0.78rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid var(--c-white);
		box-shadow: 0 2px 8px rgba(17, 17, 20, 0.35);
	}

	.map__point button[aria-pressed="true"] {
		background-color: var(--c-ink);
		color: var(--c-accent);
		border-color: var(--c-accent);
	}

	.map__panel {
		padding: 20px 24px;
		border: 1px solid var(--c-line);
		border-left: 4px solid var(--c-accent);
		background-color: var(--c-fog);
	}

	/* ------------------------------------------------------------
	   rail (tarjetas)
	   ------------------------------------------------------------ */
	.rail-card {
		flex: 0 0 auto;
		width: min(74vw, 420px);
		border-radius: var(--radius-m);
		overflow: hidden;
		background-color: var(--c-ink-soft);
		color: var(--c-white);
	}

	.rail-card__media {
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.rail-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(0.7);
	}

	.rail-card__body {
		padding: 22px;
	}

	.rail-card__num {
		color: var(--c-accent);
		font-family: var(--f-display);
		font-size: 0.85rem;
		margin-bottom: 8px;
		display: block;
	}

	/* ------------------------------------------------------------
	   badges / insignias pequenas
	   ------------------------------------------------------------ */
	.badge {
		display: inline-block;
		padding: 4px 12px;
		border: 1px solid var(--c-ink);
		border-radius: 999px;
		font-family: var(--f-display);
		font-size: 0.75rem;
		text-transform: uppercase;
	}

	.badge--accent {
		border-color: var(--c-accent);
		color: var(--c-accent-2);
	}

}