/* =========================================================================
   El Dane Neumáticos — hoja de estilos del rediseño
   =========================================================================
   Paleta y tipografía salen del manual de marca (negro #000000, rojo #F7130D,
   Montserrat). Lo que el manual no define se deriva del rubro, no de un
   template: el fondo claro es gris cemento —el piso de una gomería bajo luz
   fluorescente— y no el crema tibio de catálogo.

   Los contrastes están calculados componiendo la transparencia real del fondo.
   Cada valor de texto anota su ratio contra el fondo sobre el que se usa.
   Mínimo AA para texto normal: 4.5:1. Para texto grande (>=24px, o >=18.66px
   en negrita): 3:1.
   ========================================================================= */

:root {

	/* ── Marca, del manual ───────────────────────────────────────────── */
	--eld-negro:        #000000;
	--eld-rojo:         #F7130D;  /* Solo superficies grandes: 4.16:1 */

	/* ── Derivados ───────────────────────────────────────────────────── */
	--eld-caucho:       #121215;  /* Negro de caucho, no negro puro */
	--eld-caucho-alto:  #1C1D22;
	--eld-rojo-accion:  #D42425;  /* Botón con texto blanco: 5.15:1 */
	--eld-rojo-hover:   #B81E1F;  /* 6.47:1 */
	--eld-rojo-claro:   #FF6B66;  /* Texto sobre caucho: 6.72:1 */

	/* ── Neutros ─────────────────────────────────────────────────────── */
	--eld-cemento:      #EEEFF1;
	--eld-blanco:       #FFFFFF;
	--eld-borde:        #D8DAE0;
	--eld-texto:        #17181C;
	--eld-texto-2:      #4A4D57;  /* 7.33:1 sobre cemento */
	--eld-texto-3:      #5F6470;  /* 5.15:1 sobre cemento */
	--eld-sobre-oscuro: #9BA0AC;  /* 7.14:1 sobre caucho */
	--eld-stock:        #2E7D32;

	/* ── Tipografía ──────────────────────────────────────────────────── */
	--eld-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--eld-datos:   'Barlow Condensed', 'Segoe UI', sans-serif;

	/* ── Ritmo ───────────────────────────────────────────────────────── */
	--eld-radio: 6px;
	--eld-transicion: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* =========================================================================
   1. Utilidades
   ========================================================================= */

.eld-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   2. Hero — la banda de caucho con el buscador
   =========================================================================
   Es lo primero de la portada y lo único que la mayoría necesita. La diagonal
   roja cita las líneas de velocidad del isotipo; es el único gesto decorativo
   de la página y por eso puede ser grande.
   ========================================================================= */

.eld-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, #0B0B0C 0%, var(--eld-caucho-alto) 58%, #2A0507 100%);
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	padding: clamp(2.25rem, 6vw, 4.5rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
}

/* La diagonal roja: cita las líneas de velocidad del isotipo. */
.eld-hero::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -8%;
	width: 46%;
	height: 170%;
	background: linear-gradient(180deg, rgba(247, 19, 13, .85), rgba(247, 19, 13, 0));
	transform: skewX(-18deg);
	opacity: .45;
	pointer-events: none;
}

/*
 * Velo oscuro sobre la diagonal. Sin esto, la volanta en #FF6B66 cae a 3.65:1
 * donde el rojo le pasa por detrás. Con el velo, el texto siempre se apoya
 * sobre caucho y la diagonal sigue viéndose a la derecha, que es donde no hay
 * texto. ::after va después de ::before, así que pinta encima.
 */
.eld-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--eld-caucho) 0%,
		rgba(18, 18, 21, .95) 55%,
		rgba(18, 18, 21, .62) 78%,
		rgba(18, 18, 21, .45) 100%);
	pointer-events: none;
}

.eld-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 60rem;
	margin: 0 auto;
}

.eld-hero__volanta {
	margin: 0 0 .5rem;
	font-family: var(--eld-display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eld-rojo-claro);
}

