/* =========================================================================
   VIDCOL — hoja de estilos del tema
   Móvil primero. Sin dependencias, sin compilación.

   ⚠️ PALETA PROVISIONAL (D-06 parcialmente resuelta, 2026-09-22).
   El azul base #1D4586 y la referencia de neón #2272FF los eligió el
   cliente. La escala monocromática y la estructura «carcasa oscura,
   contenido claro» son propuesta del equipo, sujeta a cambio.
   En forma —tipografía, radios, sombras y anchos— manda el mockup
   (decisión de Faryd, 2026-09-23); en color, docs/marca-y-ui.md §2.

   CAMBIABILIDAD. Ningún color literal fuera de :root. Tres capas:
     1. Primitivos: los únicos valores hexadecimales.
     2. Papeles: carcasa, contenido, acción, neón, estados. Apuntan a
        primitivos.
     3. Zona (--vc-zona-*): lo que leen los componentes genéricos. Las
        reglas de «Zonas», más abajo, solo la reasignan a carcasa o a
        contenido.
   Cambiar un color es cambiar un primitivo. Pasar a «todo oscuro» es
   reasignar los --vc-contenido-* (bloque listo en docs/marca-y-ui.md).
   ====================================================================== */

/* ── Fuentes: IBM Plex, servida desde el tema ─────────────────────────────
   Archivos oficiales sin modificar de github.com/IBM/plex (subconjunto
   Latin1 de fonts/split/woff2/), con su licencia en ../fuentes/LICENSE.txt
   (SIL OFL 1.1, Reserved Font Name «Plex»). El unicode-range es el de la
   hoja oficial de cada paquete. Sin local(): se sirve siempre el archivo
   verificado. */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fuentes/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fuentes/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fuentes/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fuentes/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fuentes/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fuentes/IBMPlexSerif-Regular-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

