/* ============================================================
   Érase una vez — design system (mobile-first)
   Tokens: navy #242B57 · magenta #EC2A7A · Baloo 2 / Mulish / Caveat
   Radios: 12 inputs · 16 selectores · 20 tarjetas · píldora botones
   Espaciado base 8 (8-16-32-80)
   ============================================================ */

:root {
	--e1v-navy: #242B57;
	--e1v-magenta: #EC2A7A;
	--e1v-magenta-hover: #D31E6A;
	--e1v-cielo: #79C3E6;
	--e1v-estrella: #F6B73C;
	--e1v-rosa-suave: #FDEDF4;
	--e1v-cielo-suave: #EAF5FB;
	--e1v-crema: #FBF6EF;
	--e1v-gris-fondo: #F4F5FA;
	--e1v-tinta: #1B2044;
	--e1v-secundario: #62668C;
	--e1v-nav-muted: #B9BEDF;
	--e1v-borde: #E5E7F2;
	--e1v-error: #E0364B;
	--e1v-exito: #2E9E6B;
	--e1v-whatsapp: #25D366;

	--e1v-font-title: 'Baloo 2', 'Trebuchet MS', sans-serif;
	--e1v-font-body: 'Mulish', 'Segoe UI', sans-serif;
	--e1v-font-accent: 'Caveat', cursive;

	--e1v-radius-input: 12px;
	--e1v-radius-selector: 16px;
	--e1v-radius-card: 20px;
	--e1v-radius-pill: 999px;

	--e1v-space-1: 8px;
	--e1v-space-2: 16px;
	--e1v-space-3: 24px;
	--e1v-space-4: 32px;
	--e1v-space-6: 48px;
	--e1v-space-8: 64px;
	--e1v-space-10: 80px;

	--e1v-shadow-card: 0 2px 10px rgba(36, 43, 87, .09);
	--e1v-shadow-card-hover: 0 12px 28px rgba(36, 43, 87, .16);
	--e1v-shadow-cta: 0 6px 18px rgba(236, 42, 122, .35);
	--e1v-focus-ring: 0 0 0 4px var(--e1v-rosa-suave);

	--e1v-container: 1280px;
	--e1v-header-h: 64px;
}

/* ---------- Base ---------- */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--e1v-tinta);
	background: #fff;
	font-family: var(--e1v-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	font-family: var(--e1v-font-title);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .5em;
}

a {
	color: var(--e1v-magenta);
}

::placeholder {
	color: #A0A3BD;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--e1v-navy);
	color: #fff;
	padding: 10px 18px;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
}

/* ---------- Botones (píldora, ≥48px) ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	font-family: var(--e1v-font-body);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn--primary {
	background: var(--e1v-magenta);
	color: #fff;
	box-shadow: var(--e1v-shadow-cta);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

.btn--outline {
	background: #fff;
	color: var(--e1v-navy);
	border: 2px solid var(--e1v-navy);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: #F0F2FA;
}

.btn--sm {
	min-height: 40px;
	padding: 8px 20px;
	font-size: 14px;
	box-shadow: none;
}

/* ---------- Formularios (52px, foco magenta + halo) ---------- */

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
	width: 100%;
	height: 52px;
	border: 2px solid var(--e1v-borde);
	border-radius: var(--e1v-radius-input);
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--e1v-tinta);
	background: #fff;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

textarea {
	height: auto;
	padding: 12px 16px;
	resize: vertical;
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: var(--e1v-magenta);
	box-shadow: var(--e1v-focus-ring);
}

/* ---------- Barra promo ---------- */

.promo-bar {
	background: var(--e1v-magenta);
	color: #fff;
	text-align: center;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .3px;
	padding: 9px 16px;
}

