/* =========================================================
   VIP CAR ESTÉTICA AUTOMOTIVA
   Arquivo: components.css

   Responsável por:
   - Header e navegação
   - Botões
   - Cards de serviços
   - Cards de diferenciais
   - FAQ
   - Links especiais
   - Redes sociais
   - WhatsApp flutuante
   - Microinterações
   - Estados hover / focus / active
========================================================= */


/* =========================================================
   HEADER — ESTADO INICIAL
========================================================= */

.site-header {
    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 13, 0.78) 0%,
            rgba(3, 7, 13, 0.30) 75%,
            transparent 100%
        );

    border-bottom:
        1px solid transparent;
}


/* =========================================================
   HEADER — APÓS SCROLL

   O JavaScript futuramente adicionará a classe:
   .is-scrolled
========================================================= */

.site-header.is-scrolled {
    background:
        rgba(3, 7, 13, 0.88);

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.24);
}


/* =========================================================
   LOGO
========================================================= */

.brand:hover .brand-logo {
    transform:
        scale(1.025);
}

.brand:active .brand-logo {
    transform:
        scale(0.98);
}


/* =========================================================
   LINKS DO MENU DESKTOP
========================================================= */

.nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    color:
        var(--text-secondary);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.01em;

    transition:
        color var(--transition-fast);
}


/* =========================================================
   LINHA ANIMADA DO MENU
========================================================= */

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        var(--gradient-brand);

    border-radius:
        var(--radius-pill);

    box-shadow:
        0 0 15px
        rgba(214, 168, 67, 0.30);

    transition:
        width var(--transition-smooth);
}


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

.nav-link:hover {
    color:
        var(--white);
}

.nav-link:hover::after {
    width: 22px;
}


/* =========================================================
   LINK ATIVO
========================================================= */

.nav-link.active {
    color:
        var(--white);
}

.nav-link.active::after {
    width: 22px;
}


/* =========================================================
   BOTÕES — BASE
========================================================= */

.btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height:
        var(--button-height);

    padding:
        var(--button-padding-y)
        var(--button-padding-x);

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

    text-align:
        center;

    white-space:
        nowrap;

    isolation:
        isolate;

    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* =========================================================
   ÍCONES DOS BOTÕES
========================================================= */

.btn img,
.btn svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;
}


/* =========================================================
   BRILHO QUE PASSA PELO BOTÃO
========================================================= */

.btn::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    z-index: -1;

    width: 45%;
    height: 200%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );

    transition:
        left 650ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.btn:hover::before {
    left: 135%;
}


/* =========================================================
   INTERAÇÃO GLOBAL DO BOTÃO
========================================================= */

.btn:hover {
    transform:
        translateY(-2px);
}

.btn:active {
    transform:
        translateY(0)
        scale(
            var(--scale-button-active)
        );
}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.btn-primary {
    background:
        var(--gradient-brand);

    color:
        #090b0e;

    border-color:
        rgba(255, 223, 107, 0.25);

    box-shadow:
        0 9px 28px
        rgba(214, 168, 67, 0.18);
}

.btn-primary:hover {
    box-shadow:
        var(--shadow-gold-strong);

    color:
        #05070a;
}


/* =========================================================
   BOTÃO SECUNDÁRIO
========================================================= */

.btn-secondary {
    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--white);

    border-color:
        var(--border-light);

    backdrop-filter:
        blur(8px);

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

.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.075);

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

    box-shadow:
        var(--shadow-gold);
}


/* =========================================================
   BOTÃO WHATSAPP
========================================================= */

.btn-whatsapp {
    background:
        var(--whatsapp);

    color:
        #031109;

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        var(--shadow-whatsapp);
}

.btn-whatsapp:hover {
    background:
        var(--whatsapp-hover);

    box-shadow:
        0 14px 42px
        rgba(37, 211, 102, 0.32);
}


/* =========================================================
   BOTÃO GRANDE
========================================================= */

.btn-large {
    min-height:
        60px;

    padding-inline:
        30px;

    font-size:
        var(--font-size-base);
}


