/* Fashion Content Planner — estilos de la landing (nav, mobile menu, secciones y carrito) */

:root {
	--fcp-pink: #EEC4DB;
	--fcp-pink-soft: #FBE7F0;
	--fcp-stripe-pink: #F7E8ED;
	--fcp-stripe-cream: #FBF8F4;
	--fcp-pink-dark: #D98FB4;
	--fcp-pink-deep: #B85C8D;
	--fcp-cream: #FFFBF6;
	--fcp-ink: #2B2226;
	--fcp-ink-soft: #6B5D62;
	--fcp-font-display: 'Anton', sans-serif;
	--fcp-font-body: 'Jost', sans-serif;
	--fcp-font-script: 'Playfair Display', serif;
}

.fcp-landing {
	font-family: var(--fcp-font-body);
	color: var(--fcp-ink);
	line-height: 1.6;
	overflow-x: hidden;
	position: relative;
	/* Franjas de fondo (candy stripes) — visibles en toda la landing, igual que en las referencias.
	   !important porque muchos plugins de caché/optimización (LiteSpeed, WP Rocket, Autoptimize,
	   "Remove Unused CSS") combinan/minifican mal el CSS y terminan pisando este fondo. */
	background-color: var(--fcp-stripe-cream) !important;
	background-image: repeating-linear-gradient(
		90deg,
		var(--fcp-stripe-pink) 0px,
		var(--fcp-stripe-pink) 140px,
		var(--fcp-stripe-cream) 140px,
		var(--fcp-stripe-cream) 280px
	) !important;
}

/* Respaldo: repetimos el mismo fondo en cada sección individual. Como todas arrancan
   en el mismo borde izquierdo, las rayas verticales calzan perfectamente y no se nota
   la costura — pero si por lo que sea el fondo del contenedor padre no se pinta,
   cada sección lo sigue mostrando igual. */
.fcp-landing > .fcp-section {
	background-color: var(--fcp-stripe-cream) !important;
	background-image: repeating-linear-gradient(
		90deg,
		var(--fcp-stripe-pink) 0px,
		var(--fcp-stripe-pink) 140px,
		var(--fcp-stripe-cream) 140px,
		var(--fcp-stripe-cream) 280px
	) !important;
}

/* Las secciones con fondo propio (rosa sólido / oscuro) no deben heredar las rayas */
.fcp-landing > .fcp-lograr {
	background-color: var(--fcp-pink) !important;
	background-image: none !important;
}

.fcp-landing > .fcp-cta-final {
	background-color: var(--fcp-ink) !important;
	background-image: none !important;
}

.fcp-landing * {
	box-sizing: border-box;
}

.fcp-landing section[id] {
	scroll-margin-top: 90px;
}

.fcp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fcp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}

.fcp-section {
	padding: 70px 0;
	position: relative;
	overflow: hidden;
}

.fcp-center {
	text-align: center;
}

.fcp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 12px;
	font-weight: 600;
	color: var(--fcp-pink-deep);
	margin: 0 0 14px;
}

.fcp-eyebrow-light {
	color: var(--fcp-ink);
	opacity: 0.65;
}

.fcp-h2 {
	font-family: var(--fcp-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 22px;
	color: var(--fcp-ink);
}

.fcp-h3 {
	font-family: var(--fcp-font-script);
	font-style: italic;
	font-weight: 400;
	font-size: 26px;
	margin: 0 0 24px;
}

.fcp-lead {
	max-width: 720px;
	margin: 0 auto 40px;
	font-size: 18px;
	color: var(--fcp-ink-soft);
}

/* Blobs / manchas decorativas suaves */
.fcp-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.fcp-blob-2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
	bottom: -140px;
	right: -80px;
}

/* Estrella decorativa */
.fcp-star {
	position: absolute;
	color: var(--fcp-pink-dark);
	z-index: 2;
}

.fcp-star-price {
	top: -16px;
	right: 26px;
}

/* ---------- BOTÓN ---------- */
.fcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fcp-pink-deep);
	color: #fff !important;
	font-family: var(--fcp-font-body);
	font-weight: 600;
	text-decoration: none !important;
	padding: 16px 38px;
	border-radius: 999px;
	font-size: 15px;
	letter-spacing: 0.03em;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: 0 10px 24px rgba(184, 92, 141, 0.28);
}

