/* Dirección C · estilo claro. Página de concesionario: blanco y gris niebla, tinta azul marino,
   acento rojo Nautique, titulares condensados en mayúsculas y fichas con datos.
   Se carga después de site.css: aquí sólo hay piel, la estructura vive en la base.
   Tipografía autoalojada (Barlow / Barlow Condensed, SIL OFL 1.1, licencia en
   assets/fonts/nq-c-barlow-OFL.txt). Sin peticiones externas. */

@font-face {
	font-family: "NQ Barlow Condensed";
	src: url("../fonts/nq-c-barlow-condensed-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NQ Barlow";
	src: url("../fonts/nq-c-barlow-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NQ Barlow";
	src: url("../fonts/nq-c-barlow-500.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NQ Barlow";
	src: url("../fonts/nq-c-barlow-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

.direccion-c {
	--navy-950: #06111c;
	--navy-900: #0b1b2b;
	--ink: #0f1d2b;
	--ink-soft: #4a5866;      /* 7,3:1 sobre blanco · 6,6:1 sobre --mist */
	--on-dark-soft: #b8c4cf;  /* 9,8:1 sobre --navy-900 */
	--mist: #f2f4f6;
	--paper: #ffffff;
	--red: #c8102e;           /* 5,9:1 con blanco, en ambos sentidos */
	--red-dark: #a00c24;
	--amber: #8a5300;         /* 6,2:1 sobre blanco */
	--inactive: #6b7885;      /* 4,5:1 sobre blanco */
	--green: #0b6b3a;         /* 6,6:1 con texto blanco */
	--green-dark: #08522c;

	/* Tokens de site.css redefinidos: la base adopta la paleta de C. */
	--bg: var(--paper);
	--text: var(--ink);
	--muted: var(--ink-soft);
	--line: #d9dfe5;
	--accent: var(--red);
	--accent-contrast: #ffffff;
	--focus: var(--red);
	--radius: 2px;
	--gutter: clamp(16px, 4vw, 48px);

	--font-display: "NQ Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "NQ Barlow", "Helvetica Neue", Arial, sans-serif;
	--max: 1320px;
	--wrap: calc(var(--max) + 2 * var(--gutter));
	/* Borde izquierdo del bloque centrado: permite limitar la medida de un párrafo sin que se
	   descoloque, porque «margin-inline: auto» lo centraría. */
	--edge-box: max(0px, calc((100% - var(--wrap)) / 2));
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* El alto de la cabecera se declara también en el <html>, que es el elemento que hace scroll:
   allí lo necesita «scroll-padding-top» y no puede heredarlo del <body>. Una sola regla para los
   dos, para que no puedan descuadrarse. */
html[data-direccion="c"],
.direccion-c { --header-h: 64px; }

@media (min-width: 1080px) {
	html[data-direccion="c"],
	.direccion-c { --header-h: 84px; }
}

/* Lo heredable va en el <body>, nunca en el elemento raíz: allí «1.0625rem» se resolvería contra
   16 px y el body volvería a escalar sobre ese valor (18,06 px en vez de 17). El fondo, igual: si
   lo lleva el <html>, el del <body> deja de propagarse al lienzo y los archivos pierden el gris. */
body.direccion-c {
	font: 400 1.0625rem/1.6 var(--font-body);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

/* Cabecera fija: el elemento que hace scroll reserva su alto más aire para el anillo de foco, de
   modo que lo que enfoca el tabulador nunca queda debajo. Sin esto el navegador no desplaza nada
   cuando el elemento enfocado ya le parece visible, aunque la cabecera lo esté tapando. */
html[data-direccion="c"] { scroll-padding-top: calc(var(--header-h) + 16px); }

/* Catálogo sobre gris niebla, como en la portada: las fichas blancas se leen como piezas.
   Va en el <body> porque las plantillas compartidas de archivo no tienen un bloque a sangre. */
body.direccion-c.post-type-archive-nq_model,
body.direccion-c.post-type-archive-nq_used_boat { background: var(--mist); }

/* Bloques oscuros: el foco pasa a blanco (el rojo no llega a 3:1 sobre marino). */
.direccion-c .site-header,
.direccion-c .hero,
.direccion-c .page-head,
.direccion-c .model__hero,
.direccion-c .boat__head,
.direccion-c .section--contact,
.direccion-c .site-footer {
	--focus: #ffffff;
	--line: rgba(255, 255, 255, 0.16);
}

/* -------------------------------------------------------------------- base */

html[data-direccion="c"] { scroll-behavior: smooth; }

.direccion-c [hidden] { display: none !important; }

.direccion-c h1,
.direccion-c h2,
.direccion-c h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}
.direccion-c h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem); margin: 0; }
/* Los titulares de sección de portada son los grandes; dentro de una página interior el h2 es
   un subtítulo y no debe competir con el título de la página. */
.direccion-c h2 { font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem); margin: 0; }
.direccion-c .section--bleed .section-head h2 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem); }
.direccion-c h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin: 0; }

.direccion-c a { color: inherit; }
.direccion-c :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.direccion-c .skip-link:focus {
	border-radius: 0;
	padding: 14px 20px;
	color: var(--navy-900);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 6px 24px rgba(6, 17, 28, 0.3);
}

.direccion-c .lead {
	font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
	line-height: 1.45;
	font-weight: 500;
}

/* Etiqueta de sección: filete rojo + texto en versalitas espaciadas. */
.direccion-c .eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--red);
}

