/**
 * SOLUCON — la tienda con la identidad de la home (2026-09-10).
 *
 * Se encola en catálogo (tienda, categorías) y en la ficha de producto, DESPUÉS
 * de solucon-catalog.css y de solucon-stockbar.css. No reemplaza ninguna de las
 * dos: el layout, la grilla, los filtros y el JS siguen siendo los de siempre.
 * Esta hoja cambia lo que se ve encima —color, tipografía, esquinas, sombras y
 * hovers— para que la tienda hable el mismo idioma visual que la portada.
 *
 * ── Por qué una capa aparte y no editar solucon-catalog.css ──
 * Esa hoja mide 2.178 líneas y su paleta (grises Tailwind, azul #3B82F6,
 * verde #059669, radios de 8 a 16 px, sombras difusas) está repetida regla por
 * regla. Reescribirla entera es un riesgo de layout en 52 fichas y un catálogo
 * con JS que depende de esas clases. En cambio, la mayoría de sus colores salen
 * de tokens --sc-* declarados en :root: redefiniendo los tokens acá, cientos de
 * reglas cambian de color sin tocarlas. Lo que no pasa por tokens (radios,
 * sombras, verde, familias) se pisa selector por selector, más abajo.
 *
 * ── El sistema que se aplica (ver solucon-home.css y solucon-home-hoja.css) ──
 * · Tres voces: Outfit para títulos, nombres de producto y precios; Inter para
 *   texto corrido, botones y campos; JetBrains Mono para todo dato (SKU,
 *   capacidad, legibilidad, cifras, rótulos en mayúsculas).
 * · Un solo color de marca, el navy. Desaparecen el azul eléctrico y el verde
 *   de "en stock": en la home el badge de stock ya es navy (.solh-prod__badge).
 * · Lenguaje recto, como el isotipo: ninguna esquina redondeada.
 * · Las tarjetas llevan un contorno de 1 px, leve en reposo, que al hover
 *   pasa a casi negro sobre claro y a blanco sobre navy. (Las marcas de
 *   esquina de la home se probaron y se retiraron.)
 * · El hover es un gesto único: la tarjeta se despega 5 px en diagonal y suelta
 *   una sombra dura navy, sin desenfoque. Los botones hacen lo mismo con 4 px.
 * · Los títulos de sección llevan el filete: línea de ancho completo con un
 *   taco navy de 78×7 montado en el arranque.
 *
 * Todo hover que desplaza va detrás de (hover: hover): en táctil el estado se
 * queda pegado después del tap. Y prefers-reduced-motion deja las tarjetas
 * quietas; el relieve lo pone igual la sombra dura, que es estática.
 */

/* ── Tokens: la paleta de la tienda pasa a ser la de marca ──────────────
   Cada --sc-* se mapea al token de brand.css que cumple el mismo rol. Los
   grises Tailwind eran una escala de nueve pasos; la marca tiene cuatro
   (paper, surface, line, gray-2) y tres de texto (tx-1, tx-2, tx-3). Varios
   pasos caen en el mismo valor a propósito: la tienda usaba diferencias de
   gris que no significaban nada. */
:root {
	--sc-azul-hover:  var(--sol-navy-deep);
	--sc-azul-acento: var(--sol-navy);
	--sc-azul-light:  var(--sol-surface);
	--sc-gris-50:     var(--sol-paper);
	--sc-gris-100:    var(--sol-surface);
	--sc-gris-200:    var(--sol-line);
	--sc-gris-300:    var(--sol-gray-2);
	--sc-gris-400:    var(--tx-3);
	--sc-gris-500:    var(--sol-muted);
	--sc-gris-700:    var(--tx-2);
	--sc-gris-900:    var(--tx-1);
	--sc-radius:      0;
	--sc-shadow-sm:   none;
	--sc-shadow-md:   none;
	--sc-shadow-lg:   none;
	--sc-transition:  .18s ease;
	/* solucon-catalog.css pide Montserrat para los datos; la marca dice mono. */
	--sc-mono:        var(--font-mono);

	/* Los dos gestos, con nombre, para no repetir los números en cada regla. */
	--sc-lift:        translate(-5px, -5px);
	--sc-lift-shadow: 9px 9px 0 var(--sol-navy);
	--sc-lift-btn:    translate(-4px, -4px);

	/* Hover de las superficies navy que NO son botones (pills activas, variante
	   elegida): navy profundo, como en la home. Los botones navy no cambian de
	   color al hover: tienen su barra blanca, ver "Botones dentro de las
	   tarjetas". Una primera versión los pasaba a gris; el pedido era otro. */
	--sc-navy-hover:  var(--sol-navy-deep);

	/* La sombra dura de las tarjetas que se despegan SOBRE FONDO NAVY va en gris
	   (pedido del 2026-09-10, viendo la preview): navy profundo sobre navy no
	   se veía. Es el gris de trazo, el mismo de las marcas de esquina, así la
	   tarjeta suelta un bloque del mismo material que la encuadra. Sobre blanco
	   la sombra sigue navy, como en la home. */
	--sc-lift-shadow-navy: 9px 9px 0 var(--sol-gray-2);

	/* El contorno de las tarjetas, 1 px siempre. En reposo es leve: gris de
	   línea sobre fondo claro, gris de trazo sobre navy. Al hover toma cuerpo
	   sin cambiar de grosor: casi negro del sistema (--tx-1, el color del dato)
	   sobre claro, blanco sobre navy. Pedido del 2026-09-10, cuarta vuelta. */
	--sc-outline:            var(--sol-line);
	--sc-outline-hover:      var(--tx-1);
	--sc-outline-navy:       var(--sol-gray-2);
	--sc-outline-navy-hover: #fff;
}

/* ── Tipografía base de la tienda ──────────────────────────────────────
   Solo el contenido: header y footer son de todo el sitio y siguen con lo
   suyo. Los botones y campos del catálogo heredan (font-family: inherit en
   .sc-pill y .sc-family__variant; .sc-btn no declara familia). */
body.woocommerce .site-content,
body.woocommerce .sc-filters,
body.woocommerce .sc-product-card,
body.woocommerce .sc-family-card,
body.woocommerce .sc-stk,
body.woocommerce .sol-header {
	font-family: var(--font-text);
}
body.woocommerce .sc-btn,
body.woocommerce .sc-assist,
body.woocommerce .sc-results__sort select,
body.woocommerce .sol-search input[type="text"],
body.woocommerce .sol-search button {
	font-family: var(--font-text) !important;
}

