@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/static/fonts/roboto-latin.665db5e157d2.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/static/fonts/bricolage-latin.ada540c0e24a.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@view-transition {
	navigation: auto;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--bg);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-3xl);
}

h2 {
	font-size: var(--fs-2xl);
}

h3 {
	font-size: var(--fs-xl);
}

h4 {
	font-size: var(--fs-lg);
}

p {
	text-wrap: pretty;
}

/* :where() deja la regla sin especificidad: cualquier clase que fije su
   propio color (el pie, los botones) gana sin pelear. */
a:where(:not([class*="inline-flex"]):not([class*="text-"]):not(.ui-btn)) {
	color: var(--accent-text);
	text-decoration: none;
}

a:not([class*="inline-flex"]):not([class*="text-"]):not(.ui-btn):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-5) var(--s-4);
	container-type: inline-size;
}

/* En capa: sin @layer, esta regla pesaria mas que las utilidades de ui.css
   y las pisaria (era el caso de pl-8 en el buscador del selectbox). */
@layer base {
	input,
	select,
	textarea {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		padding: var(--s-2) var(--s-3);
		font-size: 1rem;
		transition: border-color var(--dur-1) var(--ease);
	}

	input:hover,
	select:hover,
	textarea:hover {
		border-color: var(--line-strong);
	}

	input:focus,
	select:focus,
	textarea:focus {
		border-color: var(--accent);
	}
}

input[type="file"] {
	padding: var(--s-1) 0;
	border: none;
}

/* Estilo por defecto de los botones del sitio. Los filtros van dentro de
   :where() para que la regla pese lo mismo que un selector de elemento: asi
   cualquier boton con clase propia (galeria, HUD del tour, carrusel, lightbox)
   la pisa sin tener que inflar su especificidad. */
/* Sin estilo global de <button>: los botones de plantilla llevan .ui-btn y
   los de React traen el suyo. Un boton pelado (la foto de la galeria, las
   miniaturas) no tiene que salir en verde con relleno. El HUD del visor
   define su propio lime en tour.css. */

/* Corazon de favoritos: en rojo cuando el anuncio ya esta guardado. El :hover
   propio evita que las utilities hover:text-* del boton templUI lo apaguen. */
button.favourite-button-active,
button.favourite-button-active:hover {
	color: var(--danger);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th {
	text-align: left;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

td,
th {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--line);
}

tbody tr:hover {
	background: var(--bg-sunken);
}

img,
video {
	max-width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
}

.error {
	color: var(--danger);
	font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

.skip-link {
	position: absolute;
	left: -999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	top: var(--s-2);
	left: var(--s-2);
	width: auto;
	height: auto;
	padding: var(--s-2) var(--s-4);
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--r-md);
	z-index: var(--z-modal);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-hud);
	background: color-mix(in srgb, var(--surface) 85%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	container-type: inline-size;
	box-shadow: none;
	transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

@container (max-width: 40rem) {}

.account-menu,
.lang-menu {
	position: relative;
}

.icon {
	flex: none;
	vertical-align: -.2em;
	width: 20px;
	height: 20px;
}

/* Solo el panel del editor apila sus formularios con la regla global: fuera
   de el cada formulario React trae su propio layout y un flex-column aqui
   estiraba los botones de envio a todo el ancho. */
.editor-panel form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: none;
}

label {
	font-weight: 600;
	font-size: 0.9rem;
}

fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-4);
}

legend {
	padding-inline: var(--s-2);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.account-page {
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.empty-state {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-7) var(--s-4);
	text-align: center;
	color: var(--ink-soft);
}

.empty-state .btn-ghost {
	display: inline-block;
	margin-block-start: var(--s-4);
}

.tour-page {
	position: fixed;
	inset: 0;
	z-index: var(--z-panel);
	background: #000;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.tour-stage {
	position: relative;
	flex: 1;
	height: 100%;
}

.tour-viewer {
	width: 100%;
	height: 100%;
	background-color: #000;
	background-size: cover;
	background-position: center;
}

.tour-hud,
.tour-hotspot-panel,
.tour-contact-panel {
	background: var(--vr-glass);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid var(--vr-glass-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-hud);
	color: var(--vr-ink);
}

@keyframes tour-panel-in {
	from {
		transform: translateX(-50%) scale(0.96);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}
}

.tour-hud button {
	background: color-mix(in srgb, var(--vr-ink) 12%, transparent);
	color: var(--vr-ink);
	border: 1px solid var(--vr-glass-line);
}

.tour-hud .tour-exit, .tour-hud .tour-preview {
	display: inline-block;
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--vr-ink) 12%, transparent);
	color: var(--vr-ink);
	border: 1px solid var(--vr-glass-line);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.tour-hud-bottom {
	position: fixed;
	bottom: var(--s-4);
	left: var(--s-4);
	right: var(--s-4);
	z-index: var(--z-hud);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	flex-wrap: wrap;
}

