/*
Theme Name: Visor 3D Demo
Theme URI: https://northblueagency.com
Author: North Blue Agency
Description: Sitio demo del plugin visor3d: home con el visor embebido, proyecto demo y contacto. Basado en el esqueleto del theme de North Blue.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: visor3d-demo
*/

/* ==========================================================================
   1. Design tokens
   --------------------------------------------------------------------------
   Sober and premium: warm stone neutrals, near-black ink and one deep blue
   accent. The accent stays away from green and amber on purpose, because
   those belong to the unit states in the viewer (disponible, reservado).

   Contrast (WCAG AA, checked): muted on white 6.3:1, muted on stone 5.6:1,
   accent on white 9.6:1, white on accent 9.6:1, muted-on-dark on ink 8.2:1.
   The reserved and sold state colours are fills only: text on them is ink.

   Nothing below this block hardcodes a colour.
   ========================================================================== */

:root {
	/* Neutrals */
	--v3dd-ink: #14171c;
	--v3dd-ink-soft: #2b3038;
	--v3dd-muted: #5a616b;
	--v3dd-line: #e3ded6;
	--v3dd-stone: #f4f1ec;
	--v3dd-stone-deep: #e9e4dc;
	--v3dd-white: #ffffff;

	/* Accent */
	--v3dd-accent: #24408e;
	--v3dd-accent-deep: #1a2f6b;
	--v3dd-accent-soft: #e8ecf6;
	--v3dd-accent-on-dark: #9fb3ec;

	/* Dark surfaces */
	--v3dd-night: #14171c;
	--v3dd-night-raised: #1d2128;
	--v3dd-on-dark: #f4f1ec;
	--v3dd-on-dark-muted: #a9b0ba;
	--v3dd-line-on-dark: rgba(244, 241, 236, 0.14);
	--v3dd-gradient-night: linear-gradient(160deg, #1c2129 0%, #14171c 60%, #0e1014 100%);
	--v3dd-gradient-accent: linear-gradient(160deg, #2c4ba0 0%, #1a2f6b 100%);

	/* Unit states, shared with the viewer's legend */
	--v3dd-status-available: #1f7a52;
	--v3dd-status-reserved: #b8791a;
	--v3dd-status-sold: #8c929a;

	/* Third-party brand colour, only where its own button needs it */
	--v3dd-whatsapp: #1f9d55;

	/* Type */
	--v3dd-font: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--v3dd-text-xs: 0.75rem;
	--v3dd-text-sm: 0.875rem;
	--v3dd-text-base: 1rem;
	--v3dd-text-lg: 1.125rem;
	--v3dd-text-xl: 1.25rem;
	--v3dd-text-2xl: 1.5rem;
	--v3dd-text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	--v3dd-text-4xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	--v3dd-text-5xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
	--v3dd-tracking-tight: -0.025em;
	--v3dd-tracking-wide: 0.14em;

	/* Space and shape */
	--v3dd-gutter: 1rem;
	--v3dd-container: 76rem;
	--v3dd-container-narrow: 46rem;
	--v3dd-section-y: clamp(4rem, 3rem + 4vw, 7rem);
	--v3dd-radius-sm: 4px;
	--v3dd-radius: 8px;
	--v3dd-radius-lg: 14px;
	--v3dd-radius-full: 999px;
	--v3dd-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
	--v3dd-shadow: 0 6px 24px -8px rgba(20, 23, 28, 0.14);
	--v3dd-shadow-lg: 0 24px 48px -16px rgba(20, 23, 28, 0.22);

	/* Chrome */
	--v3dd-header-height: 64px;
	--v3dd-focus: 0 0 0 3px var(--v3dd-white), 0 0 0 5px var(--v3dd-accent);

	/* Motion */
	--v3dd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--v3dd-reveal-duration: 0.7s;
}

@media (min-width: 768px) {
	:root {
		--v3dd-gutter: 2rem;
		--v3dd-header-height: 76px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--v3dd-header-height) + 1rem);
}

body {
	margin: 0;
	background: var(--v3dd-white);
	color: var(--v3dd-ink);
	font-family: var(--v3dd-font);
	font-size: var(--v3dd-text-base);
	line-height: 1.6;
	font-feature-settings: 'cv11', 'ss01';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.v3dd-scroll-locked {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--v3dd-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--v3dd-accent-deep);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: none;
	box-shadow: var(--v3dd-focus);
	border-radius: var(--v3dd-radius-sm);
}

::selection {
	background: var(--v3dd-accent-soft);
	color: var(--v3dd-ink);
}

/*
 * `clip`, not `hidden`: an armed reveal sliding in from the side would
 * otherwise widen the page on a phone, and `clip` keeps position: sticky
 * working inside.
 */
.v3dd-main {
	display: block;
	min-height: 60vh;
	overflow-x: clip;
}

.v3dd-main:focus {
	box-shadow: none;
}

.v3dd-icon {
	flex-shrink: 0;
}

/* ==========================================================================
   3. Utilities and accessibility
   ========================================================================== */

.v3dd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.v3dd-skip-link {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--v3dd-ink);
	color: var(--v3dd-white);
	border-radius: var(--v3dd-radius);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.2s var(--v3dd-ease);
}

