/* Landing de tools premium (page-herramientas-premium.php).
   Complementa free-tools-landing.css, que ya se carga en esta página. */

/* --- Hero grande: banner oscuro en vez de texto suelto sobre el fondo
   de la página (mismo lenguaje visual que premium-tools-banner de la
   home y el hero de las portadas de curso). --- */
.premium-tools-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	max-width: none;
	margin: 12px 0 0;
	padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 56px);
	border-radius: 28px;
	background: linear-gradient(135deg, var(--color-navy), #12246e 48%, #1e5bff 140%);
	box-shadow: 0 10px 30px rgba(17, 34, 63, 0.1);
}

.premium-tools-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.09;
	background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
	background-size: 32px 32px;
	animation: premium-tools-hero-drift 12s linear infinite;
}

@keyframes premium-tools-hero-drift {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 32px 32px;
	}
}

.premium-tools-hero__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	left: -100px;
	top: -110px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 46, 154, 0.32), transparent 70%);
}

.premium-tools-hero__inner {
	position: relative;
	z-index: 1;
}

.premium-tools-hero .free-tools-kicker {
	color: #ff9dd0;
}

.premium-tools-hero .free-tools-kicker__icon {
	color: #8fb6ff;
}

.premium-tools-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	color: #fff;
}

.premium-tools-hero .free-tools-hero__lead {
	color: rgba(255, 255, 255, 0.8);
}

.premium-tools-hero .free-tools-pill {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
}

.premium-tools-hero .free-tools-pill--accent {
	background: var(--color-accent);
	color: #fff;
}

.premium-tools-hero .premium-tools-landing__ia span {
	color: rgba(255, 255, 255, 0.7);
}

.premium-tools-hero .premium-tools-landing__ia img {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
	.premium-tools-hero__grid {
		animation: none;
	}
}

.premium-tools-landing__ia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.premium-tools-landing__ia span {
	color: var(--color-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.premium-tools-landing__ia img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
}

.premium-tools-showcase + .premium-tools-showcase {
	margin-top: -1px;
}

.premium-tools-card__price {
	font-weight: 800;
	font-size: 14px;
	color: var(--color-ink);
}

/* --- Toda la tarjeta lleva a la ficha de la tool (pedido del 25 de
   septiembre de 2026): el link del título se estira sobre la tarjeta y el
   botón queda por encima. --- */
.premium-tools-card {
	position: relative;
	cursor: pointer;
}

.premium-tools-card h3 a {
	color: inherit;
	text-decoration: none;
}

.premium-tools-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.premium-tools-card h3 a:focus-visible {
	outline: none;
}

.premium-tools-card:has(h3 a:focus-visible) {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

.premium-tools-card .free-tools-card__cta {
	position: relative;
	z-index: 2;
	flex: none;
	white-space: nowrap;
}