/* =====================================================================
   CIP CDSM TARAPOTO — Formalización de Colegiados
   (formalizacion-colegiados.php). Prefijo .fz para no afectar al resto.
   Usa los tokens de redesign.css (--cip-*), con valores de respaldo.
   ===================================================================== */

.fz {
	--fz-red: var(--cip-red, #E31E24);
	--fz-red-dark: var(--cip-red-darker, #A3141A);
	--fz-red-soft: var(--cip-red-soft, rgba(227, 30, 36, 0.08));
	--fz-gold: var(--cip-gold, #D7B56D);
	--fz-gold-ink: var(--cip-gold-ink, #8A6D2F);
	--fz-gold-soft: var(--cip-gold-soft, rgba(215, 181, 109, 0.14));
	--fz-ink: var(--cip-ink, #2A2A29);
	--fz-ink-3: var(--cip-ink-3, #171716);
	--fz-text: var(--cip-text, #4A4A48);
	--fz-muted: var(--cip-muted, #6B6A66);
	--fz-line: var(--cip-line, #E6E3DC);
	--fz-surface-2: var(--cip-surface-2, #F7F6F2);
	--fz-head: var(--cip-font-head, 'Poppins', 'Open Sans', Arial, sans-serif);
	--fz-body: var(--cip-font-body, 'Inter', 'Open Sans', Arial, sans-serif);
	--fz-ease: var(--cip-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	font-family: var(--fz-body);
	color: var(--fz-text);
}
.fz *, .fz *::before, .fz *::after { box-sizing: border-box; }
.fz h1, .fz h2, .fz h3 { font-family: var(--fz-head); color: var(--fz-ink); letter-spacing: -0.01em; }
.fz p { margin: 0; }

/* ---------- Botones ---------- */
.fz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 12px;
	border: 2px solid transparent;
	font-family: var(--fz-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform 0.2s var(--fz-ease), box-shadow 0.2s var(--fz-ease), background-color 0.2s var(--fz-ease), color 0.2s var(--fz-ease);
}
.fz-btn:hover { transform: translateY(-2px); }
.fz-btn-primary { background: var(--fz-red); color: #FFF !important; box-shadow: 0 10px 24px rgba(227, 30, 36, 0.35); }
.fz-btn-primary:hover { background: var(--fz-red-dark); }
.fz-btn-wa { background: #25D366; color: #FFF !important; }
.fz-btn-wa:hover { background: #1EBE5A; box-shadow: 0 10px 22px rgba(37, 211, 102, 0.3); }
.fz-btn-outline { border-color: var(--fz-red); color: var(--fz-red) !important; background: #FFF; }
.fz-btn-outline:hover { background: var(--fz-red); color: #FFF !important; }
.fz-btn-block { width: 100%; margin-top: auto; }

/* ---------- Cabecera ---------- */
.fz-hero {
	position: relative;
	padding: 150px 0 72px;
	background-color: var(--fz-ink-3);
	background-size: cover;
	background-position: center;
	color: #FFF;
	overflow: hidden;
}
.fz-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 15%, rgba(215, 181, 109, 0.22), transparent 45%),
		linear-gradient(115deg, rgba(23, 23, 22, 0.97) 0%, rgba(42, 42, 41, 0.92) 55%, rgba(163, 20, 26, 0.85) 100%);
}
.fz-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--fz-red), var(--fz-gold), var(--fz-red));
}
.fz-hero > .container { position: relative; z-index: 1; }

.fz-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}
.fz-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.fz-breadcrumb a:hover { color: var(--fz-gold); }
.fz-breadcrumb i { font-size: 9px; opacity: 0.6; }
.fz-breadcrumb span { color: var(--fz-gold); font-weight: 600; }

.fz-hero-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
	align-items: center;
}
.fz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid rgba(215, 181, 109, 0.5);
	border-radius: 999px;
	color: var(--fz-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fz-hero h1 {
	margin: 16px 0 14px;
	color: #FFF;
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
	letter-spacing: 0;
	font-weight: 700;
	line-height: 1.12;
}
.fz-hero h1 span { color: var(--fz-gold); }
.fz-lead {
	max-width: 600px;
	margin-bottom: 26px !important;
	color: rgba(255, 255, 255, 0.8);
	font-size: 16.5px;
	line-height: 1.7;
}
.fz-lead strong { color: #FFF; }
.fz-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.fz-hero-card {
	padding: 24px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}
.fz-hero-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fz-hero-card-head img { width: 44px; height: 44px; object-fit: contain; }
.fz-hero-card-head b { display: block; font-family: var(--fz-head); font-size: 15px; color: #FFF; }
.fz-hero-card-head small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.fz-hero-card ul { list-style: none; margin: 0; padding: 0; }
.fz-hero-card li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.fz-hero-card li + li { border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.fz-hero-card li > i {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(215, 181, 109, 0.16);
	color: var(--fz-gold);
	font-size: 16px;
}
.fz-hero-card strong { display: block; color: #FFF; font-family: var(--fz-head); font-size: 15px; font-weight: 600; }
.fz-hero-card span { display: block; color: rgba(255, 255, 255, 0.65); font-size: 13px; }

/* ---------- Secciones ---------- */
.fz-section { padding: 76px 0; background: #FFF; }
.fz-section-alt { background: var(--fz-surface-2); border-top: 1px solid var(--fz-line); border-bottom: 1px solid var(--fz-line); }
.fz-section-tight { padding: 44px 0; }
.fz-kicker {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--fz-red);
	font-family: var(--fz-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.fz-section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.fz-section-head h2,
.fz-intro-text h2 {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	font-weight: 700;
	line-height: 1.2;
}
.fz-section-head h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 3px;
	background: var(--fz-gold);
}
.fz-section-head p { color: var(--fz-muted); font-size: 16px; }

/* ---------- ¿Qué es? ---------- */
.fz-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.fz-intro-text p { font-size: 16px; line-height: 1.75; }
.fz-intro-text p + p { margin-top: 14px; }
.fz-benefits { display: grid; gap: 14px; }
.fz-benefit {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--fz-line);
	border-left: 4px solid var(--fz-red);
	border-radius: 14px;
	background: #FFF;
	transition: box-shadow 0.25s var(--fz-ease), transform 0.25s var(--fz-ease);
}
.fz-benefit:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(42, 42, 41, 0.08); }
.fz-benefit-icon {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fz-red-soft);
	color: var(--fz-red);
	font-size: 18px;
}
.fz-benefit h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.fz-benefit p { font-size: 14px; line-height: 1.6; }

/* ---------- Pasos: línea de proceso ---------- */
.fz-process {
	--fz-node: 84px;
	--fz-gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fz-gap);
}
/* Barra que une los pasos (del centro del primero al centro del último) */
.fz-process::before {
	content: "";
	position: absolute;
	top: calc(var(--fz-node) / 2 - 3px);
	left: calc((100% - 3 * var(--fz-gap)) / 8);
	right: calc((100% - 3 * var(--fz-gap)) / 8);
	height: 6px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--fz-red) 0%, var(--fz-red) 62%, var(--fz-gold) 100%);
}
.fz-proc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* Flecha entre pasos, sobre la barra */
.fz-proc:not(:last-child)::after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	z-index: 2;
	top: calc(var(--fz-node) / 2);
	right: calc(var(--fz-gap) / -2);
	width: 30px;
	height: 30px;
	margin-right: -15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFF;
	border: 2px solid var(--fz-red);
	color: var(--fz-red);
	font-size: 11px;
	transform: translateY(-50%);
	box-shadow: 0 4px 10px rgba(42, 42, 41, 0.12);
}
.fz-proc:nth-child(3)::after { border-color: var(--fz-gold); color: var(--fz-gold-ink); }

.fz-proc-node {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: var(--fz-node);
	height: var(--fz-node);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fz-red);
	color: #FFF;
	font-size: 30px;
	box-shadow: 0 0 0 7px var(--fz-surface-2), 0 14px 28px rgba(227, 30, 36, 0.32);
	transition: transform 0.25s var(--fz-ease);
}
.fz-proc-num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fz-ink);
	color: var(--fz-gold);
	font-family: var(--fz-head);
	font-size: 15px;
	font-weight: 700;
	border: 3px solid var(--fz-surface-2);
}
.fz-proc.is-goal .fz-proc-node {
	background: radial-gradient(circle at 35% 30%, #E9CF92 0%, var(--fz-gold) 55%, #B8954A 100%);
	color: #5E4718;
	box-shadow: 0 0 0 7px var(--fz-surface-2), 0 0 0 9px rgba(215, 181, 109, 0.45), 0 14px 28px rgba(184, 149, 74, 0.35);
}
.fz-proc.is-goal .fz-proc-num { background: var(--fz-red); color: #FFF; }

.fz-proc-body {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	margin-top: 26px;
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFF;
	border: 1px solid var(--fz-line);
	border-top: 3px solid var(--fz-red);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(42, 42, 41, 0.04);
	transition: box-shadow 0.25s var(--fz-ease), transform 0.25s var(--fz-ease);
}
/* Pequeña pestaña que apunta al círculo */
.fz-proc-body::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	margin-left: -9px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid var(--fz-red);
}
.fz-proc.is-goal .fz-proc-body { border-top-color: var(--fz-gold); background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%); }
.fz-proc.is-goal .fz-proc-body::before { border-bottom-color: var(--fz-gold); }
.fz-proc:hover .fz-proc-node { transform: scale(1.06); }
.fz-proc:hover .fz-proc-body { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(42, 42, 41, 0.1); }

.fz-proc-step {
	margin-bottom: 6px;
	color: var(--fz-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.fz-proc.is-goal .fz-proc-step { color: var(--fz-gold-ink); }
.fz-proc-body h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.fz-proc-body p { margin-bottom: 16px !important; font-size: 14px; line-height: 1.6; }
.fz-proc-body a { color: var(--fz-red); font-weight: 600; }
.fz-proc-out {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(30, 107, 58, 0.08);
	color: #1E6B3A;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}
.fz-proc.is-goal .fz-proc-out { background: var(--fz-gold-soft); color: var(--fz-gold-ink); }


/* ---------- Aviso ---------- */
.fz-warn {
	display: flex;
	gap: 18px;
	padding: 24px 26px;
	border-radius: 18px;
	background: #FFF;
	border: 1px solid rgba(227, 30, 36, 0.2);
	border-left: 5px solid var(--fz-red);
	box-shadow: 0 6px 20px rgba(42, 42, 41, 0.05);
}
.fz-warn-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fz-red-soft);
	color: var(--fz-red);
	font-size: 20px;
}
.fz-warn h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.fz-warn p { font-size: 15px; line-height: 1.7; }

/* ---------- Contacto ---------- */
.fz-contact {
	position: relative;
	padding: 76px 0;
	background:
		radial-gradient(circle at 10% 0%, rgba(215, 181, 109, 0.18), transparent 40%),
		linear-gradient(135deg, var(--fz-red) 0%, var(--fz-red-dark) 100%);
	color: #FFF;
}
.fz-section-head-light .fz-kicker { color: var(--fz-gold); }
.fz-section-head-light h2 { color: #FFF; }
.fz-section-head-light p { color: rgba(255, 255, 255, 0.8); }
.fz-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.fz-contact-card { display: flex; flex-direction: column; }
.fz-contact-card .fz-contact-actions { margin-top: auto; }

/* Horario de atención */
.fz-schedule { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.fz-schedule li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--fz-surface-2);
	border: 1px solid var(--fz-line);
}
.fz-schedule span { color: var(--fz-ink); font-size: 14px; font-weight: 600; }
.fz-schedule strong { color: var(--fz-red); font-family: var(--fz-head); font-size: 14px; font-weight: 600; text-align: right; line-height: 1.5; }
.fz-schedule li.is-closed strong { color: var(--fz-muted); font-weight: 500; }
.fz-contact-card {
	padding: 26px 22px 22px;
	border-radius: 18px;
	background: #FFF;
	color: var(--fz-text);
	text-align: center;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s var(--fz-ease);
}
.fz-contact-card:hover { transform: translateY(-4px); }
.fz-contact-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fz-ink);
	color: var(--fz-gold);
	font-size: 20px;
}
.fz-contact-card small { display: block; color: var(--fz-gold-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fz-contact-tel { display: block; margin: 4px 0 6px; color: var(--fz-ink) !important; font-family: var(--fz-head); font-size: 26px; font-weight: 700; text-decoration: none !important; letter-spacing: 0.02em; }
.fz-contact-card p { margin-bottom: 16px; font-size: 14px; color: var(--fz-muted); }
.fz-contact-actions { display: flex; gap: 8px; }
.fz-contact-actions a {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s var(--fz-ease);
}
.fz-contact-actions a:first-child { background: var(--fz-surface-2); color: var(--fz-ink) !important; border: 1px solid var(--fz-line); }
.fz-contact-actions a:first-child:hover { background: #ECE9E1; }
.fz-contact-actions a:last-child { background: #25D366; color: #FFF !important; }
.fz-contact-actions a:last-child:hover { background: #1EBE5A; }
.fz-contact-address { margin-top: 28px !important; text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.fz-contact-address i { color: var(--fz-gold); margin-right: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.fz-hero { padding: 130px 0 56px; }
	.fz-hero-grid, .fz-intro { grid-template-columns: 1fr; gap: 32px; }
	/* Línea de proceso vertical */
	.fz-process { --fz-node: 72px; grid-template-columns: 1fr; gap: 0; max-width: 640px; margin: 0 auto; }
	.fz-process::before { display: none; }
	.fz-proc { flex-direction: row; align-items: stretch; text-align: left; gap: 22px; padding-bottom: 26px; }
	.fz-proc:last-child { padding-bottom: 0; }
	.fz-proc:not(:last-child)::before {
		content: "";
		position: absolute;
		top: var(--fz-node);
		bottom: 0;
		left: calc(var(--fz-node) / 2 - 3px);
		width: 6px;
		background: var(--fz-red);
	}
	.fz-proc:nth-child(3)::before { background: linear-gradient(180deg, var(--fz-red), var(--fz-gold)); }
	.fz-proc:not(:last-child)::after {
		content: "\f078";
		top: auto;
		bottom: 13px;
		right: auto;
		left: calc(var(--fz-node) / 2);
		margin: 0 0 -15px -15px;
		transform: none;
	}
	.fz-proc-node { font-size: 26px; }
	.fz-proc-body { margin-top: 0; align-items: flex-start; border-top-width: 1px; border-left: 3px solid var(--fz-red); }
	.fz-proc.is-goal .fz-proc-body { border-left-color: var(--fz-gold); }
	.fz-proc-body::before {
		top: 26px;
		left: -12px;
		margin-left: 0;
		border-top: 9px solid transparent;
		border-bottom: 9px solid transparent;
		border-right: 9px solid var(--fz-red);
		border-left: 0;
	}
	.fz-proc.is-goal .fz-proc-body::before { border-bottom-color: transparent; border-right-color: var(--fz-gold); }
	.fz-proc:hover .fz-proc-body { transform: none; }
	.fz-contact-grid { grid-template-columns: 1fr; max-width: 460px; }
	.fz-section, .fz-contact { padding: 60px 0; }
}
@media (max-width: 575px) {
	.fz-hero { padding: 118px 0 44px; }
	.fz-lead { font-size: 15.5px; }
	.fz-hero-actions .fz-btn { flex: 1 1 100%; }
	.fz-hero-card { padding: 18px; }
	.fz-process { --fz-node: 58px; }
	.fz-proc { gap: 14px; }
	.fz-proc-node { font-size: 21px; box-shadow: 0 0 0 5px var(--fz-surface-2), 0 10px 20px rgba(227, 30, 36, 0.28); }
	.fz-proc-num { width: 26px; height: 26px; font-size: 13px; top: -6px; right: -8px; }
	.fz-proc-body { padding: 18px 16px 16px; }
	.fz-proc-body::before { top: 20px; }
	.fz-section, .fz-contact { padding: 48px 0; }
	.fz-section-tight { padding: 32px 0; }
	.fz-section-head { margin-bottom: 28px; }
	.fz-warn { flex-direction: column; gap: 12px; padding: 20px; }
	.fz-contact-tel { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.fz * { transition: none !important; }
	.fz-proc:hover .fz-proc-node, .fz-proc:hover .fz-proc-body, .fz-benefit:hover, .fz-contact-card:hover, .fz-btn:hover { transform: none; }
}