:root {
	/* ── Primitivos: escala azul (derivada de #1D4586) ─────────────────── */
	--vc-azul-300:      #608FDC;
	--vc-azul-500:      #2B65C5;
	--vc-azul-700:      #1D4586;   /* azul base, elegido por el cliente */
	--vc-azul-800:      #1F3A66;   /* solo filetes sobre la carcasa */
	--vc-azul-900:      #0F2547;
	--vc-azul-950:      #060F1D;
	--vc-neon-base:     #2272FF;   /* referencia del cliente */

	/* ── Primitivos: neutros con matiz azul ────────────────────────────── */
	--vc-blanco:        #FFFFFF;
	--vc-gris-azul-50:  #F3F6FB;   /* superficie clara */
	--vc-gris-azul-100: #D6DEEA;   /* filetes claros */
	--vc-gris-azul-300: #A9B8D0;   /* texto suave sobre la carcasa: 9.6:1 */
	--vc-gris-azul-600: #4A5873;   /* texto suave sobre claro: 7.2:1 */

	/* ── Primitivos: estados. No cambian con la paleta ─────────────────── */
	--vc-verde-700:     #1a7f37;
	--vc-verde-50:      #e8f5ec;
	--vc-ambar-700:     #8a5a00;
	--vc-ambar-50:      #fdf3e2;

	/* ── Carcasa: cabecera, héroe, cierre de la portada y pie ──────────── */
	--vc-carcasa-fondo:        var(--vc-azul-950);
	--vc-carcasa-superficie:   var(--vc-azul-900);
	--vc-carcasa-texto:        var(--vc-blanco);
	--vc-carcasa-texto-suave:  var(--vc-gris-azul-300);
	--vc-carcasa-enlace:       var(--vc-azul-300);
	--vc-carcasa-enlace-hover: var(--vc-blanco);
	--vc-carcasa-linea:        var(--vc-azul-800);
	/* Degradado del héroe (§5 de porte-visual.md): tres primitivos, ningún
	   color nuevo. El texto de la carcasa se mide contra cada extremo en el
	   script de contraste. */
	--vc-carcasa-degradado:    linear-gradient(160deg, var(--vc-azul-950), var(--vc-azul-900) 55%, var(--vc-azul-700));
	/* Velo del héroe: el color de la carcasa sobre la imagen de fondo. El 80 %
	   es el MÍNIMO bajo cualquier texto: con él, el texto suave cumple 4.5:1
	   aunque debajo haya un píxel blanco puro (contraste-test.php lo mide y
	   vigila que esta fórmula no cambie). Al 75 % ya no cumpliría. */
	--vc-velo-opacidad:        80%;
	--vc-velo-opacidad-borde:  20%;  /* borde derecho, desde 900, donde no hay texto */
	--vc-velo:                 color-mix(in srgb, var(--vc-carcasa-fondo) var(--vc-velo-opacidad), transparent);
	--vc-velo-borde:           color-mix(in srgb, var(--vc-carcasa-fondo) var(--vc-velo-opacidad-borde), transparent);
	/* Fichas de categoría del héroe: el blanco con transparencia. */
	--vc-ficha-borde:          color-mix(in srgb, var(--vc-blanco) 30%, transparent);
	--vc-ficha-borde-hover:    var(--vc-blanco);
	--vc-ficha-fondo-hover:    color-mix(in srgb, var(--vc-blanco) 10%, transparent);

	/* ── Contenido: secciones, catálogo, fichas, páginas, tarjetas ─────── */
	--vc-contenido-fondo:        var(--vc-blanco);
	--vc-contenido-superficie:   var(--vc-gris-azul-50);
	--vc-contenido-texto:        var(--vc-azul-900);
	--vc-contenido-texto-suave:  var(--vc-gris-azul-600);
	--vc-contenido-enlace:       var(--vc-azul-700);
	--vc-contenido-enlace-hover: var(--vc-azul-900);
	--vc-contenido-linea:        var(--vc-gris-azul-100);

	/* ── Acción: botones, filtro activo, página actual ─────────────────── */
	--vc-accion-fondo:       var(--vc-azul-500);
	--vc-accion-fondo-hover: var(--vc-azul-700);
	--vc-accion-texto:       var(--vc-blanco);
	/* Canto del botón con relieve (A2). Más claro que la cara, no más oscuro
	   como en el mockup: sobre la carcasa casi negra un canto oscuro no se ve.
	   5.9:1 sobre el fondo de la carcasa; 1.7:1 y 2.9:1 contra la cara en
	   reposo y en hover. Decorativo, no es texto. */
	--vc-accion-relieve:     var(--vc-azul-300);

	/* ── Neón: SOLO decorativo ─────────────────────────────────────────────
	   Bordes, líneas, subrayados, halos y texto de 24 px o más. Nunca fondo
	   de un botón con texto blanco (4.3:1) ni color de texto normal: no
	   alcanza AA. El foco lo usa porque es un contorno, y supera 3:1 sobre
	   las dos zonas (4.3:1 sobre blanco, 4.5:1 sobre la carcasa). */
	--vc-neon: var(--vc-neon-base);
	--vc-foco: var(--vc-neon);

	/* ── Estados ───────────────────────────────────────────────────────── */
	--vc-si:              var(--vc-verde-700);
	--vc-si-fondo:        var(--vc-verde-50);
	--vc-consultar:       var(--vc-ambar-700);
	--vc-consultar-fondo: var(--vc-ambar-50);
	--vc-promocion-fondo: var(--vc-accion-fondo);
	--vc-promocion-texto: var(--vc-accion-texto);

	/* ── Zona por defecto: contenido. Ver «Zonas» ──────────────────────── */
	--vc-zona-fondo:        var(--vc-contenido-fondo);
	--vc-zona-superficie:   var(--vc-contenido-superficie);
	--vc-zona-texto:        var(--vc-contenido-texto);
	--vc-zona-texto-suave:  var(--vc-contenido-texto-suave);
	--vc-zona-enlace:       var(--vc-contenido-enlace);
	--vc-zona-enlace-hover: var(--vc-contenido-enlace-hover);
	--vc-zona-linea:        var(--vc-contenido-linea);

	/* ── Forma: manda el mockup (porte-visual.md §1) ──────────────────── */
	--vc-radio:        4px;      /* S14: 4px en todo */
	--vc-ancho:        1200px;   /* S2: contenido máximo */
	--vc-prosa:        640px;    /* S3: medida de lectura */
	--vc-borde:        1px;      /* S15: borde estándar */
	--vc-borde-grueso: 1.5px;    /* S15: botón secundario y campos (tandas 2 y 6) */

	/* Sombras (S16). Ningún componente lleva sombra en reposo. Derivan de los
	   primitivos, así que no añaden color. --vc-sombra es la de los hovers
	   actuales, que se revisan en la tanda 3. */
	--vc-sombra:            0 1px 2px rgba(23, 33, 43, .06), 0 4px 12px rgba(23, 33, 43, .05);
	--vc-sombra-elevada:    0 8px 24px color-mix(in srgb, var(--vc-azul-950) 10%, transparent);
	--vc-sombra-formulario: 0 24px 64px color-mix(in srgb, var(--vc-azul-950) 28%, transparent);
	--vc-foco-halo:         0 0 0 3px color-mix(in srgb, var(--vc-neon) 18%, transparent);

	/* Tracking (S13). */
	--vc-tracking-marca:      0.18em;  /* «VIDCOL» */
	--vc-tracking-mayusculas: 0.08em;  /* antetítulos, insignias y migas, en mayúsculas */
	--vc-tracking-rotulo:     0.04em;  /* rótulo del marcador sin foto */

	/* Movimiento (A1). Las curvas son las del mockup, para las tandas 2 a 4. */
	--vc-transicion-base: 150ms ease;
	--vc-curva-quint:     cubic-bezier(0.23, 1, 0.32, 1);
	--vc-curva-cubic:     cubic-bezier(0.33, 1, 0.68, 1);

	/* Capas (S17). El enlace de salto va por encima de la barra fija (1b):
	   con el mismo z-index, la barra lo taparía. */
	--vc-z-barra:  50;
	--vc-z-saltar: 100;

	/* Alto de la barra de administración de WordPress (sesión iniciada). Cero
	   para quien visita; lo fija el bloque «Barra de WordPress». */
	--vc-alto-barra-wp: 0px;

	/* ── Tipografía ──────────────────────────────────────────────────────
	   Tres roles, portados del mockup. NO son intercambiables:
	     titulo → títulos, navegación, botones, etiquetas
	     cifra  → toda cifra técnica: precio, referencia, capacidad, conteos
	     prosa  → solo párrafos descriptivos largos
	   Como en el mockup, cada rol es una familia de IBM Plex (Sans, Mono y
	   Serif). Los archivos viven en el tema (ver @font-face arriba): no se
	   pide ninguna fuente a un servidor externo. La pila del sistema queda
	   como respaldo mientras la fuente carga (font-display: swap). */
	--vc-fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vc-fuente-cifra: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--vc-fuente-prosa: "IBM Plex Serif", Georgia, "Times New Roman", serif;

	/* ── Escala tipográfica ──────────────────────────────────────────────
	   Siete pasos, cada uno con su interlineado atado al tamaño: es imposible
	   usar un 18 con el interlineado de un 16. Portada del mockup. */
	--vc-texto-nota:     12px;  --vc-interlineado-nota:     16px;
	--vc-texto-menor:    14px;  --vc-interlineado-menor:    20px;
	--vc-texto-cuerpo:   16px;  --vc-interlineado-cuerpo:   24px;
	--vc-texto-realce:   18px;  --vc-interlineado-realce:   28px;
	--vc-texto-titulo-3: 24px;  --vc-interlineado-titulo-3: 32px;
	--vc-texto-titulo-2: 32px;  --vc-interlineado-titulo-2: 40px;
	--vc-texto-titulo-1: 44px;  --vc-interlineado-titulo-1: 48px;

	/* ── Espaciado ───────────────────────────────────────────────────────
	   Nueve pasos, base 4, más el 72 del ritmo vertical del mockup (S7).
	   Fuera de esta escala no se escriben márgenes. */
	--vc-e-4:  4px;   --vc-e-8:  8px;   --vc-e-12: 12px;
	--vc-e-16: 16px;  --vc-e-24: 24px;  --vc-e-32: 32px;
	--vc-e-48: 48px;  --vc-e-64: 64px;  --vc-e-96: 96px;
	--vc-e-72: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

/* --- Zonas --------------------------------------------------------------
   Estructura B: carcasa oscura, contenido claro (provisional, D-06).
   Aquí solo se decide QUÉ elemento es carcasa y cuál contenido. Los colores
   están en :root. Mover una pieza de zona es mover su selector de lista. */

.vidcol-cabecera,
.vidcol-heroe,
.vidcol-seccion--cierre,
.vidcol-pie {
	--vc-zona-fondo:        var(--vc-carcasa-fondo);
	--vc-zona-superficie:   var(--vc-carcasa-superficie);
	--vc-zona-texto:        var(--vc-carcasa-texto);
	--vc-zona-texto-suave:  var(--vc-carcasa-texto-suave);
	--vc-zona-enlace:       var(--vc-carcasa-enlace);
	--vc-zona-enlace-hover: var(--vc-carcasa-enlace-hover);
	--vc-zona-linea:        var(--vc-carcasa-linea);
	color: var(--vc-zona-texto);
	background: var(--vc-zona-fondo);
}

/* Una tarjeta vive siempre sobre contenido claro, esté donde esté: las fotos
   de producto suelen venir con fondo blanco. */
.vidcol-tarjeta,
.vidcol-linea__enlace {
	--vc-zona-fondo:        var(--vc-contenido-fondo);
	--vc-zona-superficie:   var(--vc-contenido-superficie);
	--vc-zona-texto:        var(--vc-contenido-texto);
	--vc-zona-texto-suave:  var(--vc-contenido-texto-suave);
	--vc-zona-enlace:       var(--vc-contenido-enlace);
	--vc-zona-enlace-hover: var(--vc-contenido-enlace-hover);
	--vc-zona-linea:        var(--vc-contenido-linea);
	color: var(--vc-zona-texto);
}

/* En la portada el cierre oscuro toca el pie: sin franja clara entre ambos. */
.home .vidcol-pie { margin-top: 0; }


body {
	margin: 0;
	font-family: var(--vc-fuente);
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
	color: var(--vc-zona-texto);
	background: var(--vc-zona-fondo);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--vc-zona-enlace); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vc-zona-enlace-hover); }

