{{-- <div >
  
        <img src="{{ asset('img/Isotipo original copia.png') }}" alt="Logo" style="height: 10% ; width: 10%; ">
   
</div> --}} 
    <div class="flex justify-center items-center min-h-[60vh]">
        <div id="logo-container"
            class="transition-transform duration-300 ease-in-out hover:scale-125"
            style="width: 100px; height: 100px;" {{-- valor inicial temporal --}}
        >
            <img src="{{ asset('img/Isotipo original copia.png') }}" alt="Logo" class="w-full h-full object-contain">
        </div>
    </div>

    <script>
        function resizeLogo() {
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            // Calcula tamaño como porcentaje del ancho de la pantalla
            const percentage = 0.9; // 30% del ancho
            const size = screenWidth * percentage;

            const logo = document.getElementById('logo-container');
            if (logo) {
                logo.style.width = `${size} px`;
                logo.style.height = `${size} px`;
            }
        }

        // Ajusta cuando se carga y cuando se cambia el tamaño de la pantalla
        window.addEventListener('load', resizeLogo);
        window.addEventListener('resize', resizeLogo);
    </script>