/* Modo oscuro — detalle de servicio (/servicios/<slug>/) */
/* Requiere theme-dark-shared.css + body.page-servicio-detalle.icasa-theme-enabled */
/* No modifica servicio-detalle.css: solo reasigna variables y ajustes puntuales */

html[data-theme="dark"] body.page-servicio-detalle .svc-page {
    --svc-white: #161d26;
    --svc-gray-50: #0c1014;
    --svc-gray-100: #1a222c;
    --svc-text: #e8eef4;
    --svc-text-muted: #9eb0c0;
    --svc-green: #3dd68c;
    --svc-green-dark: #2eb872;
    --svc-green-mid: #4ae09a;
    --svc-green-soft: rgba(61, 214, 140, 0.14);
    --svc-border: rgba(255, 255, 255, 0.12);
    --svc-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --svc-shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.45);
    color: var(--svc-text);
    background: var(--svc-gray-50);
}

/* Hero con foto: misma tipografía verde que en modo claro (la imagen no cambia) */
html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__eyebrow {
    color: #006837;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__title {
    color: #004d29;
    text-shadow: none;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__lead {
    color: rgba(0, 104, 55, 0.88);
    text-shadow: none;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__badge {
    color: #ffffff;
    background: linear-gradient(145deg, #007a42 0%, #004d29 100%);
    border-color: rgba(0, 77, 41, 0.65);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__back {
    color: #004d29;
    background: rgba(234, 247, 240, 0.88);
    border-color: rgba(0, 104, 55, 0.28);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] body.page-servicio-detalle .svc-hero:has(.svc-hero__media) .svc-hero__back:hover {
        color: #006837;
        background: rgba(234, 247, 240, 0.98);
        border-color: rgba(0, 104, 55, 0.45);
    }
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero-scroll-wrap {
    background: linear-gradient(180deg, var(--svc-gray-50) 0%, var(--svc-gray-50) 100%);
    border-bottom-color: var(--svc-border);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero-scroll-btn {
    background: var(--svc-white);
    color: var(--svc-green);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-hero-scroll-btn:hover {
    background: var(--home-dark-surface-2, #1e2833);
    color: var(--svc-green-mid);
}

/* Secciones claras → fondo oscuro */
html[data-theme="dark"] body.page-servicio-detalle .svc-benefits {
    background:
        radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.04) 1.5px, transparent 0)
        0 0 / 26px 26px,
        linear-gradient(180deg, var(--svc-gray-50) 0%, var(--home-dark-surface-2, #1e2833) 55%) !important;
    border-top: none;
    border-bottom: none;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-benefits .svc-section__title {
    color: var(--svc-green-mid);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-benefits .svc-section__title::after {
    background: linear-gradient(90deg, var(--svc-green) 0%, rgba(61, 214, 140, 0.15) 100%);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-benefit-card:hover::before,
html[data-theme="dark"] body.page-servicio-detalle .svc-benefit-card:active::before,
html[data-theme="dark"] body.page-servicio-detalle .svc-benefit-card.svc-benefit-card--active::before {
    color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-prose {
    background:
        radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.04) 1.5px, transparent 0)
        0 0 / 26px 26px,
        linear-gradient(180deg, var(--home-dark-surface-2, #1e2833) 0%, var(--svc-gray-50) 55%) !important;
    border-top-color: var(--svc-border);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose {
    background:
        radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.04) 1.5px, transparent 0)
        0 0 / 26px 26px,
        linear-gradient(180deg, var(--svc-gray-50) 0%, var(--home-dark-surface-2, #1e2833) 100%) !important;
    border-top-color: var(--svc-border);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__card {
    background: linear-gradient(145deg, #131c22 0%, #1b2630 100%);
    border-color: rgba(61, 214, 140, 0.18);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__title,
html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__body h2,
html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__body h3,
html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__body h4,
html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__body strong {
    color: var(--svc-green-mid);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-prose__body {
    color: var(--svc-text-muted);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-gallery {
    background: linear-gradient(180deg, var(--svc-gray-50) 0%, var(--home-dark-surface-2, #1e2833) 100%);
    border-top-color: var(--svc-border);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-detail-gallery__shell {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body.page-servicio-detalle .nosotros-historia {
    background: var(--home-dark-bg, #0c1014);
    border-top-color: var(--svc-border);
}

html[data-theme="dark"] body.page-servicio-detalle .nosotros-historia__shell {
    background: linear-gradient(148deg, #03150c 0%, #073d24 42%, #005a2e 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.28),
        0 22px 55px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body.page-servicio-detalle .nosotros-historia__media {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Proceso: alinear al resto del tema (ya era oscuro) */
html[data-theme="dark"] body.page-servicio-detalle .svc-process {
    background: #050807;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-process::before {
    background-image:
        linear-gradient(rgba(61, 214, 140, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 214, 140, 0.06) 1px, transparent 1px);
}

/* CTA final */
html[data-theme="dark"] body.page-servicio-detalle .svc-cta-final {
    background: linear-gradient(180deg, var(--svc-gray-50) 0%, #050807 60%, var(--svc-gray-50) 100%) !important;
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-card {
    background: var(--svc-white);
    border-color: var(--svc-border);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-card::after {
    background: radial-gradient(circle, rgba(61, 214, 140, 0.08) 0%, transparent 68%);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-form__input {
    background: var(--home-dark-surface-2, #1e2833);
    border-color: var(--svc-border);
    color: var(--svc-text);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-form__input::placeholder {
    color: rgba(158, 176, 192, 0.65);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-form__input:focus {
    background: var(--svc-gray-100);
    border-color: var(--svc-green-mid);
    box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.2);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-form__wa {
    background: var(--home-dark-surface-2, #1e2833);
    color: var(--svc-green-mid) !important;
    border-color: var(--svc-border);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] body.page-servicio-detalle .svc-cta-form__wa:hover {
        background: rgba(61, 214, 140, 0.12);
        border-color: rgba(61, 214, 140, 0.35);
        color: #ffffff !important;
    }
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-card__link {
    color: var(--svc-text-muted);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] body.page-servicio-detalle .svc-cta-card__link:hover {
    color: var(--svc-green-mid);
    border-color: var(--svc-green-mid);
}