/* ── Contorno de las tarjetas: la primitiva compartida ─────────────────
   Un borde de 1 px, leve en reposo y casi negro (blanco sobre navy) al hover.
   El grosor no cambia: lo que cambia es el color. Ver los tokens --sc-outline*.

   Las marcas de esquina de la home se fueron: con contorno completo eran un
   trazo gris montado sobre otro, y en las esquinas el marco parecía cambiar
   de grosor. Y el contorno es un border de verdad y no un anillo por
   box-shadow: las columnas de la grilla miden fracciones de píxel (1038 / 4 =
   259,5 en la vitrina), una sombra interior cae en medio píxel y se difumina
   de un lado; el navegador ajusta los bordes al píxel entero y salen parejos. */
.sc-product-card,
.sc-family-card,
.sc-stk__card,
.sc-trust,
.sc-filters {
	position: relative;
}
.sc-product-card,
.sc-family-card,
.sc-stk__card {
	border: 1px solid var(--sc-outline);
}
.sc-stk__card { border-color: var(--sc-outline-navy); }

/* ==========================================================================
   Hero de la tienda (.sol-header) — sin plano navy, como el hero de la home
   ========================================================================== */

/* solucon-catalog.css declara casi todo el hero con !important; para ganarle
   hace falta la misma especificidad, el mismo !important y venir después. */
body.woocommerce .sol-header {
	background: #fff !important;
	color: var(--sol-navy);
}
/* Los orbes desenfocados se van: el degradado y el glow eran el gesto de
   plantilla más visible de la tienda. */
body.woocommerce .sol-header::before,
body.woocommerce .sol-header::after { display: none; }

body.woocommerce .sol-header-inner {
	max-width: 1180px !important;
	padding: 40px 44px 0 !important;
}
/* El header del sitio es position:fixed y en escritorio mide 116 px (topbar 36
   + barra 80), pero el mega-menú compensa apenas 20 px en el body: la miga y
   el arranque del titular quedaban debajo del header. Es el mismo problema que
   resolvió la home (.sol-home { padding-top: 96px }) y la misma cuenta: 96 de
   compensación más el aire propio del hero. Solo por encima de 1024 px, que es
   donde el mega-menú esconde el topbar y compensa 65 px para un header de 65:
   ahí la cuenta cierra sola. */
@media (min-width: 1025px) {
	body.woocommerce .sol-header-inner { padding-top: 132px !important; }
}
/* La línea de apoyo del hero de la home, con su graduación: 1 px de filete y
   dos peines de tics (cada 14 px y cada 70 px). Es el piso del hero y el motivo
   más reconocible de la dirección "Hoja de datos". */
body.woocommerce .sol-header-inner::after {
	content: '';
	display: block;
	position: relative;
	height: 10px;
	margin-top: 40px;
	background-image:
		linear-gradient(var(--sol-line), var(--sol-line)),
		repeating-linear-gradient(to right, var(--sol-line) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(to right, var(--sol-line) 0 1px, transparent 1px 70px);
	background-size: 100% 1px, 100% 6px, 100% 10px;
	background-position: 0 0, 0 1px, 0 1px;
	background-repeat: no-repeat;
}

body.woocommerce .sol-breadcrumb {
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: var(--tx-3) !important;
	margin-bottom: 22px !important;
}
body.woocommerce .sol-breadcrumb a,
body.woocommerce .sol-breadcrumb strong { color: var(--tx-3) !important; font-weight: 400; }
body.woocommerce .sol-breadcrumb a:hover { color: var(--sol-navy) !important; }

/* Alineado a la izquierda: la home no centra nada. */
body.woocommerce .sol-header-row {
	align-items: flex-start !important;
	text-align: left !important;
	gap: 24px !important;
}
body.woocommerce .sol-header-text { max-width: 720px !important; }

body.woocommerce .sol-header-text h1 {
	position: relative;
	font-family: var(--font-display) !important;
	font-size: min(46px, 7vw) !important;
	font-weight: 750 !important;
	text-transform: uppercase;
	letter-spacing: -.02em !important;
	line-height: 1.06 !important;
	color: var(--sol-navy) !important;
	margin: 0 0 20px !important;
	padding-bottom: 20px;
	/* El filete: línea de ancho completo y taco navy montado en el arranque. */
	border-bottom: 1px solid var(--sol-line);
}
body.woocommerce .sol-header-text h1::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 78px;
	height: 7px;
	background: var(--sol-navy);
}
body.woocommerce .sol-header-text p {
	font-family: var(--font-text) !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--sol-ink) !important;
	max-width: 52ch;
	text-wrap: pretty;
}

/* Buscador. La primera versión era un campo con filete y nada más, y se veía
   básica al lado del titular (visto en la preview). Ahora es un campo de hoja
   técnica: lleva su rótulo mono arriba, como los rótulos de la escena del hero
   de la home, mide 640 de ancho para que el placeholder entre entero, y al
   enfocar suelta la sombra dura de la marca, quieta —el campo no se desplaza
   porque se está escribiendo adentro. */
body.woocommerce .sol-search {
	position: relative !important;
	max-width: 640px !important;
	margin-top: 10px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border: 1px solid var(--sol-line) !important;
	background: #fff !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
body.woocommerce .sol-search::before {
	content: 'Buscar en el catálogo';
	position: absolute;
	left: 0;
	top: -24px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tx-3);
	pointer-events: none;
}
body.woocommerce .sol-search:hover { border-color: var(--sol-gray-2) !important; }
body.woocommerce .sol-search:focus-within {
	border-color: var(--sol-navy) !important;
	box-shadow: 6px 6px 0 var(--sol-navy) !important;
}
body.woocommerce .sol-search input[type="text"] {
	border-radius: 0 !important;
	font-size: 15.5px !important;
	color: var(--tx-1) !important;
	padding: 17px 20px !important;
}
body.woocommerce .sol-search input[type="text"]::placeholder { color: var(--tx-3) !important; }
body.woocommerce .sol-search button {
	border-radius: 0 !important;
	background: var(--sol-navy) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	gap: 9px !important;
	padding: 0 26px !important;
	transition: background .18s ease !important;
}
body.woocommerce .sol-search button:hover { background: var(--sol-navy-deep) !important; }

