/* ==========================================================================
   VANDORX — estilos de las secciones (prefijo .vx- para no chocar con el tema)
   Los colores salen de Ajustes → VANDORX (variables --vx-*).
   ========================================================================== */

:root {
	--vx-primary: #3D5A47;
	--vx-primary-dark: #2C4234;
	--vx-secondary: #C8B89A;
	--vx-bg: #F2EDE4;
	--vx-text: #2C2A26;
	--vx-muted: color-mix(in srgb, var(--vx-text) 62%, transparent);
	--vx-line: color-mix(in srgb, var(--vx-secondary) 55%, transparent);
	--vx-white: #FFFFFF;
	--vx-sans: "DM Sans", system-ui, -apple-system, sans-serif;
	--vx-serif: "Lora", Georgia, serif;
	--vx-radius: 12px;
	--vx-radius-btn: 8px;
	--vx-shadow: 0 2px 12px rgba(44, 42, 38, .08);
	--vx-shadow-hover: 0 8px 24px rgba(44, 42, 38, .14);
}

.vx { font-family: var(--vx-sans); color: var(--vx-text); line-height: 1.6; }
.vx *, .vx *::before, .vx *::after { box-sizing: border-box; }
.vx img { max-width: 100%; height: auto; display: block; }

.vx-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
.vx-container--narrow { max-width: 820px; }
@media (min-width: 768px) { .vx-container { padding-inline: 32px; } }

.vx-section { padding-block: 64px; background: var(--vx-bg); }
.vx-section--white { background: var(--vx-white); }
@media (min-width: 768px) { .vx-section { padding-block: 96px; } }

/* Cabeceras de sección */
.vx-head { margin-bottom: 40px; }
.vx-head--center { text-align: center; }
.vx-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vx-head__title { font-family: var(--vx-serif); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: var(--vx-text); }
.vx-head__title--xl { font-size: clamp(2.25rem, 5vw, 3rem); }
.vx-head__subtitle { margin: 0; color: var(--vx-muted); font-size: 1.0625rem; }
.vx-eyebrow { margin: 0 0 12px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vx-secondary); }
.vx-small { font-size: .8125rem; color: var(--vx-muted); margin-top: 12px; }
.vx-small a, .vx-link { color: var(--vx-primary); font-weight: 600; text-decoration: none; }
.vx-link:hover { text-decoration: underline; }

/* Botones */
.vx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: var(--vx-radius-btn); border: 2px solid var(--vx-primary);
	background: var(--vx-primary); color: var(--vx-white) !important;
	font: 600 .9375rem/1.2 var(--vx-sans); text-decoration: none !important; cursor: pointer;
	box-shadow: var(--vx-shadow); transition: background .2s, border-color .2s, box-shadow .2s, transform .1s;
}
.vx-btn:hover { background: var(--vx-primary-dark); border-color: var(--vx-primary-dark); box-shadow: var(--vx-shadow-hover); }
.vx-btn:active { transform: scale(.97); }
.vx-btn:focus-visible { outline: 3px solid var(--vx-secondary); outline-offset: 2px; }
.vx-btn--light { background: var(--vx-white); border-color: var(--vx-white); color: var(--vx-primary) !important; }
.vx-btn--light:hover { background: var(--vx-bg); border-color: var(--vx-bg); }
.vx-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .8); box-shadow: none; }
.vx-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--vx-white); }
.vx-btn--block { width: 100%; }

/* Rejillas y tarjetas */
.vx-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vx-grid--4, .vx-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vx-grid--4 { grid-template-columns: repeat(4, 1fr); } .vx-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.vx-card { background: var(--vx-white); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); }

/* Hero */
.vx-hero {
	position: relative; display: flex; align-items: center; min-height: min(80vh, 680px); padding-block: 96px;
	background: var(--vx-primary-dark) var(--vx-hero-img, none) center / cover no-repeat; color: var(--vx-white);
}
.vx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44, 42, 38, .72), rgba(44, 42, 38, .25)); }
.vx-hero__inner { position: relative; }
.vx-hero__title { font-family: var(--vx-serif); font-weight: 600; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; letter-spacing: -.02em; max-width: 14ch; margin: 0 0 20px; color: var(--vx-white); }
.vx-hero__subtitle { font-size: clamp(1.0625rem, 2vw, 1.25rem); max-width: 40ch; margin: 0 0 36px; color: rgba(255, 255, 255, .88); }
.vx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Categorías */
.vx-cat { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--vx-radius); overflow: hidden; box-shadow: var(--vx-shadow); text-decoration: none; }
.vx-cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vx-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(44, 42, 38, .65), transparent 55%); }
.vx-cat:hover .vx-cat__img { transform: scale(1.05); }
.vx-cat__name { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; font: 600 1.375rem/1.3 var(--vx-serif); color: var(--vx-white); }

/* Productos (rejilla de WooCommerce dentro de la Home) */
.vx-products .woocommerce ul.products { margin: 0; }

/* Bloque empresas */
.vx-b2b { background: var(--vx-primary); color: var(--vx-white); padding-block: 64px; }
.vx-b2b .vx-head__title { color: var(--vx-white); }
.vx-b2b__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .vx-b2b { padding-block: 96px; } .vx-b2b__inner { grid-template-columns: 1fr 1fr; gap: 64px; } }
.vx-b2b__subtitle { color: rgba(255, 255, 255, .82); font-size: 1.125rem; margin: 0 0 24px; }
.vx-b2b__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vx-radius); }
.vx-checks { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.vx-checks li { position: relative; padding-left: 32px; }
.vx-checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--vx-secondary); color: var(--vx-primary-dark); }