.direccion-c .nq-fallback-note {
	margin: 0 0 8px;
	font-size: 0.875rem;
	font-style: normal;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

/* ----------------------------------------------------------------- botones */

.direccion-c .button {
	min-height: 52px;
	margin: 0 12px 12px 0;
	padding: 14px 28px;
	border: 2px solid var(--ink);
	border-radius: 2px;
	gap: 10px;
	font: 600 0.875rem/1.1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.direccion-c .button:hover { background: var(--ink); color: #fff; }
.direccion-c .button--primary { background: var(--red); border-color: var(--red); color: #fff; }
.direccion-c .button--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

/* Botones sobre foto o fondo marino. */
.direccion-c .hero .button,
.direccion-c .model__hero .button,
.direccion-c .section--contact .button,
.direccion-c .page-head .button,
.direccion-c .boat__head .button {
	border-color: rgba(255, 255, 255, 0.9);
	background: rgba(6, 17, 28, 0.35);
	color: #fff;
}
.direccion-c .hero .button:hover,
.direccion-c .model__hero .button:hover,
.direccion-c .section--contact .button:hover,
.direccion-c .page-head .button:hover,
.direccion-c .boat__head .button:hover {
	background: #fff;
	color: var(--navy-900);
}
.direccion-c .hero .button--primary,
.direccion-c .model__hero .button--primary,
.direccion-c .section--contact .button--primary,
.direccion-c .page-head .button--primary,
.direccion-c .boat__head .button--primary {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.direccion-c .hero .button--primary:hover,
.direccion-c .model__hero .button--primary:hover,
.direccion-c .section--contact .button--primary:hover,
.direccion-c .page-head .button--primary:hover,
.direccion-c .boat__head .button--primary:hover {
	background: var(--red-dark);
	border-color: var(--red-dark);
	color: #fff;
}

/* ---------------------------------------------------------------- cabecera */

.direccion-c .site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
}
/* La barra de administración es fija y se comería la cabecera de quien navegue con la sesión
   abierta. WordPress la hace de 32 px, y de 46 px por debajo de 782. */
body.admin-bar.direccion-c .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.direccion-c .site-header { top: 46px; }
}
html[data-direccion="c"]:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 16px + 32px); }
@media (max-width: 782px) {
	html[data-direccion="c"]:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 16px + 46px); }
}
.direccion-c .site-header__inner {
	max-width: var(--wrap);
	min-height: var(--header-h);
	gap: 20px;
	flex-wrap: nowrap;
}

/* Marca: el logotipo de la clienta (versión clara) sobre el marino, con el territorio debajo,
   como en la maqueta. La pieza compartida sólo pinta la marca, así que la línea va al lado. */
.direccion-c .brand {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	margin-right: auto;
}
.direccion-c .site-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	text-decoration: none;
}
.direccion-c .site-logo__image { width: 132px; height: auto; }
.direccion-c .brand__place {
	padding-left: 1px;
	font: 600 0.625rem/1 var(--font-body);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #fff;
}
/* Reserva: si se vaciara el logotipo en ajustes, la pieza compartida pinta texto. */
.direccion-c .site-logo__name {
	font: 600 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1 var(--font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.direccion-c .site-logo__place {
	margin-left: 10px;
	font: 600 0.625rem/1 var(--font-body);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
}

@media (min-width: 1080px) {
	.direccion-c .site-logo__image { width: 172px; }
}

.direccion-c .nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 44px;
	min-height: 44px;
	margin-right: -10px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: #fff;
	font: 600 0.8125rem/1 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.direccion-c .nav-toggle__bars,
.direccion-c .nav-toggle__bars::before,
.direccion-c .nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s var(--ease), background-color 0.25s;
}
.direccion-c .nav-toggle__bars { position: relative; }
.direccion-c .nav-toggle__bars::before,
.direccion-c .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.direccion-c .nav-toggle__bars::before { transform: translateY(-7px); }
.direccion-c .nav-toggle__bars::after { transform: translateY(7px); }
.direccion-c .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.direccion-c .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.direccion-c .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

.direccion-c .site-nav ul { list-style: none; margin: 0; padding: 0; }
.direccion-c .site-nav a,
.direccion-c .lang-switch span[aria-current] { color: #fff; text-decoration: none; }

/* Menú desplegable hasta 1079px. */
@media (max-width: 1079.98px) {
	.direccion-c .site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		padding: 4px var(--gutter) 24px;
		background: var(--navy-900);
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		box-shadow: 0 18px 40px -18px rgba(6, 17, 28, 0.7);
	}
	.direccion-c .site-nav.is-open { display: block; width: auto; }
	.direccion-c .site-nav__list a {
		display: flex;
		align-items: center;
		min-height: 60px;
		padding: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		font: 600 1.5rem/1 var(--font-display);
		letter-spacing: 0.01em;
		text-transform: uppercase;
	}
	.direccion-c .site-nav__list a[aria-current] {
		text-decoration: underline 2px var(--red);
		text-underline-offset: 8px;
	}
	.direccion-c .lang-switch { margin-top: 16px; }
}

.direccion-c .lang-switch {
	display: flex;
	align-items: center;
	font: 600 0.8125rem/1 var(--font-body);
	letter-spacing: 0.14em;
}
.direccion-c .lang-switch a,
.direccion-c .lang-switch span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
}
.direccion-c .lang-switch a { color: var(--on-dark-soft); }
.direccion-c .lang-switch a:hover { color: #fff; }
/* Filete entre los dos idiomas, como la barra vertical de la maqueta. */
.direccion-c .lang-switch li + li { display: flex; align-items: center; }
.direccion-c .lang-switch li + li::before {
	content: "";
	flex: none;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.4);
}
.direccion-c .lang-switch span[aria-current] {
	text-decoration: underline 2px var(--red);
	text-underline-offset: 6px;
}