.v3dd-skip-link:focus {
	transform: none;
	color: var(--v3dd-white);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.v3dd-container {
	width: 100%;
	max-width: calc(var(--v3dd-container) + 2 * var(--v3dd-gutter));
	margin-inline: auto;
	padding-inline: var(--v3dd-gutter);
}

.v3dd-container--narrow {
	max-width: calc(var(--v3dd-container-narrow) + 2 * var(--v3dd-gutter));
}

.v3dd-section {
	position: relative;
	padding-block: var(--v3dd-section-y);
	background: var(--v3dd-white);
}

.v3dd-section--light {
	background: var(--v3dd-white);
}

.v3dd-section--muted {
	background: var(--v3dd-stone);
}

.v3dd-section--brand,
.v3dd-section--dark {
	background: var(--v3dd-gradient-night);
	color: var(--v3dd-on-dark);
}

.v3dd-section--tall {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.v3dd-section__header {
	max-width: 44rem;
	margin: 0 auto 3rem;
	text-align: center;
}

.v3dd-section__header > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: var(--v3dd-tracking-tight);
	color: inherit;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

.v3dd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	font-size: var(--v3dd-text-xs);
	font-weight: 600;
	letter-spacing: var(--v3dd-tracking-wide);
	text-transform: uppercase;
	color: var(--v3dd-accent);
}

.v3dd-eyebrow::before {
	content: '';
	width: 1.5rem;
	height: 1px;
	background: currentColor;
}

.v3dd-section__header .v3dd-eyebrow {
	justify-content: center;
}

.v3dd-heading-lg {
	font-size: var(--v3dd-text-4xl);
}

.v3dd-heading-xl {
	font-size: var(--v3dd-text-5xl);
	line-height: 1.04;
}

.v3dd-lead {
	font-size: var(--v3dd-text-lg);
	line-height: 1.65;
	color: var(--v3dd-muted);
}

/*
 * The accent half of a heading. The class name comes from the North Blue
 * skeleton, where it was a gradient; here it is the accent colour, which
 * reads as emphasis without competing with the viewer.
 */
.v3dd-gradient-text {
	color: var(--v3dd-accent);
}

.v3dd-gradient-text--block {
	display: block;
}

/* On dark backgrounds the accent lightens to keep its contrast. */
.v3dd-section--brand .v3dd-gradient-text,
.v3dd-section--dark .v3dd-gradient-text,
.v3dd-section--brand .v3dd-eyebrow,
.v3dd-section--dark .v3dd-eyebrow {
	color: var(--v3dd-accent-on-dark);
}

.v3dd-section--brand .v3dd-lead,
.v3dd-section--dark .v3dd-lead {
	color: var(--v3dd-on-dark-muted);
}

/* ==========================================================================
   5b. Prose
   --------------------------------------------------------------------------
   The readable column for posts and plain pages written with core blocks.
   ========================================================================== */

.v3dd-prose {
	font-size: var(--v3dd-text-lg);
	line-height: 1.75;
	color: var(--v3dd-ink-soft);
}

.v3dd-prose > * + * {
	margin-top: 1.25em;
}

.v3dd-prose h2 {
	margin-top: 2.2em;
	font-size: var(--v3dd-text-3xl);
	color: var(--v3dd-ink);
}

.v3dd-prose h3 {
	margin-top: 1.8em;
	font-size: var(--v3dd-text-2xl);
	color: var(--v3dd-ink);
}

.v3dd-prose p,
.v3dd-prose ul,
.v3dd-prose ol {
	margin-bottom: 0;
}

.v3dd-prose ul,
.v3dd-prose ol {
	padding-left: 1.25em;
}

.v3dd-prose li + li {
	margin-top: 0.4em;
}

.v3dd-prose blockquote {
	margin-inline: 0;
	padding-left: 1.25em;
	border-left: 2px solid var(--v3dd-accent);
	color: var(--v3dd-ink);
	font-size: var(--v3dd-text-xl);
}

.v3dd-prose img,
.v3dd-prose figure {
	border-radius: var(--v3dd-radius);
}

.v3dd-prose figure {
	margin-inline: 0;
}

.v3dd-prose figcaption {
	margin-top: 0.6em;
	font-size: var(--v3dd-text-sm);
	color: var(--v3dd-muted);
}

.v3dd-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--v3dd-text-base);
}