/* Solo 400, 500 y 600 (S12): el navegador pondría 700, que no se sirve. */
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 600; }

/* Transición base de controles (A1). outline-color queda fuera a propósito:
   el foco aparece de golpe. */
a, button, summary, input, select, textarea {
	transition:
		color var(--vc-transicion-base),
		background-color var(--vc-transicion-base),
		border-color var(--vc-transicion-base);
}

:focus-visible {
	outline: 2px solid var(--vc-foco);
	outline-offset: 2px;
	border-radius: var(--vc-radio);
}

/* `.screen-reader-text` es el nombre que usa el core: la paginación de
   the_posts_pagination() lo emite y el tema no lo definía, así que el texto
   «Página» salía visible en mitad del catálogo. */
.vidcol-oculto,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static; width: auto; height: auto;
	margin: 0; clip-path: none; white-space: normal;
}

/* Ninguna palabra larga —una referencia, un título de 119 caracteres— debe
   empujar el ancho de la página en un móvil estrecho. */
h1, h2, h3, p, li, td, th { overflow-wrap: break-word; }

/* Enlace de salto (K25): invisible hasta recibir foco; entonces aparece
   arriba a la izquierda, por encima de la barra fija. */
.vidcol-saltar {
	position: absolute; top: 0; left: 0;
	z-index: var(--vc-z-saltar);
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
	background: var(--vc-accion-fondo); color: var(--vc-accion-texto);
}
.vidcol-saltar:focus {
	width: auto; height: auto;
	margin: var(--vc-e-8);
	padding: var(--vc-e-12) var(--vc-e-16);
	clip-path: none;
	border: var(--vc-borde) solid currentColor;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 600;
}

.vidcol-contenedor {
	width: 100%;
	max-width: var(--vc-ancho);
	margin-inline: auto;
	padding-inline: var(--vc-e-16);
}
@media (min-width: 900px) {
	.vidcol-contenedor { padding-inline: var(--vc-e-24); }
}

/* Ritmo vertical del mockup: 48 en móvil, 72 a partir de 1024. */
.vidcol-seccion { padding-block: var(--vc-e-48); }
.vidcol-seccion--estrecha { max-width: var(--vc-prosa); }
.vidcol-seccion--suave { background: var(--vc-zona-superficie); }
@media (min-width: 1024px) {
	.vidcol-seccion { padding-block: var(--vc-e-72); }
}

/* --- Cabecera ---------------------------------------------------------- */
/* Porte de Encabezado.tsx y MenuMovil.tsx (K1-K3). Forma del mockup, color de
   la carcasa: dentro de .vidcol-cabecera, --vc-zona-* es la carcasa.

   Barra fija (K1, S17): fondo sólido, sin reaccionar al scroll. Sin
   JavaScript y por debajo de 1024 no se fija: el menú móvil queda desplegado
   bajo la fila y, fijo, taparía media pantalla. */
.vidcol-cabecera {
	position: relative;
	border-bottom: var(--vc-borde) solid var(--vc-zona-linea);
}
.vidcol-js .vidcol-cabecera {
	position: sticky;
	top: var(--vc-alto-barra-wp);
	z-index: var(--vc-z-barra);
}
.vidcol-cabecera__interior {
	display: flex;
	align-items: center;
	gap: var(--vc-e-16);
	padding-block: var(--vc-e-16);
}

