/* =========================================================
   Elite Coches Theme - main.css
   Variables, reset ligero, layout y componentes.
   ========================================================= */

:root {
	--color-bg: #0e1013;
	--color-bg-alt: #15181d;
	--color-surface: #1b1f26;
	--color-text: #f3f4f6;
	--color-text-muted: #9aa0ab;
	--color-primary: #c9a24d; /* dorado, tono "alta gama" */
	--color-primary-dark: #a9843a;
	--color-secondary: #ffffff;
	--color-success: #2fbf71;
	--color-danger: #e5484d;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 2px 10px rgba(0,0,0,.25);
	--shadow-md: 0 8px 30px rgba(0,0,0,.35);
	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Segoe UI', sans-serif;
	--container-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 .5em; }
.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 820px; }
.screen-reader-text { position: absolute; left: -9999px; }
.skip-link:focus { left: 10px; top: 10px; position: fixed; background: var(--color-primary); color: #000; padding: 8px 16px; z-index: 9999; }

/* ---------- Botones ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: .95rem;
	transition: transform .15s ease, background .2s ease;
	border: 2px solid transparent;
	cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-primary); color: #14161a; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: #14161a; }
.btn-whatsapp { background: #25D366; color: #08210f; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(14,16,19,.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 20px;
}
.site-branding img { max-height: 46px; }
.main-navigation { flex: 1; }
.nav-menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { font-weight: 500; opacity: .9; }
.nav-menu a:hover { opacity: 1; color: var(--color-primary); }
.header-search { position: relative; width: 240px; }
.elite-coches-search-input {
	width: 100%;
	padding: 9px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,.15);
	background: var(--color-surface);
	color: var(--color-text);
}
.search-autocomplete-results {
	position: absolute;
	top: 110%;
	left: 0;
	right: 0;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	z-index: 50;
}
.search-autocomplete-results a { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.search-autocomplete-results img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.header-cta { display: flex; gap: 10px; }
.mobile-menu-toggle { display: none; background: none; border: none; }
.mobile-menu { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.hero__image { position: absolute; inset: 0; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.hero__content { position: relative; max-width: 720px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--color-primary); font-weight: 600; }
.hero__title { font-size: clamp(2rem, 5vw, 3.4rem); }
.hero__text { color: var(--color-text-muted); font-size: 1.1rem; max-width: 560px; }
.hero__actions { display: flex; gap: 14px; margin: 24px 0; flex-wrap: wrap; }
.hero__badges { display: flex; gap: 20px; list-style: none; padding: 0; flex-wrap: wrap; color: var(--color-text-muted); font-size: .9rem; }

/* ---------- Secciones genéricas ---------- */
section { padding: 70px 0; }
.section-eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--color-primary); font-weight: 600; margin-bottom: 8px; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.section-subtitle { color: var(--color-text-muted); max-width: 640px; }

.propuesta-venta__grid, .sobre-nosotros .propuesta-venta__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.propuesta-venta__image img, .sobre-nosotros__image img { border-radius: var(--radius-lg); }

/* ---------- Servicios ---------- */
.servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.servicio-card { background: var(--color-surface); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); }
.servicio-card__icon { display: inline-block; width: 40px; height: 40px; margin-bottom: 14px; background: var(--color-primary); border-radius: 50%; }