.v3dd-prose th,
.v3dd-prose td {
	padding: 0.75em;
	border-bottom: 1px solid var(--v3dd-line);
	text-align: left;
}

.v3dd-prose th {
	font-weight: 600;
	color: var(--v3dd-ink);
}

/* Below 640px main.js labels each cell from the header row and the table
   becomes a stack of cards. */
@media (max-width: 639px) {
	.v3dd-prose thead {
		display: none;
	}

	.v3dd-prose tr {
		display: block;
		padding: 0.75em 0;
		border-bottom: 1px solid var(--v3dd-line);
	}

	.v3dd-prose td {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		padding: 0.3em 0;
		border: 0;
	}

	.v3dd-prose td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--v3dd-ink);
	}
}

/* ==========================================================================
   5c. Listings and articles
   ========================================================================== */

.v3dd-postgrid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.v3dd-postgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.v3dd-postgrid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.v3dd-postcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--v3dd-white);
	border: 1px solid var(--v3dd-line);
	border-radius: var(--v3dd-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.3s var(--v3dd-ease), transform 0.3s var(--v3dd-ease);
}

.v3dd-postcard:hover {
	box-shadow: var(--v3dd-shadow);
	transform: translateY(-2px);
}

.v3dd-postcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--v3dd-stone);
}

.v3dd-postcard__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v3dd-postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

.v3dd-postcard__meta {
	display: flex;
	gap: 0.75rem;
	font-size: var(--v3dd-text-sm);
	color: var(--v3dd-muted);
}

.v3dd-postcard__category {
	font-weight: 600;
	text-decoration: none;
}

.v3dd-postcard__title {
	font-size: var(--v3dd-text-xl);
}

.v3dd-postcard__title a {
	color: var(--v3dd-ink);
	text-decoration: none;
}

.v3dd-postcard__excerpt {
	flex: 1;
	color: var(--v3dd-muted);
}

.v3dd-postcard__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
}

.v3dd-article__meta {
	margin-bottom: 2rem;
	font-size: var(--v3dd-text-sm);
	color: var(--v3dd-muted);
}

.v3dd-article__pages {
	margin-top: 2rem;
}

.v3dd-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

.nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
}

.nav-links .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--v3dd-line);
	border-radius: var(--v3dd-radius);
	color: var(--v3dd-ink);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--v3dd-ink);
	border-color: var(--v3dd-ink);
	color: var(--v3dd-white);
}

/*
 * A card for core blocks: the group the page seeders put in the media column
 * of a split section, holding a small heading and a ticked list.
 */
.v3dd-card {
	padding: 2rem;
	background: var(--v3dd-white);
	border: 1px solid var(--v3dd-line);
	border-radius: var(--v3dd-radius-lg);
}

.v3dd-card > :first-child {
	margin-top: 0;
}

.v3dd-card h3 {
	margin-bottom: 1.25rem;
	font-size: var(--v3dd-text-xl);
}

.v3dd-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.v3dd-card li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.75rem;
	border-top: 1px solid var(--v3dd-line);
	color: var(--v3dd-ink-soft);
}

