/* =========================================================================
   Fehno Landing — frontend + editor styles
   Section-level rules (.f-*) are intentionally unscoped so they render
   in both the live page and the editor iframe.
   Global body overrides are scoped to body.fehno-landing (frontend only).
   ========================================================================= */

/* ============ CSS Variables ============ */
:root {
	--f-purple:       #502878;
	--f-purple-2:     #7a4fb0;
	--f-purple-soft:  #f1ebf7;
	--f-dark:         #23194b;
	--f-dark-2:       #1a1230;
	--f-paper:        #f6f3ec;
	--f-paper-2:      #efeadd;
	--f-ink:          #1a1a1a;
	--f-highlight:    #fde68a;
	--f-red:          #c0392b;
	--f-green:        #1f7a3f;
	--f-container:        1240px;
	--f-container-narrow: 780px;
	--f-container-wide:   1360px;

	/*
	 * Typography gap scale — use these everywhere instead of raw px values
	 * so spacing is intentional and consistent across all 12 sections.
	 *
	 * xs  eyebrow → heading (tight, they're a unit)
	 * sm  h3 bottom / lead bottom / body → body
	 * md  h1/h2 bottom → first paragraph (primary heading gap)
	 * lg  body → CTA / intro → section grid
	 * xl  reserved for major layout separations
	 */
	--f-gap-xs: clamp(12px, 0.9vw, 16px);
	--f-gap-sm: clamp(24px, 2vw, 34px);
	--f-gap-md: clamp(44px, 3.8vw, 60px);
	--f-gap-lg: clamp(52px, 5vw, 76px);
	--f-gap-xl: clamp(68px, 7vw, 104px);
}

/* ============ Section framing ============ */
.f-section {
	padding: clamp(56px, 7vw, 120px) 0;
	position: relative;
}
.f-section-inner {
	max-width: var(--f-container);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
}
.f-section-narrow .f-section-inner { max-width: var(--f-container-narrow); }
.f-section-wide   .f-section-inner { max-width: var(--f-container-wide); }

.f-dark   { background: var(--f-dark);   color: #f3eefb; }
.f-dark2  { background: var(--f-dark-2); color: #f3eefb; }
.f-paper  { background: var(--f-paper);  color: var(--f-ink); }
.f-cream  { background: var(--f-paper-2); color: var(--f-ink); }
.f-purple { background: var(--f-purple); color: #fff; }

/* ============ Typography ============ */
.f-section h1,
.f-section h2,
.f-section h3,
.f-section h4 {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	/* margin intentionally omitted — .f-h1/.f-h2/.f-h3 classes handle per-level spacing */
}

.f-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--f-purple);
	margin: 0 0 var(--f-gap-xs);   /* tight — eyebrow sits close to its heading */
}
.f-dark  .f-eyebrow,
.f-dark2 .f-eyebrow { color: var(--f-highlight); }
.f-purple .f-eyebrow { color: #fff; opacity: 0.85; }

/* Heading bottom margins use the gap scale so spacing is proportional
   to the heading's visual weight, not a fixed pixel value. */
.f-h1 { font-size: clamp(40px, 5.8vw, 78px); margin: 0 0 var(--f-gap-md); }
.f-h2 { font-size: clamp(32px, 4.5vw, 56px); margin: 0 0 var(--f-gap-md); }
.f-h3 { font-size: clamp(22px, 2.5vw, 28px); margin: 0 0 var(--f-gap-sm); }

.f-highlight { color: var(--f-purple); font-style: normal; }
.f-dark  .f-highlight,
.f-dark2 .f-highlight,
.f-purple .f-highlight { color: var(--f-highlight); }

.f-lead {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(17px, 1.2vw, 20px);
	line-height: 1.6;
	opacity: 0.88;
	margin: 0 0 var(--f-gap-sm);
	max-width: 62ch;
}
.f-body {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 var(--f-gap-sm);
}
.f-micro {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.7;
}

.f-divider {
	height: 2px;
	background: rgba(80, 40, 120, 0.2);
	max-width: 60px;
	margin: 0 0 var(--f-gap-md);
	border: 0;
	border-radius: 2px;
}
.f-dark  .f-divider,
.f-dark2 .f-divider,
.f-purple .f-divider { background: rgba(255, 255, 255, 0.35); }

/* ============ CTA button ============ */
.f-cta,
.f-cta:visited {
	display: inline-block;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.005em;
	padding: 18px 30px;
	border-radius: 8px;
	background: var(--f-purple);
	color: #fff;
	text-decoration: none;
	border: 2px solid var(--f-purple);
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.f-cta:hover {
	transform: translateY(2px);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
	color: #fff;
}
.f-cta-light { background: #fff; color: var(--f-purple); border-color: #fff; }
.f-cta-light:hover { color: var(--f-purple); }
.f-cta-block { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* Wrapper paragraph that spaces the CTA away from the copy above it */
.f-cta-wrap {
	margin: var(--f-gap-lg) 0 0;
	line-height: 1;   /* prevent the paragraph from adding unwanted line-height gap */
}

/* ============ Hero ============ */
.f-hero {
	padding: clamp(72px, 9vw, 140px) 0 clamp(56px, 7vw, 110px);
}
.f-hero-grid {
	max-width: var(--f-container-wide);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.f-hero-media img {
	display: block;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}
.f-hero-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-family: "Outfit", sans-serif;
	font-size: 14px;
	letter-spacing: 0.01em;
	opacity: 0.9;
}
.f-hero-social strong { color: var(--f-highlight); font-weight: 700; }

@media (max-width: 900px) {
	.f-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.f-hero-media { order: -1; }
	.f-hero-media img { max-width: 280px; }
}

/* ============ Pain bullets ============ */
.f-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, 1fr);
}
.f-bullets li {
	padding: 18px 20px 18px 46px;
	border-left: 3px solid var(--f-purple);
	background: rgba(80, 40, 120, 0.05);
	font-size: 17px;
	line-height: 1.5;
	border-radius: 0 8px 8px 0;
	position: relative;
	font-family: "Inter", system-ui, sans-serif;
}
.f-bullets li::before {
	content: "—";
	position: absolute;
	left: 20px;
	top: 18px;
	color: var(--f-purple);
	font-weight: 700;
}
.f-dark  .f-bullets li,
.f-dark2 .f-bullets li {
	background: rgba(255, 255, 255, 0.04);
	border-left-color: var(--f-purple-2);
	color: #f3eefb;
}
.f-dark  .f-bullets li::before,
.f-dark2 .f-bullets li::before { color: var(--f-purple-2); }

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

/* ============ Check / cross lists ============ */
.f-check, .f-cross {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}
.f-check li,
.f-cross li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.5;
	font-family: "Inter", system-ui, sans-serif;
}
.f-check li::before,
.f-cross li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-top: 2px;
}
.f-check li::before {
	background: var(--f-green)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
		center / 14px no-repeat;
}
.f-cross li::before {
	background: var(--f-red)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>")
		center / 14px no-repeat;
}

/* ============ Inside cards ============ */
.f-inside {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 720px) {
	.f-inside { grid-template-columns: 1fr; }
}
.f-inside-card {
	border: 1.5px solid rgba(80, 40, 120, 0.22);
	background: #fff;
	padding: 28px 26px;
	border-radius: 12px;
	position: relative;
}
.f-dark  .f-inside-card,
.f-dark2 .f-inside-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
}
.f-inside-card .f-num {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--f-purple);
	letter-spacing: 0.16em;
	margin-bottom: 6px;
	display: block;
}
.f-dark  .f-inside-card .f-num,
.f-dark2 .f-inside-card .f-num { color: var(--f-highlight); }
.f-inside-card h3 { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 26px); }
.f-inside-card p  { margin: 0; font-size: 16px; line-height: 1.55; opacity: 0.85; font-family: "Inter", system-ui, sans-serif; }

/* ============ Benefits grid ============ */
.f-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 960px) { .f-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .f-benefits { grid-template-columns: 1fr; } }

.f-benefit {
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	padding: 24px 22px;
	border-radius: 12px;
}
.f-paper .f-benefit,
.f-cream .f-benefit {
	background: #fff;
	border-color: rgba(80, 40, 120, 0.18);
}
.f-benefit .f-num {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--f-purple-2);
	letter-spacing: 0.14em;
	margin-bottom: 10px;
}
.f-paper .f-benefit .f-num,
.f-cream .f-benefit .f-num { color: var(--f-purple); }
.f-benefit h3 { margin: 0 0 6px; font-size: 20px; }
.f-benefit p  { margin: 0; font-size: 15px; opacity: 0.85; line-height: 1.5; font-family: "Inter", system-ui, sans-serif; }

/* ============ For / Not-for ============ */
.f-forcols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	margin-top: var(--f-gap-lg);
}
.f-forcols h3 { font-size: 22px; margin: 0 0 18px; }
.f-forcols .f-yes { color: #8be2a8; }
.f-forcols .f-no  { color: #ffa7a7; }
@media (max-width: 720px) { .f-forcols { grid-template-columns: 1fr; } }

/* ============ Testimonials ============ */
.f-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 900px) { .f-testimonials { grid-template-columns: 1fr; } }

.f-testimonial {
	background: #fff;
	border: 1.5px solid rgba(80, 40, 120, 0.18);
	padding: 26px 24px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.f-testimonial blockquote {
	margin: 0;
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--f-ink);
	flex: 1;
}
.f-testimonial .f-author {
	font-family: "Outfit", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--f-purple);
	letter-spacing: 0.04em;
}

/* ============ Belief quote ============ */
.f-belief { text-align: center; }
.f-belief .f-section-inner { max-width: 920px; }
.f-belief h2 { font-size: clamp(30px, 4.5vw, 58px); line-height: 1.05; }

/* ============ Author ============ */
.f-author-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 36px;
	align-items: center;
}
.f-author-row img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--f-purple);
}
@media (max-width: 700px) {
	.f-author-row { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 22px; }
	.f-author-row img { width: 128px; height: 128px; }
}

/* ============ Offer ============ */
.f-offer { text-align: center; }
.f-offer-head { max-width: 640px; margin: 0 auto 36px; }
.f-offer-card {
	background: #fff;
	color: var(--f-ink);
	border-radius: 16px;
	padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 38px);
	box-shadow: 0 24px 70px rgba(35, 25, 75, 0.4);
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}
.f-offer-card img {
	display: block;
	margin: 0 auto 20px;
	max-width: 200px;
	height: auto;
	filter: drop-shadow(0 14px 28px rgba(35, 25, 75, 0.28));
}
.f-offer-card h2 { text-align: center; margin: 0 0 10px; font-size: clamp(26px, 2.4vw, 34px); }
.f-offer-sub   { text-align: center; font-size: 15px; opacity: 0.75; margin: 0 0 22px; font-family: "Inter", system-ui, sans-serif; }

.f-price {
	text-align: center;
	margin: 22px 0 6px;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	display: flex;
	align-items: baseline;
	gap: 14px;
	justify-content: center;
}
.f-was { text-decoration: line-through; opacity: 0.45; font-size: 24px; font-weight: 600; }
.f-now { font-size: 64px; color: var(--f-purple); line-height: 1; letter-spacing: -0.03em; }
.f-price-foot {
	text-align: center;
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 20px;
}
.f-offer-card .f-check { margin: 20px 0 4px; }

/* ============ FAQ ============ */
.f-faq {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 48px;
	margin-top: var(--f-gap-md);
}
@media (max-width: 820px) { .f-faq { grid-template-columns: 1fr; } }

.f-faq details {
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
	padding: 20px 0;
}
.f-dark  .f-faq details,
.f-dark2 .f-faq details { border-bottom-color: rgba(255, 255, 255, 0.12); }

.f-faq summary {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; font-size: 24px; font-weight: 700; opacity: 0.6; }
.f-faq details[open] summary::after { content: "−"; }
.f-faq details p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; opacity: 0.85; font-family: "Inter", system-ui, sans-serif; }

/* ============ Final CTA ============ */
.f-final {
	text-align: center;
	padding: clamp(80px, 9vw, 140px) 0;
}
.f-final .f-section-inner { max-width: 780px; }
.f-final h2 { font-size: clamp(36px, 5.5vw, 68px); margin: 0 0 var(--f-gap-md); }
.f-final .f-lead { margin: 0 auto var(--f-gap-lg); max-width: 560px; }

/* ============ Promise two-column layout ============ */
.f-promise .f-section-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 72px);
	align-items: center;
}
@media (max-width: 820px) {
	.f-promise .f-section-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============ Center helpers ============ */
.f-center { text-align: center; }
.f-center .f-lead    { margin-left: auto; margin-right: auto; }
.f-center .f-divider { margin-left: auto; margin-right: auto; }
.f-center .f-bullets { text-align: left; }

/* ============ Footer ============ */
.f-footer {
	text-align: center;
	padding: 30px;
	background: #0f0a1f;
	color: #9a8fb5;
	font-family: "Outfit", sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ============ Anchor offset ============ */
.f-section[id] { scroll-margin-top: 24px; }

/* =========================================================================
   Homepage blocks — spacious, minimal personal brand layout
   Shared .f-* primitives apply; these add homepage-specific overrides.
   ========================================================================= */

/* ---- HP Hero: centered, generous vertical rhythm ---- */
.f-hp-hero {
	padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.f-hp-hero-inner {
	max-width: 720px;
	text-align: center;
}
.f-hp-hero-inner .f-eyebrow { justify-content: center; }
.f-hp-hero-inner .f-lead    { margin-left: auto; margin-right: auto; max-width: 52ch; }
.f-hp-hero-inner .f-cta-wrap { text-align: center; }

/* ---- HP About: 2-col photo + copy, collapses on mobile ---- */
.f-hp-about {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-about-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: flex-start;
}
.f-hp-about-photo img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--f-purple);
	display: block;
}
.f-hp-about-copy .f-body { max-width: 64ch; }
@media (max-width: 700px) {
	.f-hp-about-row {
		grid-template-columns: 1fr;
		gap: 28px;
		text-align: center;
		justify-items: center;
	}
	.f-hp-about-photo img { width: 160px; height: 160px; }
}

/* ---- HP Problem: dark, large spaced bullets ---- */
.f-hp-problem {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-bullets {
	list-style: none;
	padding: 0;
	margin: var(--f-gap-lg) 0 0;
	display: grid;
	gap: clamp(16px, 2vw, 28px);
	max-width: 640px;
}
.f-hp-bullets li {
	font-family: "Outfit", sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 600;
	line-height: 1.3;
	color: #f3eefb;
	padding-left: 28px;
	position: relative;
}
.f-hp-bullets li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--f-highlight);
	font-weight: 700;
}