.eld-hero__titulo {
	margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
	font-family: var(--eld-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(1.875rem, 6vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--eld-blanco);
}

/* ── Solapas de vehículo ──────────────────────────────────────────────
   Son radios nativos: accesibles por teclado sin una línea de JavaScript.
   Se seleccionan por posición y no por id, así el buscador puede aparecer
   dos veces en la misma página sin que choquen los identificadores. */

.eld-veh {
	margin: 0;
	padding: 0;
	border: 0;
}

.eld-veh__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.eld-veh__solapas {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: 1rem;
}

.eld-veh__solapa {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-family: var(--eld-display);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--eld-blanco);
	cursor: pointer;
	transition: background-color var(--eld-transicion), border-color var(--eld-transicion);
}

.eld-veh__solapa:hover {
	background: rgba(255, 255, 255, .1);
}

.eld-veh__radio:nth-of-type(1):checked ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(1),
.eld-veh__radio:nth-of-type(2):checked ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(2),
.eld-veh__radio:nth-of-type(3):checked ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(3) {
	background: var(--eld-blanco);
	border-color: var(--eld-blanco);
	color: var(--eld-caucho);
}

/* El foco tiene que verse aunque el radio esté oculto. */
.eld-veh__radio:nth-of-type(1):focus-visible ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(1),
.eld-veh__radio:nth-of-type(2):focus-visible ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(2),
.eld-veh__radio:nth-of-type(3):focus-visible ~ .eld-veh__solapas .eld-veh__solapa:nth-of-type(3) {
	outline: 3px solid var(--eld-rojo-claro);
	outline-offset: 2px;
}

.eld-veh__panel {
	display: none;
	margin: 0;
}

.eld-veh__radio:nth-of-type(1):checked ~ .eld-veh__paneles .eld-veh__panel:nth-of-type(1),
.eld-veh__radio:nth-of-type(2):checked ~ .eld-veh__paneles .eld-veh__panel:nth-of-type(2),
.eld-veh__radio:nth-of-type(3):checked ~ .eld-veh__paneles .eld-veh__panel:nth-of-type(3) {
	display: block;
}

/* ── La medida ────────────────────────────────────────────────────────
   La firma de la página. La barra y la R no son adorno: son la notación
   real del flanco de la cubierta, puestas como separadores entre los
   campos. Quien leyó alguna vez su cubierta no necesita que le expliquen
   qué es "perfil". */

.eld-medida {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: .5rem;
}

.eld-medida__campo {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.eld-medida__select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 6rem;
	height: 3.5rem;
	padding: 0 1.75rem 0 .75rem;
	border: 2px solid transparent;
	border-radius: var(--eld-radio);
	background-color: var(--eld-blanco);
	/* Chevron trazado, no relleno: un path abierto con fill se cierra solo y
	   queda un triángulo macizo. Va con stroke y fill:none. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 2 L6 6.2 L10.5 2' fill='none' stroke='%235F6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .625rem center;
	background-size: 12px 8px;
	font-family: var(--eld-datos);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--eld-texto);
	cursor: pointer;
	transition: border-color var(--eld-transicion), box-shadow var(--eld-transicion);
}

.eld-medida__select:hover {
	border-color: var(--eld-rojo-claro);
}

.eld-medida__select:focus-visible {
	outline: none;
	border-color: var(--eld-rojo);
	box-shadow: 0 0 0 3px rgba(247, 19, 13, .35);
}

.eld-medida__rotulo {
	font-family: var(--eld-display);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--eld-sobre-oscuro);
}

.eld-medida__sep {
	font-family: var(--eld-datos);
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 3.5rem;   /* Alinea con el alto del select. */
	color: var(--eld-blanco);
	user-select: none;
}

.eld-medida__enviar {
	height: 3.5rem;
	margin-left: .5rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--eld-radio);
	background: var(--eld-rojo-accion);
	font-family: var(--eld-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--eld-blanco);
	cursor: pointer;
	transition: background-color var(--eld-transicion);
}

.eld-medida__enviar:hover,
.eld-medida__enviar:focus-visible {
	background: var(--eld-rojo-hover);
}

.eld-medida__enviar:focus-visible {
	outline: 3px solid var(--eld-blanco);
	outline-offset: 2px;
}