.tour-hud .tour-scene-switcher {
	display: flex;
	/* El estilo base envuelve; en el HUD es una tira de una fila con scroll,
	   si no en movil las miniaturas forman una pared que tapa la escena. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tour-hud .tour-scene-thumb {
	scroll-snap-align: center;
	flex-shrink: 0;
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.tour-hud .tour-scene-thumb-active {
	border-color: var(--accent);
	transform: scale(1.06);
}

.tour-hud .tour-scene-thumb-placeholder {
	position: relative;
}

.tour-hud .tour-scene-thumb-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--vr-bg) 85%, transparent), transparent 60%);
}

.tour-veil {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vr-bg);
	transition: opacity var(--dur-3) var(--ease);
}

/* En el editor el velo solo tapa el escenario, nunca el panel que dice por
   donde va el tejido. */
.tour-veil-stage {
	position: absolute;
	flex-direction: column;
	gap: var(--s-3);
	color: var(--vr-ink);
}

.tour-veil-progress {
	width: min(320px, 70%);
}

.tour-veil-detail {
	font-size: var(--fs-sm);
	opacity: .8;
}

.tour-veil-out {
	opacity: 0;
	pointer-events: none;
}

.tour-veil-bg {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	filter: blur(20px);
}

.tour-veil-spinner {
	position: relative;
	width: 48px;
	height: 48px;
	border: 3px solid var(--vr-glass-line);
	border-top-color: var(--accent);
	border-radius: var(--r-full);
	animation: tour-veil-spin 800ms linear infinite;
}

@keyframes tour-veil-spin {
	to {
		transform: rotate(360deg);
	}
}

.tour-controls {
	display: flex;
	gap: var(--s-2);
}

.tour-controls button {
	transition: transform var(--dur-1) var(--ease);
}

.tour-controls button:hover {
	transform: scale(1.06);
}

.tour-controls button:active {
	transform: scale(0.96);
}

.tour-actions {
	display: flex;
	gap: var(--s-2);
}

.tour-stats {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-left: auto;
}

.tour-hits {
	font-size: var(--fs-xs);
	color: var(--vr-ink);
	opacity: 0.85;
	white-space: nowrap;
}

.tour-map-toggle {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
}

.tour-map-collapsed img,
.tour-map-collapsed .tour-map-pin {
	display: none;
}

.tour-map-pin-active {
	animation: tour-pin-pulse 2s infinite;
}

@keyframes tour-pin-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
	}
	50% {
		box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
	}
}

.tour-scene-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tour-scene-thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	width: 96px;
	height: 64px;
}

.tour-scene-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tour-scene-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #e0e0e0;
	color: #1a1a1a;
	font-size: 0.75rem;
	text-align: center;
	padding: 0.25rem;
}

.tour-hotspot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	background-size: cover;
	background-position: center;
	border: 2px solid #0a5f38;
	cursor: pointer;
}

.tour-hotspot-panel {
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 1rem;
	animation: tour-panel-in var(--dur-2) var(--ease);
}

.tour-hotspot-panel-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tour-hotspot-panel-photos img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
}

.tour-hotspot-panel-link {
	display: block;
	margin: var(--s-2) 0;
	color: var(--accent-text);
	word-break: break-all;
}

.tour-embed {
	width: 200px;
	transform-origin: center;
}

.tour-embed img,
.tour-embed video {
	width: 100%;
	display: block;
}

.tour-map {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 200px;
}

.tour-map img {
	width: 100%;
	display: block;
	border-radius: 4px;
}

.tour-map-pin {
	position: absolute;
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: 2px solid #0a5f38;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.tour-map-pin-active {
	background: #0a5f38;
	border-color: #fff;
}

.tour-marquee {
	position: fixed;
	top: 0;
	padding-right: var(--s-4);
	left: 0;
	width: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.5rem 0;
	white-space: nowrap;
	z-index: 10;
}

.tour-marquee-text {
	display: inline-block;
	padding-left: 100%;
	animation: tour-marquee-scroll 15s linear infinite;
}

@keyframes tour-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.tour-logo {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10;
}

.tour-logo img {
	max-height: 48px;
	display: block;
}

.tour-intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-intro-media {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
}

.tour-intro-enter {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
}

.tour-intro-countdown {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: #fff;
}

.tour-contact-btn {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 10;
}

.tour-contact-panel {
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 480px;
	width: 90%;
	padding: 1rem;
	z-index: 20;
	animation: tour-panel-in var(--dur-2) var(--ease);
}

.tour-stage-editor {
	height: 100%;
}

.tour-editor {
	display: grid;
	grid-template-columns: 1fr min(380px, 38vw);
}