@media (max-width: 768px) {
	body.woocommerce .sol-header-inner { padding: 22px 18px 0 !important; }
	body.woocommerce .sol-header-inner::after { margin-top: 22px; }
	body.woocommerce .sol-header-text h1 { font-size: 30px !important; line-height: 1.12 !important; }
	body.woocommerce .sol-search { margin-top: 8px !important; }
	body.woocommerce .sol-search input[type="text"] { padding: 13px 14px !important; }
	body.woocommerce .sol-search button { padding: 0 16px !important; }
	body.woocommerce .sol-search,
	body.woocommerce .sol-search input[type="text"],
	body.woocommerce .sol-search button { border-radius: 0 !important; }
}

/* ==========================================================================
   Vitrina "Sale hoy de depósito" en /tienda (.sc-stk) — sobre navy
   ========================================================================== */

/* En la home la vitrina de stock es la sección navy de la primera pantalla:
   corta la página, no se lee como una grilla más. En la tienda era una banda
   verde claro con glow. Pasa a ser la misma sección navy, con las mismas
   fichas blancas de marcas de esquina. */
.sc-stk {
	background: var(--sol-navy);
	border-top: 0;
	color: #fff;
	padding: 52px 0 0;
}
.sc-stk__ticks {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 12px);
	opacity: 1;
}
.sc-stk__glow { display: none; }

.sc-stk__head,
.sc-stk__grid { max-width: 1180px; padding: 0 44px; }

.sc-stk__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--tx-d3);
	background: none;
	border: 0;
	padding: 0;
	border-radius: 0;
}
.sc-stk__dot { display: none; }
.sc-stk__title {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.14;
	color: #fff;
	margin: 16px 0 0;
	padding-bottom: 20px;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}
/* Filete en blanco, como en las secciones navy de la home. */
.sc-stk__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 78px;
	height: 7px;
	background: #fff;
}
.sc-stk__accent::after { display: none; }
.sc-stk__sub { margin-top: 18px; font-size: 15.5px; color: var(--tx-d2); }
.sc-stk__scar { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--tx-d3); }

/* El CTA es el fantasma blanco de la home sobre navy. */
.sc-stk__cta {
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	background: none;
	border: 1.5px solid #fff;
	border-radius: 0;
	padding: 14px 24px;
	box-shadow: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.sc-stk__cta:hover {
	background: none;
	border-color: #fff;
	color: #fff;
	transform: none;
	box-shadow: none;
}
.sc-stk__cta:hover .sc-stk__arrow { transform: none; }
@media (hover: hover) {
	.sc-stk__cta:hover { transform: var(--sc-lift-btn); box-shadow: 7px 7px 0 var(--sol-gray-2); }
}
/* ── Zona de impacto estable durante el despegue ───────────────────────
   Un elemento que se corre 4 o 5 px hacia arriba y a la izquierda al hover se
   le escapa al mouse si el puntero estaba en esa franja del borde inferior o
   derecho: pierde el hover, vuelve, lo recupera, y vibra. Visto en el botón
   del footer (2026-09-10). Al hover, un pseudo-elemento invisible extiende la
   zona de impacto sobre el lugar que el elemento acaba de dejar, y el puntero
   no lo pierde nunca. */
.sc-stk__cta { position: relative; }
/* .sc-stk__card trae overflow:hidden de stockbar.css; recortaría el pseudo. */
.sc-stk__card { overflow: visible; }
.sc-stk__cta:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -4px;
	bottom: -4px;
}
/* En las tarjetas el pseudo no puede cubrir la tarjeta entera: taparía los
   botones de adentro y se comería sus clics. Son dos franjas, la de la
   derecha y la de abajo, solo sobre el hueco que deja el desplazamiento. */
.sc-product-card:hover::before,
.sc-family-card:hover::before,
.sc-stk__card:hover::before {
	content: '';
	position: absolute;
	top: 0;
	right: -5px;
	bottom: -5px;
	width: 5px;
}
.sc-product-card:hover::after,
.sc-family-card:hover::after,
.sc-stk__card:hover::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 5px;
}

.sc-stk__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }

/* La entrada por fundido queda, pero con `backwards` en vez de `forwards`: con
   forwards el transform del último fotograma seguía mandando después de la
   animación y el hover nunca llegaba a mover la tarjeta. El estado de reposo
   ahora es el normal, y la animación solo describe cómo se llega. */
