/* ==========================================================================
   VIDRIERA CÁLIDA — design/home.css  ·  Piel de la HOME (port fiel de Zarevo v1).
   El core da el wrapper .vc-sec + .vc-sec-head + .vc-kicker + la grilla de
   productos (core/shop.css). El LAYOUT INTERNO de cada sección de home
   (beneficios, categorías, historia, guía, tranquilidad, instagram, newsletter)
   lo define ESTA piel: grids, tamaño de íconos, tiles, formularios.

   Marca: base cálida, display Bricolage, rojo (--accent) SOLO en el dot del
   kicker y en la conversión (los .vc-btn--primary heredan --cta-bg del core).
   GESTO FIRMA: hero producto-en-vidriera (backdrop en capas + panel --sh-soft).
   ========================================================================== */

/* ── Encabezados de sección (.vc-sec-head) ────────────────────────────────
   El core da el layout (--row = flex); acá va la marca: título display grande,
   bajada ink-2, acción como link de texto con subrayado hairline → rojo. */
.vc-sec-head__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	color: var(--brand-strong);
	text-wrap: balance;
}
.vc-sec-head__lead {
	font-family: var(--font-sans);
	font-size: clamp(1rem, 0.98rem + 0.2vw, 1.12rem);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 54ch;
}
.vc-sec-head__action {
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--brand-strong);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 4px;
	transition: color var(--tr) var(--ease-out), text-decoration-color var(--tr) var(--ease-out);
}
.vc-sec-head__action:hover {
	color: var(--accent-strong);
	text-decoration-color: var(--accent);
}
.vc-sec-head__action svg { color: currentColor; }

/* ════════════════════════════════════════════════════════════════════════
   HERO — producto en vidriera cálida (receta hero-split, mutación v1 .zv-hero)
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--hero {
	background: var(--surface);
	overflow: hidden;
}
.vc-sec--hero .vc-hero--split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	min-height: min(74vh, 700px);
}
.vc-hero__content { max-width: 34rem; }

/* Kicker con el punto rojo firma (única gota de rojo del hero fuera del CTA). */
.vc-hero__content .vc-kicker::before,
.vc-sec--story .vc-kicker::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.vc-hero__content .vc-kicker,
.vc-sec--story .vc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink-3);
}

.vc-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-display);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--brand-strong);
	text-wrap: balance;
	margin-top: var(--sp-4);
}
.vc-hero__lead {
	margin-top: var(--sp-5);
	max-width: 42ch;
	font-family: var(--font-sans);
	font-size: clamp(1rem, 0.98rem + 0.25vw, 1.15rem);
	line-height: 1.6;
	color: var(--ink-2);
}
.vc-hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Vidriera: el producto flota sobre un backdrop cálido EN CAPAS (glow rojo muy
   sutil + gradiente piedra) y descansa en un panel raised con sombra difusa. */
.vc-hero__media {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
	padding: clamp(1rem, 3vw, 2.5rem);
	min-height: 320px;
	margin: 0;
	border: 0;
	background: transparent;
}
.vc-hero__media::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(0.5rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem);
	border-radius: 28px;
	background:
		radial-gradient(85% 70% at 78% 22%, var(--zv-red-soft), transparent 60%),
		linear-gradient(150deg, var(--surface-2), var(--surface-raised));
}
.vc-hero__img {
	position: relative;
	z-index: 1;
	width: min(100%, 460px);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: var(--surface-raised);
	border-radius: 20px;
	box-shadow: var(--sh-soft);
}
.vc-ph__note {
	display: block;
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--ink-3);
	text-align: center;
}

