/* =========================================================
   VIP CAR ESTÉTICA AUTOMOTIVA
   Página: Detalhe de Serviço
   Arquivo: service-detail.css

   Responsável por:
   - Hero individual de serviço
   - Breadcrumb
   - Informações do serviço
   - Preço
   - Listas de benefícios
   - O que está incluso
   - Opções e pacotes
   - Sidebar / orçamento
   - Galeria
   - Observações
   - Serviços relacionados
   - Navegação anterior/próximo
   - CTA final
   - Responsividade

   Este arquivo será reutilizado por todas as páginas
   individuais dentro de /servicos/
========================================================= */


/* =========================================================
   PÁGINA
========================================================= */

.service-detail-page {
    overflow-x: hidden;
}


/* =========================================================
   HERO
========================================================= */

.service-detail-hero {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 760px;

    padding:
        calc(var(--header-height, 88px) + 120px)
        0
        105px;

    overflow: hidden;

    isolation: isolate;

    background:
        #03070d;
}


/* =========================================================
   IMAGEM DE FUNDO
========================================================= */

.service-detail-hero-media {
    position: absolute;
    inset: 0;

    z-index: -5;

    overflow: hidden;
}


.service-detail-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform:
        scale(1.03);

    filter:
        saturate(0.9)
        contrast(1.04)
        brightness(0.76);
}


/* =========================================================
   FALLBACK SEM IMAGEM
========================================================= */

.service-detail-hero-fallback {
    position: absolute;
    inset: 0;

    z-index: -6;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(23, 71, 184, 0.32),
            transparent 35%
        ),
        radial-gradient(
            circle at 84% 55%,
            rgba(214, 168, 67, 0.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #08142c,
            #03070d 66%
        );
}


/* =========================================================
   OVERLAY
========================================================= */

.service-detail-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 7, 13, 0.97) 0%,
            rgba(3, 7, 13, 0.87) 33%,
            rgba(3, 7, 13, 0.50) 67%,
            rgba(3, 7, 13, 0.36) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 7, 13, 0.38) 0%,
            rgba(3, 7, 13, 0.08) 42%,
            rgba(3, 7, 13, 0.92) 100%
        );
}


/* =========================================================
   TEXTURA
========================================================= */

.service-detail-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.13;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        68px 68px;
}


/* =========================================================
   LINHA INFERIOR
========================================================= */

.service-detail-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 168, 67, 0.55),
            rgba(23, 71, 184, 0.45),
            transparent
        );
}


/* =========================================================
   GLOWS
========================================================= */

.service-detail-hero-glow {
    position: absolute;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(100px);

    z-index: -2;
}


.service-detail-hero-glow-blue {
    top: 170px;
    left: -130px;

    width: 410px;
    height: 410px;

    background:
        rgba(23, 71, 184, 0.24);
}


.service-detail-hero-glow-gold {
    right: -100px;
    bottom: -80px;

    width: 320px;
    height: 320px;

    background:
        rgba(214, 168, 67, 0.14);
}


/* =========================================================
   CONTEÚDO DO HERO
========================================================= */

.service-detail-hero-content {
    position: relative;

    z-index: 3;

    width: min(850px, 100%);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.service-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 25px;

    color:
        rgba(255, 255, 255, 0.47);

    font-size: 0.79rem;

    font-weight: 600;
}


.service-detail-breadcrumb a {
    color:
        rgba(255, 255, 255, 0.68);

    transition:
        color 180ms ease;
}


.service-detail-breadcrumb a:hover {
    color:
        var(
            --vip-gold-light,
            #f0c65a
        );
}


.service-detail-breadcrumb span[aria-current="page"] {
    color:
        var(
            --vip-gold,
            #d6a843
        );
}


/* =========================================================
   CATEGORIA / BADGE
========================================================= */

.service-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 17px;
}


