/*
Theme Name: Verigoodlife
Theme URI: https://verigoodlife.com
Author: North Blue Agency
Author URI: https://northblueagency.com
Description: Theme a medida de Verigoodlife. Cada programa es un producto de WooCommerce que se muestra como landing con el diseño de la marca; las páginas se arman con bloques que reutilizan las mismas secciones.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: verigoodlife
*/

/* ==========================================================================
   1. Tokens
   Salen de la home nueva y de la landing de nutrición (oct 2026), que son el
   diseño hacia adelante. Ningún color de marca se escribe fuera de este bloque.
   ========================================================================== */

:root {
	--vgl-accent: #f361ad;
	--vgl-accent-hover: #e04fa0;
	--vgl-accent-light: #ffc3e8;
	--vgl-accent-dim: rgba(243, 97, 173, 0.12);
	--vgl-accent-line: rgba(243, 97, 173, 0.25);
	--vgl-dark: #0f0f0f;
	--vgl-dark-2: #1a1a1a;
	--vgl-dark-3: #252525;
	--vgl-cream: #faf8f4;
	--vgl-cream-2: #f3ede4;
	--vgl-text: #2c2c2c;
	--vgl-text-muted: #6f6b65;
	--vgl-white: #ffffff;
	--vgl-wa: #25d366;

	--vgl-on-dark: rgba(255, 255, 255, 0.62);
	--vgl-on-dark-soft: rgba(255, 255, 255, 0.42);
	--vgl-line-dark: rgba(255, 255, 255, 0.08);
	--vgl-line-light: rgba(0, 0, 0, 0.07);

	--vgl-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--vgl-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--vgl-radius: 14px;
	--vgl-radius-lg: 22px;
	--vgl-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--vgl-transition: 0.4s var(--vgl-ease);

	--vgl-container: 1100px;
	--vgl-gutter: 24px;
	--vgl-section-y: 100px;
	--vgl-header-h: 72px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--vgl-header-h) + 12px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--vgl-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vgl-text);
	background: var(--vgl-cream);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

img,
video {
	display: block;
}

a {
	color: var(--vgl-accent);
}

h1,
h2,
h3,
h4 {
	font-family: var(--vgl-font-serif);
	font-weight: 300;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
}

h1 em,
h2 em,
h3 em {
	font-style: italic;
	color: var(--vgl-accent);
}

.vgl-tone-dark h1 em,
.vgl-tone-dark h2 em,
.vgl-tone-dark h3 em {
	color: var(--vgl-accent-light);
}

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

.vgl-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 18px;
	border-radius: 50px;
	background: var(--vgl-white);
	color: var(--vgl-dark);
	font-weight: 600;
}

:focus-visible {
	outline: 2px solid var(--vgl-accent);
	outline-offset: 3px;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.vgl-container {
	max-width: var(--vgl-container);
	margin: 0 auto;
	padding: 0 var(--vgl-gutter);
}

.vgl-section {
	position: relative;
	padding: var(--vgl-section-y) 0;
	overflow: hidden;
}

.vgl-tone-cream { background: var(--vgl-cream); }
.vgl-tone-cream-2 { background: var(--vgl-cream-2); }
.vgl-tone-dark { background: var(--vgl-dark); color: var(--vgl-on-dark); }
.vgl-tone-dark-2 { background: var(--vgl-dark-2); color: var(--vgl-on-dark); }
.vgl-tone-dark-2 h2,
.vgl-tone-dark h2,
.vgl-tone-dark-2 h3,
.vgl-tone-dark h3 { color: var(--vgl-white); }

/* El brillo rosa de fondo de las secciones oscuras. */
.vgl-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(243, 97, 173, 0.08) 0%, transparent 70%);
}

.vgl-glow--left::before {
	background:
		radial-gradient(ellipse 50% 100% at 0% 50%, rgba(243, 97, 173, 0.16) 0%, transparent 60%),
		radial-gradient(ellipse 50% 100% at 100% 50%, rgba(243, 97, 173, 0.07) 0%, transparent 60%);
}

.vgl-glow--bottom::before {
	background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(243, 97, 173, 0.08) 0%, transparent 70%);
}

.vgl-section > .vgl-container {
	position: relative;
	z-index: 2;
}

.vgl-label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--vgl-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vgl-accent);
}

.vgl-tone-dark .vgl-label,
.vgl-tone-dark-2 .vgl-label {
	color: var(--vgl-accent-light);
}

.vgl-section-header {
	max-width: 620px;
	margin: 0 auto 60px;
	text-align: center;
}

.vgl-section-header h2 {
	font-size: clamp(2.3rem, 3.5vw, 3.8rem);
	color: var(--vgl-dark);
}

.vgl-section-header p {
	max-width: 520px;
	margin: 16px auto 0;
	font-size: 16px;
	color: var(--vgl-text-muted);
}

.vgl-tone-dark .vgl-section-header p,
.vgl-tone-dark-2 .vgl-section-header p {
	color: var(--vgl-on-dark-soft);
}

