/* Reset básico */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    background-color: black;
    color: #f8f8f8;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Contenedor principal */
.logo-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.logo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    opacity: 0;
    transform: translateY(20px);
    animation: logo-fade-in 0.9s ease-out forwards;
}

/* Logo responsive centrado */
#logo {
    display: block;
    width: min(260px, 60vw);
    max-height: 60vh;
}

/* Hover visual en las partes sólidas */
#logo polygon[data-menu] {
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease;
}

#logo polygon[data-menu]:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

/* Paneles de menú */
.logo-menus {
    min-height: 140px;
    max-width: 480px;
    text-align: center;
}

.logo-menus h2 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.logo-menus p {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #d0d0d0;
}

.logo-menus ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0;
}

.logo-menus a {
    font-size: 0.85rem;
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.logo-menus a:hover {
    border-color: #ffffff;
    color: #ffffff;
}

/* Animación entre paneles */
.menu-panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Fade-in del contenedor */
@keyframes logo-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === TUS ANIMACIONES ORIGINALES DEL SVG === */

#logo polygon:nth-child(2){
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 15px;
    stroke-dasharray: 2850px;
    stroke-dashoffset: 2850px;
    animation: line-anim 4s ease forwards .02s;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(2):hover {
    animation: fill-anim 3s ease forwards;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(3){
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 15px;
    stroke-dasharray: 1320px;
    stroke-dashoffset: 1320px;
    animation: line-anim 3s ease forwards 4.5s;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(3):hover {
    animation: fill-anim 3s ease forwards;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(4){
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 15px;
    stroke-dasharray: 800px;
    stroke-dashoffset: 800px;
    animation: line-anim 2s ease forwards 3.9s;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(4):hover {
    animation: fill-anim 3s ease forwards;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(5){
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 15px;
    stroke-dasharray: 800px;
    stroke-dashoffset: 800px;
    animation: line-anim 2s ease forwards 3.2s;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(5):hover {
    animation: fill-anim 3s ease forwards;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(6){
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 15px;
    stroke-dasharray: 3000px;
    stroke-dashoffset: 3000px;
    animation: line-anim 5s ease forwards 1.7s;
    animation-iteration-count: infinite;
}

#logo polygon:nth-child(6):hover {
    animation: fill-anim 3s ease forwards;
    animation-iteration-count: infinite;
}

.realidad {
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 0px;
    stroke-dasharray: 0px;
    stroke-dashoffset: 0px;
    animation: fill-anim 4s ease forwards 1.7s;
    animation-iteration-count: infinite;
}

.realidad:hover {
    stroke: rgb(255, 255, 255);
    stroke-width: 2px;
    animation: line-anim 2s ease forwards;
    animation-iteration-count: infinite;
}

.simulada {
    fill: rgb(255, 255, 255);
    fill-opacity: 0%;
    stroke: rgb(255, 255, 255);
    stroke-width: 0px;
    stroke-dasharray: 0px;
    stroke-dashoffset: 0px;
    animation: fill-anim 4s ease forwards 1.7s;
    animation-iteration-count: infinite;
}

.simulada:hover {
    stroke: rgb(255, 255, 255);
    stroke-width: 2px;
    animation: line-anim 2s ease forwards;
    animation-iteration-count: infinite;
}

@keyframes line-anim{
    to{
        stroke-dashoffset: 0px;
        stroke-width: 0px;
    }
}

@keyframes fill-anim{
    0%{
        fill-opacity: 0%;
    }
    50%{
        fill-opacity: 100%;
    }
    100%{
        fill-opacity: 0%;
    }
}