/* AN Precios – estilos de la web (v1.3). Tipografía: hereda del tema; titulares con --anp-display. */
.anp {
	--anp-rojo: #dd3333;
	--anp-rojo-osc: #b71f1f;
	--anp-amarillo: #f2c400;
	--anp-oscuro: #17181b;
	--anp-goma: #26272b;
	--anp-linea: #e6e3de;
	--anp-claro: #f4f4f2;
	--anp-texto: #2b2c30;
	--anp-suave: #6d6f75;
	--anp-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--anp-cols: 4;
	--anp-radio: 10px;
	font-family: inherit;
	line-height: 1.35;
	color: var(--anp-texto);
}
.anp *, .anp *::before, .anp *::after { box-sizing: border-box; }
.anp :where(p, h3, ul, li) { margin: 0; padding: 0; }
.anp :where(ul) { list-style: none; }
.anp img { max-width: 100%; height: auto; }
.anp-vacio { padding: 12px; border: 1px dashed #c00; color: #c00; background: #fff; }
.anp-precio-inline { white-space: nowrap; }

/* Textura de dibujo de neumático para fondos oscuros */
.anp-oferta__media,
.anp-medida__media {
	background-color: var(--anp-oscuro);
	background-image:
		radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 60%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 6px, transparent 6px 22px);
}

/* Giro del neumático al pasar el ratón */
.anp-oferta__neumatico,
.anp-tarjeta__neumatico,
.anp-medida__neumatico {
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}
.anp-oferta:hover .anp-oferta__neumatico,
.anp-tarjeta:hover .anp-tarjeta__neumatico,
.anp-medida:hover .anp-medida__neumatico { transform: rotate(-38deg) scale(1.04); }

