/* ==========================================================================
   /plataforma/ — página de venta.
   Reutiliza las variables y botones del tema; todas las clases llevan prefijo pl-.
   Las superficies "oscuras" usan colores fijos (no se invierten en modo oscuro).
   ========================================================================== */

.pl-page {
	--pl-dark: #14161d;
	--pl-dark-soft: #2a3037;
	--pl-on-dark: #ffffff;
	--pl-on-dark-soft: #d6d3cc;
	--pl-red: #DC241F;
	--pl-red-on-dark: #ff8a84;
	overflow-x: clip;
}

.pl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pl-page a:focus-visible,
.pl-page button:focus-visible,
.pl-table-wrap:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.pl-eyebrow {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--accent);
}

.pl-brand { color: var(--accent); }

.pl-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

/* ---------- Secciones ---------- */
.pl-section { padding-block: var(--section-y); }
.pl-section--tint { background: var(--indigo-tint); }

@media (prefers-color-scheme: dark) {
	.pl-section--tint { background: var(--surface); }
}
:root[data-theme="dark"] .pl-section--tint { background: var(--surface); }
:root[data-theme="light"] .pl-section--tint { background: var(--indigo-tint); }

.pl-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.pl-head h2 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.25;
	margin: 0 0 1rem;
}

.pl-head__lede {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--ink-soft);
}

.pl-note {
	margin: 1.5rem auto 0;
	max-width: 760px;
	text-align: center;
	font-size: .9rem;
	color: var(--ink-soft);
}

/* ---------- Chips, badges ---------- */
.pl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.pl-chips li {
	padding: .3rem .8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: .85rem;
	font-weight: 600;
}

.pl-chips--small { margin: .5rem 0 0; }
.pl-chips--small li { font-size: .78rem; padding: .2rem .65rem; }

.pl-badge {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--accent-pale);
	color: var(--ink);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}

.pl-badge--on { background: var(--pl-red); color: var(--pl-on-dark); }

.pl-chip {
	display: inline-block;
	margin: 0 0 .5rem;
	padding: .15rem .65rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: .8rem;
	font-weight: 700;
}

/* ---------- 1 · Portada ---------- */
.pl-hero {
	padding-block: clamp(2.5rem, 7vw, 5rem);
	background:
		radial-gradient(48rem 26rem at 90% -10%, var(--accent-pale), transparent 60%),
		var(--paper);
}

.pl-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: start;
}

.pl-hero__title {
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0 0 .5rem;
}

.pl-hero__sub {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	color: var(--ink-soft);
}

.pl-hero__text { margin: 0 0 .5rem; line-height: 1.65; }

.pl-hero__note {
	margin: 0 0 1rem;
	font-size: .92rem;
	color: var(--ink-soft);
}

.pl-checks {
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.pl-checks li {
	position: relative;
	padding-left: 1.75rem;
}

.pl-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: var(--accent);
}

.pl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1rem;
}

.pl-actions--center { justify-content: center; }
.pl-actions .button { margin: 0; }

.pl-hero__price {
	margin: 0;
	font-weight: 600;
	color: var(--ink-soft);
}

/* Tarjeta "Todo en una cuenta" */
.pl-account {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.pl-account__title {
	margin: 0 0 1.25rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ink-soft);
}

.pl-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 1rem;
	padding-bottom: 1.25rem;
}

/* Línea vertical que conecta los pasos */
.pl-steps__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.3rem;
	top: 2.75rem;
	bottom: .25rem;
	width: 2px;
	background: var(--line);
}

.pl-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--accent-pale);
	color: var(--accent);
	font-size: 1.1rem;
}

.pl-steps__label {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--accent);
}

.pl-steps__name { margin: 0; font-weight: 700; }
.pl-steps__text { margin: .15rem 0 0; font-size: .92rem; color: var(--ink-soft); }

.pl-account__foot {
	margin: .5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: .9rem;
	font-weight: 600;
}

/* ---------- 2 · Índice ---------- */
.pl-index { padding-block: clamp(2rem, 5vw, 3rem); }

