/*
 * Dentelier — main.css
 *
 * Sistema de Diseño (DEN-10) + estilos base de componentes globales
 * (header, footer, newsletter, modal, formularios, botones, layout).
 *
 * Los bloques específicos (hero, who-we-are, etc.) se complementan en
 * sus respectivos tickets DEN-14..DEN-22 y agregan/sobreescriben
 * dentro de su selector raíz para no contaminar este archivo.
 *
 * Convenciones:
 *  - BEM: .block__element--modifier
 *  - Variables CSS en :root, prefijo --dt-
 *  - Mobile-first: media queries crecientes en responsive.css
 */

/* ────────────────────────────────────────────────────────────────────────
   1. FUENTES — Futura PT
   ────────────────────────────────────────────────────────────────────────
   Las licencias de Futura PT son privadas. Subir los .woff2 a
   /assets/fonts/ y descomentar el bloque @font-face. Mientras tanto se
   usa Futura nativa de macOS/iOS y una pila de fallback razonable.
   ──────────────────────────────────────────────────────────────────────── */

/*
@font-face {
	font-family: "Futura PT";
	src: url("../fonts/FuturaPT-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura PT";
	src: url("../fonts/FuturaPT-Book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura PT";
	src: url("../fonts/FuturaPT-Demi.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura PT";
	src: url("../fonts/FuturaPT-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
*/

/* ────────────────────────────────────────────────────────────────────────
   2. TOKENS — Sistema de Diseño Dentelier
   ──────────────────────────────────────────────────────────────────────── */

:root {
	/* ── Paleta detectada en el archivo Figma ── */
	--dt-color-primary:        #526c75;   /* slate teal — header, CTAs secundarios, cards destacados */
	--dt-color-primary-dark:   #3f555e;
	--dt-color-primary-soft:   #7e98a1;

	--dt-color-beige:          #bfac9a;   /* tan acento — botones primarios, fondos suaves */
	--dt-color-beige-dark:     #a18d7a;
	--dt-color-beige-soft:     #e7dccf;

	--dt-color-cream:          #f4ebde;   /* fondos secundarios */
	--dt-color-text:           #272626;   /* texto principal (neutro) */
	--dt-color-text-warm:      #3d2f24;   /* texto warm dark brown (headlines hero/about) */
	--dt-color-text-muted:     #6b6967;
	--dt-color-bg:             #fcfdff;   /* fondo principal */
	--dt-color-bg-alt:         #f7f3ee;   /* fondo de sección alternativa */
	--dt-color-border:         #e8e2d8;
	--dt-color-on-primary:     #fcfdff;
	--dt-color-on-beige:       #fcfdff;

	/* Estados */
	--dt-color-success:        #3e8a5c;
	--dt-color-error:          #b34a3a;
	--dt-color-focus:          #526c75;

	/* ── Tipografía ── */
	--dt-font-display: "Futura PT", "Futura", "Trebuchet MS", -apple-system, BlinkMacSystemFont, sans-serif;
	--dt-font-body:    "Futura PT", "Futura", "Trebuchet MS", -apple-system, BlinkMacSystemFont, sans-serif;
	--dt-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--dt-fs-eyebrow:   .8125rem;   /* 13px */
	--dt-fs-small:     .875rem;    /* 14px */
	--dt-fs-body:      1rem;       /* 16px */
	--dt-fs-lead:      1.125rem;   /* 18px */
	--dt-fs-h6:        1rem;
	--dt-fs-h5:        1.125rem;
	--dt-fs-h4:        1.375rem;
	--dt-fs-h3:        1.75rem;
	--dt-fs-h2:        2.25rem;
	--dt-fs-h1:        3.25rem;
	--dt-fs-display:   4rem;

	--dt-lh-tight:     1.1;
	--dt-lh-snug:      1.25;
	--dt-lh-base:      1.55;
	--dt-lh-relaxed:   1.7;

	--dt-tracking-tight:   -0.01em;
	--dt-tracking-normal:  0;
	--dt-tracking-eyebrow: 0.16em;

	--dt-fw-light:     300;
	--dt-fw-book:      400;
	--dt-fw-demi:      600;
	--dt-fw-bold:      700;

	/* ── Espaciado (escala modular base 8) ── */
	--dt-space-2xs:    .25rem;
	--dt-space-xs:     .5rem;
	--dt-space-sm:     .75rem;
	--dt-space-md:     1rem;
	--dt-space-lg:     1.5rem;
	--dt-space-xl:     2rem;
	--dt-space-2xl:    3rem;
	--dt-space-3xl:    4.5rem;
	--dt-space-4xl:    6rem;
	--dt-space-5xl:    8rem;

	/* ── Layout ── */
	--dt-container-max:    1240px;
	--dt-container-pad:    1.25rem;
	--dt-header-height:    88px;
	--dt-section-pad-y:    var(--dt-space-3xl);

	/* ── Bordes y radios ── */
	--dt-radius-sm:    6px;
	--dt-radius-md:    12px;
	--dt-radius-lg:    20px;
	--dt-radius-xl:    32px;
	--dt-radius-pill:  999px;

	/* ── Sombras ── */
	--dt-shadow-sm:    0 1px 2px rgba(39, 38, 38, .06);
	--dt-shadow-md:    0 8px 24px rgba(39, 38, 38, .08);
	--dt-shadow-lg:    0 24px 60px rgba(39, 38, 38, .12);

	/* ── Transiciones ── */
	--dt-ease:         cubic-bezier(.4, 0, .2, 1);
	--dt-dur-fast:     .15s;
	--dt-dur-base:     .25s;
	--dt-dur-slow:     .4s;

	/* ── Z-index ── */
	--dt-z-header:     50;
	--dt-z-overlay:    900;
	--dt-z-modal:      1000;
	--dt-z-skiplink:   9999;
}