/* ================= SUPER OFERTA ================= */
.anp-ofertas {
	display: grid;
	grid-template-columns: repeat(var(--anp-cols), minmax(0, 1fr));
	gap: 24px;
}
.anp-oferta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--anp-radio);
	overflow: hidden;
	box-shadow: 0 1px 0 var(--anp-linea), 0 14px 30px -18px rgba(23, 24, 27, .45);
	transition: transform .35s ease, box-shadow .35s ease;
}
.anp-oferta:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--anp-linea), 0 26px 40px -20px rgba(23, 24, 27, .55); }
.anp-oferta__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 5 / 4;
	padding: 34px 18px 18px;
}
.anp .anp-oferta__head {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 5px 10px 4px;
	background: var(--anp-amarillo);
	color: var(--anp-oscuro);
	font-family: var(--anp-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	border-radius: 3px;
}
.anp-oferta__neumatico { width: 70%; max-width: 220px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.anp-oferta__etiqueta { width: 26%; max-width: 80px; object-fit: contain; border-radius: 3px; }
.anp-oferta__body { display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 18px 20px 20px; }
.anp .anp-oferta__medida { font-family: var(--anp-display); font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; line-height: 1.05; color: var(--anp-oscuro); letter-spacing: .01em; margin: 0; }
.anp-oferta__marca { color: var(--anp-suave); font-size: 14px; font-weight: 600; }
.anp-oferta__precio {
	margin-top: 8px !important;
	font-family: var(--anp-display);
	font-size: clamp(48px, 4.6vw, 64px);
	font-weight: 800;
	line-height: .9;
	color: var(--anp-rojo);
}
.anp-oferta__precio--agotado { font-size: 26px; }
.anp-oferta__incluye { font-size: 12px; color: var(--anp-suave); }
.anp-oferta__link {
	margin-top: auto;
	padding-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--anp-oscuro) !important;
	text-decoration: underline;
	text-decoration-color: var(--anp-rojo);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.anp-oferta__link:hover { color: var(--anp-rojo) !important; }
.anp-oferta__link::after { content: ""; position: absolute; inset: 0; }
.anp-oferta__link:focus-visible { outline: 3px solid var(--anp-amarillo); outline-offset: 2px; }

/* ================= TARJETAS DE MARCA ================= */
.anp-tarjetas {
	display: grid;
	grid-template-columns: repeat(var(--anp-cols), minmax(0, 1fr));
	gap: 20px;
}
.anp-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--anp-radio);
	overflow: hidden;
	box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .6);
	transition: transform .35s ease, box-shadow .35s ease;
}
.anp-tarjeta:hover { transform: translateY(-6px); box-shadow: 0 24px 36px -20px rgba(0, 0, 0, .7); }
.anp-tarjeta__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px;
	background: var(--anp-et-bg, var(--anp-rojo));
	color: var(--anp-et-c, #fff);
}
.anp .anp-tarjeta__etiqueta { font-family: var(--anp-display); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.anp-tarjeta__tienda { width: auto; max-height: 24px; background: #fff; border-radius: 3px; padding: 1px 4px; }
.anp-tarjeta__info { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 0; }
.anp-tarjeta__logo { width: auto; max-height: 24px; max-width: 70%; object-fit: contain; object-position: left; }
.anp-tarjeta__nombre { font-family: var(--anp-display); font-size: 20px; font-weight: 800; font-style: italic; color: var(--anp-oscuro); line-height: 1; }
.anp .anp-tarjeta__medida { font-family: var(--anp-display); font-size: 22px; font-weight: 600; color: var(--anp-texto); line-height: 1; margin: 0; }
.anp-tarjeta__img { display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 14px 0; min-height: 150px; }
.anp-tarjeta__neumatico { width: 64%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
.anp-tarjeta__eu { width: 28%; object-fit: contain; align-self: flex-start; }
.anp-tarjeta__precio {
	position: absolute;
	right: 12px;
	bottom: 34px;
	display: flex;
	align-items: baseline;
	padding: 8px 14px 6px;
	border-radius: 999px;
	background: var(--anp-pc, var(--anp-rojo));
	color: #fff;
	font-family: var(--anp-display);
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6);
}
.anp-tarjeta__precio span { font-size: 40px; }
.anp-tarjeta__precio sup { font-size: 18px; top: -0.9em; }
.anp-tarjeta__precio small { font-size: 20px; margin-left: 2px; }
.anp-tarjeta__incluye { font-size: 11px; color: var(--anp-suave); padding: 44px 14px 12px; margin-top: auto !important; }

/* Carrusel */
.anp-carrusel { position: relative; }
.anp-tarjetas--carrusel {
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - (var(--anp-cols) - 1) * 20px) / var(--anp-cols));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 8px 2px 28px;
	margin: -8px -2px 0;
}
.anp-tarjetas--carrusel::-webkit-scrollbar { display: none; }
.anp-tarjetas--carrusel > * { scroll-snap-align: start; }
.anp-tarjetas--carrusel:focus-visible { outline: 3px solid var(--anp-amarillo); outline-offset: 4px; }
.anp-carrusel__nav { display: flex; justify-content: flex-end; gap: 10px; }
.anp-carrusel__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.anp-carrusel__btn:hover { background: var(--anp-rojo); border-color: var(--anp-rojo); color: #fff; }
.anp-carrusel__btn:focus-visible { outline: 3px solid var(--anp-amarillo); outline-offset: 2px; }

/* ================= SELECTOR DE LLANTA (portada) ================= */
.anp-rims ul { display: flex; flex-wrap: wrap; gap: 10px; }
.anp-rims__chip {
	display: flex;
	flex-direction: column;
	min-width: 112px;
	padding: 12px 16px 11px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--anp-radio);
	background: rgba(23, 24, 27, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.anp-rims__chip:hover { transform: translateY(-4px); background: var(--anp-rojo); border-color: var(--anp-rojo); }
.anp-rims__chip:focus-visible { outline: 3px solid var(--anp-amarillo); outline-offset: 2px; }
.anp-rims__r { font-family: var(--anp-display); font-size: 34px; font-weight: 800; line-height: 1; }
.anp-rims__p { font-size: 15px; font-weight: 600; color: var(--anp-amarillo); white-space: nowrap; transition: color .25s ease; }
.anp-rims__p small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.anp-rims__chip:hover .anp-rims__p { color: #fff; }

/* ================= TABLAS POR MEDIDA ================= */
.anp-nota { text-align: center; font-size: 14px; line-height: 1.6; padding: 12px 10px; color: var(--anp-suave); }
.anp-llantas__bar { display: flex; justify-content: center; margin-bottom: 26px; }
.anp-llantas__tabs {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 5px;
	border-radius: 999px;
	background: var(--anp-oscuro);
}
.anp-llantas__tab {
	appearance: none;
	margin: 0;
	padding: 10px 20px 9px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-family: var(--anp-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	transition: background .2s ease, color .2s ease;
}
.anp-llantas__tab:hover { background: rgba(255, 255, 255, .12); }
.anp-llantas__tab[aria-selected="true"] { background: var(--anp-rojo); color: #fff; }
.anp-llantas__tab:focus-visible { outline: 3px solid var(--anp-amarillo); outline-offset: 2px; }
.anp-llantas__panel:not([hidden]) { animation: anp-in .45s ease both; }
@keyframes anp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.anp-medidas {
	display: grid;
	grid-template-columns: repeat(var(--anp-cols, 3), minmax(0, 1fr));
	gap: 22px;
}
.anp-medida {
	display: flex;
	flex-direction: column;
	border-radius: var(--anp-radio);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--anp-linea), 0 14px 30px -20px rgba(23, 24, 27, .5);
	scroll-margin-top: 140px;
	transition: box-shadow .35s ease;
}
.anp-medida:hover { box-shadow: 0 1px 0 var(--anp-linea), 0 24px 40px -22px rgba(23, 24, 27, .6); }
.anp-medida:target { box-shadow: 0 0 0 3px var(--anp-rojo); }
.anp-medida__media { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.anp .anp-medida__titulo {
	order: 2;
	flex: 1;
	margin: 0;
	color: #fff;
	font-family: var(--anp-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
}
.anp-medida__img { order: 1; flex: 0 0 auto; display: flex; }
.anp-medida__neumatico { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.anp-medida__tabla { width: 100%; margin: 0 !important; border-collapse: collapse; border: 0; font-size: 15px; background: #fff; }
.anp-medida__tabla thead { display: none; }
.anp-medida__tabla td { padding: 11px 18px; border: 0; border-top: 1px solid var(--anp-linea); text-align: left; vertical-align: middle; background: transparent; }
.anp-medida__tabla td:first-child { color: var(--anp-texto); font-weight: 600; }
.anp-medida__tabla td:last-child { text-align: right; white-space: nowrap; font-family: var(--anp-display); font-size: 22px; font-weight: 700; color: var(--anp-oscuro); }
.anp-medida__tabla tbody tr:first-child td:last-child { color: var(--anp-rojo); }
.anp-medida__tabla tbody tr { transition: background .2s ease; }
.anp-medida__tabla tbody tr:hover { background: var(--anp-claro); }
.anp-extra { display: block; font-family: inherit; color: var(--anp-suave); font-size: 12px; font-weight: 500; }
.anp-agotado { color: var(--anp-rojo); font-weight: 700; font-size: 13px; font-family: inherit; }

/* ================= FURGONETA (lista) ================= */
.anp-furgo { border-radius: var(--anp-radio); overflow: hidden; background: #fff; box-shadow: 0 1px 0 var(--anp-linea), 0 14px 30px -20px rgba(23, 24, 27, .5); }
.anp .anp-furgo__head {
	margin: 0;
	padding: 18px 22px;
	background: var(--anp-oscuro);
	color: var(--anp-amarillo);
	font-family: var(--anp-display);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1;
}
.anp-furgo__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding: 10px 22px 16px !important; list-style: none !important; }
.anp-furgo__lista li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 !important;
	padding: 9px 0;
	border-bottom: 1px dashed var(--anp-linea);
	list-style: none;
}
.anp-furgo__lista li::before { display: none; }
.anp-furgo__medida { flex: 1; font-weight: 600; }
.anp-furgo__precio { font-family: var(--anp-display); font-size: 24px; font-weight: 800; color: var(--anp-rojo); }

.anp-actualizado { font-size: .9em; color: var(--anp-suave); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
	.anp-ofertas { grid-template-columns: repeat(min(var(--anp-cols), 2), minmax(0, 1fr)); }
	.anp-tarjetas { grid-template-columns: repeat(min(var(--anp-cols), 3), minmax(0, 1fr)); }
	.anp-tarjetas--carrusel { grid-auto-columns: calc((100% - 40px) / 3); }
	.anp-medidas { grid-template-columns: repeat(min(var(--anp-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.anp-ofertas, .anp-medidas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.anp-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.anp-tarjetas--carrusel { grid-auto-columns: 78%; }
	.anp-tarjeta__precio span { font-size: 32px; }
	.anp-furgo__lista { grid-template-columns: minmax(0, 1fr); }
	.anp-rims ul { gap: 8px; }
	.anp-rims__chip { min-width: calc(33.33% - 6px); padding: 10px 12px; }
	.anp-rims__r { font-size: 28px; }
	.anp-llantas__tab { padding: 9px 13px 8px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.anp-oferta, .anp-tarjeta, .anp-rims__chip,
	.anp-oferta__neumatico, .anp-tarjeta__neumatico, .anp-medida__neumatico { transition: none; }
	.anp-oferta:hover, .anp-tarjeta:hover, .anp-rims__chip:hover,
	.anp-oferta:hover .anp-oferta__neumatico, .anp-tarjeta:hover .anp-tarjeta__neumatico, .anp-medida:hover .anp-medida__neumatico { transform: none; }
	.anp-llantas__panel:not([hidden]) { animation: none; }
}

/* ------------------------------------------------------------------
 * Etiqueta europea en texto (v1.3)
 * ---------------------------------------------------------------- */
.anp-eu--a { --eu: #00843d; } .anp-eu--b { --eu: #4caf3c; } .anp-eu--c { --eu: #b9d532; --eu-t: #17181b; }
.anp-eu--d { --eu: #ffe200; --eu-t: #17181b; } .anp-eu--e { --eu: #f8b62b; --eu-t: #17181b; }
.anp-eu--f { --eu: #ee7d22; } .anp-eu--g { --eu: #e3262b; }
.anp-eu {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	display: grid;
	gap: 3px;
	min-width: 66px;
	padding: 6px 7px 5px;
	background: #fff;
	color: #17181b;
	border-radius: 6px;
	border-top: 4px solid #0b3a86;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
	font-family: var(--anp-display);
	line-height: 1;
	transition: transform .35s ease;
}
.anp-oferta:hover .anp-eu, .anp-tarjeta:hover .anp-eu { transform: translateY(-3px); }
.anp-eu__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.anp-eu .anp-eu__ico { width: 14px; height: 14px; }
.anp-eu__ico { flex: 0 0 auto; color: #0b3a86; }
.anp .anp-eu__l {
	display: inline-block;
	min-width: 24px;
	padding: 2px 8px 1px 5px;
	background: var(--eu, #999);
	color: var(--eu-t, #fff);
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.anp .anp-eu__db { font-size: 15px; font-weight: 800; }
.anp .anp-eu__db small { font-size: 11px; font-weight: 700; margin-left: 1px; }
.anp-eu__flag { justify-self: end; font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #fff; background: #0b3a86; padding: 2px 4px 1px; border-radius: 2px; }
.anp-tarjeta__img { position: relative; }
.anp-tarjeta__img .anp-eu { top: 8px; right: 12px; bottom: auto; }

/* Versión compacta en las tablas por medida */
.anp-eu-mini { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; font-family: var(--anp-display); font-weight: 700; font-size: 12px; line-height: 1; }
.anp-eu-mini__l, .anp-eu-mini__db { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px 1px 3px; border-radius: 3px; }
.anp-eu-mini__l { background: var(--eu, #999); color: var(--eu-t, #fff); }
.anp-eu-mini__db { background: var(--anp-claro, #f4f4f2); color: #17181b; }
.anp-eu-mini .anp-eu__ico { width: 12px; height: 12px; color: inherit; }
@media (prefers-reduced-motion: reduce) { .anp-eu { transition: none; } .anp-oferta:hover .anp-eu, .anp-tarjeta:hover .anp-eu { transform: none; } }
