/*titulo que se escribe*/
.typewriter-container {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20vh;
    /* Ajusta la altura según necesites */
}
.typewriter h1 {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .05em;
}

/* ANIMACIÓN */
.typewriter.active h1 {
    animation:
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
}

/* KEYFRAMES */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    50% { border-color: transparent; }
}

/* ========================= */
/* MÓVIL */
/* ========================= */

@media (max-width: 768px) {

    .typewriter h1 {

        /* permite varias líneas */
        white-space: normal;

        /* muestra todo */
        overflow: visible;

        /* quita cursor */
        border-right: none;

        /* elimina la animación */
        animation: none !important;

        width: 100%;
    }

}
/* Animación de escritura */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* Animación del cursor parpadeante */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(105, 76, 21)
    }
}

.color {
    color: rgb(105, 76, 21);
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow:  12px 30px rgba(105, 76, 21,0.2);
}

 .parallax2 {
    background-image: url(../img/img/mapafilarmonica2.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0;
}