/* ============================================================
   ChronoSave — Design System v1.0
   Único archivo de tokens del proyecto. Todo color, tamaño y
   espaciado del sitio sale de aquí. Encolado después de Flatsome.
   ============================================================ */

/* ── Tipografía autoalojada (sin dependencia de Google) ────── */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

/* ── Tokens ──────────────────────────────────────────────────
   --cs-brand es el color del logo (dorado champán), sustituye
   al azul provisional del sistema original. Todo lo demás
   deriva de aquí. ──────────────────────────────────────────── */
:root {
	/* Neutros */
	--cs-ink-900:   #0F1519;
	--cs-ink-700:   #2B3640;
	--cs-ink-500:   #5A6875;
	--cs-ink-300:   #97A3AE;
	--cs-line:      #DDE3E8;
	--cs-line-soft: #E8ECF0;
	--cs-surface:   #FFFFFF;
	--cs-surface-2: #F5F7F9;
	--cs-bg:        #F4F6F8;

	/* Marca — dorado real del logo (sustituye al azul provisional) */
	--cs-brand:      #C0A06F;
	--cs-brand-600:  #A6844F;
	--cs-brand-050:  #F5EEE1;
	--cs-on-brand:   #241C0E; /* texto sobre fondo dorado */

	/* Semántico — cada color significa una cosa y solo una */
	--cs-ok:      #12734F;
	--cs-ok-bg:   #E7F3EC;
	--cs-warn:    #8A5A00;
	--cs-warn-bg: #FBF0DC;
	--cs-danger:  #A22C33;
	--cs-danger-bg: #FBE9EA;
	--cs-sale:    #B4232B;

	/* Tipografía */
	--cs-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cs-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	/* Espaciado — base 4px */
	--cs-sp-1: 4px;
	--cs-sp-2: 8px;
	--cs-sp-3: 12px;
	--cs-sp-4: 16px;
	--cs-sp-6: 24px;
	--cs-sp-8: 32px;
	--cs-sp-12: 48px;
	--cs-sp-16: 64px;
	--cs-sp-24: 96px;

	/* Radios — discretos a propósito */
	--cs-radius-sm: 4px;
	--cs-radius-md: 6px;
	--cs-radius-lg: 10px;
	--cs-shadow: 0 1px 2px rgba(15,21,25,.05);
}

/* ── Base tipográfica ────────────────────────────────────────── */
/* !important necesario: las Theme Options de Flatsome inyectan un
   <style> con "Lato" para body/headings/nav SIN !important, pero
   se encola después de esta hoja y gana por orden de cascada. */
body,
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
p, input, textarea, select, button {
	font-family: var(--cs-font-sans) !important;
}
body {
	font-size: 16px;
	line-height: 1.55;
	color: var(--cs-ink-900);
	background: var(--cs-surface);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-font,
.product_title,
.entry-title {
	font-family: var(--cs-font-sans) !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--cs-ink-900);
}

/* Referencias, SKU, EAN y precios en tabular-nums: alinean en columna */
.sku, .pcard__ref, .cs-mono,
.price, .price-rrp, .price-margin,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}
.sku, .pcard__ref, .cs-mono {
	font-family: var(--cs-font-mono) !important;
}

/* ── Botones — uno primario por pantalla ────────────────────── */
.button,
button,
input[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button,
.chronosave-register-btn {
	background: var(--cs-brand);
	border-color: var(--cs-brand);
	color: var(--cs-on-brand);
	font-family: var(--cs-font-sans);
	font-weight: 600;
	letter-spacing: 0;
	border-radius: var(--cs-radius-md);
	min-height: 44px;
}
/* Refuerzo: este CTA es siempre el botón primario, gane la clase
   que gane (p.ej. .alt de Flatsome invierte a fondo oscuro y
   dejaba el texto oscuro sobre fondo oscuro, ilegible). Afectaba
   también a "Añadir al carrito" (texto invisible hasta el hover),
   no solo al botón de registro. */
.chronosave-register-btn,
.chronosave-register-btn.alt,
.add_to_cart_button,
.add_to_cart_button.alt,
.single_add_to_cart_button,
.single_add_to_cart_button.alt {
	background: var(--cs-brand) !important;
	border-color: var(--cs-brand) !important;
	color: var(--cs-on-brand) !important;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.chronosave-register-btn:hover,
.chronosave-register-btn.alt:hover {
	background: var(--cs-brand-600);
	border-color: var(--cs-brand-600);
	color: #FFFFFF;
}

/* ── Precio B2B — lo que paga, lo que gana ──────────────────── */
.price {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--cs-ink-900);
}
.price del {
	font-family: var(--cs-font-sans);
	font-weight: 400;
	font-size: 13px;
	color: var(--cs-ink-500);
	opacity: 1;
	text-decoration: line-through;
}
.price ins {
	text-decoration: none;
}
.chronosave-rrp-label {
	font-family: var(--cs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-ink-500);
}
.chronosave-wholesale-label {
	font-family: var(--cs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-brand-600);
}
.chronosave-hidden-price {
	font-family: var(--cs-font-sans);
	color: var(--cs-ink-500);
	font-style: normal;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.4;
	display: inline-block;
}

/* ── Header / footer — carbón (--cs-ink-900), no dorado plano ── */
#header,
#header .header-bg-color,
#footer,
#footer .footer-widgets,
#footer .absolute-footer {
	background-color: var(--cs-ink-900) !important;
}
#header a,
#footer a {
	color: #EDEFF1;
	font-family: var(--cs-font-sans);
}
#header a:hover,
#header .nav-top-link:hover,
#footer a:hover {
	color: var(--cs-brand) !important;
}
/* El desplegable "Shop" se abre sobre fondo blanco (superficie clara,
   no la barra oscura del header): necesita su propio contraste,
   texto oscuro con hover en dorado — igual que cualquier enlace
   sobre superficie clara del sistema. */