/* Títulos sobre fondo oscuro: tienen que ganarle a los colores de cada sección. */
.vgl-section.vgl-tone-dark h2,
.vgl-section.vgl-tone-dark-2 h2,
.vgl-section.vgl-tone-dark h3,
.vgl-section.vgl-tone-dark-2 h3 {
	color: var(--vgl-white);
}

.vgl-section.vgl-tone-dark .vgl-prose p,
.vgl-section.vgl-tone-dark-2 .vgl-prose p {
	color: var(--vgl-on-dark);
}

.vgl-prose p + p {
	margin-top: 16px;
}

.vgl-prose p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--vgl-text-muted);
}

.vgl-prose strong {
	color: var(--vgl-dark);
	font-weight: 600;
}

/* ==========================================================================
   4. Reveal
   Sin JS (o para un crawler) todo se ve: la animación solo se arma con html.js.
   ========================================================================== */

.js .vgl-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .vgl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .vgl-delay-1 { transition-delay: 0.1s; }
.js .vgl-delay-2 { transition-delay: 0.2s; }
.js .vgl-delay-3 { transition-delay: 0.3s; }
.js .vgl-delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   5. Botones
   ========================================================================== */

.vgl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 0;
	border-radius: 50px;
	font-family: var(--vgl-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--vgl-transition);
}

.vgl-btn:hover {
	transform: translateY(-2px);
}

.vgl-btn--primary { background: var(--vgl-accent); color: var(--vgl-white); }
.vgl-btn--primary:hover { background: var(--vgl-accent-hover); box-shadow: 0 12px 32px rgba(243, 97, 173, 0.38); color: var(--vgl-white); }
.vgl-btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.22); }
.vgl-btn--ghost:hover { color: var(--vgl-white); border-color: rgba(255, 255, 255, 0.5); }
.vgl-btn--outline { background: transparent; color: var(--vgl-accent); border: 1.5px solid var(--vgl-accent); }
.vgl-btn--outline:hover { background: var(--vgl-accent); color: var(--vgl-white); }
.vgl-tone-dark .vgl-btn--outline,
.vgl-tone-dark-2 .vgl-btn--outline { color: var(--vgl-accent-light); border-color: rgba(243, 97, 173, 0.55); }
.vgl-tone-dark .vgl-btn--outline:hover,
.vgl-tone-dark-2 .vgl-btn--outline:hover { color: var(--vgl-white); }
.vgl-btn--sm { padding: 10px 22px; font-size: 12px; }

.vgl-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.vgl-btn-row--center { justify-content: center; }

/* ==========================================================================
   6. Header
   ========================================================================== */

.vgl-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--vgl-header-h);
	display: flex;
	align-items: center;
	background: rgba(15, 15, 15, 0.72);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--vgl-line-dark);
}

.admin-bar .vgl-header { top: 32px; }

.vgl-header__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vgl-logo {
	display: inline-flex;
	align-items: center;
	color: var(--vgl-white);
	text-decoration: none;
	font-family: var(--vgl-font-serif);
	font-size: 1.4rem;
	letter-spacing: 0.02em;
}

.vgl-logo em { font-style: italic; color: var(--vgl-accent-light); }
.vgl-logo img { height: 34px; width: auto; display: block; }

.vgl-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.vgl-nav__menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
}

.vgl-nav__menu a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: color 0.2s;
}

.vgl-nav__menu a:hover,
.vgl-nav__menu .current-menu-item > a {
	color: var(--vgl-white);
}

.vgl-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: transparent;
	color: var(--vgl-white);
	cursor: pointer;
}

.vgl-nav__toggle span,
.vgl-nav__toggle span::before,
.vgl-nav__toggle span::after {
	display: block;
	width: 18px;
	height: 1.5px;
	margin: 0 auto;
	background: currentColor;
	transition: transform 0.3s;
	position: relative;
}

.vgl-nav__toggle span::before,
.vgl-nav__toggle span::after {
	content: "";
	position: absolute;
	left: 0;
}

.vgl-nav__toggle span::before { top: -6px; }
.vgl-nav__toggle span::after { top: 6px; }

.vgl-nav-open .vgl-nav__toggle span { background: transparent; }
.vgl-nav-open .vgl-nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.vgl-nav-open .vgl-nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.vgl-main {
	min-height: 60vh;
}

/* ==========================================================================
   7. Footer y WhatsApp flotante
   ========================================================================== */

.vgl-footer {
	background: var(--vgl-dark);
	color: var(--vgl-on-dark-soft);
	padding: 64px 0 32px;
	font-size: 14px;
}

.vgl-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--vgl-line-dark);
}

.vgl-footer__tagline {
	margin-top: 16px;
	max-width: 340px;
	line-height: 1.7;
}

.vgl-footer h3 {
	margin-bottom: 16px;
	font-family: var(--vgl-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vgl-accent-light);
}

.vgl-footer ul { list-style: none; display: grid; gap: 10px; }
.vgl-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.vgl-footer a:hover { color: var(--vgl-white); }

.vgl-social {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.vgl-social a {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	transition: var(--vgl-transition);
}

.vgl-social a:hover { border-color: var(--vgl-accent); background: var(--vgl-accent-dim); }
.vgl-social svg { width: 18px; height: 18px; fill: currentColor; }

.vgl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
	font-size: 12px;
}

