/* =====================================================================
   CIP CDSM TARAPOTO — Sección "Capítulos" (index.php #capitulos)
   ---------------------------------------------------------------------
   Todas las clases llevan el prefijo .cap- para no afectar al resto.
   Usa los tokens de redesign.css (--cip-*), con valores de respaldo.
   ===================================================================== */

.cap-section {
	--cap-red: var(--cip-red, #E31E24);
	--cap-red-dark: var(--cip-red-darker, #A3141A);
	--cap-red-soft: var(--cip-red-soft, rgba(227, 30, 36, 0.08));
	--cap-gold: var(--cip-gold, #D7B56D);
	--cap-gold-ink: var(--cip-gold-ink, #8A6D2F);
	--cap-gold-soft: var(--cip-gold-soft, rgba(215, 181, 109, 0.14));
	--cap-ink: var(--cip-ink, #2A2A29);
	--cap-text: var(--cip-text, #4A4A48);
	--cap-muted: var(--cip-muted, #6B6A66);
	--cap-line: var(--cip-line, #E6E3DC);
	--cap-surface-2: var(--cip-surface-2, #F7F6F2);
	--cap-head: var(--cip-font-head, 'Poppins', 'Open Sans', Arial, sans-serif);
	--cap-body: var(--cip-font-body, 'Inter', 'Open Sans', Arial, sans-serif);
	--cap-ease: var(--cip-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	position: relative;
	margin: 0;
	padding: 80px 0 88px;
	background:
		linear-gradient(180deg, #FFFFFF 0%, var(--cap-surface-2) 100%);
	border-top: 1px solid var(--cap-line);
	font-family: var(--cap-body);
	color: var(--cap-text);
}
.cap-section *, .cap-section *::before, .cap-section *::after { box-sizing: border-box; }

/* ---------- Encabezado ---------- */
.cap-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 44px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--cap-line);
}
.cap-head-text { max-width: 680px; }
.cap-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cap-red-soft);
	color: var(--cap-red);
	font-family: var(--cap-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.cap-head h2 {
	margin: 14px 0 10px;
	font-family: var(--cap-head);
	font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cap-ink);
}
.cap-head h2 span { color: var(--cap-red); }
.cap-head p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--cap-muted);
}
.cap-head-stat {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	border-radius: 16px;
	background: var(--cap-ink);
	color: #FFF;
	box-shadow: 0 14px 30px rgba(42, 42, 41, 0.18);
}
.cap-head-stat strong {
	font-family: var(--cap-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--cap-gold);
}
.cap-head-stat span {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* ---------- Cuadrícula ---------- */
.cap-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
}

.cap-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 22px 0;
	background: #FFF;
	border: 1px solid var(--cap-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(42, 42, 41, 0.05), 0 2px 8px rgba(42, 42, 41, 0.04);
	overflow: hidden;
	transition: transform 0.25s var(--cap-ease), box-shadow 0.25s var(--cap-ease), border-color 0.25s var(--cap-ease);
}
.cap-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cap-red) 0%, var(--cap-gold) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--cap-ease);
}
.cap-card:hover {
	transform: translateY(-4px);
	border-color: rgba(227, 30, 36, 0.22);
	box-shadow: 0 16px 36px rgba(42, 42, 41, 0.12);
}
.cap-card:hover::before { transform: scaleX(1); }

.cap-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.cap-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cap-red-soft);
	color: var(--cap-red);
	font-size: 21px;
	transition: background-color 0.25s var(--cap-ease), color 0.25s var(--cap-ease);
}
.cap-card:hover .cap-icon { background: var(--cap-red); color: #FFF; }
.cap-num {
	font-family: var(--cap-head);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--cap-line);
	transition: color 0.25s var(--cap-ease);
}
.cap-card:hover .cap-num { color: var(--cap-gold); }

.cap-kicker {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cap-gold-ink);
}
.cap-card h3 {
	margin: 0 0 10px;
	font-family: var(--cap-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cap-ink);
	letter-spacing: -0.005em;
}
.cap-summary {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cap-text);
}

/* ---------- Mensaje desplegable ---------- */
.cap-more { margin: 0 0 18px; }
.cap-more summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--cap-red);
	border-radius: 6px;
}
.cap-more summary::-webkit-details-marker { display: none; }
.cap-more summary::marker { content: ""; }
.cap-more summary:hover { color: var(--cap-red-dark); }
.cap-more summary:focus-visible { outline: 3px solid rgba(227, 30, 36, 0.3); outline-offset: 3px; }
.cap-more summary i { font-size: 10px; transition: transform 0.25s var(--cap-ease); }
.cap-more[open] summary i { transform: rotate(180deg); }
.cap-more .cap-more-close { display: none; }
.cap-more[open] .cap-more-open { display: none; }
.cap-more[open] .cap-more-close { display: inline; }
.cap-more p {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--cap-gold);
	border-radius: 0 10px 10px 0;
	background: var(--cap-gold-soft);
	font-size: 13px;
	line-height: 1.65;
	color: var(--cap-text);
	text-align: left;
	animation: cap-in 0.3s var(--cap-ease);
}
@keyframes cap-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Presidente ---------- */
.cap-president {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: auto -22px 0;
	padding: 14px 22px;
	border-top: 1px solid var(--cap-line);
	background: var(--cap-surface-2);
}
.cap-avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cap-ink);
	color: var(--cap-gold);
	font-family: var(--cap-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 0 0 3px #FFF, 0 0 0 4px var(--cap-gold);
}
.cap-president small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cap-muted);
}
.cap-president strong {
	display: block;
	font-family: var(--cap-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cap-ink);
}
.cap-president.is-pending .cap-avatar { background: #E9E5DB; color: var(--cap-muted); box-shadow: none; }
.cap-president.is-pending strong { color: var(--cap-muted); font-style: italic; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.cap-section { padding: 64px 0 70px; }
	.cap-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
	.cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 575px) {
	.cap-section { padding: 52px 0 56px; }
	.cap-head p { font-size: 15px; }
	.cap-head-stat { width: 100%; padding: 14px 18px; }
	.cap-head-stat strong { font-size: 34px; }
	.cap-grid { grid-template-columns: 1fr; gap: 14px; }
	.cap-card { padding: 20px 18px 0; }
	.cap-president { margin: auto -18px 0; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.cap-card, .cap-card::before, .cap-icon, .cap-num, .cap-more summary i, .cap-more p { transition: none; animation: none; }
	.cap-card:hover { transform: none; }
}