/* 
	Resets defualt browser settings
	reset.css
*/

/* table { border-collapse:separate; border-spacing:0; } */
/* caption,th,td { text-align:left; font-weight:normal; } */
/* blockquote:before,blockquote:after,q:before,q:after { content:""; } */
/* blockquote,q { quotes:"" ""; } */

/*
	Page style
*/

/* #banner	 { */
	/* width:468px; */
	/* height:230px; */
    /* margin-bottom: 36px; */
	/* margin-left: 10px; */
	/* margin-right: 38px; */
    /* padding-left: 12px; */
	/* display: inline; */
	/* position:relative; */
	/* float: left; */
	/* background-color: #eee; */
    /* border: 1px solid #DDDDDD; */
/* } */
/*  */
/* #ribbon { */
	/* position:absolute; */
	/* top:-3px; */
	/* left:-15px; */
	/* z-index:500; */
/* } */
/*  */
/* #frame { */
	/* position:absolute; */
	/* z-index:0; */
	/* width:460px; */
	/* height:194px; */
	/* top:-3px; */
	/* left:-80px; */
/* } */

/*
	Slideshow
*/

/* #slides { */
	/* position:absolute; */
	/* top:10px; */
	/* z-index:100; */
/* } */

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

/* .slides_container { */
	/* width:456px; */
	/* overflow:hidden; */
	/* position:relative; */
	/* display:none; */
/* } */

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

/* .slides_container a { */
	/* width:456px; */
	/* height: 192px; */
	/* display:block; */
/* } */
/*  */
/* .slides_container a img { */
	/* display:block; */
/* } */

/*
	Next/prev buttons
*/

/* #slides .next,#slides .prev { */
	/* position:absolute; */
	/* top:70px; */
	/* width:24px; */
	/* height:43px; */
	/* display:block; */
	/* z-index:101; */
/* } */

/* #slides .next { */
	/* left:432px; */
/* } */

/*
	Pagination
*/

/* .pagination { */
	/* text-align:center; */
	/* margin:6px auto 0; */
	/* width:150px; */
/* } */
/*  */
/* .pagination li { */
	/* float:left; */
	/* margin:0 1px; */
	/* list-style:none; */
/* } */
/*  */
/* .pagination li a { */
	/* display:block; */
	/* width:12px; */
	/* height:7px; */
	/* padding-top:5px; */
	/* background-image:url(../img/pagination.png); */
	/* background-position:0 0; */
	/* color: transparent; */
	/* float:left; */
	/* overflow:hidden; */
/* } */
/*  */
/* .pagination li.current a { */
	/* background-position:0 -12px; */
/* } */
/*  */
/*
	Anchors
*/
/*  */
/* .pagination li a:link,a:visited { */
	/* color:#eee; */
	/* font-size: 0px; */
	/* text-decoration:none; */
/* } */
/*  */
/* .pagination li a:hover,a:active { */
	/* color:transparent; */
	/* text-decoration:underline; */
/* } */



/* ==========================================================================
   SLIDESJS - ESTILOS UNIFICADOS (VERSÃO CORRIGIDA)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* --------------------------------------------------------------------------
   2. BANNER - SEM DIMENSÕES FIXAS
   -------------------------------------------------------------------------- */
#banner {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    float: none !important;
}

/* --------------------------------------------------------------------------
   3. SLIDES
   -------------------------------------------------------------------------- */
#slides {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   4. SLIDES CONTAINER
   -------------------------------------------------------------------------- */
.slides_container {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

/* --------------------------------------------------------------------------
   5. SLIDES CONTROL (gerado pelo SlidesJS)
   -------------------------------------------------------------------------- */
.slides_control {
    position: relative !important;
    width: 300% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   6. CADA SLIDE
   -------------------------------------------------------------------------- */
.slides_control .slide,
.slides_container .slide {
    width: 33.333% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    float: left !important;
}

.slides_control .slide img,
.slides_container .slide img {
    width: 100% !important;
    height: 450px !important;  /* ← AUMENTEI PARA 450px */
    object-fit: cover !important;
    display: block !important;
    background: #0d4f8b !important;  /* ← FUNDO AZUL PARA IMAGENS QUE NÃO CARREGAM */
}

/* --------------------------------------------------------------------------
   7. CAPTION
   -------------------------------------------------------------------------- */
.caption {
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    z-index: 2 !important;
    max-width: 50% !important;
    background: transparent !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.caption h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
}

.caption p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   8. BOTÕES DE NAVEGAÇÃO
   -------------------------------------------------------------------------- */
#slides .prev,
#slides .next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    user-select: none !important;
    line-height: 1 !important;
}

#slides .prev:hover,
#slides .next:hover {
    background: rgba(13, 79, 139, 0.85) !important;
    border-color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
}

#slides .prev {
    left: 20px !important;
}

#slides .next {
    right: 20px !important;
}

/* --------------------------------------------------------------------------
   9. PAGINAÇÃO
   -------------------------------------------------------------------------- */
.pagination {
    text-align: center !important;
    margin: 12px auto 0 !important;
    display: block !important;
    padding: 0 !important;
}

.pagination li {
    display: inline-block !important;
    margin: 0 4px !important;
    list-style: none !important;
}

.pagination li a {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.pagination li.current a {
    background: #0d4f8b !important;
    transform: scale(1.2) !important;
}

.pagination li a:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVIDADE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .slides_control .slide img,
    .slides_container .slide img {
        height: 300px !important;
    }
    
    .caption h2 {
        font-size: 1.2rem !important;
    }
    
    #slides .prev,
    #slides .next {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }
}

@media (max-width: 768px) {
    .slides_control .slide img,
    .slides_container .slide img {
        height: 220px !important;
    }
    
    .caption {
        bottom: 20px !important;
        left: 20px !important;
        max-width: 70% !important;
    }
    
    .caption h2 {
        font-size: 1rem !important;
    }
    
    .caption p {
        font-size: 0.8rem !important;
    }
    
    #slides .prev,
    #slides .next {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .slides_control .slide img,
    .slides_container .slide img {
        height: 160px !important;
    }
    
    .caption {
        bottom: 12px !important;
        left: 12px !important;
        max-width: 80% !important;
    }
    
    .caption h2 {
        font-size: 0.8rem !important;
    }
    
    .caption p {
        font-size: 0.65rem !important;
    }
    
    #slides .prev,
    #slides .next {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    
    #slides .prev {
        left: 8px !important;
    }
    
    #slides .next {
        right: 8px !important;
    }
}