body {
        margin: 0;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        background: #fff5e6;
    }

    .logo {
        text-align: center;
        font-size: 2em;
        margin: 1rem;
        color: #f57c00;
    }

    .menu-edades ul,
    .menu-categorias ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0.5rem 0;
        background-color: #e0f7fa;
    }

    .menu-edades li,
    .menu-categorias li {
        margin: 0.3rem;
    }

    .menu-edades a,
    .menu-categorias a {
        display: block;
        padding: 0.5rem 1rem;
        background: #4db6ac;
        color: white;
        text-decoration: none;
        border-radius: 10px;
        transition: background 0.3s;
    }

    .menu-edades a:hover,
    .menu-categorias a:hover {
        background: #00796b;
    }

    .contenido {
        text-align: center;
        padding: 2rem;
    }

    .modal-aviso {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        background-color: #ffcc80;
        color: #333;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        z-index: 9999;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: top 0.5s ease;
    }

    .modal-aviso.visible {
        top: 0;
    }

    .modal-aviso button {
        margin-top: 10px;
        padding: 8px 16px;
        background-color: #ff7043;
        border: none;
        border-radius: 8px;
        color: white;
        font-weight: bold;
        cursor: pointer;
    }




    .carrusel-auto {
        display: flex;
        white-space: nowrap;
        width: max-content;
    }

    .carrusel-auto img {
        height: 100px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    body {
        background-color: #fff8e1;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        padding-bottom: 140px;
        /* espacio extra para carrusel y footer */
    }

    header {
        background-color: #ffe082;
        padding: 0;
        border-bottom: 4px solid #ffb300;
        position: relative;
        overflow: hidden;
        height: 300px;
    }

    header video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .banner-text {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2.5rem;
        font-weight: bold;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
        z-index: 2;
    }

    .banner-btn {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    .banner-btn a {
        transition: all 0.3s ease;
    }

    .banner-btn a:hover {
        background-color: #ffc107;
        color: #000;
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
    }

    .melocoton-img {
        width: 180px;
    }

    .intro-text {
        font-size: 1.5rem;
        color: #5d4037;
        margin-top: 2rem;
    }

    footer {
        background-color: #ffecb3;
        text-align: center;
        padding: 1rem;
        border-top: 2px solid #ffb300;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .counter {
        font-weight: bold;
        color: #e65100;
    }

    .navbar-brand {
        font-weight: bold;
        font-size: 1.5rem;
        color: #ff6f00 !important;
    }

    .card-level {
        transition: transform 0.3s;
    }

    .card-level:hover {
        transform: scale(1.05);
    }

    .icono-nivel {
        width: 100px;
        height: 100px;
    }

    .navbar-brand img {
        width: 300px;
        height: auto;
    }

    .btn:hover {
        transform: scale(1.05);
        transition: all 0.3s ease-in-out;
    }