/* ------------------------------------------------ TECNOLOGIAS/CARROCEL -------------------------------------------------------- */

#tecnologias h2 {
    margin-bottom: 2rem;
}

.scroller {
    max-width: 100%;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    padding-block: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
}

.scroller__inner li {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Garante que o li tenha espaço vertical suficiente */
    min-height: 90px; /* Um pouco mais que a altura da imagem normal */
}

.scroller__inner li img {
    height: 70px; /* Altura padrão */
    max-width: 150px;
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
    filter: grayscale(1);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.scroller__inner li:hover img {
    cursor: pointer;          /* Muda o cursor para a mãozinha */
    transform: scale(1.1);    /* Aumenta levemente o tamanho */
    filter: grayscale(0);     /* Remove o filtro cinza */
    opacity: 1;               /* Aumenta a opacidade */
}

/* Regra para o item ativo (clicado) */
.scroller__inner li.tech-item-active img {
    transform: scale(1.15); /* Mantém o crescimento */
    filter: grayscale(0) drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
    opacity: 1;
    /* Não precisa mexer no object-fit aqui, o 'contain' já está na base */
}

.scroller__inner img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50%));
    }
}

.scroller[data-speed="fast"] {
    --animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --animation-duration: 15s;
}

/* ======================================================== */
/* CAIXA DE DESCRIÇÃO (POSICIONAMENTO CORRIGIDO FINAL)    */
/* ======================================================== */

/* Garante que o carrossel ocupe seu espaço */
#tecnologias .scroller {
    position: relative; /* Mantém o fluxo normal */
    z-index: 1;
    /* margin-bottom: 3rem; */ /* <-- LINHA REMOVIDA */
}

/* O container que segura a caixa de descrição */
/* Usamos um seletor mais específico para garantir */
#tecnologias > .container.reveal:last-of-type {
    clear: both; /* Garante que fique abaixo */
    position: relative;
    z-index: 1;
}

/* Caixa de descrição (sem margin-top) */
.tech-description-box {
    padding: 0 2.5rem; /* Zera padding T/B, mantém L/R */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--cor-fundo-card);
    border: 1px solid #222;
    border-top: 3px solid var(--cor-secundaria-laranja);
    border-radius: 8px;
    min-height: 0; /* <-- MUDADO DE 100px */
    box-shadow: 0 10px 30px -10px rgba(255, 140, 0, 0.2);
    overflow: hidden; /* <-- ADICIONADO (essencial para max-height) */
    
    /* ---- NOVAS LINHAS DE ESTADO E TRANSIÇÃO ---- */
    opacity: 0;
    max-height: 0; /* <-- ADICIONADO (começa encolhido) */
    margin-top: 0; /* <-- ADICIONADO (sem margem quando escondido) */
    
    /* TRANSIÇÃO ATUALIZADA (agora anima a altura e a margem) */
    transition: opacity 0.3s ease, max-height 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease, margin-top 0.4s ease;
}

/* REGRA MODIFICADA (com "acordeão") */
.tech-description-box.visible {
    opacity: 1;
    max-height: 500px; /* Altura máxima "fake" para a animação */

    /* CORREÇÃO: 
     Usar "padding: 2.5rem;" aplica o espaçamento 
     em TODOS os 4 lados (cima, baixo, esquerda e direita),
     impedindo que o card encoste nas bordas.
    */
    padding: 2.5rem; 

    margin-top: 3rem; /* ADICIONA O ESPAÇO SOMENTE QUANDO VISÍVEL */
}

/* Descrição (mantém o estilo) */
#tech-box-description {
    color: var(--cor-texto-secundario);
    font-size: 1.1rem;
    line-height: 1.6;
    transition: opacity 0.3s ease-out;
}

/* Classe para fade (mantém o estilo) */
.tech-box-fading-out #tech-box-description {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

/* Mantém o estilo do item ativo (caso exista) */
.scroller__inner li.tech-item-active img {
    filter: grayscale(0);
    opacity: 1;
}

/* Estilo para o Título da tecnologia na caixa */
#tech-box-title {
    color: var(--cor-secundaria-laranja);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center; /* Centraliza o título */
    transition: opacity 0.3s ease-out;
}

/* Ajuste para a descrição se ficar muito grudada no título */
#tech-box-description {
    margin-top: 0.5rem; /* Adiciona um pequeno espaço acima da descrição */
    text-align: center; /* Centraliza a descrição também */
    /* ... o resto dos estilos que já existiam ... */
    color: var(--cor-texto-secundario);
    font-size: 1.1rem;
    line-height: 1.6;
    transition: opacity 0.3s ease-out;
}

/* Atualize esta regra para incluir o título no fade-out */
.tech-box-fading-out #tech-box-title,
.tech-box-fading-out #tech-box-description {
    opacity: 0;
    transition: opacity 0.1s ease-in; /* Saída rápida */
}

/* ======================================================== */
/* AJUSTE DE ESPAÇAMENTO (TECNOLOGIAS -> SERVIÇOS)      */
/* ======================================================== */

/* Reduz o espaço *abaixo* da seção de tecnologias */
#tecnologias {
    padding-bottom: 2rem; /* O valor original de 'section' era 6rem */
}

/* Reduz o espaço *acima* da seção de serviços */
#servicos {
    padding-top: 2rem; /* O valor original de 'section' era 6rem */
}

/* -------- MELHORIA DE FEEDBACK NO CARROSSEL MOBILE -------- */
.scroller__inner li.tech-item-active img {
    transform: scale(1.15); /* Aumenta o ícone ativo */
    filter: grayscale(0) drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); /* Adiciona um brilho */
    opacity: 1;
}

.scroller__inner li img {
    height: 60px; /* Ajuste se necessário para o tamanho padrão */
    object-fit: contain; /* ESSA É A NOVA PROPRIEDADE */
    width: auto; /* Garante que a largura se ajuste à altura */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease-in-out;
}