/* ==========================================================================
   Base: tokens, tipografía, layout, cabecera, pie y botones.
   Tema claro. La cabecera y el pie son las únicas piezas oscuras.
   El acento se inyecta desde inc/datos.php como --acento.
   ========================================================================== */

:root {
	/* Superficies claras */
	--fondo: #ffffff;
	--fondo-2: #f8f9fa;
	--superficie: #ffffff;
	--superficie-2: #f4f6f8;
	--borde: #e5e7eb;
	--borde-suave: #eef1f4;

	/* Texto */
	--texto: #0b1221;
	--texto-2: #5b6472;
	--texto-3: #9099a6;

	/* Tinta: cabecera, pie y botones oscuros */
	--tinta: #0a0a0a;
	--tinta-2: #171717;

	/* Marca */
	--acento: #e10a17;
	--acento-oscuro: #b3000f;
	/* Plata cromada del escudo N&C (reemplaza al ámbar de la demo). */
	--plata: #c9ced6;
	--plata-clara: #f3f4f6;
	--plata-oscura: #8b929c;
	--cromo: linear-gradient(180deg, #fbfbfc 0%, #d9dde2 45%, #aeb4bd 55%, #e6e8eb 100%);
	--verde: #25d366;
	--verde-oscuro: #20bd5a;
	--azul: #1d4ed8;
	--exito: #16a34a;
	--sobre-acento: #ffffff;

	--radio: 16px;
	--radio-sm: 10px;
	--ancho: 1320px;
	--sombra: 0 10px 30px -18px rgba(11, 18, 33, 0.35);
	--sombra-alta: 0 22px 48px -26px rgba(11, 18, 33, 0.45);
	--fuente: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fuente-cifra: var(--fuente);
}

/* --- Reset suave sobre Astra ---------------------------------------------- */

html { scroll-behavior: smooth; }

body,
body.wp-singular,
body.woocommerce,
body.woocommerce-page {
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--fuente);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body #page,
body .site-content,
body .ast-container {
	background: transparent;
	max-width: none;
	padding: 0;
	margin: 0;
	display: block;
}

body #content,
body #primary,
body .site-main,
body .entry-content {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

/* Astra imprime su propia cabecera y pie: usamos los nuestros. */
body .site-header,
body .site-footer,
body .ast-small-footer,
body .ast-above-header,
body .ast-below-header,
body .entry-header,
body .ast-single-post-order,
body .woocommerce-breadcrumb,
body .woocommerce-products-header {
	display: none !important;
}

h1, h2, h3, h4 {
	color: var(--texto);
	line-height: 1.14;
	letter-spacing: -0.022em;
	margin: 0 0 0.5em;
	font-weight: 600;
}

h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); }

p { margin: 0 0 1em; color: var(--texto-2); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

.auto-contenedor {
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
}

.auto-seccion { padding: clamp(3rem, 6vw, 4.5rem) 0; }

.auto-seccion--gris { background: var(--fondo-2); }

.auto-seccion__titulo { text-align: center; margin-bottom: 2.5rem; }
.auto-seccion__titulo h2 { font-weight: 400; }
.auto-seccion__titulo h2 strong { font-weight: 700; color: var(--texto); }
.auto-seccion__titulo p {
	max-width: 56ch;
	margin-inline: auto;
	font-size: 1.05rem;
	color: var(--texto-3);
}

.auto-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--texto-3);
	margin-bottom: 0.7rem;
}
.auto-etiqueta svg { width: 1.05em; height: 1.05em; fill: var(--texto-3); }

/* --- Botones -------------------------------------------------------------- */

