/*
Theme Name: Lumus 2025
Theme URI: https://www.agencialumus.com.br/
Author: Jorge Andrade
Author URI: https://www.agencialumus.com.br/
Description: Um tema moderno e responsivo para a Agência Lumuns.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumuns-agency-theme
*/

/* --- Estilos base e tipografia (DM Sans) --- */
body {
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
}

p{
    font-size: 1rem;
}

strong{
font-weight: 700;
   
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #333;
}

.section-subtitle {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
}

/* --- Cores (Variáveis CSS) --- */
:root {
    --primary-purple: #8A2BE2;
    --dark-purple: #6A1EB8;
    --light-purple: #f8f0ff;
    --dark-bg: #1a1a1a;
    --text-white: #ffffff;
    --text-dark: #333333;
}

/* --- Header Simples (Novo) --- */
.site-header {
    background-color: transparent; /* O header é transparente sobre a hero section */
}

.site-logo .custom-logo-link img {
    max-height: 80px; /* Ajuste a altura máxima do seu logo carregado via Customizer */
    width: auto;
}
.site-logo .logo-placeholder { /* Para o logo de fallback em img src */
    max-width: 80px; /* Ajuste a largura do logo para o placeholder */
    height: auto;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 100vh;
    background: url('') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* Ajuste para acomodar o header fixo/absoluto */
    padding-top: 100px; /* Adapte este valor se o seu header tiver altura diferente */
    box-sizing: border-box; /* Garante que o padding não aumente a altura total do elemento */
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #242424;
    z-index: 1;
}

.hero-section > .container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.contact-button {
    border-color: var(--text-white);
    color: var(--text-white);
    font-weight: 600;
    transition: all 0.3s ease;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.9rem;
}

.contact-button:hover {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--text-white);
}

.hero-title {
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2rem;
    margin-top: 5%;

}

