html{
    scroll-behavior:smooth;
        }

    body{
    margin:0;
    font-family:Arial;
    background:#f5d46b;
    color:#5a3b00;
        }

    marquee{
    background:#7a5200;
    color:#fff3b0;
    padding:8px;
    font-weight:bold;
        }

    header{
    background:linear-gradient(to right,#d4a017,#f5d46b);
    height:60vh;
    position:relative;
    text-align:center;
    overflow:hidden;
        }

    .Banner{
    background:rgba(90,60,0,0.35);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
          }

    .logo{
    width:130px;
    position:absolute;
    top:20px;
    left:20px;
        }

    #menu-toggle{
    display:none;
        }
  
    .boton-menu{
    position:absolute;
    top:20px;
    right:20px;
    background:#7a5200;
    color:white;
    padding:10px 15px;
    font-size:20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
        }

    #menu{
    position:fixed;
    top:0;
    right:-320px;
    width:280px;
    height:100%;
    background:#fff0b3;
    padding:90px 20px;
    transition:0.4s;
    box-shadow:-3px 0 10px rgba(0,0,0,0.3);
    z-index:999;
       }

    #menu a{
    display:block;
    padding:15px;
    margin-bottom:10px;
    text-decoration:none;
    color:#7a5200;
    font-weight:bold;
    border-radius:8px;
        }

    #menu a:hover{
    background:#ffd24d;
        }

    #menu-toggle:checked ~ #menu{
    right:0;
        }

    .cerrar{
    display:block;
    margin-bottom:20px;
    background:#7a5200;
    color:white;
    padding:10px;
    text-align:center;
    border-radius:8px;
    cursor:pointer;
    font-weight:bold;
        }

    h1{
    font-size:48px;
    margin:0;
        }

    h1 mark{
    background:#fff3b0;
    padding:8px 15px;
    border-radius:10px;
    color:#7a5200;
        }

    main{
    padding:20px;
        }

    .logo{
    width:130px;
    height:130px;
    position:absolute;
    top:20px;
    left:20px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid white;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
        }

    .publicacion{
    background:#fff8dc;
    padding:20px;
    margin:20px 0;
    border-radius:12px;
    box-shadow:0 0 10px rgba(0,0,0,0.15);
        }

    h2{
    color:#a66b00;
    margin-top:0;
        }

    table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
        }

    th,td{
    border:2px solid #d4a017;
    padding:10px;
    text-align:center;
        }

    th{
    background:#d4a017;
    color:white;
        }

    tr:hover{
    background:#fff0b3;
        }

    .boton{
    display:inline-block;
    padding:10px 18px;
    background:#d4a017;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
        }

    footer{
    background:#7a5200;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:30px;
        }

    @media(max-width:768px){

    h1{
    font-size:30px;
        }

    .logo{
    width:90px;
        }

    header{
    height:auto;
    padding:40px 10px;
        }

    #menu{
    width:220px;
        }

}