html{
        background: linear-gradient(to top left, #ff9900 0%, #6600cc 100%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
    }

header{
        display: flex;
        align-items: center;
        background-color: #3e71e088;
    }

.header-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }

.link-header {
        display: inline-block;
        padding: 10px 25px;
        background-color: #2f00ff;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #7700ffb4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-header:hover {
        font-family: cursive;
        background-color: #c6c8ca;
        color: rgb(32, 32, 32);
    }

.link-header-ico {
        display: inline-block;
        padding: 5px 16px;
        background-color: #2f00ff;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #7700ffb4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-header-ico:hover {
        font-family: cursive;
        background-color: #c6c8ca;
        color: rgb(32, 32, 32);
    }

.link-yt {
        display: inline-block;
        padding: 5px 16px;
        background-color: #ff2b2b;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #cac0c0b4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-yt:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

.link-tt {
        display: inline-block;
        padding: 5px 16px;
        background-color: #020202;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #505050b4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-tt:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

.link-ig {
        display: inline-block;
        padding: 5px 16px;
        background-color: #f847bd;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #7700ffb4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-ig:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

.link-ws {
        display: inline-block;
        padding: 5px 16px;
        background-color: #2fff52;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #25e01fb4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-ws:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

.link-ds {
        display: inline-block;
        padding: 5px 16px;
        background-color: #3700ffb4;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #361ab1;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease;
    }

.link-ds:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

footer {
        background-color: #333333af;
        color: white;
        text-align: center;
        padding: 20px;
    }

.link-footer {
        display: inline-block;
        padding: 5px 16px;
        background-color: #000000;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        border: 5px solid #cac0c0b4;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 25px;
        transition: background-color 0.3s ease; 
    }

.link-footer:hover {
        font-family: cursive;
        background-color: #ffffff;
        color: rgb(32, 32, 32);
    }

    .slider {
        position: relative;
        width: 80%;
        max-width: 700px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .slides img {
        width: 100%;
        border-radius: 10px;
    }

    /* Botones de navegación */
    .prev, .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 18px;
    }

    .prev { left: 10px; }
    .next { right: 10px; }

    .prev:hover, .next:hover {
        background: rgba(0,0,0,0.8);
    }