/*
estilo del boton rojo
 */

 
/* Estilo inicial del botón */
.main-slide__button {
    display: inline-flex; /* Usamos inline-flex para facilitar la alineación del texto */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    padding: 8px 50px; /* Hacemos el botón más largo con más padding */
    background-color: red; /* Fondo rojo */
    color: white; /* Texto blanco */
    text-decoration: none; /* Elimina el subrayado */
    border: 2px solid red; /* Borde rojo */
    border-radius: 30px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente más grande para mayor legibilidad */
    font-weight: bold; /* Texto en negrita */
    transition: all 0.3s ease; /* Efecto de transición suave */

}

/* Estilo cuando el mouse pasa sobre el botón (hover) */
.main-slide__button:hover {
    background-color: white; /* Fondo blanco */
    color: red; /* Texto rojo */
    border-color: red; /* Borde rojo */
    text-decoration: none; /* Elimina el subrayado */
}



/* Estilos para dispositivos más pequeños */
@media (max-width: 768px) {
    .main-slide__button {
        font-size: 14px; /* Tamaño más pequeño para tablets */
        padding: 8px 16px; /* Ajustar el espaciado */
    }
}

@media (max-width: 480px) {
    .main-slide__button {
        font-size: 10px; /* Tamaño más pequeño para móviles */
        padding: 6px 12px; /* Ajustar el espaciado */
    }
}


.bt_ver_mas {
  
    background-color: red; /* Color de fondo rojo */
    color: black; /* Color de texto negro */
    text-decoration: none; /* Sin subrayado */
    border-radius: 30px; /* Bordes redondeados */
    transition: background-color 0.3s, border 0.3s; /* Transición suave */
    padding: 4px 25px; /* Hacemos el botón más largo con más padding */
    font-weight: bold; /* Texto en negrita */
    justify-content: center; /* Centra el contenido horizontalmente */
    font-size: 18px;
}

.bt_ver_mas:hover {
    background-color: white; /* Cambia a fondo blanco al pasar el mouse */
    color: red; /* Cambia el texto a rojo */
    border: 2px solid red; /* Borde rojo */
}

/* Responsividad */
@media (max-width: 600px) {
    .bt_ver_mas { padding: 2px 25px; /* Hacemos el botón más largo con más padding */
    }
}