/*
 * Directorio interactivo — Plaza Relox
 *
 * Every rule is scoped to .relox-* or to nodes this plugin creates inside the
 * Elementor containers. It never restyles an Elementor global class: the band,
 * the headings, the map frame and the index frame are all Elementor's.
 *
 * Palette: ink #241F1A · ink-soft #5A5148 · cream-2 #FBF7F0 · peach #E9A063
 *          terracotta #C96A45 · green-800 #0A4B41 · green-600 #126E5D
 */

/* The theme styles every <button>; these are text controls, not buttons. */

.relox-level,
.relox-cat,
.relox-index__clear,
.relox-row,
.relox-card__share,
.relox-zoom button {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	text-transform: none;
	line-height: normal;
}

/*
 * The theme paints every button blue on :hover and :focus
 * (button:focus { background: var(--ast-global-color-1) } = #045cb4).
 * button:focus is (0,1,1), which outranks a bare class, so each control
 * needs its own state rules at (0,2,0) or higher.
 */

.relox-level:hover,
.relox-level:focus,
.relox-level:active,
.relox-cat:hover,
.relox-cat:focus,
.relox-cat:active {
	background-color: transparent;
	color: #241f1a;
	border-bottom-color: rgba(36, 31, 26, 0.3);
}

.relox-level[aria-selected="true"]:hover,
.relox-level[aria-selected="true"]:focus,
.relox-level[aria-selected="true"]:active {
	border-bottom-color: #e9a063;
}

.relox-cat[aria-pressed="true"]:hover,
.relox-cat[aria-pressed="true"]:focus,
.relox-cat[aria-pressed="true"]:active {
	border-bottom-color: #241f1a;
}

.relox-row:hover,
.relox-row:focus,
.relox-row:active {
	background-color: rgba(36, 31, 26, 0.035);
	color: #241f1a;
	border-bottom-color: rgba(36, 31, 26, 0.08);
}

.relox-row.is-active:hover,
.relox-row.is-active:focus,
.relox-row.is-active:active {
	background-color: rgba(233, 160, 99, 0.16);
}

.relox-index__clear:hover,
.relox-index__clear:focus,
.relox-index__clear:active {
	background-color: transparent;
	color: #b25a37;
}

.relox-card__share:hover,
.relox-card__share:focus,
.relox-card__share:active {
	background-color: transparent;
	color: #062f29;
}

.relox-card__go:hover,
.relox-card__go:focus,
.relox-card__go:active {
	background-color: transparent;
	color: #b25a37;
}

.relox-zoom button:hover,
.relox-zoom button:focus,
.relox-zoom button:active {
	background-color: #f6efe4;
	color: #241f1a;
	border-color: rgba(36, 31, 26, 0.12);
}

.relox-zoom button[disabled]:hover,
.relox-zoom button[disabled]:focus,
.relox-zoom button[disabled]:active {
	background-color: transparent;
	color: rgba(90, 81, 72, 0.3);
}

/* the theme also removes the focus ring; give keyboard users one back */

.relox-level:focus-visible,
.relox-cat:focus-visible,
.relox-row:focus-visible,
.relox-index__clear:focus-visible,
.relox-card__go:focus-visible,
.relox-card__share:focus-visible,
.relox-zoom button:focus-visible {
	outline: 2px solid #0a4b41;
	outline-offset: -2px;
}

/* ── toolbar ─────────────────────────────────────────────────────────── */

.relox-bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	border-bottom: 1px solid rgba(36, 31, 26, 0.16);
}

.relox-levels {
	display: flex;
	gap: 30px;
}

.relox-level {
	padding: 0 0 11px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 1.5px solid transparent;
	background: transparent;
	font-family: inherit;
	font-size: 15.5px;
	letter-spacing: 0.01em;
	color: #5a5148;
	white-space: nowrap;
	cursor: pointer;
}

.relox-level[aria-selected="true"] {
	color: #241f1a;
	border-bottom-color: #e9a063;
}

.relox-search {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 250px;
	padding-bottom: 11px;
}

.relox-search svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: rgba(90, 81, 72, 0.55);
}

.relox-search input {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: #241f1a;
}

.relox-search input::placeholder {
	color: rgba(90, 81, 72, 0.55);
}

.relox-search input:focus {
	outline: none;
}