.v3dd-card li::before {
	content: '';
	position: absolute;
	left: 0.25rem;
	top: 1.2rem;
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid var(--v3dd-accent);
	border-bottom: 2px solid var(--v3dd-accent);
	transform: rotate(-45deg);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.v3dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.7rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--v3dd-radius);
	font-size: var(--v3dd-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--v3dd-ease);
}

.v3dd-btn:hover {
	text-decoration: none;
}

.v3dd-btn:active {
	transform: translateY(1px);
}

.v3dd-btn--lg {
	min-height: 52px;
	padding: 0.9rem 1.6rem;
	font-size: var(--v3dd-text-base);
}

.v3dd-btn__icon {
	transition: transform 0.2s var(--v3dd-ease);
}

.v3dd-btn:hover .v3dd-btn__icon {
	transform: translateX(3px);
}

/* Primary: the accent, solid. */
.v3dd-btn--primary {
	background: var(--v3dd-accent);
	color: var(--v3dd-white);
}

.v3dd-btn--primary:hover {
	background: var(--v3dd-accent-deep);
	color: var(--v3dd-white);
}

/* Ink: secondary on light surfaces, outline in tinta. */
.v3dd-btn--ink {
	background: transparent;
	border-color: var(--v3dd-ink);
	color: var(--v3dd-ink);
}

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

/* Outline in the accent colour. */
.v3dd-btn--outline-brand {
	background: transparent;
	border-color: var(--v3dd-accent);
	color: var(--v3dd-accent);
}

.v3dd-btn--outline-brand:hover {
	background: var(--v3dd-accent);
	color: var(--v3dd-white);
}

/* Solid light button for dark or accent backgrounds. */
.v3dd-btn--on-brand {
	background: var(--v3dd-white);
	color: var(--v3dd-ink);
}

.v3dd-btn--on-brand:hover {
	background: var(--v3dd-stone);
	color: var(--v3dd-ink);
}

/* On dark surfaces the outline flips to light. */
.v3dd-section--brand .v3dd-btn--ink,
.v3dd-section--dark .v3dd-btn--ink,
.v3dd-hero--bg-dark .v3dd-btn--ink,
.v3dd-hero--bg-brand .v3dd-btn--ink {
	border-color: var(--v3dd-line-on-dark);
	color: var(--v3dd-on-dark);
}

.v3dd-section--brand .v3dd-btn--ink:hover,
.v3dd-section--dark .v3dd-btn--ink:hover,
.v3dd-hero--bg-dark .v3dd-btn--ink:hover,
.v3dd-hero--bg-brand .v3dd-btn--ink:hover {
	background: var(--v3dd-on-dark);
	border-color: var(--v3dd-on-dark);
	color: var(--v3dd-ink);
}

/* Focus on dark: the white ring would vanish. */
.v3dd-section--brand :focus-visible,
.v3dd-section--dark :focus-visible,
.v3dd-hero--bg-dark :focus-visible,
.v3dd-hero--bg-brand :focus-visible,
.v3dd-footer :focus-visible {
	box-shadow: 0 0 0 3px var(--v3dd-night), 0 0 0 5px var(--v3dd-accent-on-dark);
}

/* ==========================================================================
   7. Scroll reveal
   --------------------------------------------------------------------------
   Nothing is hidden by CSS alone: main.js marks `.is-armed` only on elements
   still below the fold when it starts, and `.is-revealed` brings them in.
   Without JS, or with reduced motion, everything renders in place.
   ========================================================================== */

.v3dd-reveal {
	opacity: 1;
	transform: none;
}

.v3dd-reveal.is-armed {
	opacity: 0;
}

.v3dd-reveal--up.is-armed {
	transform: translateY(1.5rem);
}

.v3dd-reveal--left.is-armed {
	transform: translateX(-1.5rem);
}

.v3dd-reveal--right.is-armed {
	transform: translateX(1.5rem);
}

.v3dd-reveal--scale.is-armed {
	transform: scale(0.97);
}