/* ---------- Header sticky navy ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--e1v-navy);
	box-shadow: 0 2px 16px rgba(27, 32, 68, .28);
}

.site-header__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
	min-height: var(--e1v-header-h);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 16px;
}

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding img,
.custom-logo {
	height: 56px;
	width: auto;
	display: block;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .28));
}

.site-branding__name {
	color: #fff;
	font-family: var(--e1v-font-title);
	font-size: 22px;
	font-weight: 800;
	text-decoration: none;
}

.site-nav {
	display: none;
}

.site-nav__list {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
}

.site-nav__list a {
	color: var(--e1v-nav-muted);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: #fff;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: #fff;
	border-bottom-color: var(--e1v-magenta);
}

.site-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-header__cta {
	display: none;
}

.cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: 14px;
	background: rgba(255, 255, 255, .1);
	padding: 9px 16px;
	border-radius: var(--e1v-radius-pill);
	transition: background .15s ease;
}

.cart-pill:hover,
.cart-pill:focus-visible {
	background: rgba(255, 255, 255, .2);
}

/* ---------- Nav móvil ---------- */

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: #fff;
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

.site-header.is-nav-open .site-nav {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--e1v-navy);
	padding: 8px 16px 20px;
	box-shadow: 0 16px 24px rgba(27, 32, 68, .3);
}

.site-header.is-nav-open .site-nav__list {
	flex-direction: column;
	gap: 4px;
}

.site-header.is-nav-open .site-nav__list a {
	display: block;
	padding: 12px 8px;
	font-size: 17px;
	border-bottom: 0;
}

.site-header.is-nav-open .site-nav__list .current-menu-item > a {
	color: var(--e1v-magenta);
}

/* ---------- Main ---------- */

.site-main {
	min-height: 40vh;
}

.site-main > .entry {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: var(--e1v-space-4) 16px;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--e1v-navy);
	color: var(--e1v-nav-muted);
	padding: 40px 16px 24px;
	margin-top: var(--e1v-space-6);
}

@media (min-width: 768px) {
	.site-footer {
		padding: 50px 16px 28px;
		margin-top: var(--e1v-space-10);
	}
}

.site-footer__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
}

.newsletter {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--e1v-radius-card);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 40px;
}

.newsletter__title {
	font-family: var(--e1v-font-title);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.newsletter__sub {
	font-size: 14px;
	margin-top: 4px;
}

.newsletter__form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.newsletter__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.newsletter__input {
	height: 48px;
	width: 240px;
	max-width: 100%;
	flex: 1 1 200px;
	border: 2px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	border-radius: var(--e1v-radius-pill);
	padding: 0 18px;
	color: #fff;
}

.newsletter__input:focus {
	border-color: var(--e1v-magenta);
	box-shadow: none;
}

.newsletter__msg {
	font-weight: 800;
	margin: 0;
}

.newsletter__msg--ok {
	color: #7BE3A8;
}

.newsletter__msg--error {
	color: #FF9AA8;
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-footer__brand p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
	max-width: 280px;
}

.site-footer__logo .custom-logo {
	height: 77px;
	margin-bottom: 16px;
}

.site-footer__social {
	display: flex;
	gap: 10px;
}

.social-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: 15px;
	transition: background .15s ease;
}

.social-circle:hover,
.social-circle:focus-visible {
	background: var(--e1v-magenta);
	color: #fff;
}

.social-circle--wa:hover,
.social-circle--wa:focus-visible {
	background: var(--e1v-whatsapp);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.site-footer__heading {
	color: #fff;
	font-weight: 800;
	margin-bottom: 4px;
}

.site-footer__col a {
	color: var(--e1v-nav-muted);
	text-decoration: none;
	transition: color .15s ease;
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
	color: #fff;
}

.pay-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pay-chip {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 6px 12px;
	border-radius: 8px;
}

.site-footer__paynote {
	font-size: 12.5px;
	color: #8A90C0;
	margin-top: 6px;
	line-height: 1.5;
}

.site-footer__legal {
	padding-top: 22px;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- WhatsApp flotante (único flotante) ---------- */

.wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--e1v-whatsapp);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
	z-index: 60;
	transition: transform .15s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
	transform: scale(1.06);
}

