/* ==========================================================================
   Zarevo v2 — design/header-footer.css
   Dirección "VIDRIERA CÁLIDA" (port fiel de Zarevo v1 → motor v2). Light-only.

   Piel de marca del CHROME. El motor (core/nav.css + core/components.css +
   core/motion.css) ya resuelve TODA la mecánica: sticky, layout de la barra,
   dropdowns, drawers off-canvas, contadores, búsqueda en vivo, posición/pulso
   del FAB. Acá SOLO va la marca encima, subiendo especificidad donde hace falta.

   Decisiones portadas de v1 (theme.css §6 + zarevo-design.css):
   - Topbar carbón (banda oscura cálida) · header con backdrop cálido difuminado
     y hairline · monograma en carbón + wordmark display tracking apretado.
   - Nav: links ink con subrayado hairline que vira a rojo en hover (rojo = único
     acento). Contador carrito/wishlist = burbuja roja (es "acción").
   - Drawers: panel raised, sombra cálida flotante, títulos display.
   - Footer: STAGE oscuro cálido (--surface-inverse) con texto claro y links que
     viran a --zv-red-bright — el cierre de marca, igual que v1 (footer #1a1714).
   - FAB WhatsApp: verde sobrio de marca (#1faf54 / #1a6741), NO el neón #25d366.
   ========================================================================== */

/* ── Topbar ─────────────────────────────────────────────────────────────
   Banda superior fina sobre stage carbón (v1: --c-verde-800). El core ya la
   pinta en --surface-inverse; acá afinamos el peso tipográfico y el hairline
   inferior para asentarla contra el header claro. */