@keyframes sc-stk-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sc-stk__card {
	opacity: 1;
	transform: none;
	animation-fill-mode: backwards;
	background: #fff;
	border-radius: 0;
	color: var(--sol-navy);
	box-shadow: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-stk__card:hover { transform: none; box-shadow: none; }
@media (hover: hover) {
	.sc-stk__card:hover {
		transform: var(--sc-lift);
		border-color: var(--sc-outline-navy-hover);
		box-shadow: var(--sc-lift-shadow-navy);
	}
}
.sc-stk__img { height: 150px; background: #fff; border-bottom: 1px solid var(--sol-line); }
.sc-stk__chip {
	top: 12px;
	left: 12px;
	background: var(--sol-navy);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .08em;
	padding: 5px 10px;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}
.sc-stk__dot--sm { display: none; }
.sc-stk__body { padding: 18px; }
.sc-stk__sku { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--tx-3); }
.sc-stk__spec { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--tx-1); margin-top: 6px; }
.sc-stk__hr { background: var(--sol-line); margin: 12px 0 10px; }
.sc-stk__plabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--tx-3); }
.sc-stk__price { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--sol-navy); margin-top: 4px; }
.sc-stk__price .woocommerce-Price-currencySymbol { color: var(--sol-navy); font-weight: 700; }
.sc-stk__acts { margin-top: 14px; }
.sc-stk__bt { font-family: var(--font-text); font-size: 13px; font-weight: 500; padding: 12px; border-radius: 0; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.sc-stk__bt--p { background: var(--sol-navy); color: #fff; }
.sc-stk__bt--p:hover { background: var(--sol-navy); color: #fff; transform: none; box-shadow: none; }
.sc-stk__bt--p:hover .sc-stk__wa { animation: none; }
.sc-stk__bt--s { background: #fff; color: var(--sol-navy); border: 1.5px solid var(--sol-navy); }
.sc-stk__bt--s:hover { background: var(--sol-paper); border-color: var(--sol-navy); color: var(--sol-navy); }

/* La banda de cierre deja de ser un bloque aparte con degradado: es el pie de
   la misma sección navy, separado por un filete claro. */
.sc-stk__close { margin-top: 40px; background: none; box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .18); }
.sc-stk__close-inner { max-width: 1180px; padding: 18px 44px; }
.sc-stk__trust li { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; color: var(--tx-d2); }
.sc-stk__trust li + li::before { background: rgba(255, 255, 255, .18); }
.sc-stk__tic svg { stroke: var(--tx-d3); }

@media (max-width: 1024px) { .sc-stk__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
	.sc-stk { padding: 30px 0 0; }
	.sc-stk__head, .sc-stk__grid { padding: 0 18px; }
	.sc-stk__grid { gap: 12px; }
	.sc-stk__card { flex: 0 0 186px; }
	.sc-stk__title { font-size: 26px; }
	.sc-stk__close-inner { padding: 14px 18px; }
}

/* ==========================================================================
   Filtros (.sc-filters) — el panel, sin sombra ni radio
   ========================================================================== */

.sc-filters {
	border: 1px solid var(--sol-line);
	border-radius: 0;
	box-shadow: none;
}
.sc-filters__row + .sc-filters__row,
.sc-filters__row--secondary,
.sc-filters__row--capacity,
.sc-filters__results-bar {
	background: var(--sol-paper);
	border-top-color: var(--sol-line);
}
.sc-filters__row--capacity { border-top: 1px dashed var(--sol-gray-2); }

/* Los rótulos de fila son eyebrows: mono, versalitas, tracking abierto. */
.sc-filters__label,
.sc-family__selector-label,
.sc-price__label,
.sc-spec__label,
.sc-family__spec-label {
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.sc-filters__label { font-size: 11px; }
.sc-filters__cap-hint { font-style: normal; font-size: 12px; color: var(--tx-3); }
.sc-filters__separator { background: var(--sol-line); }

/* ── Pills: rectas, con filete; el activo se rellena de navy ── */
.sc-pill {
	border-radius: 0;
	font-weight: 500;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sc-pill--cat,
.sc-pill--stock {
	background: #fff;
	color: var(--tx-2);
	border: 1px solid var(--sol-line);
}
.sc-pill--cat:hover,
.sc-pill--stock:hover {
	background: #fff;
	border-color: var(--sol-navy);
	color: var(--sol-navy);
	box-shadow: none;
}
.sc-pill--cat.is-active,
.sc-pill--stock.is-active {
	background: var(--sol-navy);
	color: #fff;
	border-color: var(--sol-navy);
	box-shadow: none;
}
.sc-pill--cat.is-active:hover,
.sc-pill--stock.is-active:hover { background: var(--sc-navy-hover); border-color: var(--sc-navy-hover); }
.sc-pill__count { font-family: var(--font-mono); font-weight: 400; font-size: 11px; opacity: .7; }

/* Capacidad: es un dato, va en mono. */
.sc-pill--cap {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--tx-2);
	border: 1px dashed var(--sol-gray-2);
}
.sc-pill--cap:hover { border: 1px solid var(--sol-navy); color: var(--sol-navy); background: #fff; }
.sc-pill--cap.is-active { border: 1px solid var(--sol-navy); background: var(--sol-surface); color: var(--sol-navy); }

/* solucon-catalog.css mata el foco de teclado en las pills (outline: none).
   La home lo resuelve con un anillo navy en :focus-visible; acá igual. */
.sc-pill:focus-visible,
.sc-family__variant:focus-visible,
.sc-btn:focus-visible,
.sc-assist:focus-visible {
	outline: 2px solid var(--sol-navy) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}
.sc-pill--stock:focus:not(.is-active),
.sc-pill--cat:focus:not(.is-active) { color: var(--tx-2) !important; }

/* ── Barra de resultados ── */
.sc-active-cat {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--sol-navy);
}
.sc-results__count { font-size: 13px; color: var(--tx-3); }
.sc-results__count strong { font-family: var(--font-mono); font-weight: 500; color: var(--tx-1); }
.sc-results__sort select {
	border-radius: 0;
	border-color: var(--sol-line);
	color: var(--tx-2);
}
.sc-results__sort select:hover { border-color: var(--sol-navy); }
.sc-results__sort select:focus { border-color: var(--sol-navy); box-shadow: none; }

.sc-assist {
	background: #fff;
	color: var(--sol-navy);
	border: 1.5px solid var(--sol-navy);
	border-radius: 0;
	font-weight: 500;
}
.sc-assist:hover { background: var(--sol-surface); border-color: var(--sol-navy); box-shadow: none; }

/* Condensada y pegada arriba: un filete abajo en vez de sombra difusa. */
.sc-filters.is-stuck {
	box-shadow: none;
	border-bottom: 1px solid var(--sol-line);
}
.sc-filters.is-stuck .sc-filters__row:first-child { max-width: 1180px; }

/* ==========================================================================
   Banda de confianza (.sc-trust)
   ========================================================================== */

.sc-trust {
	border: 1px solid var(--sol-line);
	border-radius: 0;
	box-shadow: none;
}
.sc-trust__item + .sc-trust__item { border-left-color: var(--sol-line); }
.sc-trust__ic { border-radius: 0; background: var(--sol-surface); color: var(--sol-navy); }
.sc-trust__ic--wa { background: var(--sol-surface); color: var(--sol-navy); }
.sc-trust__tx strong { font-weight: 600; color: var(--tx-1); }
.sc-trust__tx span { color: var(--tx-3); }
@media (max-width: 768px) {
	.sc-trust__item:nth-child(n+3) { border-top-color: var(--sol-line); }
}
@media (max-width: 420px) {
	.sc-trust__item + .sc-trust__item { border-top-color: var(--sol-line); }
}

/* ==========================================================================
   Tarjeta de producto (.sc-product-card) — la ficha de la vitrina de la home
   ========================================================================== */

.sc-product-card {
	border-radius: 0;
	box-shadow: none;
	/* overflow: visible para que la sombra dura y el desplazamiento no queden
	   recortados; la imagen ya recorta lo suyo en .sc-card__image-wrap. */
	overflow: visible;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-product-card:hover { transform: none; box-shadow: none; }
@media (hover: hover) {
	.sc-product-card:hover {
		transform: var(--sc-lift);
		border-color: var(--sc-outline-hover);
		box-shadow: var(--sc-lift-shadow);
	}
}

/* La foto sobre blanco, quieta: el gesto del hover es que se mueve la tarjeta,
   y una foto que además se agranda adentro son dos movimientos anidados. El
   fundido a la segunda foto de galería sí queda: es información, no adorno. */
.sc-card__image-wrap { background: #fff; }
.sc-card__image-wrap img { height: 200px; padding: 20px; transition: opacity .35s ease; }
.sc-product-card:hover .sc-card__image-wrap img { transform: none; }
.sc-card__image-wrap img.sc-card__image--hover,
.sc-card__image-link--has-hover > img:not(.sc-card__image--hover) { transition: opacity .35s ease; }

/* Badges: rectos y en mono. Stock en navy pleno, como .solh-prod__badge. */
.sc-badge {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
	padding: 5px 10px;
}
.sc-badge--stock { background: var(--sol-navy); color: #fff; border-radius: 0; box-shadow: none; }
.sc-badge--destacado { background: #fff; color: var(--sol-navy); border: 1px solid var(--sol-navy); box-shadow: none; }
.sc-badge--stock + .sc-badge--destacado { top: 42px; }
.sc-badge--marca { background: #fff; color: var(--tx-3); border: 1px solid var(--sol-line); font-size: 10px; letter-spacing: .08em; }

/* Nombre: el SKU es dato (mono, chico), el título es nombre de producto
   (Outfit). En la tienda estaban al revés: SKU grande en negrita, título
   gris. La home invirtió eso en la vitrina y acá se sigue. */
.sc-card__name { padding: 16px 18px 0; border-top: 1px solid var(--sol-line); }
.sc-card__sku {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--tx-3);
	line-height: 1.4;
}
.sc-card__name-link:hover .sc-card__sku { color: var(--sol-navy); }
.sc-card__title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sol-navy);
	margin-top: 5px;
}

/* Etiquetas de prestaciones: un solo trazo, sin semáforo de colores. */
.sc-card__features { padding: 12px 18px 0; gap: 6px; }
.sc-tag,
.sc-tag--yellow,
.sc-tag--green,
.sc-tag--blue,
.sc-tag--gray {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: none;
	color: var(--tx-2);
	border: 1px solid var(--sol-line);
	border-radius: 0;
	padding: 4px 8px;
}

/* Specs: una fila mono sobre un filete, sin cajitas grises. */
.sc-card__specs { padding: 14px 18px 0; gap: 18px; }
.sc-spec { padding: 10px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--sol-surface); }
.sc-spec__label { font-size: 9.5px; margin-bottom: 4px; }
.sc-spec__value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--tx-1); }

.sc-card__footer { padding: 16px 18px 18px; border-top-color: var(--sol-line); }

/* Precio: Outfit, como en la vitrina de la home. El símbolo deja de ser verde. */
.sc-price__value,
.sc-product-card .sc-price__value {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sol-navy);
}
.sc-price__value .woocommerce-Price-currencySymbol,
.sc-product-card .sc-price__value .woocommerce-Price-currencySymbol { color: var(--sol-navy); font-weight: 700; }
.sc-price__label { font-size: 10px; letter-spacing: .08em; }

/* Estado "en línea": el punto pasa a navy. El verde ya no está en ningún otro
   lado de la tienda y un solo punto verde se leería como un error. */
.sc-wa-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--tx-3); }
.sc-wa-status__dot { background: var(--sol-navy); animation-name: sc-wa-dot-navy; }
@keyframes sc-wa-dot-navy {
	0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(22, 48, 94, .4); }
	50%      { opacity: .6; box-shadow: 0 0 0 4px rgba(22, 48, 94, 0); }
}

