/*
 * Research Membership (WP-01D3-B) — pieza editorial de conversión inmediatamente después de
 * Últimas Research. "RESEARCH LIBRARY THAT GROWS WITH YOU": biblioteca acumulativa, no pricing
 * table SaaS. Composición asimétrica 7/5 -- izquierda: copy + beneficios confirmados + CTA único;
 * derecha: un único panel navy-950 con pricing (mensual + anual, MISMO producto, dos modalidades
 * de pago, nunca dos cards) y una representación nativa HTML/CSS de acumulación semanal ("tu
 * biblioteca crece cada semana"), sin capturas ni mockups.
 * Superficie: blanco (como Pillars) con un borde superior como único separador -- diferencia la
 * sección de Últimas Research (gris) y de Technology (navy) sin introducir un tono nuevo; el
 * panel navy-950 interior es lo que le da personalidad propia frente al resto de Home.
 * SG: se reutiliza el lenguaje de conector direccional ya usado en Technology FLOW (línea + punta,
 * no el corte SG-02 de los frames de evidencia, que no encaja en una barra de 8px) -- un único
 * acento, en el último tramo del diagrama de acumulación ("llega" a "Tu biblioteca").
 * Fuente comercial: architecture/atlas-control-center/DECISIONS.md (WP-01D3-A/A1, 2026-09-17) --
 * 35 EUR/mes y 350 EUR/año APPROVED, IVA incluido, MONTHLY_ANNUAL_BENEFITS = IDENTICAL.
 */
.smq-membership {
	width: 100%;
	background: var(--smq-white);
	border-top: 1px solid var(--smq-gray-200);
	padding: var(--smq-space-6) 0;
}
.smq-membership-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-membership-row {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--smq-space-7);
	align-items: stretch;
}

/* ---- Columna principal (copy + beneficios + CTA) ---- */
.smq-membership-main {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
	justify-content: center;
}
.smq-membership-eyebrow {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0;
}
.smq-membership-heading {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	line-height: 1.2;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-membership-descriptor {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 56ch;
}

/* Lista editorial de beneficios -- sin bullets nativos, marcador tipográfico propio (guion),
   deliberadamente distinto del micro-index "NN/04" de Últimas Research. */
.smq-membership-benefits {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
	margin: var(--smq-space-1) 0 0;
	padding: 0;
}
.smq-membership-benefits li {
	position: relative;
	padding-left: var(--smq-space-4);
	font-family: var(--smq-font-text);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--smq-navy-950);
}
.smq-membership-benefits li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--smq-blue-brand);
}

.smq-membership-cta {
	margin: var(--smq-space-2) 0 0;
}
.smq-membership-cta a {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--smq-navy-950);
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.smq-membership-cta a:hover,
.smq-membership-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* ---- Panel (pricing + biblioteca creciente) -- única superficie navy de la sección ---- */
.smq-membership-panel {
	background: var(--smq-navy-950);
	color: var(--smq-white);
	padding: var(--smq-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-5);
}

.smq-membership-pricing-label {
	font-family: var(--smq-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0 0 var(--smq-space-3);
}
.smq-membership-pricing-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--smq-space-4);
}
.smq-membership-price {
	display: flex;
	align-items: baseline;
	gap: var(--smq-space-1);
	padding-right: var(--smq-space-4);
}
.smq-membership-price + .smq-membership-price {
	border-left: 1px solid var(--smq-navy-700);
	padding-left: var(--smq-space-4);
}
.smq-membership-price-value {
	font-family: var(--smq-font-mono);
	font-weight: 700;
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
	color: var(--smq-white);
}
.smq-membership-price-period {
	font-family: var(--smq-font-text);
	font-size: 0.85rem;
	color: var(--smq-gray-400);
}
.smq-membership-pricing-note {
	font-family: var(--smq-font-text);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--smq-gray-400);
	margin: var(--smq-space-3) 0 0;
}

/* Representación nativa de acumulación semanal -- ni captura ni mockup: 4 incrementos + un
   remate ("Tu biblioteca") que absorbe visualmente los anteriores, más una anotación editorial.
   Comunica progresión, no decora.
   WP-01D3-R1: la barra final desbordaba el panel porque `width:100%` en un flex item con
   `flex:0 0 auto` se resuelve contra el ancho del CONTENEDOR flex, ignorando el resto de
   hermanos (índice/label) y el propio `gap` -- índice+label+barra@100% sumaban más que el ancho
   real de la fila, y el `::after` de la punta (`right:-7px`) empujaba aún más allá del borde del
   panel. Fix real (no `overflow:hidden`): cada fila pasa a CSS Grid con columnas fijas para
   índice/etiqueta y una columna `1fr` dedicada exclusivamente a la barra -- el ancho de la barra
   ahora es un porcentaje de ESA columna, nunca de la fila completa, así que no puede desbordarla
   por construcción. La punta direccional deja de ser un pseudo-elemento con offset negativo: es
   un elemento de flujo normal de 8px reservado dentro de la misma columna, después de una barra
   que ya no llega al 100% (deja hueco propio para la punta). */