.tour-editor .tour-hud-bottom {
	right: calc(min(380px, 38vw) + var(--s-4));
}

@container (max-width: 60rem) {
	.tour-editor {
		grid-template-columns: 1fr;
	}
}

.editor-panel {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-y: auto;
	background: var(--surface);
	border-left: 1px solid var(--line);
}

.editor-section {
	padding: var(--s-3);
	border-bottom: 1px solid var(--line);
}

.editor-form-error {
	color: var(--danger, #b42318);
	font-size: var(--fs-sm);
	margin: var(--s-2) 0 0;
}

.editor-section h2 {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 var(--s-2);
	letter-spacing: 0.04em;
	font-weight: 600;
}

.editor-section summary {
	cursor: pointer;
	list-style: none;
}

.editor-section summary::-webkit-details-marker {
	display: none;
}

.editor-section summary::after {
	content: "▾";
	display: inline-block;
	margin-left: var(--s-2);
	transition: transform var(--dur-1) var(--ease);
}

.editor-section[open] summary::after {
	transform: rotate(180deg);
}

.editor-section-help {
	font-size: var(--fs-sm);
	color: var(--ink-faint);
	margin: 0;
}

.editor-checklist ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.editor-checklist a {
	text-decoration: none;
}

.editor-section:has(:focus-within) {
	box-shadow: inset 2px 0 0 var(--accent);
}

.editor-section label {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--fs-sm);
	color: var(--ink-faint);
	margin-bottom: var(--s-2);
}

.editor-section input[type="text"],
.editor-section input[type="url"],
.editor-section input[type="number"],
.editor-section select,
.editor-section textarea {
	width: 100%;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: var(--s-1) var(--s-2);
	font-size: var(--fs-sm);
	background: var(--surface);
	color: var(--ink);
}

.editor-section button:not(.editor-toggle) {
	padding: var(--s-1) var(--s-3);
	font-size: var(--fs-sm);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	font-weight: 500;
	cursor: pointer;
}

.editor-section button:not(.editor-toggle):hover {
	background: var(--accent-soft);
}

.editor-section form > button[type="submit"]:not(.editor-toggle) {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}

.editor-section .editor-toggle {
	padding: var(--s-1) var(--s-3);
	font-size: var(--fs-sm);
	font-weight: 500;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--ink-faint);
}

.editor-section .editor-toggle::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--r-full);
	background: var(--line-strong);
	margin-right: var(--s-1);
	vertical-align: baseline;
}

.editor-section .editor-toggle-on {
	background: var(--accent-soft);
	color: var(--ink);
	border-color: var(--accent);
}

.editor-section .editor-toggle-on::before {
	background: var(--accent);
}

.editor-place-btn {
	width: 100%;
}

.editor-place-btn-active {
	background: var(--accent-soft);
	outline: 2px solid var(--accent);
}

.editor-config-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.editor-audio-scenes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.editor-audio-inherit {
	color: #666;
	font-size: 0.85rem;
}

#editor-hotspot-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-hotspot-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

.editor-hotspot-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.editor-hotspot-photos img {
	width: 60px;
	height: 45px;
	object-fit: cover;
	border-radius: 4px;
}

#editor-embed-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-embed-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

.btn-ghost {
	background: transparent;
	border: 1px solid var(--line-strong);
	color: var(--ink);
}

.badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	padding: var(--s-1) var(--s-2);
	background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.badge-ok {
	background: color-mix(in srgb, var(--ok) 16%, transparent);
	color: var(--ok);
}

.badge-muted {
	background: color-mix(in srgb, var(--ink-faint) 16%, transparent);
	color: var(--ink-faint);
}

.tag {
	display: inline-flex;
	padding: var(--s-1) var(--s-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: var(--fs-xs);
	color: var(--ink-soft);
}

.page-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-block-end: var(--s-5);
}

.page-head h1,
.page-head h2 {
	color: var(--navy);
}

.page-head-cta {
	font-weight: 600;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.page-head p {
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: center;
}

@container (max-width: 48rem) {

}

.order-button {
	width: 100%;
}

.ad-pagination,
.admin-ads-pagination,
.admin-users-pagination {
	display: flex;
	gap: var(--s-1);
}

.ad-pagination a,
.admin-ads-pagination a,
.admin-users-pagination a {
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
}

.ad-pagination-current,
.admin-ads-pagination-current,
.admin-users-pagination-current {
	background: var(--accent);
	color: var(--accent-ink);
}

.ad-video {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.ad-video video {
	width: 100%;
	border-radius: var(--r-md);
}

.ad-form-map {
	height: 320px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.ad-orders {
	color: var(--ink-soft);
}

.material-title {
	font-weight: 600;
	font-size: var(--fs-sm);
}