/* Botones dentro de las tarjetas.
   La tarjeta entera ya se despega al hover; si los botones de adentro hicieran
   lo mismo serían dos desplazamientos anidados, y en una grilla de 50 fichas
   eso satura. Los dos comparten un gesto propio, más chico, y ninguno se mueve:
   les crece un taco por el borde inferior, de izquierda a derecha —el taco del
   filete de los títulos, en miniatura—. Navy sobre el fantasma blanco, blanco
   sobre el primario navy, que conserva su color. */
.sc-btn {
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 500;
	padding: 12px 16px;
	border-radius: 0;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sc-btn--cotizar { background: var(--sol-navy); color: #fff; border: 1px solid var(--sol-navy); box-shadow: none; }
.sc-btn--cotizar:hover {
	background: var(--sol-navy);
	border-color: var(--sol-navy);
	color: #fff;
	box-shadow: none;
	transform: none;
}
.sc-btn--cotizar:hover .sc-wa-ic { animation: none; }
.sc-btn--ver { background: #fff; color: var(--sol-navy); border: 1px solid var(--sol-navy); }
.sc-btn--ver:hover { background: var(--sol-paper); color: var(--sol-navy); border-color: var(--sol-navy); box-shadow: none; }
.sc-btn--ver,
.sc-btn--cotizar,
.sc-stk__bt--s,
.sc-stk__bt--p { position: relative; overflow: hidden; }
.sc-btn--ver::after,
.sc-btn--cotizar::after,
.sc-stk__bt--s::after,
.sc-stk__bt--p::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--sol-navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
.sc-btn--cotizar::after,
.sc-stk__bt--p::after { background: #fff; }
/* Por qué en Cotizar (tarjeta de la grilla) la barra en el borde se lee y en
   Pedir cotización (vitrina) no: Cotizar lleva un borde navy de 1 px, y el
   pseudo se apoya en la caja de padding, así que la barra queda enmarcada por
   ese borde. El botón de la vitrina no tiene borde y la barra tocaba el blanco
   de la tarjeta: parecía un recorte. Ahí la barra va adentro del navy. */
.sc-stk__bt--p::after {
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
}
.sc-btn--ver:hover::after,
.sc-btn--cotizar:hover::after,
.sc-stk__bt--s:hover::after,
.sc-stk__bt--p:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Tarjeta de familia (.sc-family-card) — misma ficha, con selector de modelo
   ========================================================================== */

.sc-family-card {
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-family-card:hover { transform: none; box-shadow: none; }
@media (hover: hover) {
	.sc-family-card:hover {
		transform: var(--sc-lift);
		border-color: var(--sc-outline-hover);
		box-shadow: var(--sc-lift-shadow);
	}
}
.sc-family__visual { background: #fff; border-bottom: 1px solid var(--sol-line); overflow: hidden; }
.sc-family__img { transition: none; }
.sc-family-card:hover .sc-family__img { transform: none; }

.sc-family__body { padding: 16px 18px 18px; }
.sc-family__name {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--sol-navy);
}
.sc-family__desc { font-size: 13px; font-weight: 400; color: var(--tx-3); }
.sc-family__selector-label { font-size: 9.5px; }

/* Selector de modelo: cada variante es una capacidad, o sea un dato. */
.sc-family__variant {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0;
	border: 1px solid var(--sol-line);
	border-radius: 0;
	background: #fff;
	color: var(--tx-2);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sc-family__variant:hover { border-color: var(--sol-navy); color: var(--sol-navy); background: #fff; }
.sc-family__variant.is-active { background: var(--sol-navy); color: #fff; border-color: var(--sol-navy); box-shadow: none; }
.sc-family__variant.is-active:hover { background: var(--sc-navy-hover); border-color: var(--sc-navy-hover); color: #fff; }
.sc-family__variant--stock { border-color: var(--sol-line); }
.sc-family__variant-dot { color: var(--sol-navy); }
.sc-family__variant--stock.is-active .sc-family__variant-dot { color: #fff; }
.sc-family__variant--more { border: 1px dashed var(--sol-gray-2); color: var(--sol-navy); }
.sc-family__variant--more:hover { background: #fff; border-color: var(--sol-navy); }

.sc-family__sku {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.sc-family__title { font-size: 12.5px; color: var(--tx-2); }

/* Chip de stock sobre la foto: navy pleno, sin punto. */
.sc-family__stock {
	top: 12px;
	left: 12px;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .08em;
	padding: 5px 10px;
	border-radius: 0;
	box-shadow: none;
}
.sc-family__stock--green { background: var(--sol-navy); color: #fff; box-shadow: none; }
.sc-family__stock--green::before { display: none; }
.sc-family__stock--yellow { background: #fff; color: var(--sol-navy); border: 1px solid var(--sol-navy); box-shadow: none; }

/* Precio de familia: Outfit; el símbolo, navy. */
.sc-family__price-slot { border-top: 1px solid var(--sol-line); }
.sc-family__price-slot .sc-price__label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; color: var(--tx-3); }
.sc-family__price-slot .sc-price__value {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sol-navy);
	font-variant-numeric: normal;
}
.sc-family__price-slot .sc-price__value .woocommerce-Price-currencySymbol { color: var(--sol-navy); font-weight: 700; opacity: 1; font-size: 1em; }

.sc-family__specs { gap: 18px; }
.sc-family__spec { padding: 10px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--sol-surface); }
.sc-family__spec-label { font-size: 9.5px; margin-bottom: 4px; }
.sc-family__spec-value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--tx-1); }
.sc-family__actions .sc-btn { font-size: 13px; padding: 12px 14px; }

@media (max-width: 768px) {
	.sc-family__body { padding: 14px; }
	.sc-family__name { font-size: 16px; }
	.sc-family__variant { font-size: 11px; }
}

/* ==========================================================================
   Ficha de producto — lo que solucon-catalog.css ya gobierna
   ========================================================================== */

/* Galería: marco de filete sobre papel, sin degradado ni radio. */
.single-product .woocommerce-product-gallery { border: 1px solid var(--sol-line); border-radius: 0; background: var(--sol-paper); }
.single-product .woocommerce-product-gallery__image img { border-radius: 0; }

.single-product .summary .product_title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.14;
	color: var(--sol-navy);
}

.sc-pdp-badge { font-family: var(--font-mono); font-weight: 400; letter-spacing: .08em; border-radius: 0; }
.sc-pdp-badge--stock { background: var(--sol-navy); color: #fff; border: 1px solid var(--sol-navy); }
/* El plazo de importación se informa, no se advierte: mismo trato que el
   stock, en negativo. El naranja de "alerta" no existe en la marca. */
.sc-pdp-badge--plazo { background: #fff; color: var(--sol-navy); border: 1px solid var(--sol-navy); }
.sc-pdp-dot { display: none; }

.sc-pdp-sku { font-family: var(--font-mono); font-weight: 500; color: var(--sol-navy); }
.sc-pdp-brand { font-family: var(--font-mono); color: var(--tx-3); letter-spacing: .08em; }

.sc-pdp-back {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.sc-pdp-back:hover { color: var(--sol-navy); }

.sc-pdp-specs { border: 1px solid var(--sol-line); border-radius: 0; }
.sc-pdp-specs h4 {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--tx-3);
	background: var(--sol-paper);
	border-bottom-color: var(--sol-line);
}
.sc-pdp-specs-grid { background: var(--sol-line); }
.sc-pdp-spec .k { color: var(--tx-2); }
.sc-pdp-spec .v { font-family: var(--font-mono); font-weight: 500; color: var(--tx-1); }
.sc-pdp-spec-ic { color: var(--tx-3); }
.sc-pdp-spec--key .k { color: var(--tx-1); font-weight: 500; }
.sc-pdp-spec--key .k .sc-pdp-spec-ic,
.sc-pdp-spec--key .v { color: var(--sol-navy); }
.sc-pdp-spec--key .v { font-weight: 500; }

/* Precio de la ficha: la cifra en Outfit —es precio, no dato— y el rótulo en
   mono. Antes iba todo en Montserrat. */
.sc-pdp-price { border-top-color: var(--sol-line); }
.sc-pdp-price__label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; color: var(--tx-3); }
.sc-pdp-price__cur { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--tx-3); }
.sc-pdp-price__num { font-family: var(--font-display); font-size: 44px; font-weight: 750; letter-spacing: -.02em; color: var(--sol-navy); }
.sc-pdp-price__quote { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--sol-navy); }

/* Bloque de precio nativo de Woo (sustituido por hook, pero por si vuelve). */
.woocommerce div.product p.price,
.woocommerce div.product span.price { background: var(--sol-paper); border-color: var(--sol-line); border-left-color: var(--sol-navy); border-radius: 0; box-shadow: none; }

.single-product .summary .product_meta { color: var(--tx-3); border-top-color: var(--sol-line); }

/* Pestañas y descripción. */
.single-product .woocommerce-tabs ul.tabs { border-bottom-color: var(--sol-line); }
.single-product .woocommerce-tabs ul.tabs li a { font-weight: 500; color: var(--tx-3); }
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--sol-navy); border-bottom-color: var(--sol-navy); }
.single-product .woocommerce-Tabs-panel { color: var(--tx-2); }
.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sol-navy);
}
.single-product .woocommerce-Tabs-panel--description p strong { color: var(--sol-navy); font-weight: 600; letter-spacing: 0; }
/* Viñeta cuadrada: el lenguaje recto llega hasta el punto de la lista. */
.single-product .woocommerce-Tabs-panel ul li::before { border-radius: 0; background: var(--sol-navy); }

/* Productos relacionados: título en Outfit con el filete de la home. */
section.related.products { border-top-color: var(--sol-line); }
section.related.products > h2 {
	position: relative;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--sol-navy);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sol-line);
	margin-bottom: 0;
}
section.related.products > h2::after {
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 78px;
	height: 7px;
	margin: 0;
	border-radius: 0;
	background: var(--sol-navy);
}
section.related.products .sc-card__image-wrap img { height: 168px; }

/* ==========================================================================
   Ficha de producto — lo que imprime snippets/solucon-product-v2.php
   ========================================================================== */

/* El snippet (Code Snippets id=35) imprime su <style> en wp_head con prioridad
   999, o sea DESPUÉS de esta hoja: a igual especificidad gana él. Por eso
   todo lo de este bloque lleva `body.single-product` (o más) adelante: suma
   especificidad y gana sin depender del orden. Donde el snippet usa
   !important, acá también. Y snippets/solucon-pdp-desc.php estila la
   descripción con selectores de id (#tab-description), así que ese tramo va
   con el id repetido.

   Las reglas de la ficha que ya gobierna solucon-catalog.css (galería
   interior, título, badges, specs, precio, pestañas base, relacionados)
   están más arriba, en su sección. */

/* ── Migas: mono, versalitas, y fuera del header fijo ──
   Medido en producción: el nav arrancaba a 70 px del techo con el header
   terminando en 116. Misma compensación que el hero de la tienda. */
body.single-product .sol-breadcrumbs {
	max-width: 1180px;
	margin: 0 auto 4px;
	padding: 12px 44px 0;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tx-3);
}
@media (min-width: 1025px) {
	body.single-product .sol-breadcrumbs { padding-top: 108px; }
}
body.single-product .sol-breadcrumbs a { color: var(--tx-3); gap: 6px; }
body.single-product .sol-breadcrumbs a:hover { color: var(--sol-navy); }
body.single-product .sol-breadcrumb-sep { color: var(--sol-gray-2); }
body.single-product .sol-breadcrumb-current { color: var(--sol-navy); font-weight: 500; max-width: 380px; }
@media (max-width: 768px) {
	body.single-product .sol-breadcrumbs { padding: 12px 18px 0; }
}

