.maturity-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 600px) {
	.maturity-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 900px) {
	.maturity-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1200px) {
	.maturity-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Hero / Banner styles (copiado desde /css/styles.css para coherencia local) */
.hero-banner{
	background-image: linear-gradient(rgba(7,18,34,0.45), rgba(7,18,34,0.25)), url('/assets/images/data-analytics-banner.svg');
	background-size: cover;
	background-position: center center;
	color: #fff;
	padding: 56px 0;
}
.hero-overlay{background: linear-gradient(180deg, rgba(7,18,34,0.35), rgba(7,18,34,0.15));padding:28px 0}
.hero-content{max-width:980px;margin:0 auto;text-align:center;padding:12px}
.hero-title{font-size:2.2rem;margin:0 0 10px;font-weight:800}
.hero-sub{font-size:1.05rem;max-width:880px;margin:0 auto;color:rgba(255,255,255,0.9)}
.hero-cta{display:inline-block;margin-top:16px;padding:12px 18px;border-radius:999px;background:#fff;color:#0b1220;font-weight:700;text-decoration:none}

/* Value list and small utilities */
.value-list ul{list-style:disc;margin-left:18px}
.value-list li{margin-bottom:8px}

@media (max-width:700px){
	.hero-banner{padding:36px 0}
	.hero-title{font-size:1.6rem}
}

@media (min-width:1200px){
	.hero-title{font-size:2.6rem}
}

/* Modern layout & interactive mini-dashboard */
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:center;text-align:left}
.hero-badge{width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,0.06);display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
.hero-badge img{width:30px;height:30px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35))}
.hero-copy .hero-sub{margin-top:6px}
.hero-actions{margin-top:18px;display:flex;gap:10px;align-items:center}
.hero-ghost{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.95);text-decoration:none}

