/* --- CONFIGURACIÓN GENERAL --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

/* --- LOGO (Escritorio) --- */
.logo-container {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 300px; 
    opacity: 0;
    animation: fadeIn 4s ease-in-out forwards;
}

.logo-container img, 
.logo-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- TEXTOS (Escritorio) --- */
.welcome-text {
    position: absolute;
    top: 35%; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 4s ease-in-out 1s forwards;
	text-shadow: 2px 2px 4px grey;
}

h1 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 550;
    font-size: 2.5rem;
    color: #464646;
    margin-bottom: 0.5rem;
}

#human {
    font-family: 'DM Mono', monospace;
    font-weight: 500; 
    font-size: 1.2rem;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h2 {
    font-family: 'DM Mono', monospace;
    font-weight: 400; 
    font-size: 1.2rem;
    font-style: italic;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.5; /* Espaciado para que el <> respire */
}

/* --- SVG DE FONDO --- */
#svg-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- RESPONSIVE: MÓVILES (Vertical - Portrait) --- */
/* Aquí mantenemos los <br> activos para que se vea hacia abajo */
@media (max-width: 600px) and (orientation: portrait) {
    .logo-container {
        width: 50%; 
        top: 15%;
    }

    h1 { font-size: 1.8rem; }
    #human { font-size: 1.0rem; }
    h2 { font-size: 0.9rem; }

    .welcome-text {
        top: 28%;
    }
}

/* --- RESPONSIVE: MODO HORIZONTAL (Landscape) --- */
/* ÚNICAMENTE AQUÍ quitamos los <br> para evitar que el texto se corte por falta de altura */
@media (orientation: landscape) and (max-height: 500px) {
    .logo-container {
        width: 120px; 
        top: 15%;
    }

    .welcome-text {
        top: 35%; 
    }

    h1 {
        font-size: 1.4rem;
        margin-bottom: 0.1rem;
    }

    #human {
        font-size: 0.9rem;
    }

    h2 {
        font-size: 0.8rem;
    }

    /* En horizontal, los idiomas se ponen en una línea para que entren en pantalla */
    h2 br {
        display: none;
    }
}