/* Reseta margens e fontes básicas */
body {
    font-family: 'Lexend', sans-serif;
    background-color: #121826;
    font-size: medium;
}

/* Paleta de Cores do Figma */
.header-bg, .footer-bg {
    background-color: #1a2235;
}

.left-panel {
    background-color: #1f2a40;
}

/* Quadrado representativo da Logo no Header */
.logo-square {
    width: 40px;
    height: 40px;
    background-color: #212c42;
    border-radius: 4px;
}

.right-panel {
    background-color: #2b3b5a;
}

/* Estilo do Logo/Caixa de Marca */
.brand-box {
    background-color: #212c42;
    border-radius: 4px;
}

.nav-btn {
    color: #ffffff;
    text-decoration: none;
    padding: 6px 12px; 
    border-radius: 4px;
    font-size: 0.95rem;
    transition: background-color 0.3s;
}

.nav-btn:hover {
    background-color: #212c42;
}

.nav-btn.active {
    background-color: #28395a;
}

/* Garante que o quadrante ignore o tamanho do texto e foque na altura */
.quadrant {
    flex: 1; /* Esta é a mágica que substitui o height: 25% */
    overflow: hidden; /* Evita que textos muito longos quebrem o layout */
    display: flex;
}


/* ==========================================================
   RESPONSIVIDADE DO HEADER (MENU MOBILE)
========================================================= */

/* Remove a borda padrão do Bootstrap ao clicar no botão mobile */
.navbar-toggler:focus {
    box-shadow: none;
}

/* Regras aplicadas para telas menores que 992px (Celulares/Tablets) */
@media (max-width: 991px) {
    /* 1. Títulos e Texto Escaláveis (Unidades vw/vh) */
    .brand-box {
        font-size: calc(0.8rem + 0.5vw); /* Escala suave baseada na largura da tela */
        padding: 1.5vh 3vw !important; /* Paddings verticais/horizontais fluidores */
    }

    .navbar-brand img {
        height: 5vh !important; /* Logo diminui levemente no celular */
    }

    /* 2. Botão Mobile (Hambúrguer) Fixo no Canto Inferior Direito */
    /* Este botão é inserido via JavaScript, ou você pode adicioná-lo no HTML conforme sua preferência, 
       mas para um menu hambúrguer flutuante, a melhor forma é via JavaScript para manipulação do estado. 
       Para esta solução, vamos adicionar o botão no HTML no rodapé para simplificar */
}

/* Regra para telas MUITO pequenas (Celulares estreitos) */
@media (max-width: 450px) {
    /* Diminui o padding da marca para não espremer a logo */
    .brand-box {
        padding: 1vh 2vw !important;
    }
}
/* ==========================================================
   RESPONSIVIDADE DOS TEXTOS DA PÁGINA INICIAL (INDEX)
   Baseado na largura da tela (Dispositivos)
========================================================== */

/* 1. Telas Maiores que Notebook (Padrão - "Medium") */
.quadrant .fs-5 {
    font-size: medium !important; /* Tamanho original do título fs-5 */
    transition: font-size 0.3s ease; /* Transição suave caso redimensione a janela */
}

.quadrant .fs-6 {
    font-size: medium !important; /* Tamanho original do texto fs-6 (Medium) */
    transition: font-size 0.3s ease;
}

/* 2. Telas de Notebook (Abaixo de 1366px de largura) - "Small" */
@media (max-width: 1366px) {
    .quadrant .fs-5 {
        font-size: small !important; /* Reduz o título levemente */
    }
    
    .quadrant .fs-6 {
        font-size: small !important; /* Reduz o texto para o equivalente a 'small' */
    }
}

/* 3. Tablets e Celulares Maiores (Abaixo de 991px) */
@media (max-width: 991px) {
    .quadrant .fs-5 {
        font-size: smaller !important; 
    }
    
    .quadrant .fs-6 {
        font-size: smaller !important; /* CORREÇÃO: Faltava o !important aqui */
        line-height: 1.4; 
    }
    
    .custom-list {
        padding-left: 10px !important;
    }
}

/* 4. Telas de Celulares (Abaixo de 430px - ex: iPhone Max) - "Small adaptado" */
@media (max-width: 430px) {
    .quadrant .fs-5 {
        font-size: x-small !important; 
    }
    
    /* Para garantir que atinja os itens da lista <li> dentro da tag <ul> */
    .quadrant .fs-6, 
    .quadrant .fs-6 li {
        font-size: x-small !important; /* CORREÇÃO: Faltava o !important aqui */
        line-height: 1.4; 
    }
    
    .custom-list {
        padding-left: 10px !important;
    }
}
/* Define a largura de 80% que você solicitou */
.w-80 {
    width: 80%;
}