.vgl-wa-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 200;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--vgl-wa);
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4);
	transition: var(--vgl-transition);
}

.vgl-wa-float:hover { transform: scale(1.08); }
.vgl-wa-float svg { width: 28px; height: 28px; fill: var(--vgl-white); }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.vgl-hero {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	overflow: hidden;
	background: var(--vgl-dark);
}

.vgl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(243, 97, 173, 0.1) 0%, transparent 70%);
}

.vgl-hero--no-media {
	grid-template-columns: minmax(0, 1fr);
	min-height: 78vh;
	text-align: center;
}

.vgl-hero__content {
	position: relative;
	z-index: 2;
	padding: calc(var(--vgl-header-h) + 60px) 60px 80px 80px;
}

.vgl-hero--no-media .vgl-hero__content {
	max-width: 860px;
	margin: 0 auto;
	padding-left: var(--vgl-gutter);
	padding-right: var(--vgl-gutter);
}

.vgl-hero__tag {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vgl-accent-light);
}

.vgl-hero__tag::before {
	content: "";
	width: 28px;
	height: 1px;
	flex-shrink: 0;
	background: var(--vgl-accent);
}

.vgl-hero--no-media .vgl-hero__tag { justify-content: center; }

.vgl-hero__title {
	margin-bottom: 28px;
	font-size: clamp(2.8rem, 5vw, 5.4rem);
	line-height: 1.08;
	color: var(--vgl-white);
}

.vgl-hero__title em { color: var(--vgl-accent-light); }

.vgl-hero__lead {
	max-width: 440px;
	margin-bottom: 36px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--vgl-on-dark);
}

.vgl-hero--no-media .vgl-hero__lead { margin-left: auto; margin-right: auto; }

.vgl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
	list-style: none;
}

.vgl-hero--no-media .vgl-pills,
.vgl-hero--no-media .vgl-btn-row { justify-content: center; }

.vgl-pill {
	padding: 6px 16px;
	border: 1px solid var(--vgl-accent-line);
	border-radius: 50px;
	background: var(--vgl-accent-dim);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--vgl-accent-light);
}

.vgl-hero__media {
	position: relative;
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
}

.vgl-hero__media img,
.vgl-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0.78;
	will-change: transform;
}

.vgl-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--vgl-dark) 0%, transparent 40%);
	pointer-events: none;
}

.vgl-hero__media--contain {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--vgl-header-h) + 40px) 60px 60px 20px;
}

.vgl-hero__media--contain::after { display: none; }

.vgl-hero__media--contain img,
.vgl-hero__media--contain video {
	height: auto;
	max-height: 76vh;
	width: auto;
	max-width: 100%;
	border-radius: var(--vgl-radius-lg);
	opacity: 1;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.vgl-video {
	position: relative;
}

.vgl-video__sound {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 8px 16px;
	border: 0;
	border-radius: 50px;
	background: rgba(15, 15, 15, 0.7);
	color: var(--vgl-white);
	font: 600 11px/1 var(--vgl-font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.vgl-hero__scroll {
	position: absolute;
	left: 80px;
	bottom: 36px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
}

.vgl-hero__scroll::before {
	content: "";
	width: 40px;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   9. Intro ("qué es")
   ========================================================================== */

.vgl-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}

.vgl-intro__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 780px;
	margin: 0 auto;
}

.vgl-intro h2 {
	margin-bottom: 24px;
	font-size: clamp(2.3rem, 3.5vw, 3.8rem);
	color: var(--vgl-dark);
}

.vgl-intro__kicker {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 14px;
	border-radius: 50px;
	background: var(--vgl-accent-dim);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vgl-accent);
}

.vgl-intro__subtitle {
	margin-bottom: 18px;
	font-size: 1.6rem;
	color: var(--vgl-dark);
}

.vgl-points {
	list-style: none;
	display: grid;
	gap: 12px;
	margin-top: 28px;
	counter-reset: vgl-points;
}

.vgl-points__title {
	margin-top: 28px;
	font-weight: 600;
	color: var(--vgl-dark);
}

.vgl-points__title + .vgl-points { margin-top: 14px; }

.vgl-points li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 15px;
	line-height: 1.55;
}

.vgl-points--numbered li::before {
	counter-increment: vgl-points;
	content: counter(vgl-points, decimal-leading-zero);
	flex-shrink: 0;
	min-width: 30px;
	font-family: var(--vgl-font-serif);
	font-size: 1.3rem;
	line-height: 1.1;
	color: var(--vgl-accent);
}

.vgl-points--check li::before {
	content: "\2713";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	border: 1px solid var(--vgl-accent-line);
	border-radius: 50%;
	background: var(--vgl-accent-dim);
	font-size: 11px;
	color: var(--vgl-accent);
}

.vgl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.vgl-stat {
	padding: 24px 16px;
	border-radius: var(--vgl-radius);
	background: var(--vgl-cream-2);
	text-align: center;
}

.vgl-stat strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--vgl-font-serif);
	font-size: 2.4rem;
	font-weight: 300;
	line-height: 1;
	color: var(--vgl-accent);
}

.vgl-stat span {
	font-size: 12px;
	font-weight: 500;
	color: var(--vgl-text-muted);
}