@media (min-width: 1080px) {
	.direccion-c .nav-toggle { display: none; }
	.direccion-c .site-nav {
		display: flex;
		align-items: center;
		gap: 32px;
	}
	.direccion-c .site-nav__list { display: flex; gap: 30px; }
	.direccion-c .site-nav__list a {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		font: 600 0.875rem/1 var(--font-body);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.direccion-c .site-nav__list a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4px;
		height: 2px;
		background: var(--red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s var(--ease);
	}
	.direccion-c .site-nav__list a:hover::after,
	.direccion-c .site-nav__list a[aria-current]::after { transform: scaleX(1); }
	.direccion-c .site-nav__list a[aria-current] { text-decoration: none; }
	.direccion-c .lang-switch {
		padding-left: 20px;
		border-left: 1px solid rgba(255, 255, 255, 0.35);
	}
}

/* ---------------------------------------------------------------- portada */

.direccion-c .hero {
	position: relative;
	isolation: isolate;
	/* Exactamente una pantalla: si además se le pusiera un suelo en píxeles, en móviles bajos
	   el hero sobresaldría de la ventana y su CTA acabaría debajo del flotante de WhatsApp. */
	min-height: calc(100svh - var(--header-h));
	max-height: 1000px;
	background: var(--navy-950);
}
.direccion-c .hero__poster,
.direccion-c .hero__video { z-index: 0; object-position: 58% 50%; }

/* Velo comprobado sobre el póster y el vídeo: el texto mantiene 4,5:1 y el titular 3:1. */
.direccion-c .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(0deg, rgba(6, 17, 28, 0.92) 0%, rgba(6, 17, 28, 0.82) 45%, rgba(6, 17, 28, 0.45) 72%, rgba(6, 17, 28, 0) 92%),
		linear-gradient(90deg, rgba(6, 17, 28, 0.55) 0%, rgba(6, 17, 28, 0) 62%);
	pointer-events: none;
}

.direccion-c .hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 72px var(--gutter) clamp(40px, 8vh, 96px);
	background: none;
	color: #fff;
}
.direccion-c .hero h1 {
	max-width: 12em;
	font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);
	line-height: 0.96;
}
.direccion-c .hero__subtitle {
	margin: 20px 0 0;
	max-width: 34ch;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}
.direccion-c .hero__actions {
	display: flex;
	flex-wrap: wrap;
	margin: 32px 0 -12px;
}

/* Los controles del vídeo (pausa y sonido) van juntos: arriba a la derecha en móvil, como la
   maqueta; abajo a la derecha desde 768. Se coloca el contenedor; dentro, los botones fluyen en
   fila (la base los tenía en absoluto: aquí vuelven a estático). */
.direccion-c .hero__controls {
	position: absolute;
	top: 16px;
	right: max(var(--gutter), calc((100% - var(--max)) / 2));
	z-index: 3;
	display: flex;
	gap: 8px;
}
.direccion-c .hero__toggle,
.direccion-c .hero__sound {
	position: static;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 2px;
	background: rgba(6, 17, 28, 0.72);
	color: #fff;
	font: 600 0.75rem/1 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.direccion-c .hero__toggle:hover,
.direccion-c .hero__sound:hover { background: #fff; color: var(--navy-900); }
/* El altavoz es cuadrado y solo icono (el nombre accesible va en texto oculto): tachado mientras
   el vídeo está en silencio, con ondas cuando suena. El vídeo arranca siempre en silencio. */
.direccion-c .hero__sound {
	justify-content: center;
	width: 44px;
	padding: 0;
}
.direccion-c .hero__sound-icon { display: block; width: 22px; height: 22px; }
.direccion-c .hero__sound .hero__sound-icon--muted,
.direccion-c .hero__sound.is-muted .hero__sound-icon--live { display: none; }
.direccion-c .hero__sound.is-muted .hero__sound-icon--muted { display: block; }

/* Desde 768 bajan a su sitio de la maqueta. Los 88 px los dejan por encima del acceso flotante
   de WhatsApp (56 de alto + 16 de separación + 16 de aire); además, la base retira el flotante
   cuando taparía un control. */
@media (min-width: 768px) {
	.direccion-c .hero__controls {
		top: auto;
		bottom: max(88px, clamp(40px, 9vh, 104px));
	}
}

/* En móvil los dos CTA ocupan el ancho, como en la maqueta. */
@media (max-width: 639px) {
	.direccion-c .hero__actions .button { flex: 1 1 auto; margin-right: 0; }
}

/* El acceso flotante de WhatsApp está fijo a la esquina inferior derecha de la ventana, y el
   hero mide justo una pantalla: en anchos estrechos, donde los botones llegan hasta ese lado,
   el hero le reserva su hueco (16 px de separación + 56 px de alto + 16 px de aire) para que
   nunca pise el CTA. */
@media (max-width: 700px) {
	.direccion-c .hero__content {
		padding-bottom: max(clamp(40px, 8vh, 96px), calc(88px + env(safe-area-inset-bottom, 0px)));
	}
}
/* Ventanas muy bajas (móvil apaisado, pantallas antiguas): el hero se aprieta por arriba para
   seguir cabiendo en una pantalla con ese hueco reservado. */
@media (max-height: 560px) {
	.direccion-c .hero__content { padding-top: 32px; }
	.direccion-c .hero__actions { margin-top: 20px; }
}
/* En apaisado el flotante se vuelve compacto (56 px) y se pega a la derecha, justo por donde
   pasa la fila de botones del hero. Se le reserva su columna (56 + 16) y la fila rompe antes de
   llegar. Si con dos filas el hero deja de caber en una pantalla, mejor eso que un CTA tapado:
   la regla de «una pantalla exacta» vale para vertical, no en apaisado. */
@media (max-height: 480px) {
	.direccion-c .hero__actions { max-width: calc(100% - 72px); }
}

/* --------------------------------------------- cabecera sobre la foto (portada) */

/* En la maqueta la foto llega hasta arriba del todo y la cabecera flota encima, marinándose al
   desplazarse. Eso necesita saber cuánto se ha desplazado la página: se resuelve con línea de
   tiempo de scroll, que es CSS, sin tocar el JS compartido. Donde no exista, queda la cabecera
   marina opaca de siempre, que es legible igual.

   Va condicionado también a que no se haya pedido movimiento reducido, y en bloque, no apagando
   la animación al final: con «animation-duration» no se apaga, porque aquí la línea de tiempo es
   el desplazamiento y no el tiempo; y apagándola a secas la cabecera se quedaría transparente
   para siempre, que sobre el gris de la gama es ilegible. Quien pida movimiento reducido recibe
   la misma cabecera maciza que quien no tenga soporte. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
	body.home.direccion-c main { margin-top: calc(-1 * var(--header-h) - 1px); }
	body.home.direccion-c .hero { min-height: 100svh; }
	body.home.direccion-c .hero__content { padding-top: calc(var(--header-h) + 72px); }
	/* El hero empieza ahora debajo de la cabecera, así que arriba los controles del vídeo se
	   bajan para no caer sobre el botón de menú. Desde 768 siguen abajo a la derecha. */
	@media (max-width: 767.98px) {
		body.home.direccion-c .hero__controls { top: calc(var(--header-h) + 16px); }
	}

	body.home.direccion-c .site-header {
		background-color: transparent;
		border-bottom-color: transparent;
		animation: nq-c-cabecera linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 140px;
	}
	/* Velo propio de la cabecera: el hero se aclara arriba y el menú necesita su fondo. */
	body.home.direccion-c .site-header::before {
		content: "";
		position: absolute;
		inset: 0 0 -72px;
		z-index: -1;
		background: linear-gradient(180deg, rgba(6, 17, 28, 0.9) 0%, rgba(6, 17, 28, 0.68) 50%, rgba(6, 17, 28, 0) 100%);
		pointer-events: none;
		animation: nq-c-velo linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 140px;
	}
	/* Con el menú abierto la cabecera es maciza: el desplegable cuelga de ella. */
	body.home.nav-open.direccion-c .site-header {
		animation: none;
		background-color: var(--navy-900);
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}
	body.home.nav-open.direccion-c .site-header::before { animation: none; opacity: 0; }
	}

	@keyframes nq-c-cabecera {
		to {
			background-color: var(--navy-900);
			border-bottom-color: rgba(255, 255, 255, 0.12);
		}
	}
	@keyframes nq-c-velo {
		to { opacity: 0; }
	}
}
/* El flotante compacto es un cuadrado de 56 px: ahí sobra el relleno lateral de mi versión ancha. */
@media (max-width: 480px), (max-height: 480px) {
	.direccion-c .whatsapp-link--float { padding: 0; }
}

