/* ═══════════════════════════════════════════════════════════════════
   CATÁLOGOS (/catalogos) · prefijo ct-
   Se carga después de styles.css y fabricantes.css.
   Cabecera con el fondo de la v2 (el de .pt-hero--solid en tiendas.css)
   y rejilla de portadas de catálogo a 650×433.
   ═══════════════════════════════════════════════════════════════════ */

/* ── cabecera: dos cifras con su botón (catálogos | fabricantes) ── */
.ct-hero {
	padding-block:clamp(48px,6vw,104px);
	background:radial-gradient(70vw 70vw at 78% 16%,rgba(0,159,227,.25),transparent 60%),var(--dh-bg);
	color:#fff;
}
.ct-hero__k {
	text-align:center;
	font-size:clamp(12px,.9vw,14px);
	font-weight:600;
	letter-spacing:.34em;
	text-transform:uppercase;
	color:#C7C3BA;
}
.ct-hero__g {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	margin-top:clamp(32px,4vw,64px);
}
.ct-hero__c {
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding-inline:clamp(16px,4vw,72px);
}
.ct-hero__c + .ct-hero__c {
	border-left:1px solid rgba(255,255,255,.18);
}
/* cifra en ámbar (8,9:1 sobre --dh-bg) y su etiqueta debajo */
.ct-hero__n b {
	display:block;
	font-size:clamp(64px,7.5vw,136px);
	line-height:.95;
	font-weight:800;
	letter-spacing:-.03em;
	color:var(--dh-amber);
}
.ct-hero__n span {
	display:block;
	margin-top:clamp(6px,.8vw,12px);
	font-size:clamp(20px,1.9vw,32px);
	line-height:1.2;
	font-weight:700;
	color:#F6F3EC;
}
.ct-hero__p {
	max-width:440px;
	margin-top:clamp(12px,1.2vw,18px);
	font-size:clamp(15px,1vw,17px);
	line-height:1.6;
	color:#C7C3BA;
}
.ct-hero__c .btn {
	margin-top:clamp(20px,2vw,32px);
}

/* ── rejilla de portadas ── */
.ct-cat {
	background:var(--bg2);
}
.ct-head {
	max-width:1120px;
	margin-inline:auto;
	text-align:center;
}
.ct-lead {
	max-width:760px;
	margin:clamp(10px,1vw,16px) auto 0;
	text-align:center;
	text-wrap:balance;
}
/* a ancho completo (rompe el contenedor de 1440, como la banda de fabricantes), con el margen
   lateral de la página; siempre 5 columnas en escritorio: las portadas crecen con la pantalla */
.ct-grid {
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:clamp(12px,1.4vw,24px);
	margin-top:clamp(32px,3.5vw,56px);
	padding-inline:var(--pad);
}
/* proporción fija de 650×433: las portadas que no la tienen se recortan */
.ct-grid img {
	width:100%;
	height:auto;
	aspect-ratio:650/433;
	object-fit:cover;
	border-radius:10px;
	background:#fff;
	box-shadow:0 1px 2px rgba(0,48,91,.06),0 8px 24px rgba(0,48,91,.08);
}

@media (max-width:1180px) {
	.ct-grid {
		grid-template-columns:repeat(4,minmax(0,1fr));
	}
}
@media (max-width:900px) {
	.ct-grid {
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}
@media (max-width:760px) {
	.ct-hero__g {
		grid-template-columns:1fr;
	}
	.ct-hero__c + .ct-hero__c {
		border-left:0;
		border-top:1px solid rgba(255,255,255,.18);
		margin-top:36px;
		padding-top:36px;
	}
}
@media (max-width:600px) {
	.ct-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}