/* ────────────────────────────────────────────────────────────────────────
   3. RESET MÍNIMO + BASE
   ──────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--dt-font-body);
	font-size: var(--dt-fs-body);
	line-height: var(--dt-lh-base);
	color: var(--dt-color-text);
	background-color: var(--dt-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dt-dur-fast) var(--dt-ease), opacity var(--dt-dur-fast) var(--dt-ease);
}
a:hover { color: var(--dt-color-beige-dark); }
hr {
	border: 0;
	border-top: 1px solid var(--dt-color-border);
	margin: var(--dt-space-xl) 0;
}

/* Focus */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--dt-color-focus);
	outline-offset: 3px;
	border-radius: var(--dt-radius-sm);
}

/* ────────────────────────────────────────────────────────────────────────
   4. ACCESIBILIDAD
   ──────────────────────────────────────────────────────────────────────── */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--dt-color-primary);
	color: var(--dt-color-on-primary);
	padding: .75rem 1rem;
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: var(--dt-z-skiplink);
	border-radius: var(--dt-radius-sm);
	transition: top var(--dt-dur-base) var(--dt-ease);
	font-weight: var(--dt-fw-demi);
}
.skip-link:focus { top: 1rem; color: var(--dt-color-on-primary); }

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

/* ────────────────────────────────────────────────────────────────────────
   5. TIPOGRAFÍA
   ──────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dt-font-display);
	font-weight: var(--dt-fw-bold);
	line-height: var(--dt-lh-tight);
	letter-spacing: var(--dt-tracking-tight);
	color: var(--dt-color-text);
	margin: 0 0 var(--dt-space-md);
}
h1 { font-size: var(--dt-fs-h1); }
h2 { font-size: var(--dt-fs-h2); }
h3 { font-size: var(--dt-fs-h3); }
h4 { font-size: var(--dt-fs-h4); font-weight: var(--dt-fw-demi); }
h5 { font-size: var(--dt-fs-h5); font-weight: var(--dt-fw-demi); }
h6 { font-size: var(--dt-fs-h6); font-weight: var(--dt-fw-demi); }

p { margin: 0 0 var(--dt-space-md); }
.prose p:last-child { margin-bottom: 0; }

.lead, .prose--lead p:first-child {
	font-size: var(--dt-fs-lead);
	line-height: var(--dt-lh-relaxed);
	color: var(--dt-color-text-muted);
}

.eyebrow {
	display: inline-block;
	font-size: var(--dt-fs-eyebrow);
	font-weight: var(--dt-fw-demi);
	letter-spacing: var(--dt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dt-color-beige-dark);
	margin-bottom: var(--dt-space-sm);
}

.prose { line-height: var(--dt-lh-relaxed); }
.prose a {
	color: var(--dt-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--dt-color-beige-dark); }
.prose strong { font-weight: var(--dt-fw-bold); color: var(--dt-color-text); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--dt-space-md); }
.prose li { margin-bottom: var(--dt-space-2xs); }
.prose blockquote {
	border-left: 3px solid var(--dt-color-beige);
	padding-left: var(--dt-space-md);
	margin: var(--dt-space-lg) 0;
	color: var(--dt-color-text-muted);
	font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────
   6. LAYOUT
   ──────────────────────────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--dt-container-max);
	margin-inline: auto;
	padding-inline: var(--dt-container-pad);
}

.section { padding-block: var(--dt-section-pad-y); }
.section--alt { background-color: var(--dt-color-bg-alt); }
.section--dark {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-on-primary);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: inherit; }

.site-main {
	min-height: calc(100vh - var(--dt-header-height) - 280px);
}

/* ────────────────────────────────────────────────────────────────────────
   7. BOTONES
   ──────────────────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dt-space-xs);
	padding: .9rem 1.75rem;
	border-radius: var(--dt-radius-pill);
	font-family: var(--dt-font-display);
	font-weight: var(--dt-fw-demi);
	font-size: var(--dt-fs-body);
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--dt-dur-base) var(--dt-ease),
		color var(--dt-dur-base) var(--dt-ease),
		border-color var(--dt-dur-base) var(--dt-ease),
		transform var(--dt-dur-fast) var(--dt-ease),
		box-shadow var(--dt-dur-base) var(--dt-ease);
	user-select: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--dt-shadow-md); }
.btn:not(:disabled):active { transform: translateY(0); }

.btn--primary {
	background-color: var(--dt-color-beige);
	color: var(--dt-color-on-beige);
}
.btn--primary:not(:disabled):hover {
	background-color: var(--dt-color-beige-dark);
	color: var(--dt-color-on-primary);
}

.btn--secondary {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-on-primary);
}
.btn--secondary:not(:disabled):hover {
	background-color: var(--dt-color-primary-dark);
	color: var(--dt-color-on-primary);
}

.btn--outline {
	background-color: transparent;
	color: var(--dt-color-text);
	border-color: var(--dt-color-text);
}
.btn--outline:not(:disabled):hover {
	background-color: var(--dt-color-text);
	color: var(--dt-color-bg);
}

.btn--outline-light {
	background-color: transparent;
	color: var(--dt-color-on-primary);
	border-color: rgba(252, 253, 255, .7);
}
.btn--outline-light:not(:disabled):hover {
	background-color: var(--dt-color-on-primary);
	color: var(--dt-color-primary);
}

.btn--outline-beige {
	background-color: transparent;
	color: var(--dt-color-beige-dark);
	border-color: var(--dt-color-beige);
}
.btn--outline-beige:not(:disabled):hover {
	background-color: var(--dt-color-beige);
	color: var(--dt-color-on-beige);
	border-color: var(--dt-color-beige);
}

.btn--sm { padding: .55rem 1.1rem; font-size: var(--dt-fs-small); }
.btn--lg { padding: 1.15rem 2.25rem; font-size: var(--dt-fs-lead); }

/* ────────────────────────────────────────────────────────────────────────
   8. ICONOS
   ──────────────────────────────────────────────────────────────────────── */

.icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	color: inherit;
}
.icon--social { color: var(--dt-color-text); }
.site-footer__social a:hover .icon { color: var(--dt-color-beige-dark); }

/* ────────────────────────────────────────────────────────────────────────
   9. FORMULARIOS
   ──────────────────────────────────────────────────────────────────────── */

.form-row { margin-bottom: var(--dt-space-md); }
.form-label {
	display: block;
	font-size: var(--dt-fs-small);
	font-weight: var(--dt-fw-demi);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dt-color-text-muted);
	margin-bottom: var(--dt-space-2xs);
}
.form-input {
	display: block;
	width: 100%;
	padding: .75rem 0;
	font-family: var(--dt-font-body);
	font-size: var(--dt-fs-body);
	line-height: var(--dt-lh-snug);
	color: var(--dt-color-text);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--dt-color-border);
	border-radius: 0;
	transition: border-color var(--dt-dur-base) var(--dt-ease);
}
.form-input:focus {
	outline: 0;
	border-bottom-color: var(--dt-color-primary);
	box-shadow: 0 1px 0 0 var(--dt-color-primary);
}
textarea.form-input { min-height: 7rem; resize: vertical; }
select.form-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--dt-color-text-muted) 50%),
		linear-gradient(135deg, var(--dt-color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.75rem;
}
.form-grid { display: grid; gap: var(--dt-space-md); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }

.form-radio-group { display: flex; gap: var(--dt-space-md); padding-top: .25rem; }
.form-radio-group label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }

.form-actions { display: flex; align-items: center; gap: var(--dt-space-md); margin-top: var(--dt-space-md); flex-wrap: wrap; }
.form-feedback {
	margin: 0;
	font-size: var(--dt-fs-small);
	color: var(--dt-color-text-muted);
	min-height: 1.25em;
}
.form-feedback[data-state="success"] { color: var(--dt-color-success); }
.form-feedback[data-state="error"]   { color: var(--dt-color-error); }
.form-feedback[data-state="pending"] { color: var(--dt-color-text-muted); opacity: .8; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ────────────────────────────────────────────────────────────────────────
   10. HEADER
   ──────────────────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--dt-z-header);
	background-color: rgba(252, 253, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	color: var(--dt-color-beige-dark);
	transition: background-color var(--dt-dur-base) var(--dt-ease),
		border-color var(--dt-dur-base) var(--dt-ease),
		box-shadow var(--dt-dur-base) var(--dt-ease),
		transform var(--dt-dur-base) var(--dt-ease),
		height var(--dt-dur-base) var(--dt-ease);
}
.site-header.is-scrolled {
	background-color: rgba(252, 253, 255, .98);
	border-bottom-color: var(--dt-color-border);
	box-shadow: var(--dt-shadow-sm);
}
.site-header.is-scrolled .site-header__inner { height: calc(var(--dt-header-height) - 16px); }
.site-header.is-hidden { transform: translateY(-100%); }

/* 3-col grid: nav (izq) · branding centrado · actions (der) */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--dt-space-lg);
	height: var(--dt-header-height);
	width: 100%;
	max-width: var(--dt-container-max);
	margin-inline: auto;
	padding-inline: var(--dt-container-pad);
}

/* ── Branding centrado ── */
.site-header__branding { display: flex; justify-content: center; align-items: center; }
.site-header__branding a,
.site-header__branding .custom-logo-link { display: inline-flex; align-items: center; color: var(--dt-color-beige); }
.site-header__branding .custom-logo,
.site-header__branding img,
.site-header__branding svg { max-height: 52px; width: auto; }
.site-header__branding .site-branding__text {
	font-family: "Didot", "Bodoni 72", "Playfair Display", "Times New Roman", serif;
	font-weight: 400;
	font-size: 2rem;
	color: var(--dt-color-beige);
	letter-spacing: .04em;
}

/* ── Nav (izquierda) ── */
.site-nav { display: flex; justify-content: flex-start; align-items: center; }
.site-nav__menu {
	list-style: none;
	display: flex;
	gap: var(--dt-space-xl);
	margin: 0;
	padding: 0;
}
.site-nav__menu li a {
	font-family: var(--dt-font-body);
	font-weight: var(--dt-fw-book);
	font-size: var(--dt-fs-body);
	color: var(--dt-color-beige-dark);
	padding: var(--dt-space-xs) 0;
	position: relative;
	transition: color var(--dt-dur-fast) var(--dt-ease);
}
.site-nav__menu li a:hover { color: var(--dt-color-text); }
.site-nav__menu li a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 1.5px;
	background-color: var(--dt-color-beige);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dt-dur-base) var(--dt-ease);
}
.site-nav__menu li a:hover::after,
.site-nav__menu li.current-menu-item a::after,
.site-nav__menu li a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Actions (CTA + lang) a la derecha ── */
.site-header__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--dt-space-md);
}

