.titulo {
    font-size: 4em; /* Tamaño de fuente */
    color: #3498db; /* Color del texto */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    font-weight: bold; /* Negrita */
    letter-spacing: 2px; /* Espaciado entre letras */
    margin-bottom: 10px; /* Margen inferior */
    /* Agregar efectos de sombra para un aspecto moderno */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Agregar una transición suave al color del texto */
    transition: color 0.3s ease-in-out;
}

/* Agregar un efecto de color al pasar el cursor sobre el título */
.titulo:hover {
    color: #e74c3c; /* Cambiar el color al pasar el cursor */
}



.titulo.subtitulo {
    font-size: 1.5em; /* Tamaño de fuente */
    color: #3498db; /* Color del texto */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    font-weight: bold; /* Negrita */
    letter-spacing: 2px; /* Espaciado entre letras */
    margin-bottom: 10px; /* Margen inferior */
    /* Agregar efectos de sombra para un aspecto moderno */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Agregar una transición suave al color del texto */
    transition: color 0.3s ease-in-out;
}

/* Agregar un efecto de color al pasar el cursor sobre el título */
.titulo.subtitulo:hover {
    color: #e74c3c; /* Cambiar el color al pasar el cursor */
}



          /*DDDDD*/
 
 
 
 /* Flechas personalizadas */
.arrow-left::before,
.arrow-right::before {
    content: "";
    display: block;
    width: 40px; /* Ancho de la flecha */
    height: 40px; /* Altura de la flecha */
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid transparent;
    transition: all 0.3s ease; /* Agregar una transición suave */
}

/* Estilo de la flecha izquierda */
.arrow-left::before {
    border-right: 8px solid red; /* Color de la flecha izquierda */
    border-top: 8px solid red; /* Color de la flecha izquierda */
    transform: translateY(-50%) rotate(225deg); /* Ajuste el ángulo de rotación */
    left: 10px; /* Ajuste de posición */
    box-shadow: 5px 3px 3px rgba(0, 0, 0, 0.05); /* Sombra 3D con opacidad reducida */
}

/* Estilo de la flecha derecha */
.arrow-right::before {
    border-left: 8px solid red; /* Color de la flecha derecha */
    border-bottom: 8px solid red; /* Color de la flecha derecha */
    transform: translateY(-50%) rotate(-135deg); /* Ajuste el ángulo de rotación */
    right: 10px; /* Ajuste de posición */
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.4); /* Sombra 3D con opacidad reducida */
}