.smq-membership-growth {
	display: flex;
	align-items: stretch;
	gap: var(--smq-space-4);
	padding-top: var(--smq-space-4);
	border-top: 1px solid var(--smq-navy-700);
}
.smq-membership-growth-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-membership-growth-row {
	display: grid;
	grid-template-columns: 20px 84px 1fr;
	align-items: center;
	gap: var(--smq-space-3);
}
.smq-membership-growth-index {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	color: var(--smq-gray-400);
}
.smq-membership-growth-week {
	font-family: var(--smq-font-text);
	font-size: 0.72rem;
	color: var(--smq-gray-400);
	white-space: nowrap;
}
.smq-membership-growth-track {
	display: flex;
	align-items: center;
	min-width: 0;
}
.smq-membership-growth-bar {
	flex: 0 0 auto;
	height: 6px;
	background: var(--smq-blue-brand);
	opacity: 0.4;
}
.smq-membership-growth-row:nth-child(1) .smq-membership-growth-bar { width: 24%; }
.smq-membership-growth-row:nth-child(2) .smq-membership-growth-bar { width: 44%; opacity: 0.55; }
.smq-membership-growth-row:nth-child(3) .smq-membership-growth-bar { width: 64%; opacity: 0.7; }
.smq-membership-growth-row:nth-child(4) .smq-membership-growth-bar { width: 84%; opacity: 0.85; }

/* Estado final: mayor jerarquía que "Semana NN" (más grande, blanco, negrita), pero por debajo de
   los precios en tamaño -- la etiqueta ocupa las dos primeras columnas (misma anchura combinada
   que índice+gap+etiqueta de las filas superiores, para que la barra arranque siempre en el mismo
   punto y la progresión se lea como una escalera limpia). */
.smq-membership-growth-row--total {
	grid-template-columns: 120px 1fr;
	margin-top: var(--smq-space-1);
}
.smq-membership-growth-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--smq-white);
	white-space: nowrap;
}
.smq-membership-growth-row--total .smq-membership-growth-bar {
	height: 8px;
	opacity: 1;
	/* 88%, no 100%: dentro de la propia columna deja hueco real para la punta -- sin negative
	   offsets, sin overflow:hidden. */
	width: 88%;
}
/* Único acento de Signature Geometry de la sección (sin cambios de intención respecto a WP-01D3-B,
   solo de técnica): mismo conector direccional (línea + punta) que Technology FLOW, ahora como
   elemento de flujo normal en vez de pseudo-elemento con offset -- no puede salir de su columna. */
.smq-membership-growth-arrow {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin-left: var(--smq-space-1);
	position: relative;
}
.smq-membership-growth-arrow::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid var(--smq-blue-brand);
}

/* Anotación editorial -- zona propia del layout (no un elemento flotante añadido al final del
   ancho completo): línea técnica (no SG nueva) + 1 frase secundaria en itálica, discreta. */
.smq-membership-growth-annotation {
	flex: 0 0 128px;
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
}
.smq-membership-growth-bracket {
	align-self: stretch;
	width: 1px;
	flex: 0 0 auto;
	background: var(--smq-navy-700);
}
.smq-membership-growth-note {
	font-family: var(--smq-font-text);
	font-style: italic;
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--smq-gray-400);
	margin: 0;
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (max-width: 768px) {
	.smq-membership {
		padding: var(--smq-space-5) 0;
	}
	.smq-membership-inner {
		width: calc(100% - 32px);
	}
	.smq-membership-row {
		grid-template-columns: 1fr;
		gap: var(--smq-space-5);
	}
	.smq-membership-panel {
		padding: var(--smq-space-4);
	}
}
@media (max-width: 375px) {
	.smq-membership-pricing-row {
		gap: var(--smq-space-3);
	}
	.smq-membership-price-value {
		font-size: 1.5rem;
	}
	.smq-membership-price + .smq-membership-price {
		padding-left: var(--smq-space-3);
	}
	.smq-membership-price {
		padding-right: var(--smq-space-3);
	}
	/* No comprimir las tres zonas en el mismo ancho estrecho: la anotación pasa a vivir debajo
	   del diagrama, a ancho completo, sin el bracket lateral (deja de tener sentido en vertical). */
	.smq-membership-growth {
		flex-direction: column;
		gap: var(--smq-space-3);
	}
	.smq-membership-growth-annotation {
		flex-basis: auto;
	}
	.smq-membership-growth-bracket {
		display: none;
	}
	.smq-membership-growth-row {
		grid-template-columns: 18px 66px 1fr;
		gap: var(--smq-space-2);
	}
	.smq-membership-growth-row--total {
		grid-template-columns: 92px 1fr;
	}
	.smq-membership-growth-week,
	.smq-membership-growth-label {
		font-size: 0.68rem;
	}
}