/* ==========================================================================
   Estilos - LP Conexão Digital 2026 (Brutalista v2)
   ========================================================================== */

/* --- 1. Importação de Fontes --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap");

/* --- 2. Variáveis CSS --- */
:root {
    --font-primary: "Inter", sans-serif;
    
    --color-bg: #000000;
    --color-text: #FFFFFF;
    --color-accent: #BF00FF; /* Roxo Elétrico */
    --color-border: #333333; /* Cinza escuro para bordas */

    --default-transition: all 0.3s ease-in-out;
}

/* --- 3. Reset Básico e Globais --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--color-accent); transition: var(--default-transition); }
p { color: #ccc; margin-bottom: 1rem; }
ul { list-style: none; }

/* Títulos Brutalistas */
h1, h2, h3 {
    font-weight: 900; /* Super Bold */
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* --- 4. Utilitários (Container, Botões) --- */
.container, .container-header {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-button {
    display: inline-block;
    padding: 14px 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--default-transition);
    border: 2px solid var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-bg);
    cursor: pointer;
}
.cta-button:hover {
    background-color: transparent;
    color: var(--color-accent);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-title {
    font-size: 4rem;
    color: var(--color-text);
    margin-bottom: 20px;
}
.section-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #999;
}

.hero-tag {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 5. Cabeçalho (Header) --- */
.site-header {
    padding: 20px 0;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    background-color: var(--color-bg);
    z-index: 1000;
}
.container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: -1px;
}
.site-logo:hover {
    color: var(--color-accent);
}

/* --- 6. Seção Hero e Contador (REVISADO COM GRID) --- */
.hero {
    /* Reduzir padding para caber mais na tela */
    padding-top: 40px; /* Menor que 180px */
    padding-bottom: 80px;
    border-bottom: 2px solid var(--color-border);
    min-height: calc(100vh - 82px); /* Tenta ocupar a altura da tela menos o header */
    display: flex; /* Para centralizar o container verticalmente se necessário */
    align-items: center; /* Centraliza o conteúdo verticalmente */
}

.hero .container {
    display: grid; /* MUDANÇA PRINCIPAL: Usar Grid */
    grid-template-columns: 1.2fr 1fr; /* Coluna de texto um pouco maior */
    align-items: center; /* Alinha o conteúdo das colunas verticalmente */
    gap: 50px; /* Espaço entre as colunas */
}

/* Coluna 1: Conteúdo de Texto */
.hero-content {
    text-align: left; /* Alinha o texto à esquerda */
}

.hero-title {
    font-size: 5rem; /* Levemente menor para caber melhor */
    letter-spacing: -3px;
    margin-top: 15px;
    margin-bottom: 20px; /* Adiciona espaço abaixo do título */
}

.hero-subtitle {
    font-size: 1.1rem; /* Levemente menor */
    max-width: 450px;
    color: #ccc;
    margin: 0; /* Remove margem padrão do p */
}

/* Coluna 2: Elementos Visuais */
.hero-visuals {
    display: flex;
    flex-direction: column; /* Empilha a imagem e o contador */
    align-items: center; /* Centraliza horizontalmente na coluna */
    gap: 25px; /* Espaço entre a imagem e o contador */
}

.hero-banner-visual {
    width: 100%; /* Ocupa a largura da coluna do grid */
    max-width: 450px; /* Limite máximo para não ficar gigante */
    height: auto;
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.4);
    /* margin-bottom foi substituído pelo gap no .hero-visuals */
}

.countdown-timer {
    display: flex;
    gap: 15px;
    border: 2px solid var(--color-border);
    padding: 15px 20px; /* Padding ligeiramente ajustado */
    width: fit-content; /* Ajusta a largura ao conteúdo */
    margin: 0 auto; /* Centraliza o contador se for menor que a imagem */
}

.timer-box {
    text-align: center;
    min-width: 70px; /* Largura mínima para cada caixa */
}

.timer-box span {
    display: block;
    font-weight: 900;
    font-size: 2.5rem; /* Tamanho ajustado */
    color: var(--color-accent);
    line-height: 1;
}