.fcp-btn:hover {
	background: #a5487a;
	transform: translateY(-2px);
	color: #fff;
}

.fcp-btn.fcp-btn-lg {
	padding: 18px 46px;
	font-size: 16px;
}

.fcp-btn.fcp-btn-nav {
	padding: 11px 22px;
	font-size: 13px;
	box-shadow: none;
}

.fcp-btn.fcp-btn-mobile {
	width: 100%;
	margin-top: 10px;
}

.fcp-btn-disabled {
	opacity: 0.6;
	pointer-events: none;
}

.fcp-btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* WooCommerce agrega automáticamente un link "Ver carrito" (o "View cart") al lado
   del botón después de un add-to-cart exitoso, y a veces también un aviso general
   arriba de la página. Ya mostramos nuestro propio aviso (toast), así que ocultamos
   todo lo que agregue WooCommerce por su cuenta para no duplicar texto sin estilo.
   (El filtro PHP wc_add_to_cart_message_html ya lo saca de raíz; esto es un respaldo). */
.fcp-landing a.added_to_cart,
.fcp-landing .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
	display: none !important;
	visibility: hidden !important;
}

/* ---------- NAV ---------- */
.fcp-nav {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--fcp-cream);
	border-bottom: 1px solid rgba(184, 92, 141, 0.16);
	box-shadow: 0 4px 16px rgba(43, 34, 38, 0.06);
	transition: box-shadow 0.25s ease;
}

.fcp-nav.is-scrolled {
	box-shadow: 0 8px 24px rgba(43, 34, 38, 0.1);
}

/* Cuando el admin bar de WordPress está visible (usuarios logueados), el nav sticky
   queda pegado debajo de él en vez de superponerse. */
body.admin-bar .fcp-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fcp-nav {
		top: 46px;
	}
}

.fcp-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.fcp-logo {
	font-family: var(--fcp-font-display);
	text-transform: uppercase;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--fcp-ink) !important;
	text-decoration: none !important;
	white-space: nowrap;
	flex-shrink: 0;
}

.fcp-logo span {
	color: var(--fcp-pink-deep);
}

.fcp-nav-links {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: nowrap;
}

.fcp-nav-links a {
	color: var(--fcp-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	padding: 4px 0;
	white-space: nowrap;
}

.fcp-nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1.5px;
	background: var(--fcp-pink-deep);
	transition: width 0.2s ease;
}

.fcp-nav-links a:hover::after {
	width: 100%;
}

.fcp-nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.fcp-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.fcp-nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--fcp-ink);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.fcp-nav-toggle.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fcp-nav-toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.fcp-nav-toggle.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.fcp-mobile-menu {
	display: none;
	flex-direction: column;
	padding: 6px 24px 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--fcp-cream);
	border-top: 1px solid rgba(184, 92, 141, 0.12);
}

.fcp-mobile-menu.is-open {
	max-height: 480px;
}

.fcp-mobile-menu a {
	color: var(--fcp-ink);
	text-decoration: none;
	font-size: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(184, 92, 141, 0.12);
}

.fcp-mobile-menu-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(184, 92, 141, 0.12);
	font-size: 15px;
	color: var(--fcp-ink-soft);
}

.fcp-mobile-menu-cart .fcp-cart-icon-link {
	padding: 0;
}

/* ---------- HERO ---------- */
.fcp-hero {
	padding: 48px 0 70px;
}

.fcp-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.fcp-hero-text {
	text-align: left;
}

.fcp-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 8px 18px 8px 14px;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(43, 34, 38, 0.08);
	margin: 0 0 22px;
}