.site-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--dt-radius-sm);
	position: relative;
	color: var(--dt-color-beige-dark);
}
.site-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	margin: 4px auto;
	transition: transform var(--dt-dur-base) var(--dt-ease), opacity var(--dt-dur-fast) var(--dt-ease);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-header__cta .btn { padding-inline: 1.35rem; }

/* Panel que contiene menu + extras (lang + CTA). En desktop sólo wrapper. */
.site-nav__panel { display: contents; }
.site-nav__extras { display: none; }

/* ── Selector de idioma (dropdown vía <details>) ── */
.site-nav__lang { position: relative; }
.site-nav__lang[open] .icon--chevron { transform: rotate(180deg); }
.site-nav__lang summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--dt-space-2xs);
	font-family: var(--dt-font-body);
	font-weight: var(--dt-fw-book);
	font-size: var(--dt-fs-body);
	color: var(--dt-color-beige-dark);
	padding: var(--dt-space-xs) var(--dt-space-sm);
	border-radius: var(--dt-radius-sm);
	transition: color var(--dt-dur-fast) var(--dt-ease), background-color var(--dt-dur-fast) var(--dt-ease);
}
.site-nav__lang summary::-webkit-details-marker { display: none; }
.site-nav__lang summary:hover { color: var(--dt-color-text); background-color: var(--dt-color-beige-soft); }
.site-nav__lang .icon--chevron { transition: transform var(--dt-dur-base) var(--dt-ease); }

.site-nav__lang-list {
	list-style: none;
	margin: 0;
	padding: var(--dt-space-2xs);
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 140px;
	background-color: var(--dt-color-bg);
	border: 1px solid var(--dt-color-border);
	border-radius: var(--dt-radius-md);
	box-shadow: var(--dt-shadow-md);
	z-index: 1;
}
.site-nav__lang-list li a {
	display: block;
	padding: var(--dt-space-xs) var(--dt-space-sm);
	font-size: var(--dt-fs-small);
	color: var(--dt-color-text);
	border-radius: var(--dt-radius-sm);
}
.site-nav__lang-list li a:hover { background-color: var(--dt-color-bg-alt); }
.site-nav__lang-list li a.is-current { background-color: var(--dt-color-beige-soft); color: var(--dt-color-text); font-weight: var(--dt-fw-demi); }
.site-nav__lang--mobile .site-nav__lang-list { position: static; box-shadow: none; border: 0; padding-left: 0; }
.site-nav__lang--mobile summary { padding-inline: 0; }

/* ────────────────────────────────────────────────────────────────────────
   11. FOOTER (dark theme, según Figma)
   ──────────────────────────────────────────────────────────────────────── */

:root {
	--dt-footer-bg:        #0a0a0a;
	--dt-footer-text:      #fcfdff;
	--dt-footer-muted:     rgba(252, 253, 255, .55);
	--dt-footer-border:    rgba(252, 253, 255, .12);
}

.site-footer {
	margin-top: var(--dt-space-4xl);
	background-color: var(--dt-footer-bg);
	color: var(--dt-footer-text);
}
.site-footer__container {
	padding-block: var(--dt-space-2xl) var(--dt-space-xl);
}

.site-footer__divider {
	height: 1px;
	background-color: var(--dt-footer-border);
	margin-block: var(--dt-space-2xl);
}

