.elementor-kit-7{--e-global-color-primary:#0C0A0D;--e-global-color-secondary:#F6D8B8;--e-global-color-text:#EEE8FF;--e-global-color-accent:#AC7B57;--e-global-color-cae8e48:#0C0C0C;--e-global-typography-primary-font-family:"Philosopher";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Philosopher";--e-global-typography-secondary-font-size:32px;--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Philosopher";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Philosopher";--e-global-typography-accent-font-weight:500;--e-global-typography-edced8d-font-family:"Philosopher";--e-global-typography-edced8d-font-size:28px;--e-global-typography-edced8d-font-weight:700;--e-global-typography-be48bd9-font-family:"Philosopher";--e-global-typography-be48bd9-font-size:18px;--e-global-typography-be48bd9-font-weight:400;background-color:#161616;}.elementor-kit-7 a{color:var( --e-global-color-secondary );}.elementor-kit-7 a:hover{color:#02010100;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-7{--e-global-typography-edced8d-font-size:24px;}}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-edced8d-font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-edced8d-font-size:22px;--e-global-typography-be48bd9-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* TÍTULOS — equilibra as linhas */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.elementor-image-box-title {
    text-wrap: balance;
}

/* TEXTOS — melhora as quebras e evita viúvas quando possível */
p,
.elementor-widget-text-editor p,
.elementor-image-box-description {
    text-wrap: pretty;
}















.elementor-kit-7::selection {
    color: #fff;              /* cor do texto selecionado */
    background: #83620F;      /* cor de fundo da seleção */
}

.elementor-kit-7::-moz-selection {
    color: #fff;              /* compatibilidade com Firefox */
    background: #83620F;
}






/* Esconde a barra de rolagem em todos os navegadores e previne o scroll horizontal */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Previne o scroll horizontal */
    
    /* Para Firefox */
    scrollbar-width: none; 
    
    /* Para Internet Explorer e Edge antigo */
    -ms-overflow-style: none;
}

/* Para navegadores WebKit (Chrome, Safari, Edge novo, Opera) */
::-webkit-scrollbar {
    display: none; /* A propriedade 'display: none' faz a barra desaparecer */
}



/* Efeito de Gradiente Vertical (Top to Bottom) */
.titulo-gradiente .elementor-heading-title, 
.titulo-gradiente .elementor-image-box-title, 
.titulo-gradiente .elementor-icon-box-title {
    /* 180deg faz o gradiente ficar vertical */
    background: linear-gradient(180deg, #F0C873 0%, #A66A1F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.titulo-gradiente {
    display: block;
}






/* ============================================================
   BOTÃO ALTO TICKET V4 - LARGURA RESPONSIVA + GLOW
   ============================================================ */

.botao-premium .elementor-button {
    /* 1. Garante que respeite a largura do Elementor */
    width: 100% !important; /* Força o botão a preencher o container definido */
    display: flex !important; /* Facilita o alinhamento central */
    justify-content: center;
    align-items: center;

    /* 2. Cores e Estilo Base */
    background: linear-gradient(180deg, #F0C873 0%, #A66A1F 100%) !important;
    color: #0D1F26 !important;
    
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border: none !important;
    border-radius: 4px;
    
    position: relative;
    overflow: hidden;
    
    /* Aura Dourada Permanente */
    box-shadow: 0 4px 15px rgba(240, 200, 115, 0.25); 
    
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulsar-suave 4s infinite ease-in-out;
}

/* 3. O Reflexo de Luz (Shimmer) */
.botao-premium .elementor-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%; /* Aumentado para cobrir botões largos */
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transform: skewX(-25deg);
    animation: brilho-loop 5s infinite;
}

/* 4. Estado Hover - Intensifica o Glow */
.botao-premium .elementor-button:hover {
    box-shadow: 0 10px 40px rgba(240, 200, 115, 0.7) !important;
    transform: translateY(-2px); /* Leve subida para sensação de clique */
}

/* --- KEYFRAMES --- */
@keyframes brilho-loop {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

@keyframes pulsar-suave {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); } /* Reduzi levemente para não quebrar o layout em 100% */
}