/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
	.site-header__inner {
		padding: 0 24px;
		gap: 24px;
	}

	.site-header__cta {
		display: inline-flex;
	}

	.newsletter {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 26px 30px;
	}

	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.site-footer {
		padding: 50px 24px 28px;
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		padding: 0 32px;
		gap: 36px;
	}

	.site-nav {
		display: block;
	}

	.nav-toggle {
		display: none;
	}

	.site-branding img,
	.custom-logo {
		height: 82px;
	}

	.site-footer__cols {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.site-footer {
		padding: 50px 32px 28px;
	}
}

/* ============================================================
   Portada (front-page.php)
   ============================================================ */

.fp-kicker {
	font-family: var(--e1v-font-accent);
	font-size: 26px;
	color: var(--e1v-magenta);
}

.fp-kicker--cielo {
	color: var(--e1v-cielo);
}

.fp-star {
	color: var(--e1v-estrella);
}

.fp-link {
	color: var(--e1v-magenta);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}

.fp-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.fp-section__head h2,
.fp-como h2,
.fp-gal h2,
.fp-testis__title,
.fp-faq h2,
.fp-nos-historia h2 {
	font-size: clamp(28px, 4.5vw, 38px);
	margin: 0;
}

/* Twinkles */
.fp-twinkle {
	position: absolute;
	color: var(--e1v-estrella);
	font-size: 26px;
	animation: e1v-twinkle 3.8s ease-in-out infinite;
	pointer-events: none;
}

.fp-twinkle--2,
.fp-twinkle--4 {
	color: var(--e1v-cielo);
	font-size: 18px;
	animation-delay: .6s;
}

@keyframes e1v-twinkle {
	0%, 100% { opacity: .45; transform: scale(.85); }
	50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- Hero ---------- */

.fp-hero {
	background: linear-gradient(180deg, var(--e1v-crema) 0%, #FFFFFF 100%);
	overflow: hidden;
}

.fp-hero__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: var(--e1v-space-6) 16px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e1v-space-4);
	align-items: center;
}

.fp-hero__title {
	font-size: clamp(34px, 6vw, 58px);
	font-weight: 800;
	line-height: 1.05;
	margin: 10px 0 18px;
}

.fp-hero__title span {
	color: var(--e1v-magenta);
}

.fp-hero__lead {
	font-size: 17px;
	color: #4B4E6D;
	margin: 0 0 28px;
	max-width: 520px;
}

.fp-hero__ctas {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.fp-hero__trust {
	display: flex;
	gap: 18px 22px;
	margin-top: 30px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 800;
	color: var(--e1v-secundario);
}

.fp-hero__media {
	position: relative;
	max-width: 560px;
}

.fp-twinkle--1 { top: -18px; right: 0; }
.fp-twinkle--2 { bottom: 30px; left: -10px; }

.fp-hero__photo {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(36, 43, 87, .25);
	transform: rotate(1.5deg);
}

.fp-hero__photo img {
	width: 100%;
	display: block;
}

.fp-hero__quote {
	position: absolute;
	left: -6px;
	bottom: -22px;
	background: #fff;
	border-radius: 18px;
	padding: 14px 18px;
	box-shadow: 0 12px 32px rgba(36, 43, 87, .18);
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 320px;
}

.fp-hero__quote-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--e1v-rosa-suave);
	color: var(--e1v-magenta);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--e1v-font-title);
	flex-shrink: 0;
}

.fp-hero__quote-text {
	font-size: 13px;
	line-height: 1.45;
	color: #4B4E6D;
}

.fp-hero__quote-text b {
	color: var(--e1v-tinta);
}

/* ---------- Productos ---------- */

.fp-products {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: var(--e1v-space-8) 16px;
}

.fp-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.fp-card {
	background: #fff;
	border-radius: var(--e1v-radius-card);
	overflow: hidden;
	box-shadow: var(--e1v-shadow-card);
	transition: box-shadow .15s ease, transform .15s ease;
}

.fp-card:hover {
	box-shadow: var(--e1v-shadow-card-hover);
	transform: translateY(-3px);
}