.vgl-intro__visual { position: relative; }

.vgl-intro__visual img,
.vgl-intro__visual video {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--vgl-radius-lg);
}

.vgl-intro__badge {
	position: absolute;
	left: -24px;
	bottom: 24px;
	padding: 16px 22px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: var(--vgl-radius);
	background: var(--vgl-white);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.vgl-intro__badge strong {
	display: block;
	font-family: var(--vgl-font-serif);
	font-size: 1.5rem;
	line-height: 1.05;
	color: var(--vgl-accent);
}

.vgl-intro__badge span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vgl-text-muted);
}

/* ==========================================================================
   10. Dolores y "para quién es"
   ========================================================================== */

.vgl-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
}

.vgl-chip {
	padding: 12px 20px;
	border: 1px solid var(--vgl-line-light);
	border-radius: 50px;
	background: var(--vgl-white);
	font-size: 14px;
	font-weight: 500;
	color: var(--vgl-dark);
}

.vgl-forwho__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}

.vgl-forwho__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }

.vgl-forwho h2 {
	margin-bottom: 18px;
	font-size: clamp(2.3rem, 3.5vw, 3.5rem);
	color: var(--vgl-dark);
}

.vgl-forwho__lead {
	margin-bottom: 28px;
	color: var(--vgl-text-muted);
}

.vgl-forwho__list {
	list-style: none;
	display: grid;
	gap: 16px;
}

.vgl-forwho__list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-size: 15px;
	line-height: 1.55;
}

.vgl-forwho__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(243, 97, 173, 0.2);
	border-radius: 10px;
	background: var(--vgl-accent-dim);
	font-size: 15px;
	color: var(--vgl-accent);
}

.vgl-forwho__list strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
	color: var(--vgl-dark);
}

.vgl-forwho__list small {
	display: block;
	font-size: 13px;
	color: var(--vgl-text-muted);
}

.vgl-notfor {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid rgba(243, 97, 173, 0.15);
	border-radius: var(--vgl-radius);
	background: rgba(243, 97, 173, 0.06);
	font-size: 13px;
	line-height: 1.7;
	color: var(--vgl-text-muted);
}

.vgl-notfor strong { color: var(--vgl-accent); }

.vgl-quote-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px;
	border-radius: var(--vgl-radius-lg);
	background: var(--vgl-dark);
}

.vgl-quote-card blockquote {
	margin: 0;
	font-family: var(--vgl-font-serif);
	font-size: 1.6rem;
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
	color: var(--vgl-white);
}

.vgl-quote-card cite {
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vgl-on-dark-soft);
}

/* ==========================================================================
   11. Qué incluye
   ========================================================================== */

.vgl-includes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
}

.vgl-include {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 28px;
	border: 1px solid var(--vgl-line-light);
	border-radius: var(--vgl-radius-lg);
	background: var(--vgl-white);
	transition: var(--vgl-transition);
}

.vgl-include:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

.vgl-include__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--vgl-accent-dim);
	font-family: var(--vgl-font-serif);
	font-size: 1.4rem;
	color: var(--vgl-accent);
}

.vgl-include h3 {
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--vgl-dark);
}

.vgl-include p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--vgl-text-muted);
}

.vgl-include--bonus {
	border-color: var(--vgl-accent-line);
	background: linear-gradient(135deg, var(--vgl-white) 0%, rgba(243, 97, 173, 0.06) 100%);
}

.vgl-include__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 4px 10px;
	border-radius: 50px;
	background: var(--vgl-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vgl-white);
}

.vgl-includes__note {
	max-width: 760px;
	margin: 36px auto 0;
	padding: 20px 24px;
	border-left: 3px solid var(--vgl-accent);
	border-radius: 0 var(--vgl-radius) var(--vgl-radius) 0;
	background: var(--vgl-white);
	font-size: 14px;
	color: var(--vgl-text-muted);
}

.vgl-includes__note strong { color: var(--vgl-dark); }

.vgl-richtext {
	max-width: 760px;
	margin: 0 auto;
	padding: 36px 40px;
	border-radius: var(--vgl-radius-lg);
	background: var(--vgl-white);
	font-size: 15px;
	line-height: 1.8;
	color: var(--vgl-text-muted);
}

.vgl-richtext p + p { margin-top: 14px; }
.vgl-richtext strong { color: var(--vgl-dark); }

/* ==========================================================================
   12. Precios
   ========================================================================== */

.vgl-pricing__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 48px;
}

.vgl-pricing__tab {
	padding: 10px 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.06);
	font: 600 13px/1.3 var(--vgl-font-sans);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: var(--vgl-transition);
}

.vgl-pricing__tab[aria-selected="true"] {
	border-color: var(--vgl-accent);
	background: var(--vgl-accent);
	color: var(--vgl-white);
}

.vgl-pricing__panel[hidden] { display: none; }

.vgl-pricing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	justify-content: center;
}

.vgl-pricing__grid--1 { grid-template-columns: minmax(0, 520px); }
.vgl-pricing__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vgl-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 36px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--vgl-radius-lg);
	background: var(--vgl-dark-3);
	transition: var(--vgl-transition);
}