.pl-index__title {
	margin: 0 0 1.25rem;
	text-align: center;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.pl-index__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.pl-index__card {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	padding: 1rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.pl-index__card:hover { border-color: var(--accent); transform: translateY(-2px); }

.pl-index__num {
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}

/* ---------- 3 · La plataforma ---------- */
.pl-base {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: 2rem;
	background: var(--pl-dark);
	color: var(--pl-on-dark);
	border-radius: var(--radius-lg);
}

.pl-base__label {
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pl-red-on-dark);
}

.pl-base h3 { margin: 0 0 .75rem; font-size: 1.5rem; color: var(--pl-on-dark); }
.pl-base p { margin: 0; line-height: 1.65; color: var(--pl-on-dark-soft); }

.pl-base__diagram { width: 100%; height: auto; }
.pl-dg__lines line { stroke: var(--pl-on-dark-soft); stroke-width: 2; stroke-dasharray: 4 5; }
.pl-dg__core { fill: var(--pl-red); }
.pl-dg__core-text { fill: #fff; font: 700 18px var(--font-sans); }
.pl-dg__node rect { fill: var(--pl-dark-soft); stroke: var(--pl-on-dark-soft); stroke-width: 1; }
.pl-dg__jp { fill: #fff; font: 700 18px var(--font-jp); }
.pl-dg__es { fill: var(--pl-on-dark-soft); font: 500 14px var(--font-sans); }

.pl-tools-line {
	margin: 0 0 1.5rem;
	text-align: center;
	font-size: 1.1rem;
}

.pl-tools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.pl-tool {
	position: relative;
	padding: 1.5rem 1.5rem 3.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.pl-tool__label {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--accent);
}

.pl-tool h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.pl-tool__text { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.pl-tool__more { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.pl-tool__more p { margin: 0; line-height: 1.6; }

/* "+" / "−" */
.pl-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--accent);
	cursor: pointer;
}

.pl-toggle__icon::before {
	content: "+";
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}

[aria-expanded="true"] > .pl-toggle__icon::before,
[aria-expanded="true"] .pl-toggle__icon::before { content: "−"; }

/* ---------- 4 · Niveles ---------- */
.pl-levels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.pl-level {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.pl-level--on { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.pl-level h3 { margin: 0; font-size: 1.3rem; }
.pl-level p { margin: 0; line-height: 1.55; }
.pl-level__step { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); }
.pl-level__goal { font-weight: 700; color: var(--accent); }
.pl-link { margin-top: auto; font-weight: 700; color: var(--accent); }

/* ---------- 5 · Ruta N5 ---------- */
.pl-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 1rem;
	padding-bottom: 1rem;
}

.pl-timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.45rem;
	top: 3rem;
	bottom: 0;
	width: 2px;
	background: var(--line);
}

.pl-timeline__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 1.1rem;
}

.pl-timeline__glyph { font: 700 1.4rem var(--font-jp); }

/* Acordeón (ruta y FAQ) */
.pl-acc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.pl-acc__head { margin: 0; font-size: 1rem; }

.pl-acc__button {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: 1rem 1.1rem;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pl-acc__title { flex: 1; font-weight: 700; }
.pl-acc__button .pl-toggle__icon { color: var(--accent); }
.pl-acc__panel { padding: 0 1.1rem 1.1rem; }
.pl-acc__panel p { margin: 0 0 .5rem; line-height: 1.6; }

.pl-dominaras {
	margin: 1rem 0 .5rem !important;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--accent);
}

.pl-dominaras__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .4rem 1rem;
}

.pl-dominaras__list li::before { content: "• "; color: var(--accent); }

.pl-faq { display: grid; gap: .75rem; }

.pl-subhead { margin: 2.5rem 0 1rem; font-size: 1.15rem; text-align: center; }

.pl-lab {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.pl-lab__card {
	padding: 1.25rem;
	border: 2px dashed var(--line);
	border-radius: var(--radius);
}

.pl-lab__card h4 { margin: .5rem 0 .25rem; }
.pl-lab__card p { margin: 0; color: var(--ink-soft); }

.pl-figures {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 2rem 0 0;
	padding: 1.25rem 1rem;
	background: var(--pl-dark);
	color: var(--pl-on-dark);
	border-radius: var(--radius) var(--radius) 0 0;
	text-align: center;
	font-weight: 700;
}

.pl-bar {
	padding: 1.25rem 1.5rem;
	background: var(--pl-dark-soft);
	color: var(--pl-on-dark);
	border-radius: 0 0 var(--radius) var(--radius);
	text-align: center;
}

.pl-bar p { margin: 0; }
.pl-bar__detail { margin-top: .35rem !important; font-size: .9rem; color: var(--pl-on-dark-soft); }

/* ---------- 6 · Cómo es una clase ---------- */
.pl-class {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.pl-class__step {
	position: relative;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.pl-class__num {
	position: absolute;
	top: 1rem;
	right: 1.1rem;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--line);
}

.pl-class__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: .75rem;
	border-radius: var(--radius);
	background: var(--accent-pale);
	color: var(--accent);
	font-size: 1.2rem;
}

.pl-class__step h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.pl-class__step p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

/* ---------- 7 · Tabla comparativa ---------- */
.pl-table-wrap {
	position: relative; /* contiene los .pl-sr absolutos: sin esto ensanchan la página */
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.pl-table {
	width: 100%;
	min-width: 680px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .95rem;
}

.pl-table th,
.pl-table td {
	padding: .85rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.pl-table thead th {
	background: var(--pl-dark);
	color: var(--pl-on-dark);
	font-weight: 700;
}

.pl-table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--surface);
	font-weight: 600;
}

.pl-table thead th:first-child { position: sticky; left: 0; z-index: 2; }

.pl-table .pl-table__us { background: var(--accent-pale); font-weight: 700; }
.pl-table thead .pl-table__us { background: var(--pl-red); color: var(--pl-on-dark); }

.pl-table tbody .pl-table__price th,
.pl-table tbody .pl-table__price td { background: var(--pl-red); color: var(--pl-on-dark); font-weight: 700; border-bottom: 0; }

/* ---------- 8 · Banda de prueba ---------- */
.pl-band {
	padding-block: clamp(2rem, 5vw, 3rem);
	background: var(--pl-red);
	color: var(--pl-on-dark);
}

.pl-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.pl-band h2 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--pl-on-dark); }
.pl-band p { margin: 0; }