.fcp-star-eyebrow {
	position: static;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.fcp-hero-title {
	font-family: var(--fcp-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.05;
	letter-spacing: 0.005em;
	margin: 0 0 22px;
	color: var(--fcp-ink);
}

.fcp-hero-text .fcp-subtitle {
	font-size: 19px;
	color: var(--fcp-ink-soft);
	margin: 0 0 30px;
	max-width: 460px;
}

.fcp-hero-text .fcp-hero-footer {
	margin-top: 24px;
	font-size: 14px;
	color: var(--fcp-ink-soft);
	max-width: 440px;
}

.fcp-hero-banner {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(43, 34, 38, 0.16);
}

.fcp-hero-banner img {
	width: 100%;
	display: block;
}

@media (max-width: 900px) {
	.fcp-hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.fcp-hero-text,
	.fcp-hero-text .fcp-subtitle,
	.fcp-hero-text .fcp-hero-footer {
		text-align: center;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
	.fcp-hero-eyebrow {
		margin-left: auto;
		margin-right: auto;
	}
	.fcp-hero-text {
		text-align: center;
	}
	.fcp-hero-text .fcp-btn {
		display: flex;
		width: fit-content;
		margin: 0 auto;
	}
}

/* ---------- PANEL BLANCO (secciones con imagen + texto sobre el fondo rayado) ---------- */
.fcp-panel {
	background: #fff;
	border-radius: 28px;
	padding: 56px;
	box-shadow: 0 20px 60px rgba(43, 34, 38, 0.09);
}

.fcp-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.fcp-two-col-reverse .fcp-col-text {
	order: 1;
}

.fcp-col-img img {
	width: 100%;
	border-radius: 16px;
	display: block;
}

.fcp-polaroid {
	position: relative;
	background: var(--fcp-cream);
	padding: 12px 12px 12px;
	border-radius: 12px;
	transform: rotate(-1.5deg);
}

.fcp-polaroid-right {
	transform: rotate(1.5deg);
}

.fcp-empathy {
	margin-top: 22px;
	font-style: italic;
	color: var(--fcp-ink-soft);
	border-left: 3px solid var(--fcp-pink);
	padding-left: 16px;
}

/* ---------- LISTAS CON CHECK ---------- */
.fcp-check-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.fcp-check-list li {
	position: relative;
	padding: 10px 0 10px 32px;
	font-size: 16px;
	border-bottom: 1px solid rgba(184, 92, 141, 0.15);
}

.fcp-check-list li::before {
	content: '✔';
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--fcp-pink-deep);
	font-size: 14px;
}

.fcp-check-list-q li::before {
	content: '?';
	font-weight: 700;
}

.fcp-check-list-2col {
	column-count: 2;
	column-gap: 40px;
}

.fcp-check-list-2col li {
	break-inside: avoid;
}

.fcp-check-list-center {
	max-width: 640px;
	margin: 0 auto;
}

.fcp-check-list-center li {
	text-align: left;
}

/* ---------- LA SOLUCIÓN ---------- */
.fcp-benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 50px;
}

.fcp-benefit-card {
	background: #fff;
	border-radius: 16px;
	padding: 26px 22px;
	font-size: 15px;
	box-shadow: 0 10px 30px rgba(43, 34, 38, 0.07);
}

.fcp-benefit-card p {
	margin: 0;
}

.fcp-benefit-num {
	display: block;
	font-family: var(--fcp-font-script);
	font-style: italic;
	font-size: 26px;
	color: var(--fcp-pink-dark);
	margin-bottom: 10px;
}

.fcp-includes {
	background: #fff;
	border-radius: 24px;
	padding: 46px 50px;
	box-shadow: 0 16px 40px rgba(43, 34, 38, 0.08);
}

/* ---------- QUÉ VAS A LOGRAR ---------- */
.fcp-lograr {
	background-color: var(--fcp-pink);
	background-image: none;
}

.fcp-lograr .fcp-h2 {
	color: var(--fcp-ink);
}

.fcp-lograr .fcp-check-list li {
	border-bottom-color: rgba(43, 34, 38, 0.15);
}

.fcp-lograr .fcp-check-list li::before {
	color: var(--fcp-ink);
}

/* ---------- PRECIO ---------- */
.fcp-precio-box {
	max-width: 480px;
	text-align: center;
	background: #fff;
	border-radius: 28px;
	padding: 56px 44px;
	box-shadow: 0 24px 60px rgba(43, 34, 38, 0.14);
}

.fcp-price {
	font-family: var(--fcp-font-display);
	font-size: 52px;
	margin: 0 0 24px;
	color: var(--fcp-pink-deep);
}

.fcp-price ins {
	text-decoration: none;
}

.fcp-price del {
	font-size: 0.5em;
	opacity: 0.5;
	margin-right: 10px;
}

.fcp-precio-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	color: var(--fcp-ink-soft);
}

.fcp-precio-features li {
	padding: 6px 0;
}

/* ---------- SOBRE MÍ ---------- */
.fcp-quote-mark {
	font-family: var(--fcp-font-script);
	font-size: 70px;
	line-height: 1;
	color: var(--fcp-pink);
	display: block;
	margin-bottom: -14px;
}