/* ── Ayuda ────────────────────────────────────────────────────────────
   <details> nativo: se abre sin JavaScript y ya viene accesible. */

.eld-ayuda {
	margin-top: 1.25rem;
	font-family: var(--eld-display);
	font-size: .8125rem;
	color: var(--eld-sobre-oscuro);
}

.eld-ayuda__titulo {
	display: inline-block;
	padding: .25rem 0;
	font-weight: 600;
	color: var(--eld-blanco);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eld-ayuda__titulo:focus-visible {
	outline: 3px solid var(--eld-rojo-claro);
	outline-offset: 2px;
}

.eld-ayuda__texto {
	max-width: 42rem;
	margin: .5rem 0 0;
	line-height: 1.6;
}

.eld-ayuda__ejemplo {
	font-family: var(--eld-datos);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--eld-blanco);
	white-space: nowrap;
}

@media (max-width: 30rem) {

	.eld-medida__select {
		min-width: 4.25rem;
		height: 3rem;
		font-size: 1.5rem;
	}

	.eld-medida__sep {
		font-size: 1.5rem;
		line-height: 3rem;
	}

	.eld-medida__enviar {
		width: 100%;
		margin-left: 0;
	}
}

/* =========================================================================
   3. Tarjeta de producto
   =========================================================================
   La medida es el titular; la marca y el modelo bajan. Es el orden en que
   la gente busca, y es al revés de como estaba.
   ========================================================================= */

.woocommerce ul.products li.product {
	background: var(--eld-blanco);
	border: 1px solid var(--eld-borde);
	border-radius: var(--eld-radio);
	overflow: hidden;
	transition: transform var(--eld-transicion), box-shadow var(--eld-transicion);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(23, 24, 28, .1);
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	padding: .875rem 1rem 1.125rem;
}

/* Marca — la escribe Astra en .ast-woo-product-category */
.woocommerce ul.products li.product .ast-woo-product-category {
	display: block;
	margin-bottom: .125rem;
	font-family: var(--eld-display);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eld-texto-3);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 0 0 .375rem;
	padding: 0;
	line-height: 1.05;
}

.eld-tarjeta__medida {
	font-family: var(--eld-datos);
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -.005em;
	font-variant-numeric: tabular-nums;
	color: var(--eld-texto);
}

.eld-tarjeta__indice {
	padding: .125rem .375rem;
	border: 1px solid var(--eld-borde);
	border-radius: 3px;
	font-family: var(--eld-datos);
	font-size: .875rem;
	font-weight: 600;
	color: var(--eld-texto-2);
}

.eld-tarjeta__modelo {
	flex-basis: 100%;
	font-family: var(--eld-display);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--eld-texto-3);
}

/* Precio — cifras tabulares para que la columna se escanee derecho. */
.woocommerce ul.products li.product .price {
	display: block;
	margin: .25rem 0 0;
	font-family: var(--eld-datos);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--eld-texto);
}

.woocommerce ul.products li.product .price del {
	font-size: .875rem;
	color: var(--eld-texto-3);
}

.eld-tarjeta__cuotas {
	display: block;
	margin: .125rem 0 .75rem;
	font-family: var(--eld-display);
	font-size: .6875rem;
	font-weight: 500;
	color: var(--eld-texto-3);
}

.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	border-radius: var(--eld-radio);
	font-family: var(--eld-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-align: center;
	transition: background-color var(--eld-transicion);
}

/* =========================================================================
   4. Cabecera del catálogo
   ========================================================================= */

.eld-archivo__titulo {
	margin: 0 0 .25rem;
	font-family: var(--eld-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--eld-texto);
}

.eld-archivo__bajada {
	margin: 0 0 1.5rem;
	font-family: var(--eld-display);
	font-size: .875rem;
	color: var(--eld-texto-2);
}

.eld-archivo__bajada b {
	font-family: var(--eld-datos);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--eld-texto);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-family: var(--eld-display);
	font-size: .8125rem;
	color: var(--eld-texto-2);
}

/* =========================================================================
   5. Accesibilidad y movimiento
   ========================================================================= */

/* Foco visible en todo lo interactivo, no solo en lo que diseñamos acá. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--eld-rojo-accion);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}