/* The transition sits on the way in only: arming happens off screen. */
.v3dd-reveal.is-armed.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity var(--v3dd-reveal-duration) var(--v3dd-ease),
		transform var(--v3dd-reveal-duration) var(--v3dd-ease);
	transition-delay: var(--v3dd-reveal-delay, 0ms);
}

/* ==========================================================================
   8. Site header
   --------------------------------------------------------------------------
   Transparent over a dark hero; solid once scrolled (`.is-scrolled`, from
   main.js) or from the start on a view without a hero (`.is-solid`, set
   server-side). No backdrop-filter: it would make the header a containing
   block for fixed descendants.
   ========================================================================== */

.v3dd-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	color: var(--v3dd-on-dark);
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.v3dd-header.is-scrolled,
.v3dd-header.is-solid {
	background-color: rgba(255, 255, 255, 0.97);
	border-bottom-color: var(--v3dd-line);
	color: var(--v3dd-ink);
}

.v3dd-header.is-dark:not(.is-scrolled) {
	background-color: var(--v3dd-night);
}

.v3dd-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: var(--v3dd-header-height);
}

.v3dd-header__brand {
	flex-shrink: 0;
}

.v3dd-brand {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.v3dd-brand:hover {
	color: inherit;
}

.v3dd-brand__wordmark {
	font-size: var(--v3dd-text-xl);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.v3dd-brand__logo {
	width: auto;
	max-height: 40px;
}

/* Desktop nav */
.v3dd-nav {
	display: none;
}

@media (min-width: 1024px) {
	.v3dd-nav {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin-left: auto;
	}
}

.v3dd-nav__item {
	position: relative;
}

.v3dd-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.6rem 0.9rem;
	color: inherit;
	font-size: var(--v3dd-text-sm);
	font-weight: 500;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.v3dd-nav__link:hover,
.v3dd-nav__link.is-current {
	color: inherit;
	opacity: 1;
}

/* The current page: a short rule under the label. */
.v3dd-nav__link::after {
	content: '';
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.3rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--v3dd-ease);
}

.v3dd-nav__link:hover::after,
.v3dd-nav__link.is-current::after {
	transform: scaleX(1);
}

.v3dd-nav__chevron {
	transition: transform 0.2s ease;
}

.v3dd-nav__item.is-open .v3dd-nav__chevron {
	transform: rotate(180deg);
}

.v3dd-nav .v3dd-btn {
	margin-left: 0.75rem;
}

/* Over a dark hero the CTA turns light so it does not sink into the night. */
.v3dd-header:not(.is-scrolled):not(.is-solid) .v3dd-nav .v3dd-btn--primary {
	background: var(--v3dd-white);
	color: var(--v3dd-ink);
}

/* Dropdown */
.v3dd-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 16rem;
	padding-top: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s ease, transform 0.2s var(--v3dd-ease), visibility 0s linear 0.2s;
}

.v3dd-nav__item.is-open .v3dd-dropdown,
.v3dd-nav__item:focus-within .v3dd-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.v3dd-dropdown__panel {
	padding: 0.5rem;
	background: var(--v3dd-white);
	border: 1px solid var(--v3dd-line);
	border-radius: var(--v3dd-radius-lg);
	box-shadow: var(--v3dd-shadow-lg);
}

.v3dd-dropdown__link {
	display: block;
	padding: 0.7rem 0.9rem;
	border-radius: var(--v3dd-radius);
	color: var(--v3dd-ink);
	text-decoration: none;
}

.v3dd-dropdown__link:hover {
	background: var(--v3dd-stone);
	color: var(--v3dd-ink);
}

.v3dd-dropdown__title {
	display: block;
	font-size: var(--v3dd-text-sm);
	font-weight: 600;
}

.v3dd-dropdown__desc {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--v3dd-text-xs);
	color: var(--v3dd-muted);
}

/* Menu toggle */
.v3dd-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -0.6rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
}

@media (min-width: 1024px) {
	.v3dd-header__toggle {
		display: none;
	}
}

.v3dd-header__toggle-icons {
	position: relative;
	width: 24px;
	height: 24px;
}

.v3dd-header__toggle-icons .v3dd-icon {
	position: absolute;
	inset: 0;
	transition: opacity 0.2s ease, transform 0.3s var(--v3dd-ease);
}

