/* ==========================================================================
   Babbid · service.css
   Estilos exclusivos de páginas de servicio (oficinas, coworking, salas,
   domiciliación, etc.) por centro.

   Reutiliza patrones de center.css (hero oscuro, banda info, galería,
   mapa, otros centros, formulario, SEO en pares) y añade lo propio:
   - Breadcrumb sobre el hero
   - Bloque "Qué incluye" con grid de checks
   - Tira "Otros servicios del centro"
   ========================================================================== */

/* ---------- Breadcrumb del hero ---------- */
.service-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 18px;
}
.service-breadcrumb a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color .2s;
}
.service-breadcrumb a:hover { color: var(--c-gold); }
.service-breadcrumb__sep {
    color: rgba(255,255,255,0.45);
    font-size: 10px;
}

/* ---------- Bloque "Qué incluye" ---------- */
.service-includes {
    padding: 80px 0;
    background: var(--c-gray);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.service-includes__head { max-width: 720px; margin-bottom: 40px; }
.service-includes__head h2 {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;
    color: var(--c-black);
    margin-bottom: 12px;
}
.service-includes__head p {
    font-size: 15px; line-height: 1.65;
    color: var(--c-text); max-width: 60ch;
}
.service-includes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 960px) { .service-includes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .service-includes__grid { grid-template-columns: 1fr; } }

.service-include {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.service-include__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--c-gold);
    margin-bottom: 4px;
}
.service-include__check svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
.service-include h3 {
    font-size: 15px; font-weight: 600;
    color: var(--c-black);
    line-height: 1.3; letter-spacing: -0.01em;
}
.service-include p {
    font-size: 13px; line-height: 1.55;
    color: var(--c-text);
}

/* ---------- Tira "Otros servicios del centro" ---------- */
.service-cross {
    padding: 80px 0;
    background: #fff;
}
.service-cross__head { margin-bottom: 32px; }
.service-cross__head h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700; letter-spacing: -0.02em;
}
.service-cross__head p {
    font-size: 14px; color: var(--c-text); margin-top: 8px;
}
.service-cross__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 960px) { .service-cross__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .service-cross__grid { grid-template-columns: 1fr; } }

.service-cross__item {
    background: var(--c-gray);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: 24px;
    text-decoration: none; color: inherit;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    display: flex; flex-direction: column; gap: 8px;
}
.service-cross__item:hover {
    border-color: var(--c-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.service-cross__item h4 {
    font-size: 16px; font-weight: 600;
    color: var(--c-black);
    letter-spacing: -0.01em;
}
.service-cross__item p {
    font-size: 13px; color: var(--c-text); line-height: 1.5;
    flex-grow: 1;
}
.service-cross__item span {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-gold);
}