body {
    /* El fondo principal oscuro con un ligero degradado radial */
    background: radial-gradient(circle at 50% 50%, #353d4a 0%, #29303a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #4dc2c2; /* Color principal teal/cian para el texto y la gráfica */
    font-family: sans-serif;
}

.logo-container {
    text-align: center;
    /* Ajustes para centrar el contenido y dar algo de perspectiva */
}

.logo-text-main {
    font-size: 10vw; /* Tamaño de fuente responsivo */
    font-weight: bold;
    letter-spacing: -0.05em;
    /* Un ligero degradado en el texto principal */
    background: linear-gradient(to right, #4dc2c2, #6af0f0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; /* Para que el clip de fondo funcione correctamente */
    margin-bottom: 0.1em;
}

.logo-graphic {
    /* Placeholder para la gráfica del circuito. Idealmente, usarías una etiqueta <img> o un <svg> aquí */
    /* Para este ejemplo, solo estamos enfocados en el fondo y el texto */
    height: 5vw; 
    width: 5vw;
    display: none; /* Ocultar este div placeholder */
}

.logo-text-sub {
    font-size: 1vw; /* Tamaño de fuente más pequeño para el subtítulo */
    font-weight: normal;
    letter-spacing: 0.2em;
    color: #4dc2c2; /* Mismo color principal */
    text-transform: uppercase;
    /* Una ligera sombra de texto para dar un poco de profundidad */
    text-shadow: 0 0 5px rgba(77, 194, 194, 0.5);
}

/* Media query para ajustar tamaños en pantallas más pequeñas */
@media (max-width: 768px) {
    .logo-text-main {
        font-size: 20vw;
    }
    .logo-text-sub {
        font-size: 2vw;
    }
}