#header .nav-dropdown a {
	color: var(--cs-ink-900) !important;
}
#header .nav-dropdown a:hover {
	color: var(--cs-brand-600) !important;
}

/* ── Enlaces ─────────────────────────────────────────────────── */
a { color: var(--cs-ink-900); }
a:hover { color: var(--cs-brand-600) !important; }
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--cs-brand-600);
	outline-offset: 2px;
}

/* ── Imágenes de producto uniformes ─────────────────────────── */
.products .product-small .box-image,
.related .product-small .box-image,
.up-sells .product-small .box-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--cs-surface-2);
}
.products .product-small .box-image img,
.related .product-small .box-image img,
.up-sells .product-small .box-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center;
	padding: 8px;
}

/* ── Imagen de ficha de producto en móvil: no debe tapar el
   título/precio antes de hacer scroll ──────────────────────── */
@media only screen and (max-width: 48em) {
	.woocommerce-product-gallery__image img.wp-post-image {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 40vh !important;
		object-fit: contain !important;
		display: block;
		margin: 0 auto;
	}
}

/* ── Badges de estado — cada color significa una cosa ───────── */
.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-family: var(--cs-font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: var(--cs-radius-sm);
	white-space: nowrap;
}
.cs-badge--stock { background: var(--cs-ok-bg); color: var(--cs-ok); }
.cs-badge--low   { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-badge--out   { background: var(--cs-danger-bg); color: var(--cs-danger); }
.cs-badge--new   { background: var(--cs-ink-900); color: #FFFFFF; }

/* Insignia "¡Oferta!" nativa de Flatsome oculta: la sustituye el
   bloque de precio PVP/mayorista, más preciso para este comprador. */
.badge-inner.on-sale {
	display: none !important;
}

/* ── Buscador ─────────────────────────────────────────────────
   PENDIENTE: el sistema pide un buscador ancho siempre visible,
   nunca tras un icono. Un primer intento de forzar el dropdown
   de Flatsome a quedar abierto rompía el menú principal (su JS de
   desbordamiento no lo esperaba) — revertido para no dejar la nav
   rota. Requiere una solución estructural (hook de header propio),
   no solo CSS. Ver nota en /Users/carlos/claude/audit_design.md. */
.searchform-wrapper input.search-field {
	font-family: var(--cs-font-sans);
}


/* Fondo alterno tipo marfil, para secciones que quieran destacar sobre el blanco */
.bg-ivory {
	background-color: var(--cs-surface-2) !important;
}

/* ── Home #1: barra superior de confianza ───────────────────────
   Reutiliza los tokens ya existentes (--cs-ink-900, --cs-brand),
   ningún color nuevo. Mínimo imprescindible para colocarla. */
.chronosave-topbar {
	background: var(--cs-ink-900);
}
.chronosave-topbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-sp-4);
}
.chronosave-topbar-left {
	display: flex;
	gap: var(--cs-sp-6);
}
.chronosave-topbar-left span {
	color: #EDEFF1;
	font-family: var(--cs-font-sans);
	font-size: 12px;
}
.chronosave-topbar-cta {
	color: var(--cs-brand) !important;
	font-family: var(--cs-font-sans);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.chronosave-topbar-cta:hover {
	color: var(--cs-brand-600) !important;
}
@media only screen and (max-width: 48em) {
	.chronosave-topbar-left {
		display: block;
		text-align: center;
	}
	.chronosave-topbar-left span:nth-child(2),
	.chronosave-topbar-left span:nth-child(3) {
		display: none;
	}
	.chronosave-topbar-left span {
		font-size: 11px;
		color: #B7BFC6;
	}
	.chronosave-topbar-inner {
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		padding: 6px 12px;
	}
}
/* La Top Bar nativa de Flatsome tiene una instancia aparte solo
   para móvil (clase .show-for-medium) que seguía mostrando el
   placeholder del tema aunque la de escritorio ya no aparecía. */
.header-top.show-for-medium {
	display: none !important;
}

/* ── Rejilla mínima de 12 columnas ──────────────────────────────
   Sustituye a los shortcodes [row]/[col] de Flatsome: en esta
   instalación no analizan bien el anidado (dos niveles de [row]
   dejaban "[/col][/row]" como texto literal). Incluida aquí, en el
   único archivo de tokens, no como hoja aparte. */
.cs-row {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-sp-6) 0;
}
.cs-col { padding: 0 var(--cs-sp-4); box-sizing: border-box; }
.cs-col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.cs-col-6  { flex: 0 0 50%; max-width: 50%; }
.cs-col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.cs-col-12 { flex: 0 0 100%; max-width: 100%; }
.cs-col-offset-2 { margin-left: 16.666%; }
@media only screen and (max-width: 48em) {
	.cs-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
	.cs-col-offset-2 { margin-left: 0; }
}

