/* 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 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: 1.25rem !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: 1rem !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: 1.1rem !important; /* Reduz o título levemente */
    }
    
    .quadrant .fs-6 {
        font-size: 0.875rem !important; /* Reduz o texto para o equivalente a 'small' */
    }
}

/* 3. Telas de Celulares (Abaixo de 430px - ex: iPhone Max) - "Small adaptado" */
@media (max-width: 430px) {
    .quadrant .fs-5 {
        font-size: 1rem !important; /* Títulos ficam do tamanho do texto normal */
    }
    
    .quadrant .fs-6 {
        font-size: 0.75rem !important; /* Texto fica um pouco menor que small para caber na tela do celular */
        line-height: 1.4; /* Aperta um pouco as linhas para economizar espaço vertical */
    }
    
    /* Aproveita para diminuir o recuo da lista no celular e ganhar espaço */
    .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;
}

.footer-square {
    /* Substituído 40px por vw */
    width: 2.5vw;
    height: 2.5vw;
    background-color: #212c42;
    border-radius: 0.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: opacity 0.3s;
}

/* Correção de sintaxe: o hover fica fora da classe principal no CSS puro */
.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 {
    /* Substituído 280px e 180px por unidades de Viewport */
    width: 20vw;  
    height: 20vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    /* Borda tracejada adaptada de px para vw */
    border: 0.2vw dashed rgba(255, 255, 255, 0.3); 
    border-radius: 0.6vw;
    padding: 1.5vw;
}

/* Garante que a imagem inserida não passe do tamanho da caixa e não fique esticada/feia */
.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
 

/* ==========================================================
   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;
}

/* Quando a tela tiver menos de 850px de altura (Notebooks padrão) */
@media (max-height: 850px) {
    /* Diminui o título 'Equipe' e o espaço abaixo dele */
    main h2.fs-3 {
        font-size: 1.5rem !important;
        margin-bottom: 3vh !important; 
    }

    /* Reduz os nomes e cargos da equipe */
    .team-card p.small {
        font-size: 0.75rem; 
    }

    /* Reduz o texto da caixa azul de contato */
    .contact-cta-box p {
        font-size: 0.85rem; 
    }

    /* Diminui o padding interno da caixa de contato para economizar espaço */
    .contact-cta-box {
        padding: 2vh 3vw !important;
    }
}

/* Quando a tela for extremamente baixa (menos de 650px) */
@media (max-height: 650px) {
    /* Deixa o título principal ainda menor */
    main h2.fs-3 {
        font-size: 1.25rem !important;
        margin-bottom: 2vh !important;
    }

    /* Reduz a fonte da equipe ao mínimo legível */
    .team-card p.small {
        font-size: 0.65rem; 
        line-height: 1.2;
    }

    /* Deixa o texto de contato bem compacto */
    .contact-cta-box p {
        font-size: 0.75rem; 
    }
    
    /* Espaço entre os cartões (gap) diminui para os itens subirem um pouco */
    .w-80.d-flex.gap-4 {
        gap: 1.5vw !important;
        margin-bottom: 1.5vh !important;
    }
}

/* --- 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;
    }
}