.service-detail-category,
.service-detail-badge {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding:
        7px 12px;

    border-radius: 999px;

    font-size: 0.69rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.service-detail-category {
    color:
        var(
            --vip-gold-light,
            #f0c65a
        );

    border:
        1px solid
        rgba(214, 168, 67, 0.26);

    background:
        rgba(214, 168, 67, 0.09);
}


.service-detail-badge {
    color: #ffffff;

    border:
        1px solid
        rgba(23, 71, 184, 0.35);

    background:
        rgba(23, 71, 184, 0.22);
}


/* =========================================================
   TÍTULO
========================================================= */

.service-detail-hero h1 {
    max-width: 930px;

    margin:
        0 0
        24px;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size:
        clamp(
            3rem,
            6.4vw,
            6.4rem
        );

    font-weight: 900;

    line-height: 0.96;

    letter-spacing: -0.055em;

    text-wrap: balance;
}


/* =========================================================
   RESUMO
========================================================= */

.service-detail-hero-description {
    max-width: 720px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.2rem
        );

    line-height: 1.8;
}


/* =========================================================
   AÇÕES HERO
========================================================= */

.service-detail-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 34px;
}


/* =========================================================
   PREÇO NO HERO
========================================================= */

.service-detail-hero-price {
    display: inline-flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 32px;

    padding:
        16px 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 17px;

    background:
        rgba(3, 7, 13, 0.48);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.service-detail-hero-price span {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.69rem;

    font-weight: 800;

    letter-spacing: 0.085em;

    text-transform: uppercase;
}


.service-detail-hero-price strong {
    color:
        #ffffff;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.75rem
        );

    font-weight: 900;
}


/* =========================================================
   CONTEÚDO PRINCIPAL
========================================================= */

.service-detail-main {
    position: relative;
}


.service-detail-main::before {
    content: "";

    position: absolute;

    top: 240px;
    right: -360px;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(23, 71, 184, 0.09),
            transparent 70%
        );
}


/* =========================================================
   LAYOUT
========================================================= */

.service-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    align-items: start;

    gap: 64px;
}


/* =========================================================
   COLUNA PRINCIPAL
========================================================= */

.service-detail-content {
    min-width: 0;
}


/* =========================================================
   SEÇÃO
========================================================= */

.service-detail-section {
    position: relative;

    padding-bottom: 58px;
}


.service-detail-section + .service-detail-section {
    padding-top: 58px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.service-detail-section:last-child {
    padding-bottom: 0;
}


/* =========================================================
   CABEÇALHO DAS SEÇÕES
========================================================= */

.service-detail-section-header {
    max-width: 760px;

    margin-bottom: 30px;
}


.service-detail-section-header h2 {
    margin:
        8px 0
        15px;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size:
        clamp(
            1.9rem,
            3.5vw,
            3.2rem
        );

    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -0.04em;
}


.service-detail-section-header p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.62);

    line-height: 1.8;
}


/* =========================================================
   TEXTO
========================================================= */

.service-detail-copy {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 1rem;

    line-height: 1.85;
}


.service-detail-copy p {
    margin:
        0 0
        20px;
}


.service-detail-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DESTAQUE DE TEXTO
========================================================= */

.service-detail-highlight {
    position: relative;

    margin:
        32px 0;

    padding:
        24px 26px;

    border-left:
        3px solid
        var(
            --vip-gold,
            #d6a843
        );

    border-radius:
        0 18px 18px 0;

    background:
        linear-gradient(
            90deg,
            rgba(214, 168, 67, 0.09),
            rgba(255, 255, 255, 0.02)
        );
}


.service-detail-highlight p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.75);

    line-height: 1.75;
}


/* =========================================================
   GRID DE BENEFÍCIOS / INCLUSOS
========================================================= */

.service-detail-list-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* =========================================================
   ITEM
========================================================= */

.service-detail-list-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    min-height: 88px;

    padding:
        18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.024);

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}


.service-detail-list-item:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(214, 168, 67, 0.20);

    background:
        rgba(255, 255, 255, 0.04);
}