/* ── Brand row: logo izq + nav inline der ── */
.site-footer__brand-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--dt-space-2xl);
	align-items: start;
}
.site-footer__brand a,
.site-footer__brand .custom-logo-link,
.site-footer__brand .site-branding__text {
	color: var(--dt-color-beige);
}
.site-footer__brand .site-branding__text {
	font-family: "Didot", "Bodoni 72", "Playfair Display", "Times New Roman", serif;
	font-weight: 400;
	font-size: 2.5rem;
	letter-spacing: .04em;
	color: var(--dt-color-beige);
}
.site-footer__brand img,
.site-footer__brand svg { max-height: 56px; width: auto; }
.site-footer__claim {
	color: var(--dt-footer-muted);
	max-width: 32ch;
	margin: var(--dt-space-md) 0 0;
	font-size: var(--dt-fs-small);
}

.site-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--dt-space-md);
}
.site-footer__menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: var(--dt-space-xl);
}
.site-footer__menu li a {
	color: var(--dt-footer-text);
	font-size: var(--dt-fs-body);
	font-weight: var(--dt-fw-book);
	transition: color var(--dt-dur-fast) var(--dt-ease);
}
.site-footer__menu li a:hover { color: var(--dt-color-beige); }

.site-footer__social {
	list-style: none;
	display: flex;
	gap: var(--dt-space-sm);
	margin: 0;
	padding: 0;
}
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background-color: rgba(252, 253, 255, .06);
	color: var(--dt-footer-text);
	transition: background-color var(--dt-dur-base) var(--dt-ease), color var(--dt-dur-base) var(--dt-ease), transform var(--dt-dur-fast) var(--dt-ease);
}
.site-footer__social a:hover {
	background-color: var(--dt-color-beige);
	color: var(--dt-color-on-beige);
	transform: translateY(-1px);
}

/* ── Meta row: copyright izq + legal centro + "By mxart" der ── */
.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--dt-space-md);
	margin-top: var(--dt-space-2xl);
	padding-top: var(--dt-space-md);
	border-top: 1px solid var(--dt-footer-border);
	font-size: var(--dt-fs-small);
	color: var(--dt-footer-muted);
}
.site-footer__copy { margin: 0; }
.site-footer__legal { list-style: none; display: flex; gap: var(--dt-space-md); margin: 0; padding: 0; }
.site-footer__legal li a:hover { color: var(--dt-footer-text); }

.site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: var(--dt-space-2xs);
	color: var(--dt-footer-muted);
	transition: color var(--dt-dur-fast) var(--dt-ease);
}
.site-footer__credit:hover { color: var(--dt-footer-text); }
.site-footer__credit-mark { vertical-align: middle; }
.site-footer__credit span { font-style: italic; }

/* ────────────────────────────────────────────────────────────────────────
   12. NEWSLETTER (dentro del footer dark)
   ──────────────────────────────────────────────────────────────────────── */

.newsletter { color: var(--dt-footer-text); }
.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: var(--dt-space-2xl);
}
.newsletter__title {
	color: inherit;
	margin: 0 0 var(--dt-space-xs);
	font-size: var(--dt-fs-h5);
	font-weight: var(--dt-fw-bold);
}
.newsletter__copy {
	color: var(--dt-footer-muted);
	margin: 0;
	font-size: var(--dt-fs-small);
	max-width: 42ch;
	line-height: var(--dt-lh-relaxed);
}
.newsletter__form-wrap { width: 100%; }
.newsletter__form {
	display: flex;
	gap: var(--dt-space-sm);
	align-items: center;
}
.newsletter__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 1px solid rgba(252, 253, 255, .35);
	border-radius: var(--dt-radius-pill);
	padding: .9rem 1.25rem;
	color: var(--dt-footer-text);
	font-family: var(--dt-font-body);
	font-size: var(--dt-fs-body);
	transition: border-color var(--dt-dur-base) var(--dt-ease), background-color var(--dt-dur-base) var(--dt-ease);
}
.newsletter__input::placeholder { color: rgba(252, 253, 255, .55); }
.newsletter__input:focus {
	outline: 0;
	border-color: var(--dt-footer-text);
	background-color: rgba(252, 253, 255, .04);
}
.newsletter__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--dt-space-xs);
	background-color: var(--dt-footer-text);
	color: var(--dt-footer-bg);
	border: 0;
	padding: .9rem 1.5rem;
	border-radius: var(--dt-radius-pill);
	font-family: var(--dt-font-body);
	font-weight: var(--dt-fw-light);
	font-size: var(--dt-fs-body);
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dt-dur-base) var(--dt-ease), transform var(--dt-dur-fast) var(--dt-ease);
}
.newsletter__submit:not(:disabled):hover {
	background-color: var(--dt-color-beige);
	color: var(--dt-color-on-beige);
	transform: translateY(-1px);
}
.newsletter__submit:disabled { opacity: .5; cursor: not-allowed; }
.newsletter__submit .icon { width: 18px; height: 18px; }

