/*
 * WPSocial.es — diseño de la página de inicio.
 *
 * Se aplica a los bloques que están dentro del grupo con la clase «wps-landing»
 * (página «Inicio», plantilla «WPSocial – Landing»). Todo el contenido se edita
 * con el editor de bloques; esta hoja solo da el aspecto. Clases que usa:
 *
 *   wps-nav (cabecera)   wps-section (sección)   wps-hero   wps-gray   wps-dark
 *   wps-cards / wps-card (rejilla de tarjetas)    wps-plans / wps-plan
 *   wps-plan-featured    wps-callout   wps-faq   wps-cta   wps-footer
 *
 * Para añadir una tarjeta, un plan o una pregunta, duplica uno que ya exista:
 * la copia conserva sus clases y su aspecto.
 */

body.wps-landing-page {
	margin: 0;
	background: #fff;
}

.wps-landing {
	--wps-purple: #7b2fbe;
	--wps-purple-dark: #5c1e93;
	--wps-purple-light: #f3eaff;
	--wps-green: #16a34a;
	--wps-text: #1e1e2e;
	--wps-muted: #64748b;
	--wps-border: #e2e8f0;
	--wps-radius: 12px;
	--wps-shadow: 0 4px 24px rgba(0, 0, 0, .08);
	/* Ancho máximo del contenido: 1052 px, con 24 px de margen en móvil. */
	--wps-gutter: max(24px, calc((100% - 1052px) / 2));

	/* Sin fuentes de Google: no se envía la IP de los visitantes a terceros. */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wps-text);
	background: #fff;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

body .wps-landing.alignfull {
	margin-top: 0;
	margin-bottom: 0;
	max-width: none;
}

.wps-landing *,
.wps-landing *::before,
.wps-landing *::after {
	box-sizing: border-box;
}

/* Los temas separan los bloques con márgenes; aquí los pone cada sección. */
body .wps-landing :where(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-buttons, .wp-block-details) {
	margin-top: 0;
	margin-bottom: 0;
}

/* Temas clásicos: WordPress envuelve el interior de los grupos en
   .wp-block-group__inner-container; así no altera la maquetación. */
.wps-landing .wp-block-group__inner-container {
	display: contents;
}

/* ── Tipografía base ─────────────────────────────────────────────────────── */

body .wps-landing p,
body .wps-landing h1,
body .wps-landing h2,
body .wps-landing h3,
body .wps-landing ul,
body .wps-landing details {
	margin: 0;
	padding: 0;
	max-width: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

body .wps-landing p + p {
	margin-top: 1em;
}

body .wps-landing h1,
body .wps-landing h2,
body .wps-landing h3 {
	color: inherit;
	font-weight: 800;
	line-height: 1.2;
}

body .wps-landing h2 {
	font-size: 2em;
	margin-bottom: 12px;
}

body .wps-landing h3 {
	font-size: 1em;
	font-weight: 700;
	margin-bottom: 8px;
}

body .wps-landing a {
	color: var(--wps-purple);
	text-decoration: none;
}

body .wps-landing a:hover {
	text-decoration: underline;
}

body .wps-landing strong {
	font-weight: 700;
}

body .wps-landing ul {
	list-style: none;
}

body .wps-landing li {
	margin: 0;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

body .wps-landing .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

body .wps-landing .wp-block-button {
	margin: 0;
}

body .wps-landing .wp-block-buttons .wp-block-button .wp-block-button__link {
	display: inline-block;
	background: var(--wps-purple);
	color: #fff;
	border: 2px solid var(--wps-purple);
	border-radius: var(--wps-radius);
	padding: 12px 34px;
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(123, 47, 190, .35);
	transition: transform .15s, box-shadow .15s, background .15s;
}

body .wps-landing .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background: var(--wps-purple-dark);
	border-color: var(--wps-purple-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(123, 47, 190, .45);
}

body .wps-landing .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wps-purple);
	box-shadow: none;
}

body .wps-landing .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wps-purple-light);
	color: var(--wps-purple);
	border-color: var(--wps-purple);
	transform: none;
}

/* ── Columnas (como las del editor, sin depender de los estilos del tema) ── */

body .wps-landing .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
}