/* ---- HP Product: 2-col cover + copy, cream background ---- */
.f-hp-product {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-product-row {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
.f-hp-product-cover img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	filter: drop-shadow(0 28px 48px rgba(35, 25, 75, 0.3));
}
@media (max-width: 760px) {
	.f-hp-product-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.f-hp-product-cover { text-align: center; }
	.f-hp-product-cover img { max-width: 200px; margin: 0 auto; }
}

/* ---- HP Outcome: dark, large check-style list ---- */
.f-hp-outcome {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-outcomes {
	list-style: none;
	padding: 0;
	margin: var(--f-gap-lg) 0 0;
	display: grid;
	gap: clamp(14px, 1.8vw, 24px);
	max-width: 600px;
}
.f-hp-outcomes li {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	color: #f3eefb;
	padding-left: 32px;
	position: relative;
}
.f-hp-outcomes li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--f-highlight);
	font-weight: 700;
	font-family: "Outfit", sans-serif;
}

/* ---- HP Social: centered, link pill buttons ---- */
.f-hp-social {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: var(--f-gap-lg);
}
.f-hp-link,
.f-hp-link:visited {
	display: inline-block;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	padding: 14px 28px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.08);
	color: #f3eefb;
	text-decoration: none;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.f-hp-link:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* ---- HP Final CTA: dark, centered, spacious ---- */
.f-hp-cta {
	padding: clamp(100px, 12vw, 180px) 0;
}
.f-hp-cta .f-section-inner { max-width: 680px; }

/* =========================================================================
   Homepage v2 — rebuilt as a personal-brand website (not a funnel)
   Sections: hp-hero-v2, hp-about-v2, hp-products, hp-faq, hp-contact, hp-footer
   ========================================================================= */

/* ---- Ghost CTA variant (used as secondary in hero) ---- */
.f-cta-ghost,
.f-cta-ghost:visited {
	background: transparent;
	color: #f3eefb;
	border-color: rgba(243, 238, 251, 0.35);
}
.f-cta-ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(243, 238, 251, 0.65);
	color: #fff;
}
.f-paper .f-cta-ghost,
.f-cream .f-cta-ghost,
.f-paper .f-cta-ghost:visited,
.f-cream .f-cta-ghost:visited {
	color: var(--f-ink);
	border-color: rgba(26, 26, 26, 0.25);
}
.f-paper .f-cta-ghost:hover,
.f-cream .f-cta-ghost:hover {
	background: rgba(26, 26, 26, 0.06);
	border-color: rgba(26, 26, 26, 0.45);
	color: var(--f-ink);
}

/* ---- HP Hero v2: centered brand identity with photo ---- */
.f-hp-hero-v2 {
	padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 128px);
}
.f-hp-hero-v2-inner {
	max-width: 720px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.f-hp-hero-v2-photo {
	width: 128px;
	height: 128px;
	margin: 0 0 var(--f-gap-md);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	border: 2px solid rgba(255, 255, 255, 0.12);
}
.f-hp-hero-v2-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.f-hp-hero-v2-photo-placeholder {
	background: linear-gradient(135deg, var(--f-purple) 0%, var(--f-purple-2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 56px;
	color: #fff;
}
.f-hp-hero-v2-inner .f-eyebrow { justify-content: center; }
.f-hp-hero-v2-inner .f-h1 {
	font-size: clamp(36px, 5.2vw, 68px);
	margin: 0 0 var(--f-gap-sm);
}
.f-hp-hero-v2-inner .f-lead {
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--f-gap-md);
}
.f-hp-hero-v2-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: flex-start;   /* "Sobre mí" top-aligns with the app button */
	margin-top: var(--f-gap-sm);
}

/* ---- App CTA: ghost button + subtle microcopy beneath (app only) ---- */
.f-hp-app-cta-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;   /* spacing controlled by the note's margin-top below */
}
.f-hp-app-cta-micro {
	font-family: "Inter", sans-serif;
	font-size: 11.5px;
	font-weight: 400;   /* never bold */
	color: rgba(243, 238, 251, 0.4);
	text-align: center;
	line-height: 1.25;
	max-width: 22ch;   /* ≈ app button width, keeps the note tucked under it */
	margin-top: 5px;   /* subtle, attached — does not grow hero height */
}

/* ---- HP Hero v2: social proof / follower stats row ---- */
.f-hp-hero-v2-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: var(--f-gap-md) 0 var(--f-gap-sm);
}
.f-hp-hero-v2-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 22px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	min-width: 90px;
	transition: background 0.18s;
}
.f-hp-hero-v2-stat--total {
	background: rgba(139, 92, 246, 0.18);
	border-color: rgba(139, 92, 246, 0.30);
}
.f-hp-hero-v2-stat-count {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 3vw, 28px);
	color: #fff;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.f-hp-hero-v2-stat-label {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(243, 238, 251, 0.50);
	margin-top: 5px;
}
@media (max-width: 540px) {
	.f-hp-hero-v2-photo { width: 104px; height: 104px; }
	.f-hp-hero-v2-ctas { flex-direction: column; align-items: stretch; }
	.f-hp-hero-v2-ctas .f-cta { width: 100%; box-sizing: border-box; text-align: center; }
	.f-hp-app-cta-group { width: 100%; }
	.f-hp-app-cta-micro { max-width: none; }
	.f-hp-hero-v2-stats { gap: 8px; }
	.f-hp-hero-v2-stat  { padding: 12px 16px; min-width: 76px; }
	.f-hp-hero-v2-stat-count { font-size: 20px; }
}
/* 4-card layout: force 2×2 grid on narrow phones so cards never orphan 3+1 */
@media (max-width: 400px) {
	.f-hp-hero-v2-stat {
		flex: 0 0 calc(50% - 4px);
		min-width: 0;
	}
}

/* ---- HP About v2: single-column, generous line length ---- */
.f-hp-about-v2 {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-about-v2-inner {
	max-width: 720px;
}
.f-hp-about-v2-inner .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
}
.f-hp-about-v2-body {
	display: flex;
	flex-direction: column;
	gap: var(--f-gap-sm);
	margin-top: var(--f-gap-md);
}
.f-hp-about-v2-body .f-body {
	margin: 0;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	max-width: 62ch;
}

/* ---- HP Products / Resources: hub list ---- */
.f-hp-products {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-products-inner {
	max-width: 860px;
}
.f-hp-products-header {
	margin-bottom: var(--f-gap-lg);
}
.f-hp-products-header .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: 0;
}
.f-hp-products-lead {
	color: rgba(26, 26, 26, 0.65);
	font-size: 16px;
	margin: 10px 0 0;
}

/* Hub list — vertical rows with thin separators */
.f-hp-hub-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.f-hp-hub-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "body meta";
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding: clamp(28px, 3.5vw, 44px) 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.1);
	transition: background 0.15s ease;
}
.f-hp-hub-item--has-image {
	grid-template-columns: 88px 1fr auto;
	grid-template-areas: "thumb body meta";
}

/* Thumbnail (optional) — portrait ratio for book covers */
.f-hp-hub-thumb {
	grid-area: thumb;
	width: 88px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--f-purple-soft);
	box-shadow: 0 6px 20px rgba(35, 25, 75, 0.15);
}
.f-hp-hub-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body: tag + title + description */
.f-hp-hub-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.f-hp-hub-tag {
	display: inline-block;
	align-self: flex-start;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--f-purple);
	background: var(--f-purple-soft);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 4px;
}
.f-hp-hub-title {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--f-ink);
	margin: 0;
}
.f-hp-hub-desc {
	color: rgba(26, 26, 26, 0.68);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}

/* Meta: price + CTA — right-aligned column */
.f-hp-hub-meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}
.f-hp-hub-price {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: -0.02em;
	color: var(--f-ink);
}
.f-hp-hub-cta,
.f-hp-hub-cta:visited {
	display: inline-flex;
	align-items: center;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--f-purple);
	text-decoration: none;
	background: var(--f-purple-soft);
	padding: 10px 20px;
	border-radius: 100px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.f-hp-hub-cta:hover {
	background: var(--f-purple);
	color: #fff;
}
/* "Próximamente" — soft muted pill, no hover effect */
.f-hp-hub-cta[href="#recursos"],
.f-hp-hub-cta--upcoming {
	background: rgba(80, 40, 120, 0.07);
	color: rgba(80, 40, 120, 0.55);
	cursor: default;
	pointer-events: none;
	border: 1.5px solid rgba(80, 40, 120, 0.15);
}

/* Mobile: stack body above meta */
@media (max-width: 640px) {
	.f-hp-hub-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"meta";
		gap: 16px;
	}
	.f-hp-hub-item--has-image {
		grid-template-columns: 88px 1fr;
		grid-template-areas:
			"thumb body"
			"meta  meta";
		align-items: flex-start;
	}
	.f-hp-hub-thumb { width: 72px; height: 98px; }
	.f-hp-hub-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ---- HP FAQ: clean accordion on cream ---- */
.f-hp-faq {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-faq-inner {
	max-width: 780px;
}
.f-hp-faq-header {
	margin-bottom: var(--f-gap-lg);
}
.f-hp-faq-header .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: 0;
}
.f-hp-faq-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.f-hp-faq-item {
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.f-hp-faq-item details { padding: 0; }
.f-hp-faq-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(18px, 2vw, 24px) 4px;
	cursor: pointer;
	user-select: none;
}
.f-hp-faq-item summary::-webkit-details-marker { display: none; }
.f-hp-faq-q {
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.35;
	color: var(--f-ink);
}
.f-hp-faq-icon {
	font-family: "Outfit", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--f-purple);
	flex-shrink: 0;
	transition: transform 0.2s ease;
	width: 28px;
	text-align: center;
}
.f-hp-faq-item details[open] .f-hp-faq-icon {
	transform: rotate(45deg);
}
.f-hp-faq-a {
	padding: 0 4px clamp(20px, 2vw, 28px);
	max-width: 64ch;
}
.f-hp-faq-a p {
	margin: 0;
	color: rgba(26, 26, 26, 0.78);
	font-size: 16px;
	line-height: 1.65;
}

/* ---- HP Contact: dark, minimal, email + link list ---- */
.f-hp-contact {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-contact-inner {
	max-width: 680px;
	text-align: center;
}
.f-hp-contact-inner .f-eyebrow { justify-content: center; }
.f-hp-contact-inner .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: var(--f-gap-sm);
}
.f-hp-contact-inner .f-lead {
	max-width: 48ch;
	margin: 0 auto var(--f-gap-md);
}
.f-hp-contact-email {
	margin: 0 0 var(--f-gap-md);
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: -0.01em;
}
.f-hp-contact-email a,
.f-hp-contact-email a:visited {
	color: var(--f-highlight);
	text-decoration: none;
	border-bottom: 2px solid rgba(253, 230, 138, 0.35);
	padding-bottom: 3px;
	transition: border-color 0.15s ease;
}
.f-hp-contact-email a:hover {
	border-bottom-color: var(--f-highlight);
}
.f-hp-contact-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: center;
}
.f-hp-contact-links a,
.f-hp-contact-links a:visited {
	color: rgba(243, 238, 251, 0.75);
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}
.f-hp-contact-links a:hover {
	color: #fff;
}