.fp-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.fp-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--e1v-crema);
}

.fp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: var(--e1v-radius-pill);
	letter-spacing: .5px;
}

.fp-badge--navy { background: var(--e1v-navy); }
.fp-badge--magenta { background: var(--e1v-magenta); }

.fp-card__body {
	padding: 18px 20px 22px;
}

.fp-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.fp-card__sub {
	font-size: 13.5px;
	color: var(--e1v-secundario);
	margin-top: 4px;
}

.fp-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.fp-card__price {
	font-size: 18px;
	font-weight: 800;
}

.fp-card__price .woocommerce-Price-amount {
	font-weight: 800;
}

.fp-card__cta {
	font-weight: 800;
	font-size: 13.5px;
	padding: 9px 16px;
	border-radius: var(--e1v-radius-pill);
	white-space: nowrap;
}

.fp-card__cta--primary {
	background: var(--e1v-magenta);
	color: #fff;
}

.fp-card__cta--outline {
	background: #fff;
	color: var(--e1v-navy);
	border: 2px solid var(--e1v-navy);
	padding: 7px 16px;
}

/* ---------- Cómo funciona ---------- */

.fp-como {
	background: var(--e1v-navy);
	padding: var(--e1v-space-8) 16px;
}

.fp-como__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
}

.fp-como__head {
	text-align: center;
	margin-bottom: 44px;
}

.fp-como__head h2 {
	color: #fff;
	margin: 6px 0 0;
}

.fp-como__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.fp-como__card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--e1v-radius-card);
	padding: 24px 22px 26px;
	/* Con las ilustraciones, la tarjeta es una composición CENTRADA:
	   arte → número → título → texto, un solo eje. */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fp-como__num {
	margin: 0 auto 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--e1v-magenta);
	color: #fff;
	font-family: var(--e1v-font-title);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fp-como__title {
	font-family: var(--e1v-font-title);
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	margin: 14px 0 6px;
}

.fp-como__desc {
	font-size: 14.5px;
	color: var(--e1v-nav-muted);
	line-height: 1.55;
}

.fp-como__cta {
	text-align: center;
	margin-top: 36px;
}

/* ---------- Galería ---------- */

.fp-gal {
	background: var(--e1v-crema);
	padding: var(--e1v-space-8) 16px;
}

.fp-gal__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
}

.fp-gal__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.fp-gal__lead {
	color: var(--e1v-secundario);
	font-size: 16px;
	margin: 10px 0 28px;
	max-width: 620px;
}

.fp-gal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 170px;
	gap: 16px;
}

.fp-gal__cell {
	position: relative;
	border-radius: var(--e1v-radius-card);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(36, 43, 87, .1);
}

.fp-gal__cell--tall {
	grid-row: span 2;
}

.fp-gal__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fp-gal__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	background: repeating-linear-gradient(45deg, #F2ECE1, #F2ECE1 12px, #EFE7DA 12px, #EFE7DA 24px);
	border: 2px dashed #D9CFBB;
	border-radius: var(--e1v-radius-card);
	color: #8D8468;
	font-size: 13px;
	font-weight: 700;
}

.fp-gal__videotag {
	position: absolute;
	left: 14px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(27, 32, 68, .78);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	padding: 7px 13px;
	border-radius: var(--e1v-radius-pill);
	pointer-events: none;
}

.fp-gal__play {
	width: 0;
	height: 0;
	border-left: 9px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

/* ---------- Testimonios ---------- */

.fp-testis {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: var(--e1v-space-8) 16px;
}

.fp-testis__title {
	text-align: center;
	margin: 0 0 28px;
}

.fp-testis__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.fp-testi {
	background: #fff;
	border: 1px solid var(--e1v-borde);
	border-radius: var(--e1v-radius-card);
	padding: 24px 26px;
}

.fp-testi__stars {
	color: var(--e1v-estrella);
	font-size: 16px;
	letter-spacing: 2px;
}

.fp-testi__quote {
	font-size: 15px;
	line-height: 1.6;
	color: #4B4E6D;
	margin: 12px 0 16px;
}

.fp-testi__who {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fp-testi__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--e1v-font-title);
	font-size: 14px;
}