/* ── Galería: un solo marco, el de adentro ──
   El snippet enmarca div.images (degradado, radio 16, borde) y catálogo
   enmarca .woocommerce-product-gallery adentro: dos marcos anidados. Queda el
   interior, sobre papel y con filete, y el exterior se retira. */
body.woocommerce.single-product div.product div.images {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
body.woocommerce.single-product div.product div.images img { border-radius: 0; }
body.woocommerce.single-product div.product div.images .woocommerce-product-gallery__trigger {
	border-radius: 0;
	border: 1px solid var(--sol-line);
	box-shadow: none;
}

/* ── CTA: navy con la barra blanca; el email, fantasma con la barra navy ──
   El verde de WhatsApp se va, como en el catálogo. El botón conserva el ícono. */
body.single-product .sol-product-cta { gap: 8px; margin: 22px 0 10px; }
body.single-product .sol-cta-main,
body.single-product .sol-cta-secondary {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-text);
	font-weight: 500;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.single-product .sol-cta-main {
	background: var(--sol-navy);
	color: #fff !important;
	font-size: 15px;
	padding: 16px 24px;
}
body.single-product .sol-cta-main:hover { background: var(--sol-navy); transform: none; box-shadow: none; }
body.single-product .sol-cta-main svg { width: 20px; height: 20px; }
body.single-product .sol-cta-secondary {
	background: #fff;
	color: var(--sol-navy) !important;
	border: 1px solid var(--sol-navy);
	font-size: 14px;
	padding: 16px 20px;
}
body.single-product .sol-cta-secondary:hover { background: var(--sol-paper); color: var(--sol-navy) !important; }
body.single-product .sol-cta-main::after,
body.single-product .sol-cta-secondary::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--sol-navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
/* El CTA de la ficha no tiene borde y apoya directo sobre blanco: la barra va
   adentro del navy (7 px por encima del borde, con margen), como Escribinos en
   el header y Pedir cotización en la vitrina. En el borde se fundía con el
   fondo. */
body.single-product .sol-cta-main::after {
	background: #fff;
	left: 16px;
	right: 16px;
	bottom: 7px;
	height: 2px;
}
body.single-product .sol-cta-main:hover::after,
body.single-product .sol-cta-secondary:hover::after { transform: scaleX(1); }

/* El gancho de velocidad trae color y cuerpo en un style= inline: solo
   !important le gana. */
body.single-product .sol-speed-hook {
	font-size: 13.5px !important;
	color: var(--tx-3) !important;
}
body.single-product .sol-speed-hook strong { color: var(--sol-navy) !important; font-weight: 600; }

/* ── Badges de confianza: panel de papel con filete, sin degradado ── */
body.single-product .sol-trust-badges {
	background: var(--sol-paper);
	border: 1px solid var(--sol-line);
	border-radius: 0;
	padding: 18px;
	gap: 14px;
	margin: 22px 0;
}
body.single-product .sol-badge-item svg { width: 22px; height: 22px; color: var(--sol-navy); }
body.single-product .sol-badge-item strong { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--tx-1); }
body.single-product .sol-badge-item span { font-size: 12px; color: var(--tx-3); }