.service-detail-list-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(214, 168, 67, 0.23);

    border-radius: 11px;

    color:
        var(
            --vip-gold,
            #d6a843
        );

    background:
        rgba(214, 168, 67, 0.07);

    font-weight: 900;
}


.service-detail-list-item strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 0.94rem;

    font-weight: 800;
}


.service-detail-list-item p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.54);

    font-size: 0.82rem;

    line-height: 1.55;
}


/* =========================================================
   LISTA SIMPLES
========================================================= */

.service-detail-check-list {
    display: grid;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.service-detail-check-list li {
    position: relative;

    padding:
        16px 18px
        16px 50px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 16px;

    color:
        rgba(255, 255, 255, 0.69);

    background:
        rgba(255, 255, 255, 0.02);

    line-height: 1.6;
}


.service-detail-check-list li::before {
    content: "✓";

    position: absolute;

    top: 50%;
    left: 18px;

    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    color:
        #080b0f;

    background:
        var(
            --vip-gold,
            #d6a843
        );

    font-size: 0.72rem;

    font-weight: 900;

    transform:
        translateY(-50%);
}


/* =========================================================
   OPÇÕES / PACOTES
========================================================= */

.service-options-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.service-option-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 175px;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.042),
            rgba(255, 255, 255, 0.018)
        );

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}


.service-option-card::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(214, 168, 67, 0.10),
            transparent 70%
        );
}


.service-option-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(214, 168, 67, 0.23);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.20);
}


.service-option-card span {
    position: relative;

    z-index: 1;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.service-option-card h3 {
    position: relative;

    z-index: 1;

    margin:
        10px 0
        22px;

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.45;
}


.service-option-card strong {
    position: relative;

    z-index: 1;

    margin-top: auto;

    color:
        var(
            --vip-gold-light,
            #f0c65a
        );

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size:
        1.45rem;

    font-weight: 900;
}


/* =========================================================
   OBSERVAÇÕES
========================================================= */

.service-notes {
    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.service-notes li {
    position: relative;

    padding-left: 24px;

    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.88rem;

    line-height: 1.65;
}


.service-notes li::before {
    content: "•";

    position: absolute;

    left: 4px;

    color:
        var(
            --vip-gold,
            #d6a843
        );

    font-size: 1.2rem;
}


/* =========================================================
   GALERIA DO SERVIÇO
========================================================= */

.service-detail-gallery {
    display: grid;

    grid-template-columns:
        1.35fr
        0.65fr;

    grid-template-rows:
        repeat(2, 230px);

    gap: 14px;
}


.service-detail-gallery-item {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}


.service-detail-gallery-item:first-child {
    grid-row:
        1 / 3;
}


.service-detail-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 550ms
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );
}


.service-detail-gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(3, 7, 13, 0.52)
        );
}


.service-detail-gallery-item:hover img {
    transform:
        scale(1.055);
}


/* =========================================================
   PLACEHOLDER DE GALERIA
========================================================= */

.service-detail-gallery-placeholder {
    display: grid;
    place-items: center;

    min-height: 230px;

    border:
        1px dashed
        rgba(214, 168, 67, 0.20);

    border-radius: 20px;

    color:
        rgba(255, 255, 255, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(214, 168, 67, 0.035),
            rgba(23, 71, 184, 0.035)
        );

    text-align: center;
}


.service-detail-gallery-placeholder span {
    display: block;

    color:
        var(
            --vip-gold,
            #d6a843
        );

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.service-detail-gallery-placeholder strong {
    display: block;

    margin-top: 5px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 1rem;
}


/* =========================================================
   SIDEBAR
========================================================= */

.service-detail-sidebar {
    position: relative;
}


.service-detail-sidebar-inner {
    position: sticky;

    top:
        calc(
            var(--header-height, 88px)
            + 28px
        );

    display: grid;

    gap: 18px;
}


/* =========================================================
   CARD DA SIDEBAR
========================================================= */

.service-detail-sidebar-card {
    position: relative;

    padding: 27px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.20);
}


