/*
 Theme Name: Astra Child (VH Catálogo)
 Template: astra
 Description: Child theme del catálogo VH. Header, footer y tokens de diseño
 por código (plan-accion-2.md, paso 1). Estilos de categoría (paso 3) y de
 producto/single (paso 4) incluidos.
 Version: 0.5.0
*/

/* ==========================================================================
   Tokens de diseño
   Referencia visual: sitio real (header navy sólido, footer navy oscuro,
   tarjetas blancas, botones outline "Consultar →"). Paleta 100% azul de la
   marca — sin colores inventados. Se agrega motion sutil en hover porque la
   clienta pidió botones más interesantes y un sitio menos "rígido y duro".
   ========================================================================== */
:root {
	/* Paleta — azul de marca */
	--vh-navy-header: #102661;   /* header sólido */
	--vh-navy-950: #0b1e33;      /* footer */
	--vh-navy-900: #102661;      /* texto títulos */
	--vh-blue-600: #1c2f7a;
	--vh-blue-500: #2743a6;      /* acento / links */
	--vh-blue-400: #3a5ccc;

	--vh-white: #ffffff;
	--vh-gray-50: #f5f6f8;
	--vh-gray-100: #eceef2;
	--vh-gray-200: #dfe3ea;
	--vh-gray-500: #7a8290;
	--vh-gray-600: #5b6472;
	--vh-ink: #102661;

	/* Tipografía */
	--vh-font-heading: 'Barlow', sans-serif;
	--vh-font-body: 'Karla', sans-serif;

	/* Forma */
	--vh-radius-sm: 6px;
	--vh-radius-md: 12px;
	--vh-radius-full: 999px;

	/* Elevación */
	--vh-shadow-card: 0 6px 24px rgba(11, 30, 51, 0.08);
	--vh-shadow-hover: 0 14px 34px rgba(11, 30, 51, 0.16);

	/* Movimiento */
	--vh-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--vh-transition-fast: 180ms var(--vh-ease);
	--vh-transition: 260ms var(--vh-ease);

	/* Header */
	--vh-header-height: 96px;
	--vh-header-height-scrolled: 68px;
}

body {
	font-family: var(--vh-font-body);
	color: var(--vh-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vh-font-heading);
	font-weight: 700;
	color: var(--vh-navy-900);
}

a {
	transition: color var(--vh-transition-fast);
}

img {
	transition: transform var(--vh-transition);
}

/* Botones reutilizables (categoría/producto los heredan en pasos 3-4).
   Estilo base = outline navy con flecha, como el "Consultar →" del sitio. */
.vh-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--vh-font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 13px 24px;
	border-radius: var(--vh-radius-full);
	border: 1.5px solid var(--vh-navy-900);
	background: transparent;
	color: var(--vh-navy-900);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--vh-transition-fast), box-shadow var(--vh-transition-fast),
		background-color var(--vh-transition-fast), color var(--vh-transition-fast),
		border-color var(--vh-transition-fast);
}

.vh-btn:hover,
.vh-btn:focus-visible {
	transform: translateY(-2px);
	background: var(--vh-navy-900);
	color: var(--vh-white);
	box-shadow: var(--vh-shadow-card);
}

/* Variante primaria (fondo lleno) para el CTA del hero/producto */
.vh-btn--primary {
	background: var(--vh-blue-500);
	border-color: var(--vh-blue-500);
	color: var(--vh-white);
}

.vh-btn--primary:hover,
.vh-btn--primary:focus-visible {
	background: var(--vh-blue-600);
	border-color: var(--vh-blue-600);
	color: var(--vh-white);
}

/* CTA sobre fondo navy (header): outline blanco */
.vh-btn--onnavy {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--vh-white);
}

.vh-btn--onnavy:hover,
.vh-btn--onnavy:focus-visible {
	background: var(--vh-white);
	border-color: var(--vh-white);
	color: var(--vh-navy-header);
}

/* Bloque de consulta por WhatsApp (vh/consulta-whatsapp) */
.vh-consulta-wa {
	margin: 24px 0;
}

.vh-consulta-wa .vh-wa-icon {
	flex: 0 0 auto;
}

/* Variante WhatsApp: relleno verde + texto blanco (color de marca WhatsApp) */
.vh-btn--wa {
	background: #25d366;
	border-color: #25d366;
	color: var(--vh-white);
}

.vh-btn--wa:hover,
.vh-btn--wa:focus-visible {
	background: #1da851;
	border-color: #1da851;
	color: var(--vh-white);
}

/* Micro-interacción transversal: leve zoom de imágenes al hover */
a:hover img,
.vh-hover-zoom:hover img {
	transform: scale(1.04);
}

/* ==========================================================================
   Header — navy sólido
   ========================================================================== */
.vh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--vh-navy-header);
	transition: background-color var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-header.is-scrolled {
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

/* En la home el header va integrado al hero: transparente y superpuesto
   sobre el degradé navy (no ocupa lugar en el flujo, el hero arranca desde
   arriba de todo). Al scrollear se vuelve navy sólido fijo, igual que en el
   resto del sitio. */
.home .vh-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.home .vh-header.is-scrolled {
	position: fixed;
	background: var(--vh-navy-header);
}

.vh-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	height: var(--vh-header-height);
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 32px;
	transition: height var(--vh-transition);
}

.vh-header.is-scrolled .vh-header__inner {
	height: var(--vh-header-height-scrolled);
}

.vh-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-family: var(--vh-font-heading);
	font-weight: 800;
	font-size: 22px;
	color: var(--vh-white);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.vh-header__logo img {
	max-height: 46px;
	width: auto;
	transition: max-height var(--vh-transition);
}

.vh-header.is-scrolled .vh-header__logo img {
	max-height: 34px;
}

.vh-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.vh-header__nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
}

.vh-header__nav a {
	font-family: var(--vh-font-heading);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	position: relative;
	padding: 6px 0;
}

.vh-header__nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--vh-white);
	transition: width var(--vh-transition-fast);
}

.vh-header__nav a:hover,
.vh-header__nav a:focus-visible,
.vh-header__nav li.current-menu-item > a {
	color: var(--vh-white);
}

.vh-header__nav a:hover::after,
.vh-header__nav a:focus-visible::after,
.vh-header__nav li.current-menu-item > a::after {
	width: 100%;
}

.vh-header__nav .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: -14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.vh-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--vh-white);
	border-radius: var(--vh-radius-sm);
	box-shadow: var(--vh-shadow-hover);
	padding: 8px;
	min-width: 230px;
	margin-top: 0;
	max-height: min(460px, calc(100vh - var(--vh-header-height) - 32px));
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.vh-header__nav .sub-menu::-webkit-scrollbar {
	display: none;
}

/* Botón "ver más" sticky al fondo del dropdown, solo cuando hay contenido
   que no entra en el max-height (lo activa header.js con la clase .has-more). */