/* 1. Estado Inicial do Container (Fechado) */
#depoimentos-container {
    max-height: 700px; /* Altura de 2 a 3 vídeos - ajuste se necessário */
    overflow: hidden;
    position: relative;
    transition: max-height 0.8s ease-in-out; /* Transição suave ao abrir/fechar */
}

/* 2. Criação do Efeito Fade (Sombra suave no fundo) */
#depoimentos-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Altura da mancha do fade */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,    /* Topo do fade: transparente */
        #000000 100%            /* Base do fade: COR DO SEU FUNDO */
    );
    pointer-events: none;      /* Permite clicar nos botões que ficarem "atrás" do fade */
    z-index: 10;
    transition: opacity 0.4s ease;
}

/* 3. Estado Expandido (Ativado pelo JavaScript) */
#depoimentos-container.is-expanded {
    max-height: 6000px !important; /* Valor alto para garantir que mostre tudo */
}

/* 4. Esconde o Fade quando estiver tudo visível */
#depoimentos-container.is-expanded::after {
    opacity: 0;
}





/*
 * ============================================
 * Efeito Fade e Expandir para Seção de PRINTS
 * ============================================
 */

/* 1. Estado Inicial do Container de PRINTS (Fechado) */
#prints-container {
    max-height: 800px; /* Ajuste para mostrar o número desejado de linhas de prints */
    overflow: hidden;
    position: relative;
    transition: max-height 0.8s ease-in-out; /* Transição suave ao abrir/fechar */
}

/* 2. Criação do Efeito Fade (Sombra suave no fundo) */
#prints-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px; /* Altura da mancha do fade, maior para prints */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,    /* Topo do fade: transparente */
        #24120B 100%            /* Base do fade: COR DO SEU FUNDO */
    );
    pointer-events: none;      /* Permite clicar nos prints que ficarem "atrás" do fade */
    z-index: 10;
    transition: opacity 0.4s ease;
}

/* 3. Estado Expandido (Ativado pelo JavaScript) */
#prints-container.is-expanded {
    max-height: 8000px !important; /* Valor bem alto para garantir que mostre tudo */
}

/* 4. Esconde o Fade quando estiver tudo visível */
#prints-container.is-expanded::after {
    opacity: 0;
}















/* =====================================================
   CARD HOVER / TOUCH
===================================================== */

.card-hover{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}

/* Overlay */

.card-hover::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    opacity: 0;
    transition: .35s ease;
    z-index: 1;
    pointer-events: none;
}

/* Conteúdo */

.card-hover .titulo-card,
.card-hover .descricao-card{
    position: absolute;
    left: 6%;
    right: 6%;
    z-index: 2;
}

/* Título */

.card-hover .titulo-card{
    bottom: 6%;
    transition: all .35s ease;
}

/* Descrição */

.card-hover .descricao-card{
    top: 6%;
    bottom: 6%;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

/* =====================================================
   DESKTOP
===================================================== */

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

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

    .card-hover:hover .titulo-card{
        opacity:0;
        transform:translateY(-15px);
    }

    .card-hover:hover .descricao-card{
        opacity:1;
        visibility:visible;
        transform:none;
    }

}

/* =====================================================
   MOBILE (classe active)
===================================================== */

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

.card-hover.active .titulo-card{
    opacity:0;
    transform:translateY(-15px);
}

.card-hover.active .descricao-card{
    opacity:1;
    visibility:visible;
    transform:none;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Philosopher';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://doutoramelancolica.com/wp-content/uploads/2026/04/Philosopher-Regular.woff2') format('woff2'),
		url('https://doutoramelancolica.com/wp-content/uploads/2026/04/Philosopher-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Philosopher';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://doutoramelancolica.com/wp-content/uploads/2026/04/Philosopher-Bold.woff2') format('woff2'),
		url('https://doutoramelancolica.com/wp-content/uploads/2026/04/Philosopher-Bold.woff') format('woff');
}
/* End Custom Fonts CSS */