/* =================================================================== */
/*                     BSIDE SKIN - TEMA PRINCIPAL                     */
/* =================================================================== */
/* Versão 1.0 - Refatorado e Unificado */


/* ============================================= */
/*          1. FONTES E VARIÁVEIS GLOBAIS        */
/* ============================================= */

/* --- 1.1 Declaração das Fontes Customizadas --- */

/* Fonte para Títulos e Chamadas (Lorison) */
@font-face {
    font-family: 'FonteTitulos';
    src: url('../fonts/Lorison.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Fonte Decorativa (BoiledKorn) */
@font-face {
    font-family: 'FonteDecorativa';
    src: url('../fonts/BoiledKorn-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Fonte Principal (SanDiego) com todos os seus pesos */
@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-Thin.otf') format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-ExtraLight.otf') format('opentype');
    font-weight: 200;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego.otf') format('opentype');
    font-weight: 400; /* Regular / Normal */
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-Medium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-SemiBold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-Bold.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-ExtraBold.otf') format('opentype');
    font-weight: 800;
}

@font-face {
    font-family: 'FontePrincipal';
    src: url('../fonts/SanDiego-Black.otf') format('opentype');
    font-weight: 900;
}


/* --- 1.2 Variáveis de Cores e Tema --- */
:root {
    /* Paleta de Cores BSIDE SKIN */
    --bside-sand: #D0B066; /* Golden Sand */
    --bside-white: #FFFFF0; /* Off White (corrigido #9fffcfo para FFFFF0) */
    --bside-black: #000000; /* Pure Black */
    --bside-cactus: #668D49; /* Young Cactus */
    /* Aplicação no Tema Dark */
    --theme-bg-primary: #121212; /* Fundo principal (quase preto) */
    --theme-bg-secondary: #1A1A1A; /* Fundo de cards, etc. */
    --theme-bg-tertiary: #2C2C2E; /* Fundo para hover, dropdowns */
    --theme-border-color: #3A3A3C; /* Bordas sutis */

    --theme-text-primary: var(--bside-sand); /* Textos principais e de destaque */
    --theme-text-secondary: var(--bside-white); /* Textos de apoio, parágrafos */
    --theme-text-on-accent: var(--bside-black); /* Texto para usar sobre fundos claros (sand/white) */

    --theme-accent-primary: var(--bside-sand); /* Links, botões, ênfase principal */
    --theme-accent-primary-hover: color-mix(in srgb, var(--bside-sand) 85%, #fff); /* Sand um pouco mais claro */
    /* Cores de Sistema */
    --theme-accent-success: var(--bside-cactus);
    --theme-accent-danger: #e53e3e;
    /* Tamanhos e Efeitos */
    --theme-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3);
    --theme-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --theme-focus-ring-color: rgba(208, 176, 102, 0.25);
    --theme-border-radius: 0.5rem;
}


/* ============================================= */
/*          2. ESTILOS GLOBAIS (BASE)            */
/* ============================================= */

body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-secondary); /* Usa Off White para parágrafos */
    font-family: 'FontePrincipal', sans-serif;
    font-weight: 400; /* Regular */
    line-height: 1.6;
}

    /* ============================================= */
    /*       BACKGROUND HALFTONE FIXO (RESPONSIVO)   */
    /* ============================================= */

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('/img/elementos/halftones/Halftone-07-byGhostlyPixels.png');
        background-repeat: repeat;
        opacity: 0.15;
        z-index: -1;
        pointer-events: none;
        /* ======================================================= */
        /*   1. TAMANHO PADRÃO (PC / Landscape)                    */
        /* ======================================================= */
        background-size: 1920px 1080px;
    }

/* ======================================================= */
/*   2. MEDIA QUERY PARA DISPOSITIVOS EM RETRATO (Mobile)  */
/* ======================================================= */
@media (orientation: portrait) {
    body::before {
        background-size: 1080px 1080px;
    }
}