.vh-header__nav .sub-menu .vh-submenu-more {
	display: none;
	position: sticky;
	bottom: -8px;
	width: 100%;
	list-style: none;
}

.vh-header__nav .sub-menu.has-more .vh-submenu-more {
	display: block;
}

.vh-header__nav .vh-submenu-more__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 20px 0 16px;
	border: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--vh-white) 60%);
	cursor: pointer;
}

.vh-header__nav .vh-submenu-more__chevron {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--vh-blue-500);
	border-bottom: 1.5px solid var(--vh-blue-500);
	transform: rotate(45deg);
}

.vh-header__nav li {
	position: relative;
}

/* El gap visual entre el link y el dropdown se crea con padding-bottom del
   propio <li> (no con margin-top del .sub-menu): así el gap ES parte del
   hitbox del <li>, el cursor lo puede cruzar sin perder el :hover y el
   dropdown no se cierra antes de llegar a los ítems. El margin negativo lo
   cancela para no descentrar el link en el header. Antes esto se resolvía
   con un ::before del .sub-menu, pero deja de funcionar cuando el .sub-menu
   tiene overflow != visible (el scroll del dropdown largo de PRODUCTOS lo
   clipeaba). */
.vh-header__nav > ul > li.menu-item-has-children {
	padding-bottom: 16px;
	margin-bottom: -16px;
}

.vh-header__nav .sub-menu li {
	width: 100%;
}

.vh-header__nav li:hover > .sub-menu,
.vh-header__nav li:focus-within > .sub-menu {
	display: flex;
}

.vh-header__nav .sub-menu a {
	display: block;
	color: var(--vh-ink);
	text-transform: none;
	text-align: left;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0;
	padding: 9px 14px;
	border-radius: var(--vh-radius-sm);
	white-space: nowrap;
}

.vh-header__nav .sub-menu a::after,
.vh-header__nav .sub-menu .menu-item-has-children > a::before {
	display: none;
}

.vh-header__nav .sub-menu a:hover {
	background: var(--vh-gray-50);
	color: var(--vh-blue-500);
}

/* Ítem activo dentro del dropdown: fondo blanco, así que el texto va en azul
   (no blanco como en el header navy) para que no quede invisible. */
.vh-header__nav .sub-menu li.current-menu-item > a,
.vh-header__nav .sub-menu li.current-menu-parent > a {
	color: var(--vh-blue-500);
	background: var(--vh-gray-50);
	font-weight: 600;
}

.vh-header__cta {
	flex-shrink: 0;
	padding: 11px 22px;
	font-size: 13px;
}

/* CTA de contacto: fondo blanco por defecto (se diferencia del resto del
   menú, que es solo texto), invierte a outline transparente en hover. */
.vh-header__cta.vh-btn--onnavy {
	background: var(--vh-white);
	border-color: var(--vh-white);
	color: var(--vh-navy-header);
}

.vh-header__cta.vh-btn--onnavy:hover,
.vh-header__cta.vh-btn--onnavy:focus-visible {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--vh-white);
}

.vh-header__toggle {
	display: none;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
}

/* Anula el fondo azul que Astra pone en button:hover/:focus */
.vh-header__toggle:hover,
.vh-header__toggle:focus {
	background: transparent;
	box-shadow: none;
}

.vh-header__toggle-bar {
	position: absolute;
	left: 10px;
	right: 10px;
	height: 2px;
	background: var(--vh-white);
	transition: transform var(--vh-transition-fast), opacity var(--vh-transition-fast), top var(--vh-transition-fast);
}

.vh-header__toggle-bar:nth-child(1) {
	top: 14px;
}

.vh-header__toggle-bar:nth-child(2) {
	top: 21px;
}

.vh-header__toggle-bar:nth-child(3) {
	top: 28px;
}

.vh-header.is-nav-open .vh-header__toggle-bar:nth-child(1) {
	top: 21px;
	transform: scaleX(1.2) rotate(45deg);
}

.vh-header.is-nav-open .vh-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.vh-header.is-nav-open .vh-header__toggle-bar:nth-child(3) {
	top: 21px;
	transform: scaleX(1.2) rotate(-45deg);
}

@media (max-width: 960px) {
	.vh-header__inner {
		gap: 12px;
		padding: 0 20px;
	}

	.vh-header__toggle {
		display: block;
		margin-left: auto;
	}

	.vh-header__logo {
		font-size: 17px;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vh-header__cta--desktop {
		display: none;
	}

	.vh-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		background: var(--vh-navy-950);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--vh-transition);
	}

	.vh-header.is-nav-open .vh-header__nav {
		max-height: 80vh;
		overflow-y: auto;
	}

	.vh-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 24px;
	}

	.vh-header__nav li {
		width: 100%;
	}

	.vh-header__nav a {
		display: block;
		padding: 13px 0;
	}

	.vh-header__nav .menu-item-has-children > a::before {
		right: 4px;
	}

	.vh-header__nav .sub-menu {
		display: flex;
		position: static;
		box-shadow: none;
		background: transparent;
		padding: 0 0 8px 16px;
		margin-top: 0;
		min-width: 0;
		/* En mobile scrollea el menú entero (max-height del .vh-header__nav): el
		   dropdown no necesita su propio scroll ni el botón "ver más". */
		max-height: none;
		overflow: visible;
	}

	/* Aunque header.js le ponga .has-more, en mobile no va el botón blanco. */
	.vh-header__nav .sub-menu.has-more .vh-submenu-more {
		display: none;
	}

	.vh-header__nav .sub-menu a {
		color: rgba(255, 255, 255, 0.72);
	}

	.vh-header__nav .sub-menu a:hover {
		background: transparent;
		color: var(--vh-white);
	}

	.vh-header__nav a.vh-header__cta--mobile {
		display: flex;
		width: calc(100% - 40px);
		margin: 12px 20px 20px;
		justify-content: center;
	}
}

@media (min-width: 961px) {
	.vh-header__cta--mobile {
		display: none;
	}
}

/* ==========================================================================
   Footer — navy oscuro
   ========================================================================== */
.vh-footer {
	background: var(--vh-navy-950);
	color: rgba(255, 255, 255, 0.72);
	padding: 76px 32px 0;
}

.vh-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vh-footer__brand-logo {
	display: inline-flex;
	font-family: var(--vh-font-heading);
	font-weight: 800;
	font-size: 24px;
	color: var(--vh-white);
	text-decoration: none;
	margin-bottom: 20px;
}

.vh-footer__brand-logo img {
	max-height: 48px;
	width: auto;
}

.vh-footer__brand p {
	max-width: 36ch;
	line-height: 1.7;
	font-size: 15px;
	margin-bottom: 24px;
}

.vh-footer h3 {
	color: var(--vh-white);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 22px;
}

.vh-footer__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vh-footer__links a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.vh-footer__links a:hover {
	color: var(--vh-white);
}

