/* Container Principal do Slider */
.agir-hero-slider {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    position: relative;
    background-color: #002d51; /* Cor Azul Escuro Base */
    overflow: hidden;
}

/* Fundo */
.agir-slide-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.agir-slide-bg img,
.agir-slide-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Regra Estrita de Sobreposição (Overlay) */
.agir-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,45,81,0.8) 0%, rgba(0,45,81,0.8) 50%, rgba(0,45,81,1) 100%);
    z-index: 2;
}

/* Conteúdo */
.agir-slide-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.agir-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 0px !important;
    box-sizing: border-box;
}

@media (max-width: 1440px) {
    .agir-container {
        max-width: 1230px;
        margin-top: 50px !important;
    }
}

/* Coluna de Conteúdo (largura cresce conforme a tela diminui).
   Base em 65%: o container é limitado a 1440px/1230px, então 50% deixava
   títulos longos (PIBINOVA/PDI/UFF 2026-2027) quebrando em 5 linhas. */
.agir-content-column {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* -------------------------------------------
   Tipografia
------------------------------------------- */
.agir-hero-slider .agir-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 200 !important; /* Super fino */
    /* Tamanho fluido: escala suave entre ~32px (telas pequenas) e 56px (desktop) */
    font-size: clamp(32px, 4vw, 56px) !important;
    line-height: 1.05em !important;
    letter-spacing: -1px !important;
    color: #FFFFFF !important;
    margin: 0 0 20px 0 !important;
    text-transform: none !important;
    /* Quebra limpa de palavras/URLs longas (ex.: PIBINOVA/PDI/UFF) */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.agir-hero-slider .agir-title b,
.agir-hero-slider .agir-title strong {
    font-weight: 700 !important; /* Bold onde houver a tag <b> */
}

.agir-hero-slider .agir-subtitle {
    font-family: 'Oxygen', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.65em !important;
    color: #FFFFFF !important;
    margin: 0 0 60px 0 !important;
    text-transform: none !important;
}

/* -------------------------------------------
   Botões
------------------------------------------- */
.agir-hero-slider .agir-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.agir-hero-slider .agir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFF00 !important;
    color: #002d51 !important;
    font-family: 'Oxygen', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 6px 25px !important;
    border-radius: 8px !important;
    border: 1px solid #FFFF00 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.agir-hero-slider .agir-btn:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* -------------------------------------------
   Controles
------------------------------------------- */
.agir-hero-slider .swiper-button-next,
.agir-hero-slider .swiper-button-prev { color: #FFFF00; --swiper-navigation-size: 30px; }
.agir-hero-slider .swiper-button-next { right: 40px !important; }
.agir-hero-slider .swiper-button-prev { left: 40px !important; }
.agir-hero-slider .swiper-pagination { bottom: 60px !important; width: 100% !important; text-align: center !important; }
.agir-hero-slider .swiper-pagination-bullet { width: 12px !important; height: 12px !important; border-radius: 50% !important; background: #ffffff !important; opacity: 0.5 !important; margin: 0 6px !important; }
.agir-hero-slider .swiper-pagination-bullet-active { background: #FFFF00 !important; opacity: 1 !important; }

/* -------------------------------------------
   Responsividade
------------------------------------------- */
/* Tablet/notebook: o lado direito está livre, então a coluna ganha espaço.
   O título usa clamp() e se ajusta sozinho — sem sobrescrever font-size aqui. */

/* Laptops: quando a viewport fica menor que o container, ele encosta nas
   laterais da tela e a seta da esquerda (left: 40px) passa a cobrir o texto
   (afeta ex.: 1536px = 1920px @125%, 1280px e abaixo). Reservamos espaço à
   esquerda para a seta caber ao lado do texto. A seta da direita não precisa
   de reserva: a coluna de conteúdo ocupa no máx. 80%, então a direita fica
   sempre na área livre. Abaixo de 768px as setas são ocultadas. */
@media (max-width: 1600px) {
    .agir-container { padding-left: 90px !important; }
}

/* Notebooks 13"–14" (ex.: MacBook Air, ~1440px): mais largura para que
   títulos longos caibam em até 4 linhas, sem ficar apertado. */
@media (max-width: 1536px) {
    .agir-content-column { width: 70%; }
}

@media (max-width: 1280px) {
    .agir-content-column { width: 75%; }
}

@media (max-width: 1024px) {
    .agir-content-column { width: 80%; }
}

@media (max-width: 768px) {
    .agir-container { padding: 0 20px !important; }
    .agir-content-column { width: 100%; }
    .agir-hero-slider .agir-subtitle { font-size: 16px !important; margin-bottom: 40px !important; }
    .agir-hero-slider .agir-buttons { flex-direction: column; gap: 15px; }
    .agir-hero-slider .agir-btn { width: 100%; text-align: center; }
    .agir-hero-slider .swiper-button-next, .agir-hero-slider .swiper-button-prev { display: none !important; }
    .agir-hero-slider .swiper-pagination { bottom: 80px !important; }
}

/* Telas de altura curta (ex.: celular na horizontal): evita corte de conteúdo.
   Libera a altura fixa e dá respiro vertical para o conteúdo rolar/encaixar. */
@media (max-height: 600px) {
    .agir-hero-slider { height: auto; min-height: 100dvh; }
    .agir-slide-content { padding: 90px 0; }
}