.vgl-price-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(243, 97, 173, 0.5), transparent);
	opacity: 0;
	transition: var(--vgl-transition);
}

.vgl-price-card:hover { border-color: rgba(243, 97, 173, 0.25); transform: translateY(-3px); }
.vgl-price-card:hover::before { opacity: 1; }

.vgl-price-card--featured {
	border-color: rgba(243, 97, 173, 0.4);
	background: linear-gradient(135deg, var(--vgl-dark-3) 0%, rgba(243, 97, 173, 0.07) 100%);
}

.vgl-price-card--featured::before { opacity: 1; }

.vgl-price-card__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 5px 12px;
	border-radius: 50px;
	background: var(--vgl-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vgl-white);
}

.vgl-price-card__type {
	display: block;
	margin-bottom: 10px;
	padding-right: 110px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vgl-accent-light);
}

.vgl-price-card h3 {
	margin-bottom: 8px;
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--vgl-white);
}

.vgl-price-card__lead {
	margin-bottom: 24px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vgl-on-dark-soft);
}

.vgl-price-card__includes {
	list-style: none;
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
}

.vgl-price-card__includes li {
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.vgl-price-card__includes li::before {
	content: "\2713";
	flex-shrink: 0;
	font-size: 11px;
	line-height: 1.8;
	color: var(--vgl-accent-light);
}

.vgl-price {
	margin-top: auto;
	margin-bottom: 24px;
}

.vgl-price__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.vgl-price__amount {
	font-family: var(--vgl-font-serif);
	font-size: 2.8rem;
	font-weight: 300;
	line-height: 1.1;
	color: var(--vgl-white);
}

.vgl-price__row--alt .vgl-price__amount {
	font-size: 1.6rem;
	color: var(--vgl-on-dark);
}

.vgl-price__cur {
	font-family: var(--vgl-font-serif);
	font-size: 1.2rem;
	color: var(--vgl-on-dark-soft);
}

.vgl-price__note {
	margin-top: 6px;
	font-size: 12px;
	color: var(--vgl-on-dark-soft);
}

.vgl-price-card__ctas {
	display: grid;
	gap: 10px;
}

.vgl-pricing__after {
	max-width: 560px;
	margin: 40px auto 0;
	text-align: center;
	font-size: 13px;
	color: var(--vgl-on-dark-soft);
}

.vgl-delivery {
	max-width: 560px;
	margin: 40px auto 0;
	padding: 24px 28px;
	border: 1px solid rgba(37, 211, 102, 0.25);
	border-radius: var(--vgl-radius-lg);
	background: rgba(37, 211, 102, 0.07);
	text-align: center;
}

.vgl-delivery strong {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7ee2a8;
}

.vgl-delivery p {
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--vgl-on-dark);
}

.vgl-tone-cream .vgl-delivery p,
.vgl-woo .vgl-delivery p { color: var(--vgl-text-muted); }
.vgl-tone-cream .vgl-delivery strong,
.vgl-woo .vgl-delivery strong { color: #138a43; }

.vgl-delivery .vgl-btn { background: var(--vgl-wa); color: var(--vgl-white); }
.vgl-delivery .vgl-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Planes externos (membresía) */

.vgl-plan__extra {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.vgl-plan__extra h4 {
	margin-bottom: 4px;
	font-size: 1.3rem;
	color: var(--vgl-white);
}

/* Comparativa "cada programa por separado" */

.vgl-compare {
	max-width: 760px;
	margin: 0 auto;
	list-style: none;
	border: 1px solid var(--vgl-line-light);
	border-radius: var(--vgl-radius-lg);
	background: var(--vgl-white);
	overflow: hidden;
}

.vgl-compare li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--vgl-line-light);
	font-size: 14px;
}

.vgl-compare li:last-child { border-bottom: 0; }
.vgl-compare a { color: var(--vgl-dark); text-decoration: none; font-weight: 600; }
.vgl-compare small { display: block; font-weight: 400; color: var(--vgl-text-muted); }
.vgl-compare__price { flex-shrink: 0; font-family: var(--vgl-font-serif); font-size: 1.15rem; color: var(--vgl-dark); text-align: right; }

.vgl-compare__total {
	background: var(--vgl-dark);
	color: var(--vgl-on-dark);
}

.vgl-compare__total strong,
.vgl-compare__total .vgl-compare__price { color: var(--vgl-white); }

.vgl-compare__vs {
	max-width: 560px;
	margin: 40px auto 0;
	text-align: center;
}

.vgl-compare__vs h3 {
	margin-bottom: 12px;
	font-size: 2rem;
	color: var(--vgl-dark);
}

.vgl-compare__vs p {
	margin-bottom: 24px;
	color: var(--vgl-text-muted);
}

/* ==========================================================================
   13. Banner de membresía
   ========================================================================== */

.vgl-member__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
}

.vgl-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	padding: 6px 16px;
	border: 1px solid rgba(243, 97, 173, 0.3);
	border-radius: 50px;
	background: rgba(243, 97, 173, 0.15);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vgl-accent-light);
}

.vgl-member h2 {
	margin-bottom: 20px;
	font-size: clamp(2.6rem, 4vw, 4.5rem);
	line-height: 1.1;
}