/* ---- HP Footer: real website footer ---- */
.f-hp-footer {
	padding: clamp(56px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}
.f-hp-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: flex-start;
	padding-bottom: clamp(32px, 4vw, 48px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.f-hp-footer-brand { max-width: 360px; }
.f-hp-footer-logo {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 10px;
}
.f-hp-footer-tagline {
	color: rgba(243, 238, 251, 0.6);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}
.f-hp-footer-col-title {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(243, 238, 251, 0.45);
	margin: 0 0 16px;
}
.f-hp-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.f-hp-footer-col a,
.f-hp-footer-col a:visited {
	color: rgba(243, 238, 251, 0.75);
	font-family: "Inter", sans-serif;
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.15s ease;
}
.f-hp-footer-col a:hover { color: #fff; }
.f-hp-footer-bottom {
	padding-top: clamp(24px, 3vw, 32px);
}
.f-hp-footer-bottom p {
	color: rgba(243, 238, 251, 0.45);
	font-size: 13px;
	margin: 0;
	letter-spacing: 0.01em;
}
@media (max-width: 720px) {
	.f-hp-footer-grid {
		grid-template-columns: 1fr;
		gap: clamp(28px, 4vw, 40px);
	}
}

/* =========================================================================
   Homepage body override (scoped to body.fehno-home)
   Strips theme chrome on the homepage just like the landing.
   ========================================================================= */
body.fehno-home {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--f-ink);
	background: var(--f-paper);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}
body.fehno-home .wp-block-post-title,
body.fehno-home .wp-block-template-part { display: none; }
body.fehno-home main,
body.fehno-home .wp-site-blocks,
body.fehno-home .entry-content,
body.fehno-home .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/*
 * The theme template wraps post-content in a group block with
 *   style="padding-top: var(--wp--preset--spacing--60)"  (= up to 70px)
 * That is the visible beige gap above the hero. Zero it out on the homepage.
 * Targeting only direct children of <main> keeps nested groups untouched.
 */
body.fehno-home main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}
/*
 * Override WP's is-layout-constrained rule which boxes every direct child
 * to --wp--style--global--content-size (645px on this theme). The rule uses
 * :where() (zero specificity) so a single class selector wins cleanly.
 * The !important on margins mirrors the source rule's own !important.
 */
body.fehno-home .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-home .wp-block-post-content  > [class*="wp-block-fehno-"] {
	max-width: none   !important;
	width:     100%   !important;
	box-sizing: border-box;
	margin-left:        0 !important;
	margin-right:       0 !important;
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/* =========================================================================
   Frontend-only overrides (scoped to body.fehno-landing)
   These never inject into the editor iframe (stripped by block_editor_settings_all).
   ========================================================================= */

/* Global body reset */
body.fehno-landing {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--f-ink);
	background: var(--f-paper);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Hide theme chrome so the landing owns the full viewport */
body.fehno-landing .wp-block-post-title,
body.fehno-landing .wp-block-template-part { display: none; }

body.fehno-landing main,
body.fehno-landing .wp-site-blocks,
body.fehno-landing .entry-content,
body.fehno-landing .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Same two-layer gap as the homepage:
 *   main has inline margin-top: var(--wp--preset--spacing--60)  ← zeroed above
 *   main > .wp-block-group has inline padding-top: the same value ← zeroed here
 */
body.fehno-landing main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}

/* =========================================================================
   Legal pages  —  body.fehno-legal
   Applied to: /aviso-legal/ /politica-de-privacidad/ /cookies/
               /terminos-y-condiciones/

   WHY this block exists here (and not in a separate file):
   - The stylesheet is only enqueued when fehno_blocks_page_type() === 'legal'
   - All rules are scoped to body.fehno-legal so nothing else is affected
   ========================================================================= */

/* ── Minimal legal header (replaces TT5 template-part entirely) ─────── */

.fehno-legal-topbar {
	display: flex;
	align-items: center;
	padding: 22px clamp(20px, 4vw, 48px);
	background: #1a1230;
	border-bottom: 1px solid rgba(243, 238, 251, 0.08);
}

.fehno-legal-logo {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.05em;
	color: #f3eefb !important;
	text-decoration: none !important;
}
.fehno-legal-logo:hover {
	color: rgba(243, 238, 251, 0.72) !important;
}

/* ── Canvas ─────────────────────────────────────────────────────────── */

body.fehno-legal,
body.fehno-legal .wp-site-blocks {
	background: #1a1230 !important;
	color: #f3eefb;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ── Main / Content ──────────────────────────────────────────────────── */

/* Override the inline style="margin-top:..." WP puts on <main> */
body.fehno-legal main.wp-block-group {
	margin-top: 0 !important;
}

/* Zero the inner wrapper's inline padding-top/bottom (TT5 template sets these inline) */
body.fehno-legal main > .wp-block-group {
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}

/* ── Page title ── */
body.fehno-legal .wp-block-post-title,
body.fehno-legal .entry-title {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-size: clamp(28px, 4vw, 48px) !important;
	font-weight: 800 !important;
	color: #f3eefb !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em;
	max-width: 820px !important;
	width: 100%;
	margin-left:  auto !important;
	margin-right: auto !important;
	padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px) clamp(12px, 1.5vw, 20px) !important;
	box-sizing: border-box;
}

/* ── Content column ── */
body.fehno-legal .wp-block-post-content,
body.fehno-legal .entry-content {
	max-width: 820px !important;
	width: 100%;
	margin-left:  auto !important;
	margin-right: auto !important;
	padding: 0 clamp(20px, 4vw, 48px) clamp(64px, 8vw, 120px) !important;
	box-sizing: border-box;
	color: #f3eefb;
}

/* Kill the is-layout-constrained 645px cap on every content child.
   TT5's rule uses :where() → specificity 0. Our (0,2,1) wins cleanly. */
body.fehno-legal .wp-block-post-content > *,
body.fehno-legal .entry-content > * {
	max-width: none !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
}

/* ── Headings ── */
body.fehno-legal h1,
body.fehno-legal h2 {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-weight: 700 !important;
	color: #f3eefb !important;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: 2.4em;
	margin-bottom: 0.5em;
}
body.fehno-legal h2 { font-size: clamp(20px, 2.2vw, 28px) !important; }

body.fehno-legal h3 {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-size: clamp(16px, 1.6vw, 20px) !important;
	font-weight: 600 !important;
	color: #f3eefb !important;
	line-height: 1.3;
	margin-top: 1.8em;
	margin-bottom: 0.45em;
}

/* First heading: no extra top gap */
body.fehno-legal .wp-block-post-content > h2:first-child,
body.fehno-legal .wp-block-post-content > h3:first-child,
body.fehno-legal .entry-content > h2:first-child,
body.fehno-legal .entry-content > h3:first-child {
	margin-top: 0.5em;
}

/* ── Body text ── */
body.fehno-legal p {
	color: rgba(243, 238, 251, 0.82) !important;
	margin-bottom: 1em;
	line-height: 1.75;
}
body.fehno-legal strong {
	color: #f3eefb !important;
	font-weight: 600;
}

/* ── Lists ── */
body.fehno-legal ul,
body.fehno-legal ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}
body.fehno-legal li {
	color: rgba(243, 238, 251, 0.82) !important;
	margin-bottom: 0.4em;
	line-height: 1.65;
}

/* ── Horizontal rules / separators ── */
body.fehno-legal hr,
body.fehno-legal .wp-block-separator {
	border: none !important;
	border-top: 1px solid rgba(243, 238, 251, 0.13) !important;
	background: transparent !important;
	margin: 2.2em 0;
	opacity: 1 !important;
	height: 0 !important;
}

/* ── Inline links (content area) ── */
body.fehno-legal .wp-block-post-content a,
body.fehno-legal .entry-content a {
	color: #fde68a !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.fehno-legal .wp-block-post-content a:hover,
body.fehno-legal .entry-content a:hover {
	color: #fff !important;
	text-decoration: none;
}


/* =========================================================================
   El Protocolo — ep-* block styles
   Crimson (#8B1E3F / #B8264F) accent system over the Fehno dark base.
   All rules are scoped to .ep-section so they NEVER bleed into other pages.
   ========================================================================= */

/* ── EP token layer ── */
.ep-section {
	--ep-crimson:   #8B1E3F;
	--ep-crimson-2: #B8264F;
	--ep-crimson-3: #C73A5E;
	--ep-bone:      #F4EFE6;
	--ep-bone-dim:  #C9C3B6;
	--ep-bone-faint:#7A7468;
	--ep-bg:        #23194B;
	--ep-bg-2:      #150E2C;
	--ep-bg-3:      #1A1338;
	--ep-card:      #1F1540;
	--ep-line:      rgba(244,239,230,0.10);
	--ep-line-s:    rgba(244,239,230,0.22);
	--ep-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;
	--ep-display:   'Outfit', system-ui, sans-serif;
	--ep-body:      'Inter', system-ui, sans-serif;
}

/* ── Page-level chrome ── */
body.fehno-ep {
	background:
		radial-gradient(ellipse 70% 45% at 80% 5%,  rgba(139,30,63,0.20), transparent 55%),
		radial-gradient(ellipse 60% 40% at 10% 50%, rgba(80,40,120,0.26), transparent 60%),
		radial-gradient(ellipse 70% 40% at 90% 95%, rgba(139,30,63,0.16), transparent 60%),
		#150E2C;
	background-attachment: fixed;
}

/* Hide TT5 chrome — header/footer template-parts + post title H1 above blocks.
   .wp-block-template-part covers both header and footer rendered by the FSE engine.
   .wp-block-post-title would otherwise render "El Protocolo" as an H1 above the hero. */
body.fehno-ep .wp-block-post-title,
body.fehno-ep .wp-block-template-part { display: none !important; }

/* Nuclear container reset — mirrors body.fehno-landing's two-layer gap fix.
 *
 * TT5's page.html template stacks TWO inline-style spacing sources:
 *   1. <main style="margin-top:var(--wp--preset--spacing--60)">     ← Layer 1
 *   2.   <div style="padding-top:var(--wp--preset--spacing--60)">   ← Layer 2 (inner group)
 *
 * Both layers must be zeroed, plus the containing chain (wp-site-blocks,
 * entry-content, wp-block-post-content) needs margin/padding cleared so
 * layout-constrained max-widths don't cap the full-bleed sections.
 */
body.fehno-ep main,
body.fehno-ep .wp-site-blocks,
body.fehno-ep .entry-content,
body.fehno-ep .wp-block-post-content {
	max-width: none !important;
	padding:   0 !important;
	margin:    0 !important;
}
/* Layer 2: inner group block inside <main> with its own inline padding-top */
body.fehno-ep main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}
/* Constrained-layout children — only lift the max-width cap.
   Do NOT touch padding here: each section block owns its own vertical rhythm
   via .ep-hero / .ep-identification / .ep-mechanism / .ep-offer { padding: clamp(…) } */
body.fehno-ep .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-ep .wp-block-post-content  > [class*="wp-block-fehno-"] {
	max-width: none !important;
}

/* ── Shared EP atoms ── */
.ep-section-inner {
	max-width: 720px;
	margin: 0 auto;
	padding-left:  clamp(20px, 5vw, 48px);
	padding-right: clamp(20px, 5vw, 48px);
}

.ep-crimson      { color: var(--ep-crimson-2); }
.ep-mono-tag     {
	font-family: var(--ep-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ep-bone-faint);
}
.ep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ep-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-bone-faint);
	margin: 0 0 24px;
}
.ep-dot {
	width: 5px;
	height: 5px;
	background: var(--ep-crimson-2);
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.ep-h1 {
	font-family: var(--ep-display);
	font-weight: 900;
	font-size: clamp(44px, 8vw, 80px);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--ep-bone);
	margin: 0 0 clamp(20px, 3vw, 32px);
}
.ep-h2 {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--ep-bone);
	margin: 0 0 clamp(28px, 4vw, 44px);
}
.ep-lead {
	font-family: var(--ep-body);
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.5;
	color: var(--ep-bone-dim);
	margin: 0 0 clamp(24px, 3vw, 36px);
}
.ep-body-md {
	font-family: var(--ep-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ep-bone-dim);
	margin: 12px 0 0;
}

/* ── EP Button ── */
.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: var(--ep-crimson);
	color: var(--ep-bone);
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	padding: 18px 22px;
	box-sizing: border-box;
	border-radius: 4px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(139,30,63,0.35);
	transition: transform 0.15s ease, background 0.2s ease;
}
.ep-btn:hover {
	background: var(--ep-crimson-3);
	transform: translateY(-1px);
	color: #fff;
}
/* ep-btn-block: resets to block-level flex so width:100% is relative
   to the card's content box, not an inline formatting context */
.ep-btn-block {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}
.ep-btn-arrow { flex-shrink: 0; }

/* ── ep-hero ── */
.ep-hero { padding: clamp(64px, 9vw, 120px) 0; }
.ep-hero-inner {
	max-width: 720px;
	margin: 0 auto;
	padding-left:  clamp(20px, 5vw, 48px);
	padding-right: clamp(20px, 5vw, 48px);
	/* Single column — all children stack in natural document order */
	display: flex;
	flex-direction: column;
}
.ep-hero-inner .ep-eyebrow { margin-bottom: clamp(16px, 2vw, 24px); }
.ep-hero-inner .ep-h1      { margin-bottom: clamp(16px, 2vw, 24px); }
.ep-hero-inner .ep-lead    { margin-bottom: clamp(24px, 3vw, 36px); }
.ep-book-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ep-bg-3);
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	padding: 16px 18px;
	/* Gap BELOW the card before the CTA separator line */
	margin-bottom: clamp(24px, 3.5vw, 32px);
}
.ep-book-spine {
	width: 46px;
	height: 62px;
	background: linear-gradient(135deg, var(--ep-bg), var(--ep-bg-3));
	border: 1px solid var(--ep-line);
	border-radius: 2px 4px 4px 2px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
	flex-shrink: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6px 5px 5px;
}
.ep-book-spine-title {
	font-family: var(--ep-display);
	font-weight: 900;
	font-size: 8px;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--ep-bone);
}
.ep-book-spine-brand {
	font-family: var(--ep-mono);
	font-size: 5px;
	letter-spacing: 0.1em;
	color: var(--ep-bone-faint);
	text-align: center;
}
/* Actual cover image replaces the CSS spine when coverImageId is set */
.ep-cover-img {
	width: 80px;
	height: auto;
	display: block;
	flex-shrink: 0;
	border-radius: 3px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ep-book-meta { flex: 1; }
.ep-book-name {
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--ep-bone);
	margin-bottom: 5px;
}
/* CTA wrap: action zone separated from the product card above by a hairline.
   This mirrors the design's "pinned CTA at bottom of screen" intent — the
   border-top creates a clear visual break so the button feels purposefully
   contained, not floating. */
