#pantalla-carga {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

#pantalla-carga.oculto { display: none; opacity: 0; }

.contenedor-logo { width: 100px; height: 100px; }

.trazo-hex {
    fill: none;
    stroke: var(--color-acento);
    stroke-width: 5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dibujarHex 2s forwards ease-in-out;
}

/* Filtro para convertir cualquier color de logo.svg al cian #64ffda */
.logo-interno-img, .logo-mini-img {
    filter: invert(82%) sepia(85%) saturate(395%) hue-rotate(107deg) brightness(102%) contrast(101%);
    opacity: 0;
    animation: aparecerLetra 0.5s 1.5s forwards;
}

/* Nueva clase para animar el logo SVG interno (si se usa como trazado) */
.logo-interno {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dibujarHex 1.5s 1.2s forwards ease-in-out;
}

.letra-logo {
    fill: var(--color-acento);
    font-size: 40px;
    font-family: sans-serif;
    text-anchor: middle;
    opacity: 0;
    animation: aparecerLetra 0.5s 1.5s forwards;
}

@keyframes dibujarHex { 
    to { stroke-dashoffset: 0; } 
}

@keyframes aparecerLetra { 
    to { opacity: 1; } 
}