/**
 * Product page — capa visual común para las landings de cada extensión:
 *   /grok-autokuak/, /flow-autokuak/, /chatgpt-autokuak/, /tubekradar/,
 *   /tubekradar/niche-scan/ y el hub /autokuak/.
 *
 * Reglas:
 *   - Aditivo sobre marketing.css + pricing-suite.css. No sobrescribe.
 *   - Reutiliza .home-orb-*, .pricing-suite-hero, .pricing-suite-roi y
 *     .pricing-suite-compare. Lo que vive aquí son los primitivos que faltan:
 *     TOC en pills, step cards 4-grid, integrations strip, tier cards de
 *     cuota, related products grid y mini-FAQ con <details>.
 *   - Funciona idéntico en modo claro y oscuro vía tokens semánticos.
 *
 * @package Puente
 */

/* =========================================================
   SCOPE
   ========================================================= */
.product-page {
	position: relative;
	isolation: isolate;
}

/* =========================================================
   HERO — la página reutiliza .pricing-suite-hero. Sólo añadimos
   el chip de suite y el grupo de CTAs.
   ========================================================= */
.product-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: var(--space-md);
}
.product-hero__chip::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}
.product-hero__chip a {
	color: var(--accent-blue);
	text-decoration: none;
	font-weight: 800;
}
.product-hero__chip a:hover { text-decoration: underline; }

.product-hero__ctas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin-top: var(--space-xl);
}

.product-hero__meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	justify-content: center;
	margin-top: var(--space-lg);
	font-size: var(--text-xs);
	color: var(--text-secondary);
}
.product-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.product-hero__meta strong {
	color: var(--text-primary);
	font-weight: 700;
}

/* =========================================================
   TOC — píldoras enlazables a las secciones de la página
   ========================================================= */
.product-toc {
	padding-block: clamp(20px, 3vw, 40px);
}
.product-toc__title {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: var(--space-md);
	text-align: center;
}
.product-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.product-toc__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: 999px;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}
.product-toc__list a:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--divider));
	color: var(--accent-blue);
	transform: translateY(-1px);
}
.product-toc__list a .product-toc__num {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .5px;
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
	padding: 2px 7px;
	border-radius: 999px;
}

/* =========================================================
   SECTION HEADER alternativo — alineado a izquierda, eyebrow
   ========================================================= */
.product-section {
	padding-block: clamp(56px, 7vw, 96px);
	position: relative;
}
.product-section--tight { padding-block: clamp(32px, 4vw, 56px); }

.product-section__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}
.product-section__head--left {
	text-align: left;
	margin-inline: 0;
}
.product-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: var(--space-md);
}
.product-section__title {
	font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 var(--space-md);
	color: var(--text-primary);
}
.product-section__lede {
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0 auto;
	max-width: 60ch;
}
.product-section__head--left .product-section__lede { margin-inline: 0; }

/* =========================================================
   PROBLEM — lista numerada con cards
   ========================================================= */
.product-problem {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--shadow-card);
}
.product-problem__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
	counter-reset: pp;
}
.product-problem__list li {
	counter-increment: pp;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	background: var(--bg-primary);
	border: 1px solid var(--divider);
	border-radius: var(--radius-button);
	font-size: var(--text-base);
	color: var(--text-primary);
}
.product-problem__list li::before {
	content: counter(pp, decimal-leading-zero);
	font-size: var(--text-sm);
	font-weight: 800;
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
	padding: 4px 10px;
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.product-problem__caption {
	margin-top: var(--space-lg);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
}
.product-problem__caption a { color: var(--accent-blue); font-weight: 600; }

/* =========================================================
   STEPS — 4 step cards: source → capture → preview → groups
   ========================================================= */
.product-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
}

.product-step {
	position: relative;
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: var(--space-xl);
	box-shadow: var(--shadow-card);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.product-step:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--divider));
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}
.product-step::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-blue) 18%, transparent) 0%, transparent 65%);
	pointer-events: none;
}
.product-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--accent-blue);
	color: #fff;
	font-weight: 800;
	font-size: var(--text-base);
	margin-bottom: var(--space-md);
	font-variant-numeric: tabular-nums;
	position: relative;
	z-index: 1;
}
.product-step__title {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs);
	position: relative;
	z-index: 1;
}
.product-step__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.55;
	margin: 0;
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.product-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.product-steps { grid-template-columns: 1fr; }
}