.service-detail-sidebar-card::before {
    content: "";

    position: absolute;

    top: -150px;
    right: -130px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(23, 71, 184, 0.16),
            transparent 70%
        );
}


.service-detail-sidebar-card.featured {
    border-color:
        rgba(214, 168, 67, 0.20);

    background:
        linear-gradient(
            145deg,
            rgba(214, 168, 67, 0.08),
            rgba(23, 71, 184, 0.055),
            rgba(255, 255, 255, 0.02)
        );
}


/* =========================================================
   SIDEBAR — TEXTO
========================================================= */

.service-detail-sidebar-label {
    position: relative;

    z-index: 1;

    display: block;

    margin-bottom: 8px;

    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.service-detail-sidebar-card h2,
.service-detail-sidebar-card h3 {
    position: relative;

    z-index: 1;

    margin:
        0 0
        13px;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 1.35rem;

    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -0.025em;
}


.service-detail-sidebar-card p {
    position: relative;

    z-index: 1;

    margin:
        0 0
        20px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.88rem;

    line-height: 1.7;
}


/* =========================================================
   PREÇO DA SIDEBAR
========================================================= */

.service-sidebar-price {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;

    margin:
        22px 0;

    padding:
        18px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.service-sidebar-price span {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.69rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.service-sidebar-price strong {
    color:
        var(
            --vip-gold-light,
            #f0c65a
        );

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 1.8rem;

    font-weight: 900;
}


/* =========================================================
   BOTÕES SIDEBAR
========================================================= */

.service-detail-sidebar-actions {
    position: relative;

    z-index: 1;

    display: grid;

    gap: 10px;
}


.service-detail-sidebar-actions .btn {
    width: 100%;

    justify-content: center;
}


/* =========================================================
   INFORMAÇÕES RÁPIDAS
========================================================= */

.service-quick-info {
    display: grid;

    gap: 12px;

    margin-top: 20px;
}


.service-quick-info-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.service-quick-info-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 33px;
    height: 33px;

    border-radius: 10px;

    color:
        var(
            --vip-gold,
            #d6a843
        );

    background:
        rgba(214, 168, 67, 0.07);

    font-size: 0.85rem;
}


.service-quick-info-item span {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;
}


.service-quick-info-item strong {
    color:
        rgba(255, 255, 255, 0.80);

    font-size: 0.84rem;

    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   SEÇÃO DE RELACIONADOS
========================================================= */

.related-services {
    position: relative;

    overflow: hidden;
}


.related-services::before {
    content: "";

    position: absolute;

    bottom: -280px;
    left: -270px;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(23, 71, 184, 0.09),
            transparent 70%
        );
}


.related-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-top: 40px;
}


.related-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 290px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}


.related-service-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(214, 168, 67, 0.22);

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.23);
}


.related-service-card-number {
    display: block;

    margin-bottom: 32px;

    color:
        rgba(214, 168, 67, 0.55);

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 0.75rem;

    font-weight: 900;
}


.related-service-card h3 {
    margin:
        0 0
        12px;

    font-size: 1.25rem;

    font-weight: 800;

    line-height: 1.25;
}


.related-service-card p {
    margin:
        0 0
        22px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.88rem;

    line-height: 1.65;
}


.related-service-card a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: auto;

    color:
        #ffffff;

    font-weight: 800;
}


.related-service-card a span {
    color:
        var(
            --vip-gold,
            #d6a843
        );

    transition:
        transform 180ms ease;
}


.related-service-card a:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   NAVEGAÇÃO ENTRE SERVIÇOS
========================================================= */

.service-detail-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 60px;
}


.service-detail-navigation-link {
    position: relative;

    display: flex;
    align-items: center;

    gap: 16px;

    min-height: 110px;

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.022);

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}


.service-detail-navigation-link:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(214, 168, 67, 0.21);

    background:
        rgba(255, 255, 255, 0.04);
}


.service-detail-navigation-link.next {
    justify-content: flex-end;

    text-align: right;
}