/* =========================================================
   SETA DOS BOTÕES
========================================================= */

.btn-arrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    transition:
        transform var(--transition-normal);
}

.btn:hover .btn-arrow {
    transform:
        translateY(3px);
}


/* =========================================================
   MENU MOBILE — BOTÃO HAMBURGUER
========================================================= */

.menu-toggle {
    border:
        1px solid
        var(--border-light);

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

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal);
}

.menu-toggle:hover {
    background:
        rgba(255, 255, 255, 0.075);

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


/* =========================================================
   HAMBURGUER ABERTO
========================================================= */

.menu-toggle.is-open span:nth-child(1) {
    transform:
        rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;

    transform:
        scaleX(0);
}

.menu-toggle.is-open span:nth-child(3) {
    transform:
        rotate(-45deg);
}


/* =========================================================
   MENU MOBILE — LINKS
========================================================= */

.mobile-nav > a:not(.btn) {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 56px;

    padding:
        0
        8px;

    border-bottom:
        1px solid
        var(--border-subtle);

    color:
        var(--text-secondary);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-semibold);

    transition:
        color var(--transition-fast),
        padding-left var(--transition-normal);
}

.mobile-nav > a:not(.btn):hover {
    padding-left:
        15px;

    color:
        var(--vip-gold-light);
}

.mobile-nav .btn {
    width: 100%;

    margin-top:
        var(--space-6);
}


/* =========================================================
   HERO — BADGE
========================================================= */

.hero-badge {
    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   HERO — PONTO PULSANTE
========================================================= */

.hero-badge .dot {
    position: relative;
}

.hero-badge .dot::after {
    content: "";

    position: absolute;

    inset: -5px;

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

    border-radius: 50%;

    opacity: 0.45;
}


/* =========================================================
   INDICADOR DE SCROLL
========================================================= */

.scroll-indicator {
    transition:
        color var(--transition-fast),
        opacity var(--transition-normal);
}

.scroll-indicator:hover {
    color:
        var(--vip-gold-light);
}

.scroll-indicator:hover .scroll-mouse {
    border-color:
        rgba(214, 168, 67, 0.55);
}


/* =========================================================
   CARDS DE SERVIÇOS
========================================================= */

.service-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 410px;

    padding:
        clamp(
            25px,
            3vw,
            34px
        );

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(12, 25, 41, 0.87),
            rgba(6, 13, 22, 0.96)
        );

    border:
        1px solid
        var(--border-subtle);

    border-radius:
        var(--radius-lg);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.18);

    isolation:
        isolate;

    transition:
        transform var(--transition-smooth),
        border-color var(--transition-normal),
        box-shadow var(--transition-smooth),
        background var(--transition-normal);
}


/* =========================================================
   GLOW DOS CARDS
========================================================= */

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

    position: absolute;

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

    z-index: -2;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(61, 110, 242, 0.14),
            transparent 68%
        );

    opacity: 0;

    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}


/* =========================================================
   LINHA DOURADA DO CARD
========================================================= */

.service-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: -1;

    width: 100%;
    height: 3px;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        var(--gradient-brand);

    transition:
        transform var(--transition-smooth);
}


/* =========================================================
   HOVER CARD DE SERVIÇO
========================================================= */

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

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

    background:
        linear-gradient(
            145deg,
            rgba(15, 31, 51, 0.94),
            rgba(6, 13, 22, 0.98)
        );

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, 0.34);
}

.service-card:hover::before {
    opacity: 1;

    transform:
        scale(1.18);
}

.service-card:hover::after {
    transform:
        scaleX(1);
}


/* =========================================================
   CARD DESTACADO
========================================================= */

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

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(214, 168, 67, 0.09),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(15, 29, 46, 0.94),
            rgba(6, 13, 22, 0.98)
        );
}


/* =========================================================
   LABEL DE CARD
========================================================= */

.service-card-label {
    position: absolute;

    top: 20px;
    right: 20px;

    padding:
        6px
        11px;

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

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

    border-radius:
        var(--radius-pill);

    color:
        var(--vip-gold-light);

    font-size:
        0.65rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-wide);

    text-transform:
        uppercase;
}