h1, h2, h3, h4, h5, h6, .display-5 {
    font-family: 'FonteTitulos', sans-serif;
    color: var(--theme-text-primary); /* Usa Golden Sand para títulos */
}

a {
    color: var(--theme-accent-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

    a:hover {
        color: var(--theme-accent-primary-hover);
    }

hr {
    border-top: 1px solid var(--theme-border-color);
    opacity: 0.5;
}

strong, b {
    font-weight: 700; /* O navegador usará SanDiego-Bold.otf */
    color: var(--theme-text-primary);
}

/* Classe para usar a fonte decorativa */
.texto-decorativo {
    font-family: 'FonteDecorativa', sans-serif;
}

.main-container {
    padding: 1.5rem;
}

@media (min-width: 992px) {
    .main-container {
        padding: 2rem;
    }
}


/* ============================================= */
/*          3. LAYOUT (HEADER, FOOTER)           */
/* ============================================= */

.site-header {
    background-color: var(--theme-bg-secondary);
    border-bottom: 1px solid var(--theme-border-color);
}

.site-footer {
    background-color: var(--theme-bg-secondary);
    border-top: 1px solid var(--theme-border-color);
}

.navbar-brand {
    font-family: 'FonteTitulos', sans-serif;
    color: var(--theme-text-primary) !important;
}

.navbar-logo-image {
    max-height: 40px;
    width: auto;
}

.nav-link {
    font-family: 'FontePrincipal', sans-serif;
    color: var(--theme-text-secondary) !important;
    font-weight: 600; /* SemiBold */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .nav-link:hover, .nav-link.active {
        color: var(--theme-text-primary) !important;
    }

/* Header transparente para Landing Page */
.layout-publico .site-header {
    background-color: transparent !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1030;
    transition: background-color 0.3s ease-in-out;
}

    .layout-publico .site-header.scrolled {
        background-color: var(--theme-bg-secondary) !important;
        box-shadow: var(--theme-shadow-md);
    }

    .layout-publico .site-header .nav-link,
    .layout-publico .site-header .navbar-brand {
        color: var(--bside-white) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }


/* ============================================= */
/*          4. FORMULÁRIOS E BOTÕES              */
/* ============================================= */

/* --- Botões --- */
.btn {
    border-radius: calc(var(--theme-border-radius) - 2px);
    font-family: 'FontePrincipal', sans-serif;
    font-weight: 600; /* SemiBold */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
}

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

.btn-primary {
    background-color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
    color: var(--theme-text-on-accent);
}

    .btn-primary:hover {
        background-color: var(--theme-accent-primary-hover);
        border-color: var(--theme-accent-primary-hover);
        color: var(--theme-text-on-accent);
    }

.btn-secondary, .btn-outline-light {
    border-color: var(--theme-border-color);
    color: var(--theme-text-secondary);
    background-color: transparent;
}

    .btn-secondary:hover, .btn-outline-light:hover {
        background-color: var(--theme-border-color);
        color: var(--theme-text-primary);
    }

.btn-danger {
    background-color: var(--theme-accent-danger);
    border-color: var(--theme-accent-danger);
    color: var(--bside-white);
}

/* --- Formulários --- */
.form-control, .form-select {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--theme-accent-primary);
        box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
    }

/* Validação */
.text-danger, .validation-summary-errors li {
    color: var(--theme-accent-danger) !important;
}


/* ============================================= */
/*          5. COMPONENTES (CARDS, ETC.)         */
/* ============================================= */

.card {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border-color);
}

    .page-header h1 {
        margin-bottom: 0;
        font-size: 1.75rem;
    }


/* ============================================= */
/*      6. ESTILOS ESPECÍFICOS DE PÁGINAS        */
/* ============================================= */

/* --- Seção Hero da Landing Page (VERSÃO MELHORADA E RESPONSIVA) --- */
.hero-section-custom {
    position: relative; /* Contexto de empilhamento para os filhos */
    height: 90vh;
    min-height: 650px;
    max-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--theme-text-primary);
    overflow: hidden;
}

