/* ====================================
   SERVICIOS — DRAU Design
   ==================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.servicios-page {
	background: #E8EEF2;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	font-family: 'F37 Ginger', sans-serif;
	color: #1a2750;
}
.servicios-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(0, 25, 126, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 25, 126, 0.08) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}

.fix {
position: relative;
}

/* El botón hamburguesa no admite position:relative (perdería el anclaje
   top/right). Con position:absolute mantiene la esquina superior derecha
   pero se desplaza con el scroll, igual que el logo .fix */
.servicios-page .menu-toggle-label {
	position: absolute;
}

.servicios-page .nav { z-index: 999999; }
.servicios-page .menu-icon { z-index: 1000000; }
.servicios-page.nav-active iframe[src*="wadesk"],
.servicios-page.nav-active [id^="wadesk"],
.servicios-page.nav-active [class*="wadesk"] { display: none !important; }

.servicios-main {
	position: relative;
	z-index: 1;
	max-width: 1300px;
	margin: 0 auto;
	padding: 180px 6% 100px;
}

/* ===== HERO ===== */
.srv-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 100px;
}
.srv-eyebrow,
.plan-eyebrow,
.blog-eyebrow {
	display: inline-block;
	margin: 0 0 24px;
	padding: 10px 20px;
	background: linear-gradient(135deg, #8F2D24 0%, #C94A3A 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 50px;
	box-shadow: 0 10px 20px rgba(237, 106, 90, 0.2);
	line-height: 1;
}
.srv-title {
	font-size: 56px;
	font-weight: bold;
	line-height: 1.05;
	letter-spacing: -1.5px;
	color: #00197E;
	margin: 0;
}
.srv-hero-intro {
	font-size: 17px;
	line-height: 1.55;
	color: #4A5568;
	margin: 0 0 16px;
}
.srv-hero-intro:last-of-type { margin-bottom: 28px; }
.srv-hero-intro strong { color: #00197E; }
.srv-cta-btn {
	display: inline-block;
	padding: 16px 36px;
	background: #25D366;
	color: #ffffff;
	font-family: 'F37 Ginger', sans-serif;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 50px;
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.srv-cta-btn:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(37, 211, 102, 0.45);
}

/* ===== PILLARS GRID ===== */
.srv-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-bottom: 120px;
}
.srv-card {
	border-radius: 24px;
	min-height: 380px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.srv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 70px -20px rgba(0, 0, 0, 0.55);
}

/* Color variants — dark gradient "glow" inspired by DRAU palette */
.srv-card--yellow {
	background: radial-gradient(ellipse at 30% 110%, rgba(201,74,58,0.55) 0%, #0a0e1a 65%);
}
.srv-card--salmon {
	background: radial-gradient(ellipse at 70% 100%, rgba(201,74,58,0.45) 0%, #0a0e1a 60%);
}
.srv-card--green {
	background: radial-gradient(ellipse at 25% 105%, rgba(95,173,65,0.40) 0%, #0a0e1a 60%);
}
.srv-card--blue {
	background: radial-gradient(ellipse at 60% 110%, rgba(5,160,230,0.45) 0%, #0a0e1a 60%);
}

.srv-card-body {
	padding: 36px 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.srv-card-body h2 {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: -0.6px;
	color: #ffffff;
	margin: 0 0 12px;
}
.srv-focus {
	font-size: 15px;
	color: rgba(255,255,255,0.60);
	font-style: italic;
	margin: 0 0 18px;
	line-height: 1.45;
}
.srv-card-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.srv-card-body ul li {
	position: relative;
	padding-left: 22px;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255,255,255,0.82);
	margin-bottom: 10px;
}
.srv-card-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
}
.srv-card-body ul li strong { color: #ffffff; }

/* Image card */
.srv-card-img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.srv-card-img::after {
	content: attr(data-placeholder);
	color: rgba(0, 25, 126, 0.35);
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.srv-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.srv-card-img:has(img)::after { display: none; }

/* ===== DIFFERENTIATORS ===== */
.srv-section-head {
	margin-bottom: 50px;
	max-width: 720px;
}
.srv-section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ED6A5A;
	margin: 0 0 14px;
}
.srv-section-title {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: -1px;
	color: #00197E;
	margin: 0;
}
.srv-diff { margin-bottom: 120px; }
.srv-diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.srv-diff-item {
	background: #ffffff;
	border: 1px solid rgba(0, 25, 126, 0.08);
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: 0 12px 30px -16px rgba(0, 25, 126, 0.15);
}
.srv-diff-num {
	display: inline-block;
	font-size: 28px;
	font-weight: bold;
	color: #ED6A5A;
	margin-bottom: 14px;
	letter-spacing: -1px;
}
.srv-diff-item h3 {
	font-size: 22px;
	font-weight: bold;
	color: #00197E;
	margin: 0 0 12px;
	letter-spacing: -0.4px;
}
.srv-diff-item p {
	font-size: 15px;
	line-height: 1.55;
	color: #4A5568;
	margin: 0;
}

/* ===== PROCESS ===== */
.srv-process { margin-bottom: 120px; }
.srv-process-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: process;
}
.srv-process-list li {
	background: #EEF3FB;
	border-radius: 20px;
	padding: 32px 26px;
	position: relative;
}
.srv-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #00197E;
	color: #ffffff;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 18px;
}
.srv-process-list h3 {
	font-size: 19px;
	font-weight: bold;
	color: #00197E;
	margin: 0 0 10px;
	letter-spacing: -0.3px;
}
.srv-process-list p {
	font-size: 14.5px;
	line-height: 1.55;
	color: #4A5568;
	margin: 0;
}

/* ===== FINAL CTA ===== */
.srv-final-cta {
	background: linear-gradient(135deg, #00197E 0%, #002bb0 100%);
	border-radius: 28px;
	padding: 70px 50px;
	text-align: center;
	color: #ffffff;
	box-shadow: 0 30px 70px -20px rgba(0, 25, 126, 0.35);
}
.srv-final-cta h2 {
	font-size: 38px;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: -1px;
	color: #ffffff;
	margin: 0 0 32px;
}
.srv-final-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.srv-cta-btn--wa { background: #25D366; }
.srv-cta-btn--alt {
	background: #ffffff;
	color: #00197E;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.srv-cta-btn--alt:hover {
	color: #00197E;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* ===== RESPONSIVE ===== */
@media only screen and (max-width: 1300px) {
	.servicios-main { padding: 160px 6% 80px; }
}

@media only screen and (max-width: 1100px) {
	.logo-servicios { margin: 30px 0 0 30px; }
	.srv-hero { gap: 50px; }
	.srv-title { font-size: 44px; }
	.srv-section-title { font-size: 32px; }
	.srv-final-cta h2 { font-size: 30px; }
}

@media only screen and (max-width: 900px) {
	.srv-hero {
		grid-template-columns: 1fr;
		gap: 30px;
		align-items: start;
	}
	.srv-pillars { gap: 20px; }
	.srv-diff-grid { grid-template-columns: 1fr; gap: 20px; }
	.srv-process-list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media only screen and (max-width: 768px) {
	.servicios-page::before { background-size: 18px 18px; }
	.logo-servicios { width: 70px; margin: 20px 0 0 20px; }
	.servicios-main { padding: 140px 6% 70px; }
	.srv-title { font-size: 32px; letter-spacing: -1px; }
	.srv-hero-intro { font-size: 15px; }
	.srv-eyebrow { font-size: 11px; }
	.srv-pillars { grid-template-columns: 1fr; gap: 18px; margin-bottom: 80px; }
	.srv-card { min-height: 0; }
	.srv-card-img { min-height: 240px; }
	.srv-card-body { padding: 28px 24px; }
	.srv-card-body h2 { font-size: 22px; }
	.srv-section-title { font-size: 26px; }
	.srv-section-head { margin-bottom: 32px; }
	.srv-diff, .srv-process { margin-bottom: 80px; }
	.srv-diff-item { padding: 26px 22px; }
	.srv-final-cta { padding: 50px 28px; border-radius: 20px; }
	.srv-final-cta h2 { font-size: 24px; margin-bottom: 24px; }
	.srv-cta-btn { padding: 14px 28px; font-size: 14px; }
}

@media only screen and (max-width: 480px) {
	.logo-servicios { width: 60px; }
	.servicios-main { padding: 110px 5% 50px; }
	.srv-eyebrow,
	.plan-eyebrow { font-size: 10px; }
	.srv-process-list { grid-template-columns: 1fr; }
	.srv-title { font-size: 26px; }
	.srv-final-cta h2 { font-size: 22px; }
	.srv-final-actions { flex-direction: column; align-items: stretch; }
}

@media only screen and (max-width: 375px) {
	.logo-servicios { width: 60px; }
	.servicios-main { padding: 100px 4% 40px; }
	.srv-eyebrow,
	.plan-eyebrow { font-size: 10px; }
}