.vh-footer__social {
	display: flex;
	gap: 10px;
}

.vh-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--vh-radius-full);
	background: rgba(255, 255, 255, 0.08);
	color: var(--vh-white);
	text-decoration: none;
	transition: background-color var(--vh-transition-fast), color var(--vh-transition-fast), transform var(--vh-transition-fast);
}

.vh-footer__social a svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.vh-footer__social a:hover {
	background: var(--vh-white);
	color: var(--vh-navy-950);
	transform: translateY(-2px);
}

.vh-footer__contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vh-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.vh-footer__contact li svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	fill: rgba(255, 255, 255, 0.55);
}

.vh-footer__bottom {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 26px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 960px) {
	.vh-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.vh-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 820px) {
	.vh-footer {
		padding-top: 56px;
	}

	.vh-footer__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ==========================================================================
   Catálogo — templates de categoría (paso 3)
   Reusa los tokens del paso 1 (paleta navy, tipografía, sombras, botones).
   ========================================================================== */

/* Hero de sección (nivel 1: PRODUCTOS, BANDAS) */
.vh-cat-hero {
	background:
		linear-gradient(120deg, rgba(11, 30, 51, 0.92) 0%, rgba(22, 37, 107, 0.86) 100%),
		var(--vh-navy-header);
	color: var(--vh-white);
	padding: 64px 32px;
	min-height: 420px;
	display: flex;
	align-items: center;
}

.vh-cat-hero--photo {
	background-image:
		linear-gradient(120deg, rgba(11, 30, 51, 0.62) 0%, rgba(22, 37, 107, 0.5) 100%),
		var(--vh-cat-hero-img);
	background-size: cover;
	background-position: center;
}

.vh-cat-hero__inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.vh-cat-hero__title {
	color: var(--vh-white);
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.1;
	margin: 0;
}

.vh-cat-hero__subtitle {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Contenedor */
.vh-cat {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 32px 72px;
}

.vh-cat--full {
	padding-top: 48px;
}

/* Breadcrumb */
.vh-breadcrumb {
	font-size: 13px;
	color: var(--vh-gray-600);
	margin-bottom: 28px;
}

.vh-breadcrumb a {
	color: var(--vh-gray-600);
	text-decoration: none;
}

.vh-breadcrumb a:hover {
	color: var(--vh-blue-500);
}

.vh-breadcrumb [aria-current="page"] {
	color: var(--vh-navy-900);
	font-weight: 600;
}

.vh-breadcrumb__sep {
	margin: 0 9px;
	color: var(--vh-gray-200);
}

/* Título de categoría (niveles 2+) + divisor punteado */
.vh-cat__title {
	text-align: center;
	font-size: clamp(26px, 3vw, 38px);
	margin: 8px 0 24px;
}

.vh-divider {
	height: 0;
	border-top: 2px dotted var(--vh-gray-200);
	max-width: 1120px;
	margin: 0 auto 40px;
}

/* Layout de dos columnas (sidebar + main) */
.vh-cat__layout {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: 40px;
	align-items: start;
}

.vh-cat__section-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vh-gray-500);
	margin: 8px 0 18px;
}

.vh-cat__main .vh-card-grid + .vh-cat__section-label {
	margin-top: 44px;
}

/* Sidebar de navegación por categorías (acordeón <details>, sin JS) */
.vh-catnav {
	position: sticky;
	top: calc(var(--vh-header-height-scrolled) + 20px);
}

/* Toggle "Categorías": botón colapsable en mobile, encabezado plano en desktop.
   Controlado por un checkbox oculto (checkbox-hack, sin JS). */
.vh-catnav__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vh-catnav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-sm);
	background: var(--vh-white);
	font-family: var(--vh-font-heading);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vh-navy-900);
	cursor: pointer;
}

.vh-catnav__toggle-chev {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--vh-transition-fast);
	opacity: 0.7;
}

.vh-catnav__cb:checked ~ .vh-catnav__toggle .vh-catnav__toggle-chev {
	transform: rotate(-135deg);
}

/* Panel: visible por defecto (caso desktop). En mobile se colapsa. */
.vh-catnav__panel {
	display: block;
}

.vh-catnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-catnav__list .vh-catnav__list {
	margin-left: 14px;
	border-left: 1px solid var(--vh-gray-200);
	padding-left: 4px;
}

.vh-catnav__item > a,
.vh-catnav__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--vh-radius-sm);
	color: var(--vh-navy-900);
	font-size: 14.5px;
	text-decoration: none;
	cursor: pointer;
}

.vh-catnav__summary a {
	color: inherit;
	text-decoration: none;
	flex: 1 1 auto;
}

.vh-catnav__item > a:hover,
.vh-catnav__summary:hover {
	background: var(--vh-gray-50);
	color: var(--vh-blue-500);
}

.vh-catnav__item.is-current > a,
.vh-catnav__item.is-current > details > .vh-catnav__summary {
	background: var(--vh-gray-100);
	color: var(--vh-blue-500);
	font-weight: 700;
}

/* Ocultar el marcador nativo del <details> y usar un chevron propio */
.vh-catnav__summary {
	list-style: none;
}

.vh-catnav__summary::-webkit-details-marker {
	display: none;
}

.vh-catnav__chev {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--vh-transition-fast);
	opacity: 0.6;
}

.vh-catnav details[open] > .vh-catnav__summary .vh-catnav__chev {
	transform: rotate(-135deg);
}

/* Grid de cards */
.vh-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 24px;
}

.vh-card {
	display: flex;
	flex-direction: column;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--vh-shadow-card);
	transition: transform var(--vh-transition), box-shadow var(--vh-transition), border-color var(--vh-transition);
}

.vh-card:hover,
.vh-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
	border-color: var(--vh-gray-100);
}

.vh-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vh-gray-50);
}

.vh-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vh-card__img--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--vh-gray-200);
	background: var(--vh-gray-50);
}

.vh-placeholder-icon {
	width: 48px;
	height: 48px;
}

.vh-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 20px 18px 22px;
	text-align: center;
	flex: 1 1 auto;
}

.vh-card__title {
	font-family: var(--vh-font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--vh-navy-900);
}

/* El botón dentro de la card es decorativo (la card entera es el link):
   hereda el estilo .vh-btn pero reacciona al hover de la card, no al propio. */
.vh-card__btn {
	margin-top: auto;
	padding: 10px 20px;
	font-size: 13.5px;
	pointer-events: none;
}

.vh-card:hover .vh-card__btn,
.vh-card:focus-visible .vh-card__btn {
	transform: translateY(-2px);
	background: var(--vh-navy-900);
	color: var(--vh-white);
	box-shadow: var(--vh-shadow-card);
}

/* Card de subcategoría: tile horizontal bajo (ícono + título + flecha), a
   propósito muy distinto en forma del producto fotográfico (foto grande
   arriba + botón abajo) — se lee como fila de índice, no como ítem del
   catálogo. Reusa el mismo markup (.vh-card__media + .vh-card__body) pero
   lo reacomoda por completo con flex row. */