.vgl-member__text {
	max-width: 480px;
	margin-bottom: 32px;
	line-height: 1.75;
}

.vgl-member__text strong { color: rgba(255, 255, 255, 0.88); }

.vgl-member .vgl-points li { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.vgl-member .vgl-points--check li::before { background: rgba(243, 97, 173, 0.2); color: var(--vgl-accent-light); border-color: transparent; }

.vgl-member__prices {
	margin: 32px 0 6px;
	display: grid;
	gap: 2px;
}

.vgl-member__prices .vgl-price__amount { font-size: 3rem; }

.vgl-member__note {
	margin-bottom: 28px;
	font-size: 13px;
	color: var(--vgl-on-dark-soft);
}

.vgl-member__visual {
	position: relative;
	padding-bottom: 32px;
}

.vgl-member__visual img {
	width: 100%;
	border-radius: var(--vgl-radius-lg);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.vgl-member__visual::before {
	content: "";
	position: absolute;
	inset: -2px -2px 30px;
	z-index: 0;
	border-radius: calc(var(--vgl-radius-lg) + 2px);
	background: linear-gradient(135deg, var(--vgl-accent) 0%, transparent 60%);
}

.vgl-member__visual img { position: relative; z-index: 1; }

.vgl-stat-pills {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	white-space: nowrap;
	list-style: none;
}

.vgl-stat-pill {
	padding: 10px 18px;
	border: 1px solid var(--vgl-accent-line);
	border-radius: 50px;
	background: var(--vgl-dark);
	text-align: center;
}

.vgl-stat-pill strong {
	display: block;
	font-family: var(--vgl-font-serif);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--vgl-accent-light);
}

.vgl-stat-pill span {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vgl-on-dark-soft);
}

/* ==========================================================================
   14. Catálogo
   ========================================================================== */

.vgl-catalog__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
}

.vgl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--vgl-line-light);
	border-radius: var(--vgl-radius);
	background: var(--vgl-white);
	color: inherit;
	text-decoration: none;
	transition: var(--vgl-transition);
}

.vgl-card:hover {
	transform: translateY(-3px);
	border-color: rgba(243, 97, 173, 0.25);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}

.vgl-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--vgl-cream-2);
}

.vgl-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 20px;
}

.vgl-card__tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vgl-accent);
}

.vgl-card__name {
	font-family: var(--vgl-font-serif);
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--vgl-dark);
}

.vgl-card__text {
	flex: 1;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--vgl-text-muted);
}

.vgl-card__price {
	margin-top: 4px;
	font-family: var(--vgl-font-serif);
	font-size: 1.1rem;
	line-height: 1.4;
	color: var(--vgl-dark);
}

.vgl-card__price small {
	display: block;
	font-size: 0.95rem;
	color: var(--vgl-text-muted);
}

.vgl-card__link {
	font-size: 11px;
	font-weight: 600;
	color: var(--vgl-accent);
}

.vgl-card__link::after { content: " \2192"; }

/* ==========================================================================
   15. Testimonios
   ========================================================================== */

.vgl-testimonials { padding: 90px 0; }

.vgl-marquee {
	position: relative;
	overflow: hidden;
}

.vgl-marquee::before,
.vgl-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 120px;
	pointer-events: none;
}

.vgl-marquee::before { left: 0; background: linear-gradient(to right, var(--vgl-marquee-bg, var(--vgl-cream-2)), transparent); }
.vgl-marquee::after { right: 0; background: linear-gradient(to left, var(--vgl-marquee-bg, var(--vgl-cream-2)), transparent); }
.vgl-tone-dark-2 .vgl-marquee { --vgl-marquee-bg: var(--vgl-dark-2); }
.vgl-tone-dark .vgl-marquee { --vgl-marquee-bg: var(--vgl-dark); }
.vgl-tone-cream .vgl-marquee { --vgl-marquee-bg: var(--vgl-cream); }

.vgl-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	list-style: none;
	animation: vgl-marquee 40s linear infinite;
}

.vgl-marquee:hover .vgl-marquee__track { animation-play-state: paused; }

@keyframes vgl-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.vgl-shot {
	width: 220px;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid var(--vgl-line-light);
	border-radius: var(--vgl-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	background: var(--vgl-white);
}

.vgl-shot img { width: 100%; }

.vgl-counter {
	margin-top: 48px;
	text-align: center;
	font-family: var(--vgl-font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--vgl-text-muted);
}

.vgl-counter strong { font-style: normal; color: var(--vgl-accent); }
.vgl-tone-dark-2 .vgl-counter,
.vgl-tone-dark .vgl-counter { color: var(--vgl-on-dark-soft); }
.vgl-tone-dark-2 .vgl-counter strong,
.vgl-tone-dark .vgl-counter strong { color: var(--vgl-accent-light); }

/* ==========================================================================
   16. Sobre Veri
   ========================================================================== */

.vgl-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}

.vgl-about__visual { position: relative; }
.vgl-about__visual img { width: 100%; border-radius: var(--vgl-radius-lg); }

.vgl-about__badges {
	position: absolute;
	right: -16px;
	bottom: -16px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	list-style: none;
}

