/* Para la versión de escritorio */
            @media screen and (min-width: 1801px) {
                #mobile-logo {
                    display: none;
                }
            }
            @media screen and (max-width: 1800px) {
                #mobile-logo {
                    display: none;
                }
            }
            @media screen and (max-width: 1800px) {
                #mobile-logo {
                    display: none;
                }
            }
            @media screen and (max-width: 1280px) {
                #mobile-logo {
                    display: none;
                }
            }	
            
            /* Para la versión móvil, ocultamos la versión de escritorio y mostramos la móvil */
            @media (max-width: 736px) {
            
                .desktop-element {
                    display: none;
                }
                
                #main > section {
                    margin: 0 0 0 0; 
                }
            
        
            #mobile-logo {
                display: block;
                text-align: center;
                padding-top: 10px;
                padding-bottom: 5px;
                padding-left: 20px;
                display: flex;
                  /* justify-content: center; */
                  align-items: center;
            }
        
            /* Ocultar inicialmente las imágenes del logo móvil */
            #logo-flor, #logo-letras {
                opacity: 0;
                position: relative;
            }
            #logo-letras {
                width: 40%;
            }
            #logo-flor {
                margin-top: -5px;
            }
        
            .menu-btn {
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
                position: absolute;
                right: 20px;
                top: 20px;
                color:white;
            }
            
        
            .menu {
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            width: 30%;;
            }
        
            .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            }
        
            .menu ul li {
            padding: 10px 20px;
            }
        
            .menu ul li a {
            text-decoration: none;
            color: #333;
            display: block;
            }
        
            
        
            /* Transición para el fade-in */
            .fade-in {
                animation: fadeIn 2s forwards;
            }
        
            /* Transición para el slide-in */
            .slide-in {
                animation: slideIn 1s forwards 1s; /* Comienza después del fade-in */
            }
        
        
        
            /* Keyframes para fade-in */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        
            /* Keyframes para slide-in */
            @keyframes slideIn {
                from {
                    left: -100px;
                }
                to {
                    left: 0;
                    opacity: 1;
                }
            }
        }

        #main > section {
            margin: 0 0 0 0; 
        }

        #principal{
                margin-top: 0px !important;
        
            }
        
        .modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
          z-index: 1000;
        }
        
        /* Contenido del modal */
        .modal-content {
          background-color: #fff;
          margin: 10% auto;
          padding: 20px;
          border-radius: 10px;
          width: 90%; 
          /*max-width: 600px;*/
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          animation: fadeIn 0.5s;
          text-align: justify;
        }
        
        /* Botón de cierre */
        .close {
          float: right;
          font-size: 24px;
          cursor: pointer;
        }
        
        .menu-btn-desktop {
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
                position: absolute;
                right: 20px;
                top: 20px;
                color:#6f21217c;
            }
            
        
            .menu-desktop {
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            width: 30%;;
            }
        
            .menu-desktop ul {
            list-style: none;
            padding: 0;
            margin: 0;
            }
        
            .menu-desktop ul li {
            padding: 10px 20px;
            }
        
            .menu-desktop ul li a {
            text-decoration: none;
            color: #333;
            display: block;
            }
        
            .texto-nota{
                font-size: 18px;
            }

            .label {
                display: inline-block;
                margin-top: 0px;
                padding: 0px 15px;
                color: #333; /* Color del texto */
                font-size: 0.6em;
                font-weight: bold;
                border-radius: 3px;
                text-transform: uppercase;
              }
              .lhistoria{background-color: #ffd98c;}
    
              .lnoticia{background-color: #f69d9d;}
              
              h2{
                margin: 0 0 0.5em 0 !important;
              }
    
            .vineta {
            position: relative;
            padding-left: 40px; /* Espacio para la viñeta */
            }
    
            .vineta::before {
            content: "■"; /* Cambia a "■" para un cuadrado */
            position: absolute;
            left: 0;
            margin-top:-4px;
            font-size: 1.5em; /* Tamaño de la viñeta */
            top: 1; /* Alineación vertical */
            }
    
            .vinetaHistoria::before {
                color: #ffd98c; /* Color de la viñeta */
            }
            .vinetaNoticia::before {
                color: #f69d9d; /* Color de la viñeta */
            }