.product-steps__after {
	margin-top: var(--space-xl);
	padding: var(--space-lg);
	background: var(--bg-card);
	border: 1px dashed color-mix(in srgb, var(--accent-blue) 35%, var(--divider));
	border-radius: var(--radius-button);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
}
.product-steps__after strong { color: var(--text-primary); }

/* =========================================================
   INTEGRATIONS — pestañas fuente cross-IA con flecha hacia Grok
   ========================================================= */
.product-integrations {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	padding: clamp(28px, 4vw, 48px);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}
.product-integrations__group h3 {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 var(--space-md);
}
.product-integrations__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.product-integrations__chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--bg-primary);
	border: 1px solid var(--divider);
	border-radius: 999px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-primary);
}
.product-integrations__chips li code {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--text-secondary);
	background: transparent;
	padding: 0;
}
.product-integrations__chips--target li {
	border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--divider));
	background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-primary));
}
/* Variante --stack: bullet vertical legible (vs pills horizontales). Pensada
   para listas largas con texto rico, no para etiquetas cortas. */
.product-integrations__chips--stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.product-integrations__chips--stack li {
	display: block;
	padding: var(--space-md) var(--space-lg);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md);
	font-weight: 400;
	line-height: 1.55;
}
.product-integrations__chips--stack li strong { font-weight: 700; }
.product-integrations__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
	color: var(--accent-blue);
}
.product-integrations__arrow svg { width: 28px; height: 28px; }

@media (max-width: 860px) {
	.product-integrations { grid-template-columns: 1fr; text-align: left; }
	.product-integrations__arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
}

/* =========================================================
   MODES — 2-col comparison de Normal vs Sequences
   ========================================================= */
.product-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md);
}
.product-mode {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--shadow-card);
	transition: border-color .2s ease, transform .2s ease;
	position: relative;
	overflow: hidden;
}
.product-mode:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--divider));
	transform: translateY(-2px);
}
.product-mode__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: var(--space-md);
}
.product-mode--alt .product-mode__pill {
	color: var(--accent-green, #20bf6b);
	background: color-mix(in srgb, var(--accent-green, #20bf6b) 12%, transparent);
}
.product-mode__title {
	font-size: var(--text-xl);
	font-weight: 700;
	margin: 0 0 var(--space-sm);
	color: var(--text-primary);
}
.product-mode__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0 0 var(--space-md);
}
.product-mode__use {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	background: var(--bg-primary);
	border: 1px solid var(--divider);
	border-radius: var(--radius-button);
	padding: var(--space-sm) var(--space-md);
	line-height: 1.55;
}
.product-mode__use strong { color: var(--text-primary); }

@media (max-width: 720px) {
	.product-modes { grid-template-columns: 1fr; }
}

/* Timers callout under modes */
.product-timers {
	margin-top: var(--space-xl);
	padding: var(--space-lg);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
}
.product-timers__head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}
.product-timers__head h3 {
	font-size: var(--text-base);
	font-weight: 700;
	margin: 0;
}
.product-timers__head svg { color: var(--accent-blue); }
.product-timers__list {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-timers__list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	background: var(--bg-primary);
	border: 1px solid var(--divider);
	border-radius: var(--radius-button);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.product-timers__list li strong {
	color: var(--text-primary);
	display: block;
	margin-bottom: 2px;
	font-size: var(--text-sm);
}
.product-timers__list li small {
	font-size: 11px;
	color: var(--text-secondary);
}
.product-timers__list li .value {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--accent-blue);
	white-space: nowrap;
	align-self: center;
}
.product-timers__rule {
	margin-top: var(--space-md);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: 1.55;
}
.product-timers__rule strong { color: var(--text-primary); }

/* =========================================================
   TIERS — Anónimo · Free · Pro (3 cards)
   ========================================================= */
.product-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}
.product-tier {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: clamp(20px, 2.5vw, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	box-shadow: var(--shadow-card);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.product-tier:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--divider));
}
.product-tier__name {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0;
}
.product-tier__quota {
	font-size: var(--text-3xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--text-primary);
	margin: 0;
}
.product-tier__quota .unit {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-secondary);
	margin-left: 4px;
}
.product-tier__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.55;
	margin: 0;
}
.product-tier--featured {
	border-color: color-mix(in srgb, var(--accent-blue) 50%, var(--divider));
	background:
		radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent-blue) 7%, transparent) 0%, transparent 60%),
		var(--bg-card);
}
.product-tier--featured .product-tier__name { color: var(--accent-blue); }
.product-tier--featured .product-tier__quota { color: var(--accent-blue); }
.product-tier__cta {
	margin-top: auto;
}