.fp-testi__avatar--cielo { background: var(--e1v-cielo-suave); color: #1F5E80; }
.fp-testi__avatar--rosa { background: var(--e1v-rosa-suave); color: #B81C5D; }
.fp-testi__avatar--ambar { background: #FFF7E8; color: #9A6B14; }

.fp-testi__name {
	font-weight: 800;
	font-size: 13.5px;
}

.fp-testi__check {
	color: var(--e1v-exito);
	font-weight: 700;
}

/* ---------- FAQ + contacto ---------- */

.fp-faq {
	background: var(--e1v-gris-fondo);
	padding: var(--e1v-space-8) 16px;
}

.fp-faq__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e1v-space-4);
	align-items: start;
}

.fp-faq__list h2 {
	margin: 0 0 22px;
}

.fp-faq__card {
	background: #fff;
	border-radius: var(--e1v-radius-selector);
	padding: 18px 22px;
	box-shadow: 0 1px 4px rgba(36, 43, 87, .06);
	margin-bottom: 12px;
}

.fp-faq__q {
	font-weight: 800;
	font-size: 15.5px;
}

.fp-faq__a {
	font-size: 14.5px;
	color: var(--e1v-secundario);
	line-height: 1.55;
	margin-top: 6px;
}

.fp-contact {
	background: #fff;
	border-radius: 24px;
	padding: 32px 28px;
	box-shadow: 0 8px 28px rgba(36, 43, 87, .1);
}

.fp-contact h2 {
	font-size: 28px;
	margin: 0 0 6px;
}

.fp-contact p {
	font-size: 15px;
	color: var(--e1v-secundario);
	margin: 0 0 22px;
}

.fp-contact__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fp-contact__privacy {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--e1v-secundario);
}

.fp-contact__privacy input {
	width: auto;
	height: auto;
}

.fp-contact__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #1F9D55;
	font-weight: 800;
	font-size: 14.5px;
	text-decoration: none;
	margin-top: 14px;
}

.fp-contact__msg {
	font-weight: 800;
	margin: 0 0 10px;
}

.fp-contact__msg--ok { color: var(--e1v-exito); }
.fp-contact__msg--error { color: var(--e1v-error); }

/* ---------- CTA final ---------- */

.fp-cta {
	position: relative;
	background: linear-gradient(160deg, var(--e1v-rosa-suave) 0%, var(--e1v-crema) 100%);
	padding: 60px 16px 84px;
	overflow: hidden;
	border-radius: 40px 40px 0 0;
	margin-top: 8px;
}

.fp-twinkle--3 { top: 36px; left: 8%; }
.fp-twinkle--4 { bottom: 60px; right: 40%; }

.fp-cta__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e1v-space-4);
	align-items: center;
}

.fp-cta__title {
	font-size: clamp(32px, 5vw, 44px);
	font-weight: 800;
	line-height: 1.08;
	margin: 4px 0 14px;
}

.fp-cta__lead {
	font-size: 16.5px;
	color: #4B4E6D;
	margin: 0 0 26px;
	max-width: 440px;
}

.fp-cta__media {
	display: flex;
	justify-content: center;
}

.fp-cta__img {
	width: 100%;
	max-width: 420px;
	border-radius: var(--e1v-radius-card);
	box-shadow: 0 18px 30px rgba(36, 43, 87, .2);
}

/* La CTA final pega directo con el footer (sin margen del main). */
body.home .site-footer {
	margin-top: 0;
}

/* ============================================================
   Tienda (archive-product.php)
   ============================================================ */

.shop-band {
	background: var(--e1v-crema);
	padding: var(--e1v-space-6) 16px;
}

.shop-band__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
}

.shop-band__title {
	font-size: clamp(34px, 5vw, 46px);
	margin: 4px 0 8px;
}