.vh-card--subcat {
	flex-direction: row;
	align-items: center;
	background: rgba(16, 38, 97, 0.05);
	border-color: rgba(16, 38, 97, 0.14);
	box-shadow: none;
}

.vh-card--subcat:hover,
.vh-card--subcat:focus-visible {
	transform: translateY(-2px);
	background: rgba(16, 38, 97, 0.1);
	border-color: rgba(16, 38, 97, 0.28);
	box-shadow: var(--vh-shadow-card);
}

.vh-card--subcat .vh-card__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	aspect-ratio: auto;
	border-radius: var(--vh-radius-md);
	margin: 14px 0 14px 14px;
	background: transparent;
}

.vh-card--subcat .vh-card__img--placeholder {
	width: 100%;
	height: 100%;
	color: var(--vh-navy-900);
	opacity: 0.55;
}

.vh-card--subcat .vh-placeholder-icon {
	width: 26px;
	height: 26px;
}

.vh-card--subcat .vh-card__img {
	border-radius: var(--vh-radius-md);
}

.vh-card--subcat .vh-card__body {
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	text-align: left;
}

.vh-card--subcat .vh-card__title {
	font-size: 15px;
}

.vh-btn--subcat {
	margin-top: 0;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--vh-navy-900);
	font-size: 0;
}

.vh-btn--subcat::after {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--vh-transition-fast);
}

.vh-card--subcat:hover .vh-card__btn.vh-btn--subcat,
.vh-card--subcat:focus-visible .vh-card__btn.vh-btn--subcat {
	background: transparent;
	color: var(--vh-navy-900);
	box-shadow: none;
	transform: none;
}

.vh-card--subcat:hover .vh-btn--subcat::after,
.vh-card--subcat:focus-visible .vh-btn--subcat::after {
	transform: rotate(-45deg) translate(2px, -2px);
}

/* Card de categoría nivel 2 ("featured"): las 12 que cuelgan directo de
   PRODUCTOS. Vuelve al layout vertical clásico (foto/ícono grande arriba,
   fondo blanco como la card de producto) para pesar más que el tile
   compacto de nivel 3; el único acento propio es el título más grande. */
.vh-card--subcat-featured .vh-placeholder-icon {
	width: 52px;
	height: 52px;
}

.vh-card--subcat-featured .vh-card__title {
	font-size: 18px;
}

.vh-card--subcat-featured .vh-btn--subcat {
	all: unset;
	margin-top: auto;
	padding: 10px 20px;
	border-radius: var(--vh-radius-full);
	border: 1.5px solid var(--vh-navy-900);
	color: var(--vh-navy-900);
	font-family: var(--vh-font-heading);
	font-weight: 600;
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: transform var(--vh-transition-fast), background-color var(--vh-transition-fast),
		color var(--vh-transition-fast);
}

.vh-card--subcat-featured .vh-btn--subcat::after {
	content: none;
}

.vh-card--subcat-featured:hover .vh-card__btn.vh-btn--subcat,
.vh-card--subcat-featured:focus-visible .vh-card__btn.vh-btn--subcat {
	transform: translateY(-2px);
	background: var(--vh-navy-900);
	color: var(--vh-white);
}

.vh-empty {
	color: var(--vh-gray-600);
	font-style: italic;
}

/* Desktop: el sidebar está siempre visible — el label se ve como encabezado
   plano (sin borde ni chevron) y el checkbox no hace falta. */
@media (min-width: 901px) {
	.vh-catnav__cb {
		display: none;
	}

	.vh-catnav__toggle {
		border: none;
		background: transparent;
		padding: 0 0 12px;
		color: var(--vh-gray-500);
		cursor: default;
		pointer-events: none;
	}

	.vh-catnav__toggle-chev {
		display: none;
	}
}

@media (max-width: 900px) {
	.vh-cat__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.vh-catnav {
		position: static;
	}

	/* Colapsado por defecto; el checkbox marcado lo despliega. */
	.vh-catnav__panel {
		display: none;
		padding-top: 14px;
	}

	.vh-catnav__cb:checked ~ .vh-catnav__panel {
		display: block;
	}
}

@media (max-width: 600px) {
	.vh-cat,
	.vh-cat-hero {
		padding-left: 20px;
		padding-right: 20px;
	}

	.vh-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 16px;
	}

	/* Las cards de subcategoría (nivel 2 y 3) se recortan en 2 columnas en
	   mobile — fuerzan 1 sola columna, las de producto siguen en 2. */
	.vh-card--subcat,
	.vh-card--subcat-featured {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Catálogo — template de producto (single) — paso 4
   Reusa tokens/sidebar/breadcrumb del paso 1 y 3.
   ========================================================================== */
.vh-producto {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 32px 72px;
}

/* Layout de 2 columnas: sidebar de categorías + contenido del producto */
.vh-producto__layout {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: 40px;
	align-items: start;
}

/* --- Vista simple: galería + panel de info lado a lado --- */
.vh-producto__main {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.vh-producto__main.is-no-media {
	grid-template-columns: 1fr;
	max-width: 720px;
}

.vh-producto__title {
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.12;
	margin: 0 0 18px;
}

.vh-producto__title--rich {
	text-align: center;
}

.vh-divider--left {
	margin: 0 0 24px;
	max-width: 90px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: var(--vh-blue-500);
}

.vh-producto__content > * {
	margin-top: 0;
	margin-bottom: 16px;
}

.vh-producto__content .wp-block-heading {
	font-size: 19px;
	line-height: 1.35;
	color: var(--vh-navy-900);
}

.vh-producto__content p {
	line-height: 1.7;
	color: var(--vh-gray-600);
}

.vh-producto__info .vh-consulta-wa {
	margin-top: 28px;
}

/* --- Galería / carousel --- */
.vh-gallery {
	position: sticky;
	top: calc(var(--vh-header-height-scrolled) + 20px);
}

.vh-gallery__stage {
	position: relative;
	border-radius: var(--vh-radius-md);
	background: var(--vh-gray-100);
	box-shadow: var(--vh-shadow-card);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.vh-gallery__slide {
	position: absolute;
	inset: 0;
	display: none;
}

.vh-gallery__slide.is-active {
	display: block;
}

/* Cover: la imagen llena el marco (sin relleno blanco), recortando lo que sobre. */
.vh-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}

/* Flechas prev/next */
.vh-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	padding: 0; /* Astra le mete padding al <button>; lo anulamos */
	border: none;
	border-radius: var(--vh-radius-full);
	background: rgba(255, 255, 255, 0.9);
	color: var(--vh-navy-900);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(11, 30, 51, 0.18);
	transition: background-color var(--vh-transition-fast), color var(--vh-transition-fast), transform var(--vh-transition-fast);
	z-index: 2;
}

.vh-gallery__nav svg {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.vh-gallery__nav--prev {
	left: 14px;
}

.vh-gallery__nav--next {
	right: 14px;
}

.vh-gallery__nav:hover {
	background: var(--vh-navy-900);
	color: var(--vh-white);
	transform: translateY(-50%) scale(1.06);
}

/* Miniaturas */
.vh-gallery__thumbs {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.vh-gallery__thumb {
	width: 68px;
	height: 68px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--vh-radius-sm);
	background: var(--vh-gray-100);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--vh-transition-fast), transform var(--vh-transition-fast);
}

.vh-gallery__thumb:hover {
	transform: translateY(-2px);
	border-color: var(--vh-blue-400);
}

.vh-gallery__thumb.is-active {
	border-color: var(--vh-blue-500);
}

.vh-gallery__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lightbox (imagen ampliada) */
.vh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(6, 16, 30, 0.88);
	cursor: zoom-out;
}