.pl-band__button {
	background: #fff;
	color: var(--pl-red);
	border-color: #fff;
	white-space: nowrap;
}

.pl-band__button:hover { background: var(--pl-dark); color: #fff; border-color: var(--pl-dark); }

/* ---------- 9 · Planes ---------- */
.pl-membership {
	max-width: 560px;
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--surface);
}

.pl-membership__top { padding: clamp(1.25rem, 4vw, 2rem); }

.pl-membership__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.pl-membership__title h3 { margin: 0; font-size: 1.3rem; }

.pl-includes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-includes > li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: .75rem;
	padding: .85rem 0;
	border-top: 1px solid var(--line);
	line-height: 1.5;
}

.pl-includes i { color: var(--accent); margin-top: .2rem; }

.pl-membership__foot {
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--pl-dark);
	color: var(--pl-on-dark);
	text-align: center;
}

.pl-seg {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem;
	padding: .25rem;
	margin-bottom: 1.25rem;
	background: var(--pl-dark-soft);
	border-radius: 999px;
}

.pl-seg__option {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pl-on-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pl-seg__option[aria-checked="true"] { background: #fff; color: var(--pl-dark); }

.pl-seg__tag {
	padding: .1rem .45rem;
	border-radius: 999px;
	background: var(--pl-red);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.pl-membership__foot :focus-visible { outline-color: #fff; }

.pl-price { min-height: 7.5rem; }
.pl-price__old { display: block; color: var(--pl-on-dark-soft); }
.pl-price__amount { margin: 0; font-size: 1.1rem; }
.pl-price__amount strong { font-size: 2.4rem; line-height: 1.1; }
.pl-price__line { margin: .25rem 0 0; color: var(--pl-on-dark-soft); }
.pl-price__gift { margin: .5rem 0 0; font-weight: 700; color: var(--pl-red-on-dark); }
.pl-price__small { margin: 1rem 0 0; font-size: .85rem; color: var(--pl-on-dark-soft); }

.pl-membership__cta { margin-top: 1.5rem; text-align: center; }
.pl-secure { margin: .85rem 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- 11 · Cierre ---------- */
.pl-close {
	padding-block: clamp(3rem, 8vw, 5rem);
	background: var(--pl-dark);
	color: var(--pl-on-dark);
	text-align: center;
}

.pl-close h2 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--pl-on-dark); }
.pl-close p { margin: 0 0 1.5rem; color: var(--pl-on-dark-soft); }
.pl-close .button--outline { color: #fff; border-color: #fff; }
.pl-close .button--outline:hover { background: #fff; color: var(--pl-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.pl-hero__inner,
	.pl-base { grid-template-columns: 1fr; }
	.pl-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pl-levels { grid-template-columns: 1fr; }
	.pl-class { grid-template-columns: 1fr; }
	.pl-tools { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.pl-lab { grid-template-columns: 1fr; }
	.pl-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1px; }
	.pl-dominaras__list { grid-template-columns: 1fr; }
	.pl-band__inner { flex-direction: column; align-items: flex-start; }
	.pl-actions .button { width: 100%; text-align: center; justify-content: center; }
	.pl-timeline__item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; }
	.pl-timeline__icon { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
	.pl-timeline__item:not(:last-child)::before { left: 1.2rem; top: 2.5rem; }
	.pl-acc__button { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.pl-index__card { transition: none; }
}