.ep-hero-cta-wrap {
	width: 100%;
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--ep-line);
	margin-top: 0; /* gap comes from ep-book-card margin-bottom */
}
.ep-social-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ep-line);
}
.ep-avatars { display: flex; }
.ep-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--ep-bg);
	margin-left: -7px;
}
.ep-avatar:first-child { margin-left: 0; }
.ep-avatar-1 { background: linear-gradient(135deg, #502878, #8B1E3F); }
.ep-avatar-2 { background: linear-gradient(135deg, #23194B, #B8264F); }
.ep-avatar-3 { background: linear-gradient(135deg, #6B3A9C, #C9C3B6); }

/* ── ep-identification ── */
.ep-identification { padding: clamp(56px, 8vw, 112px) 0; }
.ep-id-header { margin-bottom: clamp(28px, 4vw, 44px); }
.ep-signals {
	border-top: 1px solid var(--ep-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-signal-row {
	display: grid;
	grid-template-columns: 52px 1fr 22px;
	align-items: center;
	gap: 12px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ep-line);
}
.ep-signal-key { color: var(--ep-bone-faint); }
.ep-signal-text {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ep-bone);
}
.ep-signal-check {
	font-family: var(--ep-mono);
	font-size: 13px;
	text-align: center;
}
.ep-split-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: clamp(24px, 3.5vw, 40px);
}
.ep-split-left,
.ep-split-right { padding: 20px 18px; }
.ep-split-left  { border-right: 1px solid var(--ep-line); }
.ep-split-right { background: rgba(139,30,63,0.10); }
.ep-split-word {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 40px);
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 10px 0 8px;
}
.ep-split-strike {
	color: var(--ep-bone-faint);
	text-decoration: line-through;
	text-decoration-color: var(--ep-crimson);
	text-decoration-thickness: 2px;
}
.ep-split-sub {
	font-family: var(--ep-body);
	font-size: 12px;
	line-height: 1.35;
	color: var(--ep-bone-dim);
	margin: 0;
}
.ep-pull-quote {
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: clamp(18px, 2.5vw, 24px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ep-bone);
	margin: 0;
	padding: 0;
	border: none;
}

/* ── ep-mechanism ── */
.ep-mechanism { padding: clamp(56px, 8vw, 112px) 0; }
.ep-case-card {
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	background: var(--ep-bg-3);
	overflow: hidden;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-case-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ep-line);
}
.ep-case-dots {
	display: flex;
	gap: 4px;
}
.ep-case-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ep-line-s);
}
.ep-case-steps { }
.ep-case-step {
	padding: 16px 16px;
	border-bottom: 1px solid var(--ep-line);
}
.ep-case-step-last { border-bottom: none; }
.ep-case-step-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.ep-case-step-body {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ep-bone);
	letter-spacing: -0.01em;
	margin: 0;
}
.ep-protocols { margin-bottom: clamp(20px, 3vw, 36px); }
.ep-protocols-count {
	display: block;
	margin-bottom: 12px;
	color: var(--ep-bone-faint);
}
.ep-protocol-list { display: flex; flex-direction: column; gap: 8px; }
.ep-protocol-chip {
	display: grid;
	grid-template-columns: 48px 1fr 20px;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--ep-bg-3);
	border: 1px solid var(--ep-line);
	border-radius: 3px;
}
.ep-protocol-key  { }
.ep-protocol-text {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--ep-bone);
	letter-spacing: -0.01em;
}
.ep-protocol-arrow { color: var(--ep-bone-faint); text-align: right; }
.ep-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-top: clamp(18px, 2.5vw, 28px);
	border-top: 1px solid var(--ep-line);
}
.ep-pill {
	display: flex;
	align-items: center;
	gap: 7px;
}
.ep-pill-dot { font-size: 10px; }

/* ── ep-offer ── */
.ep-offer { padding: clamp(56px, 8vw, 112px) 0; }
.ep-benefits {
	border-top: 1px solid var(--ep-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-benefit-row {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ep-line);
	align-items: baseline;
}
.ep-benefit-arrow {
	font-family: var(--ep-mono);
	font-size: 14px;
	padding-top: 2px;
}
.ep-benefit-title {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: var(--ep-bone);
	line-height: 1.2;
}
.ep-benefit-sub {
	margin-top: 2px;
	font-family: var(--ep-body);
	font-size: 12px;
	color: var(--ep-bone-dim);
}
.ep-product-card {
	background: linear-gradient(180deg, rgba(139,30,63,0.14), rgba(0,0,0,0.22));
	border: 1px solid var(--ep-line-s);
	border-radius: 4px;
	/* Generous padding so the button never touches the card edge */
	padding: clamp(22px, 3.5vw, 32px);
	margin-bottom: clamp(40px, 6vw, 72px);
}
.ep-product-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.ep-badge { }
.ep-product-name {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(24px, 4vw, 34px);
	letter-spacing: -0.025em;
	color: var(--ep-bone);
	margin: 0 0 6px;
	line-height: 1.05;
}
.ep-product-sub {
	font-family: var(--ep-body);
	font-size: 13px;
	color: var(--ep-bone-faint);
	margin: 0 0 18px;
}
.ep-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	/* More breathing room between price and CTA — key containment fix */
	margin-bottom: clamp(24px, 3vw, 32px);
	padding-bottom: clamp(20px, 2.5vw, 28px);
	border-bottom: 1px solid var(--ep-line);
}
.ep-price-was {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--ep-bone-faint);
	text-decoration: line-through;
	text-decoration-color: var(--ep-crimson);
	text-decoration-thickness: 2px;
}
.ep-price-now {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(40px, 8vw, 56px);
	letter-spacing: -0.04em;
	color: var(--ep-bone);
	line-height: 1;
}
.ep-price-curr {
	font-size: 14px;
	font-weight: 500;
	color: var(--ep-bone-dim);
	margin-left: 4px;
}
.ep-security-note {
	text-align: center;
	margin: 14px 0 0;
	color: var(--ep-bone-faint);
}
.ep-closing {
	text-align: center;
	padding-top: clamp(40px, 6vw, 72px);
	border-top: 1px solid var(--ep-line-s);
}
.ep-closing-head {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 52px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--ep-bone);
	margin: 0 0 18px;
}
.ep-closing-foot {
	color: var(--ep-bone-faint);
	margin: 0;
}

/* ── Responsive tweaks ── */
@media (max-width: 560px) {
	.ep-split-card { grid-template-columns: 1fr; }
	.ep-split-left { border-right: none; border-bottom: 1px solid var(--ep-line); }
	.ep-signal-row { grid-template-columns: 44px 1fr 18px; gap: 8px; }
	.ep-protocol-chip { grid-template-columns: 40px 1fr 16px; gap: 8px; }
}

/* ── EP page: hide WooCommerce persistent cart bar if present ── */
body.fehno-ep .woocommerce-store-notice,
body.fehno-ep .woocommerce-breadcrumb { display: none !important; }

/* =========================================================================
   MP — De Migajera a Plato Principal
   Dark cinematic design system: black / deep-red / crimson / warm-white.
   All .mp-section and .mp-* rules are intentionally unscoped so they
   render in both the live page and the editor iframe.
   Global body overrides are scoped to body.fehno-mp (frontend only).
   ========================================================================= */

/* ─── MP design tokens ───────────────────────────────────────────────────── */
:root {
	--mp-black:      #050505;
	--mp-red:        #8B0000;
	--mp-crimson:    #C1121F;
	--mp-pink:       #C2185B;
	--mp-white:      #F5F1EA;
	--mp-muted:      rgba(245, 241, 234, 0.55);
	--mp-line:       rgba(245, 241, 234, 0.09);
	--mp-line-h:     rgba(245, 241, 234, 0.18);
	--mp-glow-a:     rgba(194, 24, 91, 0.14);
	--mp-glow-b:     rgba(139, 0, 0, 0.22);
	--mp-container:        1200px;
	--mp-container-narrow: 760px;
}

/* ─── Section shell ──────────────────────────────────────────────────────── */
.mp-section {
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 9vw, 128px) 0;
	background: var(--mp-black);
	color: var(--mp-white);
}
.mp-section-inner {
	max-width: var(--mp-container);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
}
.mp-section-inner--narrow {
	max-width: var(--mp-container-narrow);
}

/* ─── Ambient glow orbs ─────────────────────────────────────────────────── */
.mp-glow-orb {
	position: absolute;
	width: clamp(480px, 60vw, 800px);
	height: clamp(320px, 40vw, 560px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, var(--mp-glow-a) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}
.mp-glow-orb--right {
	left: auto;
	right: -10%;
	transform: translateY(-50%);
}
.mp-glow-orb--center { left: 50%; transform: translate(-50%, -50%); }
.mp-glow-orb--offer  {
	background: radial-gradient(ellipse at center, var(--mp-glow-b) 0%, transparent 65%);
	width: 900px;
	height: 600px;
}
.mp-glow-orb--close  {
	background: radial-gradient(ellipse at center, var(--mp-glow-a) 0%, var(--mp-glow-b) 35%, transparent 70%);
	width: 700px;
	height: 500px;
}
/* All section content sits above the glow orb */
.mp-section > .mp-section-inner,
.mp-section > .mp-hero-inner,
.mp-section > .mp-close-inner { position: relative; z-index: 1; }

/* ─── Typography ─────────────────────────────────────────────────────────── */
.mp-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mp-muted);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.mp-eyebrow--center { justify-content: center; text-align: center; }

.mp-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mp-pink);
	flex-shrink: 0;
	box-shadow: 0 0 8px var(--mp-pink);
}

.mp-h1 {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(44px, 6.5vw, 88px);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.0;
	margin: 0 0 clamp(22px, 2.8vw, 36px);
	color: var(--mp-white);
}
.mp-h2 {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(34px, 5vw, 64px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	margin: 0 0 clamp(28px, 3.5vw, 48px);
	color: var(--mp-white);
}
.mp-h2--center { text-align: center; }
.mp-h4 {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(17px, 1.8vw, 22px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--mp-white);
}
.mp-lead {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.65;
	color: var(--mp-muted);
	margin: 0 0 clamp(28px, 3.5vw, 48px);
	max-width: 620px;
}
.mp-body-lg {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.72;
	color: var(--mp-muted);
	margin: 0 0 clamp(24px, 3vw, 40px);
}
.mp-body-lg--center { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }
.mp-body-sm {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.65;
	color: var(--mp-muted);
	margin: 0;
}
.mp-mono {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}
.mp-accent { color: var(--mp-pink); }

/* ─── Button ─────────────────────────────────────────────────────────────── */
.mp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	background: var(--mp-crimson);
	color: var(--mp-white) !important;
	font-family: "Outfit", sans-serif;
	font-size: clamp(15px, 1.2vw, 17px);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
	box-shadow: 0 4px 24px rgba(193,18,31,0.35);
}
.mp-btn:hover {
	background: var(--mp-pink);
	transform: translateY(-2px);
	box-shadow: 0 8px 36px rgba(194,24,91,0.45);
}
.mp-btn-hero {
	padding: 18px 36px;
	font-size: clamp(16px, 1.3vw, 18px);
}
.mp-btn-lg  { padding: 22px 44px; font-size: clamp(17px, 1.4vw, 19px); }
.mp-btn-block { width: 100%; justify-content: center; border-radius: 2px; box-sizing: border-box; }
.mp-btn-arrow { flex-shrink: 0; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.mp-hero { padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 112px); }
.mp-hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--mp-container);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
.mp-hero-copy { max-width: 620px; }
.mp-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.mp-social-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mp-muted);
}
.mp-avatars {
	display: flex;
	align-items: center;
}
.mp-av {
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--mp-black);
	margin-right: -8px;
}
.mp-av-1 { background: linear-gradient(135deg, var(--mp-crimson), var(--mp-pink)); }
.mp-av-2 { background: linear-gradient(135deg, var(--mp-pink), #9C27B0); }
.mp-av-3 { background: linear-gradient(135deg, #9C27B0, var(--mp-red)); }

/* ─── Cover image / placeholder ─────────────────────────────────────────── */
.mp-cover-img {
	display: block;
	width: clamp(260px, 32vw, 420px);
	height: auto;
	border-radius: 4px;
	/* drop-shadow follows the image shape — better for ebook renders/PNGs */
	filter:
		drop-shadow(0 32px 56px rgba(0, 0, 0, 0.76))
		drop-shadow(0  0  40px rgba(193, 18, 31, 0.22));
}
.mp-cover-placeholder {
	width: clamp(260px, 32vw, 420px);
	aspect-ratio: 2/3;
	background: linear-gradient(160deg, #1a0010 0%, #2d0012 60%, var(--mp-red) 100%);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 28px 20px 20px;
	box-shadow: 0 32px 72px rgba(0,0,0,0.75), 0 0 48px rgba(193,18,31,0.22);
	box-sizing: border-box;
}
.mp-cover-title {
	font-family: "Outfit", sans-serif;
	font-size: clamp(18px, 1.8vw, 28px);
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-align: center;
	color: var(--mp-white);
}
.mp-cover-brand {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	font-weight: 700;
	color: var(--mp-muted);
}

/* ─── Pain ───────────────────────────────────────────────────────────────── */
.mp-pain-header { margin-bottom: clamp(32px, 4vw, 52px); }
.mp-pain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1px;
	background: var(--mp-line);
	border: 1px solid var(--mp-line);
}
.mp-pain-card {
	background: var(--mp-black);
	padding: 28px 24px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	transition: background 0.2s ease;
}
.mp-pain-card:hover { background: rgba(139,0,0,0.12); }
.mp-pain-mark {
	flex-shrink: 0;
	display: block;
	width: 2px;
	height: 22px;
	background: var(--mp-pink);
	margin-top: 3px;
	box-shadow: 0 0 8px var(--mp-pink);
}
.mp-pain-text {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.65;
	color: var(--mp-muted);
	margin: 0;
}

/* ─── Definition ────────────────────────────────────────────────────────── */
.mp-define { border-top: 1px solid var(--mp-line); border-bottom: 1px solid var(--mp-line); }
.mp-pull-quote {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--mp-white);
	text-align: center;
	margin: clamp(28px, 3.5vw, 48px) 0;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--mp-line);
	border-left: 3px solid var(--mp-crimson);
	position: relative;
	background: rgba(139,0,0,0.06);
}
.mp-pull-mark {
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -0.25em;
	margin: 0 6px;
}
.mp-traits {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: clamp(24px, 3vw, 40px);
	border: 1px solid var(--mp-line);
}
.mp-trait-row {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--mp-line);
	align-items: center;
	transition: background 0.2s ease;
}
.mp-trait-row:last-child { border-bottom: none; }
.mp-trait-row:hover { background: rgba(194,24,91,0.06); }
.mp-trait-key { text-align: center; }
.mp-trait-text {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	color: var(--mp-muted);
	line-height: 1.6;
}

/* ─── Learn ─────────────────────────────────────────────────────────────── */
.mp-learn-header { margin-bottom: clamp(32px, 4vw, 52px); }
.mp-learn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1px;
	background: var(--mp-line);
	border: 1px solid var(--mp-line);
}
.mp-learn-card {
	background: var(--mp-black);
	padding: 28px 24px;
	display: grid;
	grid-template-columns: 36px 1fr 18px;
	gap: 16px;
	align-items: start;
	transition: background 0.22s ease;
}
.mp-learn-card:hover {
	background: rgba(139,0,0,0.10);
}
.mp-learn-num {
	color: var(--mp-crimson);
	padding-top: 3px;
}
.mp-learn-card-body {}
.mp-learn-arrow {
	font-size: 16px;
	padding-top: 3px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.mp-learn-card:hover .mp-learn-arrow {
	opacity: 1;
	transform: translateX(3px);
}

/* ─── Transform ─────────────────────────────────────────────────────────── */
.mp-transform-split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0;
	border: 1px solid var(--mp-line);
}
.mp-transform-col { padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 40px); }
.mp-transform-before { border-right: none; }
.mp-transform-after  { background: rgba(194,24,91,0.06); }
.mp-transform-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(16px, 2vw, 24px);
	color: var(--mp-muted);
}
.mp-transform-after .mp-transform-label { color: var(--mp-pink); }
.mp-transform-x     { font-size: 16px; }
.mp-transform-check { font-size: 14px; }
.mp-transform-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-transform-item {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.55;
	padding-left: 18px;
	position: relative;
}
.mp-transform-item--before {
	color: var(--mp-muted);
}
.mp-transform-item--before::before {
	content: '—';
	position: absolute;
	left: 0;
	color: rgba(245,241,234,0.2);
}
.mp-transform-item--after {
	color: var(--mp-white);
}
.mp-transform-item--after::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--mp-pink);
}
.mp-transform-divider {
	width: 1px;
	background: var(--mp-line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	position: relative;
}
.mp-transform-divider-line {
	flex: 1;
	width: 1px;
	background: var(--mp-line);
}
.mp-transform-divider-dot {
	font-size: 12px;
	padding: 8px 0;
	line-height: 1;
}

/* ─── Quotes ─────────────────────────────────────────────────────────────── */
.mp-quotes-stack {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 24px);
	margin-top: clamp(28px, 3.5vw, 48px);
}
.mp-quote-card {
	position: relative;
	padding: clamp(24px, 3vw, 40px);
	background: rgba(245,241,234,0.03);
	border: 1px solid var(--mp-line);
	border-left: 3px solid var(--mp-crimson);
	margin: 0;
	transition: border-left-color 0.2s ease, background 0.2s ease;
}
.mp-quote-card:hover {
	border-left-color: var(--mp-pink);
	background: rgba(194,24,91,0.05);
}
.mp-quote-card--alt {
	border-left-color: var(--mp-pink);
	margin-left: clamp(16px, 4vw, 60px);
}
.mp-quote-mark {
	font-family: "Outfit", serif;
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 900;
	line-height: 0;
	vertical-align: -0.3em;
	margin-right: 8px;
	opacity: 0.7;
}
.mp-quote-text {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--mp-white);
	margin: 0;
	display: inline;
}

