/* ===============================
   SLIDESHOW - CONFIGURAÇÕES GERAIS 
================================ */
:root{
    --transition-speed: 600ms; /* CONTROLE DE VELOCIDADE */
    --indicator-size: 28px;
    --main-color: #ffffff;
    --accent-color: #00c2ff;
}

/* ===============================
   SLIDESHOW CONTAINER
================================ */
.slider{
    position: relative;
    width: 100%;
    overflow: hidden;
}
#slider{
	padding-left: 0px;
	padding-right: 0px;
}

/* ===============================
   TRACK (ONDE OS SLIDES DESLIZAM)
================================ */
.slider-track{
    display: flex;
    transition: transform var(--transition-speed) ease;
    will-change: transform;
}

/* ===============================
   SLIDE INDIVIDUAL
================================ */
.slide{
    min-width: 100%;
    height: 70vh;
    position: relative;
	margin-top: 1px;
    user-select: none;
}

/* IMAGEM DE FUNDO */
.slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* CONTEÚDO DO SLIDE (TEXTOS) */
.slide-content{
    position: relative;
    bottom: 70%;
    width: 78%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
    pointer-events: none; /* NÃO CLICÁVEL */
}


.slide-content h1,
.slide-content h2{
    font-size: 4rem;
	color: #fff;
    margin: 0 0 10px;
}

.slide-content p{
    font-size: 1.2rem;
	color: #fff;
}

/* ===============================
   BOTÕES DE NAVEGAÇÃO
================================ */
.nav-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
}

.nav-btn.left{ left: 10px; }
.nav-btn.right{ right: 10px; }

/* ===============================
   INDICADORES NUMÉRICOS
================================ */
.indicators{
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.indicator{
    width: var(--indicator-size);
    height: var(--indicator-size);
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    color: #000;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.indicator.active{
    background: var(--accent-color);
    color: #000;
}

/* ===============================
   BARRA DE PROGRESSO
================================ */
.progress-bar{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.progress{
    height: 100%;
    width: 0%;
    background: var(--accent-color);
}

/* ===============================
   RESPONSIVO
================================ */
@media (max-width:768px){
    .slide-content h1,
	.slide-content h2{
		font-size: 1.8rem;
	}
    .slide-content p{ font-size: 1rem; }
}


/* OUTROS ESTILOS */
.slide-1,
.slide-2,
.slide-3{
  font-weight: bold;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0   -2px 0 #000,
     0    2px 0 #000,
    -2px  0   0 #000,
     2px  0   0 #000;
}
.slide-1 p,
.slide-2 p,
.slide-3 p{
	letter-spacing: 1px;
}