/* ==========================================================================
   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); }

/* 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);
}
.vc-benefit__text { color: var(--ink-3); 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)); }
}

/* ════════════════════════════════════════════════════════════════════════
   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;
}
/* 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;
}
.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; }
.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;
	color: var(--brand-strong);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}
@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
   ════════════════════════════════════════════════════════════════════════ */
.vc-instagram {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vc-instagram__cell {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-2);
}
.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; }
.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); }

/* ── 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; }
}