:root {
    --color-principal: #153F65;
    --color-texto: #313131;
    --color-wa: #25d366;
    --color-footer: #888888;
    --color-first_bttn: #70BDF2;
    --color-text_bttn: #5D3B09;
    --color-fondo: #E4FBFF;
  }
body{
    margin: 0;
    padding: 60px 0 0 0; 
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

nav{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 60px;              /* altura real de la barra */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: orange;
    z-index: 1000;
}

nav img{
    max-height: 40px;
}

.slider {
    background-image: url("../img/fondo.jpg"); /* ruta de tu imagen */
    background-size: cover;       /* para que la imagen cubra todo */
    background-position: center;  /* centra la imagen */
    background-repeat: no-repeat; /* evita que se repita */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 25px;
}



.slider_ind {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1000px;
    transition: opacity 0.5s ease-in-out;
}


.slider_ind.active {
    display: flex;
}

.slider_r, .slider_l {
    max-width: 50%;
}
.slider_r img {
    max-width: 70%;
}
.slider_content {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.slider_content a {
    background-color: var(--color-first_bttn);
    text-decoration: none;
    color: var(--color-texto);
    padding: 5px;
    border-radius: 3px;
    text-align: center;
}

/* Estado inicial oculto */
.slider_ind {
    display: none;
    align-items: center;
    max-width: 90%;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-in-out;
}

/* Estado visible con animación */
.slider_ind.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Columnas iniciales */
.slider_l, .slider_r {
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

/* Entrada desde la derecha para .slider_l */
.slider_ind.active .slider_l {
    animation: slideFromRight 0.6s ease forwards;
}

/* Entrada desde la izquierda para .slider_r */
.slider_ind.active .slider_r {
    animation: slideFromLeft 0.6s ease forwards;
}

/* Animación entrada desde la izquierda */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación entrada desde la derecha */
@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación salida hacia arriba */
.slider_ind.exit {
    opacity: 0;
    transform: translateY(-50px);
}


/* Puntitos */
.slider_dots {
    margin: 12px auto 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    /* opcional: ancho máximo para alinearlos con el slider */
    max-width: 90%;
}


.slider_dots span {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider_dots span.active {
    background-color: #333;
}

.content{
    max-width: 1000px;
    margin-top: 25px;
}

.content h1{
    text-align: center;
    color: var(--color-principal);
}

.content p{
    text-align: justify;
    color: var(--color-texto);
}


@media (max-width: 768px){

    .slider_r img {
        max-width: 100%;
    }

    .slider_ind {
        max-width: 90%;
    }

    .content{
        max-width: 90%;
    }

}