/* =========================================================
   NÚMERO DO SERVIÇO
========================================================= */

.service-card-number {
    margin-bottom:
        var(--space-6);

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

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-wider);

    transition:
        color var(--transition-normal);
}

.service-card:hover .service-card-number {
    color:
        rgba(214, 168, 67, 0.55);
}


/* =========================================================
   ÍCONE DO SERVIÇO
========================================================= */

.service-card-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom:
        var(--space-6);

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

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(214, 168, 67, 0.10),
            rgba(214, 168, 67, 0.025)
        );

    color:
        var(--vip-gold-light);

    font-size:
        1.5rem;

    box-shadow:
        inset 0 0 20px
        rgba(214, 168, 67, 0.03);

    transition:
        transform var(--transition-bounce),
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}

.service-card:hover .service-card-icon {
    transform:
        rotate(-5deg)
        scale(1.08);

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

    box-shadow:
        var(--shadow-gold);
}


/* =========================================================
   TÍTULO SERVIÇO
========================================================= */

.service-card h3 {
    margin-bottom:
        var(--space-4);

    color:
        var(--white);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.55rem
        );

    transition:
        color var(--transition-normal);
}

.service-card:hover h3 {
    color:
        var(--vip-gold-light);
}


/* =========================================================
   TEXTO SERVIÇO
========================================================= */

.service-card > p {
    margin-bottom:
        var(--space-6);

    color:
        var(--text-muted);

    font-size:
        var(--font-size-sm);
}


/* =========================================================
   PREÇO DO SERVIÇO
========================================================= */

.service-price {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-top:
        auto;

    padding-top:
        var(--space-5);

    border-top:
        1px solid
        var(--border-subtle);

    color:
        var(--text-muted);

    font-size:
        var(--font-size-xs);

    text-transform:
        uppercase;

    letter-spacing:
        var(--letter-spacing-wide);
}

.service-price strong {
    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-tight);

    text-transform:
        none;
}


/* =========================================================
   LINK DO SERVIÇO
========================================================= */

.service-link {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-3);

    margin-top:
        var(--space-6);

    color:
        var(--text-secondary);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}

.service-link span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border:
        1px solid
        var(--border-light);

    border-radius:
        50%;

    transition:
        transform var(--transition-normal),
        color var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal);
}

.service-link:hover {
    color:
        var(--vip-gold-light);
}

.service-link:hover span {
    transform:
        translateX(4px);

    color:
        #090b0e;

    background:
        var(--vip-gold);

    border-color:
        var(--vip-gold);
}


/* =========================================================
   BEFORE / AFTER — PLACEHOLDER
========================================================= */

.before-after-placeholder {
    border:
        1px solid transparent;
}

.before-after-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
        6px
        13px;

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

    border-radius:
        var(--radius-pill);

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

    color:
        var(--vip-gold-light);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-wide);

    text-transform:
        uppercase;
}


/* =========================================================
   IMAGENS DA SEÇÃO SOBRE
========================================================= */

.about-image-main,
.about-image-detail {
    isolation:
        isolate;
}

.about-image-main::after,
.about-image-detail::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

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

.about-image-main img,
.about-image-detail img {
    transition:
        transform 900ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.about-image-main:hover img,
.about-image-detail:hover img {
    transform:
        scale(1.045);
}


/* =========================================================
   BENEFÍCIOS SOBRE
========================================================= */

.about-benefit {
    padding:
        13px
        14px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-md);

    transition:
        border-color var(--transition-normal),
        background var(--transition-normal),
        transform var(--transition-normal);
}

.about-benefit:hover {
    transform:
        translateX(5px);

    border-color:
        var(--border-subtle);

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


/* =========================================================
   TEXT LINK
========================================================= */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--text-secondary);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    transition:
        color var(--transition-normal);
}

.text-link span {
    transition:
        transform var(--transition-normal);
}

.text-link:hover {
    color:
        var(--vip-gold-light);
}

.text-link:hover span {
    transform:
        translate(
            3px,
            -3px
        );
}