/* ── Recursos (manual, video): tarjetas rectas, ícono navy ──
   El rojo de YouTube era la única marca ajena con color propio en la ficha. */
body.single-product .sol-resources { border-top-color: var(--sol-line); }
body.single-product .sol-resources-title {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--tx-3);
}
body.single-product .sol-resource-card {
	background: #fff;
	border: 1px solid var(--sol-line);
	border-radius: 0;
	padding: 12px 14px;
	transition: border-color .18s ease;
}
body.single-product .sol-resource-card:hover { background: #fff; border-color: var(--sol-navy); transform: none; }
body.single-product .sol-resource-icon,
body.single-product .sol-resource-icon-video { background: var(--sol-navy); border-radius: 0; }
body.single-product .sol-resource-info strong { font-family: var(--font-text); font-size: 13.5px; font-weight: 600; color: var(--sol-navy); }
body.single-product .sol-resource-info span {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tx-3);
}
body.single-product .sol-resource-arrow { color: var(--sol-gray-2); }
body.single-product .sol-resource-card:hover .sol-resource-arrow { color: var(--sol-navy); transform: none; }

/* ── Meta (SKU, categorías) ── */
body.woocommerce.single-product div.product .product_meta { color: var(--tx-3); border-top-color: var(--sol-line); }
body.woocommerce.single-product div.product .product_meta a { color: var(--sol-navy); font-weight: 500; }