.vc-topbar {
	background: var(--surface-inverse);
	color: color-mix(in srgb, #fff 88%, transparent);
	font-weight: 500;
	letter-spacing: 0.04em;
	border-bottom: var(--border-w) solid color-mix(in srgb, #fff 8%, transparent);
}
.vc-topbar__text { color: inherit; }

/* ── Header ─────────────────────────────────────────────────────────────
   v1: barra al ras con fondo cálido difuminado (backdrop-filter) y hairline.
   El sticky y el layout los resuelve core/nav.css; acá va la superficie de
   marca: papel cálido semitransparente + blur + hairline. El fondo sólido del
   core queda de fallback para navegadores sin backdrop-filter. */
.vc-header {
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	border-bottom: var(--border-w) solid var(--line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.vc-header {
		background: color-mix(in srgb, var(--surface) 82%, transparent);
		-webkit-backdrop-filter: blur(12px) saturate(1.25);
		backdrop-filter: blur(12px) saturate(1.25);
	}
}

/* ── Marca / logo ───────────────────────────────────────────────────────
   Fallback sin logo: monograma geométrico en carbón + wordmark display con
   tracking apretado (v1). El nombre vira a carbón fuerte en hover del <a>. */
.vc-logo { color: var(--ink); }
.vc-logo:hover { color: var(--brand-strong); }
.vc-logo:hover .vc-logo__name { color: var(--brand-strong); }

.vc-logo__mark { color: var(--brand); }
.vc-logo:hover .vc-logo__mark { color: var(--brand-strong); }

.vc-logo__name {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	color: var(--ink);
	transition: color var(--tr) var(--ease-out);
}
.vc-logo__tag {
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ink-3);
}

/* ── Nav de escritorio ──────────────────────────────────────────────────
   Links ink; el ítem lleva un subrayado hairline que crece de 0 a 100% y vira
   a rojo en hover/activo (rojo = único acento cromático; el resto es carbón).
   El caret del dropdown lo dibuja el core con bordes currentColor. */
@media (min-width: 880px) {
	.vc-nav a {
		position: relative;
		font-weight: 500;
		color: var(--ink);
		transition: color var(--tr) var(--ease-out);
	}
	/* Subrayado hairline animado (bajo el texto, sobre el caret no molesta). */
	.vc-nav a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		height: 1.5px;
		border-radius: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transform-origin: left center;
	}
	.vc-nav a:hover,
	.vc-nav .current-menu-item > a,
	.vc-nav .current-menu-ancestor > a { color: var(--brand-strong); }

	@media (prefers-reduced-motion: no-preference) {
		.vc-nav a::before { transition: transform var(--tr) var(--ease-out); }
	}
	.vc-nav a:hover::before,
	.vc-nav .current-menu-item > a::before,
	.vc-nav .current-menu-ancestor > a::before { transform: scaleX(1); }
	/* El caret de los ítems con hijos no debe llevar el subrayado a lo ancho
	   del gap: se ancla al texto igual, funciona bien visualmente. */

	/* Dropdown: panel raised con sombra cálida flotante (v1 usaba --sh-float).
	   Ítem activo del sub-menú en tint carbón, no rojo (el rojo se reserva). */
	.vc-nav .sub-menu {
		border-radius: var(--radius-lg);
		box-shadow: var(--sh-float);
	}
	.vc-nav .sub-menu a::before { content: none; } /* sin doble subrayado */
	.vc-nav .sub-menu a {
		border-radius: var(--radius-md);
		font-weight: 500;
	}
	.vc-nav .sub-menu a:hover,
	.vc-nav .sub-menu a:focus-visible {
		background: var(--brand-soft);
		color: var(--brand-strong);
	}
}

/* ── Acciones + íconos ──────────────────────────────────────────────────
   Íconos ink (heredan del core .vc-icon-btn); hover a carbón con tint cálido.
   Trazo un poco más fino, como v1 (.rn-header__actions svg { stroke-width }). */
.vc-header__actions .vc-icon-btn { color: var(--ink); }
.vc-header__actions .vc-icon-btn:hover {
	background: var(--surface-2);
	color: var(--brand-strong);
}
.vc-header__actions .vc-icon-btn svg { stroke-width: 1.6; }

/* ── Contadores (carrito / wishlist) ────────────────────────────────────
   Burbuja ROJA: es la única señal de "acción/estado" del chrome (par --cta-*
   ya AA por contrato en el core). Acá sumamos un ring cálido para despegarla
   del ícono al flotar como badge, y peso display en el número. */
.vc-cart-count,
.vc-wishlist-count {
	font-family: var(--font-sans);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0;
}
.vc-icon-btn > .vc-cart-count,
.vc-icon-btn > .vc-wishlist-count {
	box-shadow: 0 0 0 2px var(--surface);
}
/* En el drawer el contador queda inline junto al texto: sin ring (fondo raised). */
.vc-drawer__link .vc-wishlist-count { box-shadow: none; }

/* ── Drawers (nav / búsqueda / mini-cart) ───────────────────────────────
   Panel de marca: superficie raised, hairline en la cabecera, sombra cálida
   profunda. Radio bespoke en el borde interior del panel lateral (redondeo
   del canto que da al contenido), como los paneles flotantes de v1. */
.vc-drawer__panel {
	background: var(--surface-raised);
	box-shadow: var(--sh-soft);
}
/* Panel lateral (nav / mini-cart): entra desde la derecha → redondeo del canto
   izquierdo. */
.vc-drawer--nav .vc-drawer__panel,
.vc-drawer--minicart .vc-drawer__panel {
	border-left: var(--border-w) solid var(--line);
	border-top-left-radius: var(--radius-lg);
	border-bottom-left-radius: var(--radius-lg);
}
/* Sheet de búsqueda: baja desde arriba → redondeo del canto inferior. */
.vc-drawer--search .vc-drawer__panel {
	border-bottom: var(--border-w) solid var(--line);
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.vc-drawer__head { border-bottom: var(--border-w) solid var(--line); }
.vc-drawer__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
}
/* Cierre del drawer: mismo criterio de ícono que el header. */
.vc-drawer__head .vc-icon-btn:hover {
	background: var(--surface-2);
	color: var(--brand-strong);
}

/* Menú del drawer (mobile): títulos display, activos en carbón fuerte. */
.vc-drawer-nav__menu > li { border-bottom-color: var(--line); }
.vc-drawer-nav__menu > li > a {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.vc-drawer-nav__menu a:hover,
.vc-drawer-nav__menu .current-menu-item > a { color: var(--brand-strong); }

/* Links utilitarios del drawer (wishlist / cuenta): borde hairline que vira a
   carbón en hover (acción secundaria = carbón, nunca rojo). */
.vc-drawer__link {
	border-radius: var(--radius-md);
	color: var(--ink);
}
.vc-drawer__link:hover {
	color: var(--brand-strong);
	border-color: var(--brand);
	background: var(--surface-2);
}

/* ── Búsqueda en vivo (dentro del sheet) ────────────────────────────────
   Contenedor de resultados con radio de tarjeta y sombra cálida sutil. El
   precio en display; el <del> en muted (contrato de precios de la dirección).
   Resaltado por teclado en tint carbón, no rojo. */
.vc-livesearch {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
}
.vc-livesearch__item.is-active { background: var(--brand-soft); }
.vc-livesearch__name { font-weight: 600; }
.vc-livesearch__price {
	font-family: var(--font-display);
	font-variant-numeric: lining-nums tabular-nums;
}
.vc-livesearch__price .amount { font-weight: 700; color: var(--ink); }
.vc-livesearch__price del { color: var(--ink-3); font-weight: 500; }
/* "Ver todos los resultados": la única acción del panel → texto rojo. */
.vc-livesearch__all {
	color: var(--accent);
	font-weight: 600;
}
.vc-livesearch__all:hover { color: var(--accent-strong); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — STAGE oscuro cálido (cierre de marca). Igual que v1 (#1a1714).
   Texto claro sobre carbón; títulos sans 600; links viran a rojo brillante
   (--zv-red-bright, brick claro AA sobre oscuro). El hairline superior y los
   separadores usan blanco a baja opacidad (no --line, que es cálido claro).
   ══════════════════════════════════════════════════════════════════════ */
.vc-footer {
	background: var(--surface-inverse);
	color: color-mix(in srgb, #fff 74%, transparent);
	border-top: 0;
}

/* Marca del pie */
.vc-footer__name {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
}
.vc-footer__about { color: color-mix(in srgb, #fff 68%, transparent); }

/* Títulos de columna: sans 600, blanco pleno (v1). */
.vc-footer__title {
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
}

/* Links de columnas / contacto: claros, hover a rojo brillante. */
.vc-footer__menu a,
.vc-footer__contact-item,
.vc-footer__contact-item a {
	color: color-mix(in srgb, #fff 74%, transparent);
	transition: color var(--tr) var(--ease-out);
}
.vc-footer__menu a:hover,
.vc-footer__contact-item a:hover { color: var(--zv-red-bright); }

/* Pie legal: separador en blanco tenue, texto atenuado. */
.vc-footer__bottom {
	border-top: var(--border-w) solid color-mix(in srgb, #fff 14%, transparent);
	color: color-mix(in srgb, #fff 55%, transparent);
}
.vc-footer__copy,
.vc-footer__shipnote { color: color-mix(in srgb, #fff 55%, transparent); }
.vc-footer__credit { color: color-mix(in srgb, #fff 55%, transparent); }
.vc-footer__credit-link {
	color: color-mix(in srgb, #fff 80%, transparent);
	font-weight: 600;
	transition: color var(--tr) var(--ease-out);
}
.vc-footer__credit-link:hover { color: var(--zv-red-bright); }

/* Foco sobre el stage oscuro: el --focus-ring rojo #9c2a20 queda bajo (contraste
   insuficiente sobre carbón). Se sube a un cálido claro (v1: sobre stage el
   anillo va claro) para mantener ≥3:1. */
.vc-footer :focus-visible {
	outline-color: var(--zv-red-bright);
}

/* Logo raster del cliente sobre el stage oscuro: si es un PNG oscuro no se ve.
   Sin invertir a ciegas (rompería logos claros); solo garantizamos que el
   nombre-fallback y los textos ya son claros. El tope de tamaño lo pone el core. */

/* ── FAB WhatsApp ───────────────────────────────────────────────────────
   Verde SOBRIO de marca del canal, NO el neón #25d366 (igual criterio que v1:
   #1f7a4d). Uso el verde de marca directo — no es un token del sistema y el
   rojo/--cta- está reservado para conversión de tienda, así que el FAB de un
   canal externo se pinta con su color propio, atenuado para pegar con la
   paleta cálida. Blanco sobre este verde: contraste AA. La posición, el pulso
   y el estado "oculto con drawer abierto" los resuelve core/motion.css. */
.vc-whatsapp-fab {
	background: #1faf54;            /* verde WhatsApp de marca, sobrio (v1) */
	color: #fff;
	box-shadow: 0 10px 26px -8px rgba(15, 92, 44, 0.55), var(--shadow-1);
}
.vc-whatsapp-fab:hover {
	background: #1a6741;            /* hover más profundo (v1) */
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	.vc-whatsapp-fab:hover {
		box-shadow: 0 16px 34px -8px rgba(15, 92, 44, 0.6), var(--shadow-1);
	}
}
/* Anillo de foco visible sobre cualquier fondo (el verde es oscuro). */
.vc-whatsapp-fab:focus-visible { outline-color: var(--brand-strong); }