.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1: Fundo */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.70);
    z-index: 2; /* Camada 2: Overlay por cima do fundo */
}

.hero-content {
    position: relative;
    z-index: 3; /* Camada 3: Conteúdo por cima de tudo */
}

.hero-logo-image {
    display: block;
    margin: 0 auto 1.5rem auto;
    max-width: 500px;
    width: 80%;
    height: auto;
}

.hero-subheading {
    font-size: 1rem;
    font-family: 'FontePrincipal', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}


/* --- Seções About e Transition --- */
.about-section, .transition-section {
    padding: 80px 0;
}

    .about-section .content ul {
        list-style: none;
        padding: 0;
    }

        .about-section .content ul li {
            padding: 10px 0;
            display: flex;
            align-items: flex-start;
        }

        .about-section .content ul i {
            font-size: 1.5rem;
            margin-right: 15px;
        }

/* --- Estilo para o Elemento de Hover Criado via JS --- */

.artist-card {
    /* É importante que o card seja a referência de posicionamento */
    position: relative;
    overflow: hidden; /* Opcional, mas ajuda a conter a animação inicial */
}

/* Esta é a classe que daremos ao nosso PNG via JavaScript */
.hover-decoration-element {
    position: absolute;
    bottom: 0;
    left: 35%;
    /* Tamanho do seu PNG */
    width: 450px;
    height: 450px;
    /* Começa invisível e um pouco para baixo */
    opacity: 0;
    transform: translate(-50%, 20px); /* Começa 20px abaixo e centralizado */
    /* Fica atrás do conteúdo */
    z-index: 1;
    /* Animação suave */
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none; /* Garante que a imagem não interfira com o mouse */
}

    /* Quando o elemento estiver "ativo", ele fica visível e sobe */
    .hover-decoration-element.visible {
        opacity: 0.1;
        transform: translate(-50%, 0); /* Sobe para a posição final */
    }

/* Garantindo que o conteúdo do card fique na frente do PNG */
.artist-card .artist-card-image-wrapper,
.artist-card .artist-name,
.artist-card .artist-style,
.artist-card .fs-4 {
    position: relative;
    z-index: 2; /* Coloca todo o conteúdo na frente */
}


.artist-card {
    position: relative; /* ESSENCIAL: para posicionar o pseudo-elemento */
    overflow: hidden;   /* ESSENCIAL: para esconder o PNG antes da animação */
    padding: 2rem 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1; /* Garante que o card fique acima de outros elementos da página */
}

/* Pseudo-elemento que vai conter nosso PNG */
.artist-card::after {
    content: ''; /* Obrigatório para pseudo-elementos */
    position: absolute;
    bottom: 0;
    left: 50%;
    
    /* Tamanho do seu PNG - ajuste a largura, a altura será automática */
    width: 280px; 
    height: 280px;

    /* Caminho para a sua imagem PNG */
    background-image: url('../img/elementos/artist-hover-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Posição inicial (escondido) */
    transform: translate(-50%, 100%); /* Começa totalmente abaixo e centralizado */
    opacity: 0; /* Começa invisível */
    
    /* Camada: fica atrás do conteúdo, mas visível */
    z-index: -1; 
    
    /* Animação */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}

/* A MÁGICA DO HOVER */
.artist-card:hover::after {
    transform: translate(-50%, 0); /* Sobe para a posição final (centralizado) */
    opacity: 1; /* Fica visível */
}


.artist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-lg);
}

.artist-card-image-wrapper {
    /* Adicionamos position relative aqui para garantir que a imagem fique na frente do ::after */
    position: relative;
    z-index: 2; /* Garante que a foto do artista fique na frente do PNG */
    margin-bottom: 1.5rem;
    width: 240px;
    height: 240px;
}