/* Marca y eslogan en un solo enlace, alineados por la línea base. El eslogan
   es lo que cede si la fila se queda corta: se recorta con puntos suspensivos
   antes de que la navegación o el botón se desborden. */
.vidcol-marca {
	margin: 0;
	min-width: 0;
}
.vidcol-marca__enlace {
	display: flex;
	align-items: baseline;
	gap: var(--vc-e-8);
	min-width: 0;
	color: var(--vc-zona-texto);
	text-decoration: none;
}
.vidcol-marca__enlace:hover { color: var(--vc-zona-texto); }
.vidcol-marca__nombre {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
	font-weight: 600;
	letter-spacing: var(--vc-tracking-marca);
}
.vidcol-marca__eslogan {
	display: none;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--vc-texto-nota);
	line-height: var(--vc-interlineado-nota);
	color: var(--vc-zona-texto-suave);
}

/* Navegación de escritorio (K2). */
.vidcol-nav {
	display: none;
	flex-shrink: 0;
}
.vidcol-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--vc-e-24);
	list-style: none;
	margin: 0;
	padding: 0;
}
.vidcol-nav__lista a {
	color: var(--vc-zona-texto-suave);
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 500;
}
.vidcol-nav__lista a:hover { color: var(--vc-zona-enlace-hover); }

/* Activo por sección (globals.css:279-285): subrayado de neón de 2 px. Es
   decorativo; el texto pasa al blanco de la carcasa, que es lo que se lee. La
   clase la pone vidcol_menu_activo(); aria-current, WordPress. */
.vidcol-nav__lista .vidcol-activo > a {
	color: var(--vc-zona-texto);
	text-decoration: underline;
	text-decoration-color: var(--vc-neon);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Acciones: empujadas a la derecha. Hoy solo el botón; en la tanda 4a, el
   buscador compacto entra aquí delante de él. */
.vidcol-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--vc-e-16);
	flex-shrink: 0;
	margin-left: auto;
}

/* Botón de contacto, relleno y con relieve (A2, globals.css:226-243): al pasar
   sube 1 px y el canto crece; al pulsar baja y el canto desaparece. */
.vidcol-boton-cabecera {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--vc-e-8);
	height: var(--vc-e-48);
	padding-inline: var(--vc-e-16);
	border-radius: var(--vc-radio);
	background: var(--vc-accion-fondo);
	color: var(--vc-accion-texto);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 0 var(--vc-accion-relieve);
	transition:
		transform 140ms var(--vc-curva-cubic),
		box-shadow 140ms var(--vc-curva-cubic),
		background-color 140ms ease,
		border-color 140ms ease;
}
.vidcol-boton-cabecera:hover {
	background: var(--vc-accion-fondo-hover);
	color: var(--vc-accion-texto);
	transform: translateY(-1px);
	box-shadow: 0 3px 0 var(--vc-accion-relieve);
}
.vidcol-boton-cabecera:active {
	transform: translateY(0);
	box-shadow: none;
}
.vidcol-boton-cabecera--completo {
	display: flex;
	width: 100%;
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
}
.vidcol-icono { flex-shrink: 0; }

/* Botón «Menú» / «Cerrar» (K3, MenuMovil.tsx:63-72). Solo existe con
   JavaScript: sin él, el panel ya está desplegado. */
.vidcol-menu-boton {
	display: none;
	flex-shrink: 0;
	margin: 0;
	padding: var(--vc-e-12);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	background: transparent;
	color: var(--vc-zona-texto);
	font: inherit;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 600;
	cursor: pointer;
}
.vidcol-menu-boton:hover { border-color: var(--vc-zona-texto); }
.vidcol-js .vidcol-menu-boton { display: inline-flex; }
.vidcol-menu-boton__abrir,
.vidcol-menu-boton__cerrar {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-e-8);
}
.vidcol-menu-boton[aria-expanded="true"] .vidcol-menu-boton__abrir,
.vidcol-menu-boton[aria-expanded="false"] .vidcol-menu-boton__cerrar { display: none; }

/* Panel del menú móvil (MenuMovil.tsx:75-107). Sin JavaScript es un bloque
   estático bajo la fila. Con JavaScript se oculta hasta abrirse, y abierto
   cubre la pantalla bajo la barra, opaco: no deja contenido asomándose. */
.vidcol-menu-movil {
	border-top: var(--vc-borde) solid var(--vc-zona-linea);
	background: var(--vc-zona-fondo);
}
.vidcol-js .vidcol-menu-movil { display: none; }
.vidcol-js .vidcol-menu-movil--abierto {
	display: block;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	min-height: 100dvh;
}
.vidcol-menu-movil__lista {
	list-style: none;
	margin: 0;
	padding: var(--vc-e-8) 0;
}
.vidcol-menu-movil__lista li { border-bottom: var(--vc-borde) solid var(--vc-zona-linea); }
.vidcol-menu-movil__lista a {
	display: block;
	padding-block: var(--vc-e-12);
	color: var(--vc-zona-texto-suave);
	text-decoration: none;
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
	font-weight: 500;
}
.vidcol-menu-movil__lista a:hover,
.vidcol-menu-movil__lista .vidcol-activo > a { color: var(--vc-zona-texto); }
.vidcol-menu-movil__accion { padding-bottom: var(--vc-e-16); }

@media (min-width: 900px) {
	.vidcol-marca__eslogan { display: block; }
}

@media (min-width: 1024px) {
	.vidcol-cabecera {
		position: sticky;
		top: var(--vc-alto-barra-wp);
		z-index: var(--vc-z-barra);
	}
	.vidcol-nav { display: block; }
	.vidcol-boton-cabecera { display: inline-flex; }
	.vidcol-js .vidcol-menu-boton,
	.vidcol-menu-movil,
	.vidcol-js .vidcol-menu-movil--abierto { display: none; }
}