/* ── Pestañas: un filete, no una barra de 2 px; Inter en los rótulos ──
   El snippet fija el borde con !important y (0,3,2) de especificidad. */
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--sol-line) !important;
	gap: 4px;
}
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 500;
	color: var(--tx-3);
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:hover,
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sol-navy);
	border-bottom-color: var(--sol-navy);
}
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li { color: var(--tx-2); font-size: 15.5px; line-height: 1.65; }
body.single-product .woocommerce-Tabs-panel strong { color: var(--sol-navy); font-weight: 600; }
body.single-product .woocommerce-Tabs-panel a { color: var(--sol-navy); font-weight: 500; }
body.single-product .woocommerce-Tabs-panel iframe { border-radius: 0; }

/* Tabla de atributos que pinta el snippet (por si la descripción editorial
   no la reestructura): sin radio, rótulo sobre papel. */
body.single-product .woocommerce-product-attributes,
body.single-product .woocommerce-Tabs-panel--additional_information .shop_attributes { border-radius: 0; border-color: var(--sol-line); }
body.single-product .woocommerce-product-attributes th,
body.single-product .woocommerce-product-attributes td,
body.single-product .woocommerce-product-attributes-item { border-color: var(--sol-line); }
body.single-product .woocommerce-product-attributes th,
body.single-product .woocommerce-product-attributes-item__label { background: var(--sol-paper); color: var(--sol-navy); font-weight: 500; }
body.single-product .woocommerce-product-attributes td,
body.single-product .woocommerce-product-attributes-item__value { color: var(--tx-2); font-family: var(--font-mono); font-size: 13.5px; }

/* ── Descripción editorial (solucon-pdp-desc.php) ──
   Declara IBM Plex y un azul #1E73BE como acento sobre selectores de id.
   Pasa a las tres voces y al navy. Sus reglas leen variables (--accent,
   --ink, --tint…) del contenedor, así que con redefinirlas ahí cambian de
   color todas de una vez; las fuentes van con !important porque el snippet
   las fija así en los títulos. */
body.single-product #tab-description.soldesc-on,
body.single-product #tab-additional_information {
	--title: var(--sol-navy);
	--accent: var(--sol-navy);
	--ink: var(--tx-2);
	--muted: var(--tx-3);
	--line: var(--sol-line);
	--tint: var(--sol-paper);
	--tintline: var(--sol-gray-2);
	font-family: var(--font-text);
}
body.single-product .soldesc-index .lbl,
body.single-product .soldesc-index a .n,
body.single-product .soldesc-h .k,
body.single-product .soldesc-faq summary .pl { font-family: var(--font-mono); }
body.single-product .soldesc-index a { font-family: var(--font-text); }
body.single-product .soldesc-h .t {
	font-family: var(--font-display) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
}
body.single-product .soldesc-lead {
	font-family: var(--font-text);
	border-radius: 0;
	border-left-width: 4px;
}
body.single-product .soldesc-sec table,
body.single-product .soldesc-faq details,
body.single-product .soldesc-index,
body.single-product #tab-additional_information .shop_attributes { border-radius: 0; }
body.single-product .soldesc-sec table td:first-child,
body.single-product .soldesc-sec table td { font-family: var(--font-text); }
/* La viñeta de check traía el azul horneado en el SVG. Misma marca, en navy. */
body.single-product .soldesc-sec ul li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316305E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l3.5 3.5 8-8'/%3E%3C/svg%3E");
}
body.single-product .soldesc-faq summary { font-family: var(--font-text); font-weight: 500; }
body.single-product #tab-additional_information h2 {
	font-family: var(--font-display) !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
}
body.single-product #tab-additional_information .shop_attributes th { font-weight: 500 !important; }
body.single-product #tab-additional_information .shop_attributes td { font-family: var(--font-mono); font-size: 13.5px !important; }

/* ── Relacionados: el título en Outfit con el filete, contra el !important
   del snippet ── */
body.woocommerce.single-product section.related.products > h2 {
	font-family: var(--font-display) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: -.015em;
	margin: 0 !important;
	padding: 0 0 20px !important;
}
body.woocommerce.single-product section.related.products { border-top-color: var(--sol-line) !important; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sc-product-card,
	.sc-family-card,
	.sc-stk__card,
	.sc-stk__cta { transition: none; }
	.sc-product-card:hover,
	.sc-family-card:hover,
	.sc-stk__card:hover,
	.sc-stk__cta:hover { transform: none; }
	.sc-stk__card { animation: none; }
	.sc-wa-status__dot { animation: none; }
	.sc-btn--ver::after,
	.sc-btn--cotizar::after,
	.sc-stk__bt--s::after,
	.sc-stk__bt--p::after,
	body.single-product .sol-cta-main::after,
	body.single-product .sol-cta-secondary::after { transition: none; }
}