/* --------------------------------------------------------------- secciones */

.direccion-c .section { padding-block: clamp(64px, 7.5vw, 120px); }
.direccion-c .section,
.direccion-c .site-footer__inner { max-width: var(--wrap); }

/* Secciones de portada a sangre: el ancho lo pone .wrap-c. */
.direccion-c .section--bleed {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.direccion-c .wrap-c {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.direccion-c .section-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.direccion-c .section-more { margin: clamp(32px, 4vw, 48px) 0 0; }

/* ------------------------------------------------------------------ modelos */

.direccion-c .section--models { background: var(--mist); }

.direccion-c .model-filters {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4px;
	margin: 0 0 clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--line);
}
.direccion-c .model-filters button {
	min-width: 44px;
	min-height: 48px;
	margin-bottom: -1px;
	padding: 0 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--ink-soft);
	font: 600 0.8125rem/1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.direccion-c .model-filters button:first-child { padding-left: 0; }
.direccion-c .model-filters button:hover { color: var(--ink); }
.direccion-c .model-filters button[aria-pressed="true"] {
	background: none;
	color: var(--ink);
	border-bottom-color: var(--red);
}
@media (max-width: 380px) {
	.direccion-c .model-filters { column-gap: 0; }
	.direccion-c .model-filters button { padding: 0 8px; font-size: 0.75rem; letter-spacing: 0.06em; }
}

/* En portada el filtro se alinea con el titular sin dejar de ser su hermano (lo exige el JS). */
@media (min-width: 900px) {
	.direccion-c .wrap-c--models {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: 48px;
	}
	.direccion-c .wrap-c--models .section-head { grid-column: 1; margin-bottom: 0; }
	.direccion-c .wrap-c--models .model-filters { grid-column: 2; justify-self: end; margin: 0; border-bottom: 0; }
	.direccion-c .wrap-c--models .grid--models { grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 40px); }
}

.direccion-c .grid--models {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 16px;
}

.direccion-c .model-card {
	position: relative;
	display: flex;
	background: var(--paper);
	border: 1px solid transparent;
	transition: border-color 0.2s;
}
.direccion-c .model-card:hover { border-color: var(--line); }
.direccion-c .model-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0 24px;
}
.direccion-c .model-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin: 0 -24px;
	padding: 44px 20px 12px;
	overflow: hidden;
}
.direccion-c .model-card__media img { width: 100%; max-width: 440px; }

/* La maqueta reparte los dos datos: la gama hace de antetítulo y la familia es una etiqueta en
   la esquina. Así que el párrafo se queda en el flujo llevando la gama, y la familia sale de él.
   La reserva de altura mantiene los títulos a la misma línea aunque un modelo no tenga gama. */
.direccion-c .model-card__family {
	display: block;
	min-height: 1.1rem;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .model-card__type {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 7px 10px;
	border: 1px solid var(--line);
	background: var(--paper);
	font-size: 0.6875rem;
	line-height: 1;
}
/* El punto separador de la base sobra cuando cada dato va por su lado. */
.direccion-c .model-card__line + .model-card__type::before { content: none; }
/* La pastilla de novedad ocupa la esquina opuesta a la familia, roja como en nautique.com. */
.direccion-c .model-card__badge {
	top: 16px;
	right: 16px;
	padding: 8px 10px;
	background: var(--red);
	font: 700 0.6875rem/1 var(--font-body);
	letter-spacing: 0.14em;
}
.direccion-c .model-card__title {
	display: flex;
	align-items: flex-end;
	min-height: 3.5rem;
	margin: 0;
	font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);
	line-height: 1;
}
.direccion-c .model-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	margin-top: 20px;
	border-top: 1px solid var(--line);
	font: 600 0.8125rem/1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.direccion-c .model-card__cta::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--red);
	transition: width 0.25s var(--ease);
}
.direccion-c .model-card:hover .model-card__cta::after { width: 44px; }