/* --- Barra de WordPress --------------------------------------------------
   Con la sesión iniciada, la barra de administración ocupa la parte de arriba:
   32 px, 46 px hasta 782 y, hasta 600, deja de ser fija. La cabecera se fija
   justo debajo, y el desplazamiento a un ancla la descuenta.
   ÚNICA excepción a los quiebres de S1: estos son los de WordPress
   (admin-bar.css), no los del sitio. Van en max-width para copiarlos tal cual.

   El cuerpo recibe la variable (para la cabecera) y html también, vía :has(),
   para scroll-padding. Sin :has(), el scroll-padding queda en 96. */
.admin-bar,
html:has(> body.admin-bar) { --vc-alto-barra-wp: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar,
	html:has(> body.admin-bar) { --vc-alto-barra-wp: 46px; }
}
@media screen and (max-width: 600px) {
	.admin-bar,
	html:has(> body.admin-bar) { --vc-alto-barra-wp: 0px; }
}

/* S20: los 128 del mockup menos los 32 del banner, que no se porta. La
   cabecera mide 79 px por debajo de 1024 y 81 desde 1024. */
html { scroll-padding-block-start: calc(var(--vc-e-96) + var(--vc-alto-barra-wp)); }

/* --- Títulos ----------------------------------------------------------- */

/* h1 interior y h2 de sección (S10): un paso más a partir de 1024. */
.vidcol-titulo {
	margin: 0 0 var(--vc-e-8);
	font-size: var(--vc-texto-titulo-2);
	line-height: var(--vc-interlineado-titulo-2);
	text-wrap: balance;
}
.vidcol-subtitulo {
	font-size: var(--vc-texto-titulo-3);
	line-height: var(--vc-interlineado-titulo-3);
	margin: var(--vc-e-48) 0 var(--vc-e-16);
}
@media (min-width: 1024px) {
	.vidcol-titulo {
		font-size: var(--vc-texto-titulo-1);
		line-height: var(--vc-interlineado-titulo-1);
	}
	.vidcol-subtitulo {
		font-size: var(--vc-texto-titulo-2);
		line-height: var(--vc-interlineado-titulo-2);
	}
}
/* Primer subtítulo de una sección: el relleno de la sección ya da el aire. */
.vidcol-subtitulo--primero { margin-top: 0; }
.vidcol-entradilla {
	color: var(--vc-zona-texto-suave);
	max-width: var(--vc-prosa);
	margin-top: 0;
	font-family: var(--vc-fuente-prosa);
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
}
.vidcol-encabezado { margin-bottom: var(--vc-e-24); }

.vidcol-migas {
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	color: var(--vc-zona-texto-suave);
	margin: 0 0 var(--vc-e-12);
}
.vidcol-migas a { text-decoration: none; }
.vidcol-migas span { margin-inline: var(--vc-e-8); }

/* --- Filtros de línea -------------------------------------------------- */

.vidcol-filtros {
	display: flex; flex-wrap: wrap; gap: var(--vc-e-8);
	margin-bottom: var(--vc-e-24);
}
.vidcol-filtro {
	display: inline-block;
	padding: var(--vc-e-4) var(--vc-e-12);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	text-decoration: none;
	color: var(--vc-zona-texto-suave);
	background: var(--vc-zona-fondo);
}
.vidcol-filtro:hover { border-color: var(--vc-zona-enlace); color: var(--vc-zona-enlace); }
.vidcol-filtro--activo {
	background: var(--vc-accion-fondo); border-color: var(--vc-accion-fondo); color: var(--vc-accion-texto);
}
.vidcol-filtro--activo:hover { color: var(--vc-accion-texto); }

/* --- Rejilla y tarjetas ------------------------------------------------ */

.vidcol-rejilla {
	display: grid;
	gap: var(--vc-e-24);
	grid-template-columns: 1fr;
}
/* Cortes del mockup: 480 y 900. 1 columna en móvil, 2 en tableta, 3 en escritorio. */
@media (min-width: 480px) {
	.vidcol-rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.vidcol-rejilla { grid-template-columns: repeat(3, 1fr); }
}

.vidcol-tarjeta {
	display: flex; flex-direction: column;
	border: var(--vc-borde) solid var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	overflow: hidden;
	background: var(--vc-zona-fondo);
	transition: box-shadow .15s ease, transform .15s ease;
}
.vidcol-tarjeta:hover { box-shadow: var(--vc-sombra); transform: translateY(-2px); }

.vidcol-tarjeta__imagen {
	position: relative; display: block;
	background: var(--vc-zona-superficie);
	/* 3:2, no 4:3: la caja pesaba demasiado dentro de la tarjeta y el catálogo
	   se veía vacío. Nunca más alta que ancha. */
	aspect-ratio: 3 / 2;
}
.vidcol-imagen {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
/* Marcador de producto sin foto: glifo de la línea sobre fondo tenue.
   Sustituye al rectángulo rayado, que era el mismo en los catorce productos y
   leía como «error de carga» en vez de como «todavía sin fotografía». */
.vidcol-imagen--vacia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--vc-e-4);
	height: 100%;
	padding: var(--vc-e-16);
	color: var(--vc-zona-texto-suave);
	background: var(--vc-zona-superficie);
}
.vidcol-glifo {
	display: block;
	width: 100%;
	max-width: 132px;
	height: auto;
	/* El lienzo original es 4:3 con mucho aire; se recorta ópticamente para que
	   el trazo mande y no el margen vacío. */
	margin-block: calc(var(--vc-e-16) * -1);
}
.vidcol-imagen__linea {
	font-family: var(--vc-fuente-cifra);
	font-size: var(--vc-texto-nota);
	line-height: var(--vc-interlineado-nota);
	letter-spacing: var(--vc-tracking-rotulo);
	text-transform: uppercase;
	text-align: center;
	/* Sin opacity: al .75 el rótulo de 12 px bajaba a 3.7:1 sobre la banda. */
}

.vidcol-cinta {
	position: absolute; top: var(--vc-e-8); left: var(--vc-e-8);
	background: var(--vc-promocion-fondo); color: var(--vc-promocion-texto);
	font-size: var(--vc-texto-nota); line-height: var(--vc-interlineado-nota);
	font-weight: 600;
	padding: var(--vc-e-4) var(--vc-e-8); border-radius: var(--vc-radio);
	letter-spacing: var(--vc-tracking-mayusculas); text-transform: uppercase;
}