.v3dd-header__toggle-icons .v3dd-icon-close,
.v3dd-header__toggle[aria-expanded='true'] .v3dd-icon-menu {
	opacity: 0;
	transform: rotate(-90deg) scale(0.8);
}

.v3dd-header__toggle[aria-expanded='true'] .v3dd-icon-close {
	opacity: 1;
	transform: none;
}

/* While the menu is open the bar sits on the light sheet. */
body.v3dd-scroll-locked .v3dd-header {
	background-color: var(--v3dd-white);
	border-bottom-color: var(--v3dd-line);
	color: var(--v3dd-ink);
}

/* ==========================================================================
   9. Mobile menu
   --------------------------------------------------------------------------
   A light sheet under the header. main.js drives `.is-open`, `.is-closing`
   (240ms) and `.is-leaving` (a link is loading another page).
   ========================================================================== */

.v3dd-mobile-menu {
	position: fixed;
	inset: var(--v3dd-header-height) 0 0;
	z-index: 49;
	visibility: hidden;
	pointer-events: none;
}

.v3dd-mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}

.v3dd-mobile-menu__surface {
	height: 100%;
	overflow-y: auto;
	background: var(--v3dd-white);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.24s ease, transform 0.24s var(--v3dd-ease);
}

.v3dd-mobile-menu.is-open .v3dd-mobile-menu__surface {
	opacity: 1;
	transform: none;
}

.v3dd-mobile-menu.is-closing .v3dd-mobile-menu__surface {
	opacity: 0;
	transform: translateY(-8px);
}

.v3dd-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 2rem var(--v3dd-gutter) 3rem;
}

.v3dd-mobile-menu__nav {
	display: flex;
	flex-direction: column;
}

.v3dd-mobile-menu__item {
	border-bottom: 1px solid var(--v3dd-line);
	opacity: 0;
	transform: translateY(8px);
}

.v3dd-mobile-menu.is-open .v3dd-mobile-menu__item {
	opacity: 1;
	transform: none;
	transition: opacity 0.4s ease var(--v3dd-stagger, 0s), transform 0.4s var(--v3dd-ease) var(--v3dd-stagger, 0s);
}

.v3dd-mobile-menu__link,
.v3dd-mobile-menu__disclosure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.1rem 0;
	background: none;
	border: 0;
	color: var(--v3dd-ink);
	font-size: var(--v3dd-text-2xl);
	font-weight: 600;
	letter-spacing: var(--v3dd-tracking-tight);
	text-align: left;
	text-decoration: none;
}

.v3dd-mobile-menu__disclosure[aria-expanded='true'] .v3dd-nav__chevron {
	transform: rotate(180deg);
}

.v3dd-mobile-menu__panel {
	display: none;
	padding-bottom: 1rem;
}

.v3dd-mobile-menu__disclosure[aria-expanded='true'] + .v3dd-mobile-menu__panel {
	display: block;
}

.v3dd-mobile-menu__sublink {
	display: block;
	padding: 0.6rem 0;
	color: var(--v3dd-muted);
	font-size: var(--v3dd-text-lg);
	text-decoration: none;
}

.v3dd-mobile-menu__item:has(.v3dd-mobile-menu__cta) {
	border-bottom: 0;
	padding-top: 2rem;
}

.v3dd-mobile-menu__cta {
	width: 100%;
	min-height: 52px;
	font-size: var(--v3dd-text-base);
}

.v3dd-mobile-menu.is-leaving .v3dd-mobile-menu__item:not(:has(.is-target)) {
	opacity: 0.4;
}

.v3dd-mobile-menu__social {
	display: flex;
	gap: 1rem;
	margin-top: auto;
	padding-top: 2rem;
}

.v3dd-mobile-menu__social a {
	color: var(--v3dd-muted);
}

@media (min-width: 1024px) {
	.v3dd-mobile-menu {
		display: none;
	}
}

/* ==========================================================================
   10. Site footer
   ========================================================================== */

.v3dd-footer {
	background: var(--v3dd-night);
	color: var(--v3dd-on-dark-muted);
	font-size: var(--v3dd-text-sm);
}

.v3dd-footer a {
	color: var(--v3dd-on-dark);
	text-decoration: none;
}