@media (max-width: 860px) {
	.vc-sec--hero .vc-hero--split {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.vc-hero__media { margin-top: var(--sp-5); }
	.vc-hero__img { width: min(80%, 340px); }
}

/* Entrada orquestada — LCP-safe: el copy sube+aparece escalonado; la vidriera
   sólo escala sutil (sin opacity:0) para no retrasar el LCP. Tras no-preference. */
@media (prefers-reduced-motion: no-preference) {
	.vc-hero__content > * { animation: vc-hero-rise 0.8s var(--ease-out-quint) both; }
	.vc-hero__content .vc-kicker { animation-delay: 0.02s; }
	.vc-hero__title { animation-delay: 0.08s; }
	.vc-hero__lead { animation-delay: 0.16s; }
	.vc-hero__actions { animation-delay: 0.24s; }
	.vc-hero__media { animation: vc-hero-pop 0.9s var(--ease-out-quint) both; animation-delay: 0.06s; }
}
@keyframes vc-hero-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@keyframes vc-hero-pop {
	from { transform: scale(0.985); }
	to { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   BENEFICIOS (.vc-benefits ul → .vc-benefit li) — fila de reaseguros
   Layout de la piel: grid de ítems; ícono en CHIP raised chico (¡acá estaba el
   bug del ícono gigante!); título display; texto muted.
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--benefits { background: var(--surface-2); }
.vc-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
}
.vc-benefit__ico {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	background: var(--surface-raised);
	border: var(--border-w) solid var(--line);
	color: var(--brand);
}
.vc-benefit__ico svg { width: 1.4rem; height: 1.4rem; }
.vc-benefit__body { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.vc-benefit__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--brand-strong);
}
/* --ink-2 (no --ink-3): el body chico va directo sobre la banda piedra
   (.vc-sec--benefits = surface-2); --ink-2 da 7.6:1 vs 5.1:1 del muted. */
.vc-benefit__text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }

/* ── Destacados / Novedades (.vc-sec--featured/newest) ────────────────────
   Las tarjetas las viste shop.css (una sola fuente). El fondo alterna con las
   bandas piedra. La grilla del core es auto-fill; acá la fijamos a una escalera
   propia para mostrar 5 productos por fila en desktop ancho (decisión Zarevo; el
   conteo lo sube el filtro vc_home_products_count en functions.php). Sólo afecta
   a las filas de la HOME — la tienda mantiene su grilla auto-fill. */
.vc-sec--featured,
.vc-sec--newest { background: var(--surface); }

.vc-sec--featured ul.products,
.vc-sec--newest ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 680px) {
	.vc-sec--featured ul.products,
	.vc-sec--newest ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.vc-sec--featured ul.products,
	.vc-sec--newest ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
	.vc-sec--featured ul.products,
	.vc-sec--newest ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Con 6 productos (vc_home_products_count=6) la grilla queda par en 2/3/4 col
   (2+2+2, 3+3, 4+2), pero en 5 col (≥1120) 6 = 5+1 (huérfano). Ahí ocultamos el
   6º: en desktop se ven 5 en una fila; en celular los 6 (3 filas de 2). */
@media (min-width: 1120px) {
	.vc-sec--featured ul.products > li:nth-child(6),
	.vc-sec--newest ul.products > li:nth-child(6) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CATEGORÍAS (.vc-cats → .vc-cat) — tiles editoriales con imagen + label overlay
   ════════════════════════════════════════════════════════════════════════ */
.vc-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.vc-cats--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-cat {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-2);
	color: #fff;
}
.vc-cat__media {
	position: absolute;
	inset: 0;
	display: block;
}
.vc-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Categoría SIN imagen (thumbnail no cargado en WP): en vez del SVG gris,
   tarjeta branded (gradiente acento→carbón) para que se vea intencional. El
   cliente puede subir una imagen real desde Productos → Categorías cuando quiera. */
.vc-cat__media--placeholder {
	background: linear-gradient(150deg, var(--accent) 0%, var(--brand-strong) 100%);
}
.vc-cat__media--placeholder .vc-ph { display: none; }
/* Scrim inferior para asentar el label sobre cualquier imagen (o placeholder). */
.vc-cat::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(to top, rgba(26, 23, 20, 0.62), transparent);
	pointer-events: none;
}
.vc-cat__label {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4);
}
.vc-cat__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
	color: #fff;
}
.vc-cat__ico {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   SOBRE ZAREVO — STAGE oscuro cálido (.vc-sec--story). El cierre de marca.
   Split imagen + texto; texto claro, kicker rojo brillante, foco claro.
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--story {
	background: var(--surface-inverse);
	color: color-mix(in srgb, #fff 74%, transparent);
}
.vc-story--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
/* Espaciado vertical del bloque de texto: el reset limpia todos los márgenes,
   así que sin esto kicker/título/párrafos/CTA quedan pegados en el split. */
.vc-story__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(var(--sp-4), 3vw, var(--sp-5));
}
.vc-sec--story .vc-kicker { color: var(--zv-red-bright); }
.vc-sec--story .vc-kicker::before { background: var(--zv-red-bright); }
.vc-story__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}
.vc-story__p {
	color: color-mix(in srgb, #fff 72%, transparent);
	line-height: 1.7;
}
.vc-story__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--sh-soft);
}
.vc-story__img { width: 100%; height: auto; display: block; }
/* Estado sin imagen: asegura alto (3:2) y algo de presencia sobre el fondo
   inverso mientras el cliente no subió su foto (el placeholder es muy tenue). */
