/*
 * Piezas que se repiten en los bloques de datos y las fichas: tarjeta de
 * prenda, píldoras de «otros sectores / otras normas», cabecera de sección
 * con enlace e íconos pintados con máscara.
 */

/* Ícono SVG del plugin, del color del texto. */
.inc-icono {
	flex: none;
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--inc-icono) center / contain no-repeat;
	mask: var(--inc-icono) center / contain no-repeat;
}

/* Cabecera de sección: título a la izquierda, enlace a la derecha. */
.inc-dcab {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.inc-dcab__titulo {
	margin: 0;
	font-size: clamp(28px, 2.8vw, 38px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -.015em;
}

.inc-dcab__enlace {
	display: flex;
	align-items: center;
	height: 46px;
	padding: 0 20px;
	border: 1.5px solid #141614;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #141614;
	transition: background-color .25s, color .25s;
}

.inc-dcab__enlace:hover { background: #141614; color: #fff; }

.inc-dcab__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.inc-dcab__acciones a {
	display: flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1.5px solid #141614;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	color: #141614;
}

.inc-dcab__acciones a:hover { background: #141614; color: #fff; }

/* Rejilla de tarjetas de prenda. */
.inc-rejilla-prendas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}

.inc-rejilla-prendas--ancha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.inc-tprenda {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	padding: 12px 12px 18px;
	text-decoration: none;
	color: #141614;
	transition: box-shadow .3s, background-color .3s;
}

.inc-tprenda:hover { box-shadow: 0 20px 40px -24px rgba(20, 22, 20, .35); color: #141614; }

.inc-tprenda__foto {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #EEEFEC;
}

.inc-tprenda__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.inc-tprenda__spec { font-size: 12px; font-weight: 600; color: #666D67; margin: 14px 6px 4px; }
.inc-tprenda__nombre { font-size: 18px; font-weight: 600; margin: 0 6px 4px; }
.inc-tprenda__enlace { font-size: 13px; font-weight: 700; color: #367B10; margin: 6px 6px 0; }

/* Ficha de norma: sin especificación. */
.inc-tprenda--norma .inc-tprenda__nombre { margin-top: 14px; }
.inc-tprenda--norma .inc-tprenda__enlace { margin-top: 4px; }

/* «Más de la línea» en la ficha de prenda. */
.inc-tprenda--relacion .inc-tprenda__nombre { font-size: 17px; margin-top: 14px; }
.inc-tprenda--relacion .inc-tprenda__enlace { margin-top: 0; }

/* Página de línea: tarjeta gris con descripción. */
.inc-tprenda--linea { background: #EEEFEC; padding: 12px 12px 20px; }
.inc-tprenda--linea:hover { background: #E3E6E1; box-shadow: none; }
.inc-tprenda--linea .inc-tprenda__spec { margin: 16px 8px 4px; }
.inc-tprenda--linea .inc-tprenda__nombre { font-size: 20px; margin: 0 8px 6px; }
.inc-tprenda__desc { font-size: 14px; line-height: 1.45; color: #4E534F; margin: 0 8px; }
.inc-tprenda--linea .inc-tprenda__enlace { margin: 12px 8px 0; }

/*
 * Celular: dos prendas por fila en todas las rejillas (sector, norma, línea,
 * «Más de la línea»). Una por pantalla hacía las páginas eternas.
 */
@media (max-width: 600px) {
	.inc-rejilla-prendas,
	.inc-rejilla-prendas--ancha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.inc-tprenda,
	.inc-tprenda--linea { padding: 6px 6px 12px; border-radius: 14px; }
	.inc-tprenda__foto { border-radius: 9px; }
	.inc-tprenda__spec,
	.inc-tprenda--linea .inc-tprenda__spec { font-size: 11px; line-height: 1.3; margin: 10px 4px 3px; }
	.inc-tprenda__nombre,
	.inc-tprenda--relacion .inc-tprenda__nombre,
	.inc-tprenda--linea .inc-tprenda__nombre { font-size: 15px; line-height: 1.2; margin: 0 4px 3px; }
	.inc-tprenda--norma .inc-tprenda__nombre,
	.inc-tprenda--relacion .inc-tprenda__nombre { margin-top: 10px; }
	.inc-tprenda__desc { display: none; }
	.inc-tprenda__enlace,
	.inc-tprenda--linea .inc-tprenda__enlace { font-size: 12px; margin: 4px 4px 0; }
}

/* «Otros sectores», «Otras normas». */
.inc-otros { background: #fff; padding: clamp(48px, 5vw, 72px) 0; }

.inc-otros__dentro {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.inc-otros__titulo {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 30px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -.015em;
}

.inc-otros__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.inc-otros__lista a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	background: #EEEFEC;
	text-decoration: none;
	color: #141614;
	font-weight: 600;
	font-size: 15px;
	transition: background-color .25s, color .25s;
}

.inc-otros__lista a:hover { background: #141614; color: #fff; }
.inc-otros__lista small { font-size: 13px; font-weight: 500; opacity: .7; }

/* Bloque de texto largo bajo las fichas (contenido ampliado). */
.inc-largo { background: #fff; padding: clamp(16px, 2vw, 32px) 0 0; }

.inc-largo__dentro {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 clamp(20px, 3vw, 32px);
	font-size: 17px;
	line-height: 1.7;
	color: #2A2E2B;
}

.inc-largo__dentro > * { margin: 0 0 18px; }
.inc-largo__dentro h2 { margin: 36px 0 12px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: #141614; }
.inc-largo__dentro h3 { margin: 28px 0 10px; font-size: 20px; line-height: 1.25; color: #141614; }
.inc-largo__dentro a { color: #367B10; font-weight: 600; }
.inc-largo__dentro h4 { margin: 20px 0 8px; font-size: 18px; line-height: 1.3; color: #141614; }
.inc-largo__dentro ul,
.inc-largo__dentro ol { padding-left: 22px; }
.inc-largo__dentro li { margin-bottom: 8px; }

.inc-largo__dentro .inc-largo__titulo {
	margin: 0 0 24px;
	font-size: clamp(28px, 2.8vw, 38px);
	line-height: 1.1;
	letter-spacing: -.015em;
}

.inc-largo__fecha { margin-top: -12px !important; font-size: 14px; color: #666D67; }

.inc-largo__lee {
	margin: 36px 0 0;
	padding: 22px 24px;
	border-radius: 14px;
	background: #F3F3F1;
}

.inc-largo__lee > span { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #367B10; }
.inc-largo__lee ul { margin: 0; padding-left: 20px; }
.inc-largo__lee li { margin: 0 0 6px; font-size: 16px; }

/* Fin de la sección: aire antes de lo que sigue. */
.inc-largo { padding-bottom: clamp(48px, 5vw, 72px); }