.vh-lightbox.is-open {
	display: flex;
}

.vh-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--vh-radius-sm);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	cursor: default;
}

.vh-lightbox__close {
	position: absolute;
	top: 20px;
	right: 26px;
	width: 44px;
	height: 44px;
	padding: 0; /* Astra le mete padding al <button> */
	border: none;
	background: transparent;
	box-shadow: none;
	color: var(--vh-white);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var(--vh-transition-fast), transform var(--vh-transition-fast);
}

/* Anula el fondo azul que Astra pone en button:hover/:focus */
.vh-lightbox__close:hover,
.vh-lightbox__close:focus {
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transform: scale(1.1);
}

/* --- Vista rich: artículo en flujo (landing) --- */
.vh-producto__article {
	max-width: 760px;
}

.vh-producto__article .wp-block-heading {
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.3;
	margin: 32px 0 12px;
}

.vh-producto__article .wp-block-image {
	margin: 20px 0;
	text-align: center;
}

/* Las landings viejas traen íconos/ilustraciones (muchos "en blanco"): se
   acotan a un tamaño de ícono y se les da un fondo suave para que los blancos
   no queden invisibles sobre el gris de la página. */
.vh-producto__article .wp-block-image img {
	max-width: min(100%, 300px);
	height: auto;
	border-radius: var(--vh-radius-md);
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-100);
	padding: 14px;
}

.vh-producto__article .wp-block-gallery {
	margin: 24px 0;
}

.vh-producto__article p {
	line-height: 1.75;
	color: var(--vh-gray-600);
	margin: 0 0 16px;
}

.vh-producto__article .vh-consulta-wa {
	margin: 20px 0 32px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.vh-producto__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.vh-gallery {
		position: static;
	}
}

@media (max-width: 720px) {
	.vh-producto__main {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 600px) {
	.vh-producto {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   Página institucional Industrias — /industrias/ (page-industrias.php)
   Grid de sectores con ícono navy (asset del tema) + título + CTA. Reusa los
   tokens del paso 1 (paleta, tipografía, sombras, botón, transiciones).
   ========================================================================== */
.vh-ind {
	max-width: 1320px;
	margin: 0 auto;
	padding: 64px 32px 80px;
}

.vh-ind__head {
	text-align: center;
	margin-bottom: 48px;
}

.vh-ind__title {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--vh-navy-900);
	margin: 0 0 32px;
}

/* La dotted rule del header reusa .vh-divider (misma que categoría). */
.vh-ind__head .vh-divider {
	margin-bottom: 0;
}

.vh-ind__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px;
}

.vh-ind-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	padding: 40px 24px 32px;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
	text-decoration: none;
	transition: transform var(--vh-transition), box-shadow var(--vh-transition),
		border-color var(--vh-transition);
}

.vh-ind-card:hover,
.vh-ind-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
	border-color: var(--vh-gray-100);
}

.vh-ind-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 128px;
}

.vh-ind-card__icon img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	transition: transform var(--vh-transition);
}

.vh-ind-card:hover .vh-ind-card__icon img,
.vh-ind-card:focus-visible .vh-ind-card__icon img {
	transform: scale(1.06);
}

.vh-ind-card__title {
	font-family: var(--vh-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--vh-navy-900);
}

.vh-ind-card__rule {
	width: 56px;
	height: 0;
	border-top: 2px dotted var(--vh-gray-200);
}

/* Botón decorativo (la card entera es el link): reacciona al hover de la card. */
.vh-ind-card__btn {
	margin-top: 6px;
	padding: 10px 22px;
	font-size: 13.5px;
	pointer-events: none;
}

.vh-ind-card:hover .vh-ind-card__btn,
.vh-ind-card:focus-visible .vh-ind-card__btn {
	transform: translateY(-2px);
	background: var(--vh-navy-900);
	color: var(--vh-white);
	box-shadow: var(--vh-shadow-card);
}

@media (max-width: 600px) {
	.vh-ind {
		padding: 44px 20px 64px;
	}

	.vh-ind__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vh-ind-card {
		padding: 30px 20px 26px;
		gap: 16px;
	}

	.vh-ind-card__icon {
		height: 88px;
	}

	.vh-ind-card__title {
		font-size: 15px;
	}
}

/* ==========================================================================
   Página institucional Servicios — /servicios/ (page-servicios.php)
   Grid de cards del CPT `servicio` (bloque vh/servicio): título + descripción
   + CTA de WhatsApp. Reusa los tokens del paso 1, mismo criterio de wrapper
   centrado + divider punteado que /industrias/.
   ========================================================================== */
.vh-servicios {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 32px 80px;
}

.vh-servicios__title {
	text-align: center;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--vh-navy-900);
	margin: 0 0 32px;
}

.vh-servicios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

.vh-servicio {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 40px 32px;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
	transition: transform var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-servicio:hover {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
}

.vh-servicio__title {
	font-size: 22px;
	line-height: 1.25;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-servicio__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--vh-gray-600);
	margin: 0;
}

.vh-servicio__cta {
	margin-top: auto;
	padding: 10px 22px;
	font-size: 13.5px;
}

@media (max-width: 600px) {
	.vh-servicios {
		padding: 44px 20px 64px;
	}

	.vh-servicios__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vh-servicio {
		padding: 30px 22px;
	}
}

/* ==========================================================================
   Página institucional Descarga — /descarga/ (page-descarga.php)
   Grid de cards del CPT `descarga` (bloque vh/descarga): tapa + título +
   botón circular de descarga. Mismo wrapper centrado + divider punteado que
   /servicios/ e /industrias/; la tapa imita la proporción de un catálogo
   (retrato) tal como en el sitio viejo.
   ========================================================================== */
.vh-descargas {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 32px 80px;
}

.vh-descargas__title {
	text-align: center;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--vh-navy-900);
	margin: 0 0 32px;
}

.vh-descargas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px 28px;
}