body .wps-landing .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 781px) {
	body .wps-landing .wp-block-columns {
		flex-wrap: wrap;
	}

	body .wps-landing .wp-block-column {
		flex-basis: 100%;
	}
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

body .wps-landing .wps-section {
	padding: 80px var(--wps-gutter);
	margin: 0;
	background: #fff;
}

body .wps-landing .wps-section > h2,
body .wps-landing .wps-section > .wp-block-group__inner-container > h2 {
	text-align: center;
}

body .wps-landing .wps-subtitle {
	text-align: center;
	color: var(--wps-muted);
	font-size: 1.05em;
	max-width: 720px;
	margin: 0 auto 52px;
}

body .wps-landing .wps-gray {
	background: #fafafa;
}

body .wps-landing [id] {
	scroll-margin-top: 80px;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

body .wps-landing .wps-nav {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 14px var(--wps-gutter);
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wps-border);
}

body .wps-landing .wps-logo {
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1.3;
}

body .wps-landing .wps-logo a {
	color: var(--wps-purple);
	text-decoration: none;
}

body .wps-landing .wps-nav ul {
	display: flex;
	gap: 24px;
	margin: 0 0 0 auto;
}

body .wps-landing .wps-nav li a {
	color: var(--wps-text);
	font-size: .9em;
	font-weight: 500;
}

body .wps-landing .wps-nav li a:hover {
	color: var(--wps-purple);
	text-decoration: none;
}

body .wps-landing .wps-nav .wp-block-buttons {
	flex-wrap: nowrap;
}

body .wps-landing .wps-nav .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 6px 18px;
	border-radius: 8px;
	font-size: .9em;
	font-weight: 500;
	box-shadow: none;
	white-space: nowrap;
}

body .wps-landing .wps-nav .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	transform: none;
}

/* ── Portada (hero) ──────────────────────────────────────────────────────── */

body .wps-landing .wps-hero {
	background: linear-gradient(135deg, #f9f5ff 0%, #ede9fe 50%, #fdf4ff 100%);
	padding-top: 100px;
	text-align: center;
}

body .wps-landing .wps-badge {
	display: table;
	margin: 0 auto 20px;
	padding: 4px 14px;
	border-radius: 99px;
	background: var(--wps-purple-light);
	color: var(--wps-purple);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body .wps-landing .wps-hero h1 {
	font-size: clamp(2em, 5vw, 3.25em);
	line-height: 1.15;
	max-width: 780px;
	margin: 0 auto 20px;
}

body .wps-landing h1 em,
body .wps-landing h2 em {
	font-style: normal;
	color: var(--wps-purple);
}

body .wps-landing .wps-lead {
	font-size: 1.15em;
	color: var(--wps-muted);
	max-width: 580px;
	margin: 0 auto 36px;
}

body .wps-landing .wps-hero .wp-block-buttons {
	justify-content: center;
}

body .wps-landing .wps-mockup {
	max-width: 820px;
	margin: 60px auto 0;
	padding: 16px;
	background: #fff;
	border-radius: var(--wps-radius);
	box-shadow: var(--wps-shadow), 0 0 0 1px var(--wps-border);
}

/* Los tres puntos de la ventana. */
body .wps-landing .wps-mockup::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: #f87171;
	box-shadow: 18px 0 0 #fbbf24, 36px 0 0 #34d399;
}

body .wps-landing .wps-mockup ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 36px;
	padding: 24px 0;
	font-size: .875em;
	font-weight: 500;
}

/* Cada paso es una pastilla; la flecha va en el hueco entre pastillas. */
body .wps-landing .wps-mockup li {
	position: relative;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--wps-purple-light);
	color: var(--wps-purple);
	white-space: nowrap;
}

body .wps-landing .wps-mockup li:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%);
	color: var(--wps-purple);
	font-size: 1.2em;
	line-height: 1;
}

/* ── Franja de compatibilidad ────────────────────────────────────────────── */

body .wps-landing .wps-strip {
	margin: 0;
	padding: 20px var(--wps-gutter);
	background: #f8fafc;
	border-top: 1px solid var(--wps-border);
	border-bottom: 1px solid var(--wps-border);
	color: var(--wps-muted);
	font-size: .9em;
	text-align: center;
}

body .wps-landing .wps-strip strong {
	color: var(--wps-text);
}

/* ── Sección oscura («El problema») ─────────────────────────────────────── */

body .wps-landing .wps-dark {
	background: #0f0f1a;
	color: #fff;
}

body .wps-landing .wps-dark .wp-block-columns {
	gap: 60px;
	margin: 0;
	align-items: center;
}

body .wps-landing .wps-dark h2 {
	text-align: left;
	font-size: 2em;
	margin: 16px 0;
}

body .wps-landing .wps-dark h2 em {
	color: #f87171;
}

body .wps-landing .wps-dark p {
	color: #94a3b8;
	line-height: 1.7;
}

body .wps-landing .wps-dark strong {
	color: #fff;
}