.shop-band__lead {
	color: var(--e1v-secundario);
	font-size: 16px;
	margin: 0 0 20px;
	max-width: 560px;
}

.shop-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.shop-pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 20px;
	border-radius: var(--e1v-radius-pill);
	background: #fff;
	border: 2px solid var(--e1v-borde);
	color: var(--e1v-tinta);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.shop-pill:hover {
	border-color: var(--e1v-navy);
}

.shop-pill.is-active {
	background: var(--e1v-navy);
	border-color: var(--e1v-navy);
	color: #fff;
}

.shop-grid-wrap {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: var(--e1v-space-6) 16px;
}

.fp-card__titlelink {
	color: inherit;
	text-decoration: none;
}

.fp-card__titlelink:hover {
	color: var(--e1v-magenta);
}

.shop-note {
	color: var(--e1v-secundario);
	font-size: 13.5px;
	font-weight: 700;
	margin-top: 24px;
}

.shop-empty {
	color: var(--e1v-secundario);
	padding: var(--e1v-space-4) 0;
}

/* Feedback nativo de WC al añadir por AJAX */
.fp-card__cta.loading {
	opacity: .5;
	pointer-events: none;
}

.fp-card__cta.added::after {
	content: ' ✓';
}

.added_to_cart {
	display: inline-block;
	margin-left: 8px;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--e1v-exito);
	text-decoration: none;
}

.shop-trust {
	padding: 0 16px var(--e1v-space-8);
}

.shop-trust__inner {
	max-width: var(--e1v-container);
	margin: 0 auto;
	background: var(--e1v-navy);
	border-radius: var(--e1v-radius-card);
	padding: 28px 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	color: var(--e1v-nav-muted);
}

.shop-trust__col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
}

.shop-trust__col b {
	color: #fff;
	font-size: 15px;
}

@media (min-width: 768px) {
	.shop-band {
		padding: var(--e1v-space-6) 24px;
	}

	.shop-grid-wrap {
		padding: var(--e1v-space-6) 24px;
	}

	.shop-trust__inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.shop-band {
		padding: var(--e1v-space-6) 32px;
	}

	.shop-grid-wrap {
		padding: var(--e1v-space-6) 32px;
	}
}

/* ---------- 404 ---------- */

.e1v-404 {
	max-width: 620px;
	margin: 0 auto;
	padding: var(--e1v-space-10) 16px;
	text-align: center;
}

.e1v-404__title {
	font-size: clamp(72px, 16vw, 120px);
	color: var(--e1v-magenta);
	line-height: 1;
	margin: 6px 0 10px;
}

.e1v-404__lead {
	color: var(--e1v-secundario);
	font-size: 16px;
	margin: 0 0 26px;
}

.e1v-404__ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Reveal on scroll (JS añade las clases; sin JS todo visible) ---------- */

.e1v-will-reveal {
	transform: translateY(50px);
	filter: blur(3px);
	transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
}

.e1v-revealed {
	transform: none;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.e1v-will-reveal {
		transform: none;
		filter: none;
	}
}

/* ---------- Breakpoints de la portada ---------- */

@media (min-width: 768px) {
	.fp-hero__inner {
		padding: var(--e1v-space-8) 24px;
	}

	.fp-products__grid,
	.fp-como__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fp-gal__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 200px;
	}

	.fp-testis__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.fp-faq__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--e1v-space-6);
	}

	.fp-cta__inner {
		grid-template-columns: 1.1fr .9fr;
	}
}

@media (min-width: 1024px) {
	.fp-hero__inner {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--e1v-space-6);
		padding: 72px 32px;
	}

	.fp-products__grid,
	.fp-como__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.fp-gal__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 230px;
	}

	.fp-products,
	.fp-testis {
		padding: 72px 32px;
	}

	.fp-como,
	.fp-gal,
	.fp-faq {
		padding: 76px 32px;
	}
}

/* ============================================================
   Bloques (patterns de la home)
   Estilos añadidos para que los bloques core de los patterns
   (patterns/*.php) hereden el design system: botones píldora
   .btn/.btn--primary/.btn--outline e imágenes de galería/CTA.
   Solo appendear aquí — no modificar reglas anteriores.
   ============================================================ */