/* ------------------------------------------------------------ quiénes somos */

.direccion-c .about-grid { display: grid; gap: 28px; }
.direccion-c .about-text > p { margin: 0 0 18px; }
.direccion-c .about-text > p:first-child { font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem); font-weight: 500; line-height: 1.45; }
.direccion-c .about-text > p + p { color: var(--ink-soft); }
.direccion-c .about-figure { margin: clamp(40px, 6vw, 88px) 0 0; }
.direccion-c .about-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 768px) {
	.direccion-c .about-figure img { aspect-ratio: 21 / 9; }
}
@media (min-width: 900px) {
	.direccion-c .about-grid {
		grid-template-columns: 5fr 7fr;
		column-gap: clamp(48px, 7vw, 120px);
	}
	.direccion-c .about-grid .section-head { margin-bottom: 0; }
	.direccion-c .about-text { padding-top: 6px; }
}

/* --------------------------------------------------------- barcos de ocasión */

.direccion-c .section--used { background: var(--mist); }
/* Sin «quiénes somos» de por medio, dos bloques gris niebla se tocarían sin costura. */
.direccion-c .section--models + .section--used { border-top: 1px solid var(--line); }

.direccion-c .grid--boats {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}
@media (min-width: 768px) {
	.direccion-c .grid--boats-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ficha con datos: foto, título, línea año · horas · motor entre filetes y precio abajo. */
.direccion-c .boat-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
}
.direccion-c .boat-card__link { display: flex; flex-direction: column; }
.direccion-c .boat-card__media {
	border-radius: 0;
	background: var(--mist);
	aspect-ratio: 3 / 2;
}
.direccion-c .boat-card__media img { transition: transform 0.5s var(--ease); }
.direccion-c .boat-card:hover .boat-card__media img { transform: scale(1.03); }
.direccion-c .boat-card__title {
	margin: 0;
	padding: 24px 24px 0;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	transition: color 0.2s;
}
.direccion-c .boat-card:hover .boat-card__title { color: var(--red); }
/* Cada dato con su etiqueta, en tabla, como en la maqueta: en estrecho dos columnas con el
   motor a lo ancho, y en una sola fila cuando hay sitio. */
.direccion-c .boat-card__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 24px 24px 0;
}
.direccion-c .boat-card__detail {
	padding: 12px 0;
	border-top: 1px solid var(--line);
}
.direccion-c .boat-card__detail--engine { grid-column: 1 / -1; }
/* Sin horas, el año se quedaría solo con medio filete: que ocupe la fila. */
.direccion-c .boat-card__details:not(:has(.boat-card__detail--hours)) .boat-card__detail--year { grid-column: 1 / -1; }
.direccion-c .boat-card__details dt {
	display: block;
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .boat-card__details dd {
	display: block;
	margin: 4px 0 0;
	font-size: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 1080px) {
	.direccion-c .grid--boats-pair .boat-card__details { grid-template-columns: 1fr 1fr 2fr; }
	.direccion-c .grid--boats-pair .boat-card__detail--engine { grid-column: auto; }
}
.direccion-c .boat-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: auto 24px 0;
	padding: 20px 0 24px;
	border-top: 1px solid var(--ink);
	font: 600 clamp(1.75rem, 1.5rem + 1vw, 2.25rem)/1 var(--font-display);
	font-variant-numeric: tabular-nums;
}
/* La nota de IVA va debajo del precio y en pequeño, como en la maqueta: si se queda en la misma
   línea y con la tipografía del precio, se lee «135.000 €IVA incluido». */
.direccion-c .boat-card__tax {
	margin-top: 6px;
	font: 400 0.875rem/1.3 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
}

.direccion-c .badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 2px;
	background: var(--paper);
	color: var(--ink);
	font: 600 0.75rem/1 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.direccion-c .badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amber);
}
.direccion-c .badge--available { background: var(--paper); color: var(--ink); }
.direccion-c .badge--available::before { background: var(--green); }
.direccion-c .badge--sold { background: var(--navy-900); color: #fff; }
.direccion-c .badge--sold::before { background: var(--red); }
.direccion-c .boat-card__media .badge { left: 16px; top: 16px; }

/* Vendidos: se apaga la foto, no el texto (el contraste debe seguir siendo legible). */
.direccion-c .section--sold .boat-card { opacity: 1; }
.direccion-c .section--sold .boat-card__media img { filter: grayscale(0.6); }

/* ------------------------------------------------------- repuestos y garantía */

/* Foto a la izquierda y texto a la derecha, como en la maqueta. Sin foto, una sola columna. */
.direccion-c .parts-grid { display: grid; gap: 40px; align-items: center; }
.direccion-c .parts-figure { margin: 0; }
.direccion-c .parts-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 48% 50%;
}
.direccion-c .parts-text .lead { margin: 24px 0 0; }
.direccion-c .parts-text > p:last-child { margin: 28px 0 0; }