body .wps-landing .wps-eyebrow {
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body .wps-landing .wps-dark .wps-eyebrow {
	color: #a78bfa;
}

body .wps-landing .wps-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
}

body .wps-landing .wps-dark .wps-stats p {
	margin: 0;
	max-width: 130px;
	color: #64748b;
	font-size: .8em;
	line-height: 1.4;
}

body .wps-landing .wps-dark .wps-stats strong {
	display: block;
	color: #a78bfa;
	font-size: 2.5em;
	font-weight: 800;
	line-height: 1.2;
}

body .wps-landing .wps-versus {
	padding: 28px;
	background: #1e1e2e;
	border: 1px solid #2d2d4e;
	border-radius: var(--wps-radius);
}

body .wps-landing .wps-dark .wps-versus-bad-title,
body .wps-landing .wps-dark .wps-versus-good-title {
	margin: 0 0 8px;
	font-size: .75em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body .wps-landing .wps-dark .wps-versus-bad-title {
	color: #f87171;
}

body .wps-landing .wps-dark .wps-versus-good-title {
	color: #34d399;
	margin-top: 20px;
}

body .wps-landing .wps-dark .wps-versus-bad,
body .wps-landing .wps-dark .wps-versus-good {
	margin: 0;
	padding: 14px;
	border-radius: 8px;
	font-size: .875em;
	line-height: 1.6;
}

body .wps-landing .wps-dark .wps-versus-bad {
	background: #2d1515;
	color: #fca5a5;
}

body .wps-landing .wps-dark .wps-versus-good {
	background: #0d2a1e;
	color: #6ee7b7;
}

body .wps-landing .wps-dark .wps-versus-bad strong,
body .wps-landing .wps-dark .wps-versus-good strong {
	color: inherit;
}

body .wps-landing .wps-dark .wps-note {
	margin-top: 12px;
	color: #64748b;
	font-size: .8em;
	text-align: center;
}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

body .wps-landing .wps-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 24px;
	margin: 0;
}

body .wps-landing .wps-steps {
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

body .wps-landing #extensiones .wps-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

body .wps-landing .wps-card {
	margin: 0;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--wps-border);
	border-radius: var(--wps-radius);
	box-shadow: var(--wps-shadow);
}

body .wps-landing .wps-card p {
	color: var(--wps-muted);
	font-size: .875em;
}

body .wps-landing .wps-card p + p {
	margin-top: 8px;
}

body .wps-landing .wps-card .wps-icon {
	margin-bottom: 12px;
	color: inherit;
	font-size: 1.75em;
	line-height: 1.3;
}

body .wps-landing .wps-steps .wps-card {
	padding: 32px 20px;
	text-align: center;
	transition: transform .2s;
}

body .wps-landing .wps-steps .wps-card:hover {
	transform: translateY(-4px);
}

body .wps-landing .wps-steps .wps-icon {
	font-size: 2.5em;
}

body .wps-landing .wps-card .wps-more {
	font-size: .85em;
	font-weight: 600;
}

/* ── Precios ─────────────────────────────────────────────────────────────── */

body .wps-landing .wps-plans {
	gap: 24px;
	margin: 0 0 48px;
	align-items: stretch;
}

body .wps-landing .wps-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--wps-border);
	border-radius: var(--wps-radius);
	box-shadow: var(--wps-shadow);
}

body .wps-landing .wps-plan-featured {
	border: 2px solid var(--wps-purple);
	background: linear-gradient(135deg, #faf5ff, #fff);
}

body .wps-landing .wps-plan-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 14px;
	border-radius: 99px;
	background: var(--wps-purple);
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

body .wps-landing .wps-plan h3 {
	font-size: 1.15em;
	margin-bottom: 4px;
}

body .wps-landing .wps-plan-featured h3 {
	color: var(--wps-purple);
}

body .wps-landing .wps-price {
	margin: 8px 0 4px;
	color: var(--wps-muted);
	font-size: .9em;
}

body .wps-landing .wps-price strong {
	color: var(--wps-text);
	font-size: 2.5em;
	font-weight: 800;
	line-height: 1.2;
}

body .wps-landing .wps-plan-featured .wps-price strong {
	color: var(--wps-purple);
}

body .wps-landing .wps-plan-desc {
	margin: 0 0 20px;
	color: var(--wps-muted);
	font-size: .875em;
}

body .wps-landing .wps-plan p + p {
	margin-top: 0;
}

body .wps-landing .wps-plan ul {
	margin: 0 0 28px;
}

body .wps-landing .wps-plan li {
	padding: 7px 0 7px 24px;
	border-bottom: 1px solid var(--wps-border);
	font-size: .875em;
	position: relative;
}

body .wps-landing .wps-plan li:last-child {
	border-bottom: 0;
}

body .wps-landing .wps-plan li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	color: var(--wps-green);
	font-weight: 700;
}