/* Kickers como core/paragraph: el div original no tenía margen. */
p.fp-kicker {
	margin: 0;
}

/* Botones core dentro de las secciones → .btn / .btn--primary */
.fp-hero__ctas .wp-block-button__link,
.fp-como__cta .wp-block-button__link,
.fp-cta .wp-block-button__link,
.fp-nos-hero .wp-block-button__link,
.fp-nos-historia .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	font-family: var(--e1v-font-body);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
	background: var(--e1v-magenta);
	color: #fff;
	box-shadow: var(--e1v-shadow-cta);
}

.fp-hero__ctas .wp-block-button__link:hover,
.fp-hero__ctas .wp-block-button__link:focus-visible,
.fp-como__cta .wp-block-button__link:hover,
.fp-como__cta .wp-block-button__link:focus-visible,
.fp-cta .wp-block-button__link:hover,
.fp-cta .wp-block-button__link:focus-visible,
.fp-nos-hero .wp-block-button__link:hover,
.fp-nos-hero .wp-block-button__link:focus-visible,
.fp-nos-historia .wp-block-button__link:hover,
.fp-nos-historia .wp-block-button__link:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

/* Segundo botón del hero (is-style-outline) → .btn--outline */
.fp-hero__ctas .is-style-outline .wp-block-button__link {
	background: #fff;
	color: var(--e1v-navy);
	border: 2px solid var(--e1v-navy);
	box-shadow: none;
}

.fp-hero__ctas .is-style-outline .wp-block-button__link:hover,
.fp-hero__ctas .is-style-outline .wp-block-button__link:focus-visible {
	background: #F0F2FA;
	color: var(--e1v-navy);
}

/* Fila de CTAs del hero: mismo gap que el layout original. */
.wp-block-buttons.fp-hero__ctas {
	gap: 14px;
}

/* CTA central de «Cómo funciona»: centrado también sin la clase
   de justificación que WP añade en el render. */
.fp-como__cta .wp-block-buttons {
	justify-content: center;
}

/* Foto del hero como core/image (figure = .fp-hero__photo). */
.wp-block-image.fp-hero__photo {
	margin: 0;
}

/* Galería: la figure del core/image llena la celda y la imagen
   cubre (el object-fit del .fp-gal__img original vivía en el img). */
.fp-gal__grid .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.fp-gal__grid .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--e1v-radius-card);
	display: block;
}

/* Imagen de la CTA final como core/image. */
.fp-cta__media .wp-block-image {
	margin: 0;
}

.fp-cta__media .wp-block-image img {
	width: 100%;
	border-radius: var(--e1v-radius-card);
	display: block;
}

/*
 * Neutraliza el margen de flujo de los global styles de WP
 * (`:root :where(.is-layout-flow) > *` = especificidad 0,1,0, impreso
 * DESPUÉS de esta hoja): los grids del design system definen sus propios
 * gaps. Esta regla usa 0,2,0 para ganar sin depender del orden.
 */
.wp-block-group[class*="fp-"] > * {
	margin-block-start: 0;
}

/* Restaura los márgenes superiores autorados que la regla anterior pisa. */
.wp-block-group[class*="fp-"] > .fp-hero__title {
	margin-block-start: 10px;
}

.wp-block-group[class*="fp-"] > .fp-como__cta {
	margin-block-start: 36px;
}

.wp-block-group[class*="fp-"] > .fp-gal__lead {
	margin-block-start: 10px;
}

.wp-block-group[class*="fp-"] > .fp-cta__title {
	margin-block-start: 4px;
}

.wp-block-group.fp-como__head > h2 {
	margin-block-start: 6px;
}

/* ============================================================
   Micro-texto bajo los CTA del hero (quita la objeción al decidir)
   ============================================================ */

.fp-hero__micro {
	font-size: 13.5px;
	color: var(--e1v-secundario);
}