.v3dd-footer a:hover {
	color: var(--v3dd-white);
	text-decoration: underline;
}

.v3dd-footer__inner {
	padding-block: 4rem 2rem;
}

.v3dd-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.v3dd-footer__grid {
		grid-template-columns: 2fr 1fr 1.5fr;
		gap: 3rem;
	}
}

.v3dd-footer .v3dd-brand {
	color: var(--v3dd-on-dark);
}

.v3dd-footer__tagline {
	max-width: 22rem;
	margin-top: 1rem;
	line-height: 1.6;
}

.v3dd-footer__social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.v3dd-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--v3dd-line-on-dark);
	border-radius: var(--v3dd-radius-full);
}

.v3dd-footer__heading {
	margin-bottom: 1.25rem;
	font-size: var(--v3dd-text-xs);
	font-weight: 600;
	letter-spacing: var(--v3dd-tracking-wide);
	text-transform: uppercase;
	color: var(--v3dd-on-dark);
}

.v3dd-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.v3dd-footer__list li + li {
	margin-top: 0.7rem;
}

.v3dd-footer__contact {
	font-style: normal;
}

.v3dd-footer__contact-list {
	display: grid;
	gap: 0.8rem;
}

.v3dd-footer__contact-row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	overflow-wrap: anywhere;
}

.v3dd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--v3dd-line-on-dark);
}

.v3dd-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   11. Floating WhatsApp button
   ========================================================================== */

.v3dd-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 40;
}

.v3dd-whatsapp__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--v3dd-radius-full);
	background: var(--v3dd-whatsapp);
	color: var(--v3dd-white);
	box-shadow: var(--v3dd-shadow-lg);
	transition: transform 0.2s var(--v3dd-ease);
}

.v3dd-whatsapp__button:hover {
	color: var(--v3dd-white);
	transform: translateY(-2px);
}

.v3dd-whatsapp__tooltip {
	position: absolute;
	right: calc(100% + 0.75rem);
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(4px, -50%);
	transition: opacity 0.2s ease, transform 0.2s var(--v3dd-ease);
}

.v3dd-whatsapp__button:hover .v3dd-whatsapp__tooltip,
.v3dd-whatsapp__button:focus-visible .v3dd-whatsapp__tooltip {
	opacity: 1;
	transform: translate(0, -50%);
}

.v3dd-whatsapp__bubble {
	display: block;
	padding: 0.5rem 0.8rem;
	background: var(--v3dd-ink);
	color: var(--v3dd-white);
	border-radius: var(--v3dd-radius);
	font-size: var(--v3dd-text-sm);
	font-weight: 500;
	white-space: nowrap;
}

/* ==========================================================================
   12. Back-to-top button
   ========================================================================== */

.v3dd-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: calc(1.25rem + 56px + 0.75rem);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--v3dd-white);
	border: 1px solid var(--v3dd-line);
	border-radius: var(--v3dd-radius-full);
	color: var(--v3dd-ink);
	box-shadow: var(--v3dd-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s var(--v3dd-ease), visibility 0s linear 0.2s;
}

.v3dd-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* ==========================================================================
   13. Admin bar
   --------------------------------------------------------------------------
   WordPress pushes the document down for the admin bar but leaves fixed
   elements where they are.
   ========================================================================== */

.admin-bar .v3dd-header {
	top: 32px;
}

.admin-bar .v3dd-mobile-menu {
	top: calc(var(--v3dd-header-height) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .v3dd-header {
		top: 46px;
	}

	.admin-bar .v3dd-mobile-menu {
		top: calc(var(--v3dd-header-height) + 46px);
	}
}

/* ==========================================================================
   14. Block editor
   --------------------------------------------------------------------------
   style.css is also the editor stylesheet. Revealed elements and fixed chrome
   would otherwise hide content while editing.
   ========================================================================== */

.editor-styles-wrapper .v3dd-reveal {
	opacity: 1 !important;
	transform: none !important;
}

.editor-styles-wrapper {
	font-family: var(--v3dd-font);
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.v3dd-reveal.is-armed {
		opacity: 1;
		transform: none;
	}

	.v3dd-mobile-menu__item {
		opacity: 1;
		transform: none;
	}
}