.newsletter__feedback {
	margin: var(--dt-space-sm) 0 0;
	font-size: var(--dt-fs-small);
	min-height: 1.25em;
	color: var(--dt-footer-muted);
}
.newsletter__feedback[data-state="success"] { color: #b9e6c5; }
.newsletter__feedback[data-state="error"]   { color: #f4b4a8; }

/* ────────────────────────────────────────────────────────────────────────
   13. MODAL — Make an Appointment
   ──────────────────────────────────────────────────────────────────────── */

.modal[hidden] { display: none; }
.modal {
	position: fixed;
	inset: 0;
	z-index: var(--dt-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dt-space-md);
}
.modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(39, 38, 38, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background-color: var(--dt-color-bg);
	border-radius: var(--dt-radius-lg);
	box-shadow: var(--dt-shadow-lg);
	padding: var(--dt-space-2xl) var(--dt-space-xl) var(--dt-space-xl);
	animation: modal-in var(--dt-dur-base) var(--dt-ease);
}
@keyframes modal-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__close {
	position: absolute;
	top: 1rem; right: 1rem;
	width: 36px; height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dt-color-text-muted);
	transition: background-color var(--dt-dur-base) var(--dt-ease), color var(--dt-dur-base) var(--dt-ease);
}
.modal__close:hover { background-color: var(--dt-color-bg-alt); color: var(--dt-color-text); }
.modal__header { margin-bottom: var(--dt-space-lg); }
.modal__title {
	font-size: var(--dt-fs-h3);
	margin: 0 0 var(--dt-space-xs);
	letter-spacing: var(--dt-tracking-tight);
}
.modal__lede {
	font-size: var(--dt-fs-small);
	color: var(--dt-color-text-muted);
	margin: 0 0 var(--dt-space-md);
}
.modal__steps {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: var(--dt-space-md);
	border-bottom: 1px solid var(--dt-color-border);
}
.modal__step {
	display: inline-flex;
	align-items: center;
	gap: var(--dt-space-xs);
	font-size: var(--dt-fs-small);
	font-weight: var(--dt-fw-demi);
	color: var(--dt-color-text-muted);
	padding-bottom: var(--dt-space-sm);
	position: relative;
}
.modal__step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background-color: var(--dt-color-bg-alt);
	color: var(--dt-color-text-muted);
	font-size: 11px;
	font-weight: var(--dt-fw-bold);
}
.modal__step.is-active .modal__step-n { background-color: var(--dt-color-beige); color: var(--dt-color-on-beige); }
.modal__insurance-fields[hidden] { display: none; }
.modal__step.is-active { color: var(--dt-color-primary); }
.modal__step.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background-color: var(--dt-color-beige);
}
.modal__panel { display: none; border: 0; padding: 0; margin: 0; }
.modal__panel.is-active { display: block; }
.modal__actions { display: flex; justify-content: flex-end; margin-top: var(--dt-space-lg); }
.modal__actions--split { justify-content: space-between; }

body.has-modal-open { overflow: hidden; }

/* ────────────────────────────────────────────────────────────────────────
   14. BREADCRUMBS
   ──────────────────────────────────────────────────────────────────────── */

.breadcrumbs { font-size: var(--dt-fs-small); margin-bottom: var(--dt-space-md); }
.breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-space-2xs);
	margin: 0; padding: 0;
	color: var(--dt-color-text-muted);
}
.breadcrumbs__item:not(:last-child)::after {
	content: "·";
	margin-inline: var(--dt-space-2xs);
	color: var(--dt-color-border);
}
.breadcrumbs__item a:hover { color: var(--dt-color-beige-dark); }