/* =========================================================
   CARDS DE DIFERENCIAIS
========================================================= */

.benefit-card {
    position: relative;

    min-height: 250px;

    padding:
        clamp(
            26px,
            4vw,
            42px
        );

    border-right:
        1px solid
        var(--border-subtle);

    overflow: hidden;

    transition:
        background var(--transition-normal);
}

.benefit-card:last-child {
    border-right:
        none;
}

.benefit-card::after {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    pointer-events: none;

    border-radius: 50%;

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

    opacity: 0;

    transition:
        opacity var(--transition-slow);
}

.benefit-card:hover {
    background:
        rgba(255, 255, 255, 0.022);
}

.benefit-card:hover::after {
    opacity: 1;
}


/* =========================================================
   NÚMERO DIFERENCIAIS
========================================================= */

.benefit-number {
    display: block;

    margin-bottom:
        var(--space-8);

    color:
        var(--vip-gold);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-ultra);
}


/* =========================================================
   TITULO DIFERENCIAL
========================================================= */

.benefit-card h3 {
    margin-bottom:
        var(--space-4);

    color:
        var(--white);
}

.benefit-card p {
    color:
        var(--text-muted);

    font-size:
        var(--font-size-sm);
}


/* =========================================================
   GALERIA
========================================================= */

.gallery-item {
    transition:
        transform var(--transition-smooth),
        border-color var(--transition-normal),
        box-shadow var(--transition-smooth);
}

.gallery-item:hover {
    transform:
        translateY(-5px);

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

    box-shadow:
        var(--shadow-lg);
}

.gallery-item img {
    transition:
        transform 900ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

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


/* =========================================================
   CTA PRINCIPAL
========================================================= */

.contact-cta-box {
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-slow);
}

.contact-cta-box:hover {
    border-color:
        rgba(214, 168, 67, 0.33);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.48),
        0 0 60px
        rgba(214, 168, 67, 0.05);
}


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

.faq-item {
    position: relative;

    overflow: hidden;

    background:
        rgba(9, 19, 31, 0.72);

    border:
        1px solid
        var(--border-subtle);

    border-radius:
        var(--radius-md);

    transition:
        border-color var(--transition-normal),
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* =========================================================
   FAQ ABERTA
========================================================= */

.faq-item[open] {
    border-color:
        rgba(214, 168, 67, 0.25);

    background:
        rgba(11, 23, 38, 0.90);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   SUMMARY FAQ
========================================================= */

.faq-item summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-5);

    min-height: 78px;

    padding:
        20px
        24px;

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-semibold);

    transition:
        color var(--transition-normal);
}

.faq-item summary:hover {
    color:
        var(--vip-gold-light);
}


/* =========================================================
   ÍCONE FAQ
========================================================= */

.faq-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border:
        1px solid
        var(--border-light);

    border-radius:
        50%;

    color:
        var(--vip-gold-light);

    font-size:
        1.35rem;

    font-weight:
        var(--font-weight-light);

    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal);
}

.faq-item[open] .faq-icon {
    transform:
        rotate(45deg);

    background:
        var(--vip-gold);

    border-color:
        var(--vip-gold);

    color:
        #090b0e;
}


/* =========================================================
   RESPOSTA FAQ
========================================================= */

.faq-answer {
    padding:
        0
        24px
        24px;

    border-top:
        1px solid
        transparent;
}

.faq-item[open] .faq-answer {
    border-top-color:
        var(--border-subtle);
}

.faq-answer p {
    max-width:
        760px;

    padding-top:
        20px;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-sm);
}


/* =========================================================
   INFORMAÇÕES DE LOCALIZAÇÃO
========================================================= */

