/* Diego Kravetz — main stylesheet
 *
 * Desktop matches the client's mockup (DK - Home Wordpress.pdf, a 1920px artboard).
 * The mockup is a 1440px layout scaled ×1.333, so sizes are in rem and the root font
 * grows from 16px at 1440 to 21.33px at 1920 (see html below). Below 1440 the root
 * stays at 16px; tablet and phone layouts adapt the design.
 *
 * Breakpoints: ≤767 phone · 768–1023 tablet · 1024–1439 small desktop · ≥1440 desktop
 * Type scale (from the mockup): headings 2.08rem Anton · text, menu, labels 1.03rem Archivo
 */

html { font-size: 100%; }
@media (min-width: 1440px) {
	html { font-size: min(calc(100vw / 90), 24px); }
}

:root {
	--dk-navy: #0b3047;
	--dk-royal: #003768;
	--dk-gold: #d3aa75;
	--dk-gold-dark: #8a6a3c; /* gold for small text on light grey (contrast 4.5:1) */
	--dk-light: #f4f4f4;
	--dk-ink: #1d1d1b;
	--dk-card: #04263b;
	--dk-studio: #d9dad9;
	--dk-gutter-min: 20px;
	--dk-gutter: max(var(--dk-gutter-min), min(29.8vw - 249px, 12.5vw));
	--dk-header-h: 4rem;
	--dk-radius: 0.65rem;
	--dk-text: 1.03rem;
	--dk-h2: clamp(1.75rem, 1.2rem + 2vw, 2.08rem);
	--dk-anton: Anton, "Arial Narrow", sans-serif;
	--dk-archivo: Archivo, system-ui, sans-serif;
}
@media (min-width: 768px) {
	:root { --dk-gutter-min: 40px; }
}
@media (min-width: 1024px) {
	:root { --dk-header-h: 6.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body { margin: 0; font-size: var(--dk-text); line-height: 1.2; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--dk-gold); outline-offset: 2px; }

.dk-container { box-sizing: border-box; width: 100%; padding-inline: var(--dk-gutter); }

/* Remove default spacing between blocks; each section controls its own. */
.dk-main > *, .dk-main .wp-block-post-content > * { margin-block: 0; }
.dk-main figure { margin: 0; }

.dk-section { padding-block: 5.3rem 5rem; }
[id] { scroll-margin-top: var(--dk-header-h); }

.dk-eyebrow {
	margin: 0 0 1.25rem;
	font: 600 var(--dk-text)/1.2 var(--dk-archivo);
	text-transform: uppercase;
	color: var(--dk-gold);
}

.dk-title {
	margin: 0 0 1.75rem;
	font-family: var(--dk-anton);
	font-size: var(--dk-h2);
	font-weight: 400;
	line-height: 1.07;
	text-transform: uppercase;
}

.dk-main p { font-size: var(--dk-text); line-height: 1.2; }

@media (max-width: 1023px) {
	.dk-section { padding-block: 3.5rem; }
}

/* ---------- Buttons ---------- */

.dk-btn .wp-block-button__link,
button.dk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	box-sizing: border-box;
	min-width: min(21.2rem, 100%);
	padding: 0.95rem 1.15rem;
	border: 0;
	border-radius: var(--dk-radius);
	background: var(--dk-royal);
	color: #fff;
	font: 600 var(--dk-text)/1.2 var(--dk-archivo);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.dk-btn .wp-block-button__link::after { content: "→"; font-size: 1.3em; line-height: 1; color: var(--dk-gold); }
button.dk-btn span { font-size: 1.3em; line-height: 1; color: var(--dk-gold); }
.dk-btn .wp-block-button__link:hover,
button.dk-btn:hover { background: #004a8c; }
button.dk-btn[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Header ---------- */

.dk-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.dk-header { background: var(--dk-navy); color: #fff; }
.dk-header__inner { min-height: var(--dk-header-h); align-items: center; gap: 1.5rem; }

.dk-wordmark {
	margin: 0;
	font: 400 1.75rem/1 var(--dk-anton) !important;
	white-space: nowrap;
}
.dk-wordmark a { color: #fff; text-decoration: none; }
.dk-wordmark mark { color: var(--dk-gold); background: none; }
@media (min-width: 1024px) {
	.dk-header .dk-wordmark { font-size: 2.4rem !important; }
}
@media (min-width: 1280px) {
	.dk-header .dk-wordmark { font-size: 2.92rem !important; }
}

.dk-nav { font: 600 0.95rem/1.2 var(--dk-archivo); text-transform: uppercase; }
.dk-nav .wp-block-navigation__container { gap: 1.1rem; }
.dk-nav .wp-block-navigation-item__content { color: #fff; text-decoration: none; padding-block: 0.3rem; }
.dk-nav .wp-block-navigation-item__content:hover,
.dk-nav .wp-block-navigation-item__content.is-active { color: var(--dk-gold); }
@media (min-width: 1280px) {
	.dk-header .dk-nav { font-size: 1.05rem; }
	.dk-header .dk-nav .wp-block-navigation__container { gap: 1.4rem; }
}

.dk-header .wp-block-navigation__responsive-container-open,
.dk-header .wp-block-navigation__responsive-container-close { color: #fff; padding: 10px; margin: -10px; }
.dk-header .wp-block-navigation__responsive-container-open svg,
.dk-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* Use the hamburger menu up to 1023px (WordPress default switches at 600px). */
@media (min-width: 600px) and (max-width: 1023px) {
	.dk-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.dk-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

.dk-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + 18px) var(--dk-gutter) 32px;
}
.dk-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 48px; }
.dk-header .is-menu-open .wp-block-navigation__container { gap: 0; align-items: flex-start !important; width: 100%; }
.dk-header .is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.dk-header .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 1rem 0 !important; font-size: 1.35rem; }

/* ---------- Footer ---------- */

.dk-footer { background: var(--dk-navy); color: #fff; }
.dk-footer__inner { min-height: 3.5rem; align-items: center; gap: 0.75rem 2rem; padding-block: 0.6rem; }
.dk-footer .dk-wordmark { font-size: 1.7rem !important; }
.dk-nav--footer { font-size: 0.85rem; }
.dk-nav--footer .wp-block-navigation__container { gap: 0.5rem 1.1rem; }
.dk-footer__legal {
	margin: 0; padding-block: 0.5rem 0.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.7rem !important; color: rgba(255, 255, 255, 0.7);
}
.dk-footer__legal a { color: inherit; }

@media (max-width: 767px) {
	.dk-footer__inner { flex-direction: column; align-items: flex-start !important; padding-block: 1.5rem 1rem; }
	.dk-nav--footer { font-size: 1rem; }
	.dk-nav--footer .wp-block-navigation__container { justify-content: flex-start; gap: 0.75rem 1.25rem; }
	.dk-footer__legal { font-size: 0.8rem !important; }
}

/* ---------- Hero ---------- */

.dk-hero { position: relative; background: var(--dk-studio); }
.dk-hero__picture, .dk-hero__img { display: block; width: 100%; }
.dk-hero__img { height: max(320px, 27.45vw); object-fit: cover; object-position: 50% 0; }

.dk-social { display: flex; gap: 0.47rem; margin: 0; padding: 0; list-style: none; }
.dk-social a {
	display: grid; place-items: center;
	width: 2.95rem; height: 2.95rem; border-radius: 50%;
	background: var(--dk-royal); color: #fff;
	transition: background-color 0.15s, color 0.15s;
}
.dk-social a:hover { background: var(--dk-gold); color: var(--dk-navy); }
.dk-social svg { width: 55%; height: 55%; }

.dk-social--rail {
	position: absolute; right: 1.3rem; top: 50%;
	flex-direction: column; gap: 0.375rem; transform: translateY(-50%);
}
.dk-social--rail a { width: 2.6rem; height: 2.6rem; }

@media (max-width: 700px) {
	.dk-hero__img { height: auto; }
	.dk-social--rail {
		position: static; transform: none;
		flex-direction: row; justify-content: center; gap: 0.6rem;
		padding: 0.9rem var(--dk-gutter);
		background: var(--dk-navy);
	}
	.dk-social--rail a { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Tagline + roles ---------- */

.dk-tagline { background: var(--dk-navy); color: #fff; }
.dk-tagline__text {
	margin: 0;
	padding-block: 3.3rem;
	padding-right: calc(var(--dk-gutter) + (100% - 2 * var(--dk-gutter)) * 0.38);
	font: 400 var(--dk-h2)/1.13 var(--dk-anton);
	text-transform: uppercase;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68' fill='none' stroke='%23d3aa75' stroke-width='1.6' stroke-linejoin='round'%3E%3Ccircle cx='34' cy='34' r='32'/%3E%3Cpath d='M34 15.5l14.5 5.2v10.6c0 9.6-6.1 16.7-14.5 21.2-8.4-4.5-14.5-11.6-14.5-21.2V20.7z'/%3E%3Cpath d='M29.5 22.5l-5 1.8v7.4c0 5.6 3.2 10.1 8 13.2'/%3E%3C/svg%3E") no-repeat right var(--dk-gutter) center / 4.25rem;
}
.dk-tagline__text mark { background: none; color: var(--dk-gold); }

.dk-roles { background: var(--dk-royal); color: #fff; }
.dk-roles__inner { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 1.75rem; }
.dk-main .dk-role { margin: 0; padding: 0.1rem 1rem; text-align: center; font-weight: 500; line-height: 1.3; }
.dk-role + .dk-role { border-left: 2px solid var(--dk-gold); }

@media (max-width: 1023px) {
	.dk-role br { display: none; }
}
@media (max-width: 767px) {
	.dk-tagline__text { padding-block: 2.25rem; padding-right: var(--dk-gutter); background: none; }
	.dk-roles__inner { grid-template-columns: 1fr; padding-block: 0.75rem; }
	.dk-main .dk-role { padding: 0.9rem 0; }
	.dk-role + .dk-role { border-left: 0; position: relative; }
	.dk-role + .dk-role::before {
		content: ""; position: absolute; top: 0; left: 50%;
		width: 3.5rem; margin-left: -1.75rem; border-top: 2px solid var(--dk-gold);
	}
}

/* ---------- Sobre mí ---------- */

.dk-sobre { background: var(--dk-light); color: var(--dk-ink); padding-block: 4.75rem 4.5rem; }
.dk-sobre .dk-title { color: var(--dk-royal); margin-bottom: 2.6rem; }
.dk-sobre .dk-eyebrow, .dk-contacto .dk-eyebrow { color: var(--dk-gold-dark); }
.dk-sobre__grid { display: grid; grid-template-columns: minmax(0, 1fr) 31.5%; gap: 1.7rem; align-items: start; }
.dk-sobre__text { padding-top: 0.3rem; }
.dk-sobre__cols { columns: 2; column-gap: 3rem; }
.dk-sobre__cols p { margin: 0 0 1.2em; }
.dk-sobre__photo img { display: block; width: 100%; aspect-ratio: 0.74; object-fit: cover; border-radius: 1.05rem; }

@media (max-width: 1023px) {
	/* Phone/tablet order: eyebrow, title, photo, text */
	.dk-sobre__grid { display: flex; flex-direction: column; gap: 0; }
	.dk-sobre__text { display: contents; }
	.dk-sobre__text .dk-eyebrow { order: 1; }
	.dk-sobre__text .dk-title { order: 2; margin-bottom: 1.5rem; }
	.dk-sobre__photo { order: 3; width: 100%; max-width: 30rem; margin-bottom: 1.75rem !important; }
	.dk-sobre__cols { order: 4; }
	.dk-sobre__photo img { aspect-ratio: 4 / 3; object-position: 50% 20%; }
}
@media (max-width: 767px) {
	.dk-sobre__cols { columns: 1; }
	.dk-sobre__photo img { aspect-ratio: 4 / 4.2; }
}

/* ---------- Experiencia (timeline) ---------- */

.dk-exp {
	padding-bottom: 0;
	background: linear-gradient(90deg, var(--dk-navy) 0%, var(--dk-navy) 40%, var(--dk-royal) 100%);
	color: #fff;
}
.dk-exp .dk-title { color: #fff; margin-bottom: 0; }
.dk-exp__head { position: relative; }
.dk-exp__head .dk-arrows { position: absolute; right: var(--dk-gutter); top: 0; margin: 0; }

.dk-track { scrollbar-width: none; }
.dk-track::-webkit-scrollbar { display: none; }

.dk-timeline {
	display: flex; align-items: flex-end; gap: 1rem;
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 2.8rem var(--dk-gutter) 7.4rem;
	scroll-padding-inline: var(--dk-gutter);
	overscroll-behavior-x: contain;
}
.dk-tl-item {
	position: relative;
	flex: 0 0 14rem;
	box-sizing: border-box;
	padding: 1.5rem 1.9rem 1.9rem;
	border-radius: 1rem;
	background: var(--dk-card);
	scroll-snap-align: start;
}
.dk-main .dk-tl-item p { margin: 0; font-size: 0.94rem; line-height: 1.2; }
.dk-main .dk-tl-item p.dk-tl-years { color: var(--dk-gold); }
.dk-tl-title.wp-block-heading {
	margin: 0 0 1.1rem;
	font: 700 0.94rem/1.2 var(--dk-archivo);
	text-transform: none;
}
/* dashed line + node under each card; the first segment runs to the left edge */
.dk-tl-item::before {
	content: ""; position: absolute; left: -0.5rem; right: -0.5rem; bottom: -2.45rem;
	border-top: 2px dashed var(--dk-gold);
}
.dk-tl-item:first-child::before { left: calc(-1 * var(--dk-gutter)); }
.dk-tl-item::after {
	content: ""; position: absolute; left: 50%; bottom: calc(-2.45rem - 0.5rem + 1px);
	width: 0.75rem; height: 0.75rem; margin-left: calc(-0.375rem - 2px);
	border: 2px solid var(--dk-gold); border-radius: 50%;
	background: var(--dk-navy);
}
.dk-tl-item.is-current::after { background: var(--dk-gold); }
/* Current role: gold outline and an "Actual" tag (visual only; the text already says "Actualidad") */
.dk-tl-item.is-current { box-shadow: inset 0 0 0 1px var(--dk-gold); }
.dk-tl-item.is-current .dk-tl-years::after {
	content: "Actual";
	content: "Actual" / "";
	position: absolute; top: -0.7rem; right: 1.2rem;
	padding: 0.2rem 0.6rem; border-radius: 999px;
	background: var(--dk-gold); color: var(--dk-navy);
	font: 700 0.7rem/1.2 var(--dk-archivo); letter-spacing: 0.04em; text-transform: uppercase;
}

@media (max-width: 767px) {
	.dk-exp { padding-bottom: 2.5rem; }
	.dk-exp .dk-title { margin-bottom: 1.75rem; }
	.dk-exp__head .dk-arrows { display: none; }
	.dk-timeline {
		display: block; position: relative; overflow: visible;
		padding: 0 var(--dk-gutter) 0 calc(var(--dk-gutter) + 2rem);
	}
	.dk-timeline::before {
		content: ""; position: absolute; top: 0.5rem; bottom: 2rem;
		left: calc(var(--dk-gutter) + 0.45rem);
		border-left: 2px dashed var(--dk-gold);
	}
	.dk-tl-item { margin-bottom: 1rem; padding: 1.25rem; }
	.dk-tl-item::before, .dk-tl-item:first-child::before { display: none; }
	.dk-tl-item::after { left: -2rem; top: 1.5rem; bottom: auto; margin-left: 0; }
	.dk-main .dk-tl-item p, .dk-tl-title.wp-block-heading { font-size: 1rem; }
}

/* ---------- Carousel arrows (added by JavaScript) ---------- */

.dk-arrows { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; }
.dk-arrows[hidden] { display: none; }
.dk-arrow {
	display: grid; place-items: center;
	width: 2.4rem; height: 2.4rem; min-width: 44px; min-height: 44px; padding: 0;
	border: 0; background: none; color: var(--dk-gold); cursor: pointer;
}
.dk-arrow svg { width: 1.8rem; height: 1.8rem; }
.dk-arrow:disabled { opacity: 0.35; cursor: default; }

/* ---------- Defensa personal ---------- */

.dk-defensa { position: relative; overflow: hidden; background: #000; color: #fff; padding-block: 5.3rem 5rem; }
.dk-defensa__photo {
	position: absolute !important; top: 0; right: 0; bottom: 0;
	width: 64%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
	mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}
.dk-defensa__photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
.dk-defensa__grid {
	position: relative; display: grid;
	grid-template-columns: 21.2rem 1fr;
}
.dk-defensa__text { grid-column: 1; grid-row: 1; }
.dk-defensa__text p:not(.dk-eyebrow) { margin: 0 0 1.2em; }
.dk-defensa__text .dk-title { color: #fff; margin-bottom: 2.6rem; }
.dk-main .dk-slogan { margin: 0 !important; color: var(--dk-gold); font-weight: 700; text-transform: uppercase; }
.dk-defensa .wp-block-buttons { margin-top: 4.4rem; }
.dk-defensa .wp-block-button { width: 21.2rem; max-width: 100%; }
.dk-defensa .wp-block-button__link { width: 100%; }
/* crest sits on a gold vertical line at the centre of the screen */
.dk-defensa__crest {
	grid-column: 1 / -1; grid-row: 1;
	position: absolute !important; top: -0.6rem; bottom: 0;
	left: calc(50vw - var(--dk-gutter) - 5.75rem);
	width: 11.5rem;
	display: flex; align-items: center; justify-content: center;
}
.dk-defensa__crest::before {
	content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
	border-left: 1px solid var(--dk-gold);
}
.dk-defensa__crest img { position: relative; width: 100%; }

@media (max-width: 1023px) {
	.dk-defensa { padding-top: 0; padding-bottom: 3.5rem; }
	.dk-defensa__photo {
		position: relative !important; width: 100%; height: clamp(15rem, 55vw, 24rem);
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	}
	.dk-defensa__grid { display: flex; flex-direction: column; }
	.dk-defensa__crest {
		position: relative !important; order: -1; left: auto; top: auto;
		width: 7.5rem; margin: -4.5rem 0 1.5rem; justify-content: flex-start;
	}
	.dk-defensa__crest::before { display: none; }
	.dk-defensa__text { max-width: 36rem; }
	.dk-defensa .wp-block-buttons { margin-top: 2.25rem; }
}
@media (max-width: 767px) {
	.dk-defensa .wp-block-button, .dk-defensa .wp-block-button__link { width: 100%; }
}

/* ---------- Actualidad ---------- */

.dk-actualidad { background: var(--dk-royal); color: #fff; }
.dk-act__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem; }
.dk-act__col { min-width: 0; text-align: center; }
.dk-act__col .dk-title { color: #fff; margin-bottom: 2.4rem; }

.dk-act__col .dk-track { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; text-align: left; }
.dk-track__list { display: flex; gap: 0.56rem; margin: 0; padding: 0; list-style: none; }
.dk-track__list > li { position: relative; scroll-snap-align: start; flex: 0 0 calc((100% - 1.12rem) / 3); } /* keeps hidden screen-reader labels inside the card */

.dk-post a, .dk-post img { display: block; }
.dk-post img, .dk-press--image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.7rem; }
.dk-post, .dk-press { border-radius: 0.7rem; box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.25); }
.dk-track__list { padding-block: 0.4rem 1rem !important; } /* room for the shadow */
.dk-post a:hover img, .dk-press--image a:hover img { outline: 3px solid var(--dk-gold); outline-offset: -3px; }

/* Press card built from text. Sizes follow the card width (container units) so the
   anatomy of the mockup holds from 170px (desktop) to 300px (phone). */
.dk-press article {
	position: relative;
	display: flex; flex-direction: column;
	aspect-ratio: 3 / 4;
	container-type: inline-size;
	overflow: hidden;
	border-radius: 0.7rem;
	background: #fff; color: var(--dk-ink);
}
.dk-press article:hover { outline: 3px solid var(--dk-gold); outline-offset: -3px; }
.dk-press__body { flex: 1; min-height: 0; padding: 9cqw 9cqw 0; }
.dk-main .dk-press__outlet { margin: 0 0 4cqw; padding-bottom: 3.5cqw; border-bottom: 1px solid #e2e2e2; font: 800 9.5cqw/1 var(--dk-archivo); color: #f09221; }
.dk-main .dk-press__kicker { margin: 0 0 2cqw; font: 600 4.6cqw/1.2 var(--dk-archivo); text-transform: uppercase; color: #666; }
.dk-press__title.wp-block-heading, .dk-press__title {
	margin: 0 0 3cqw;
	font: 700 7cqw/1.18 var(--dk-archivo);
	text-transform: none;
}
.dk-press__title a { color: inherit; text-decoration: none; }
.dk-press__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.dk-main .dk-press__excerpt {
	margin: 0; font-size: 5.4cqw; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.dk-press__excerpt mark { background: #f09221; color: var(--dk-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.15em; }
.dk-press__by {
	display: flex; align-items: flex-end; justify-content: space-between;
	padding: 12cqw 8cqw 7cqw;
	background: var(--dk-royal); color: #fff;
	clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%);
	font-size: 5cqw; line-height: 1.15;
}
.dk-press__avatar { width: 22cqw; height: 22cqw; border-radius: 50%; border: 0.7cqw solid #fff; object-fit: cover; }

/* Two carousels side by side only when the cards stay readable */
@media (max-width: 1279px) {
	.dk-act__grid { grid-template-columns: 1fr; gap: 3.5rem; }
	.dk-act__col .dk-track { max-width: 46rem; margin-inline: auto; }
}
@media (max-width: 767px) {
	.dk-act__col .dk-title { margin-bottom: 1.5rem; }
	.dk-act__col .dk-track { margin-inline: calc(var(--dk-gutter) * -1); padding-inline: var(--dk-gutter); scroll-padding-inline: var(--dk-gutter); }
	.dk-track__list { gap: 0.75rem; }
	.dk-track__list > li { flex-basis: 70%; }
}

/* ---------- Contacto ---------- */

.dk-contacto { background: var(--dk-light); color: var(--dk-ink); }
.dk-contacto .dk-title { color: var(--dk-royal); max-width: 22rem; margin-bottom: 0; }
.dk-contacto__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.dk-contacto .dk-social { margin-top: 2.6rem; }
/* Without the form (email not set up yet): title and social icons only */
.dk-contacto__grid:not(:has(.dk-form)) { grid-template-columns: 1fr; }
.dk-contacto__grid:not(:has(.dk-form)) .dk-title { max-width: 40rem; }

.dk-form { position: relative; }
.dk-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.56rem; }
.dk-main .dk-field { position: relative; margin: 0 0 0.56rem; }
.dk-field input, .dk-field select, .dk-field textarea {
	box-sizing: border-box; width: 100%;
	padding: 1.15rem 0.9rem 0.35rem;
	border: 1px solid #a8a8a8; border-radius: var(--dk-radius);
	background: var(--dk-light); color: var(--dk-ink);
	font: 0.875rem/1.2 var(--dk-archivo);
	appearance: none;
}
.dk-field textarea { min-height: 5.15rem; resize: vertical; }
.dk-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003768' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.7rem;
}
.dk-field input:focus, .dk-field select:focus, .dk-field textarea:focus { border-color: var(--dk-royal); outline: 2px solid var(--dk-royal); outline-offset: 0; }
.dk-field input:user-invalid, .dk-field select:user-invalid, .dk-field textarea:user-invalid { border-color: #b00020; }
/* Floating labels: inside the field when empty (like the mockup's placeholders), move up while typing. */
.dk-field label {
	position: absolute; left: calc(0.9rem + 1px); top: 0.8rem;
	color: #555; font-size: 0.875rem; pointer-events: none;
	transition: top 0.15s, font-size 0.15s;
}
.dk-field input:focus + label, .dk-field input:not(:placeholder-shown) + label,
.dk-field textarea:focus + label, .dk-field textarea:not(:placeholder-shown) + label,
.dk-field--select label { top: 0.3rem; font-size: 0.62rem; }
.dk-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 0.1rem; }
.dk-main .dk-form__privacy { margin: 0; font-size: 0.7rem; color: #555; max-width: 16rem; }
.dk-form__privacy a { color: var(--dk-royal); }
.dk-form .dk-btn { min-width: 16.5rem; padding: 0.7rem 1.1rem; font-size: 0.95rem; }
.dk-notice { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: var(--dk-radius); font-weight: 600; }
.dk-notice--success { background: #e3efe6; color: #1b5e20; }
.dk-notice--error { background: #fbe9eb; color: #b00020; }

@media (max-width: 1023px) {
	.dk-contacto__grid { grid-template-columns: 1fr; gap: 2rem; }
	.dk-contacto .dk-title { max-width: 30rem; }
	.dk-contacto .dk-social { margin-top: 1.5rem; }
}
@media (max-width: 767px) {
	.dk-form__row { grid-template-columns: 1fr; gap: 0; }
	.dk-field input, .dk-field select, .dk-field textarea, .dk-field label { font-size: 1rem; } /* 16px stops iOS zooming in */
	.dk-field input, .dk-field select { padding-block: 1.3rem 0.45rem; }
	.dk-field label { top: 0.9rem; }
	.dk-field input:focus + label, .dk-field input:not(:placeholder-shown) + label,
	.dk-field textarea:focus + label, .dk-field textarea:not(:placeholder-shown) + label,
	.dk-field--select label { top: 0.35rem; font-size: 0.75rem; }
	.dk-form__footer { flex-direction: column-reverse; align-items: stretch; }
	.dk-form .dk-btn { width: 100%; min-width: 0; padding-block: 0.95rem; font-size: 1rem; }
	.dk-main .dk-form__privacy { max-width: none; font-size: 0.8rem; }
}

/* ---------- Simple pages (privacy, 404) ---------- */

.dk-page { padding: clamp(2.5rem, 6vw, 6rem) var(--dk-gutter); min-height: 50vh; }
.dk-page h1 { font-family: var(--dk-anton); font-size: var(--dk-h2); color: var(--dk-royal); text-transform: uppercase; font-weight: 400; }