@media (min-width: 900px) {
	.direccion-c .parts-grid--figure {
		grid-template-columns: 7fr 5fr;
		column-gap: clamp(48px, 6vw, 104px);
	}
	.direccion-c .parts-figure img { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------------------------ contacto */

.direccion-c .section--contact {
	position: relative;
	overflow: hidden;
	background: var(--navy-900);
	color: #fff;
}
.direccion-c .section--contact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(33%, 320px);
	height: 4px;
	background: var(--red);
}
.direccion-c .section--contact .eyebrow { color: var(--on-dark-soft); }
.direccion-c .contact-strip { display: grid; gap: 40px; }
.direccion-c .contact-strip .section-head { margin-bottom: 0; }
.direccion-c .section--contact .contact-strip h2 { font-size: clamp(2.75rem, 1.8rem + 4.4vw, 6rem); }
/* La invitación bajo el titular, con medida corta como en la maqueta. */
.direccion-c .contact-strip .lead { margin: 18px 0 0; max-width: 26ch; color: var(--on-dark-soft); }
.direccion-c .contact-strip__body > p:last-child { margin: 28px 0 0; }

@media (min-width: 900px) {
	/* El borde de las mayúsculas del titular se alinea con el filete de los datos;
	   la etiqueta queda por encima (línea de 13px × 1.2 y 14px de separación). */
	.direccion-c .contact-strip {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: clamp(48px, 6vw, 104px);
	}
	.direccion-c .contact-strip .section-head { margin-top: calc(-0.975rem - 14px); }
	.direccion-c .contact-strip h2 { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
}

/* Datos de contacto: filas con filete, número en condensada. */
.direccion-c .contact-details__phones {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
/* Como en la maqueta: etiqueta encima del número en estrecho, y en columna fija a partir de
   420, para que los números empiecen a la misma altura aunque «Teléfono» y «Móvil» midan
   distinto. El número va siempre a la segunda columna, así que una fila sin etiqueta sigue
   alineada con las demás. */
.direccion-c .contact-details__phones li {
	display: grid;
	gap: 2px;
	border-bottom: 1px solid var(--line);
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
/* Los dos puntos los pone la hoja base; aquí la etiqueta es una columna con su propio filete,
   así que el signo sobra. */
.direccion-c .contact-details__label::after { content: none; }
@media (min-width: 420px) {
	.direccion-c .contact-details__phones li {
		grid-template-columns: 6.5rem 1fr;
		align-items: center;
		gap: 0 16px;
	}
	.direccion-c .contact-details__phones li > a { grid-column: 2; }
}
.direccion-c .contact-details__phones a {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	font: 600 clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)/1.15 var(--font-display);
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.direccion-c .contact-details__phones a:hover { text-decoration: underline 2px var(--red); text-underline-offset: 6px; }
.direccion-c .contact-details > p { margin: 14px 0 0; }
/* Correo y «cómo llegar» también son objetivos táctiles de pleno derecho. */
.direccion-c .contact-details p a { display: inline-flex; align-items: center; min-height: 44px; }
.direccion-c .contact-details address { margin: 14px 0 0; font-style: normal; }
.direccion-c .contact-details__hours { color: var(--ink-soft); }

.direccion-c .section--contact .contact-details__phones li,
.direccion-c .site-footer .contact-details__phones li { color: var(--on-dark-soft); }
.direccion-c .section--contact .contact-details__phones a,
.direccion-c .site-footer .contact-details__phones a { color: #fff; }
.direccion-c .section--contact .contact-details__hours,
.direccion-c .site-footer .contact-details__hours { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------- pie */
.direccion-c .site-footer {
	margin-top: 0;
	padding-top: 24px;
	border-top: 0;
	background: var(--navy-950);
	color: var(--on-dark-soft);
	font-size: 0.9375rem;
}
.direccion-c .site-footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.direccion-c .site-footer .brand { margin: 0; }
.direccion-c .site-footer .site-logo { min-height: 44px; padding: 0; }
.direccion-c .site-footer .site-logo__image { width: 160px; }
.direccion-c .site-footer__nav { flex: 1 1 500px; }
.direccion-c .site-footer ul { margin: 0; padding: 0; list-style: none; }
.direccion-c .site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
.direccion-c .site-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	color: #fff;
	font: 600 0.8125rem/1.4 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.direccion-c .site-footer__nav a:hover,
.direccion-c .legal-links a:hover { text-decoration: underline 2px var(--red); text-underline-offset: 6px; }
.direccion-c .site-footer__legal { margin-top: 16px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.direccion-c .site-footer .legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.direccion-c .legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--on-dark-soft); font-size: 13px; text-decoration: none; }
.direccion-c .site-footer .copyright { margin: 0; max-width: 100%; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.direccion-c .site-footer .footer-phone { color: #fff; }
@media (max-width: 1100px) { .direccion-c .site-footer__nav ul { justify-content: flex-start; } }
@media (max-width: 700px) {
	.direccion-c .site-footer__nav { flex-basis: 100%; }
	.direccion-c .site-footer .copyright { flex-basis: 100%; }
}
@media (max-width: 480px) {
	.direccion-c .site-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}

/* ------------------------------------------- cabeceras de páginas interiores */

/* .page y .boat dejan de limitar el ancho para que su cabecera pueda ir a sangre. */
.direccion-c .page,
.direccion-c .boat {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.direccion-c .page > *,
.direccion-c .boat > * {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.direccion-c .page > .page-head,
.direccion-c .boat > .boat__head { max-width: none; padding-inline: 0; }

.direccion-c .page-head,
.direccion-c .boat__head {
	max-width: none;
	margin: 0;
	padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4.5vw, 64px);
	background: var(--navy-900);
	color: #fff;
}
.direccion-c .page-head > *,
.direccion-c .boat__head > * {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.direccion-c .page-head h1,
.direccion-c .boat__head h1 { position: relative; }
.direccion-c .page-head h1::before,
.direccion-c .boat__head h1::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 20px;
	background: var(--red);
}
.direccion-c .page-head p,
.direccion-c .boat__head p { margin: 20px auto 0; color: var(--on-dark-soft); }
/* La entradilla se lee mejor con medida corta, pero alineada con el titular, no centrada. */
.direccion-c .page-head > p {
	max-width: calc(64ch + 2 * var(--gutter));
	margin-left: var(--edge-box);
	margin-right: auto;
}

.direccion-c .boat__crumb {
	margin: -10px auto 6px;
	font: 600 0.8125rem/1 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.direccion-c .boat__crumb a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--on-dark-soft);
	text-decoration: none;
}
.direccion-c .boat__crumb a:hover { color: #fff; text-decoration: underline 2px var(--red); text-underline-offset: 6px; }
/* La chapa de estado es un elemento en línea, no un bloque envuelto: ni ancho de página ni
   el relleno lateral del envoltorio. Sobre el marino va siempre en blanco (la variante
   «vendido» es marina y ahí desaparecería); el punto de color ya distingue el estado. */
.direccion-c .boat__head > .badge {
	max-width: none;
	margin: 20px 0 0 calc(var(--edge-box) + var(--gutter));
	padding: 8px 12px;
	background: var(--paper);
	color: var(--ink);
}

.direccion-c .boat__price {
	margin-top: 24px;
	font-size: inherit;
	color: #fff;
}
.direccion-c .boat__price strong {
	display: inline-block;
	font: 600 clamp(2.25rem, 1.8rem + 2vw, 3.5rem)/1 var(--font-display);
	font-variant-numeric: tabular-nums;
}
.direccion-c .boat__price del {
	display: inline-block;
	margin-right: 12px;
	font: 500 1.125rem/1 var(--font-body);
	color: var(--on-dark-soft);
}
.direccion-c .boat__tax {
	display: inline-block;
	margin-left: 12px;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: var(--on-dark-soft);
}

/* ------------------------------------------------------------------- modelo */

.direccion-c .model__hero {
	position: relative;
	display: grid;
	background: var(--navy-950);
	color: #fff;
}
.direccion-c .model__hero > img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	min-height: min(58svh, 620px);
	object-fit: cover;
}
.direccion-c .model__hero::after {
	content: "";
	grid-area: 1 / 1;
	background:
		linear-gradient(0deg, rgba(6, 17, 28, 0.92) 0%, rgba(6, 17, 28, 0.8) 42%, rgba(6, 17, 28, 0.4) 70%, rgba(6, 17, 28, 0) 92%),
		linear-gradient(90deg, rgba(6, 17, 28, 0.5) 0%, rgba(6, 17, 28, 0) 62%);
	pointer-events: none;
}
.direccion-c .model__intro {
	grid-area: 1 / 1;
	align-self: end;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 72px var(--gutter) clamp(32px, 4vw, 56px);
}
.direccion-c .model__line {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
}
.direccion-c .model__line::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--red);
}
.direccion-c .model__hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 6rem); }
.direccion-c .model__tagline {
	margin: 18px 0 0;
	max-width: 38ch;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 500;
	line-height: 1.4;
}
.direccion-c .model__actions {
	display: flex;
	flex-wrap: wrap;
	margin: 28px 0 -12px;
}
.direccion-c .model__lead {
	max-width: 42ch;
	font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
	font-weight: 500;
	line-height: 1.45;
}
/* Cuerpo de la ficha: el texto mide 68ch y en pantallas anchas dejaba vacía la mitad derecha; ahí va el barco
   de perfil sobre el blanco de la página, centrado con el texto (como nautique.com y sus concesionarios).
   Los destacados siguen debajo a todo el ancho; en estrecho todo va en columna. */
.direccion-c .model__body--figure {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 24px;
	align-items: center;
}
@media (min-width: 1080px) {
	.direccion-c .model__body--figure { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); }
	.direccion-c .model__body--figure .model__highlights { grid-column: 1 / -1; }
}
.direccion-c .model__figure { margin: 0; }
.direccion-c .model__figure img { display: block; width: 100%; height: auto; }
.direccion-c .model__body p { margin: 0 0 18px; max-width: 68ch; }
.direccion-c .model__text > p { color: var(--ink-soft); }
.direccion-c .model__text > p:last-child { margin-bottom: 0; }
.direccion-c .model__highlights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	column-gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.direccion-c .model__highlights li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font: 600 0.875rem/1.35 var(--font-body);
	letter-spacing: 0.06em;
}
.direccion-c .model__highlights li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--red);
}