.vc-story__media--placeholder {
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, #fff 5%, transparent);
}
.vc-sec--story :focus-visible { outline-color: var(--zv-red-bright); }

@media (max-width: 860px) {
	.vc-story--split { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   GUÍA (.vc-guide → .vc-guide__card) — tarjetas de orientación
   ════════════════════════════════════════════════════════════════════════ */
.vc-guide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.vc-guide__card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-raised);
	box-shadow: var(--shadow-1);
	color: var(--ink);
	transition: box-shadow var(--tr) var(--ease-out), transform var(--tr) var(--ease-out-quint);
}
.vc-guide__ico {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--brand);
}
.vc-guide__ico svg { width: 1.5rem; height: 1.5rem; }
.vc-guide__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--brand-strong);
}
.vc-guide__text { color: var(--ink-3); line-height: 1.55; }
.vc-guide__link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--brand-strong);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}
/* La flecha del "Ver →": vc_icon emite el SVG sin width/height y el reset lo
   dejaría crecer a todo el ancho de la tarjeta. Se fija a tamaño de ícono. */
.vc-guide__link svg { width: 1rem; height: 1rem; flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.vc-guide__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
	.vc-guide__card:hover .vc-guide__link { text-decoration-color: var(--accent); color: var(--accent-strong); }
}

/* ════════════════════════════════════════════════════════════════════════
   FRANJA DE TRANQUILIDAD (.vc-reassurance → __item) — reaseguros sobrios
   ════════════════════════════════════════════════════════════════════════ */