.service-navigation-arrow {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    color:
        var(
            --vip-gold,
            #d6a843
        );

    background:
        rgba(214, 168, 67, 0.08);

    font-size: 1.15rem;
}


.service-detail-navigation-link span:not(
    .service-navigation-arrow
) {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.service-detail-navigation-link strong {
    display: block;

    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 800;
}


/* =========================================================
   FAQ INDIVIDUAL
========================================================= */

.service-detail-faq {
    display: grid;

    gap: 12px;
}


.service-detail-faq .faq-item {
    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.02);
}


/* =========================================================
   CTA DO SERVIÇO
========================================================= */

.service-detail-cta {
    position: relative;

    overflow: hidden;
}


.service-detail-cta-box {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        auto;

    align-items: center;

    gap: 45px;

    padding:
        clamp(36px, 6vw, 68px);

    overflow: hidden;

    border:
        1px solid
        rgba(214, 168, 67, 0.21);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 14% 30%,
            rgba(23, 71, 184, 0.23),
            transparent 36%
        ),
        radial-gradient(
            circle at 88% 40%,
            rgba(214, 168, 67, 0.10),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.28);
}


.service-detail-cta-box::before {
    content: "";

    position: absolute;

    top: -170px;
    right: -100px;

    width: 380px;
    height: 380px;

    border:
        1px solid
        rgba(214, 168, 67, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.service-detail-cta-content {
    position: relative;

    z-index: 2;
}


.service-detail-cta-content h2 {
    margin:
        9px 0
        16px;

    max-width: 800px;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size:
        clamp(
            2rem,
            4vw,
            3.6rem
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.service-detail-cta-content p {
    max-width: 650px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.62);

    line-height: 1.75;
}


.service-detail-cta-actions {
    position: relative;

    z-index: 2;

    display: grid;

    gap: 10px;

    min-width: 260px;
}


.service-detail-cta-actions .btn {
    width: 100%;

    justify-content: center;
}


/* =========================================================
   AVISO DE PREÇO
========================================================= */

.service-price-disclaimer {
    margin-top: 18px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 0.75rem;

    line-height: 1.6;
}


/* =========================================================
   FOCO
========================================================= */

.service-detail-breadcrumb a:focus-visible,
.service-detail-navigation-link:focus-visible,
.related-service-card a:focus-visible {
    outline:
        2px solid
        var(
            --vip-gold,
            #d6a843
        );

    outline-offset: 4px;
}


/* =========================================================
   DESKTOP MÉDIO
========================================================= */

@media (max-width: 1180px) {

    .service-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            320px;

        gap: 42px;
    }


    .related-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

    .service-detail-hero {
        min-height: 680px;
    }


    .service-detail-layout {
        grid-template-columns:
            1fr;
    }


    .service-detail-sidebar {
        order: -1;
    }


    .service-detail-sidebar-inner {
        position: static;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .service-detail-sidebar-card.featured {
        grid-column:
            1 / -1;
    }


    .service-detail-gallery {
        grid-template-rows:
            repeat(2, 200px);
    }


    .service-detail-cta-box {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .service-detail-cta-actions {
        width: min(100%, 420px);
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 768px) {

    .service-detail-hero {
        min-height: 620px;

        padding:
            calc(
                var(--header-height-mobile, 72px)
                + 82px
            )
            0
            72px;
    }


    .service-detail-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 7, 13, 0.48),
                rgba(3, 7, 13, 0.76) 48%,
                rgba(3, 7, 13, 0.98)
            );
    }


    .service-detail-hero-media img {
        object-position: center;
    }


    .service-detail-hero h1 {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4.6rem
            );
    }


    .service-detail-hero-description {
        font-size: 0.98rem;
    }


    .service-detail-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .service-detail-hero-actions .btn {
        width: 100%;

        justify-content: center;
    }


    .service-detail-list-grid,
    .service-options-grid {
        grid-template-columns:
            1fr;
    }


    .service-detail-sidebar-inner {
        grid-template-columns:
            1fr;
    }


    .service-detail-sidebar-card.featured {
        grid-column: auto;
    }


    .service-detail-gallery {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            280px
            180px;
    }


    .service-detail-gallery-item:first-child {
        grid-column:
            1 / -1;

        grid-row:
            auto;
    }


    .related-services-grid {
        grid-template-columns:
            1fr;
    }


    .service-detail-navigation {
        grid-template-columns:
            1fr;
    }


    .service-detail-navigation-link.next {
        justify-content: flex-start;

        text-align: left;
    }


    .service-detail-navigation-link.next
    .service-navigation-arrow {
        order: -1;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .service-detail-hero {
        min-height: auto;

        padding-bottom: 62px;
    }


    .service-detail-breadcrumb {
        font-size: 0.73rem;
    }


    .service-detail-category,
    .service-detail-badge {
        min-height: 29px;

        padding:
            6px 10px;

        font-size: 0.62rem;
    }


    .service-detail-hero h1 {
        font-size:
            clamp(
                2.45rem,
                13vw,
                3.75rem
            );
    }


    .service-detail-hero-price {
        width: 100%;
    }


    .service-detail-section {
        padding-bottom: 44px;
    }


    .service-detail-section
    + .service-detail-section {
        padding-top: 44px;
    }


    .service-detail-list-item {
        padding: 16px;
    }


    .service-option-card {
        min-height: auto;

        padding: 21px;
    }


    .service-detail-sidebar-card {
        padding: 23px;

        border-radius: 21px;
    }


    .service-detail-gallery {
        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(3, 230px);
    }


    .service-detail-gallery-item:first-child {
        grid-column: auto;
    }


    .service-detail-cta-box {
        padding:
            30px 22px;

        border-radius: 25px;
    }


    .service-detail-cta-content h2 {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.7rem
            );
    }


    .service-detail-cta-actions {
        width: 100%;
        min-width: 0;
    }


    .service-detail-navigation-link {
        min-height: 100px;

        padding: 19px;
    }

}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 380px) {

    .service-detail-hero h1 {
        font-size: 2.35rem;
    }


    .service-detail-sidebar-card {
        padding:
            21px 18px;
    }


    .service-detail-list-item {
        gap: 11px;
    }


    .service-detail-navigation-link {
        gap: 11px;
    }

}