.vgl-about__badges li {
	padding: 8px 16px;
	border-radius: 50px;
	background: var(--vgl-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--vgl-dark);
}

.vgl-about h2 {
	margin-bottom: 24px;
	font-size: clamp(2.3rem, 3.5vw, 3.5rem);
	color: var(--vgl-dark);
}

.vgl-about--compact { text-align: center; }
.vgl-about--compact .vgl-prose { max-width: 720px; margin: 0 auto; }

.vgl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
	list-style: none;
}

.vgl-about--compact .vgl-tags { justify-content: center; }

.vgl-tags li {
	padding: 7px 15px;
	border: 1px solid var(--vgl-line-light);
	border-radius: 50px;
	background: var(--vgl-cream-2);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--vgl-text-muted);
}

.vgl-tags li:first-child {
	border-color: transparent;
	background: var(--vgl-accent);
	color: var(--vgl-white);
}

/* ==========================================================================
   17. Recursos (recetarios)
   ========================================================================== */

.vgl-resources__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
}

.vgl-resource {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--vgl-radius);
	background: var(--vgl-dark-3);
	text-decoration: none;
	transition: var(--vgl-transition);
}

.vgl-resource:hover { transform: translateY(-4px); border-color: rgba(243, 97, 173, 0.3); }

.vgl-resource img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.vgl-resource__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px 14px;
}

.vgl-resource__name {
	font-family: var(--vgl-font-serif);
	font-size: 14px;
	line-height: 1.3;
	color: var(--vgl-white);
}

.vgl-resource__cta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--vgl-accent-light);
}

.vgl-tone-cream .vgl-resource,
.vgl-tone-cream-2 .vgl-resource { background: var(--vgl-white); border-color: var(--vgl-line-light); }
.vgl-tone-cream .vgl-resource__name,
.vgl-tone-cream-2 .vgl-resource__name { color: var(--vgl-dark); }
.vgl-tone-cream .vgl-resource__cta,
.vgl-tone-cream-2 .vgl-resource__cta { color: var(--vgl-accent); }

.vgl-resource--soon { opacity: 0.6; pointer-events: none; }

.vgl-more {
	margin-top: 36px;
	text-align: center;
}

/* ==========================================================================
   18. FAQ
   <details>: abre y cierra sin JS y el texto está en el DOM para buscadores.
   ========================================================================== */

.vgl-faq__list {
	max-width: 760px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.vgl-faq__item {
	overflow: hidden;
	border: 1px solid var(--vgl-line-light);
	border-radius: var(--vgl-radius);
	background: var(--vgl-white);
}

.vgl-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 26px;
	list-style: none;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--vgl-dark);
	transition: color 0.2s;
}

.vgl-faq__item summary::-webkit-details-marker { display: none; }
.vgl-faq__item summary:hover { color: var(--vgl-accent); }

.vgl-faq__icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vgl-line-light);
	border-radius: 50%;
	background: var(--vgl-cream);
	font-size: 16px;
	line-height: 1;
	color: var(--vgl-accent);
	transition: var(--vgl-transition);
}

.vgl-faq__item[open] .vgl-faq__icon {
	transform: rotate(45deg);
	background: var(--vgl-accent);
	color: var(--vgl-white);
}

.vgl-faq__answer {
	padding: 0 26px 22px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--vgl-text-muted);
}

/* ==========================================================================
   19. CTA final
   ========================================================================== */

.vgl-cta {
	padding: 120px 0;
	text-align: center;
}

.vgl-cta h2 {
	margin-bottom: 20px;
	font-size: clamp(2.8rem, 5vw, 5rem);
	line-height: 1.1;
}

.vgl-cta p {
	max-width: 480px;
	margin: 0 auto 44px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--vgl-on-dark);
}

/* ==========================================================================
   20. Páginas genéricas, recetarios, 404
   ========================================================================== */

.vgl-page-hero {
	padding: calc(var(--vgl-header-h) + 80px) 0 70px;
	text-align: center;
}

.vgl-page-hero h1 {
	font-size: clamp(2.8rem, 5vw, 4.8rem);
	color: var(--vgl-white);
}

.vgl-page-hero p {
	max-width: 520px;
	margin: 18px auto 0;
	color: var(--vgl-on-dark);
}

.vgl-entry {
	max-width: 760px;
	margin: 0 auto;
	padding: 70px var(--vgl-gutter) 90px;
	font-size: 16px;
	line-height: 1.8;
}

.vgl-entry > * + * { margin-top: 1.1em; }
.vgl-entry h2 { margin-top: 1.8em; font-size: 2.2rem; color: var(--vgl-dark); }
.vgl-entry h3 { margin-top: 1.5em; font-size: 1.6rem; color: var(--vgl-dark); }
.vgl-entry ul,
.vgl-entry ol { padding-left: 1.3em; }

.vgl-subhead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 70px 0 32px;
}

.vgl-subhead:first-child { margin-top: 0; }

.vgl-subhead h2 {
	font-size: 2.2rem;
	color: var(--vgl-dark);
}

.vgl-subhead::before,
.vgl-subhead::after {
	content: "";
	flex: 0 1 80px;
	height: 1px;
	background: var(--vgl-accent-line);
}