.vidcol-tarjeta__cuerpo {
	display: flex; flex-direction: column;
	gap: var(--vc-e-8);
	padding: var(--vc-e-16);
	flex: 1;
}
.vidcol-tarjeta__marca {
	margin: 0;
	font-size: var(--vc-texto-nota); line-height: var(--vc-interlineado-nota);
	font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--vc-tracking-mayusculas);
	color: var(--vc-zona-texto-suave);
}
.vidcol-tarjeta__titulo {
	margin: 0;
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
}
.vidcol-tarjeta__titulo a { color: var(--vc-zona-texto); text-decoration: none; }
.vidcol-tarjeta__titulo a:hover { color: var(--vc-zona-enlace); }
.vidcol-tarjeta__resumen {
	margin: 0;
	font-size: var(--vc-texto-menor); line-height: var(--vc-interlineado-menor);
	color: var(--vc-zona-texto-suave);
}
.vidcol-tarjeta__cuerpo .vidcol-boton { margin-top: auto; }

/* --- Disponibilidad ---------------------------------------------------- */

.vidcol-estado {
	display: inline-block;
	align-self: flex-start;
	margin: var(--vc-e-4) 0;
	padding: var(--vc-e-4) var(--vc-e-8);
	border-radius: var(--vc-radio);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 600;
}
.vidcol-estado--si        { color: var(--vc-si);        background: var(--vc-si-fondo); }
.vidcol-estado--consultar { color: var(--vc-consultar); background: var(--vc-consultar-fondo); }
.vidcol-estado--grande {
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
	padding: var(--vc-e-4) var(--vc-e-12);
}

/* --- Precio ------------------------------------------------------------ */

.vidcol-precio { margin: var(--vc-e-4) 0; display: flex; align-items: baseline; gap: var(--vc-e-8); }
/* Toda cifra técnica va en monoespaciada: precio, conteos, referencias.
   Es uno de los tres roles de tipografía del mockup, y alinea los dígitos. */
.vidcol-precio__valor {
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
	font-weight: 600;
	font-family: var(--vc-fuente-cifra);
}
.vidcol-precio__antes {
	color: var(--vc-zona-texto-suave);
	text-decoration: line-through;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
}
.vidcol-precio--grande .vidcol-precio__valor {
	font-size: var(--vc-texto-titulo-3);
	line-height: var(--vc-interlineado-titulo-3);
}
.vidcol-precio--sin { color: var(--vc-zona-texto-suave); font-style: italic; }

/* --- Botones ----------------------------------------------------------- */

.vidcol-boton {
	display: inline-block;
	padding: var(--vc-e-12) var(--vc-e-16);
	background: var(--vc-accion-fondo);
	color: var(--vc-accion-texto);
	border-radius: var(--vc-radio);
	font-weight: 600;
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
	text-decoration: none;
	text-align: center;
}
.vidcol-boton:hover {
	background: var(--vc-accion-fondo-hover);
	color: var(--vc-accion-texto);
	/* Halo neón: sobre la carcasa el fondo del hover apenas se separa del
	   fondo (2.05:1); el halo sí (4.5:1). Es un contorno, uso permitido. */
	box-shadow: 0 0 0 1px var(--vc-neon);
}

.vidcol-boton--suave {
	background: transparent;
	color: var(--vc-zona-enlace);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	font-weight: 500;
}
.vidcol-boton--suave:hover {
	background: var(--vc-zona-superficie);
	border-color: var(--vc-zona-enlace);
	color: var(--vc-zona-enlace);
}

.vidcol-acciones { margin: var(--vc-e-24) 0; }

/* --- Ficha de producto ------------------------------------------------- */

.vidcol-ficha { display: grid; gap: var(--vc-e-24); grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.vidcol-ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--vc-e-48); }
}
.vidcol-ficha__media {
	background: var(--vc-zona-superficie);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.vidcol-ficha__marca {
	margin: 0 0 var(--vc-e-4);
	font-size: var(--vc-texto-nota); line-height: var(--vc-interlineado-nota);
	font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--vc-tracking-mayusculas);
	color: var(--vc-zona-texto-suave);
}

/* --- Contenido editorial ----------------------------------------------- */

.vidcol-contenido > * { margin-block: var(--vc-e-16); }
.vidcol-contenido h2 {
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
	margin-top: var(--vc-e-32);
}
.vidcol-contenido h3 {
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
}
.vidcol-contenido table {
	width: 100%; border-collapse: collapse;
	font-size: var(--vc-texto-cuerpo); line-height: var(--vc-interlineado-cuerpo);
}
.vidcol-contenido th, .vidcol-contenido td {
	border: var(--vc-borde) solid var(--vc-zona-linea);
	padding: var(--vc-e-8) var(--vc-e-12);
	text-align: left;
}
.vidcol-contenido th { background: var(--vc-zona-superficie); font-weight: 600; }

.vidcol-relacionados { margin-top: var(--vc-e-48); }

/* --- Listas y estados vacíos ------------------------------------------- */

.vidcol-vacio {
	padding: var(--vc-e-32);
	background: var(--vc-zona-superficie);
	border: var(--vc-borde) dashed var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	color: var(--vc-zona-texto-suave);
	text-align: center;
}

.vidcol-lista-entradas { display: grid; gap: var(--vc-e-24); }
.vidcol-entrada__titulo {
	margin: 0 0 var(--vc-e-4);
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
}
.vidcol-entrada__titulo a { color: var(--vc-zona-texto); text-decoration: none; }
.vidcol-fecha {
	color: var(--vc-zona-texto-suave);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	margin-top: 0;
}