.timer-box .timer-label {
    font-size: 0.7rem; /* Menor */
    color: var(--color-text);
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 5px;
}


/* --- 7. Seção Palestrantes (Grid Assimétrico) --- */
.speakers {
    padding: 80px 0;
    border-bottom: 2px solid var(--color-border);
}
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.speaker-card {
    grid-column: var(--grid-col, auto);
    grid-row: var(--grid-row, auto);
    
    border: 2px solid var(--color-border);
    background-color: #111;
    transition: var(--default-transition);
}
.speaker-card img {
    filter: grayscale(100%);
    transition: var(--default-transition);
}
.speaker-card h3 {
    font-size: 1.8rem;
    margin: 15px 20px 5px 20px;
}
.speaker-card span {
    font-size: 1rem;
    color: var(--color-accent);
    margin: 0 20px 20px 20px;
    display: block;
}
.speaker-card:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-5px);
}
.speaker-card:hover img {
    filter: grayscale(0%);
}
.speaker-card:hover h3 {
    color: var(--color-bg);
}
.speaker-card:hover span {
    color: var(--color-bg);
}

/* --- 8. Seção Agenda --- */
.agenda {
    padding: 80px 0;
    border-bottom: 2px solid var(--color-border);
}
.agenda-timeline {
    max-width: 700px;
    margin: 0 auto;
}
.agenda-timeline li {
    padding-bottom: 25px;
    border-bottom: 2px dashed var(--color-border);
    margin-bottom: 25px;
}
.agenda-timeline li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.agenda-timeline h3 {
    color: var(--color-accent);
    font-size: 1.5rem;
}

/* --- 9. Seção Tickets (CTA Final) --- */
.tickets {
    padding: 100px 0;
    text-align: center;
}
.tickets .section-title {
    font-size: 6rem;
    color: var(--color-accent);
    letter-spacing: -3px;
}
.tickets p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
}
.ticket-cta {
    font-size: 1.5rem;
    padding: 20px 40px;
    background-color: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
}
.ticket-cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

/* --- 10. Rodapé --- */
.site-footer {
    padding: 40px 0;
    text-align: center;
    border-top: 2px solid var(--color-border);
    background-color: #111;
}
.site-footer p {
    color: #777;
    font-size: 0.9rem;
    margin: 0;
}

/* --- 11. Responsividade --- */
@media (max-width: 992px) {
    .section-title {
        font-size: 3rem;
    }
    .hero {
        padding-top: 120px; /* Menos padding */
        min-height: auto; /* Remove a altura mínima */
        padding-bottom: 60px;
    }

    .hero .container {
        grid-template-columns: 1fr; /* Coluna única */
        gap: 40px; /* Espaço entre texto e visuais */
        text-align: center; /* Centraliza tudo no mobile */
    }

    .hero-content {
        text-align: center;
    }

    .hero-title {
        font-size: 4rem; /* Reduz tamanho */
    }

    .hero-subtitle {
        margin: 0 auto; /* Centraliza o parágrafo */
    }
    
    .hero-visuals {
        gap: 20px;
    }

    .hero-banner-visual {
        max-width: 400px; /* Reduz um pouco o tamanho máximo */
        margin-left: auto; /* Centraliza a imagem */
        margin-right: auto; /* Centraliza a imagem */
    }

    .tickets .section-title {
        font-size: 4.5rem;
    }
    .countdown-timer {
        width: 100%;
        justify-content: space-around;
    }
    .speakers-grid {
        grid-template-columns: 1fr;
    }
    .speaker-card {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}
@media (max-width: 768px) {
    .header-cta {
        display: none; /* Esconde o botão no header */
    }
    .hero-title {
        font-size: 3rem; /* Ainda menor */
    }
    .tickets .section-title {
        font-size: 3.5rem;
    }
    .timer-box {
        width: auto;
        padding: 0 10px;
    }
    .timer-box span {
        font-size: 2rem;
    }
}