/* Ajuste das colunas internas para não quebrarem o alinhamento */
.title-column {
    width: 20%;
    height: 100%;
    flex-shrink: 0;
    border-right: 1px solid rgba(0,0,0,0.1);
}

/* Container dos bullet points unificado */
.bullet-container {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente dentro do quadrante */
    text-align: justify; /* Justifica o texto distribuindo o espaço igualmente */
}

/* Linha preta divisória entre os quadrantes */
.border-black-bottom {
    border-bottom: 2px solid #000000;
}

/* Listas customizadas (bullets) ajustadas para texto justificado */
.custom-list {
    list-style-type: disc;
    list-style-position: outside;
    /* Substituído 20px por vw para escalar a distância do bullet */
    padding-left: 1.5vw; 
    line-height: 1.6;
}

.custom-list ul {
    list-style-type: disc; 
    /* Substituído 5px por vh */
    margin-top: 0.5vh;
    padding-left: 0;
}

/* Componentes do Carrossel (Esquerda) */
.cursor-pointer {
    cursor: pointer;
    color: #121826; 
    opacity: 0.5;
}

.carousel-dot {
    /* Substituído 12px por vw */
    width: 1vw;
    height: 1vw;
    background-color: #121826;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
}

.carousel-dot.active {
    background-color: #3b5078;
    opacity: 1;
}

/* Footer elements */
.copyright-box {
    background-color: #212c42;
    /* Substituído 4px por vw */
    border-radius: 0.3vw;
}
/* ==========================================================
   ESTILOS GERAIS DO FOOTER E PARCEIROS
========================================================== */

.footer-square {
    /* O vw é ótimo para telas grandes */
    width: 2.5vw;
    height: 2.5vw;
    /* Adicionamos um mínimo de pixels para nunca sumir caso a tela diminua um pouco */
    min-width: 35px;
    min-height: 35px;
    background-color: #212c42;
    border-radius: 0.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: calc(0.8rem + 0.3vw); /* Ícone escala com a tela */
    transition: opacity 0.3s, transform 0.3s ease;
}

.footer-square:hover {
    opacity: 0.8;
}

/* Fundo da área central de parceiros */
.partners-bg {
    background-color: #2b3b5a;
}

/* Espaço reservado para os logos (IFSP e Automation Edge) */
.partner-img-wrapper {
    width: 20vw;  
    height: 20vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2vw dashed rgba(255, 255, 255, 0.3); 
    border-radius: 0.6vw;
    padding: 1.5vw;
}

.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================
   RESPONSIVIDADE DO FOOTER (TABLETS E CELULARES)
========================================================== */

/* Quando a tela tiver menos de 992px (Tablets para baixo) */
@media (max-width: 991px) {
    .footer-square {
        /* Abandona o VW e usa Pixels para garantir um tamanho fixo grande e clicável com o dedo */
        width: 45px;
        height: 45px;
        border-radius: 8px; /* Arredondamento padrão para mobile */
        font-size: 1.5rem; /* Aumenta bastante o ícone do WhatsApp/Instagram */
    }
}

/* Telas muito pequenas (Celulares menores que 430px) */
@media (max-width: 430px) {
    .footer-square {
        /* Fica ainda um pouco maior para compensar o espaço vazio do copyright */
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
    }
}

/* ==========================================================
   ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTOS
========================================================== */

/* Controla a largura máxima da caixa de texto */
.product-text {
    max-width: 75%; 
    line-height: 1.6;
}

/* Nova classe para garantir o texto justificado (reto nas bordas) */
.custom-justify {
    text-align: justify;
}