.hero-demo{display:flex;justify-content:flex-end}
.mini-dashboard{display:grid;grid-template-columns:repeat(1,1fr);gap:10px;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));padding:12px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.35)}
.metric-card{padding:12px 14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.metric-value{font-weight:800;font-size:1.6rem;color:#fff}
.metric-label{font-size:0.9rem;color:rgba(255,255,255,0.85)}
.sparkline{width:100%;height:34px}
.sparkline polyline{stroke:#7dd3fc;stroke-opacity:0.95;stroke-width:2;fill:none;stroke-linecap:round}

.metric-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(2,6,23,0.45)}

@media (max-width:900px){
	.hero-grid{grid-template-columns:1fr}
	.hero-demo{justify-content:center}
}
.maturity-card ul {
	margin: 8px 0 0 0;
	padding-left: 0;
	list-style: none;
	font-size: 0.97em;
	color: #64748B;
	transition: max-height 0.3s, opacity 0.3s;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}
.maturity-card:hover ul, .maturity-card:focus-within ul {
	max-height: 200px;
	opacity: 1;
}
.maturity-card li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 2px;
}
.maturity-card li:before {
	content: '\2022';
	color: #2563eb;
	font-size: 1.1em;
	margin-right: 4px;
	line-height: 1.2;
}
.maturity-card {
	cursor: pointer;
	transition: box-shadow 0.2s, border-color 0.2s;
	border: 1.5px solid #E2E8F0;
}
.maturity-card:hover, .maturity-card:focus-within {
	box-shadow: 0 4px 18px rgba(37,99,235,0.10);
	border-color: #2563eb;
}

/* Design tokens adapted from the original project (HSL variables) */
:root{
	--background: hsl(0 0% 100%);
	--foreground: hsl(222.2 84% 4.9%);
	--card: hsl(0 0% 100%);
	--card-foreground: hsl(222.2 84% 4.9%);
	--primary: hsl(222.2 47.4% 11.2%);
	--primary-foreground: hsl(210 40% 98%);
	--muted: hsl(215.4 16.3% 46.9%);
	--border: hsl(214.3 31.8% 91.4%);
	--radius: 0.5rem;
}

*{box-sizing:border-box}
body{
	font-family: Inter, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
	background: #ffffff;
	color: #0b1220;
	margin:0;padding:24px;-webkit-font-smoothing:antialiased
}
.container{max-width:980px;margin:0 auto}
header h1{margin:0 0 6px;font-size:1.75rem}
.header p{margin:0 0 18px;color:#64748B}
.site-header{border-bottom:1px solid rgba(0,0,0,0.06);background:#ffffff}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#0b1220;text-decoration:none;font-weight:700;font-size:1.05rem}
.brand svg{color:#0f172a}
.site-nav{display:flex;gap:8px}
.site-nav a{padding:8px 10px;border-radius:8px;color:#64748B;text-decoration:none}
.site-nav a:hover{background:hsla(217,91%,60%,0.06);color:#0b1220}

/* Login button styling */
.login-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#2563eb;color:#fff;text-decoration:none;font-weight:700}
.login-btn svg{width:16px;height:16px;vertical-align:middle}

/* Responsive header tweaks */
@media (max-width:700px){
	.site-header .header-inner{flex-wrap:wrap;gap:8px;padding:10px}
	.site-nav{width:100%;display:flex;gap:6px;justify-content:flex-end;order:3}
	.brand{flex:1}
}

/* Icon images */
.icon{width:20px;height:20px;vertical-align:middle}
.action-icon{width:28px;height:28px;vertical-align:middle}
.card{background: #ffffff;padding:20px;border-radius:calc(var(--radius) + 6px);box-shadow:0 6px 18px rgba(16,24,40,0.06);border:1px solid #E2E8F0}
.question{margin-bottom:12px}
.question label{display:block;margin-bottom:6px;font-weight:600}
.question select{width:100%;padding:10px;border:1px solid rgba(0,0,0,0.06);border-radius:8px;background:transparent}
.actions{display:flex;gap:10px;margin-top:12px}
button{background: #0f172a;color: #ffffff;padding:10px 14px;border:0;border-radius:10px;cursor:pointer;font-weight:600}
button[disabled]{opacity:.6;cursor:not-allowed}
button[type="reset"]{background:transparent;color: #0b1220;border:1px solid rgba(0,0,0,0.06)}
.result{margin-top:16px;padding:12px;border-radius:8px;background:linear-gradient(180deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02));border:1px solid rgba(37,99,235,0.08)}
.footer{margin-top:14px;color:#64748B;font-size:.9rem}

/* Progress bar */
.progress{height:12px;background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));border-radius:12px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#0f172a , rgba(37,99,235,0.8));width:0%}

/* Card headers and small utilities */
.card .card-header{margin-bottom:12px}
.muted{color:#64748B}

/* Roadmap tab buttons */
	.tab-btn{
		padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:8px;color:#64748B;cursor:pointer;font-weight:600
	}
.tab-btn:hover{background:rgba(37,99,235,0.06);color:#0b1220}
.tab-btn.active{background:linear-gradient(90deg,#0f172a, rgba(37,99,235,0.9));color:#ffffff;border-color:rgba(37,99,235,0.12)}

/* Roadmap checkbox list */
input[type="checkbox"]{width:16px;height:16px}
.tab-btn + .tab-btn{margin-left:6px}

@media(min-width:700px){.actions{justify-content:flex-start}}

/* Certificate frame styles moved here so html2pdf/html2canvas captures them reliably */
.certificate-frame{
	display:block;
	margin:20px auto;
	width:11in;
	height:8.5in;
	padding:20px;
	box-sizing:border-box;
	/* gradient outer band */
	background: linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);
	border-radius: 6px;
}
.certificate-frame .certificate-inner{
	background:white;
	width:100%;
	height:100%;
	padding:28px 36px;
	box-sizing:border-box;
	position:relative;
}
/* gold inner variant */
.certificate-frame.gold{
	background: linear-gradient(135deg,#1e3a8a 0%,#3b82f6 60%, #d4af37 100%);
}
.certificate-frame.gold .certificate-inner{
	box-shadow: inset 0 0 0 6px rgba(212,175,55,0.95);
}

.signature-img{position:relative; z-index:0}
.certificate-signature-line{position:relative; z-index:5; border-top:2px solid rgba(55,65,81,0.25); width:16rem; padding-top:6px}
.certificate-qr{position:absolute; right:30px; bottom:30px; text-align:center}

/* Ensure print captures backgrounds/colors */
@media print{
	.certificate-frame{background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%)}
	.certificate-frame .certificate-inner{background:white}
}

/* Legacy certificate container used by reverted generator. Keep size fixed to letter landscape for PDF */
.certificate-container{
	width: 11in;
	height: 8.5in;
	margin: 20px auto;
	background: #fff;
	position: relative;
	box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	overflow: hidden;
	border: 1px solid #ddd;
	box-sizing: border-box;
}
.certificate-container .border-frame{
	position: absolute;
	top: 20px; left: 20px; right: 20px; bottom: 20px;
	background: white;
	padding: 40px;
	box-sizing: border-box;
}

@media print{
	.certificate-container{margin:0;box-shadow:none;border:none}
	.certificate-container, .certificate-container .border-frame{width:11in;height:8.5in}
}