/* ---------------------------------------------------------- fichas técnicas */

.direccion-c .specs {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 0 32px;
	margin: 0;
}
.direccion-c .specs div { border-top: 1px solid var(--line); padding: 14px 0; }
.direccion-c .specs dt {
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .specs dd {
	margin: 6px 0 0;
	font: 600 1.25rem/1.2 var(--font-display);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.direccion-c .boat > .specs { padding-top: clamp(32px, 4vw, 48px); }

.direccion-c .engines { margin-top: 32px; font-variant-numeric: tabular-nums; }
.direccion-c .engines caption {
	margin-bottom: 12px;
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-soft);
}
.direccion-c .engines th,
.direccion-c .engines td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.direccion-c .engines thead th {
	border-bottom: 2px solid var(--ink);
	font: 600 0.75rem/1.2 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .engines tbody th {
	font: 600 1.125rem/1.2 var(--font-display);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ galería */

.direccion-c .gallery { margin-top: 8px; }
.direccion-c .gallery__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.direccion-c .gallery__thumbs { gap: 8px; margin: 8px 0 0; }
.direccion-c .gallery__thumbs button {
	display: block;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	cursor: pointer;
}
.direccion-c .gallery__thumbs img { width: 104px; height: 74px; }

/* --------------------------------------------------------- barco de ocasión */

.direccion-c .boat__description { padding-top: clamp(32px, 4vw, 48px); }
.direccion-c .boat__description p { margin: 0 0 18px; max-width: 68ch; color: var(--ink-soft); }
.direccion-c .boat__description h2 { margin: 32px 0 16px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.direccion-c .boat__description ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	column-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.direccion-c .boat__description li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9375rem;
}
.direccion-c .boat__description li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--red);
}
.direccion-c .boat__actions {
	display: flex;
	flex-wrap: wrap;
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* ---------------------------------------------------------- página contacto */

.direccion-c .contact-layout {
	gap: clamp(40px, 5vw, 72px);
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(48px, 6vw, 80px);
}
.direccion-c .contact-layout h2 { margin: 0 0 20px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }

.direccion-c .contact-form p { margin: 0 0 20px; }
.direccion-c .contact-form > p > label {
	display: block;
	font: 600 0.75rem/1.4 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.direccion-c .contact-form br { display: none; }
.direccion-c .contact-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.direccion-c .contact-form input[type="text"],
.direccion-c .contact-form input[type="email"],
.direccion-c .contact-form input[type="tel"],
.direccion-c .contact-form input[type="url"],
.direccion-c .contact-form input[type="number"],
.direccion-c .contact-form select,
.direccion-c .contact-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--inactive);
	border-radius: 2px;
	background: var(--paper);
	font: 400 1rem/1.5 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}
.direccion-c .contact-form textarea { min-height: 180px; resize: vertical; }
.direccion-c .contact-form input:focus,
.direccion-c .contact-form select:focus,
.direccion-c .contact-form textarea:focus { border-color: var(--ink); }
.direccion-c .contact-form .wpcf7-acceptance { display: block; }
.direccion-c .contact-form .wpcf7-list-item { margin: 0; }
.direccion-c .contact-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	font: 400 0.9375rem/1.5 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}
.direccion-c .contact-form input[type="checkbox"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	accent-color: var(--red);
}
.direccion-c .contact-form .wpcf7-submit {
	min-height: 52px;
	padding: 14px 32px;
	border: 2px solid var(--red);
	border-radius: 2px;
	background: var(--red);
	color: #fff;
	font: 600 0.875rem/1.1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}