/* ─── Filter ─────────────────────────────────────────────────────────────── */
.mp-filter-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--mp-line);
	border: 1px solid var(--mp-line);
}
.mp-filter-col {
	background: var(--mp-black);
	padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 40px);
}
.mp-filter-yes { background: rgba(194,24,91,0.04); }
.mp-filter-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(16px, 2vw, 24px);
	color: var(--mp-muted);
}
.mp-filter-yes .mp-filter-label { color: var(--mp-pink); }
.mp-filter-icon { font-size: 16px; }
.mp-filter-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.mp-filter-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.6;
}
.mp-filter-item--no  { color: var(--mp-muted); }
.mp-filter-item--yes { color: var(--mp-white); }
.mp-filter-bullet { flex-shrink: 0; padding-top: 2px; }

/* ─── Offer ──────────────────────────────────────────────────────────────── */
.mp-offer-layout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}
.mp-offer-layout:not(:has(.mp-offer-cover)) {
	grid-template-columns: 1fr;
	max-width: 560px;
}
.mp-offer-cover { flex-shrink: 0; }
.mp-cover-img--offer {
	width: clamp(180px, 20vw, 280px);
	border-radius: 4px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 48px rgba(194,24,91,0.25);
}
.mp-offer-card {
	background: rgba(245,241,234,0.03);
	border: 1px solid var(--mp-line);
	padding: clamp(28px, 3.5vw, 48px);
}
.mp-offer-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.mp-offer-badge {
	background: rgba(194,24,91,0.15);
	color: var(--mp-pink);
	padding: 4px 10px;
	border-radius: 2px;
}
.mp-offer-name {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mp-white);
	margin: 0 0 8px;
}
.mp-offer-sub {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
	color: var(--mp-muted);
	margin: 0 0 clamp(16px, 2vw, 24px);
}
.mp-offer-includes {
	list-style: none;
	padding: 0;
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mp-offer-include-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.1vw, 16px);
	color: var(--mp-muted);
	line-height: 1.5;
}
.mp-offer-check { flex-shrink: 0; padding-top: 1px; }
.mp-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: clamp(20px, 2.5vw, 32px);
}
.mp-price-was {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	color: var(--mp-muted);
	text-decoration: line-through;
}
.mp-price-now {
	font-family: "Outfit", sans-serif;
	font-size: clamp(40px, 4.5vw, 58px);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--mp-white);
	line-height: 1;
}
.mp-price-curr {
	font-family: "Outfit", sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--mp-muted);
	margin-left: 4px;
	vertical-align: super;
	font-size: 16px;
}
.mp-offer-security {
	text-align: center;
	color: var(--mp-muted);
	margin: 14px 0 0;
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.mp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--mp-line);
}
.mp-faq-item { border-bottom: 1px solid var(--mp-line); }
.mp-faq-item:last-child { border-bottom: none; }
.mp-faq-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 24px;
	background: transparent;
	border: none;
	color: var(--mp-white);
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}
.mp-faq-q:hover { background: rgba(245,241,234,0.04); }
.mp-faq-q[aria-expanded="true"] { color: var(--mp-pink); }
.mp-faq-q[aria-expanded="true"] .mp-faq-icon { transform: rotate(45deg); }
.mp-faq-icon {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	transition: transform 0.22s ease;
}
.mp-faq-a {
	padding: 0 24px 22px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.7;
	color: var(--mp-muted);
}
.mp-faq-a[hidden] { display: none; }
.mp-faq-a p { margin: 0; }

/* ─── Close ──────────────────────────────────────────────────────────────── */
.mp-close { text-align: center; }
.mp-close-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(24px, 3vw, 36px);
}
.mp-close-heading {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(34px, 5.5vw, 72px);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin: 0;
	color: var(--mp-white);
}
.mp-close-footnote {
	color: var(--mp-muted);
	margin: 0;
}

/* ─── Body-class page overrides (frontend only) ──────────────────────────── */
body.fehno-mp {
	background: var(--mp-black);
	color: var(--mp-white);
}
body.fehno-mp .wp-block-post-title,
body.fehno-mp .wp-block-template-part { display: none !important; }
body.fehno-mp .woocommerce-store-notice,
body.fehno-mp .woocommerce-breadcrumb { display: none !important; }
body.fehno-mp main,
body.fehno-mp .wp-site-blocks,
body.fehno-mp .entry-content,
body.fehno-mp .wp-block-post-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
body.fehno-mp main > .wp-block-group { margin: 0 !important; }
body.fehno-mp .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-mp .wp-block-post-content  > [class*="wp-block-fehno-"] {
	max-width: none !important;
	padding-inline: 0 !important;
}

/* ─── Animations (reduced-motion safe) ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.mp-pain-card,
	.mp-learn-card,
	.mp-quote-card,
	.mp-faq-q {
		transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.mp-hero-inner {
		grid-template-columns: 1fr;
	}
	.mp-hero-cover {
		display: flex;
		justify-content: center;
		order: -1;
	}
	.mp-cover-img    { width: clamp(200px, 50vw, 320px); }
	.mp-transform-split {
		grid-template-columns: 1fr;
	}
	.mp-transform-divider { display: none; }
	.mp-transform-before { border-bottom: 1px solid var(--mp-line); }
	.mp-filter-split {
		grid-template-columns: 1fr;
	}
	.mp-offer-layout {
		grid-template-columns: 1fr;
	}
	.mp-offer-cover { display: flex; justify-content: center; }
	.mp-quote-card--alt { margin-left: 0; }
}
@media (max-width: 560px) {
	.mp-pain-grid    { grid-template-columns: 1fr; }
	.mp-learn-grid   { grid-template-columns: 1fr; }
	.mp-hero-cta-row { flex-direction: column; align-items: flex-start; }
	.mp-btn-hero     { width: 100%; justify-content: center; box-sizing: border-box; }
	.mp-learn-card   { grid-template-columns: 30px 1fr; }
	.mp-learn-arrow  { display: none; }
	.mp-cta-inner    { align-items: stretch; }
	.mp-cta-inner .mp-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ─── Button pulse animation ─────────────────────────────────────────────── */
@keyframes mp-pulse {
	0%, 100% {
		transform:  scale(1);
		box-shadow: 0 4px 24px rgba(193,18,31,0.35);
	}
	50% {
		transform:  scale(1.025);
		box-shadow: 0 10px 36px rgba(194,24,91,0.52);
	}
}

/* Applied to hero CTA and explicit .mp-btn-pulse class */
.mp-btn-pulse {
	animation: mp-pulse 3.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Stop pulse on hover — hover state's own shadow/transform takes over */
.mp-btn-pulse:hover { animation: none; }

/* Hero button always pulses */
.mp-hero .mp-btn-hero,
.mp-close .mp-btn-hero {
	animation: mp-pulse 3.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mp-hero .mp-btn-hero:hover,
.mp-close .mp-btn-hero:hover { animation: none; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mp-btn-pulse,
	.mp-hero .mp-btn-hero,
	.mp-close .mp-btn-hero { animation: none; }
}

/* ─── Author (mp-author) ─────────────────────────────────────────────────── */
.mp-author { border-top: 1px solid var(--mp-line); }
.mp-author-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
}

/* Wrap — stacking context for the glow ring behind the circle */
.mp-author-photo-wrap {
	flex-shrink: 0;
	position: relative;
	display: flex;
	justify-content: center;
}

/* Diffuse crimson halo behind the circle — restrained, not decorative */
.mp-author-photo-wrap::before {
	content: '';
	position: absolute;
	inset: -28px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(193, 18, 31, 0.20) 0%, rgba(139, 0, 0, 0.08) 52%, transparent 72%);
	pointer-events: none;
	z-index: 0;
}

/* Circle portrait — matches the "Su mente, tus reglas" treatment */
.mp-author-photo {
	position: relative;
	z-index: 1;
	display: block;
	width:  clamp(200px, 22vw, 260px);
	height: clamp(200px, 22vw, 260px);
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid rgba(193, 18, 31, 0.55);
	filter: grayscale(10%) contrast(1.04);
	box-shadow:
		0  0   0  5px rgba(193, 18, 31, 0.08),
		0 20px 52px rgba(0, 0, 0, 0.62),
		0  6px 18px rgba(0, 0, 0, 0.38);
}

.mp-author-name {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--mp-white);
	margin: 0 0 6px;
}
.mp-author-role {
	color: var(--mp-pink);
	margin: 0 0 clamp(16px, 2vw, 24px);
	display: block;
}
.mp-author-copy .mp-body-lg { max-width: 580px; }

@media (max-width: 640px) {
	.mp-author-row {
		grid-template-columns: 1fr;
		gap: clamp(28px, 8vw, 44px);
	}
	.mp-author-photo-wrap {
		justify-content: center;
	}
	.mp-author-photo {
		width:  clamp(160px, 44vw, 200px);
		height: clamp(160px, 44vw, 200px);
	}
}

/* ─── Inline CTA (mp-cta) ────────────────────────────────────────────────── */
.mp-cta-section {
	padding: clamp(40px, 5vw, 72px) 0;
	border-top: 1px solid var(--mp-line);
	border-bottom: 1px solid var(--mp-line);
}
.mp-cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.mp-cta-text {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 500;
	color: var(--mp-muted);
	margin: 0;
	max-width: 540px;
}

/* ═══════════════════════════════════════════════════════════════
   PD — El Protocolo de Desapego
   Dark premium landing · Orange #D4621B · Poppins + Inter
   Mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ── Token layer ─────────────────────────────────────────────── */
.pd-section {
  --pd-bg:          #0d0d0d;
  --pd-bg-alt:      #111111;
  --pd-bg-card:     #161616;
  --pd-border:      rgba(255,255,255,0.07);
  --pd-orange:      #D4621B;
  --pd-orange-dim:  rgba(212,98,27,0.18);
  --pd-orange-glow: rgba(212,98,27,0.45);
  --pd-text:        #f0ede8;
  --pd-muted:       rgba(240,237,232,0.55);
  --pd-mono:        'Inter', system-ui, sans-serif;
  --pd-radius:      10px;
  --pd-transition:  0.22s ease;
}

/* ── Base section ────────────────────────────────────────────── */
.pd-section {
  position: relative;
  background: var(--pd-bg);
  color: var(--pd-text);
  overflow: hidden;
}

.pd-section-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .pd-section-inner { padding: 104px 48px; }
}

@media (min-width: 1200px) {
  .pd-section-inner { padding: 120px 60px; }
}

/* ── Typography ──────────────────────────────────────────────── */
.pd-eyebrow {
  font-family: var(--pd-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-orange);
  margin: 0 0 16px;
}

.pd-h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pd-text);
  margin: 0 0 20px;
}

.pd-h2 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(24px, 4.5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pd-text);
  margin: 0 0 20px;
}