.artist-card-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.artist-card .artist-name {
    font-family: 'FonteTitulos', sans-serif; /* Usa Lorison */
    text-transform: uppercase; /* Transforma em CAIXA ALTA */
    font-size: 2.15rem;
    letter-spacing: 1.8px; /* Espaçamento sutil para maiúsculas */
    margin-bottom: 0.01rem; /* Aumenta um pouco o espaço abaixo */
    color: var(--theme-text-primary);
}

/* ESTILO do artista com a fonte principal (SanDiego) */
.artist-card .artist-style {
    font-family: 'FontePrincipal', sans-serif; /* Usa SanDiego */
    font-weight: 300; /* Peso Regular */
    text-transform: uppercase; /* Mantém o estilo de caixa alta */
    letter-spacing: 1.1px;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin-bottom: 1rem;
}


/* --- Card de Projeto (REFINAMENTO VISUAL) --- */
.project-card {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .project-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--theme-shadow-lg);
        border-color: var(--bside-sand); /* Borda fica dourada no hover */
    }

    /* Imagem do Card (mantém o efeito de zoom) */
    .project-card .card-img-container {
        height: 350px;
        overflow: hidden;
    }

    .project-card .card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .project-card:hover .card-img-top {
        transform: scale(1.05);
    }

    /* Corpo do Card com espaçamento ajustado */
    .project-card .card-body {
        padding: 1.5rem; /* Aumenta o espaçamento interno geral */
    }

    /* Categoria (ex: Blackwork) */
    .project-card .card-subtitle {
        font-family: 'FontePrincipal', sans-serif;
        font-weight: 600; /* SemiBold */
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--theme-text-secondary); /* Off White */
        margin-bottom: 0.5rem; /* Mais espaço abaixo da categoria */
    }

    /* Título do Projeto (ex: Lunar Owl) */
    .project-card .card-title {
        font-family: 'FonteTitulos', sans-serif; /* Usa Lorison */
        text-transform: uppercase; /* Coloca em caixa alta */
        font-size: 1.6rem; /* Tamanho ajustado */
        color: var(--theme-text-primary); /* Golden Sand */
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    /* Nome do Artista (ex: por Ana Maria) */
    .project-card .card-body p {
        font-family: 'FontePrincipal', sans-serif;
        font-size: 0.9rem;
        font-weight: 400; /* Regular */
        color: var(--theme-text-secondary); /* Off White */
        margin-bottom: 1.5rem !important; /* Aumenta o espaço antes do preço */
    }

    /* Preço */
    .project-card .project-price {
        font-family: 'FontePrincipal', sans-serif;
        font-size: 1.75rem;
        font-weight: 700; /* Bold */
        color: var(--theme-text-primary); /* Golden Sand */
        line-height: 1;
    }

    /* Ícones Sociais (apenas ajuste de cor no hover) */
    .project-card .fs-4 a {
        color: var(--theme-text-secondary);
        transition: color 0.2s ease;
    }

        .project-card .fs-4 a:hover {
            color: var(--theme-text-primary); /* Ícones ficam dourados no hover */
        }


/* --- Página de Autenticação --- */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-card-custom {
    width: 100%;
    max-width: 480px;
    background-color: var(--theme-bg-secondary);
    padding: 2.5rem;
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-shadow-lg);
    border: 1px solid var(--theme-border-color);
}


/* --- Página de Contato --- */
.contact-section {
    padding: 80px 0;
}

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 40%;
    height: 0;
    overflow: hidden;
    border-radius: var(--theme-border-radius);
    max-height: 450px;
}

    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.contact-details-wrapper {
    margin-top: 5rem;
}

.contact-info-item {
    text-align: center;
    margin-bottom: 2.5rem;
}

    .contact-info-item .icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .contact-info-item h5 {
        text-transform: uppercase;
        font-size: 1rem;
    }




/* --- Decoração para Títulos de Seção --- */

#artistas .text-center h2 {
    position: relative; /* Essencial para posicionar os pseudo-elementos */
    display: inline-block; /* Garante que o container se ajuste ao tamanho do texto */
    padding: 0 4rem; /* Cria espaço para os elementos laterais */
}



