/* ============================================================
   WEBS & APPS — webs-apps.css
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────── */
.webs-hero {
	min-height: 68vh;
	display: flex;
	align-items: center;
	background: var(--color-bg);
	padding: 120px 20px 80px;
}

.webs-hero .hero-inner {
	max-width: var(--max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.webs-hero h1      { margin-bottom: 20px; }
.webs-hero .subtitle {
	font-size: 1.08rem;
	color: var(--color-text-muted);
	font-weight: 300;
	margin-bottom: 32px;
	line-height: 1.8;
}

.webs-hero-visual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.webs-hero-visual .mini-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 20px 16px;
	box-shadow: var(--shadow-card);
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}
.webs-hero-visual .mini-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.webs-hero-visual .mini-card .icon { font-size: 1.7rem; margin-bottom: 8px; }
.webs-hero-visual .mini-card span  {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--color-deep);
}

/* ── Problema ────────────────────────────────────────────────── */
.problema-section { padding: var(--section-pad); background: var(--color-deep); }

.problema-inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}
.problema-inner h2        { color: var(--color-white); margin-bottom: 20px; }
.problema-inner p         { color: rgba(255,255,255,0.65); font-size: 1.03rem; line-height: 1.85; }
.problema-inner .highlight{ color: var(--color-light); font-weight: 700; }

/* ── Qué desarrollamos ───────────────────────────────────────── */
.desarrollamos-section { padding: var(--section-pad); }

.desarrollamos-header {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 44px;
}
.desarrollamos-header h2 { margin-bottom: 10px; }

.desarrollamos-grid {
	max-width: var(--max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.dev-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 36px 32px;
	box-shadow: var(--shadow-card);
	border-top: 3px solid var(--color-primary);
	transition: box-shadow var(--transition), transform var(--transition);
}
.dev-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.dev-card .icon  { font-size: 2.1rem; margin-bottom: 14px; }
.dev-card h3     { margin-bottom: 12px; }
.dev-card p      { font-size: 0.9rem; margin-bottom: 16px; line-height: 1.7; }

.dev-card .detail {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--color-primary);
	font-weight: 700;
	background: var(--color-card-bg);
	padding: 5px 12px;
	border-radius: var(--radius-sm);
}

/* ── Tecnologías ─────────────────────────────────────────────── */
.tech-section { padding: 56px 20px; background: var(--color-card-bg); }

.tech-inner { max-width: var(--max-width); margin-inline: auto; text-align: center; }
.tech-inner h3 { margin-bottom: 28px; }

.tech-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tech-badge {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-btn);
	padding: 8px 18px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.83rem;
	color: var(--color-deep);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), border-color var(--transition);
}
.tech-badge:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary); }

/* ── Proceso ─────────────────────────────────────────────────── */
.proceso-section { padding: var(--section-pad); }

.proceso-header {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 52px;
}
.proceso-header h2 { margin-bottom: 10px; }

.proceso-timeline {
	max-width: var(--max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}

.proceso-timeline::before {
	content: '';
	position: absolute;
	top: 35px;
	left: calc(12.5% + 4px);
	right: calc(12.5% + 4px);
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}

.proceso-step { text-align: center; position: relative; z-index: 1; }

.step-number {
	width: 70px;
	height: 70px;
	background: var(--color-white);
	border: 3px solid var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--color-primary);
	margin-inline: auto;
	margin-bottom: 20px;
	box-shadow: var(--shadow-card);
	transition: background var(--transition), color var(--transition);
}

.proceso-step:hover .step-number {
	background: var(--color-primary);
	color: var(--color-white);
}

.proceso-step h4 { font-size: 0.97rem; color: var(--color-deep); margin-bottom: 8px; }
.proceso-step p  { font-size: 0.84rem; color: var(--color-text-muted); }

/* ── Formulario presupuesto ──────────────────────────────────── */
.presupuesto-section { padding: var(--section-pad); background: var(--color-card-bg); }

.presupuesto-inner {
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}
.presupuesto-inner h2  { margin-bottom: 10px; }
.presupuesto-inner > p { margin-bottom: 36px; }

.presupuesto-form {
	text-align: left;
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 40px;
	box-shadow: var(--shadow-card);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
	.webs-hero .hero-inner { grid-template-columns: 1fr; gap: 36px; }
	.webs-hero-visual      { display: none; }
	.proceso-timeline      { grid-template-columns: repeat(2, 1fr); }
	.proceso-timeline::before { display: none; }
}

@media (max-width: 560px) {
	.proceso-timeline { grid-template-columns: 1fr; }
	.presupuesto-form { padding: 24px 20px; }
}