.produto-text {
    font-size:large; 
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Se a tela do usuário for de notebook (mais baixa) */
@media (max-height: 850px) {
    .produto-text {
        font-size: large; 
    }
    
    .title-responsive {
        font-size: large !important; 
        white-space: normal !important; /* Deixa o título quebrar de linha se precisar */
    }

}

/* Se a tela for muito pequena */
@media (max-height: 650px) {
    .produto-text {
        font-size: medium; 
        line-height: 1.4;
    }

    .title-responsive {
        font-size: medium !important;
        white-space: normal !important;
    }
}

/* --- ESTILOS DA PÁGINA DE CONTATO/EQUIPE --- */

/* Cada card individual dos membros */
.team-card {
    /* Substituído 130px por vw */
    width: 10vw;
}

/* O quadrado cinza da foto */
.team-photo-placeholder {
    /* Mantém as fotos perfeitamente quadradas com base na largura da tela */
    width: 10vw;
    height: 10vw;
    background-color: #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Garante que a foto preencha o quadrado */
.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A caixa azul de "Entre em contato" abaixo da equipe */
.contact-cta-box {
    background-color: #1a2235;
    border: 0.1vw solid rgba(255, 255, 255, 0.1);
    /* Substituído 800px por % para fluidez */
    max-width: 70%;
    width: 100%;
    border-radius: 0.3vw;
}
/* ==========================================================
   RESPONSIVIDADE DOS TEXTOS DA PÁGINA DE CONTATO/EQUIPE
========================================================== */

/* Suaviza a transição caso a janela mude de tamanho */
.team-card p, 
.contact-cta-box p, 
main h2 {
    transition: font-size 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

/* ==========================================================
   RESPONSIVIDADE DA LARGURA DA EQUIPE (TABLETS E CELULARES)
========================================================== */

/* Quando a tela tiver menos de 992px (Tablets e Celulares em pé ou deitados) */
@media (max-width: 991px) {
    /* O container w-80 é muito estreito para mobile, vamos usar 95% da tela */
    .w-80 {
        width: 95% !important;
    }

    /* MÁGICA DOS 3 POR LINHA: 
       A largura passa a ser 1/3 da tela, descontando o espaço do gap. */
    .team-card {
        width: calc(33.33% - 1.5rem) !important;
        min-width: 90px; /* Limite de segurança para não sumir na tela */
    }

    /* Abandona o 'vw' fixo. Ocupa a largura total do card e mantém o formato quadrado! */
    .team-photo-placeholder {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1; 
    }

    /* Expande a caixa de contato para a leitura não ficar espremida */
    .contact-cta-box {
        max-width: 95% !important;
    }
}

/* Ajustes finos para celulares menores (ex: iPhone, Androids estreitos) */
@media (max-width: 450px) {
    /* Diminuímos o gap (espaçamento) do Bootstrap (gap-4) para um menor para caber melhor */
    .w-80.d-flex.gap-4 {
        gap: 0.8rem !important;
    }

    /* Recalcula a largura de 3 por linha com base no novo espaçamento menor */
    .team-card {
        width: calc(33.33% - 0.8rem) !important;
    }

    /* Diminui a fonte do nome e cargo para caber direitinho na coluna estreita */
    .team-card p.small {
        font-size: 0.65rem !important;
        line-height: 1.2;
    }
}
/* --- RESPONSIVIDADE DO TEXTO DE LICENCIAMENTO BASEADA NA ALTURA --- */

.licenciamento-text {
    /* Tamanho padrão (equivalente ao fs-5 do Bootstrap) */
    font-size: 1.25rem; 
    line-height: 1.6;
    transition: font-size 0.3s ease; /* Transição suave caso o usuário redimensione a janela */
}

/* Media query olhando para a ALTURA da tela, e não para a largura */
@media (max-height: 850px) {
    .licenciamento-text {
        /* Diminui para o equivalente a 'small' se a tela for achatada */
        font-size: 0.875rem; 
    }
}

@media (max-height: 650px) {
    .licenciamento-text {
        /* Se a tela for EXTREMAMENTE achatada, diminui um pouco as margens para tentar salvar o layout */
        font-size: 0.8rem; 
        line-height: 1.4;
    }
}

/* ==========================================================
   RESPONSIVIDADE DA PÁGINA DE SERVIÇOS
========================================================== */

.servicos-text {
    font-size: 1.25rem; /* Tamanho padrão igual ao fs-5 */
    line-height: 1.6;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

.title-responsive {
    transition: font-size 0.3s ease, margin 0.3s ease;
}

/* Quando a tela tiver menos de 850px de altura (ex: Notebooks) */
@media (max-height: 850px) {
    .servicos-text {
        font-size: 0.95rem; /* Diminui suavemente */
        margin-bottom: 2vh !important; /* Aperta um pouco as margens */
    }
    
    .title-responsive {
        font-size: 1.25rem !important; /* Diminui os títulos (h3) */
        margin-bottom: 3vh !important;
    }
    
    .divisor-responsive {
        margin-top: 2vh !important;
        margin-bottom: 2vh !important;
    }
}

/* Quando a tela for muito achatada (menos de 650px) */
@media (max-height: 650px) {
    .servicos-text {
        font-size: 0.85rem; /* Equivale a um texto 'small' */
        line-height: 1.4;
        margin-bottom: 1.5vh !important;
    }

    .title-responsive {
        font-size: 1.1rem !important;
        margin-bottom: 2vh !important;
    }
}