*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.main-nav{
    margin-top:10px;
    list-style:none;
    padding-left:0;
    background-color: #13a4a4
    
}

.main-nav-item {
    display:inline-block;
    border-right: 3px solid #ffffff;
}

.main-nav-item a{
    color: #ffffff;
    padding: 2px 8px;
    text-decoration:none;
    border-radius: 2px;
    /*background-color: red;*/

}

.main-nav-item a:hover{
    color: blue;
    
}

.main-nav-item a:active{
    color: chocolate;
}
/*
.main-nav-item a::after{
    content: "/";
    
}*/

main{
    width: 100%;
    height: 500px;
    border: 10px solid rgb(201, 80, 80);
    padding: 20px 35px;

}   /* DISEÑO RESPONSIVO */

@media (max-width: 768px) {

    
    header {
        padding: 20px 10px;
    }

    header h1 {
        font-size: 1.5rem; 
        margin-bottom: 20px;
    }

    
    .menu {
        flex-direction: column; 
        align-items: stretch;  
        gap: 8px;
        padding: 0 10px;
    }

    .menu a {
        text-align: center;
        padding: 10px 14px;
        font-size: 14px;
    }

    .submenu {
        position: static;       
        transform: none;      
        width: 100%;
        box-shadow: none;     
        border: 1px solid #d1d5db;
        margin-top: 5px;
        background-color: #f8f9fa;
    }

    .submenu li a {
        text-align: center;
        color: #1b2a4a;
    }


    main {
        margin: 20px auto;
        padding: 0 15px; 
    }

    main h2 {
        font-size: 1.3rem;
    }

    main h3 {
        font-size: 1.1rem;
    }

    
    main img, article img {
        max-width: 100%;
        height: auto;
    }

    table {
        display: block;
        overflow-x: auto; 
        white-space: nowrap;
    }
}