/* Los botones, siempre abajo y a todo el ancho. */
body .wps-landing .wps-plan .wp-block-buttons {
	margin-top: auto;
}

body .wps-landing .wps-plan .wp-block-button {
	width: 100%;
}

body .wps-landing .wps-plan .wp-block-buttons .wp-block-button .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	text-align: center;
	background: var(--wps-border);
	border-color: var(--wps-border);
	color: var(--wps-text);
	box-shadow: none;
}

body .wps-landing .wps-plan .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background: #d1d5db;
	border-color: #d1d5db;
	transform: none;
}

body .wps-landing .wps-plan-featured .wp-block-buttons .wp-block-button .wp-block-button__link {
	background: var(--wps-purple);
	border-color: var(--wps-purple);
	color: #fff;
	box-shadow: 0 4px 12px rgba(123, 47, 190, .3);
}

body .wps-landing .wps-plan-featured .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background: var(--wps-purple-dark);
	border-color: var(--wps-purple-dark);
}

body .wps-landing .wps-callout {
	max-width: 680px;
	margin: 0 auto;
	padding: 24px 28px;
	background: #f0fff4;
	border: 1px solid #bbf7d0;
	border-radius: var(--wps-radius);
}

body .wps-landing .wps-callout h3 {
	color: #15803d;
	font-size: 1.05em;
}

body .wps-landing .wps-callout p {
	color: #166534;
	font-size: .9em;
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */

body .wps-landing .wps-faq h2 {
	margin-bottom: 48px;
}

body .wps-landing .wps-faq details {
	max-width: 720px;
	margin: 0 auto 12px;
	border: 1px solid var(--wps-border);
	border-radius: var(--wps-radius);
	overflow: hidden;
	background: #fff;
}

body .wps-landing .wps-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

body .wps-landing .wps-faq summary::-webkit-details-marker {
	display: none;
}

body .wps-landing .wps-faq summary::after {
	content: "+";
	color: var(--wps-purple);
	font-size: 1.2em;
	line-height: 1;
}

body .wps-landing .wps-faq details[open] summary::after {
	content: "−";
}

body .wps-landing .wps-faq details p {
	padding: 0 20px 18px;
	color: var(--wps-muted);
	font-size: .9em;
}

body .wps-landing .wps-faq details p + p {
	margin-top: 0;
}

/* ── Llamada final ───────────────────────────────────────────────────────── */

body .wps-landing .wps-cta {
	background: linear-gradient(135deg, var(--wps-purple), var(--wps-purple-dark));
	color: #fff;
	text-align: center;
}

body .wps-landing .wps-cta p {
	margin-bottom: 36px;
	font-size: 1.05em;
	opacity: .85;
}

body .wps-landing .wps-cta .wp-block-buttons {
	justify-content: center;
}

body .wps-landing .wps-cta .wp-block-buttons .wp-block-button .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--wps-purple);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

body .wps-landing .wps-cta .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wps-purple-dark);
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

body .wps-landing .wps-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 40px var(--wps-gutter);
	background: #0f0f1a;
	color: #94a3b8;
	font-size: .85em;
}

body .wps-landing .wps-footer .wps-logo {
	font-size: 1em;
}

body .wps-landing .wps-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

body .wps-landing .wps-footer a {
	color: #94a3b8;
}

body .wps-landing .wps-footer a:hover {
	color: #fff;
}

body .wps-landing .wps-footer .wps-logo a {
	color: var(--wps-purple);
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	body .wps-landing .wps-dark .wp-block-columns {
		gap: 40px;
	}
}

@media (max-width: 640px) {
	body .wps-landing .wps-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body .wps-landing .wps-hero {
		padding-top: 64px;
	}

	body .wps-landing .wps-hero .wp-block-buttons .wp-block-button .wp-block-button__link {
		padding-left: 22px;
		padding-right: 22px;
	}

	body .wps-landing .wps-nav ul {
		display: none;
	}

	body .wps-landing .wps-mockup ul {
		flex-direction: column;
		gap: 30px;
	}

	body .wps-landing .wps-mockup li:not(:last-child)::after {
		content: "↓";
		top: auto;
		right: auto;
		bottom: -25px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ── Editor de bloques ───────────────────────────────────────────────────── */

.editor-styles-wrapper .wps-landing .wps-nav {
	position: relative;
	top: 0;
}