.vc-reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-reassurance__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
}
.vc-reassurance__ico {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	color: var(--brand);
}
.vc-reassurance__ico svg { width: 1.4rem; height: 1.4rem; }
.vc-reassurance__text { color: var(--ink-2); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════════
   INSTAGRAM (.vc-instagram → __cell) — grilla social cuadrada con overlay
   ════════════════════════════════════════════════════════════════════════ */
/* Flex (no grid auto-fit): con auto-fit una sola foto se estiraba a todo el ancho
   y con aspect-ratio 1/1 quedaba enorme. Con flex + base/tope fijos y centrado,
   1 foto o 6 quedan siempre como thumbnails prolijos. */
.vc-instagram {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-instagram__cell {
	position: relative;
	flex: 0 1 200px;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-2);
}
/* En celular la fila de thumbnails de 200px dejaba 1-2 fotos gigantes por fila
   (se veía raro). Bajo 620px pasa a grilla de 3 columnas: mini-cuadrados tipo
   feed de Instagram, prolijos y compactos. */
@media (max-width: 620px) {
	.vc-instagram {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-content: stretch;
	}
	.vc-instagram__cell { flex: none; max-width: none; }
}
.vc-instagram__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vc-instagram__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--surface-inverse) 55%, transparent);
	color: #fff;
	opacity: 0;
	transition: opacity var(--tr) var(--ease-out);
}
.vc-instagram__cell:hover .vc-instagram__overlay,
.vc-instagram__cell:focus-within .vc-instagram__overlay { opacity: 1; }
.vc-instagram__overlay svg { width: 1.75rem; height: 1.75rem; }
/* CTA de fallback (sin fotos): bloque centrado con el .vc-btn--primary del core. */
.vc-instagram--cta { text-align: center; }
.vc-instagram--cta .vc-instagram__cta-text {
	margin: var(--sp-3) auto var(--sp-5);
	max-width: 46ch;
	color: var(--ink-2);
}
.vc-instagram--cta .vc-instagram__ico svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
	.vc-instagram__overlay { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEWSLETTER (.vc-newsletter → vc-newsletter-form) — banda de cierre piedra
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--newsletter { background: var(--surface-2); }
.vc-newsletter { max-width: 620px; margin-inline: auto; text-align: center; }
/* Centrar el header COMO BLOQUE: el core le da max-width 60ch sin margin auto,
   lo que lo dejaba corrido a la izquierda respecto del form (que sí centra). */
.vc-newsletter .vc-sec-head { max-width: none; margin-inline: auto; }
.vc-newsletter .vc-sec-head__lead { margin-inline: auto; }
.vc-newsletter-form { margin-top: var(--sp-5); }
.vc-newsletter-form__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
}
.vc-newsletter-form__input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
	color: var(--ink);
	font: inherit;
}
.vc-newsletter-form__input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}
.vc-newsletter-form__msg { margin-bottom: var(--sp-3); font-weight: 600; }
.vc-newsletter-form__msg--ok { color: var(--ok); }
.vc-newsletter-form__msg--error { color: var(--error); }
/* Mobile: input + botón apilados a ancho completo (mejor área táctil). */
@media (max-width: 480px) {
	.vc-newsletter-form__form { flex-direction: column; }
	.vc-newsletter-form__input,
	.vc-newsletter-form__submit { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   COMBOS / KITS (.vc-combos → .vc-combo) — tarjetas de bundle
   El motor emite el markup (template-parts/home/combos.php) pero NO trae CSS
   base: es la piel la que arma la tarjeta. Grid de tarjetas raised, media con
   badge de oferta, lista de "qué incluye" con check, y pie con precio + CTA.
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--combos { background: var(--surface-2); }
.vc-combos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.vc-combo {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-raised);
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--tr) var(--ease-out), transform var(--tr) var(--ease-out-quint);
}
.vc-combo__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-2);
}
.vc-combo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-combo__media .vc-badge--oferta {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 1;
	background: var(--accent);
	color: var(--cta-ink);
}
.vc-combo__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1 1 auto;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.vc-combo__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: -0.01em;
	color: var(--brand-strong);
}
.vc-combo__items {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-combo__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.vc-combo__check {
	flex: none;
	display: inline-grid;
	place-items: center;
	margin-top: 0.1em;
	color: var(--brand);
}
.vc-combo__check svg { width: 1.05rem; height: 1.05rem; }
/* Pie: precio arriba, CTA a lo ancho (robusto con/sin precio o compare). */
.vc-combo__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding-top: var(--sp-1);
}
.vc-combo__price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
}
.vc-combo__price-now {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-h3);
	color: var(--brand-strong);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-combo__price-was {
	color: var(--ink-3);
	text-decoration: line-through;
	font-size: var(--fs-sm);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-combo__cta { align-self: stretch; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
	.vc-combo:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
}

/* ════════════════════════════════════════════════════════════════════════
   RESEÑAS (.vc-testimonials → .vc-testimonial) — prueba social
   Grid de tarjetas de cita raised; comilla firma en rojo, autor con avatar
   redondo. El motor emite figure/blockquote/figcaption; la piel lo viste.
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--testimonials { background: var(--surface); }
.vc-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.vc-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-raised);
	box-shadow: var(--shadow-1);
}
.vc-testimonial__quote {
	margin: 0;
	flex: 1 1 auto;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.vc-testimonial__quote::before {
	content: "\201C";
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 0.5;
	color: var(--accent);
	margin-bottom: var(--sp-2);
}
.vc-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.vc-testimonial__avatar {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--surface-2);
}
.vc-testimonial__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vc-testimonial__name {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--brand-strong);
}
.vc-testimonial__city { font-size: var(--fs-sm); color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   CONFIANZA (.vc-trust) — marquee de logos + reseñas con foto + badges
   El motor (inc/trust.php) emite el markup; la piel arma el ritmo entre los
   tres bloques y viste la grilla de reseñas en el render default 'grid' (la
   variante cita-grande la cubre el recetario). Las estrellas necesitan tamaño
   explícito: vc_icon emite el SVG sin width/height.
   ════════════════════════════════════════════════════════════════════════ */
.vc-sec--trust { background: var(--surface-2); }
.vc-trust {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--sp-5), 5vw, var(--sp-7));
}
.vc-trust__badges { display: flex; justify-content: center; }
.vc-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-review {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-raised);
	box-shadow: var(--shadow-1);
}
.vc-review__quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.vc-review__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.vc-review__star { width: 1rem; height: 1rem; flex: none; }
.vc-review__text { color: var(--ink); line-height: 1.55; font-size: var(--fs-sm); }
.vc-review__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: auto;
}
.vc-review__avatar { flex: none; display: inline-grid; }
.vc-review__photo {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--surface-2);
}
.vc-review__name {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--brand-strong);
}
.vc-review__product {
	flex-basis: 100%;
	font-size: var(--fs-xs);
	color: var(--ink-3);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}

/* ── Categorías: zoom de imagen + empuje de flecha (motion tras no-preference) ─ */
@media (prefers-reduced-motion: no-preference) {
	.vc-cat__img { transition: transform var(--tr-slow) var(--ease-out-quint); }
	.vc-cat:hover .vc-cat__img { transform: scale(1.06); }
	.vc-cat__ico { transition: transform var(--tr) var(--ease-out-quint); }
	.vc-cat:hover .vc-cat__ico { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-cat:hover .vc-cat__img { transform: none; }
}