.vidcol-paginacion { margin-top: var(--vc-e-48); }
.vidcol-paginacion .page-numbers {
	display: inline-block;
	padding: var(--vc-e-8) var(--vc-e-12);
	margin-right: var(--vc-e-4);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	text-decoration: none;
	color: var(--vc-zona-texto);
}
.vidcol-paginacion .current {
	background: var(--vc-accion-fondo); border-color: var(--vc-accion-fondo); color: var(--vc-accion-texto);
}

/* --- Pie --------------------------------------------------------------- */

.vidcol-pie {
	margin-top: var(--vc-e-64);
	padding-block: var(--vc-e-32);
	border-top: var(--vc-borde) solid var(--vc-zona-linea);
	background: var(--vc-zona-superficie);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	color: var(--vc-zona-texto-suave);
}
.vidcol-pie__interior {
	display: grid;
	gap: var(--vc-e-32);
	grid-template-columns: 1fr;
	margin-bottom: var(--vc-e-32);
}
@media (min-width: 900px) {
	.vidcol-pie__interior { grid-template-columns: 2fr 1fr 1fr; }
}
.vidcol-pie__bloque { min-width: 0; }
.vidcol-pie__nombre { font-weight: 600; color: var(--vc-zona-texto); margin: 0 0 var(--vc-e-4); }
.vidcol-pie__nota { margin: 0; max-width: var(--vc-prosa); }
.vidcol-pie__titulo {
	margin: 0 0 var(--vc-e-8);
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	text-transform: uppercase;
	letter-spacing: var(--vc-tracking-mayusculas);
	color: var(--vc-zona-texto);
}
.vidcol-pie__datos,
.vidcol-pie__enlaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vc-e-4);
}
/* El hueco pendiente se marca, no se disimula: debe verse que falta el dato. */
.vidcol-hueco {
	font-family: var(--vc-fuente-cifra);
	font-size: var(--vc-texto-nota);
	color: var(--vc-consultar);
	background: var(--vc-consultar-fondo);
	padding: 0 var(--vc-e-4);
	border-radius: var(--vc-radio);
	overflow-wrap: anywhere;
}
.vidcol-pie__legal {
	margin: 0;
	font-size: var(--vc-texto-menor);
	padding-top: var(--vc-e-16);
	border-top: var(--vc-borde) solid var(--vc-zona-linea);
}

/* --- Portada ----------------------------------------------------------- */

/* Héroe (K5). Carcasa. Decisión de Faryd, 2026-09-23 (porte-visual.md §8):
   el fondo es la imagen destacada de la portada, a sangre, bajo un velo de
   carcasa. Desviación deliberada del mockup, que usaba un degradado con
   líneas. Sin imagen, el fondo es el degradado de la carcasa, liso. */
.vidcol-heroe {
	position: relative;
	isolation: isolate;
	background-color: var(--vc-zona-fondo);
	background-image: var(--vc-carcasa-degradado);
}

/* Fondo: la imagen recortada al héroe (el recorte es de la imagen, nunca
   del texto) y, encima, el velo. */
.vidcol-heroe__fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.vidcol-heroe__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% 50%;
}
/* Por debajo de 900 el texto ocupa todo el ancho: velo uniforme al mínimo. */
.vidcol-heroe__fondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--vc-velo);
}

/* Interior: columna centrada en móvil; desde 900, fila de al menos 640 px
   con el texto a la izquierda (ver el bloque de 900, más abajo). */
.vidcol-heroe__interior {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 88svh;
	padding-block: var(--vc-e-64);
}
.vidcol-heroe__texto { min-width: 0; }

.vidcol-heroe__antetitulo {
	margin: 0;
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
	font-weight: 600;
	letter-spacing: var(--vc-tracking-marca);
	color: var(--vc-zona-texto);
}
/* 44/48 en todos los anchos: única excepción al «máximo 32 en móvil» de
   marca-y-ui.md §3 (el mockup la declara igual, globals.css:54-55). */
.vidcol-heroe__titulo {
	margin: var(--vc-e-8) 0 0;
	font-size: var(--vc-texto-titulo-1);
	line-height: var(--vc-interlineado-titulo-1);
	text-wrap: balance;
	color: var(--vc-zona-texto);
}
.vidcol-heroe__entradilla {
	margin: var(--vc-e-16) 0 0;
	max-width: var(--vc-prosa);
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
	color: var(--vc-zona-texto-suave);
}

/* Buscador de portada (K7, Buscador.tsx:26-56): caja blanca de 56 px con
   lupa, campo y botón de acción. El mockup quitaba el foco del campo
   (outline-none); aquí la caja entera muestra el foco. */
.vidcol-buscador {
	display: flex;
	align-items: center;
	gap: var(--vc-e-8);
	height: 56px;
	margin: var(--vc-e-24) 0 0;
	padding: var(--vc-e-4);
	border-radius: var(--vc-radio);
	background: var(--vc-contenido-fondo);
}
.vidcol-buscador:focus-within {
	outline: 2px solid var(--vc-foco);
	outline-offset: 2px;
}
.vidcol-buscador__lupa {
	flex-shrink: 0;
	margin-left: var(--vc-e-12);
	color: var(--vc-contenido-texto-suave);
}
.vidcol-buscador__campo {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	color: var(--vc-contenido-texto);
	font: inherit;
	font-size: var(--vc-texto-cuerpo);
	line-height: var(--vc-interlineado-cuerpo);
}
.vidcol-buscador__campo:focus-visible { outline: none; }
.vidcol-buscador__campo::placeholder {
	color: var(--vc-contenido-texto-suave);
	opacity: 1;
}
/* padding-inline de 20: el px-5 del mockup, fijado por el encargo. */
.vidcol-buscador__boton {
	flex-shrink: 0;
	height: var(--vc-e-48);
	padding: 0 20px;
	border: 0;
	border-radius: var(--vc-radio);
	background: var(--vc-accion-fondo);
	color: var(--vc-accion-texto);
	font: inherit;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 600;
	cursor: pointer;
}
.vidcol-buscador__boton:hover { background: var(--vc-accion-fondo-hover); }

