/**
 * ProductosGamer Ofertas — estilos de tarjetas.
 * Marca: fondo oscuro #0d0e12, acento rojo #ff3b47, acento cian #22d3ee.
 * Tipografías: Barlow Condensed (títulos), Public Sans (texto).
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Public+Sans:wght@400;600&display=swap');

.pg-card,
.pg-grid,
.pg-disclosure {
	--pg-bg: #0d0e12;
	--pg-bg-2: #15171d;
	--pg-red: #ff3b47;
	--pg-cyan: #22d3ee;
	--pg-text: #e9eaee;
	--pg-muted: #9aa0ac;
	--pg-line: #262a33;
	--pg-radius: 14px;
	--pg-font-title: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
	--pg-font-body: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
}

.pg-card *,
.pg-grid * {
	box-sizing: border-box;
}

/* ---------- Tarjeta base ---------- */
.pg-card {
	background: var(--pg-bg);
	color: var(--pg-text);
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius);
	overflow: hidden;
	font-family: var(--pg-font-body);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	display: flex;
	flex-direction: column;
}

.pg-card:hover {
	transform: translateY(-3px);
	border-color: var(--pg-red);
	box-shadow: 0 16px 36px rgba(255, 59, 71, 0.18);
}

/* ---------- Media ---------- */
.pg-card__media {
	position: relative;
	background: #fff; /* las fotos de producto suelen venir sobre blanco */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	height: 200px; /* altura uniforme: evita recuadros enormes */
}

.pg-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Layout horizontal: el media manda su propia altura. */
.pg-card--horizontal .pg-card__media {
	height: auto;
	min-height: 160px;
}

/* ---------- Cuerpo ---------- */
.pg-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.pg-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pg-card__title {
	font-family: var(--pg-font-title);
	font-weight: 700;
	font-size: 1.18rem;
	line-height: 1.15;
	letter-spacing: 0.2px;
	margin: 2px 0 0;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pg-card__title a {
	color: var(--pg-text);
	text-decoration: none;
}

.pg-card__title a:hover {
	color: var(--pg-cyan);
}

/* ---------- Rating ---------- */
.pg-card__rating {
	color: #ffc83d;
	font-size: 0.95rem;
	letter-spacing: 1px;
}

.pg-card__rating-num,
.pg-card__rating-count {
	color: var(--pg-muted);
	font-size: 0.82rem;
	letter-spacing: 0;
	margin-left: 4px;
}

/* ---------- Precios ---------- */
.pg-card__pricing {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.pg-card__price {
	font-family: var(--pg-font-title);
	font-weight: 700;
	font-size: 1.55rem;
	color: #fff;
}

.pg-card__price--out {
	font-size: 1.05rem;
	color: var(--pg-muted);
}

.pg-card__old {
	font-size: 0.85rem;
	color: var(--pg-muted);
}

.pg-card__old s {
	color: var(--pg-muted);
}

/* ---------- Botón CTA ---------- */
.pg-card__cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	margin-top: 8px;
	padding: 13px 18px;
	background: linear-gradient(135deg, #ff5660 0%, var(--pg-red) 55%, #e22531 100%);
	color: #fff !important;
	font-family: var(--pg-font-title);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(255, 59, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, filter 0.18s ease;
	will-change: transform;
}

/* Flecha que avanza al pasar el cursor (sin tocar el HTML). */
.pg-card__cta::after {
	content: "→";
	font-size: 1.05em;
	line-height: 1;
	transform: translateX(-2px);
	transition: transform 0.18s ease;
}

/* Destello diagonal que cruza el botón al hacer hover. */
.pg-card__cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	pointer-events: none;
}

.pg-card__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(255, 59, 71, 0.5),
		0 0 0 1px rgba(34, 211, 238, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	filter: brightness(1.05) saturate(1.05);
}

.pg-card__cta:hover::after {
	transform: translateX(3px);
}

.pg-card__cta:hover::before {
	left: 130%;
}

.pg-card__cta:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(255, 59, 71, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pg-card__cta:focus-visible {
	outline: 2px solid var(--pg-cyan);
	outline-offset: 2px;
}

/* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.pg-card__cta,
	.pg-card__cta::after,
	.pg-card__cta::before {
		transition: none;
	}
	.pg-card__cta::before {
		display: none;
	}
}

/* ---------- Aviso "Precio a fecha de…" ---------- */
.pg-card__asof {
	margin: 4px 0 0;
	font-size: 0.72rem;
	color: var(--pg-muted);
}

/* ---------- Insignias ---------- */
.pg-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--pg-font-title);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.4;
}

.pg-badge--discount {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--pg-red);
	color: #fff;
	box-shadow: 0 4px 10px rgba(255, 59, 71, 0.4);
}

.pg-badge--store {
	background: transparent;
	color: var(--pg-store-color, var(--pg-cyan));
	border: 1px solid var(--pg-store-color, var(--pg-cyan));
}