/* ---------- Grid de vehículos / tarjetas ---------- */
.vehiculos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0; }
.vehiculo-card { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.vehiculo-card:hover { transform: translateY(-4px); }
.vehiculo-card__image { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.vehiculo-card__image img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.badge-vendido { background: var(--color-danger); color: #fff; }
.vehiculo-card__body { padding: 18px; }
.vehiculo-card__specs { display: flex; gap: 12px; list-style: none; padding: 0; margin: 8px 0; color: var(--color-text-muted); font-size: .85rem; flex-wrap: wrap; }
.vehiculo-card__price { font-weight: 700; font-size: 1.2rem; color: var(--color-primary); }
.is-vendido { opacity: .6; }

/* ---------- Testimonios ---------- */
.testimonios-slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0; }
.testimonio-card { background: var(--color-surface); border-radius: var(--radius-md); padding: 24px; }
.testimonio-card__texto { font-style: italic; color: var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq-accordion { max-width: 780px; margin-top: 30px; }
.faq-item { background: var(--color-surface); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 4px 20px; }
.faq-item__question { cursor: pointer; padding: 16px 0; font-weight: 600; }
.faq-item__answer { padding-bottom: 16px; color: var(--color-text-muted); }

/* ---------- Stock / filtros ---------- */
.stock-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.stock-filters { background: var(--color-surface); border-radius: var(--radius-md); padding: 22px; position: sticky; top: 90px; }
.filter-group { margin-bottom: 16px; }
.filter-group label { display: block; font-size: .85rem; margin-bottom: 6px; color: var(--color-text-muted); }
.filter-group select, .filter-group input { width: 100%; padding: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.15); background: var(--color-bg-alt); color: var(--color-text); }
.filter-group--range { display: flex; gap: 8px; }
.stock-results__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ---------- Single vehículo ---------- */
.vehiculo-single__layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin: 30px 0; }
.gallery-main img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); }
.vehiculo-single__price { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.vehiculo-single__cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.vehiculo-specs-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.vehiculo-specs-table th, .vehiculo-specs-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.vehiculo-specs-table th { color: var(--color-text-muted); width: 40%; font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg-alt); padding: 60px 0 20px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 30px; }
.footer-menu, .legal-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 20px; font-size: .85rem; color: var(--color-text-muted); }
.whatsapp-float {
	position: fixed;
	bottom: 22px;
	right: 22px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: var(--shadow-md);
	z-index: 90;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 20px 0; color: var(--color-text-muted); font-size: .85rem; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.propuesta-venta__grid, .vehiculo-single__layout { grid-template-columns: 1fr; }
	.stock-layout { grid-template-columns: 1fr; }
	/* El panel de filtros deja de ser "sticky" al pasar a una sola columna:
	   en ese modo, quedarse fijo arriba tapa las tarjetas de vehículos al
	   hacer scroll. En una sola columna basta con que se desplace con el
	   resto de la página, como cualquier bloque normal. */
	.stock-filters { position: static; top: auto; }
	.servicios-grid, .vehiculos-grid, .testimonios-slider { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.main-navigation, .header-search, .header-cta { display: none; }
	.mobile-menu-toggle { display: block; }
	.servicios-grid, .vehiculos-grid, .testimonios-slider { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero { min-height: 520px; }
}

@media (min-width: 1920px) {
	:root { --container-width: 1440px; }
}

/* ---------- Imagen principal de la ficha (proporción fija 16:9) ---------- */
.vehiculo-single__gallery .gallery-main {
	width: 100%;
	aspect-ratio: 1672 / 941;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.vehiculo-single__gallery .gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Galería (debajo de la imagen principal, 3 por fila) ---------- */
.gallery-below-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
	width: 100%;
}
.gallery-full-item {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--color-surface);
}
.gallery-full-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.gallery-full-item:hover img { transform: scale(1.06); }

@media (max-width: 480px) { .gallery-below-main { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Lightbox (foto ampliada y centrada) ----------
   Se mueve al final de <body> por JavaScript, así que estas reglas
   posicionan siempre respecto a la ventana completa, sin que ningún
   contenedor de la página (con overflow o transform) pueda recortarlo. */
.elite-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(8, 9, 11, .94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 40px;
}
.elite-lightbox.is-active { display: flex; }
.elite-lightbox__image {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}
.elite-lightbox__close,
.elite-lightbox__prev,
.elite-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	border: none;
	color: #fff;
	cursor: pointer;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 1.7rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.elite-lightbox__close:hover,
.elite-lightbox__prev:hover,
.elite-lightbox__next:hover { background: var(--color-primary); color: #14161a; }
.elite-lightbox__close { top: 24px; right: 24px; }
.elite-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.elite-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
	.elite-lightbox__prev, .elite-lightbox__next { width: 38px; height: 38px; font-size: 1.4rem; }
	.elite-lightbox { padding: 16px; }
}

/* ---------- Menú móvil: icono "hamburguesa" y panel desplegable ----------
   Pega este bloque al FINAL de assets/css/main.css (no sustituye nada,
   solo añade las reglas que faltaban). */

.mobile-menu-toggle {
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

/* Las 3 rayas del icono, hechas con un span + box-shadow (sin imágenes). */
.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.hamburger { position: relative; }
.hamburger::before,
.hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* Cuando el menú está abierto, el icono se transforma en una "X". */
.mobile-menu-toggle.is-active .hamburger { background: transparent; }
.mobile-menu-toggle.is-active .hamburger::before { top: 0; transform: rotate(45deg); }
.mobile-menu-toggle.is-active .hamburger::after { top: 0; transform: rotate(-45deg); }

/* Panel desplegable del menú móvil. */
.mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-bg-alt);
	border-top: 1px solid rgba(255, 255, 255, .08);
	box-shadow: var(--shadow-md);
	z-index: 150;
	max-height: calc(100vh - 70px);
	overflow-y: auto;
}
.mobile-nav-menu {
	list-style: none;
	margin: 0;
	padding: 12px 20px 28px;
	display: flex;
	flex-direction: column;
}
.mobile-nav-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.mobile-nav-menu a {
	display: block;
	padding: 14px 4px;
	font-weight: 500;
	font-size: 1.05rem;
}
.mobile-nav-menu a:hover,
.mobile-nav-menu a:active { color: var(--color-primary); }

/* El botón solo se muestra en móvil (ya tenías esta regla, se deja igual). */
@media (max-width: 768px) {
	.mobile-menu-toggle { display: flex; }
	.site-header { position: sticky; } /* asegura que el panel se posicione respecto a la cabecera */
}

/* ---------- Buscador: óvalo único con campo + botón de lupa dentro ----------
   Sustituye a los bloques sueltos de "Botón de lupa" y "Buscador visible
   en móvil" que se pegaron en mensajes anteriores. */

.header-search__form {
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--color-surface);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 20px;
	padding: 0 4px 0 14px;
	box-sizing: border-box;
}
.header-search__form .elite-coches-search-input {
	flex: 1;
	min-width: 0;
	width: auto;
	padding: 9px 4px;
	border: none;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}
.header-search__form .elite-coches-search-input:focus {
	outline: none;
}
.header-search__submit {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--color-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: color .15s ease, background .15s ease;
}
.header-search__submit svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}
.header-search__submit:hover,
.header-search__submit:focus-visible {
	color: #14161a;
	background: var(--color-primary);
}

/* El buscador se mantiene visible también en móvil, junto al botón de menú. */
@media (max-width: 768px) {
	.header-search {
		display: block;
		flex: 1;
		width: auto;
		min-width: 0;
		margin: 0 10px;
	}
	.header-search .search-autocomplete-results {
		left: 0;
		right: 0;
	}
	.site-header__inner {
		gap: 10px;
	}
}
@media (max-width: 480px) {
	.header-search__form { padding: 0 2px 0 12px; }
	.header-search__form .elite-coches-search-input { font-size: .85rem; }
}

/* ---------- Aviso "Resultados de búsqueda para..." en /stock/ ---------- */
.stock-busqueda-activa {
	color: var(--color-text-muted);
	margin: -10px 0 20px;
}
.stock-busqueda-activa strong { color: var(--color-text); }
.stock-busqueda-activa a { color: var(--color-primary); text-decoration: underline; margin-left: 6px; }

/* ---------- Icono de WhatsApp (botón flotante + botones "btn-whatsapp") ---------- */
.whatsapp-float {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
.whatsapp-float .icon-whatsapp {
	width: 30px;
	height: 30px;
}
.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.btn-whatsapp .icon-whatsapp {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}