/* Fichas de categoría (K6, page.tsx:94-102): una por línea con productos. En
   hover el conteo pasa a blanco: en texto suave, sobre el fondo del hover,
   bajaría a 3.5:1. */
.vidcol-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-e-8);
	margin: var(--vc-e-24) 0 0;
	padding: 0;
	list-style: none;
}
.vidcol-ficha {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-e-8);
	padding: var(--vc-e-8) var(--vc-e-12);
	border: var(--vc-borde) solid var(--vc-ficha-borde);
	border-radius: var(--vc-radio);
	color: var(--vc-zona-texto);
	text-decoration: none;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	font-weight: 500;
}
.vidcol-ficha:hover {
	border-color: var(--vc-ficha-borde-hover);
	background: var(--vc-ficha-fondo-hover);
	color: var(--vc-zona-texto);
}
.vidcol-ficha__conteo {
	font-family: var(--vc-fuente-cifra);
	font-size: var(--vc-texto-nota);
	line-height: var(--vc-interlineado-nota);
	color: var(--vc-zona-texto-suave);
}
.vidcol-ficha:hover .vidcol-ficha__conteo { color: var(--vc-zona-texto); }

/* Desde 900: fila de al menos 640 px (mínima, no fija: el texto es
   editable y no debe cortarse). La columna de texto conserva el ancho que
   tenía junto a la antigua columna de imagen (288 px, 320 desde 1024, más el
   gap de 48), para que el buscador no se estire a todo el contenedor.

   El velo pasa a degradado horizontal: al 80 % hasta el borde derecho de la
   columna de texto y baja al 20 % en el borde derecho del héroe. Ese borde,
   medido desde la izquierda del héroe (que va a sangre), es la mitad del
   héroe más la mitad del contenedor, menos su relleno, el gap y la columna
   libre. */
@media (min-width: 900px) {
	.vidcol-heroe__interior {
		flex-direction: row;
		/* A la izquierda, no centrado: el velo está calculado para una
		   columna que empieza en el borde del contenedor. */
		justify-content: flex-start;
		align-items: center;
		gap: var(--vc-e-48);
		min-height: 640px;
	}
	.vidcol-heroe__texto {
		flex: 0 1 auto;
		width: calc(100% - 288px - var(--vc-e-48));
	}
	.vidcol-heroe__fondo::after {
		background: linear-gradient(
			to right,
			var(--vc-velo) 0,
			var(--vc-velo) calc(50% + min(50%, var(--vc-ancho) / 2) - var(--vc-e-24) - var(--vc-e-48) - 288px),
			var(--vc-velo-borde) 100%
		);
	}
}
@media (min-width: 1024px) {
	.vidcol-heroe__texto { width: calc(100% - 320px - var(--vc-e-48)); }
	.vidcol-heroe__fondo::after {
		background: linear-gradient(
			to right,
			var(--vc-velo) 0,
			var(--vc-velo) calc(50% + min(50%, var(--vc-ancho) / 2) - var(--vc-e-24) - var(--vc-e-48) - 320px),
			var(--vc-velo-borde) 100%
		);
	}
}

/* Entrada animada (A7, A8; G:351-367). El HTML sale visible y solo el
   script arma los elementos. Armar no lleva transición: en el mockup sí, y
   el paso a «armado» se animaba y se cruzaba con el de «visible», así que la
   entrada casi no se veía. */
[data-vidcol-revelar="armado"] {
	opacity: 0;
	transform: translateY(var(--vc-e-12));
	transition: none;
}
[data-vidcol-revelar="visible"] {
	opacity: 1;
	transform: none;
	transition:
		opacity 240ms var(--vc-curva-cubic),
		transform 240ms var(--vc-curva-cubic);
	transition-delay: var(--vc-retraso-revelar, 0ms);
}

/* Resultados de búsqueda (search.php). */
.vidcol-resultados__total {
	margin: 0;
	font-size: var(--vc-texto-menor);
	line-height: var(--vc-interlineado-menor);
	color: var(--vc-zona-texto-suave);
}

/* Tarjetas de línea de producto. */
.vidcol-lineas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vc-e-16);
	grid-template-columns: 1fr;
}
@media (min-width: 480px) {
	.vidcol-lineas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.vidcol-lineas { grid-template-columns: repeat(4, 1fr); }
}

.vidcol-linea__enlace {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vc-e-4);
	height: 100%;
	padding: var(--vc-e-24);
	border: var(--vc-borde) solid var(--vc-zona-linea);
	border-radius: var(--vc-radio);
	background: var(--vc-zona-fondo);
	color: var(--vc-zona-texto);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vidcol-linea__enlace:hover {
	border-color: var(--vc-zona-enlace);
	box-shadow: var(--vc-sombra);
	color: var(--vc-zona-texto);
}
.vidcol-linea__glifo {
	display: block;
	width: 64px;
	color: var(--vc-zona-texto-suave);
	margin-bottom: var(--vc-e-8);
}
.vidcol-linea__glifo .vidcol-glifo {
	/* El glifo se dibujó en un lienzo 4:3 con mucho aire alrededor; se recorta
	   al cuadro útil para que a 64 px se vea el trazo y no el margen. */
	width: 100%;
	height: auto;
	display: block;
}
.vidcol-linea__nombre {
	font-weight: 600;
	font-size: var(--vc-texto-realce);
	line-height: var(--vc-interlineado-realce);
}
.vidcol-linea__conteo {
	font-family: var(--vc-fuente-cifra);
	font-size: var(--vc-texto-menor);
	color: var(--vc-zona-texto-suave);
}

.vidcol-cierre { max-width: var(--vc-prosa); }

/* Movimiento reducido (A15): 1ms en vez de none, para que los eventos de fin
   de transición sigan llegando. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 1ms !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
	.vidcol-tarjeta:hover { transform: none; }
	/* El relieve del botón no se mueve (globals.css:533-536). */
	.vidcol-boton-cabecera:hover,
	.vidcol-boton-cabecera:active { transform: none; }
}