.vh-descarga {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.vh-descarga__portada {
	width: 100%;
	aspect-ratio: 210 / 297;
	border-radius: var(--vh-radius-md);
	overflow: hidden;
	box-shadow: var(--vh-shadow-card);
	transition: transform var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-descarga__portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vh-descarga:hover .vh-descarga__portada {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
}

.vh-descarga__title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-descarga__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--vh-navy-900);
	color: var(--vh-navy-900);
	transition: background var(--vh-transition), color var(--vh-transition);
}

.vh-descarga__cta:hover {
	background: var(--vh-navy-900);
	color: var(--vh-white);
}

@media (max-width: 600px) {
	.vh-descargas {
		padding: 44px 20px 64px;
	}

	.vh-descargas__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}
}

/* ==========================================================================
   Página institucional Contacto — /contacto/ (page-contacto.php)
   Datos de contacto leídos directo de Ajustes → VH (sin bloque ni CPT: es un
   único registro fijo, no una lista). Mismo wrapper centrado + divider
   punteado que /servicios/ y /descarga/, 4 columnas de dato+ícono y mapa
   embebido de Google Maps a ancho completo debajo.
   ========================================================================== */
.vh-contacto {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 32px 56px;
}

.vh-contacto__title {
	text-align: center;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--vh-navy-900);
	margin: 0 0 32px;
}

.vh-contacto__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	text-align: center;
}

.vh-contacto__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.vh-contacto__item svg {
	width: 44px;
	height: 44px;
	fill: var(--vh-navy-900);
	margin-bottom: 4px;
}

.vh-contacto__item h2 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-contacto__item p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--vh-gray-600);
	margin: 0;
}

.vh-contacto__mapa {
	width: 100%;
	line-height: 0;
}

.vh-contacto__mapa iframe {
	display: block;
}

@media (max-width: 600px) {
	.vh-contacto {
		padding: 44px 20px 40px;
	}

	.vh-contacto__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ==========================================================================
   Página de marca (vh/pagina-marca) — plan-accion-3.md, paso 2
   Landing de marca de BANDAS Y TRANSPORTES (Eurobelt, Mafdel, Clasificador+553).
   Diseño fijo; los datos se editan desde el bloque. Reusa los tokens del paso 1
   (paleta, tipografía, sombras, botón) para quedar consistente con el sitio, no
   como calco 1:1 del sitio viejo. Todas las secciones son opcionales.
   ========================================================================== */
.vh-marca {
	color: var(--vh-ink);
}

/* Vista de marca en single-producto.php (plan-accion-3.md, paso 4): el bloque
   controla sus propios anchos (.vh-marca__inner y la franja de sectores
   full-bleed), así que el <main> no restringe ni padea — de lo contrario la
   franja de sectores dejaría de ser full-bleed y se duplicaría el padding. */
.vh-producto--marca {
	max-width: none;
	padding: 0;
}

/* El breadcrump va en su propio inner arriba del hero del bloque; separarlo del
   header. */
.vh-producto--marca > .vh-marca__inner:first-child {
	padding-top: 28px;
}

/* Contenedor común de las secciones en flujo (hero/líneas/modelos/logo). La
   franja de sectores es full-bleed y no usa este inner. */
.vh-marca__inner {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* --- 1. Hero: título a la izquierda, badges a la derecha --- */
.vh-marca-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding-top: 72px;
	padding-bottom: 24px;
}

.vh-marca-hero__text {
	flex: 1 1 420px;
	min-width: 0;
}

.vh-marca-hero__title {
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.08;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-marca-hero__subtitle {
	margin: 14px 0 0;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.5;
	color: var(--vh-gray-600);
}

.vh-marca-badges {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.vh-marca-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	width: 96px;
}

.vh-marca-badge__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.vh-marca-badge__text {
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--vh-navy-900);
}

/* --- 2. Líneas: cards imagen + título + descripción + botón --- */
.vh-marca-lineas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.vh-marca-linea {
	display: flex;
	flex-direction: column;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
	overflow: hidden;
	transition: transform var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-marca-linea:hover {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
}

.vh-marca-linea__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--vh-gray-100);
}

.vh-marca-linea__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vh-marca-linea__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 26px 24px 30px;
	flex: 1 1 auto;
}

.vh-marca-linea__title {
	font-size: 20px;
	line-height: 1.2;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-marca-linea__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--vh-gray-600);
	margin: 0;
}

.vh-marca-linea .vh-btn,
.vh-marca-modelo .vh-btn {
	margin-top: auto;
	padding: 9px 20px;
	font-size: 13px;
}

/* --- 3. Modelos destacados: encabezado + grilla de cards chatas --- */
.vh-marca-modelos {
	padding-top: 8px;
	padding-bottom: 8px;
}

.vh-marca-modelos__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 28px;
}

.vh-marca-modelos__title {
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--vh-navy-900);
	margin: 0;
}

/* Link de texto (sin caja), para "Consultar todos los modelos". */
.vh-btn--link {
	border: none;
	background: none;
	padding: 0;
	color: var(--vh-blue-500);
	box-shadow: none;
}

.vh-btn--link:hover,
.vh-btn--link:focus-visible {
	background: none;
	color: var(--vh-blue-600);
	box-shadow: none;
	transform: none;
	text-decoration: underline;
}

.vh-marca-modelos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.vh-marca-modelo {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vh-marca-modelo__media {
	aspect-ratio: 4 / 3;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-100);
	border-radius: var(--vh-radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vh-marca-modelo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vh-marca-modelo__info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vh-marca-modelo__text {
	min-width: 0;
}

.vh-marca-modelo__title {
	font-size: 16px;
	line-height: 1.2;
	color: var(--vh-navy-900);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.vh-marca-modelo__sub {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--vh-gray-500);
}

/* --- 4. Logo de la marca --- */
.vh-marca-logo {
	padding-top: 40px;
	padding-bottom: 40px;
}

.vh-marca-logo__img {
	max-width: 220px;
	height: auto;
	display: block;
}

/* --- 5. Sectores donde se aplican: franja full-bleed con foto de fondo --- */
.vh-marca-sectores {
	position: relative;
	/* Full-bleed dentro del wrapper de contenido (paso 4). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 40px;
	min-height: 456px;
	display: flex;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media (max-width: 900px), (pointer: coarse) {
	/* background-attachment: fixed no soporta scroll táctil en iOS y trabarse
	   en mobile; ahí se cae a scroll normal. */
	.vh-marca-sectores {
		background-attachment: scroll;
	}
}

/* Velo claro sobre la foto para que los íconos navy tengan contraste (igual
   que el sitio viejo). Sin foto, fondo gris suave. */
.vh-marca-sectores.has-bg .vh-marca-sectores__overlay {
	background: rgba(245, 246, 248, 0.82);
}

.vh-marca-sectores__overlay {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--vh-gray-50);
	padding: 64px 32px 72px;
}

.vh-marca-sectores__title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 15px;
	color: var(--vh-navy-900);
	margin: 0 auto 44px;
}