/* Testimonios */
.vx-quote { margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.vx-quote__stars { color: var(--vx-secondary); letter-spacing: 2px; }
.vx-quote__text { margin: 0; padding: 0; border: 0; font: italic 1.0625rem/1.6 var(--vx-serif); color: var(--vx-text); flex: 1; }
.vx-quote__author { display: flex; flex-direction: column; font-size: .875rem; }
.vx-quote__author span { color: var(--vx-muted); }

/* Blog */
.vx-post { overflow: hidden; transition: box-shadow .2s; }
.vx-post:hover { box-shadow: var(--vx-shadow-hover); }
.vx-post__link { display: block; color: inherit; text-decoration: none; }
.vx-post__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vx-post__body { padding: 20px 24px 24px; }
.vx-post__date { font-size: .8125rem; color: var(--vx-muted); }
.vx-post__title { font: 600 1.25rem/1.35 var(--vx-serif); margin: 6px 0 8px; color: var(--vx-text); }
.vx-post__excerpt { margin: 0; font-size: .9375rem; color: var(--vx-muted); }

/* Newsletter */
.vx-newsletter { background: color-mix(in srgb, var(--vx-secondary) 30%, var(--vx-bg)); }
.vx-newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; margin: 28px auto 0; }
.vx-newsletter__form .vx-input { flex: 1 1 240px; }

/* Formularios */
.vx-input {
	width: 100%; padding: 12px 14px; border: 1px solid var(--vx-secondary); border-radius: var(--vx-radius-btn);
	background: var(--vx-white); color: var(--vx-text); font: 400 .9375rem/1.4 var(--vx-sans);
	transition: border-color .2s, box-shadow .2s;
}
.vx-input:focus { outline: none; border-color: var(--vx-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-primary) 25%, transparent); }
.vx-input[aria-invalid="true"] { border-color: #C0392B; background: #FDF3F2; }
textarea.vx-input { resize: vertical; min-height: 140px; }
.vx-row { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .vx-row { grid-template-columns: 1fr 1fr; } }
.vx-field { margin-bottom: 20px; }
.vx-field > label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; }
.vx-field--check label { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; font-weight: 400; }
.vx-field--check input { margin-top: 4px; accent-color: var(--vx-primary); }
.vx-field--check a { color: var(--vx-primary); }
.vx-field__error { margin: 6px 0 0; font-size: .8125rem; color: #C0392B; }
.vx-req { color: #C0392B; }
.vx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.vx-alert { padding: 14px 18px; border-radius: var(--vx-radius-btn); font-size: .9375rem; margin: 16px 0; }
.vx-alert--ok { background: color-mix(in srgb, var(--vx-primary) 12%, var(--vx-white)); color: var(--vx-primary-dark); border: 1px solid color-mix(in srgb, var(--vx-primary) 30%, transparent); }
.vx-alert--error { background: #FDF3F2; color: #8E2A20; border: 1px solid #F1C6C1; }
.vx-alert strong { display: block; margin-bottom: 4px; }

/* Contacto */
.vx-contact__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .vx-contact__grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.vx-contact__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; align-content: start; }
.vx-contact__info li { padding-left: 16px; border-left: 3px solid var(--vx-secondary); }
.vx-contact__label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-primary); }
.vx-contact__value { white-space: pre-line; color: var(--vx-muted); }
.vx-contact__value a { color: inherit; }
.vx-contact__form { padding: 28px; }
@media (min-width: 640px) { .vx-contact__form { padding: 40px; } }
.vx-contact__form-title { font: 600 1.375rem/1.3 var(--vx-serif); margin: 0 0 24px; }

/* FAQ */
.vx-faq__hero { background: var(--vx-primary); color: var(--vx-white); padding-block: 72px; text-align: center; }
.vx-faq__hero .vx-head__title { color: var(--vx-white); }
.vx-faq__intro { margin: 0 auto; max-width: 40rem; font-size: 1.125rem; color: rgba(255, 255, 255, .75); }
.vx-faq__group + .vx-faq__group { margin-top: 48px; }
.vx-faq__group-title { font: 600 1.375rem/1.3 var(--vx-serif); margin: 0 0 16px; }
.vx-faq__list { display: grid; gap: 12px; }
.vx-faq__item { background: var(--vx-white); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); }
.vx-faq__q { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-weight: 600; }
.vx-faq__q::-webkit-details-marker { display: none; }
.vx-faq__q::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--vx-primary); transition: transform .2s; }
.vx-faq__item[open] .vx-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.vx-faq__q:focus-visible { outline: 3px solid var(--vx-secondary); outline-offset: -3px; border-radius: var(--vx-radius); }
.vx-faq__a { padding: 0 24px 20px; color: var(--vx-muted); font-size: .9375rem; }
.vx-faq__a > :first-child { margin-top: 0; }
.vx-faq__a > :last-child { margin-bottom: 0; }
.vx-faq__cta { margin-top: 56px; padding: 40px 28px; text-align: center; }
.vx-faq__cta-title { font: 600 1.375rem/1.3 var(--vx-serif); margin: 0 0 8px; }
.vx-faq__cta p { color: var(--vx-muted); margin: 0 0 24px; }

/* Editor de bloques: vista previa */
.vx-preview-products { list-style: none; margin: 0; padding: 0; }
.vx-preview-products li { overflow: hidden; padding-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.vx-preview-products img { aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 12px; }
.vx-preview-products strong, .vx-preview-products span { padding-inline: 16px; }
.vx-preview-products strong { font: 600 1.0625rem/1.35 var(--vx-serif); }
.vx-preview-products span { color: var(--vx-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.vx *, .vx *::before, .vx *::after { transition: none !important; }
}