/* ── Home — clases mínimas de maquetación (sección 2-10) ────────
   Solo colocación: todo color/tamaño sale de los tokens --cs-*
   ya definidos arriba. Sin diseño nuevo. */
.cs-eyebrow {
	font-family: var(--cs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-brand-600);
	margin-bottom: var(--cs-sp-2);
}
.cs-eyebrow-light { color: var(--cs-brand); }
.cs-muted { color: var(--cs-ink-500); }
.cs-align-right { text-align: right; }
.cs-align-center { text-align: center; }
.cs-text-light { color: #FFFFFF; }
.cs-small-print { font-size: 12px; color: var(--cs-ink-500); }
.cs-small-print-light { color: #C9C2B4; }
.cs-center-btn { text-align: center; margin-top: var(--cs-sp-6); }

/* Hero */
.cs-hero {
	background: var(--cs-ink-900);
	background-image: url('hero-banner.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
}
.cs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15,21,25,.94) 0%, rgba(15,21,25,.82) 34%, rgba(15,21,25,.45) 62%, rgba(15,21,25,.18) 100%);
	pointer-events: none;
}
.cs-hero-inner {
	max-width: 620px;
	padding: 80px var(--cs-sp-6);
	position: relative;
	z-index: 1;
}
.cs-hero-title {
	color: #FFFFFF !important;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.15;
	margin: var(--cs-sp-2) 0 var(--cs-sp-4);
}
.cs-hero-sub {
	color: #E4E7EA;
	font-size: 1.05rem;
	margin-bottom: var(--cs-sp-6);
}
.cs-hero-actions { display: flex; gap: var(--cs-sp-3); flex-wrap: wrap; margin-bottom: var(--cs-sp-4); }
/* El botón "white" de Flatsome usa tinta oscura (pensado para
   secciones claras); aquí va sobre el hero oscuro, así que
   necesita texto/borde claros para leerse. */
.cs-hero-actions .button.white,
.cs-dark-band .button.white {
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	background: transparent !important;
}
.cs-hero-actions .button.white:hover,
.cs-dark-band .button.white:hover {
	background: #FFFFFF !important;
	color: var(--cs-ink-900) !important;
}
@media only screen and (max-width: 48em) {
	.cs-hero-inner { padding: 56px var(--cs-sp-4); }
}

/* Marcas */
.cs-brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cs-sp-4);
	margin: var(--cs-sp-6) 0;
}
.cs-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: var(--cs-sp-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	text-align: center;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.cs-brand-tile span {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	font-size: 17px;
	color: var(--cs-ink-900) !important;
}
.cs-brand-tile:hover {
	border-color: var(--cs-brand);
	box-shadow: 0 4px 14px rgba(15,21,25,.10);
	transform: translateY(-2px);
}
@media only screen and (max-width: 48em) {
	.cs-brand-grid { grid-template-columns: repeat(3, 1fr); }
	.cs-brand-tile { min-height: 100px; }
}
@media only screen and (max-width: 30em) {
	.cs-brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Garantías */
.cs-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cs-sp-6);
}
.cs-trust-item h3 { font-size: 15px; margin-bottom: var(--cs-sp-1); }
.cs-trust-item p { color: var(--cs-ink-500); font-size: 14px; margin: 0; }
@media only screen and (max-width: 48em) {
	.cs-trust-grid { grid-template-columns: 1fr; gap: var(--cs-sp-4); }
}

