/* FORMACIÓN */

/* Title / TituloPro sections (used by formación pages) */
.titulopro-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 60px;
	padding: 50px 50px;
}

.titulopro-text {
	flex: 1;
	min-width: 650px;
}

.titulopro-text p {
	font-size: 1.2rem;
	color: #333;
	margin-bottom: 30px;
	max-width: 500px;
}

.titulopro-image {
	flex: 1;
	min-width: 300px;
	display: flex;
	justify-content: center;
}

.titulopro-image img {
	width: 100%;
	max-width: 500px;
	border-radius: 10px;
	box-shadow: 0px 20px 40px rgba(0,0,0,0.1);
	object-fit: cover;
}

/* Desarrollo section (if used) */
.desarrollo {
	background-color: #ffa500;
	padding: 80px 60px;
	text-align: center;
}

.desarrollo-top h2 {
	font-size: 2.8rem;
	color: #ffffff;
	margin-bottom: 40px;
	font-weight: 400;
	font-family: 'Inter', sans-serif;
}

.desarrollo-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* small utility for cards used across pages */
.card {
	background-color: white;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 0 0 4px #a72e02;
	max-width: 320px;
	text-align: left;
	margin-bottom: 40px;
	transition: transform 0.3s ease;
}

.card:hover { transform: translateY(-6px); }

/* Coming Soon Layout */
.coming-soon { display:flex; justify-content:center; padding:80px 20px; background:#f9f6f1; }
.coming-card { background:#fff; max-width:880px; width:100%; padding:56px 44px; border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,.06); position:relative; overflow:hidden; }
.coming-icon { font-size:3.2rem; margin-bottom:8px; }
.coming-card h1 { font-weight:600; font-size:2.4rem; line-height:1.15; margin:0 0 18px; color:#444e56; }
.coming-card h1 span { color:#ffa500; font-style:italic; font-weight:400; }
.coming-card .lead { font-size:1.05rem; line-height:1.55; color:#555; margin:0 0 28px; max-width:640px; }

.milestones { list-style:none; padding:0; margin:0 0 32px; display:grid; gap:10px; }
.milestones li { padding:10px 14px; background:#f4f6fc; border-radius:10px; font-size:.95rem; color:#39424c; position:relative; }
.milestones li.done { background:#e2f8e8; color:#236b36; }
.milestones li.progress { background:#fff6e1; color:#8a5a00; }
.milestones li .status { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; background:#ffa500; color:#fff; padding:2px 6px; border-radius:999px; margin-left:8px; }

.progress-wrapper { position:relative; background:#eceff3; border-radius:14px; height:18px; margin:0 0 28px; }
.progress-bar { height:100%; background:linear-gradient(90deg,#ffa500,#ff7b00); border-radius:14px; width:0%; transition:width .8s ease; }
.progress-wrapper[data-pct] .progress-bar { width:attr(data-pct percentage); }
/* Fallback for browsers without attr() support: use custom property */
.progress-wrapper { --pct:0%; }
.progress-wrapper .progress-bar { width:var(--pct); }
.progress-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:.7rem; letter-spacing:.5px; font-weight:600; color:#222; }

.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 20px; }
.btn-notify, .btn-alt { display:inline-block; text-decoration:none; font-size:.85rem; padding:10px 18px; border-radius:999px; font-weight:600; letter-spacing:.5px; }
.btn-notify { background:#ffa500; color:#fff; }
.btn-notify:hover { background:#004dcc; }
.btn-alt { background:#f4f6fc; color:#39424c; }
.btn-alt:hover { background:#e7ebf1; }
.small-note { font-size:.75rem; color:#555; margin:8px 0 0; }

@media (max-width: 760px){
	.coming-card { padding:48px 26px; }
	.coming-card h1 { font-size:2rem; }
	.coming-card .lead { font-size:1rem; }
	.cta-row { flex-direction:column; align-items:stretch; }
	.btn-notify, .btn-alt { text-align:center; width:100%; }
	.milestones { gap:8px; }
}

@media (max-width:460px){
	.coming-card { padding:42px 20px; }
	.coming-card h1 { font-size:1.8rem; }
}