/* Restaura el margen que anula el reset de flow-gap (0,2,0). */
.wp-block-group[class*="fp-"] > .fp-hero__micro {
	margin-block-start: 10px;
}

/* ============================================================
   Página Nosotros (fp-nos-*): hero, historia, Stephanie.
   Las secciones «Cómo funciona» y «CTA final» reutilizan los
   patrones del home (fp-como / fp-cta) sin estilos nuevos.
   ============================================================ */

.fp-nos-hero {
	background: linear-gradient(160deg, var(--e1v-rosa-suave) 0%, var(--e1v-cielo-suave) 100%);
	border-radius: var(--e1v-radius-card);
	padding: var(--e1v-space-6) var(--e1v-space-3);
	text-align: center;
	max-width: var(--e1v-container);
	margin: var(--e1v-space-3) auto 0;
}

.fp-nos-hero__title {
	font-family: var(--e1v-font-title);
	color: var(--e1v-navy);
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.15;
	max-width: 760px;
	margin: 0 auto;
}

.fp-nos-hero__img img {
	max-width: min(520px, 90%);
	height: auto;
	margin: var(--e1v-space-3) auto 0;
	display: block;
}

.fp-nos-historia {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--e1v-space-8) 0 var(--e1v-space-4);
}

.fp-nos-historia__sub {
	color: var(--e1v-secundario);
	font-size: 18px;
}

.fp-nos-stephanie {
	display: grid;
	gap: var(--e1v-space-4);
	align-items: center;
	background: var(--e1v-cielo-suave);
	border-radius: var(--e1v-radius-card);
	padding: var(--e1v-space-4);
	max-width: var(--e1v-container);
	margin: var(--e1v-space-6) auto;
}

.fp-nos-stephanie__foto img {
	border-radius: var(--e1v-radius-card);
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	object-position: top;
}

.fp-nos-stephanie__quote {
	font-family: var(--e1v-font-accent);
	font-size: 26px;
	line-height: 1.35;
	color: var(--e1v-navy);
}

.fp-nos-stephanie__firma {
	color: var(--e1v-secundario);
	font-weight: 700;
	margin-top: var(--e1v-space-2);
}

@media (min-width: 768px) {
	.fp-nos-stephanie {
		grid-template-columns: 2fr 3fr;
	}
}

/* Restaura márgenes dentro de grupos fp-nos (reset de flow-gap). */
.wp-block-group[class*="fp-"] > .fp-nos-hero__img,
.wp-block-group[class*="fp-"] > .fp-nos-historia__sub {
	margin-block-start: 14px;
}

/* Ritmo vertical de la sección historia: título, sub, párrafo y botón. */
.wp-block-group.fp-nos-historia > h2 {
	margin-block-start: 10px;
}

.wp-block-group.fp-nos-historia > p:not([class]) {
	margin-block-start: 18px;
}

.wp-block-group.fp-nos-historia > .wp-block-buttons {
	margin-block-start: 28px;
}

/* ============================================================
   Arte de la biblioteca de medios (pedido del dueño):
   ilustraciones paso1.1–paso4.1 en las tarjetas del cómo-funciona
   y el osito aviador flotando en el hero.
   ============================================================ */

.fp-como__art {
	display: block;
	height: 112px;
	width: auto;
	max-width: 82%;
	object-fit: contain;
	margin: 0 auto 16px;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.fp-hero__osito {
	position: absolute;
	top: -30px;
	right: -6px;
	width: clamp(84px, 9vw, 132px);
	height: auto;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 10px 18px rgba(36, 43, 87, 0.2));
	animation: e1v-osito 7s ease-in-out infinite alternate;
}

@keyframes e1v-osito {
	from {
		transform: translateY(0) rotate(-4deg);
	}

	to {
		transform: translateY(-16px) rotate(3deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-hero__osito {
		animation: none;
	}
}

@media (max-width: 767px) {
	.fp-hero__osito {
		top: -18px;
		right: 2px;
	}

	.fp-como__art {
		height: 88px;
	}
}