/* =========================================================
   SEM HOVER
========================================================= */

@media (hover: none) {

    .service-detail-list-item:hover,
    .service-option-card:hover,
    .related-service-card:hover,
    .service-detail-navigation-link:hover {
        transform: none;
    }


    .service-detail-gallery-item:hover img {
        transform: none;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-detail-list-item,
    .service-option-card,
    .related-service-card,
    .service-detail-navigation-link,
    .service-detail-gallery-item img {
        transition: none;
    }

}


/* =========================================================
   IMPRESSÃO
========================================================= */

@media print {

    .service-detail-hero {
        min-height: auto;

        padding:
            30px 0;

        color: #000000;

        background: #ffffff;
    }


    .service-detail-hero-media,
    .service-detail-hero-overlay,
    .service-detail-hero-glow,
    .service-detail-sidebar,
    .service-detail-cta,
    .related-services,
    .floating-whatsapp,
    .service-detail-hero-actions {
        display: none !important;
    }


    .service-detail-layout {
        display: block;
    }


    .service-detail-section {
        break-inside: avoid;
    }


    .service-detail-list-item,
    .service-option-card {
        box-shadow: none;
    }

}

/* =========================================================
   VIP CAR — CORREÇÕES GLOBAIS DAS PÁGINAS DE SERVIÇO
   Aplicado às 10 páginas individuais.

   Objetivos:
   - remover logo antiga quebrada
   - criar marca textual
   - corrigir header/footer
   - melhorar cards relacionados
   - garantir setas de navegação
   - melhorar sidebar
========================================================= */


/* =========================================================
   LOGO ANTIGA — HEADER
========================================================= */

.service-detail-page .site-header .brand-logo {
    display: none !important;
}


/* =========================================================
   MARCA TEXTUAL AUTOMÁTICA

   As páginas antigas possuem:
   <a class="brand"> <img class="brand-logo"> </a>

   A imagem é escondida e transformamos o próprio link
   na marca VIP CAR.
========================================================= */

.service-detail-page .site-header .brand {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    min-width: 165px;

    min-height: 52px;

    gap: 3px;

    text-decoration: none;
}


.service-detail-page .site-header .brand::before {
    content: "VIP CAR";

    display: block;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 1.22rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.04em;

    color: #ffffff;
}


.service-detail-page .site-header .brand::after {
    content: "ESTÉTICA AUTOMOTIVA";

    display: block;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 0.52rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.15em;

    color:
        var(
            --vip-gold,
            #d6a843
        );
}


/* =========================================================
   LOGO ANTIGA — FOOTER
========================================================= */

.service-detail-page .footer-brand > a > img,
.service-detail-page .footer-brand .brand-logo {
    display: none !important;
}


.service-detail-page .footer-brand > a:first-child {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    min-width: 190px;

    min-height: 60px;

    margin-bottom: 22px;

    gap: 3px;

    text-decoration: none;
}


.service-detail-page .footer-brand > a:first-child::before {
    content: "VIP CAR";

    display: block;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 1.48rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.045em;

    color: #ffffff;
}


.service-detail-page .footer-brand > a:first-child::after {
    content: "ESTÉTICA AUTOMOTIVA";

    display: block;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-size: 0.57rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.15em;

    color:
        var(
            --vip-gold,
            #d6a843
        );
}


/* =========================================================
   HERO — GARANTIAS
========================================================= */

.service-detail-hero {
    position: relative;

    overflow: hidden;
}


.service-detail-hero-content {
    position: relative;

    z-index: 3;

    min-width: 0;
}


.service-detail-hero h1 {
    text-wrap: balance;

    overflow-wrap: normal;

    word-break: normal;
}


.service-detail-hero p {
    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   FALLBACK DO HERO

   Como ainda não estamos usando fotos reais dos serviços,
   ele continua com aparência proposital.
========================================================= */

.service-detail-hero-fallback {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(
                23,
                71,
                184,
                0.16
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 82%,
            rgba(
                214,
                168,
                67,
                0.08
            ),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #06101c,
            #03070d 58%,
            #0b0e0e
        );
}


.service-detail-hero-fallback::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        );

    background-size:
        56px
        56px;
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.service-detail-layout {
    align-items: start;
}


.service-detail-content {
    min-width: 0;
}


/* =========================================================
   SEÇÕES INTERNAS
========================================================= */

.service-detail-section {
    position: relative;

    scroll-margin-top:
        calc(
            var(
                --header-height,
                86px
            ) + 30px
        );
}


.service-detail-section + .service-detail-section {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


/* =========================================================
   LISTAS DE BENEFÍCIOS
========================================================= */

.service-detail-list-grid {
    align-items: stretch;
}


.service-detail-list-item {
    min-width: 0;
}


.service-detail-list-item p,
.service-detail-list-item span,
.service-detail-list-item strong {
    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   OPÇÕES / PREÇOS
========================================================= */

.service-options-grid {
    align-items: stretch;
}


.service-option-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;

    overflow: hidden;
}


.service-option-card strong {
    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   SIDEBAR
========================================================= */

.service-detail-sidebar {
    position: relative;

    min-width: 0;
}


.service-detail-sidebar-card {
    position: sticky;

    top:
        calc(
            var(
                --header-height,
                86px
            ) + 28px
        );

    overflow: hidden;
}


.service-detail-sidebar-price {
    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   CTA DO SIDEBAR
========================================================= */

.service-detail-sidebar-actions {
    display: grid;

    gap: 12px;
}


.service-detail-sidebar-actions .btn {
    width: 100%;

    justify-content: center;
}


/* =========================================================
   SERVIÇOS RELACIONADOS
========================================================= */

.service-related-grid {
    align-items: stretch;
}


.service-related-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;
}


.service-related-card h3 {
    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   SETA NOS SERVIÇOS RELACIONADOS
========================================================= */

.service-related-card a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;
}


.service-related-card a::after {
    content: "→";

    color:
        var(
            --vip-gold,
            #d6a843
        );

    transition:
        transform
        180ms
        ease;
}


.service-related-card a:hover::after {
    transform:
        translateX(
            4px
        );
}


/* =========================================================
   NAVEGAÇÃO ANTERIOR / PRÓXIMO
========================================================= */

.service-detail-navigation {
    gap: 16px;
}


.service-detail-navigation a {
    position: relative;

    min-width: 0;

    overflow: hidden;
}


/* =========================================================
   LINK ANTERIOR
========================================================= */

.service-detail-navigation a:first-child::before {
    content: "←";

    margin-right: 9px;

    color:
        var(
            --vip-gold,
            #d6a843
        );
}


/* =========================================================
   LINK PRÓXIMO
========================================================= */

.service-detail-navigation a:last-child::after {
    content: "→";

    margin-left: 9px;

    color:
        var(
            --vip-gold,
            #d6a843
        );
}


/* =========================================================
   FAQ DAS PÁGINAS DE SERVIÇO
========================================================= */

.service-detail-faq {
    display: grid;

    gap: 12px;
}


.service-detail-faq details {
    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 18px;

    background:
        rgba(
            8,
            21,
            36,
            0.72
        );
}


.service-detail-faq details[open] {
    border-color:
        rgba(
            214,
            168,
            67,
            0.28
        );
}


.service-detail-faq summary {
    position: relative;

    display: block;

    padding:
        22px
        62px
        22px
        24px;

    cursor: pointer;

    list-style: none;

    font-family:
        var(
            --font-heading,
            "Montserrat",
            sans-serif
        );

    font-weight: 800;

    line-height: 1.4;

    color: #ffffff;
}


.service-detail-faq summary::-webkit-details-marker {
    display: none;
}


.service-detail-faq summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 22px;

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    transform:
        translateY(
            -50%
        );

    border:
        1px solid
        rgba(
            214,
            168,
            67,
            0.25
        );

    border-radius: 50%;

    color:
        var(
            --vip-gold,
            #d6a843
        );
}


.service-detail-faq details[open] summary::after {
    content: "−";
}


/* =========================================================
   FOOTER DAS PÁGINAS INDIVIDUAIS
========================================================= */

.service-detail-page .site-footer {
    padding-top: 72px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    background: #02060b;
}


.service-detail-page .footer-main {
    align-items: start;
}


.service-detail-page .footer-bottom {
    margin-top: 60px;

    padding:
        24px
        0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );
}


/* =========================================================
   REDES SOCIAIS
========================================================= */

.service-detail-page .footer-social {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 24px;
}


.service-detail-page .footer-social a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;
    height: 44px;

    flex:
        0 0
        44px;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.service-detail-page .footer-social img {
    display: block;

    width:
        20px !important;

    height:
        20px !important;

    object-fit: contain;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .service-detail-sidebar-card {
        position: relative;

        top: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .service-detail-page .site-header .brand {
        min-width: 0;
    }


    .service-detail-page .site-header .brand::before {
        font-size: 1rem;
    }


    .service-detail-page .site-header .brand::after {
        font-size: 0.44rem;
    }


    .service-detail-navigation {
        grid-template-columns:
            1fr !important;
    }


    .service-detail-faq summary {
        padding:
            20px
            58px
            20px
            20px;
    }


    .service-detail-faq summary::after {
        right: 18px;
    }

}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .service-detail-page .footer-social a {
        transition:
            transform
            180ms
            ease,
            border-color
            180ms
            ease,
            background-color
            180ms
            ease;
    }


    .service-detail-page .footer-social a:hover {
        transform:
            translateY(
                -3px
            );

        border-color:
            rgba(
                214,
                168,
                67,
                0.4
            );

        background:
            rgba(
                214,
                168,
                67,
                0.07
            );
    }

}