/* ────────────────────────────────────────────────────────────────────────
   15. ANIMACIONES (data-animate)
   ──────────────────────────────────────────────────────────────────────── */

[data-animate] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dt-dur-slow) var(--dt-ease), transform var(--dt-dur-slow) var(--dt-ease);
}
[data-animate].is-animated {
	opacity: 1;
	transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────────────────
   16. UTILIDADES
   ──────────────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-muted  { color: var(--dt-color-text-muted); }
.bg-cream    { background-color: var(--dt-color-cream); }
.bg-beige    { background-color: var(--dt-color-beige); color: var(--dt-color-on-beige); }
.bg-primary  { background-color: var(--dt-color-primary); color: var(--dt-color-on-primary); }

.stack > * + * { margin-top: var(--dt-space-md); }
.stack-lg > * + * { margin-top: var(--dt-space-lg); }

.divider-curve {
	display: block;
	width: 100%;
	height: 24px;
	background: radial-gradient(circle at 50% 0, var(--dt-color-bg-alt) 0 24px, transparent 25px);
}

/* ────────────────────────────────────────────────────────────────────────
   17. LANDING — HERO (DEN-14)
   ──────────────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	background-color: var(--dt-color-bg);
	background-image: url("../img/portada-fondo-hero.png");
	background-repeat: repeat;
	background-size: 720px auto;
	background-position: center top;
	overflow: hidden;
	isolation: isolate;
	min-height: calc(100vh - var(--dt-header-height));
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: var(--dt-space-2xl);
	width: 100%;
	max-width: var(--dt-container-max);
	margin-inline: auto;
	padding-inline: var(--dt-container-pad);
	min-height: inherit;
}

.hero__content {
	align-self: center;
	padding-block: var(--dt-space-3xl);
	max-width: 640px;
	padding-inline-end: var(--dt-space-xl);
}

.hero__title {
	font-family: var(--dt-font-display);
	font-weight: var(--dt-fw-demi);
	font-size: clamp(2rem, 3.4vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--dt-color-text-warm);
	margin: 0 0 var(--dt-space-lg);
}

.hero__subtitle {
	font-family: var(--dt-font-body);
	font-weight: var(--dt-fw-book);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	color: var(--dt-color-text-warm);
	opacity: .8;
	margin: 0 0 var(--dt-space-xl);
	max-width: 38ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-space-md);
}
.hero__actions .btn { min-width: 140px; }

/* Media: pegada top y bottom del hero, bleeding al borde derecho.
   Usamos position:absolute para que la imagen NO arrastre el sizing del grid.
   El cell se dimensiona libre por el grid (1fr + min-height del hero)
   y la imagen llena ese cell con object-fit:contain anclada bottom-right. */
.hero__media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
	margin-inline-end: calc(-1 * var(--dt-container-pad));
	min-height: 100%;
}
.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
}

/* ────────────────────────────────────────────────────────────────────────
   18. ESTADO 404 + PÁGINAS GENÉRICAS
   ──────────────────────────────────────────────────────────────────────── */

.error-404 {
	padding: var(--dt-space-4xl) 0;
	text-align: center;
	max-width: 600px;
	margin-inline: auto;
}
.error-404__eyebrow {
	font-size: 5rem;
	font-weight: var(--dt-fw-bold);
	color: var(--dt-color-beige);
	line-height: 1;
	margin: 0;
}
.error-404__title { font-size: var(--dt-fs-h2); margin-top: var(--dt-space-md); }
.error-404__copy  { color: var(--dt-color-text-muted); margin-bottom: var(--dt-space-lg); }
.error-404__actions { display: flex; gap: var(--dt-space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--dt-space-xl); }

.page-hero { width: 100%; max-height: 60vh; overflow: hidden; }
.page-hero__img { width: 100%; object-fit: cover; }
.page-content { padding-block: var(--dt-space-3xl); }
.page-content__title { font-size: var(--dt-fs-h1); margin-bottom: var(--dt-space-md); }