/* ---------- FAQ ---------- */
.fcp-accordion {
	max-width: 720px;
	margin: 44px auto 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fcp-accordion-item {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(184, 92, 141, 0.14);
	box-shadow: 0 10px 26px rgba(43, 34, 38, 0.06);
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.fcp-accordion-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 34px rgba(43, 34, 38, 0.09);
}

.fcp-accordion-item.is-open {
	border-color: var(--fcp-pink-dark);
	box-shadow: 0 18px 44px rgba(184, 92, 141, 0.22);
}

.fcp-accordion-trigger {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 24px 26px;
	font-family: var(--fcp-font-body);
	font-weight: 600;
	font-size: 16.5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	cursor: pointer;
	color: var(--fcp-ink);
}

.fcp-accordion-q {
	position: relative;
	padding-left: 30px;
}

/* Numeritos de estilo "01, 02..." como acento, en línea con el resto de la landing */
.fcp-accordion-q::before {
	content: '?';
	position: absolute;
	left: 0;
	top: -1px;
	font-family: var(--fcp-font-script);
	font-style: italic;
	font-size: 20px;
	color: var(--fcp-pink-dark);
}

.fcp-accordion-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fcp-pink-soft, #FBE7F0);
	color: var(--fcp-pink-deep);
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.fcp-accordion-item.is-open .fcp-accordion-trigger {
	background: #FBE7F0;
}

.fcp-accordion-q {
	color: var(--fcp-ink);
}

.fcp-accordion-item.is-open .fcp-accordion-icon {
	transform: rotate(135deg);
	background: var(--fcp-pink-deep);
	color: #fff;
}

.fcp-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 0 26px;
}

.fcp-accordion-item.is-open .fcp-accordion-panel {
	padding: 0 26px 24px;
}

.fcp-accordion-panel p {
	margin: 0;
	padding-left: 30px;
	color: var(--fcp-ink-soft);
	line-height: 1.7;
	font-size: 15px;
}

/* ---------- CTA FINAL ---------- */
.fcp-cta-final {
	background-color: var(--fcp-ink);
	background-image: none;
	color: #fff;
	text-align: center;
}

.fcp-cta-final .fcp-h2 {
	color: #fff;
}

.fcp-social {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
}

.fcp-social a {
	color: var(--fcp-pink);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.fcp-social a:hover {
	color: #fff;
}

/* ---------- ÍCONO DE CARRITO ---------- */
.fcp-cart-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--fcp-ink);
	text-decoration: none !important;
	padding: 6px;
}

.fcp-cart-icon-link svg {
	color: inherit;
}

.fcp-cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	background: var(--fcp-pink-deep);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

.fcp-cart-menu-item {
	display: inline-flex;
	align-items: center;
}

.fcp-toast {
	position: fixed;
	bottom: 28px;
	right: 28px;
	background: var(--fcp-ink);
	color: #fff;
	padding: 14px 22px;
	border-radius: 12px;
	font-family: var(--fcp-font-body);
	font-size: 14px;
	box-shadow: 0 16px 36px rgba(0,0,0,0.25);
	z-index: 99999;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.fcp-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.fcp-toast a {
	color: var(--fcp-pink);
	margin-left: 10px;
	text-decoration: underline;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
	.fcp-nav-links,
	.fcp-nav-actions .fcp-btn-nav {
		display: none;
	}

	.fcp-nav-toggle {
		display: flex;
	}

	.fcp-mobile-menu {
		display: flex;
	}

	.fcp-two-col {
		grid-template-columns: 1fr;
	}

	.fcp-two-col-reverse .fcp-col-text {
		order: 0;
	}

	.fcp-panel {
		padding: 32px 24px;
	}

	.fcp-hero {
		padding: 24px 0 50px;
	}

	.fcp-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fcp-check-list-2col {
		column-count: 1;
	}

	.fcp-includes {
		padding: 34px 26px;
	}

	.fcp-section {
		padding: 50px 0;
	}

	.fcp-polaroid {
		transform: none;
	}
}

@media (max-width: 520px) {
	.fcp-benefits-grid {
		grid-template-columns: 1fr;
	}

	.fcp-precio-box {
		padding: 40px 26px;
	}

	.fcp-subtitle {
		font-size: 17px;
	}
}