/* ============================================================
   WEBS — webs.css
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────── */
.webs-hero {
	min-height: 68vh;
	display: flex;
	align-items: center;
	background:
		linear-gradient(155deg, rgba(15,51,33,0.70) 0%, rgba(28,85,53,0.70) 100%),
		url('../images/webs-hero.jpg') center/cover no-repeat;
	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      { color: var(--color-white); margin-bottom: 20px; }
.webs-hero .subtitle {
	font-size: 1.08rem;
	color: rgba(255,255,255,0.72);
	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-card-bg); }

.problema-inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}
.problema-inner h2        { color: var(--color-deep); margin-bottom: 20px; }
.problema-inner p         { color: var(--color-text-muted); font-size: 1.03rem; line-height: 1.85; }
.problema-inner .highlight{ color: var(--color-primary); 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-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dev-card .icon  { font-size: 1.9rem; line-height: 1; }
.dev-card h3     { margin-bottom: 0; }
.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);
}

.contacto-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.contacto-form label {
	font-family: var(--font-heading);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-text);
}

.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 0.95rem;
	background: var(--color-white);
	color: var(--color-text);
	transition: border-color var(--transition);
	outline: none;
	appearance: none;
}

.contacto-form input:focus,
.contacto-form textarea:focus { border-color: var(--color-primary); }

.contacto-form textarea {
	min-height: 130px;
	resize: vertical;
}

.contacto-form .btn {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

.form-aviso {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 24px;
}

.form-aviso--ok {
	background: #e6f4ec;
	color: var(--color-dark);
	border: 1px solid var(--color-border);
}

.form-aviso--error {
	background: #fdecea;
	color: #b71c1c;
	border: 1px solid #f5c6c6;
}

/* ── Precios ─────────────────────────────────────────────────── */
.pricing-section { padding: var(--section-pad); }

.pricing-header {
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: 48px;
}
.pricing-header h2 { margin-bottom: 10px; }

.webs-pricing-grid {
	max-width: 1120px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

.pricing-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 40px 36px;
	box-shadow: var(--shadow-card);
	position: relative;
	border: 2px solid transparent;
	transition: box-shadow var(--transition), transform var(--transition);
}
.pricing-card:hover        { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.pricing-card.featured     { border-color: var(--color-primary); }

.popular-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.73rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 18px;
	border-radius: var(--radius-btn);
	white-space: nowrap;
}

.pricing-card h3      { font-size: 1.4rem; margin-bottom: 6px; }
.pricing-tagline      { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 24px; font-weight: 300; }

.pricing-price        { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.price-amount         { font-family: var(--font-heading); font-weight: 800; font-size: 3rem; color: var(--color-primary); line-height: 1; }
.price-period         { font-size: 1rem; color: var(--color-text-muted); font-weight: 300; }
.price-annual         { font-size: 0.84rem; color: var(--color-text-muted); margin-bottom: 28px; font-weight: 300; }
.price-annual strong  { color: var(--color-primary); }

.pricing-features {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: 32px;
}

.pricing-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	font-weight: 300;
}
.pricing-features li .check { color: var(--color-primary); font-weight: 700; flex-shrink: 0; }

.pricing-cta { width: 100%; justify-content: center; }

/* ── Webs que hemos hecho (prueba social) ───────────────────────── */
.social-proof-section { padding: var(--section-pad); background: var(--color-card-bg); }

.social-proof-header {
	text-align: center;
	margin-bottom: 40px;
}
.social-proof-header h2 { margin-bottom: 0; }

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

.social-proof-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--color-white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), transform var(--transition);
}
.social-proof-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.social-proof-thumb,
.social-proof-thumb-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	background: var(--color-card-bg);
}

.social-proof-thumb { object-fit: cover; object-position: top; }

.social-proof-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}
.social-proof-thumb-placeholder span:first-child { font-size: 1.8rem; }

.social-proof-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 24px 28px 28px;
}
.social-proof-card h3 { font-size: 1.15rem; }
.social-proof-card p  { font-size: 0.9rem; margin-bottom: 0; }

/* ── 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: 480px) {
	.webs-pricing-grid { max-width: 440px; }
}

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

.word-rotate::after {
  content: "|";
  margin-left: 2px;
  animation: wr-blink 1s step-end infinite;
}
@keyframes wr-blink { 50% { opacity: 0; } }