.location-info {
    padding:
        11px;

    margin-left:
        -11px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-md);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.location-info:hover {
    transform:
        translateX(5px);

    border-color:
        var(--border-subtle);

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

.location-icon {
    transition:
        transform var(--transition-bounce),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.location-info:hover .location-icon {
    transform:
        scale(1.07);

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

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


/* =========================================================
   MAPA
========================================================= */

.location-map {
    transition:
        transform var(--transition-smooth),
        border-color var(--transition-normal),
        box-shadow var(--transition-slow);
}

.location-map:hover {
    transform:
        translateY(-4px);

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

    box-shadow:
        0 32px 85px
        rgba(0, 0, 0, 0.48);
}


/* =========================================================
   FOOTER — LINKS
========================================================= */

.footer-column a {
    position: relative;

    color:
        var(--text-muted);

    font-size:
        var(--font-size-sm);

    transition:
        color var(--transition-fast),
        transform var(--transition-normal);
}

.footer-column a:hover {
    transform:
        translateX(4px);

    color:
        var(--vip-gold-light);
}


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

.footer-social a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        var(--border-light);

    border-radius:
        50%;

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

    transition:
        transform var(--transition-bounce),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.footer-social a img {
    width: 19px;
    height: 19px;
}

.footer-social a:hover {
    transform:
        translateY(-4px)
        scale(1.05);

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

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

    box-shadow:
        var(--shadow-gold);
}


/* =========================================================
   WHATSAPP FLUTUANTE
========================================================= */

.floating-whatsapp-icon {
    position: relative;

    transition:
        transform var(--transition-bounce),
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* =========================================================
   CÍRCULO EXTERNO WHATSAPP
========================================================= */

.floating-whatsapp-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    z-index: -1;

    border:
        1px solid
        rgba(37, 211, 102, 0.30);

    border-radius: 50%;
}


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

.floating-whatsapp:hover
.floating-whatsapp-icon {
    transform:
        scale(1.08);

    background:
        var(--whatsapp-hover);

    box-shadow:
        0 15px 45px
        rgba(37, 211, 102, 0.36);
}


/* =========================================================
   TOOLTIP WHATSAPP
========================================================= */

.floating-whatsapp-tooltip {
    opacity: 0;

    visibility: hidden;

    transform:
        translateX(12px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-smooth);
}

.floating-whatsapp:hover
.floating-whatsapp-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);
}


/* =========================================================
   ESTADOS DE FOCO DOS COMPONENTES
========================================================= */

.btn:focus-visible,
.nav-link:focus-visible,
.service-link:focus-visible,
.text-link:focus-visible,
.footer-column a:focus-visible,
.footer-social a:focus-visible,
.floating-whatsapp:focus-visible {
    outline:
        2px solid
        var(--vip-gold);

    outline-offset:
        4px;
}


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

@media (max-width: 1024px) {

    .service-card {
        min-height:
            390px;
    }

    .floating-whatsapp-tooltip {
        display:
            none;
    }
}


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

@media (max-width: 768px) {

    .btn {
        min-height:
            52px;

        padding-inline:
            22px;
    }

    .btn-large {
        min-height:
            56px;
    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .service-card {
        min-height:
            auto;

        padding:
            25px;
    }

    .service-card:hover {
        transform:
            translateY(-4px);
    }

    .service-card-label {
        top: 16px;
        right: 16px;
    }

    .service-card-icon {
        width: 50px;
        height: 50px;
    }


    /* -----------------------------------------------------
       BENEFÍCIOS
    ----------------------------------------------------- */

    .benefit-card {
        min-height:
            auto;

        border-right:
            none;

        border-bottom:
            1px solid
            var(--border-subtle);
    }

    .benefit-card:last-child {
        border-bottom:
            none;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-item summary {
        min-height:
            72px;

        padding:
            18px
            19px;

        font-size:
            var(--font-size-sm);
    }

    .faq-answer {
        padding:
            0
            19px
            20px;
    }

    .faq-icon {
        width: 31px;
        height: 31px;

        font-size:
            1.2rem;
    }


    /* -----------------------------------------------------
       EFEITOS HOVER MOBILE
    ----------------------------------------------------- */

    .about-benefit:hover,
    .location-info:hover {
        transform:
            none;
    }

    .gallery-item:hover {
        transform:
            none;
    }

    .location-map:hover {
        transform:
            none;
    }
}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 480px) {

    .btn {
        width: 100%;
    }

    .hero-badge {
        max-width:
            100%;
    }

    .service-card {
        padding:
            22px;
    }

    .service-price strong {
        font-size:
            var(--font-size-lg);
    }

    .faq-item summary {
        gap:
            var(--space-3);
    }

    .faq-icon {
        width: 30px;
        height: 30px;
    }
}


/* =========================================================
   DISPOSITIVOS COM MOUSE
   Evita depender de hover em telas touch.
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .service-card {
        will-change:
            transform;
    }

    .gallery-item {
        will-change:
            transform;
    }

    .btn {
        will-change:
            transform;
    }
}


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

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

    .service-card:hover,
    .gallery-item:hover,
    .location-map:hover,
    .floating-whatsapp:hover
    .floating-whatsapp-icon {
        transform:
            none;
    }

    .btn::before {
        display:
            none;
    }
}

/* =========================================================
   VIP CAR — FAQ FINAL
========================================================= */

.faq-list {
    display: grid;

    gap: 12px;
}


.faq-item {
    position: relative;

    overflow: hidden;

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

    border-radius: 18px;

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

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


.faq-item[open] {
    border-color:
        rgba(214, 168, 67, 0.32);

    background:
        rgba(10, 24, 40, 0.92);
}


/* GARANTIA:
   fechado = conteúdo escondido
*/

.faq-item:not([open]) > .faq-content {
    display: none !important;
}


.faq-item[open] > .faq-content {
    display: block !important;
}


/* =========================================================
   PERGUNTA
========================================================= */

.faq-item summary {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    min-height: 76px;

    padding:
        22px
        64px
        22px
        24px;

    cursor: pointer;

    list-style: none;

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

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.4;

    color: #ffffff;

    user-select: none;
}


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


.faq-item summary::marker {
    display: none;
    content: "";
}


/* =========================================================
   + / -
========================================================= */

.faq-item summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 24px;

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    transform:
        translateY(-50%);

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

    border-radius: 50%;

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

    font-size: 1.1rem;

    font-weight: 700;

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

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


.faq-item[open] summary::after {
    content: "−";

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


/* =========================================================
   RESPOSTA
========================================================= */

.faq-content {
    padding:
        0
        24px
        24px;
}


.faq-content p {
    max-width: 850px;

    margin: 0;

    padding-top: 18px;

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

    font-size: 0.95rem;

    line-height: 1.7;

    color:
        var(--text-secondary, #adb7c5);
}


@media (hover: hover) {

    .faq-item:hover {
        border-color:
            rgba(214, 168, 67, 0.22);
    }

}


@media (max-width: 600px) {

    .faq-item summary {
        min-height: 70px;

        padding:
            20px
            58px
            20px
            20px;

        font-size: 0.92rem;
    }


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


    .faq-content {
        padding:
            0
            20px
            20px;
    }

}

/* =========================================================
   FOOTER — REDES SOCIAIS
========================================================= */

.footer-social {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 24px;
}


.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);

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


.footer-social a img {
    display: block;

    width: 20px !important;
    height: 20px !important;

    max-width: none;

    object-fit: contain;
}


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

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

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

/* =========================================================
   VIP CAR — MARCA TEXTUAL GLOBAL
========================================================= */

.brand-text {
    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 3px;

    line-height: 1;
}


.brand-text strong {
    display: block;

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

    font-size: 1.22rem;

    font-weight: 900;

    letter-spacing: -0.04em;

    color: #ffffff;
}


.brand-text small {
    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);
}


/* =========================================================
   FOOTER FINAL
========================================================= */

.site-footer {
    position: relative;

    padding-top: 72px;

    background:
        #02060b;

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


.footer-main {
    align-items: start;
}


.footer-brand .brand {
    display: inline-flex;

    margin-bottom: 24px;
}


.footer-brand .brand-text strong {
    font-size: 1.48rem;
}


.footer-brand .brand-text small {
    font-size: 0.57rem;
}


.footer-brand > p {
    max-width: 360px;

    line-height: 1.7;
}


.footer-bottom {
    margin-top: 60px;

    padding:
        24px
        0;

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