.direccion-c .contact-form .wpcf7-submit:hover { background: var(--red-dark); border-color: var(--red-dark); }
.direccion-c .wpcf7-not-valid-tip {
	margin-top: 8px;
	font: 600 0.875rem/1.4 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--red-dark);
}
.direccion-c .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 16px;
	border: 2px solid var(--ink);
	border-radius: 2px;
	font-size: 0.9375rem;
}
.direccion-c .wpcf7-form.invalid .wpcf7-response-output,
.direccion-c .wpcf7-form.failed .wpcf7-response-output { border-color: var(--red-dark); }

/* ------------------------------------------------------------ textos legales */

.direccion-c .prose { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
.direccion-c .prose > * { max-width: 68ch; }
.direccion-c .prose p { margin: 0 0 18px; }
.direccion-c .prose h2 { margin: 40px 0 16px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.direccion-c .prose h3 { margin: 32px 0 12px; font-size: 1.25rem; }
.direccion-c .prose ul,
.direccion-c .prose ol { margin: 0 0 18px; padding-left: 20px; }
.direccion-c .prose li { margin-bottom: 8px; }
.direccion-c .prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.direccion-c .prose a:hover { color: var(--red-dark); }

/* ------------------------------------------------------------- repuestos y 404 */

.direccion-c .page--parts > img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	margin-top: clamp(32px, 4vw, 48px);
}
.direccion-c .page--parts .section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }
.direccion-c .page--parts .section h2 { margin-bottom: 20px; }
.direccion-c .page--parts .section p { max-width: 68ch; color: var(--ink-soft); }
/* El texto de garantía (29/10) trae lista y subtítulo: misma medida y tono que los párrafos. */
.direccion-c .page--parts .section ul,
.direccion-c .page--parts .section ol { max-width: 68ch; margin: 0 0 18px; padding-left: 20px; color: var(--ink-soft); }
.direccion-c .page--parts .section li { margin-bottom: 8px; }
.direccion-c .page--parts .section h3 { margin: 32px 0 12px; font-size: 1.25rem; }
.direccion-c .page--404 > p { color: var(--ink-soft); }
.direccion-c .page--parts > p:last-child,
.direccion-c .page--404 > p:last-child { padding-top: clamp(32px, 4vw, 40px); padding-bottom: clamp(48px, 6vw, 80px); }
/* Medida corta pero pegada al margen: el párrafo es hijo directo de .page y «auto» lo centraría. */
.direccion-c .page--404 > p:first-of-type {
	max-width: calc(64ch + 2 * var(--gutter));
	margin-left: var(--edge-box);
	margin-right: auto;
	padding-top: clamp(32px, 4vw, 48px);
}

/* ---------------------------------------------------------------- WhatsApp */

.direccion-c .whatsapp-link {
	min-height: 52px;
	gap: 10px;
	font: 600 0.8125rem/1.2 var(--font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green);
	text-decoration: none;
}
.direccion-c .whatsapp-link:hover { text-decoration: underline 2px currentColor; text-underline-offset: 6px; }
.direccion-c .section--contact .whatsapp-link,
.direccion-c .site-footer .whatsapp-link { color: #fff; }

.direccion-c .whatsapp-link.button {
	border-color: var(--green);
	background: var(--green);
	color: #fff;
}
.direccion-c .whatsapp-link.button:hover {
	background: var(--green-dark);
	border-color: var(--green-dark);
	color: #fff;
	text-decoration: none;
}

.direccion-c .whatsapp-link--float {
	padding: 0 18px;
	border-radius: 2px;
	background: var(--green);
	color: #fff;
	box-shadow: 0 8px 24px -8px rgba(6, 17, 28, 0.6);
}
.direccion-c .whatsapp-link--float:hover { background: var(--green-dark); text-decoration: none; }

/* -------------------------------------------------------------- movimiento */

@media (prefers-reduced-motion: reduce) {
	html[data-direccion="c"] { scroll-behavior: auto; }
	.direccion-c *,
	.direccion-c *::before,
	.direccion-c *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}