.vgl-empty {
	text-align: center;
	color: var(--vgl-text-muted);
}

/* ==========================================================================
   21. WooCommerce (carrito, checkout, mi cuenta, gracias)
   El theme no reestiliza el checkout entero: le da la tipografía y el color de
   la marca y deja que los bloques de Woo hagan su trabajo.
   ========================================================================== */

.vgl-woo {
	max-width: 1100px;
	margin: 0 auto;
	padding: calc(var(--vgl-header-h) + 50px) var(--vgl-gutter) 90px;
}

.vgl-woo h1 {
	margin-bottom: 32px;
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	color: var(--vgl-dark);
	text-align: center;
}

.vgl-woo .wc-block-components-button:not(.is-link),
.vgl-woo .wp-element-button,
.vgl-woo .button,
.vgl-woo button.button {
	border: 0;
	border-radius: 50px !important;
	background: var(--vgl-accent) !important;
	color: var(--vgl-white) !important;
	font-family: var(--vgl-font-sans);
	font-weight: 600;
}

.vgl-woo .wc-block-components-button:not(.is-link):hover,
.vgl-woo .button:hover { background: var(--vgl-accent-hover) !important; }

/* El mensaje de Veri es para antes de pagar: en la página de gracias no va. */
.woocommerce-order-received .vgl-checkout-intro { display: none; }

.vgl-woo .wc-block-components-title,
.vgl-woo .wc-block-components-checkout-step__title {
	font-family: var(--vgl-font-serif);
	font-weight: 400;
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.vgl-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vgl-resources__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vgl-includes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-pricing__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	:root {
		--vgl-header-h: 64px;
		--vgl-section-y: 80px;
	}

	.vgl-header__inner { padding: 0 20px; }

	.vgl-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

	.vgl-nav {
		position: fixed;
		top: var(--vgl-header-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 28px;
		background: rgba(15, 15, 15, 0.97);
		border-bottom: 1px solid var(--vgl-line-dark);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
	}

	.admin-bar .vgl-nav { top: calc(var(--vgl-header-h) + 46px); }

	.vgl-nav-open .vgl-nav {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.vgl-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.vgl-nav__menu a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--vgl-line-dark);
		font-size: 15px;
	}

	.vgl-nav .vgl-btn { margin-top: 18px; }

	.vgl-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
	.vgl-hero__content { padding: calc(var(--vgl-header-h) + 50px) 28px 50px; }
	.vgl-hero__media { min-height: 60vw; order: 2; }
	.vgl-hero__media--contain { padding: 0 24px 50px; min-height: 0; }
	.vgl-hero__media::after { background: linear-gradient(to bottom, var(--vgl-dark) 0%, transparent 30%); }
	.vgl-hero__scroll { display: none; }

	.vgl-intro__grid,
	.vgl-forwho__grid,
	.vgl-about__grid,
	.vgl-member__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }

	.vgl-intro__badge { left: 16px; }
	.vgl-member__visual { order: -1; }
	.vgl-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-resources__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vgl-pricing__grid,
	.vgl-pricing__grid--3 { grid-template-columns: minmax(0, 560px); }
	.vgl-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vgl-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 782px) {
	.admin-bar .vgl-header { top: 46px; }
}

@media (max-width: 640px) {
	:root {
		--vgl-gutter: 16px;
		--vgl-section-y: 64px;
	}

	.vgl-section-header { margin-bottom: 40px; }
	.vgl-hero__content { padding-left: 16px; padding-right: 16px; }
	.vgl-hero .vgl-btn-row,
	.vgl-cta .vgl-btn-row { width: 100%; }
	.vgl-hero .vgl-btn-row .vgl-btn,
	.vgl-cta .vgl-btn-row .vgl-btn { flex: 1 1 auto; }
	.vgl-includes__grid { grid-template-columns: minmax(0, 1fr); }
	.vgl-catalog__grid { gap: 12px; }
	.vgl-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-price-card { padding: 28px 22px; }
	.vgl-price-card__type { padding-right: 0; }
	.vgl-price-card__badge { position: static; align-self: flex-start; margin-bottom: 12px; }
	.vgl-stat-pills { position: static; transform: none; margin-top: 16px; flex-wrap: wrap; justify-content: center; white-space: normal; }
	.vgl-member__visual { padding-bottom: 0; }
	.vgl-member__visual::before { inset: -2px; }
	.vgl-about__badges { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 16px; }
	.vgl-faq__item summary { padding: 16px 18px; font-size: 14px; align-items: flex-start; }
	.vgl-faq__answer { padding: 0 18px 20px; }
	.vgl-cta { padding: 80px 0; }
	.vgl-richtext { padding: 26px 22px; }
	.vgl-compare li { padding: 14px 16px; }
	.vgl-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.vgl-shot { width: 180px; }
	.vgl-marquee::before,
	.vgl-marquee::after { width: 40px; }
}

@media (max-width: 380px) {
	.vgl-catalog__grid { grid-template-columns: minmax(0, 1fr); }
}

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

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

	.vgl-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	.vgl-marquee__track [aria-hidden="true"] { display: none; }
	.js .vgl-reveal { opacity: 1; transform: none; }
}