@media (max-width: 860px) {
	.product-tiers { grid-template-columns: 1fr; }
}

/* =========================================================
   RELATED — 4 cards de productos hermanos
   ========================================================= */
.product-related {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
}
.product-related__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}
.product-related__card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent-blue) 40%, var(--divider));
	box-shadow: var(--shadow-card-hover);
}
.product-related__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
	color: var(--accent-blue);
	font-size: 20px;
	margin-bottom: var(--space-xs);
}
.product-related__title {
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--text-primary);
	margin: 0;
}
.product-related__desc {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.product-related__arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--accent-blue);
	margin-top: var(--space-sm);
}

@media (max-width: 1024px) {
	.product-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.product-related { grid-template-columns: 1fr; }
}

/* =========================================================
   FAQ específica por página — usa <details> nativo con el look
   de .faq-list pero sin JS.
   ========================================================= */
.product-faq {
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.product-faq details {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.product-faq details:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--divider));
}
.product-faq details[open] {
	background: var(--bg-primary);
	border-color: var(--accent-blue);
	box-shadow: var(--shadow-card);
}
.product-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font: 600 var(--text-base) / 1.4 var(--font);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	letter-spacing: -.005em;
}
.product-faq summary::-webkit-details-marker { display: none; }
.product-faq summary::after {
	content: "+";
	color: var(--accent-blue);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	transition: transform .25s ease;
	flex-shrink: 0;
}
.product-faq details[open] summary::after {
	transform: rotate(45deg);
}
.product-faq summary:hover { color: var(--accent-blue); }
.product-faq details > p,
.product-faq details > ul,
.product-faq details > ol,
.product-faq details > div {
	padding: 0 22px 20px;
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.65;
}
.product-faq details > p + p { padding-top: var(--space-sm); }
.product-faq details strong { color: var(--text-primary); font-weight: 600; }
.product-faq details code {
	font-family: var(--mono);
	font-size: .9em;
	background: var(--bg-pill);
	color: var(--text-primary);
	padding: 1px 6px;
	border-radius: 4px;
}

/* =========================================================
   CALLOUT — bandera horizontal "split-screen", "download smart"
   ========================================================= */
.product-callouts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md);
}
.product-callouts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
	.product-callouts,
	.product-callouts--three { grid-template-columns: 1fr; }
}
.product-callout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-xl);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	align-items: start;
	transition: border-color .2s ease, transform .2s ease;
}
.product-callout:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--divider));
	transform: translateY(-1px);
}
.product-callout__icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
	color: var(--accent-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.product-callout__title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 4px;
}
.product-callout__desc {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* =========================================================
   Mini utility: code-pill inline (para grok.com/imagine, etc.)
   ========================================================= */
.product-page code {
	font-family: var(--mono);
	font-size: .9em;
	background: var(--bg-pill);
	color: var(--text-primary);
	padding: 1px 6px;
	border-radius: 4px;
}

/* =========================================================
   IMAGE SLOTS — figures (img reales o mockup SVG de fallback)
   ========================================================= */
.product-figure {
	margin: 0;
	border-radius: var(--radius-card);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	position: relative;
}
.product-figure img,
.product-figure svg {
	display: block;
	width: 100%;
	height: auto;
}
.product-figure--mockup {
	padding: clamp(16px, 2.5vw, 32px);
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent-blue) 6%, transparent) 0%, transparent 60%),
		var(--bg-card);
}
.product-figure__caption {
	display: block;
	padding: var(--space-sm) var(--space-md);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	background: var(--bg-card);
	border-top: 1px solid var(--divider);
	text-align: center;
}
.product-figure--mockup .product-figure__caption {
	border-top: none;
	padding-top: var(--space-md);
}

/* Wrapper: contenedor de figura entre secciones (hero, post-steps, capture) */
.product-figure-stage {
	padding-block: clamp(24px, 4vw, 56px);
}
.product-figure-stage .container { position: relative; }
.product-figure-stage--hero {
	padding-top: 0;
}
.product-figure-stage--hero .product-figure {
	max-width: 1100px;
	margin-inline: auto;
}
.product-figure-stage--steps {
	padding-block: clamp(20px, 3vw, 40px) 0;
}
.product-figure-stage--steps .product-figure {
	max-width: 920px;
	margin-inline: auto;
}
.product-figure-stage--capture {
	padding-block: clamp(20px, 3vw, 40px) 0;
}
.product-figure-stage--capture .product-figure {
	max-width: 1080px;
	margin-inline: auto;
}