.hero-cta {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-cta:hover {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

/* --- About Section --- */
.about-section {
    color: var(--text-dark);
}

.about-section .section-title {
    color: var(--text-dark);
        font-size: 2.5rem; 

}
/* Estilos da sua seção de vídeo de impacto */
    .impact-stories-section {
        background-color: #7f32da;
    }

    /* Estilos do Player de Vídeo Personalizado */
    .custom-video-player {
        position: relative;
        width: 100%;
        /* Reintroduzindo aspect-ratio para manter a proporção */
        aspect-ratio: 16/9; 
        margin: 0;
        border-radius: 0rem;
        overflow: hidden;
        cursor: pointer;
        background-color: #000;
        /* Adicionando uma altura mínima para evitar que o player suma em telas menores */
        min-height: 250px; 
    }

    .video-thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Outros estilos do player que você já tem */
    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border: none;
        outline: none;
        cursor: pointer;
    }
    .play-button i {
        font-size: 2.5rem;
        color: #e51d1d;
        margin-left: 5px;
    }
    .play-button:hover {
        background-color: rgba(255, 255, 255, 1);
        transform: translate(-50%, -50%) scale(1.1);
    }
    .youtube-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0rem;
    }

    /* Estilos da nova coluna de texto */
    .synopsis-column {
        background-color: #7f32da; /* Cor vermelha de fundo */
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
    }
    
    .section-title {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Aplicando o Flexbox para manter a altura igual em telas maiores */
    .impact-stories-row {
        display: flex;
        align-items: stretch;
    }
    .impact-stories-row .synopsis-column {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lead{
        font-size: 1rem;

    }

    .txtvd{
        font-size: 2rem;
            font-weight: 700;

    }
/* --- Moving Text Bar Section --- */
.moving-text-bar-section {
    background-color: #181818;
    color: var(--text-white);
    font-size: 1.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    padding: 2rem;
}

.moving-text-container {
    display: inline-block;
    animation: scrollText 20s linear infinite;
    padding-right: 20px;
}

.moving-text-content span {
    display: inline-block;
    padding-right: 30px;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Background Video Section --- */
.background-video-section {
        position: relative; /* O contêiner deve ser 'relative' para que o vídeo posicionado 'absolute' funcione corretamente. */
        min-height: 90vh; /* Define uma altura mínima da seção, mas permite que ela se expanda com o conteúdo. */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 5rem 0;
        overflow: hidden; /* Oculta qualquer parte do vídeo que possa sair da seção. */
    }

    .background-video {
        position: absolute; /* O vídeo é posicionado de forma absoluta para ficar atrás do conteúdo. */
        top: 0;
        left: 0;
        width: 100%; /* Garante que o vídeo tenha 100% da largura do contêiner pai. */
        height: 100%; /* Garante que o vídeo tenha 100% da altura do contêiner pai. */
        object-fit: cover; /* **Esta é a propriedade chave:** faz o vídeo preencher a área, cortando as partes excedentes, mantendo a proporção. */
        z-index: 1; /* Coloca o vídeo na camada mais baixa (primeiro plano). */
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Adiciona uma camada escura para melhorar a leitura do texto. */
        z-index: 2; /* Fica acima do vídeo, mas abaixo do conteúdo. */
    }

    .video-symbol,
    .video-overlay p {
        position: relative; /* Garante que o conteúdo fique acima do overlay. */
        z-index: 3;
    }

/* --- Services List Section (Lista de Serviços como no layout) --- */
.services-list-section {
    background-color:#7f32da;
    padding-top: 60px;
    padding-bottom: 60px;
}

.services-list-section .services-list-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-purple);
    margin-bottom: 2rem;
    line-height: 1.3;
}

.services-list-section .services-items {
    padding-left: 0;
    list-style: none;
}

.services-list-section .services-items li {
    font-family: 'DM Sans', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.0;
    color: black;
    margin-bottom: 0.5rem;
     transition: color 0.3s ease;

}

.services-list-section .services-items li:hover {
    color: #0b0b0b;
}

/* --- Portfolio Section --- */

/* Debugging para a seção do portfólio */

/* Oculta o card-body por padrão e mostra no hover, se este for o design desejado */
.portfolio-item .card-body {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 1; /* Always visible */
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; /* Alinha o texto e botão à esquerda */
    padding: 1.5rem;
}

.portfolio-item:hover .card-body {
    opacity: 1;
    pointer-events: all;
}

/* Garante que o título e a seta estejam visíveis */
.portfolio-item .card-body h5,
.portfolio-item .card-body p {
    color: #333 !important; /* Cor escura para o texto */
    font-weight: bold;
}
.portfolio-section {
    background-color: var(--light-purple);
}

.portfolio-item {
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-white);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item .card-img-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.5rem;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item:hover .portfolio-button {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

.portfolio-item .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.portfolio-button {
    border-color: var(--text-white);
    color: var(--text-white);
    transition: all 0.3s ease;
    font-size: 0.9rem;
    padding: 0.5rem 1.2rem;
}

.portfolio-all-button {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    font-weight: 600;
    transition: all 0.3s ease;
}

.portfolio-all-button:hover {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

/* --- Contact Form Section --- */
.contact-section {
    background-color: var(--dark-bg);
    padding-top: 60px;
    padding-bottom: 60px;
    color: var(--text-white);
}

.contact-section .section-title {
    color: var(--text-white);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.contact-section .form-control {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-white) !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 1rem;
}

.contact-section .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.contact-section .form-control:focus {
    box-shadow: none;
    border-color: var(--primary-purple);
}

.contact-section .form-control.is-invalid {
    border-color: #dc3545;
}

.contact-section .form-control.is-valid {
    border-color: #28a745;
}

.contact-submit-button {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
}

.contact-submit-button:hover {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

.contact-info {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

.contact-info p {
    margin-bottom: 0.5rem;
}

/* --- Footer Section --- */
.footer-section {
    background-color: var(--dark-bg);
    color: rgba(255, 255, 255, 0.6);
    padding-top: 30px;
    padding-bottom: 20px;
    border-top: none;
}

.footer-logo {
    max-width: 250px;
    margin-bottom: 1.5rem;
}

.social-icons {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.social-icons a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--primary-purple);
}

.footer-section p {
    font-size: 0.9rem;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 4.8rem;
    }
    .hero-subtitle {
        font-size: 1.3rem;
    }
    .section-title {
        font-size: 2.2rem;
    }
    .services-list-section .services-list-title {
        font-size: 1.5rem;
        text-align: center;
    }
    .services-list-section .services-items {
        text-align: left;
    }
    .services-list-section .services-items li {
        font-size: 3rem;
        margin-left: 3rem;
    }
}

@media (max-width: 767.98px) {

    .margem{
        padding-left: 7%;
        padding-right: 7%;
    }
    .hero-section{
        padding-left: 7%;
        padding-right: 7%;
    }
  
    .hero-title {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    /* Logo Placeholder no Header */
    .site-logo .logo-placeholder, .site-logo .custom-logo-link img {
        max-width: 60px; /* Reduz o tamanho do logo em mobile */
    }
    .contact-button {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .section-subtitle {
        font-size: 0.95rem;
    }
    .moving-text-bar-section {
        font-size: 2rem;
    }
    .contact-section .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    .contact-section .form-control {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    .contact-info {
        font-size: 1rem;
    }
    .footer-section {
        text-align: center !important;
    }
    .footer-logo {
        max-width: 120px;
    }
    .social-icons {
        font-size: 1.5rem;
    }
    .footer-section p {
        font-size: 0.85rem;
    }
}

.container-fluid {
    padding-right: 5%;
    padding-left: 5%;
}

/* Opcional: Para telas menores */
@media (max-width: 991.98px) {
    .container-fluid {
        padding-right: 20px;
        padding-left: 20px;
    }
}

.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Adicione esta linha para preencher o espaço, se necessário */
}

/* Opcional: Garante que o figure também ocupe a largura total e não tenha margens */
.wp-block-image {
    margin: 0;
}

.image-container {
    /* Define uma proporção de 4:3 (400 / 300) */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* Força a imagem a preencher o container, cortando o excesso */
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .portfolio-section .row {
        /* Aumenta a margem lateral em 2% de cada lado */
        padding-left: 8%;
        padding-right: 8%;
    }

    /* Adiciona margem inferior aos itens para espaçamento vertical */
    .portfolio-section .row > [class*="col-"] {
    }
}


.sucesso-form {
    padding: 1rem;
    color: #ffffff;
    background-color: #222529 
    border-radius: 0.25rem;
    margin-top: 1rem;
}