.vh-marca-sectores__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1120px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 36px 40px;
}

.vh-marca-sector {
	display: flex;
	flex: 0 0 150px;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.vh-marca-sector__icon {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.vh-marca-sector__text {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--vh-navy-900);
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.vh-marca-hero {
		padding-top: 48px;
	}

	.vh-marca-badges {
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.vh-marca__inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.vh-marca-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 36px;
		gap: 24px;
	}

	.vh-marca-hero__text {
		flex: none;
		width: 100%;
	}

	.vh-marca-badges {
		justify-content: center;
		gap: 16px;
	}

	.vh-marca-badge {
		width: 76px;
		gap: 8px;
	}

	.vh-marca-badge__icon {
		width: 44px;
		height: 44px;
	}

	.vh-marca-badge__text {
		font-size: 11.5px;
	}

	.vh-marca-logo {
		text-align: center;
	}

	.vh-marca-logo__img {
		margin: 0 auto;
	}

	.vh-marca-sectores__overlay {
		padding: 44px 20px 52px;
	}

	.vh-marca-sectores__grid {
		gap: 28px 16px;
	}

	.vh-marca-sector {
		flex-basis: 120px;
	}
}

/* --- Panel del editor (repeaters / media) --- */
.vh-pm-row {
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-sm);
	padding: 12px;
	margin-bottom: 12px;
	background: rgba(0, 0, 0, 0.015);
}

.vh-pm-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.vh-pm-row__num {
	font-size: 11px;
	font-weight: 700;
	color: var(--vh-gray-500);
}

.vh-pm-hint {
	margin: 16px 0 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vh-gray-500);
}

.vh-pm-media {
	margin-bottom: 12px;
}

.vh-pm-media__label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--vh-gray-500);
}

.vh-pm-media__control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.vh-pm-media__thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--vh-gray-200);
}

/* ==========================================================================
   Página de inicio — / (front-page.php, bloque vh/home)
   Hero full-width con foto de fondo + CTA, grilla de "lo que nos define",
   franja de marca destacada (fondo gris), grilla de logos de marcas, y
   sucursal comercial (texto + foto) separada por el divider punteado.
   ========================================================================== */
.vh-home-hero {
	background:
		linear-gradient(90deg, var(--vh-navy-header) 0%, rgba(16, 38, 97, 0.9) 40%, rgba(16, 38, 97, 0.72) 100%),
		var(--vh-navy-header);
	color: var(--vh-white);
	/* El header transparente se superpone arriba (ver .home .vh-header): el
	   padding-top deja el título por debajo del header. */
	padding: calc(var(--vh-header-height) + 72px) 32px 96px;
	min-height: 620px;
	display: flex;
	align-items: center;
}

.vh-home-hero.has-bg {
	background-image:
		linear-gradient(90deg, var(--vh-navy-header) 0%, rgba(16, 38, 97, 0.92) 30%, rgba(16, 38, 97, 0.4) 62%, rgba(16, 38, 97, 0.18) 100%),
		var(--vh-home-hero-img);
	background-size: cover;
	background-position: center;
}

.vh-home-hero__inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.vh-home-hero__title {
	color: var(--vh-white);
	max-width: 24ch;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.12;
	margin: 0;
}

.vh-home-hero__subtitle {
	max-width: 60ch;
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* CTA del hero: pill blanco lleno con texto navy (como el sitio original). */
.vh-home-hero__cta {
	margin-top: 34px;
	background: var(--vh-white);
	border-color: var(--vh-white);
	color: var(--vh-navy-header);
	padding: 16px 30px;
}

.vh-home-hero__cta:hover,
.vh-home-hero__cta:focus-visible {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--vh-navy-header);
}

.vh-home__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 32px;
}

/* Lo que nos define */
.vh-home-features__title {
	text-align: center;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--vh-navy-900);
	margin: 0 0 40px;
}

.vh-home-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.vh-home-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 0 24px;
	border-left: 1px dotted var(--vh-gray-200);
}

.vh-home-feature:first-child {
	border-left: none;
}

.vh-home-feature__icon {
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin-bottom: 8px;
}

.vh-home-feature__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-home-feature__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--vh-gray-600);
	margin: 0;
}

/* Marca destacada */
.vh-home-marca-destacada {
	background: var(--vh-gray-100);
}

.vh-home-marca-destacada__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.vh-home-marca-destacada__text {
	flex: 1 1 420px;
}

.vh-home-marca-destacada__title {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.3;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-home-marca-destacada__desc {
	max-width: 56ch;
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vh-gray-600);
}

.vh-home-marca-destacada__logo {
	flex: 0 0 auto;
}

.vh-home-marca-destacada__img {
	max-width: 220px;
	height: auto;
}

/* Marcas que comercializamos — cinta en loop continuo */
.vh-home-marcas {
	padding: 96px 0;
	overflow: hidden;
}

.vh-home-marcas__title {
	text-align: center;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--vh-navy-900);
	max-width: 1120px;
	margin: 0 auto 64px;
	padding: 0 32px;
}

/* Viewport: recorta la cinta y difumina los bordes para que los logos
   aparezcan/desaparezcan suave en vez de cortarse de golpe. */
.vh-home-marcas__viewport {
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.vh-home-marcas__track {
	display: flex;
	width: max-content;
	animation: vh-marcas-scroll 32s linear infinite;
}

.vh-home-marcas__viewport:hover .vh-home-marcas__track {
	animation-play-state: paused;
}

/* La 2da cinta (mobile) va hacia el lado opuesto reproduciendo el keyframe al revés. */
.vh-home-marcas__track--reverse {
	animation-direction: reverse;
}

/* Por defecto (desktop) solo la cinta única; las dos cintas cruzadas son de mobile. */
.vh-home-marcas__band--mobile {
	display: none;
}

.vh-home-marcas__band--second {
	margin-top: 28px;
}

.vh-home-marcas__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.vh-home-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 44px;
	border-left: 1px dotted var(--vh-gray-200);
}

.vh-home-marca__logo {
	max-height: 48px;
	width: auto;
	object-fit: contain;
}

/* Se traslada -50%: como la pista son 2 grupos idénticos, al llegar a la mitad
   el frame es idéntico al inicial y el loop es imperceptible. */