/* Glow sutil bajo la figura del hero */
.product-figure-stage--hero .product-figure {
	box-shadow:
		var(--shadow-card-hover),
		0 40px 80px -40px color-mix(in srgb, var(--accent-blue) 35%, transparent);
}

/* =========================================================
   YOUTUBE VIDEO — facade (perf + privacy): el iframe NO se carga
   hasta que el usuario pulsa play. Hidrata vía inline JS al final
   del template. Mientras tanto se muestra el thumbnail oficial de
   YouTube con un botón de play encima.
   ========================================================= */
.product-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--divider);
	box-shadow:
		var(--shadow-card-hover),
		0 40px 80px -40px color-mix(in srgb, var(--accent-blue) 35%, transparent);
	max-width: 920px;
	margin-inline: auto;
}
.product-video__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	transition: transform .25s ease;
}
.product-video__poster:hover { transform: scale(1.005); }
.product-video__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.product-video__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%),
		radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,0.05), rgba(0,0,0,0.35) 100%);
	pointer-events: none;
}
.product-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}
.product-video__poster:hover .product-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--accent-blue);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--accent-blue) 45%, rgba(0,0,0,0.5));
}
.product-video__label {
	position: absolute;
	left: 20px;
	bottom: 20px;
	color: #fff;
	font: 600 var(--text-sm) / 1.3 var(--font);
	max-width: 70%;
	letter-spacing: -.005em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}
.product-video__duration {
	position: absolute;
	right: 16px;
	bottom: 16px;
	font: 800 11px / 1 ui-monospace, SFMono-Regular, monospace;
	color: #fff;
	background: rgba(0, 0, 0, 0.75);
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: .5px;
	pointer-events: none;
}
.product-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 540px) {
	.product-video__play { width: 64px; height: 64px; font-size: 22px; }
}

/* =========================================================
   FIGURE-STAGE VARIANTS — variantes añadidas para las landings
   nuevas (autokuak hub, chatgpt, flow, tubekradar, niche-scan).
   Todas comparten el padding y el max-width base de --capture,
   ajustando sólo el ancho máximo de la figura cuando aplica.
   ========================================================= */
.product-figure-stage--bridge,
.product-figure-stage--badges,
.product-figure-stage--feed,
.product-figure-stage--channel,
.product-figure-stage--models,
.product-figure-stage--panel,
.product-figure-stage--sora,
.product-figure-stage--tube {
	padding-block: clamp(20px, 3vw, 40px) 0;
}
.product-figure-stage--bridge .product-figure,
.product-figure-stage--badges .product-figure,
.product-figure-stage--feed .product-figure,
.product-figure-stage--channel .product-figure,
.product-figure-stage--models .product-figure,
.product-figure-stage--panel .product-figure,
.product-figure-stage--sora .product-figure,
.product-figure-stage--tube .product-figure {
	max-width: 1080px;
	margin-inline: auto;
}
/* Aplica también al wrapper del vídeo cuando el slot tube/channel/panel se rellena
   con un vídeo en lugar de una imagen — así el ancho coincide con la imagen. */
.product-figure-stage--tube .product-video,
.product-figure-stage--channel .product-video,
.product-figure-stage--panel .product-video,
.product-figure-stage--steps .product-video {
	max-width: 920px;
}

/* =========================================================
   COMPARE TABLE — comparativa entre extensiones (ChatGPT vs
   Grok vs Flow, TubeKRadar vs Niche Scan). El template emite
   un <div class="product-compare"><table>...</table></div>.
   ========================================================= */
.product-compare {
	margin-top: var(--space-xl);
	overflow-x: auto;
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	background: var(--bg-card);
	box-shadow: var(--shadow-card);
}
.product-compare table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--text-sm);
	color: var(--text-primary);
}
.product-compare thead th {
	background: color-mix(in srgb, var(--accent-blue) 6%, var(--bg-card));
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: .01em;
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--divider);
	font-size: var(--text-xs);
	text-transform: uppercase;
}
.product-compare tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--divider);
	vertical-align: top;
	line-height: 1.55;
}
.product-compare tbody tr:last-child td { border-bottom: 0; }
.product-compare tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--text-primary) 2%, transparent);
}
.product-compare tbody td:first-child {
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	width: 1%;
}
.product-compare tbody td[colspan] {
	text-align: center;
	font-weight: 600;
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
}
@media (max-width: 720px) {
	.product-compare table { font-size: var(--text-xs); min-width: 560px; }
	.product-compare thead th,
	.product-compare tbody td { padding: 10px 12px; }
}

