/* ============================================ SERVICIOS.CSS ============================================ */
.services-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: #fff; padding: 5rem 1.5rem 4rem; position: relative; overflow: hidden; }
.services-hero::before { content: ''; position: absolute; top: -30%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,130,10,0.12) 0%, transparent 70%); pointer-events: none; }
.services-hero h1 { color: #fff; margin-bottom: 0.75rem; }
.services-hero h1 span { color: var(--orange); }
.services-hero p { color: rgba(255,255,255,0.8); max-width: 540px; }
.service-detail-section { padding: 5rem 1.5rem; }
.service-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.75rem; max-width: var(--max-w); margin: 0 auto; }
.service-detail-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.25s; }
.service-detail-card:hover { border-color: var(--orange); box-shadow: var(--shadow-orange); transform: translateY(-5px); }
.service-card-img { width: 100%; height: 180px; object-fit: cover; background: var(--bg-soft); }
.service-card-img-placeholder { width: 100%; height: 180px; background: linear-gradient(135deg, var(--orange-light), var(--bg-soft)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 3rem; color: var(--orange); }
.service-card-body { padding: 1.5rem 1.5rem 1.75rem; }
.service-card-body .card-icon { font-size: 1.75rem; margin-bottom: 0.6rem; }
.service-card-body h3 { margin-bottom: 0.5rem; color: var(--navy); }
.service-card-body p { font-size: 0.87rem; color: var(--muted); line-height: 1.65; }
.service-tag { display: inline-block; margin-top: 1rem; background: var(--orange-light); color: var(--orange-dark); font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.75rem; border-radius: 100px; border: 1px solid var(--orange-mid); }
.cta-banner { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); color: #fff; padding: 4rem 1.5rem; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.cta-banner h2 { color: #fff; margin-bottom: 0.75rem; position: relative; }
.cta-banner p { color: rgba(255,255,255,0.88); margin-bottom: 2rem; position: relative; }
@media (max-width: 768px) { .service-detail-grid { grid-template-columns: 1fr; } .services-hero { padding: 3.5rem 1rem 3rem; } }