.pd-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--pd-muted);
  margin: 0 0 24px;
}

.pd-mono {
  font-family: var(--pd-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pd-accent {
  color: var(--pd-orange);
}

/* ── Section header ─────────────────────────────────────────── */
.pd-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

/* ── Glow orb ────────────────────────────────────────────────── */
.pd-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.45;
}

.pd-glow-orb--hero {
  width: 520px;
  height: 520px;
  background: var(--pd-orange-glow);
  top: -180px;
  right: -100px;
}

.pd-glow-orb--offer {
  width: 600px;
  height: 600px;
  background: var(--pd-orange-glow);
  bottom: -200px;
  left: -120px;
}

/* ── CTA Button ──────────────────────────────────────────────── */
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #D4621B 0%, #b84e14 100%);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform var(--pd-transition), box-shadow var(--pd-transition);
  cursor: pointer;
}

.pd-btn:hover,
.pd-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,98,27,0.45);
  color: #fff;
  text-decoration: none;
}

.pd-btn--block {
  width: 100%;
  box-sizing: border-box;
}

.pd-btn--outline {
  background: transparent;
  border: 1.5px solid var(--pd-orange);
  color: var(--pd-orange);
}

.pd-btn--outline:hover,
.pd-btn--outline:focus-visible {
  background: var(--pd-orange-dim);
  color: var(--pd-orange);
  box-shadow: none;
}

.pd-btn--text {
  background: transparent;
  color: var(--pd-orange);
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pd-btn--text:hover { opacity: 0.8; color: var(--pd-orange); }

/* Pulse animation */
@keyframes pd-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(212,98,27,0.55); }
  50%       { box-shadow: 0 0 0 10px rgba(212,98,27,0);   }
}

.pd-btn--pulse {
  animation: pd-pulse 2.4s ease-in-out infinite;
}

.pd-btn--pulse:hover {
  animation: none;
  box-shadow: 0 8px 28px rgba(212,98,27,0.45);
}

/* ── Social proof line ───────────────────────────────────────── */
.pd-proof {
  font-family: var(--pd-mono);
  font-size: 11px;
  color: var(--pd-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 16px 0 0;
}

/* ── Cover placeholder ───────────────────────────────────────── */
.pd-cover-placeholder {
  background: linear-gradient(160deg, #1a1a1a 0%, #222 100%);
  border-radius: var(--pd-radius);
  aspect-ratio: 2/3;
  max-width: 260px;
  border: 1px solid var(--pd-border);
}

.pd-cover-placeholder--offer {
  max-width: 320px;
  width: 100%;
}

/* ── Cover image ────────────────────────────────────────────── */
.pd-cover-img {
  display: block;
  border-radius: var(--pd-radius);
  width: 100%;
  height: auto;
}

/* ════════════════════════════════════════════
   pd-hero
   ════════════════════════════════════════════ */
.pd-hero {
  background: var(--pd-bg);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.pd-hero .pd-section-inner {
  padding-top: 88px;
  padding-bottom: 80px;
}

.pd-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

@media (min-width: 860px) {
  .pd-hero-inner {
    flex-direction: row;
    text-align: left;
    gap: 60px;
    align-items: center;
  }
}

.pd-hero-copy {
  flex: 1;
  min-width: 0;
}

.pd-hero-cover {
  flex-shrink: 0;
  width: clamp(180px, 38vw, 300px);
  order: -1; /* image above copy on mobile */
}

@media (min-width: 860px) {
  .pd-hero-cover {
    width: clamp(240px, 28vw, 360px);
    order: 0; /* restore natural DOM order on desktop (copy left, image right) */
  }
}

.pd-hero-cover .pd-cover-img {
  filter: drop-shadow(0 20px 48px rgba(212,98,27,0.5));
}

.pd-hero-cover .pd-cover-placeholder {
  max-width: 100%;
}

.pd-hero-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: var(--pd-muted);
  margin: 0 0 28px;
}

/* ════════════════════════════════════════════
   pd-pain
   ════════════════════════════════════════════ */
.pd-pain {
  background: var(--pd-bg-alt);
}

.pd-pain-heading {
  max-width: 700px;
}

.pd-pain-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-pain-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.6;
  color: var(--pd-muted);
}

.pd-pain-accent {
  flex-shrink: 0;
  width: 3px;
  height: 1.5em;
  margin-top: 0.15em;
  background: var(--pd-orange);
  border-radius: 2px;
  display: inline-block;
}

/* ════════════════════════════════════════════
   pd-what
   ════════════════════════════════════════════ */
.pd-what {
  background: var(--pd-bg);
}

.pd-what .pd-section-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 860px) {
  .pd-what .pd-section-inner {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
  }
}

.pd-what-text {
  flex: 1;
  min-width: 0;
}

.pd-pillar-grid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-pillar-card {
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-left: 3px solid var(--pd-orange);
  border-radius: var(--pd-radius);
  padding: 20px 22px;
}

.pd-pillar-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--pd-text);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.pd-pillar-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-muted);
  margin: 0;
}

/* ════════════════════════════════════════════
   pd-inside
   ════════════════════════════════════════════ */
.pd-inside {
  background: var(--pd-bg-alt);
}

.pd-inside-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 40px;
}

@media (min-width: 560px) {
  .pd-inside-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .pd-inside-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.pd-inside-card {
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 20px 18px 18px;
  transition: border-color var(--pd-transition);
}

.pd-inside-card:hover {
  border-color: rgba(212,98,27,0.4);
}

.pd-inside-num {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--pd-orange);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.pd-inside-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--pd-text);
  margin: 0 0 8px;
  line-height: 1.35;
}

.pd-inside-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pd-muted);
  margin: 0;
}

/* ════════════════════════════════════════════
   pd-moments
   ════════════════════════════════════════════ */
.pd-moments {
  background: var(--pd-bg);
}

.pd-moments-intro {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.pd-moments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 40px 0;
}

@media (min-width: 560px) {
  .pd-moments-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .pd-moments-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.pd-moment-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 16px 16px;
  transition: border-color var(--pd-transition);
}

.pd-moment-card:hover {
  border-color: rgba(212,98,27,0.3);
}

.pd-moment-accent {
  flex-shrink: 0;
  width: 3px;
  min-height: 1.5em;
  margin-top: 0.2em;
  background: var(--pd-orange);
  border-radius: 2px;
}

.pd-moment-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pd-muted);
  margin: 0;
}

.pd-moments-cta {
  text-align: center;
  margin-top: 40px;
}

/* ════════════════════════════════════════════
   pd-filter
   ════════════════════════════════════════════ */
.pd-filter {
  background: var(--pd-bg-alt);
}

.pd-filter-cols {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 680px) {
  .pd-filter-cols { flex-direction: row; gap: 32px; }
  .pd-filter-col  { flex: 1; }
}

.pd-filter-col-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pd-filter-col--yes .pd-filter-col-title { color: var(--pd-orange); }
.pd-filter-col--no  .pd-filter-col-title { color: var(--pd-muted); }

.pd-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-filter-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pd-muted);
}

.pd-filter-icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 0.1em;
}

.pd-filter-item--yes .pd-filter-icon { color: var(--pd-orange); }
.pd-filter-item--no  .pd-filter-icon { color: rgba(255,255,255,0.3); }

/* ════════════════════════════════════════════
   pd-offer
   ════════════════════════════════════════════ */
.pd-offer {
  background: var(--pd-bg);
}

.pd-offer-heading {
  text-align: center;
  margin-bottom: 48px;
}

.pd-offer-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 860px) {
  .pd-offer-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
  }
}

.pd-offer-cover {
  flex-shrink: 0;
  width: clamp(200px, 50vw, 300px);
  text-align: center;
}

@media (min-width: 860px) {
  .pd-offer-cover {
    width: clamp(260px, 28vw, 380px);
  }
}

.pd-cover-img--offer {
  filter: drop-shadow(0 24px 64px rgba(212,98,27,0.55));
  border-radius: var(--pd-radius);
}

.pd-offer-card {
  flex: 1;
  min-width: 0;
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 14px;
  padding: 32px 28px;
  box-sizing: border-box;
}

.pd-offer-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pd-offer-name {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  color: var(--pd-text);
  margin: 0 0 8px;
  line-height: 1.15;
}

.pd-offer-sub {
  font-family: var(--pd-mono);
  font-size: 12px;
  color: var(--pd-muted);
  margin: 0 0 24px;
}

.pd-offer-badge {
  color: var(--pd-orange);
  border: 1px solid var(--pd-orange);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
}

.pd-offer-includes {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-offer-include-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pd-muted);
}

.pd-offer-check {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12px;
  margin-top: 0.1em;
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.pd-price-was {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  color: var(--pd-muted);
  text-decoration: line-through;
}

.pd-price-now {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  color: var(--pd-text);
  line-height: 1;
}

.pd-price-curr {
  font-size: 14px;
  font-weight: 500;
  color: var(--pd-muted);
  margin-left: 4px;
}

.pd-offer-security {
  text-align: center;
  color: var(--pd-muted);
  margin: 14px 0 0;
  font-size: 10px;
}

/* ════════════════════════════════════════════
   pd-faq
   ════════════════════════════════════════════ */
.pd-faq {
  background: var(--pd-bg-alt);
}

.pd-faq-list {
  max-width: 700px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-faq-item {
  border-bottom: 1px solid var(--pd-border);
  overflow: hidden;
}

.pd-faq-item:first-child { border-top: 1px solid var(--pd-border); }

.pd-faq-q {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  color: var(--pd-text);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.4;
  user-select: none;
}

.pd-faq-q::-webkit-details-marker { display: none; }

.pd-faq-q::after {
  content: '+';
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 300;
  color: var(--pd-orange);
  transition: transform var(--pd-transition);
}

.pd-faq-item[open] .pd-faq-q::after {
  transform: rotate(45deg);
}

.pd-faq-a {
  padding: 0 0 20px;
}

.pd-faq-a p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pd-muted);
  margin: 0;
}

.pd-faq-cta {
  text-align: center;
  margin-top: 48px;
}

/* ── body.fehno-pd — page shell overrides ───────────────────────────────
 *
 * Mirrors the body.fehno-mp block exactly (same TT5 template, same issues).
 *
 * Three layers to kill:
 *   1. Theme header + footer  → .wp-block-template-part { display:none }
 *   2. Post title block       → .wp-block-post-title { display:none }
 *   3. TT5 container stack    → main / .wp-site-blocks / entry-content
 *      have inline margin-top + padding-top from WP spacing presets.
 *      Nuclear reset required; each pd-section owns its own vertical rhythm.
 *   4. is-layout-constrained  → lifts max-width cap so sections go full-bleed.
 *
 * These rules are stripped from the editor CSS by the block_editor_settings_all
 * filter in fehno-blocks.php (preg_replace + str_replace '.fehno-pd ').
 * ────────────────────────────────────────────────────────────────────── */

body.fehno-pd {
  background: #0d0d0d;
  color: #f0ede8;
}

body.fehno-pd .wp-block-post-title,
body.fehno-pd .wp-block-template-part { display: none !important; }

body.fehno-pd .woocommerce-store-notice,
body.fehno-pd .woocommerce-breadcrumb { display: none !important; }

body.fehno-pd main,
body.fehno-pd .wp-site-blocks,
body.fehno-pd .entry-content,
body.fehno-pd .wp-block-post-content {
  padding:   0 !important;
  margin:    0 !important;
  max-width: none !important;
}

body.fehno-pd main > .wp-block-group {
  margin:  0 !important;
  padding: 0 !important;
}

body.fehno-pd .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-pd .wp-block-post-content  > [class*="wp-block-fehno-"] {
  max-width:      none !important;
  padding-inline: 0 !important;
}

/* =========================================================================
   fehno/ebook-preview — floating teaser card + chapter preview modal
   v2 — premium card badge, safe-area modal, stronger typography
   ========================================================================= */