.relox-cats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 16px 0 22px;
}

.relox-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.relox-cat {
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	color: #5a5148;
	cursor: pointer;
}

.relox-cat[aria-pressed="true"] {
	color: #241f1a;
	border-bottom-color: #241f1a;
}

.relox-count {
	margin: 0;
	font-size: 13px;
	color: #5a5148;
	white-space: nowrap;
}

/* ── map ─────────────────────────────────────────────────────────────── */

.relox-viewport {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 30px 30px;
	overflow: hidden;
}

.relox-viewport--zoomed {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
}

.relox-viewport::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.relox-viewport::-webkit-scrollbar-thumb {
	background: rgba(36, 31, 26, 0.16);
	border-radius: 4px;
}

.relox-inner {
	flex: none;
	width: 100%;
}

.relox-figure-off {
	display: none !important;
}

.relox-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.relox-shape {
	pointer-events: auto;
	cursor: pointer;
	stroke: #c96a45;
	stroke-width: 3;
	stroke-linejoin: round;
	fill-opacity: 0.014;
	stroke-opacity: 0;
	transition: fill-opacity 0.15s ease, stroke-opacity 0.15s ease;
}

.relox-shape--in {
	fill-opacity: 0.075;
}

.relox-shape--in.relox-shape--free {
	fill-opacity: 0.1;
}

.relox-shape.is-active {
	fill: #e9a063 !important;
	fill-opacity: 0.5;
	stroke-opacity: 1;
}

.relox-shape:focus {
	outline: none;
}

.relox-shape:focus-visible {
	outline: 2px solid #0a4b41;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.relox-shape {
		transition: none;
	}
}

.relox-caption {
	position: absolute;
	top: 16px;
	left: 18px;
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5a5148;
}

.relox-zoom {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(36, 31, 26, 0.16);
	border-radius: 3px;
	overflow: hidden;
	background: #ffffff;
}

.relox-zoom button {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #241f1a;
	cursor: pointer;
}

.relox-zoom button + button {
	border-top: 1px solid rgba(36, 31, 26, 0.12);
}

.relox-zoom button:hover {
	background: #f6efe4;
}

.relox-zoom button[disabled] {
	color: rgba(90, 81, 72, 0.3);
	cursor: default;
}

.relox-zoom button[disabled]:hover {
	background: transparent;
}

.relox-zoom svg {
	width: 15px;
	height: 15px;
}

.relox-zoom__pct {
	position: absolute;
	top: 136px;
	right: 16px;
	margin: 0;
	width: 38px;
	text-align: center;
	font-size: 11px;
	color: rgba(90, 81, 72, 0.55);
}

.relox-legend {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.relox-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: #5a5148;
}

.relox-legend i {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.relox-legend i.is-taken {
	background: rgba(36, 31, 26, 0.16);
}

.relox-legend i.is-free {
	background: rgba(18, 110, 93, 0.28);
}

.relox-hint {
	position: absolute;
	left: 18px;
	bottom: 18px;
	margin: 0;
	font-size: 13px;
	color: rgba(90, 81, 72, 0.55);
}

/* ── card, inside the map ────────────────────────────────────────────── */

.relox-card {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 3;
	width: 302px;
	padding: 18px 20px 16px;
	background: #ffffff;
	border: 1px solid rgba(36, 31, 26, 0.16);
	border-radius: 3px;
	box-shadow: 0 14px 34px rgba(6, 47, 41, 0.13);
	font-family: "Jost", system-ui, sans-serif;
	color: #241f1a;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.relox-card.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.relox-card {
		transition: none;
	}
}

.relox-card__idrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 22px;
	margin: 0 0 12px;
}

.relox-card__contact {
	list-style: none;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(36, 31, 26, 0.1);
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.relox-card__contact li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	line-height: 1.35;
	color: #5a5148;
	min-width: 0;
}

.relox-card__contact svg {
	flex: none;
	width: 13px;
	height: 13px;
	color: #0a4b41;
}

.relox-card__contact a,
.relox-card__contact span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.relox-card__contact a {
	color: #241f1a;
	text-decoration: none;
	border-bottom: 1px solid rgba(36, 31, 26, 0.22);
}

.relox-card__contact a:hover,
.relox-card__contact a:focus-visible {
	color: #c96a45;
	border-bottom-color: #c96a45;
}

