/**
 * catalogo.css — las fichas de catálogo y de enlace comercial.
 *
 * ══════════════════════════════════════════════════════════════════════════
 *  QUÉ SE MIDIÓ ANTES DE ESCRIBIR ESTO (19/08/2026)
 *
 *   · /catalogo/ y /catalogo/{slug}/ no tenían plantilla propia: WordPress
 *     caía en `index.php` y solo salía el título. Sin precio, sin foto.
 *   · Igual /enlace/ y /enlace/{slug}/.
 *   · 81 fichas de catálogo y 2 enlaces comerciales publicados, esperando.
 *   · De esas 81, **CERO tienen precio guardado** (`precio_desde_catalogo_svh`
 *     y `precio_normal_catalogo_svh` están vacíos en las 81). Por eso el
 *     precio de aquí abajo se pinta SOLO si hay dato: nunca un 0 inventado.
 *   · Solo 31 de 81 tienen imagen propia o taxonomía asignada: las otras 50
 *     están a medio importar. El marcador de `portadas.php` las cubre.
 *
 *  ── CERO `!important`, IGUAL QUE EL RESTO DEL TEMA ──────────────────────
 *  Aquí NO se usa `@layer`: se probó en `tokens.css` con Woodmart real y no
 *  funciona (no hay soporte para `<link layer="...">` en ningún navegador,
 *  y meter solo nuestro CSS en una capa hace que Woodmart gane siempre).
 *  Lo que gana es el ORDEN DE ENCOLADO: este fichero se encola en
 *  `functions.php` con `deps: ['svh-componentes']`, o sea DESPUÉS de
 *  Woodmart y después del resto del tema. A igual especificidad, gana el
 *  último. Un nivel de clase, todo con tokens, cero número suelto.
 *
 *  Los colores de los estados (disponible/agotado/activo/pausado…) NO son
 *  nuevos: reutilizan `.svh-estado--ok/curso/avisa/error/inactivo`, que ya
 *  están comprobados contra WCAG 2.2 AA en `tokens.css`. Cero color nuevo
 *  en este fichero → nada que volver a pasar por `contraste.py`.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════
 * 1 · LA REJILLA Y LA TARJETA COMERCIAL — copiada de `.svh-tarjeta-creador`
 *     (misma rejilla `auto-fill`, mismo padding, misma sombra) para que
 *     /catalogo/ y /enlace/ se sientan del mismo sitio que /creador/.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-rejilla-catalogo {
	display: grid;
	gap: var(--svh-espacio-6);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.svh-tarjeta-comercial {
	--tarjeta-padding: var(--svh-espacio-4);
	--tarjeta-radio: var(--svh-radio-lg);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-3);
	padding: var(--tarjeta-padding);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--tarjeta-radio);
	box-shadow: var(--svh-sombra-tarjeta);
	transition: box-shadow var(--svh-transicion);
}

.svh-tarjeta-comercial:hover { box-shadow: var(--svh-sombra-md); }

.svh-tarjeta-comercial__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-hundido);
}

.svh-tarjeta-comercial__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
	flex: 1;
	min-inline-size: 0;
}

.svh-tarjeta-comercial__nombre { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }

/* La tarjeta entera es clicable, con UN solo enlace en el orden de
   tabulación: el del nombre (mismo patrón que `.svh-tarjeta-creador`). */
.svh-tarjeta-comercial__enlace { color: inherit; text-decoration: none; }
.svh-tarjeta-comercial__enlace:hover { text-decoration: underline; }

.svh-tarjeta-comercial__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.svh-tarjeta-comercial:has(.svh-tarjeta-comercial__enlace:focus-visible) {
	outline: 3px solid var(--svh-foco);
	outline-offset: 2px;
}

.svh-tarjeta-comercial__subtitulo,
.svh-tarjeta-comercial__meta {
	margin: 0;
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

.svh-tarjeta-comercial__pie {
	margin-block-start: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--svh-espacio-2);
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2 · EL PRECIO — nunca un 0 falso. Si el campo está vacío, no se pinta
 *     nada: eso ya lo decide quien llama, aquí solo el formato.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-precio { display: flex; align-items: baseline; gap: var(--svh-espacio-2); flex-wrap: wrap; margin: 0; }
.svh-precio__desde { font-weight: 700; color: var(--svh-texto); font-variant-numeric: tabular-nums; }
.svh-precio__normal { color: var(--svh-texto-tenue); text-decoration: line-through; font-size: var(--svh-txt-micro); }
.svh-precio--grande .svh-precio__desde { font-size: var(--svh-txt-titulo); }

/* ═══════════════════════════════════════════════════════════════════
 * 3 · LA FICHA INDIVIDUAL — imagen | datos, dos columnas desde 900px.
 *     Mismo patrón de rejilla que `.svh-video-detalle`, con su propio
 *     nombre: esto no es un vídeo, es una oferta comercial.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-detalle-comercial {
	display: grid;
	gap: var(--svh-espacio-8);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.svh-detalle-comercial { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
	.svh-detalle-comercial__media { position: sticky; inset-block-start: var(--svh-espacio-8); }
}

.svh-detalle-comercial__media > .svh-portada,
.svh-detalle-comercial__media > .svh-marcador { border-radius: var(--svh-radio-lg); }

.svh-detalle-comercial__galeria {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--svh-espacio-2);
	margin-block-start: var(--svh-espacio-3);
}

.svh-detalle-comercial__galeria img {
	aspect-ratio: 1;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-sm);
	background: var(--svh-fondo-hundido);
}

.svh-detalle-comercial__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-2);
	margin-block-end: var(--svh-espacio-3);
}

.svh-detalle-comercial__desc { max-inline-size: 65ch; color: var(--svh-texto-suave); }
.svh-detalle-comercial__cuerpo { max-inline-size: 65ch; color: var(--svh-texto); white-space: pre-line; }

.svh-detalle-comercial__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-3);
	margin-block-start: var(--svh-espacio-6);
}

/* ═══════════════════════════════════════════════════════════════════
 * 4 · FILTRO DE CATEGORÍA DEL ARCHIVO — reutiliza `.svh-chip`, así que
 *     no hace falta ni un color nuevo aquí tampoco.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-catalogo-filtro { margin-block-end: var(--svh-espacio-6); }