.pg-badge--prime,
.pg-badge--free_shipping {
	background: rgba(34, 211, 238, 0.12);
	color: var(--pg-cyan);
	border: 1px solid rgba(34, 211, 238, 0.4);
}

/* ---------- Layout horizontal (para insertar en medio del texto) ---------- */
.pg-card--horizontal {
	flex-direction: row;
	max-width: 640px;
}

.pg-card--horizontal .pg-card__media {
	flex: 0 0 40%;
	max-width: 220px;
}

.pg-card--horizontal .pg-card__body {
	flex: 1;
}

@media (max-width: 480px) {
	.pg-card--horizontal {
		flex-direction: column;
	}
	.pg-card--horizontal .pg-card__media {
		max-width: none;
		flex-basis: auto;
	}
}

/* ---------- Cuadrícula ---------- */
.pg-grid {
	display: grid;
	gap: 18px;
	margin: 18px 0;
}

.pg-grid--cols-1 { grid-template-columns: 1fr; }
.pg-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablet: bajar a 2 columnas. */
@media (max-width: 900px) {
	.pg-grid--cols-3,
	.pg-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Móvil: 1 columna. */
@media (max-width: 600px) {
	.pg-grid--cols-2,
	.pg-grid--cols-3,
	.pg-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Disclosure ---------- */
.pg-disclosure {
	margin: 10px 0 0;
	font-family: var(--pg-font-body);
	font-size: 0.78rem;
	color: var(--pg-muted);
	font-style: italic;
}

/* Tarjeta vertical SUELTA (fuera de cuadrícula): ancho contenido para que no
   ocupe toda la columna del artículo ni quede desproporcionada. */
.pg-card--vertical {
	max-width: 340px;
	margin: 22px auto;
}

/* Dentro de una cuadrícula, la tarjeta llena su columna. */
.pg-grid .pg-card--vertical {
	max-width: none;
	margin: 0;
}

/* La horizontal mantiene su propio ancho. */
.pg-card--horizontal {
	margin: 22px auto;
}
.pg-grid .pg-card--horizontal {
	margin: 0;
}

/* Tarjeta sin imagen: un poco más de aire arriba. */
.pg-card--noimg .pg-card__body {
	padding-top: 18px;
}

/* ====================================================================== */
/* Widget de LISTA compacta (estilo "Ofertas Gamer" para barra lateral)   */
/* ====================================================================== */
.pg-list {
	--pg-bg: #0d0e12;
	--pg-bg-2: #15171d;
	--pg-red: #ff3b47;
	--pg-cyan: #22d3ee;
	--pg-text: #e9eaee;
	--pg-muted: #9aa0ac;
	--pg-line: #262a33;
	box-sizing: border-box;
	max-width: 360px;
	background: var(--pg-bg-2);
	border: 1px solid var(--pg-line);
	border-top: 3px solid var(--pg-cyan);
	border-radius: 14px;
	padding: 16px 16px 14px;
	font-family: var(--pg-font-body, 'Public Sans', sans-serif);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.pg-list * {
	box-sizing: border-box;
}

/* Encabezado */
.pg-list__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 8px;
}

.pg-list__flag {
	width: 14px;
	height: 17px;
	background: var(--pg-red);
	clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
	flex: 0 0 auto;
}

.pg-list__heading {
	font-family: var(--pg-font-title, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #fff;
}

/* Items */
.pg-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 6px;
	border-top: 1px solid var(--pg-line);
	text-decoration: none;
	transition: background 0.15s ease;
	border-radius: 8px;
}

.pg-list__item:first-child {
	border-top: 0;
}

.pg-list__item:hover {
	background: rgba(255, 255, 255, 0.03);
}

.pg-list__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	background: #fff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pg-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sin imagen: recuadro oscuro y limpio (en vez de caja blanca vacía). */
.pg-list__thumb--empty {
	background: var(--pg-bg);
	border: 1px solid var(--pg-line);
}

.pg-list__thumb--empty::before {
	content: "";
	width: 22px;
	height: 22px;
	border: 2px solid var(--pg-muted);
	border-radius: 5px;
	opacity: 0.4;
}

.pg-list__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pg-list__title {
	color: var(--pg-text);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pg-list__item:hover .pg-list__title {
	color: #fff;
}

.pg-list__link {
	color: var(--pg-cyan);
	font-size: 0.82rem;
	font-weight: 600;
}

/* Botón inferior */
.pg-list__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #3ee0f5 0%, var(--pg-cyan) 60%, #14b8d4 100%);
	color: #06222a !important;
	font-family: var(--pg-font-title, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35);
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.pg-list__cta::after {
	content: "→";
	transition: transform 0.16s ease;
}

.pg-list__cta:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow: 0 10px 24px rgba(34, 211, 238, 0.5);
}

.pg-list__cta:hover::after {
	transform: translateX(3px);
}

.pg-list__disclosure {
	margin-top: 10px;
}

.pg-list__disclosure .pg-disclosure {
	margin: 4px 0 0;
	font-size: 0.72rem;
	color: var(--pg-muted);
	font-style: italic;
}