.relox-card__ids {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
}

.relox-card__cat,
.relox-card__local,
.relox-card__sep {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* the giro leads, in the accent the rest of the card uses for links */
.relox-card__cat {
	color: #c96a45;
}

.relox-card__sep {
	color: rgba(90, 81, 72, 0.4);
	letter-spacing: 0;
}

/* the unit codes stay quiet behind it */
.relox-card__local {
	color: #5a5148;
	white-space: normal;
}

.relox-card__free {
	flex: none;
	padding: 4px 10px;
	border: 1px solid rgba(18, 110, 93, 0.3);
	border-radius: 3px;
	background: rgba(18, 110, 93, 0.1);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0a4b41;
}

.relox-card__name {
	margin: 0 0 6px;
	padding-right: 22px;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.12;
	color: #241f1a;
}

.relox-card__meta {
	margin: 0 0 12px;
	font-size: 13px;
	color: #5a5148;
}

.relox-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #241f1a;
}

.relox-card__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.relox-card__go,
.relox-card__share {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.relox-card__go {
	color: #c96a45;
}

.relox-card__go:hover {
	color: #b25a37;
}

.relox-card__share {
	color: #0a4b41;
}

.relox-card__share:hover {
	color: #062f29;
}

.relox-card__go svg,
.relox-card__share svg {
	width: 13px;
	height: 13px;
}

/* ── index ───────────────────────────────────────────────────────────── */

.relox-index__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(36, 31, 26, 0.12);
}

.relox-index__title {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #0a4b41;
}

.relox-index__clear {
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 12.5px;
	color: #c96a45;
	cursor: pointer;
}

.relox-index__list {
	flex-grow: 1;
	overflow-y: auto;
}

.relox-index__list::-webkit-scrollbar {
	width: 4px;
}

.relox-index__list::-webkit-scrollbar-thumb {
	background: rgba(36, 31, 26, 0.14);
	border-radius: 2px;
}

.relox-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid rgba(36, 31, 26, 0.08);
	background: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.13s ease;
}

.relox-row:hover {
	background: rgba(36, 31, 26, 0.035);
}

.relox-row.is-active {
	background: rgba(233, 160, 99, 0.16);
	box-shadow: inset 2px 0 0 #e9a063;
}

.relox-row__name {
	margin: 0 0 2px;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
	color: #241f1a;
}

.relox-row__cat {
	margin: 0;
	font-size: 12.5px;
	color: #5a5148;
}

.relox-row__local {
	flex: none;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(90, 81, 72, 0.55);
	white-space: nowrap;
}

.relox-empty {
	margin: 0;
	padding: 34px 20px;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5a5148;
}

/* ── tablet / mobile ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.relox-search {
		width: 200px;
	}
}

@media (max-width: 767px) {
	.relox-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.relox-bar::-webkit-scrollbar {
		display: none;
	}

	.relox-levels {
		gap: 26px;
	}

	.relox-level {
		height: 44px;
		padding: 0 0 10px;
		font-size: 14.5px;
	}

	.relox-search {
		width: 100%;
		padding: 10px 0;
	}

	.relox-cats {
		display: block;
		padding: 15px 0 14px;
	}

	.relox-cats__list {
		flex-wrap: nowrap;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.relox-cats__list::-webkit-scrollbar {
		display: none;
	}

	.relox-cat {
		height: 44px;
		white-space: nowrap;
	}

	.relox-count {
		margin-top: 10px;
	}

	.relox-viewport {
		padding: 36px 14px 14px;
	}

	.relox-caption {
		top: 13px;
		left: 15px;
		font-size: 10.5px;
	}

	.relox-zoom {
		top: 12px;
		right: 12px;
	}

	.relox-zoom button {
		width: 44px;
		height: 44px;
	}

	.relox-zoom__pct,
	.relox-legend,
	.relox-hint {
		display: none;
	}

	.relox-card {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 14px 16px 13px;
	}

	.relox-card__name {
		font-size: 22px;
	}

	.relox-card__desc {
		display: none;
	}

	.relox-card__contact {
		gap: 6px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.relox-card__actions {
		gap: 20px;
		margin-top: 11px;
		padding-top: 11px;
	}

	.relox-card__go,
	.relox-card__share {
		height: 44px;
	}

	.relox-row {
		min-height: 64px;
	}
}