/* ── Theme accent tokens ─────────────────────────────────────────────────── */
/* Vivid palette chosen for "colorful/premium" feel on mobile */
.f-ep-wrap[data-theme="default"]  { --f-ep-accent: #502878; --f-ep-accent-rgb: 80,40,120;  --f-ep-soft: #f1ebf7; }
.f-ep-wrap[data-theme="migajera"] { --f-ep-accent: #C0386A; --f-ep-accent-rgb: 192,56,106; --f-ep-soft: #fdf0f5; }
.f-ep-wrap[data-theme="desapego"] { --f-ep-accent: #7B2FBE; --f-ep-accent-rgb: 123,47,190; --f-ep-soft: #f4edfb; }
.f-ep-wrap[data-theme="ep"]       { --f-ep-accent: #B5261A; --f-ep-accent-rgb: 181,38,26;  --f-ep-soft: #fdf0ef; }

/* Editor-preview theme hints */
.f-ep-editor-preview[data-theme="default"]  { --f-ep-accent: #502878; }
.f-ep-editor-preview[data-theme="migajera"] { --f-ep-accent: #C0386A; }
.f-ep-editor-preview[data-theme="desapego"] { --f-ep-accent: #7B2FBE; }
.f-ep-editor-preview[data-theme="ep"]       { --f-ep-accent: #B5261A; }

/* ── Floating teaser card — premium editorial popup ─────────────────────── */
.f-ep-badge {
	position: fixed;
	/* Hidden off-screen via bottom — NOT via translateY so iOS Safari hit-testing
	 * always matches the visual position after the animation completes.           */
	bottom: -300px;
	left: 50%;
	/* STATIC horizontal centering only — never animates, so iOS touch regions
	 * are always correct. Show/hide is handled by transitioning `bottom`.        */
	transform: translateX(-50%);
	z-index: 9000;
	/* Explicit box-sizing so padding stays INSIDE the declared width — prevents
	 * WP global box-model from expanding the card beyond 88vw.                  */
	box-sizing: border-box;
	width: min(88vw, 420px);
	/* Solid white background — explicit px color so no CSS-var chain can fail   */
	background: #ffffff;
	border-radius: 28px;
	padding: 26px 26px 22px;
	/* Clean, contained shadow — no large Y offset that bleeds above the card */
	box-shadow:
		0 8px 40px rgba(0,0,0,0.18),
		0 2px 10px rgba(0,0,0,0.09),
		0 0 0 1px rgba(0,0,0,0.05);
	/* Explicit column flex — resistant to any parent flex-direction inheritance  */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	cursor: pointer;
	touch-action: manipulation;  /* eliminates 300ms Chrome tap delay */
	opacity: 0;
	visibility: hidden;
	/* GPU layer hint so compositing doesn't interfere with fixed positioning */
	will-change: opacity, bottom;
	transition:
		bottom    0.52s cubic-bezier(0.22,1,0.36,1),
		opacity   0.44s ease,
		visibility 0s   0.44s;
}
.f-ep-badge.is-visible {
	bottom: 24px;   /* vh fallback for env() */
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
	opacity: 1;
	visibility: visible;
	transition:
		bottom    0.52s cubic-bezier(0.22,1,0.36,1),
		opacity   0.44s ease,
		visibility 0s   0s;
}

/* Close button — absolute top-right */
.f-ep-badge-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 28px;
	height: 28px;
	background: rgba(0,0,0,0.06);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease;
	padding: 0;
}
.f-ep-badge-close:hover { background: rgba(0,0,0,0.13); color: #333; }
.f-ep-badge-close:focus-visible { outline: 2px solid var(--f-ep-accent, #502878); outline-offset: 2px; }

/* Eyebrow chip */
.f-ep-badge-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "Outfit", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--f-ep-accent, #502878);
	/* Solid fallback for Safari < 15.4 which doesn't support rgba(var()) */
	background: rgba(80,40,120,0.09);
	background: rgba(var(--f-ep-accent-rgb, 80,40,120), 0.09);
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	margin-bottom: 16px;
	max-width: calc(100% - 38px); /* avoid close btn overlap */
}

/* Headline — large editorial hook */
.f-ep-badge-heading {
	font-family: "Outfit", sans-serif;
	font-size: clamp(18px, 5.2vw, 22px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: #0d0d0d;
	margin: 0 0 10px;
	padding-right: 20px; /* keep clear of close btn */
}

/* Support copy — smaller, warmer */
.f-ep-badge-body {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	margin: 0 0 20px;
}

/* CTA button — full-width, themed */
.f-ep-badge-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--f-ep-accent, #502878);
	color: #fff;
	font-family: "Outfit", sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 15px 22px;
	border-radius: 14px;
	border: none;
	cursor: pointer;
	touch-action: manipulation;  /* eliminates 300ms Chrome tap delay */
	width: 100%;
	text-align: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.f-ep-badge-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.f-ep-badge-cta:focus-visible {
	outline: 3px solid var(--f-ep-accent, #502878);
	outline-offset: 3px;
}
.f-ep-badge-cta-arrow {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.f-ep-badge-cta:hover .f-ep-badge-cta-arrow { transform: translateX(4px); }

/* Desktop: bottom-right corner */
@media (min-width: 640px) {
	.f-ep-badge {
		left: auto;
		right: 28px;
		transform: none;   /* no centering needed; right-aligned */
		width: min(88vw, 420px);
	}
	/* bottom starts at -300px (inherited from base), is-visible overrides to 28px */
	.f-ep-badge.is-visible { bottom: 28px; }
}

/* ── Floating teaser card — clean rebuild (v3.4+) ───────────────────────────
 * Uses .f-ep-teaser-* class names to avoid any conflict with the old
 * .f-ep-badge-* rules that shipped in earlier versions.
 *
 * KEY LAYOUT RULE: align-items: flex-start on the flex container so that
 * inline/inline-flex children (the chip) stay at their natural (small pill)
 * size instead of stretching to 100% width and becoming a gray bar.
 * Text elements and the button get width:100% individually to span full width.
 * ───────────────────────────────────────────────────────────────────────── */
.f-ep-teaser {
	position: fixed;
	bottom: -300px;          /* hidden off-screen; animate via bottom, NOT transform */
	left: 50%;
	transform: translateX(-50%);  /* STATIC centering — never animates (iOS hit-test safe) */
	z-index: 9000;
	box-sizing: border-box;
	width: min(90vw, 440px);
	background: #ffffff;
	border-radius: 30px;
	padding: 24px;
	/* flex-column with align-items:flex-start so the chip keeps its natural pill shape */
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* ← THE FIX: inline-flex chip stays small */
	gap: 14px;
	box-shadow:
		0 12px 48px rgba(0,0,0,0.20),
		0 3px 12px rgba(0,0,0,0.08),
		0 0 0 1px rgba(0,0,0,0.04);
	cursor: pointer;
	touch-action: manipulation;
	opacity: 0;
	visibility: hidden;
	will-change: opacity, bottom;
	transition:
		bottom    0.52s cubic-bezier(0.22,1,0.36,1),
		opacity   0.44s ease,
		visibility 0s   0.44s;
}
.f-ep-teaser.is-visible {
	bottom: 24px;
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
	opacity: 1;
	visibility: visible;
	transition:
		bottom    0.52s cubic-bezier(0.22,1,0.36,1),
		opacity   0.44s ease,
		visibility 0s   0s;
}

/* Close button — positioned at card top-right */
.f-ep-teaser-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,0.07);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	touch-action: manipulation;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.18s ease;
}
.f-ep-teaser-close:hover  { background: rgba(0,0,0,0.13); color: #333; }
.f-ep-teaser-close:focus-visible { outline: 2px solid var(--f-ep-accent, #502878); outline-offset: 2px; }

/* Eyebrow chip — inline pill at its natural content size (not stretched) */
.f-ep-teaser-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--f-ep-accent, #502878);
	background: rgba(80,40,120,0.09);          /* concrete fallback */
	background: rgba(var(--f-ep-accent-rgb, 80,40,120), 0.09);
	padding: 5px 12px 5px 9px;
	border-radius: 999px;
	/* align-self is NOT set → inherits flex-start from parent, stays a small pill */
}

/* Headline — large, bold, keeps clear of the X button */
.f-ep-teaser-title {
	font-family: "Outfit", sans-serif;
	font-size: clamp(19px, 5.2vw, 22px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: #0d0d0d;
	margin: 0;
	padding-right: 28px;   /* breathing room for the absolute X button */
	width: 100%;           /* stretch to card width even though parent is flex-start */
	box-sizing: border-box;
}

/* Supporting copy */
.f-ep-teaser-copy {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	margin: 0;
	width: 100%;
}

/* CTA button — full-width, accent-colored, never gray */
.f-ep-teaser-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	background-color: #502878;                           /* solid fallback if var() unavailable */
	background-color: var(--f-ep-accent, #502878);
	color: #ffffff;
	font-family: "Outfit", sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 16px 20px;
	border-radius: 14px;
	border: none;
	cursor: pointer;
	touch-action: manipulation;
	text-align: center;
	transition: opacity 0.2s ease;
}
.f-ep-teaser-button:hover { opacity: 0.88; }
.f-ep-teaser-button:focus-visible {
	outline: 3px solid var(--f-ep-accent, #502878);
	outline-offset: 3px;
}
.f-ep-teaser-arrow { flex-shrink: 0; transition: transform 0.2s ease; }
.f-ep-teaser-button:hover .f-ep-teaser-arrow { transform: translateX(4px); }

/* Desktop: bottom-right corner */
@media (min-width: 640px) {
	.f-ep-teaser {
		left: auto;
		right: 28px;
		transform: none;           /* no centering needed; right-anchored */
	}
	.f-ep-teaser.is-visible { bottom: 28px; }
}

/* ── Modal CTA padlock row ───────────────────────────────────────────────── */
/* ── Modal overlay ───────────────────────────────────────────────────────── */
/* Padding on all sides so landing page is visible behind the card */
.f-ep-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: max(20px, calc(env(safe-area-inset-top) + 14px)) 20px max(20px, calc(env(safe-area-inset-bottom) + 14px));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.f-ep-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s 0s;
}

/* Darkened + blurred backdrop — 0.82 opacity prevents page content bleeding through */
.f-ep-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,8,24,0.82);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

/* Card — premium centered floating card on ALL viewports
 * Not fullscreen — landing page remains visible behind the modal.
 * Safe-area handled by the modal's own padding.
 *
 * dvh = dynamic viewport height (iOS 16+). vh fallback ensures iOS < 16 works.
 * Entry animation uses scale-only — no translateY so the card header is never
 * pushed off-screen behind the browser address bar in Chrome mobile. */
.f-ep-card {
	position: relative;
	z-index: 1;
	background: #fff;
	width: min(100%, 760px);
	min-height: min(44vh, 380px);   /* iOS < 16 fallback */
	min-height: min(44dvh, 380px);  /* iOS 16+ progressive enhancement */
	max-height: min(84vh, 840px);   /* iOS < 16 fallback */
	max-height: min(84dvh, 840px);  /* iOS 16+ progressive enhancement */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	box-shadow:
		0 32px 88px rgba(0,0,0,0.24),
		0 6px 20px rgba(0,0,0,0.09);
	/* scale-only entry: no translateY so header stays in viewport on Chrome mobile */
	transform: scale(0.95);
	transition: transform 0.42s cubic-bezier(0.22,1,0.36,1);
}
.f-ep-modal.is-open .f-ep-card { transform: scale(1); }

@media (min-width: 640px) {
	.f-ep-modal { padding: 24px; }
	.f-ep-card {
		max-height: min(88vh, 860px);
		box-shadow:
			0 40px 100px rgba(0,0,0,0.26),
			0 8px 24px rgba(0,0,0,0.10);
	}
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.f-ep-card-header {
	padding: 22px 22px 16px;
	border-bottom: 1px solid rgba(0,0,0,0.07);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
}
.f-ep-card-meta { flex: 1; min-width: 0; }

.f-ep-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--f-ep-accent, #502878);
	margin: 0 0 6px;
}
.f-ep-heading {
	font-family: "Outfit", sans-serif;
	font-size: clamp(17px, 2.8vw, 24px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #0d0d0d;
	margin: 0;
}

.f-ep-close {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	background: rgba(0,0,0,0.06);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: background 0.2s ease, color 0.2s ease;
	margin-top: -2px;
}
.f-ep-close:hover { background: rgba(0,0,0,0.12); color: #111; }
.f-ep-close:focus-visible { outline: 2px solid var(--f-ep-accent, #502878); outline-offset: 2px; }

@media (min-width: 640px) {
	.f-ep-card-header { padding: 24px 32px 20px; }
}

/* ── Scrollable content area ─────────────────────────────────────────────── */
/* overflow: hidden is NOT used on the outer because it blocks iOS touch-scroll
 * events from reaching the inner element. The card itself (overflow: hidden)
 * handles visual clipping at the border-radius boundary.                      */
.f-ep-content-outer {
	flex: 1;
	position: relative;
	overflow: visible;  /* NOT hidden — that kills -webkit-overflow-scrolling on iOS */
	min-height: 0;      /* required for flex item to shrink below content size       */
	display: flex;
	flex-direction: column;
}
.f-ep-content-inner {
	flex: 1;            /* fill all available height — more reliable than height:100% */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;  /* momentum scroll on iOS                    */
	overscroll-behavior: contain;       /* prevent page scroll when content hits edge */
	padding: 28px 24px 56px;
	min-height: 0;
}

/* ── Reading typography — strong hierarchy for Spanish longform ──────────── */
.f-ep-content-inner p {
	font-family: "Georgia", "Cambria", "Times New Roman", serif;
	font-size: clamp(16px, 1.08vw, 17.5px);
	line-height: 1.85;
	color: #222;
	margin: 0 0 1.45em;
}

/* h2 — chapter/section title: largest, with subtle accent underline */
.f-ep-content-inner h2 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(21px, 2.5vw, 27px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #0d0d0d;
	margin: 2em 0 0.65em;
	padding-bottom: 0.35em;
	border-bottom: 2px solid rgba(var(--f-ep-accent-rgb, 80,40,120), 0.16);
}
.f-ep-content-inner h2:first-child { margin-top: 0; }

/* h3 — subsection: clear but slightly smaller */
.f-ep-content-inner h3 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: #111;
	margin: 1.8em 0 0.5em;
}
.f-ep-content-inner h3:first-child { margin-top: 0; }

/* h4 — minor label */
.f-ep-content-inner h4 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(15px, 1.6vw, 17px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: #333;
	margin: 1.5em 0 0.4em;
}
.f-ep-content-inner h4:first-child { margin-top: 0; }

/* Inline */
.f-ep-content-inner strong { font-weight: 700; color: #0d0d0d; }
.f-ep-content-inner em     { font-style: italic; color: #333; }

/* Blockquote */
.f-ep-content-inner blockquote {
	margin: 1.75em 0;
	padding: 16px 20px;
	border-left: 3px solid var(--f-ep-accent, #502878);
	background: rgba(var(--f-ep-accent-rgb, 80,40,120), 0.05);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #444;
}
.f-ep-content-inner blockquote p {
	margin: 0;
	font-size: clamp(15px, 1vw, 17px);
}

/* Lists */
.f-ep-content-inner ul, .f-ep-content-inner ol {
	margin: 0 0 1.45em 1.6em;
	padding: 0;
}
.f-ep-content-inner li {
	font-family: "Georgia", serif;
	font-size: clamp(16px, 1.08vw, 17.5px);
	line-height: 1.75;
	color: #222;
	margin-bottom: 0.5em;
}

/* Divider */
.f-ep-content-inner hr {
	border: none;
	border-top: 1px solid rgba(0,0,0,0.1);
	margin: 2em 0;
}

@media (min-width: 640px) {
	.f-ep-content-inner { padding: 32px 44px 72px; }
}

/* ── Reading content typography ─────────────────────────────────────────── */
/*
 * All rules scoped to .f-ep-readable-content — zero bleed onto the teaser
 * card, modal heading/eyebrow, paywall card, or any landing-page block.
 *
 * PARAGRAPH RHYTHM
 *   margin-bottom: 1.2em on every <p> gives consistent editorial spacing.
 *   p:last-child resets to 0 so the final paragraph doesn't push the
 *   paywall zone down unexpectedly.
 *
 * HEADINGS — editorial book style, ~1–2px above body size
 *   h2: 1.1em · h3: 1.05em · h4: 1em. Slight letter-spacing and explicit
 *   font-weight make them feel intentional without looking like blog titles.
 *   Reduced top margins vs previous (1.8em→1.5em) keep rhythm tighter.
 *
 * <br> SPACING — Safari/WebKit–safe via padding-bottom
 *   `height` on block <br> is unreliable in WebKit (ignored in some contexts).
 *   `padding-bottom` is part of the computed box model and is never ignored.
 *   display:block → void inline element becomes a block with measurable size.
 *   Each additional <br> adds its own padding, so spacing accumulates:
 *     1 × <br>         → 0.65em
 *     2 × <br><br>     → 0.65 + 0.75 = 1.40em
 *     3 × <br><br><br> → 0.65 + 0.75 + 0.75 = 2.15em
 *   Works identically inside <p> and at block level between paragraphs.
 *
 * INLINE EMPHASIS
 *   Explicit rules for strong/b/em/i override browser-default quirks and
 *   any accidental theme inheritance. Editorial weight: 700 for bold with
 *   -0.01em tracking compensation; natural italic for em/i.
 *
 * JUSTIFY
 *   @media (min-width:380px) keeps justify off ultra-narrow viewports.
 *   hyphens:auto requires a lang attribute on <html> (es for Spanish).
 */

/* Paragraph rhythm */
.f-ep-readable-content p            { margin-top: 0; margin-bottom: 1.2em; }
.f-ep-readable-content p:last-child { margin-bottom: 0; }

/* Headings — editorial book style, Georgia to match body prose.
 * Overrides the Outfit/sans-serif + border-bottom from .f-ep-content-inner h2/h3/h4
 * so chapter headings feel like a printed book, not a landing page. */
.f-ep-readable-content h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.01em;
	margin-top: 1.5em;
	margin-bottom: 0.4em;
	border-bottom: none;   /* cancel .f-ep-content-inner h2 decorative border */
	padding-bottom: 0;
}
.f-ep-readable-content h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.01em;
	margin-top: 1.3em;
	margin-bottom: 0.35em;
}
.f-ep-readable-content h4 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin-top: 1.1em;
	margin-bottom: 0.3em;
}

/* <br> spacing — single <br> within paragraphs.
 * Note: double <br><br> is converted to </p><p> in render.php before wpautop(),
 * so this rule handles single line-breaks only.
 * display:block + margin-bottom is more reliable than padding-bottom on
 * mobile Safari where padding on void elements can be ignored. */
.f-ep-readable-content br { display: block; margin-bottom: 0.7em; }

/* Inline emphasis — explicit to prevent theme/browser default oddities */
.f-ep-readable-content strong,
.f-ep-readable-content b {
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.01em;  /* subtle tracking comp for visual weight */
	color: inherit;
}
.f-ep-readable-content em,
.f-ep-readable-content i {
	font-style: italic;
	font-weight: inherit;
	color: inherit;
}

/* Justify paragraphs on screens wide enough that rivers aren't a problem */
@media (min-width: 380px) {
	.f-ep-readable-content p {
		text-align: justify;
		text-justify: inter-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* ── Locked preview (server-side bottom ~20%) ────────────────────────────── */
/*
 * Two-layer structure:
 *
 * Locked-preview two-layer architecture (v5.1):
 *
 *   .f-ep-locked-preview  (outer — clip + overall fade-out)
 *     - overflow:hidden clips the inner content to max-height
 *     - isolation:isolate creates a new stacking context so ::after
 *       backdrop-filter blurs only the content inside this block,
 *       not the paywall card or anything else below it in the page
 *     - mask-image fades the ENTIRE block (inner + overlay) to transparent
 *       at the bottom, merging it cleanly into the content gap above the CTA
 *     - NO filter, NO opacity on this layer
 *
 *   .f-ep-locked-inner  (inner — sharp, white background)
 *     - Renders the locked text fully sharp and crisp (no blur here)
 *     - background: #fff — critical: the white background belongs to the
 *       blurred compositing layer so backdrop-filter blurs background + text
 *       together, not just text glyphs floating on an unblurred white parent.
 *       This eliminates the vertical seam / rectangular edge artifact.
 *     - NO filter:blur, NO opacity, NO transform:scale
 *
 *   .f-ep-locked-preview::after  (bottom-only blur overlay)
 *     - position:absolute; inset:0 — covers FULL WIDTH of the container,
 *       so the blur has no left/right edge to create a seam against
 *     - backdrop-filter:blur(4px) — blurs everything behind the overlay:
 *       the white background of .f-ep-locked-inner + the text on top of it.
 *       Because it's the composited pixel output that is blurred (not just
 *       text glyphs), the result looks like the whole area is going soft.
 *     - mask-image on ::after: transparent at top → opaque at bottom.
 *       This makes the blur effect invisible where the overlay mask is clear
 *       and fully visible only at the bottom ~35% of the container.
 *       Top ~65%: mask transparent → backdrop-filter has no visual effect
 *       Bottom ~35%: mask progressively opaque → blur kicks in gradually
 *
 * Visual result:
 *   Top 65 %: fully readable, crisp text on white — no blur whatsoever
 *   Bottom 35 %: progressively blurred and faded; impossible to read comfortably
 *   Very bottom: fades to transparent via the outer mask → clean merge into CTA gap
 *   Full width: no vertical seams anywhere
 *
 * Fallback (browsers without backdrop-filter — old Android Chrome, Firefox <103):
 *   @supports not block swaps backdrop-filter for a white gradient overlay that
 *   visually obscures the bottom portion without blur.
 */
.f-ep-locked-preview {
	position: relative;
	overflow: hidden;
	isolation: isolate;      /* keeps ::after backdrop-filter inside this block */
	max-height: 170px;
	margin-top: 18px;
	background: transparent;
	border: 0;
	box-shadow: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	/* Outer fade — block stays fully visible until ~55 %, then fades out.
	   This masks the entire composited output (inner text + blur overlay)
	   so the locked section dissolves smoothly rather than clipping hard. */
	-webkit-mask-image: linear-gradient( to bottom,
		black                  0%,
		black                 55%,
		rgba(0,0,0,0.55)      80%,
		transparent           100%
	);
	mask-image: linear-gradient( to bottom,
		black                  0%,
		black                 55%,
		rgba(0,0,0,0.55)      80%,
		transparent           100%
	);
}

/* Inner: sharp, white-backed content — NO blur here.
   The white background is on this layer so that backdrop-filter on ::after
   blurs both background pixels and text pixels together, eliminating the
   hard edge that appeared when only text glyphs were blurred. */
.f-ep-locked-inner {
	display: block;
	background: #fff;
	font-family: Georgia, "Times New Roman", serif;
}

/* Bottom-only blur overlay — covers full width, visible only near the bottom.
   The gradient mask on ::after is independent of the outer container mask:
   the outer mask controls overall opacity; this mask controls blur locality. */
.f-ep-locked-preview::after {
	content: "";
	position: absolute;
	inset: 0;                /* left:0 right:0 top:0 bottom:0 — full container */
	pointer-events: none;
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	/* Blur visible only at the bottom ~35 % of the container.
	   transparent = backdrop-filter invisible (no blur effect)
	   opaque      = backdrop-filter fully active (full blur) */
	-webkit-mask-image: linear-gradient( to bottom,
		transparent             0%,
		transparent            60%,
		rgba(0,0,0,0.20)       72%,
		rgba(0,0,0,0.72)       88%,
		rgba(0,0,0,1.00)      100%
	);
	mask-image: linear-gradient( to bottom,
		transparent             0%,
		transparent            60%,
		rgba(0,0,0,0.20)       72%,
		rgba(0,0,0,0.72)       88%,
		rgba(0,0,0,1.00)      100%
	);
}

/* Fallback: browsers that don't support backdrop-filter (Firefox <103,
   old Android Chrome). Replace blur with a white gradient that visually
   covers the bottom portion. Not as premium as blur, but still obscures. */
@supports not (backdrop-filter: blur(1px)) {
	.f-ep-locked-preview::after {
		background: linear-gradient( to bottom,
			transparent                   0%,
			transparent                  58%,
			rgba(255,255,255,0.60)       74%,
			rgba(255,255,255,0.92)       92%,
			rgba(255,255,255,1.00)      100%
		);
	}
}

/* ── Paywall card — normal document flow after chapter content ───────────── */
/*
 * No overlay, no negative margins, no JS height measurement.
 * The card appears naturally after all readable content inside the scroll
 * container (.f-ep-content-inner). Scroll works unobstructed on all devices.
 * A simple top border visually separates content from the CTA zone.
 */
.f-ep-paywall-card {
	margin: 28px auto 0;
	max-width: 92%;
	width: 92%;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 20px;
	box-shadow:
		0 4px 20px rgba(0,0,0,0.07),
		0 1px 4px  rgba(0,0,0,0.04);
	padding: 24px 20px 20px;
	text-align: center;
	box-sizing: border-box;
}

/* Lock icon circle */
.f-ep-paywall-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(80,40,120,0.09);           /* solid fallback */
	background: rgba(var(--f-ep-accent-rgb, 80,40,120), 0.09);
	border-radius: 50%;
	color: var(--f-ep-accent, #502878);
	margin-bottom: 10px;
}

/* "CONTENIDO BLOQUEADO" eyebrow label */
.f-ep-paywall-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--f-ep-accent, #502878);
	opacity: 0.75;
	margin: 0 0 8px;
}

/* Hook copy */
.f-ep-paywall-title {
	font-family: "Outfit", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #444;
	margin: 0 0 14px;
}

/* CTA button — premium purple, full-width inside the card */
.f-ep-paywall-button {
	display: block;
	width: 100%;
	background-color: #502878;                         /* solid fallback */
	background-color: var(--f-ep-accent, #502878);
	color: #ffffff !important;
	font-family: "Outfit", sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 13px 20px;
	border-radius: 12px;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-sizing: border-box;
	touch-action: manipulation;
}
.f-ep-paywall-button:hover { opacity: 0.88; transform: translateY(-1px); }
.f-ep-paywall-button:focus-visible { outline: 3px solid var(--f-ep-accent, #502878); outline-offset: 3px; }

/* Subline below CTA */
.f-ep-paywall-subline {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	color: #aaa;
	margin: 8px 0 0;
	letter-spacing: 0.02em;
}

@media (min-width: 640px) {
	.f-ep-paywall-card   { padding: 22px 24px 20px; max-width: 480px; width: 480px; }
	.f-ep-paywall-button { font-size: 15px; padding: 14px 28px; }
}

/* ── Editor canvas preview card ──────────────────────────────────────────── */
/* Base: flex layout for the disabled/minimal variant (.f-ep-editor-preview--disabled) */
.f-ep-editor-preview {
	border: 2px dashed rgba(80,40,120,0.28);
	border-radius: 12px;
	padding: 16px 18px;
	background: rgba(80,40,120,0.04);
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	--f-ep-accent: #502878;
}
.f-ep-editor-preview--disabled { opacity: 0.45; }

/* Rich preview variant (.f-ep-editor-preview--full) — overrides flex to block */
.f-ep-editor-preview--full {
	display: block;
	padding: 0;
	overflow: hidden;
}
.f-ep-ep-header {
	padding: 14px 16px 12px;
	border-bottom: 1px solid rgba(80,40,120,0.10);
}
.f-ep-ep-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--f-ep-accent, #502878);
	margin: 0 0 4px;
}
.f-ep-ep-title {
	font-family: "Outfit", sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #111;
	margin: 0;
	line-height: 1.3;
}
.f-ep-ep-body {
	padding: 12px 16px 0;
	font-family: Georgia, serif;
	font-size: 12px;
	line-height: 1.7;
	color: #333;
	max-height: 80px;
	overflow: hidden;
}
.f-ep-ep-body--empty {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	color: #bbb;
	font-style: italic;
}
.f-ep-ep-blur {
	padding: 4px 16px 0;
	font-family: Georgia, serif;
	font-size: 12px;
	line-height: 1.7;
	color: #333;
	max-height: 40px;
	overflow: hidden;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	user-select: none;
	pointer-events: none;
	-webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100% );
	mask-image:         linear-gradient( to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100% );
}
.f-ep-ep-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 16px 8px;
	padding: 7px 12px;
	background: var(--f-ep-accent, #502878);
	color: #fff;
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	font-weight: 700;
	border-radius: 8px;
	text-align: center;
}
.f-ep-ep-meta {
	padding: 6px 16px 10px;
	margin-top: 6px;
	font-family: "Outfit", sans-serif;
	font-size: 10px;
	color: #bbb;
	border-top: 1px solid rgba(0,0,0,0.06);
	letter-spacing: 0.03em;
}

/* Legacy elements — used by disabled state only */
.f-ep-editor-preview-icon {
	font-size: 26px;
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
}
.f-ep-editor-preview-meta { flex: 1; min-width: 0; }
.f-ep-editor-preview-label {
	font-family: "Outfit", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--f-ep-accent, #502878);
	margin: 0 0 5px;
}
.f-ep-editor-preview-heading {
	font-family: "Outfit", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.f-ep-editor-preview-sub {
	font-family: "Inter", sans-serif;
	font-size: 12px;
	color: #777;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.f-ep-editor-preview-timing {
	font-family: "Outfit", sans-serif;
	font-size: 10.5px;
	color: #aaa;
	margin: 0;
	letter-spacing: 0.04em;
}