@keyframes vh-marcas-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Respeta a quien reduce el movimiento: sin animación, logos centrados. */
@media (prefers-reduced-motion: reduce) {
	.vh-home-marcas__track {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.vh-home-marcas__group[aria-hidden="true"] {
		display: none;
	}
}

/* Sucursal comercial */
.vh-home-sucursal {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}

.vh-home-sucursal__text {
	flex: 1 1 360px;
}

.vh-home-sucursal__title {
	font-size: clamp(22px, 2.6vw, 28px);
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-home-sucursal__desc {
	max-width: 52ch;
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vh-gray-600);
}

.vh-home-sucursal__media {
	flex: 1 1 360px;
}

.vh-home-sucursal__img {
	width: 100%;
	height: auto;
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
}

@media (max-width: 900px) {
	.vh-home-features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	.vh-home-feature {
		border-left: none;
		padding: 0 12px;
	}
}

@media (max-width: 600px) {
	.vh-home-hero {
		padding: calc(var(--vh-header-height) + 40px) 20px 56px;
		min-height: 420px;
		text-align: center;
	}

	.vh-home-hero__title,
	.vh-home-hero__subtitle {
		max-width: none;
	}

	.vh-home__inner {
		padding: 48px 20px;
	}

	.vh-home-features__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.vh-home-marca-destacada__inner {
		padding: 40px 20px;
		text-align: center;
		justify-content: center;
	}

	/* Mobile: menos padding vertical y menos aire bajo el título. */
	.vh-home-marcas {
		padding: 56px 0;
	}

	.vh-home-marcas__title {
		margin-bottom: 40px;
	}

	/* Mobile: se oculta la cinta única y aparecen las dos cintas cruzadas. */
	.vh-home-marcas__band--desktop {
		display: none;
	}

	.vh-home-marcas__band--mobile {
		display: block;
	}

	/* Menos logos por cinta → menos recorrido; se acelera para que no arrastre. */
	.vh-home-marcas__band--mobile .vh-home-marcas__track {
		animation-duration: 18s;
	}

	.vh-home-sucursal {
		gap: 28px;
		padding-top: 0;
	}

	.vh-home-sucursal__text {
		text-align: center;
	}
}

/* ==========================================================================
   Índice raíz de BANDAS Y TRANSPORTES — v1.0.0
   Vista diferencial de la sección: filas alternadas (foto + texto + logo de
   marca) intercaladas con banners anchos. Render en inc/bandas-indice.php,
   template taxonomy-categoria_producto-bandas-y-transportes.php.
   ========================================================================== */
.vh-bandas .vh-bandas-indice {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --- Fila: foto a un lado, texto + logo + CTA al otro (alterna) --- */
.vh-bandas-fila {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: stretch;
	background: var(--vh-white);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
	overflow: hidden;
	transition: transform var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-bandas-fila:hover {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
}

/* Alterna el lado de la foto (impares = foto a la derecha). */
.vh-bandas-fila--flip {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.vh-bandas-fila--flip .vh-bandas-fila__media {
	order: 2;
}

.vh-bandas-fila__media {
	position: relative;
	min-height: 240px;
	background: var(--vh-gray-100);
	overflow: hidden;
}

.vh-bandas-fila__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vh-bandas-fila__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vh-gray-500);
}

.vh-bandas-fila__img--placeholder .vh-placeholder-icon {
	width: 64px;
	height: 64px;
}

.vh-bandas-fila__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 40px 44px;
}

.vh-bandas-fila__title {
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.15;
	color: var(--vh-navy-900);
	margin: 0;
}

.vh-bandas-fila__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vh-gray-600);
	margin: 0;
	max-width: 52ch;
}

.vh-bandas-fila__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 8px;
}

/* CTA de texto (sin caja), navy con flecha — como el "Descubrir productos →". */
.vh-bandas-fila__cta.vh-btn--link {
	color: var(--vh-navy-900);
	font-weight: 700;
	font-size: 14px;
}

.vh-bandas-fila__cta.vh-btn--link:hover,
.vh-bandas-fila__cta.vh-btn--link:focus-visible {
	color: var(--vh-blue-500);
}

.vh-bandas-fila__brand {
	flex: none;
	display: inline-flex;
	align-items: center;
}

.vh-bandas-fila__logo {
	max-height: 34px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* --- Banners: franjas anchas separadas (como las cards) con foto de fondo +
   logo encima, sobre un overlay sutil para contrastar el logo --- */
.vh-bandas-banners {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.vh-bandas-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 128px;
	padding: 20px 32px;
	background: var(--vh-gray-100);
	border: 1px solid var(--vh-gray-200);
	border-radius: var(--vh-radius-md);
	box-shadow: var(--vh-shadow-card);
	overflow: hidden;
	text-decoration: none;
	position: relative;
	transition: transform var(--vh-transition), box-shadow var(--vh-transition);
}

.vh-bandas-banner.has-bg {
	background-size: cover;
	background-position: center;
}

/* Overlay sutil (velo claro) para que el logo de marca resalte sobre la foto. */
.vh-bandas-banner.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.34);
	transition: background var(--vh-transition-fast);
}

.vh-bandas-banner:hover,
.vh-bandas-banner:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--vh-shadow-hover);
}

.vh-bandas-banner:hover.has-bg::before,
.vh-bandas-banner:focus-visible.has-bg::before {
	background: rgba(255, 255, 255, 0.22);
}

/* El logo va por encima del overlay. */
.vh-bandas-banner__logo-wrap,
.vh-bandas-banner__title {
	position: relative;
	z-index: 1;
}

.vh-bandas-banner__logo {
	max-height: 56px;
	width: auto;
	max-width: min(90%, 340px);
	object-fit: contain;
	display: block;
}

.vh-bandas-banner__title {
	color: var(--vh-white);
	font-family: var(--vh-font-heading);
	font-weight: 700;
	font-size: 24px;
	text-shadow: 0 2px 12px rgba(11, 30, 51, 0.5);
}

/* --- Mobile: filas a una columna (foto arriba siempre) --- */
@media (max-width: 820px) {
	.vh-bandas-fila,
	.vh-bandas-fila--flip {
		grid-template-columns: 1fr;
	}

	.vh-bandas-fila--flip .vh-bandas-fila__media {
		order: 0;
	}

	.vh-bandas-fila__media {
		min-height: 200px;
		aspect-ratio: 16 / 10;
	}

	.vh-bandas-fila__body {
		padding: 28px 24px 32px;
	}

	.vh-bandas-fila__foot {
		flex-wrap: wrap;
		gap: 14px;
	}
}

/* --- Botón flotante de WhatsApp (v1.0.0) --- */
.vh-whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 6px 20px rgba(11, 30, 51, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vh-whatsapp-float:hover,
.vh-whatsapp-float:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 8px 24px rgba(11, 30, 51, 0.36);
}

.vh-whatsapp-float svg {
	width: 30px;
	height: 30px;
	fill: var(--vh-white, #fff);
}

@media (max-width: 600px) {
	.vh-whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}

	.vh-whatsapp-float svg {
		width: 26px;
		height: 26px;
	}
}

/* --- Back to top de Astra: mover a la izquierda para no tapar el botón de WhatsApp --- */
#ast-scroll-top {
	right: auto;
	left: 24px;
}

@media (max-width: 600px) {
	#ast-scroll-top {
		left: 16px;
	}
}