@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    /* Further increased size and intensity for a stronger "spotlight" effect */
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.45) 0%, rgba(150, 150, 150, 0.2) 45%, #000000 85%);
    margin: 0;
    padding: 0;
    height: 100vh;
    color: white;
    overflow: hidden;
    /* Prevent scroll */
}

.container {
    height: 100vh;
    position: relative;
    /* Removed flex centering to use absolute positioning */
}

.logo-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Bring logo and isotipo closer */
}



/* Ensure images are visible on black background if they are transparent pngs with black text/shapes 
   This filter makes black pixels white. */
.logo-section img {
    /* filter: invert(1) brightness(100%);  <-- CAUTION: If the new logo is ALREADY white, this will make it black. 
       I will temporarily disable the filter to see the raw image, or I can try to judge based on the previous context.
       However, usually "logo.png" implies the main brand logo. If it was intended for white background, it's likely black.
       I will KEEP the filter for now because the user is asking to put it on a black background and didn't specify it's a white version.
    */
    /* Added drop-shadow for depth */
    filter: brightness(100%) drop-shadow(0 10px 6px rgba(0, 0, 0, 0.8));
    max-height: 75vh;
    /* Much bigger, increased to 75% of viewport height (1.5x previous size) */
    max-width: 90vw;
    /* Take up almost full width on mobile/smaller screens */
    width: auto;
    transition: transform 0.3s ease;
}

.logo-section img:hover {
    /* Hover scale removed as requested */
    transform: none;
}

.button-link {
    display: inline-block;
    transition: transform 0.3s ease;
    position: absolute;
    top: 83%;
    /* Attached to the bottom area of the logo container */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* Styles for the button image */
.button-img {
    height: 85px;
    /* Optimal size decided: balanced between visibility and elegance */
    width: auto;
    cursor: pointer;
    /* If the button image is black text on transparent, it might need inversion too. 
       I will assume it might need it if it's from the same set, but 'buton.png' sounds custom.
       I will NOT invert it by default unless it looks invisible in verification. 
       Wait, usually button images contain their own style. */
    transition: filter 0.3s ease;
    /* Removed white glow as requested, kept the exact logo shadow (0 10px 6px rgba(0,0,0,0.8)) */
    filter: brightness(75%) drop-shadow(0 10px 6px rgba(0, 0, 0, 0.8));
}

.button-link:hover {
    /* Added hover scale to button as requested, preserving centering */
    transform: translateX(-50%) scale(1.05);
}

@media (max-width: 768px) {
    .logo-section {
        width: 100%;
    }

    .logo-section img {
        width: 75vw;
        max-width: none;
        height: auto;
        max-height: 60vh;
        /* Prevent it from being too tall on short screens */
    }

    /* Button scales up too */
    .button-img {
        width: 65vw;
        /* Slightly narrower than logo to maintain hierarchy, but "big" */
        height: auto;
    }

    .button-link {
        /* Adjust positioning if needed for mobile, but % top should hold relatively well */
        /* If the logo is very wide/short, 83% might be too low or high. 
           Let's keep it as is or push it slightly down if needed. */
        top: 90%;
    }
}