/* Cómo empezar */
.cs-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cs-sp-6);
}
.cs-step-num {
	font-family: var(--cs-font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--cs-brand-600);
	border: 1px solid var(--cs-line);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--cs-sp-3);
}
@media only screen and (max-width: 48em) {
	.cs-steps-grid { grid-template-columns: 1fr; gap: var(--cs-sp-6); }
}

/* Condiciones de compra */
.cs-highlight-box {
	background: var(--cs-ink-900);
	color: #FFFFFF;
	padding: var(--cs-sp-6);
	border-radius: var(--cs-radius-lg);
}
.cs-highlight-title { color: #FFFFFF; margin: var(--cs-sp-2) 0 var(--cs-sp-3); }
.cs-highlight-box p { color: #D8DCE0; }
.cs-highlight-list { margin: var(--cs-sp-4) 0; padding-left: var(--cs-sp-4); color: #E4E7EA; }
.cs-highlight-list li { margin-bottom: var(--cs-sp-2); }
.cs-highlight-list strong { color: var(--cs-brand); }

/* FAQ */
details.cs-faq {
	border-bottom: 1px solid var(--cs-line);
	padding: var(--cs-sp-4) 0;
}
details.cs-faq summary {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	cursor: pointer;
	color: var(--cs-ink-900);
}
details.cs-faq p {
	color: var(--cs-ink-500);
	margin: var(--cs-sp-3) 0 0;
}

/* Banda oscura final */
.cs-dark-band { background: var(--cs-ink-900); }
.cs-dark-band h2 { color: #FFFFFF !important; }

/* Solo aceptamos transferencia bancaria: fuera logos de tarjeta/PayPal
   del footer (elemento Payment Icons del Footer Builder de Flatsome,
   sin acceso vía API/FTP — se oculta por CSS). */
.payment-icons { display: none !important; }

/* Selector "Ver X por página" en tienda/categorías */
.chronosave-per-page {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-sp-2);
	float: right;
	margin: 0 0 var(--cs-sp-4);
}
.chronosave-per-page label {
	font-size: 13px;
	color: var(--cs-ink-500);
}
.chronosave-per-page select {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	padding: 6px 10px;
	font-size: 13px;
	color: var(--cs-ink-900);
	background: var(--cs-surface);
}
@media only screen and (max-width: 48em) {
	.chronosave-per-page { float: none; margin-bottom: var(--cs-sp-3); }
}

/* Aviso de demanda alta en Seiko */
.cs-seiko-notice {
	background: var(--cs-warn-bg);
	border-left: 3px solid var(--cs-warn);
	border-radius: var(--cs-radius-md);
	padding: var(--cs-sp-4) var(--cs-sp-6);
	margin-bottom: var(--cs-sp-6);
}
.cs-seiko-notice__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-warn);
	margin-bottom: var(--cs-sp-2);
}
.cs-seiko-notice__title { font-weight: 600; color: var(--cs-ink-900); margin: 0 0 var(--cs-sp-2); }
.cs-seiko-notice__body { color: var(--cs-ink-700); font-size: 14px; margin: 0 0 var(--cs-sp-4); }
.cs-seiko-notice__actions { display: flex; align-items: center; gap: var(--cs-sp-4); flex-wrap: wrap; }
.cs-seiko-notice__whatsapp { font-size: 13px; color: var(--cs-ink-700); }

/* Catálogos PDF por marca */
.cs-catalog-locked {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	padding: var(--cs-sp-8) var(--cs-sp-6);
	background: var(--cs-surface-2);
	border-radius: var(--cs-radius-lg);
}
.cs-catalog-locked__title {
	font-weight: 600;
	font-size: 17px;
	color: var(--cs-ink-900);
	margin-bottom: var(--cs-sp-2);
}
.cs-catalog-locked p { color: var(--cs-ink-500); }
.cs-catalog-locked .button { margin-top: var(--cs-sp-4); }

.cs-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cs-sp-4);
}
.cs-catalog-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cs-sp-3);
	padding: var(--cs-sp-6) var(--cs-sp-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
	text-align: center;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.cs-catalog-card:hover {
	border-color: var(--cs-brand);
	box-shadow: 0 4px 14px rgba(15,21,25,.10);
}
.cs-catalog-card__brand {
	font-weight: 600;
	font-size: 16px;
	color: var(--cs-ink-900);
}
.cs-catalog-card__btn.button {
	font-size: 13px;
	min-height: 38px;
	padding: 0 var(--cs-sp-4);
}
@media only screen and (max-width: 48em) {
	.cs-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 30em) {
	.cs-catalog-grid { grid-template-columns: 1fr; }
}