.auto-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.6rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.97rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.auto-btn:hover { transform: translateY(-2px); }
.auto-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.auto-btn--acento { background: var(--acento); color: #fff; }
.auto-btn--acento:hover { background: var(--acento-oscuro); }

.auto-btn--plata { background: var(--cromo); color: #0a0a0a; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.18); }
.auto-btn--plata:hover { background: var(--acento); color: #fff; }

.auto-btn--tinta { background: var(--tinta); color: #fff; }
.auto-btn--tinta:hover { background: #262626; }

.auto-btn--wa { background: var(--verde); color: #04230f; font-weight: 700; }
.auto-btn--wa:hover { background: var(--verde-oscuro); color: #fff; }

.auto-btn--linea {
	border-color: var(--borde);
	color: var(--texto);
	background: #fff;
}
.auto-btn--linea:hover { border-color: var(--texto); }

.auto-btn--bloque { width: 100%; }

.auto-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* --- Barra de anuncios ---------------------------------------------------- */

.auto-avisos {
	background: var(--tinta);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.auto-avisos__lista {
	display: flex;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.auto-avisos__lista li { flex: 1; max-width: 340px; }
.auto-avisos a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	transition: background 0.15s ease;
}
.auto-avisos a:hover { background: rgba(255, 255, 255, 0.07); }
.auto-avisos__rojo { color: var(--acento) !important; }
.auto-avisos__verde { color: #34d399 !important; }
.auto-avisos li + li { border-left: 1px solid rgba(255, 255, 255, 0.12); }

/* Número oficial: siempre visible y destacado, también en móvil. */
.auto-avisos__fono a {
	background: var(--acento);
	font-size: 0.86rem;
	letter-spacing: 0.06em;
}
.auto-avisos__fono a:hover { background: var(--acento-oscuro); }
.auto-avisos__fono svg { width: 1.15em; height: 1.15em; fill: #fff; flex: none; }

/* --- Cabecera ------------------------------------------------------------- */

.auto-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--tinta);
}

/* Filete rojo como la línea bajo «AUTOMOTORA» en el escudo. */
.auto-header::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--acento) 20%, var(--acento) 80%, transparent);
}

.auto-header__barra {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 92px;
}

.auto-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.42rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -0.03em;
	flex: none;
	color: #fff;
}
.auto-logo img { max-height: 46px; width: auto; }
.auto-logo .auto-logo__escudo { height: 72px; max-height: none; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.auto-logo .auto-logo__letras { height: 46px; max-height: none; width: auto; }
.auto-footer .auto-logo__escudo { height: 96px; }
.auto-footer .auto-logo__letras { height: 58px; }
.auto-footer__lema { margin: -0.2rem 0 0.9rem; font-size: 0.72rem !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--plata) !important; }
.auto-logo__marca { color: #fff; }
.auto-logo__punto { color: var(--acento); font-style: normal; }

.auto-nav { margin-left: auto; }
.auto-nav ul {
	display: flex;
	align-items: center;
	gap: 1.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.auto-nav a {
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
	transition: color 0.15s ease;
}
.auto-nav a:hover,
.auto-nav .current-menu-item > a { color: #fff; }

.auto-header__acciones { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.auto-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	border: 1.5px solid var(--acento);
	border-radius: 999px;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: #fff;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.auto-header__tel:hover { background: var(--acento); }
.auto-header__tel:hover svg { fill: #fff; }
.auto-header__tel svg { width: 1.05em; height: 1.05em; fill: var(--acento); }

.auto-menu-btn {
	display: none;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	border-radius: 12px;
	padding: 0.62rem 0.72rem;
	cursor: pointer;
}
.auto-menu-btn span {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	margin: 4px 0;
	border-radius: 2px;
}

/* --- Pie ------------------------------------------------------------------ */

.auto-footer {
	background: var(--tinta);
	color: rgba(255, 255, 255, 0.72);
	padding: 3.5rem 0 0;
	margin-top: 0;
}

.auto-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
	gap: 2.5rem;
	padding-bottom: 2.8rem;
}

.auto-footer .auto-logo { margin-bottom: 1rem; }
.auto-footer p { color: rgba(255, 255, 255, 0.62); font-size: 0.92rem; }

.auto-footer h4 {
	font-size: 0.78rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.1rem;
	font-weight: 700;
}

.auto-footer ul { list-style: none; margin: 0; padding: 0; }
.auto-footer li { margin-bottom: 0.65rem; font-size: 0.92rem; }
.auto-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.15s ease;
}
.auto-footer__links a::before {
	content: "→";
	color: var(--acento);
	font-size: 0.85em;
}
.auto-footer__links a:hover { color: #fff; }

.auto-footer__dato {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-bottom: 0.9rem;
	font-size: 0.92rem;
}
.auto-footer__dato span {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
}
.auto-footer__dato svg { width: 15px; height: 15px; fill: #fff; }
.auto-footer__dato a:hover { color: #fff; }

.auto-footer__botones { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.auto-footer__botones .auto-btn { padding: 0.75rem 1.3rem; font-size: 0.9rem; }

.auto-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1.3rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	justify-content: space-between;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.5);
}

.auto-footer__legal .auto-credito { color: #fff; font-weight: 600; }
.auto-footer__legal .auto-credito:hover { color: #fff; text-decoration: underline; }

.auto-redes { display: flex; gap: 0.55rem; margin-top: 1.2rem; }
.auto-redes a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	transition: background 0.15s ease;
}
.auto-redes svg { width: 17px; height: 17px; fill: #fff; }
.auto-redes a:hover { background: var(--acento); }

/* --- Botón flotante de WhatsApp ------------------------------------------- */

.auto-wa-flotante {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 75;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--verde);
	box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.75);
	transition: transform 0.15s ease;
}
.auto-wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
.auto-wa-flotante:hover { transform: scale(1.06); }
.auto-wa-flotante__num { display: none; }

/* En pantallas anchas la burbuja muestra el número oficial. */
@media (min-width: 900px) {
	.auto-wa-flotante {
		width: auto;
		display: flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0 1.25rem 0 0.95rem;
		border-radius: 999px;
		color: #fff;
		font-weight: 800;
		font-size: 1.02rem;
		white-space: nowrap;
	}
	.auto-wa-flotante__num { display: inline; }
	.auto-wa-flotante:hover { transform: scale(1.03); }
}

/* --- Piezas compartidas --------------------------------------------------- */

.auto-precio {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--texto);
	font-variant-numeric: tabular-nums;
}
.auto-precio--consultar {
	color: var(--acento);
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0;
}

.auto-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--superficie-2);
	color: var(--texto-2);
}
.auto-badge--plata { background: var(--cromo); color: #0a0a0a; }
.auto-badge--azul { background: var(--azul); color: #fff; }
.auto-badge--vendido { background: var(--acento); color: #fff; }

.auto-aviso {
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	color: var(--texto);
	border-radius: var(--radio);
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
}
.auto-aviso--error { border-color: #fecaca; background: #fef2f2; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1200px) {
	.auto-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
	.auto-menu-btn { display: block; order: 3; }
	.auto-header__tel span { display: none; }

	.auto-nav {
		order: 4;
		width: 100%;
		margin-left: 0;
		display: none;
		padding-bottom: 1rem;
	}
	.auto-nav.auto-nav--abierto { display: block; }
	.auto-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.auto-nav li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.auto-nav a { display: block; padding: 0.9rem 0.2rem; }

	.auto-header__barra { flex-wrap: wrap; gap: 0.8rem; min-height: 68px; }
}

@media (max-width: 640px) {
	.auto-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
	.auto-contenedor { width: min(100% - 1.8rem, var(--ancho)); }
	.auto-avisos a { font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.55rem 0.5rem; }
	.auto-avisos__lista li:nth-child(2) { display: none; }
	.auto-avisos__fono a { font-size: 0.8rem; letter-spacing: 0.03em; }

	/* Logo, CTA y hamburguesa en una sola fila: si el teléfono se queda,
	   la barra se parte en dos. El botón ya abre WhatsApp. */
	.auto-logo { font-size: 1.12rem; }
	.auto-logo { gap: 0.4rem; }
	.auto-header .auto-logo__escudo { height: 54px; }
	.auto-header .auto-logo__letras { height: 30px; }
	.auto-header__acciones { margin-left: auto; gap: 0.5rem; }
	.auto-header__tel { display: none; }
	.auto-header__cta { padding: 0.62rem 0.95rem; font-size: 0.85rem; }
	.auto-menu-btn { padding: 0.55rem 0.62rem; }
}