/* ============================================= */
/*     ESTILOS PARA O CARROSSEL (V2)             */
/* ============================================= */
.about-image-container {
    position: relative;
    height: 450px;
    width: 100%;
    border-radius: var(--theme-border-radius);
    overflow: hidden;
}

.about-carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 1;
}

    .about-carousel-image.active {
        opacity: 1;
        z-index: 2;
    }

.about-carousel-content .carousel-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

    .about-carousel-content .carousel-slide.active {
        display: block;
        opacity: 1;
    }

.carousel-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    padding: 5px;
}

    .carousel-controls .control {
        display: inline-block;
        width: 40px;
        height: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        font-size: 1.2rem;
        cursor: pointer;
        transition: color 0.3s ease;
    }

        .carousel-controls .control:hover {
            color: var(--theme-accent-primary-hover);
        }


/* Sistema de decorações */
.decoration-element {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Elemento de apoio 04 */
.deco-personalizados-04 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Personalizados/PNG/OffWhite/bside_personalizados_04.png');
    opacity: 0.15;
}

/* Elemento de apoio 01 */
.deco-apoio-01 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_01.png');
    opacity: 0.15;
}


/* Elemento de apoio 02 */
.deco-apoio-02 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_02.png');
    opacity: 0.15;
}


/* Elemento de apoio 03 */
.deco-apoio-03 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_03.png');
    opacity: 0.15;
}

/* Elemento de apoio 04 */
.deco-apoio-04 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_04.png');
    opacity: 0.15;
}

/* Elemento de apoio 05 */
.deco-apoio-05 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_05.png');
    opacity: 0.15;
}

/* Elemento de apoio 06 */
.deco-apoio-06 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_06.png');
    opacity: 0.15;
}

/* Elemento de apoio 07 */
.deco-apoio-07 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_07.png');
    opacity: 0.15;
}

/* Elemento de apoio 08 */
.deco-apoio-08 {
    width: 80px;
    height: 80px;
    background-image: url('/img/elementos/elementos_apoio/Apoio/PNG/OffWhite/bside_apoio_08.png');
    opacity: 0.15;
}

/* Posicionamentos prontos */
.deco-top-right {
    top: 40px;
    right: 40px;
}

.deco-top-left {
    top: 40px;
    left: 40px;
}

.deco-bottom-left {
    bottom: 40px;
    left: 40px;
}

.deco-bottom-center {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.deco-bottom-right {
    bottom: 40px;
    right: 40px;
}

.deco-bottom-left2 {
    bottom: 40px;
    left: 30px;
}

.deco-left-center {
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

.deco-right-center {
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

/* Tamanhos variados */
.deco-small {
    width: 60px !important;
    height: 60px !important;
}

.deco-medium {
    width: 100px !important;
    height: 100px !important;
}

.deco-large {
    width: 150px !important;
    height: 150px !important;
}

/* Rotação suave (opcional) */
.deco-rotate {
    animation: rotate-smooth 3s linear infinite;
}







.page-content-container {
    padding-top: 120px;
    padding-bottom: 60px;
    min-height: 100vh;
}

/* ============================================= */
/* SOLICITAR ORÇAMENTO                           */
/* ESTILOS PARA O BACKGROUND DECORATIVO          */
/* ============================================= */

/* ============================================= */
/*     ESTILOS PARA O BACKGROUND DECORATIVO      */
/*     (Página de Orçamento)                     */
/* ============================================= */

.decoration-dragon {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170vw;
    height: 170vh;
    background-image: url('../img/elementos/elementos_apoio/dragaobarbudo/PNG/bside_dragaobarbudo_sand.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.03;
    z-index: -1;
    pointer-events: none;
}

    /* CORREÇÃO: Aplica o z-index APENAS ao container que vem depois do dragão */
    .decoration-dragon + .container {
        position: relative;
        z-index: 1;
    }