/* =========================================================
   NICHES GRID — taxonomía de 15 nichos con CPM (TubeKRadar).
   Cada card lista el nombre del nicho, su CPM y una nota
   opcional ("la categoría mejor pagada", "CPM mixto").
   ========================================================= */
.product-niches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-xl);
}
.product-niche {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-md) var(--space-lg);
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.product-niche:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--divider));
	box-shadow: var(--shadow-card-hover);
}
.product-niche__name {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
}
.product-niche__cpm {
	font-size: var(--text-lg);
	font-weight: 800;
	color: var(--accent-blue);
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1;
}
.product-niche__cpm .unit {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--text-secondary);
	margin-left: 4px;
	text-transform: uppercase;
}
.product-niche__cpm--neutral {
	color: var(--text-secondary);
	font-weight: 700;
}
.product-niche__note {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: 1.45;
	margin: 0;
}

/* =========================================================
   TIERS — variantes para TubeKRadar (single FREE tier) y
   para Niche Scan (tier bloqueado en modo anónimo).
   ========================================================= */
.product-tiers--single {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}
.product-tier--free {
	border-color: color-mix(in srgb, var(--accent-green, #16a34a) 40%, var(--divider));
	background:
		radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent-green, #16a34a) 8%, transparent) 0%, transparent 60%),
		var(--bg-card);
	text-align: center;
	align-items: center;
}
.product-tier--free .product-tier__name,
.product-tier--free .product-tier__quota {
	color: var(--accent-green, #16a34a);
}
.product-tier--free .product-tier__desc { max-width: 360px; }
/* Tier bloqueado (Niche Scan anónimo). Se hereda del template que añade
   `product-tier--disabled` cuando aplica; por defecto basta con bajar la
   opacidad y marcar el quota con un look "muted". Si el template usa el
   estilo por defecto, esta regla no aplica — es defensiva. */
.product-tier--disabled {
	opacity: .72;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			transparent 12px,
			color-mix(in srgb, var(--text-primary) 3%, transparent) 12px,
			color-mix(in srgb, var(--text-primary) 3%, transparent) 13px
		),
		var(--bg-card);
}
.product-tier--disabled .product-tier__quota {
	color: var(--text-secondary);
	font-size: var(--text-xl);
}

/* =========================================================
   FALLBACKS PARA LISTAS DENTRO DE SECCIONES
   Algunos templates emiten <ul> "desnudos" dentro de
   product-section sin clase específica (ej. listas de
   features en autokuak hub). Sin esto las marks por
   defecto del navegador se ven mal sobre fondo SaaS.
   ========================================================= */
.product-section .wp-block-list,
.product-section ul:not([class]),
.product-section ol:not([class]) {
	padding-left: 1.2em;
	margin: var(--space-md) 0;
	color: var(--text-secondary);
	line-height: 1.7;
}
.product-section ul:not([class]) li,
.product-section ol:not([class]) li,
.product-section .wp-block-list li {
	margin-bottom: 8px;
}
.product-section ul:not([class]) li::marker {
	color: color-mix(in srgb, var(--accent-blue) 60%, transparent);
}
.product-section ul:not([class]) strong,
.product-section ol:not([class]) strong,
.product-section .wp-block-list strong { color: var(--text-primary); }
.product-section ul:not([class]) a,
.product-section ol:not([class]) a,
.product-section .wp-block-list a {
	color: var(--accent-blue);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);
}
.product-section ul:not([class]) a:hover,
.product-section ol:not([class]) a:hover,
.product-section .wp-block-list a:hover { border-bottom-color: var(--accent-blue); }

/* =========================================================
   PAGE MODIFIERS — sólo hooks (sin estilos por defecto) para
   que un futuro CSS por extensión pueda inyectar variaciones
   de color/tono sin tocar los selectores genéricos.
   ========================================================= */
.product-page--autokuak,
.product-page--chatgpt,
.product-page--flow,
.product-page--tubekradar,
.product-page--niche-scan { /* hook intentionally empty */ }