/* ═══════════════════════════════════════════════════════════════════════════
   Vitale Concept — Service Pages
   Only service-specific components. Layout/typography shared via main.css
   (vc-section, vc-section-header, vc-card, vc-eyebrow, vc-h2, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.vc-breadcrumbs {
    background-color: var(--vc-surface);
    border-bottom: 1px solid var(--vc-border);
    padding-top: 5rem; /* deja hueco para la navbar fixed */
}

.vc-breadcrumbs .breadcrumb {
    margin: 0;
    padding: 0.625rem 0;
    font-size: 0.8125rem;
}

.vc-breadcrumbs .breadcrumb-item,
.vc-breadcrumbs .breadcrumb-item a {
    color: var(--vc-text-muted);
    transition: color var(--vc-transition);
}

.vc-breadcrumbs .breadcrumb-item a:hover {
    color: var(--vc-primary-text);
}

.vc-breadcrumbs .breadcrumb-item.active {
    color: var(--vc-text);
    font-weight: 500;
}

.vc-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: var(--vc-text-muted);
    opacity: 0.5;
}

@media (max-width: 767.98px) {
    .vc-breadcrumbs { padding-top: 4.5rem; }
}

/* ── Service Hero ─────────────────────────────────────────────────────────── */
.vc-service-hero {
    padding: 3rem 0 3.5rem;
    background: linear-gradient(
        180deg,
        var(--vc-primary-subtle) 0%,
        var(--vc-surface) 55%,
        transparent 100%
    );
}

@media (max-width: 767.98px) {
    .vc-service-hero { padding: 2.25rem 0 2.5rem; }
}

/* ── Includes & Care lists ────────────────────────────────────────────────── */
.vc-service-includes-item,
.vc-service-care-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--vc-text);
    line-height: 1.5;
}

.vc-service-includes-item i,
.vc-service-care-item i {
    color: var(--vc-primary-text);
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Price card (extends .vc-card) ────────────────────────────────────────── */
.vc-service-price-card {
    position: sticky;
    top: 6rem;
}

.vc-service-price-card .price {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--vc-primary-text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.vc-service-price-card .price-label {
    color: var(--vc-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (max-width: 991.98px) {
    .vc-service-price-card { position: static; }
}

/* ── Gallery item ─────────────────────────────────────────────────────────── */
.vc-service-gallery-item {
    border-radius: var(--vc-radius-lg);
    overflow: hidden;
    transition: transform var(--vc-transition);
}

.vc-service-gallery-item:hover {
    transform: scale(1.02);
}

.vc-service-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767.98px) {
    .vc-service-gallery-item img { height: 200px; }
}