:root {
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --accent: #0ea5e9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Evitar selección de texto en todo el documento */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.maintenance-container {
    padding: 2rem;
    width: 100%;
    max-width: 800px;
    text-align: center;
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logo-container {
    margin-bottom: 2rem;
}

.logo {
    max-width: 150px;
    height: auto;
    /* Evitar interacciones con el logo (clic derecho, arrastrar) */
    pointer-events: none;
    -webkit-user-drag: none;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* === Robot SVG Animation Styles === */

.robot-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 180px; 
    margin: 0 auto;
}

.robot-animation {
    width: 100%;
    height: auto;
    overflow: visible;
}

.robot-character {
    animation: hoverRobot 0.6s ease-in-out infinite alternate;
}

.shadow-pulse {
    transform-origin: 100px 195px;
    animation: shadowPulse 0.6s ease-in-out infinite alternate;
}

.robot-head {
    transform-origin: 100px 105px;
    animation: bobHead 0.3s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

.arm-right {
    transform-origin: 120px 130px;
    animation: hammer 0.6s infinite;
}

/* Chispas con transform-origin exacto para que escalen desde su centro */
.spark {
    opacity: 0;
}
.spark-1 { transform-origin: 150px 120px; animation: sparkFly1 0.6s infinite; }
.spark-2 { transform-origin: 145px 115px; animation: sparkFly2 0.6s infinite; }
.spark-3 { transform-origin: 155px 125px; animation: sparkFly3 0.6s infinite; }

.gear-bg {
    transform-origin: 145px 155px;
    animation: spinGear 4.8s linear infinite;
}

.eyes {
    transform-origin: 100px 85px;
    animation: cartoonBlink 4.8s infinite;
}

.eye {
    animation: lookAround 2.4s infinite alternate;
}

.smile {
    animation: pulseSmile 1.2s infinite alternate;
}

/* IMPORTANTE: transform-origin para evitar que la antena salga volando al escalar */
.antenna-bulb {
    transform-origin: 105px 40px;
    animation: popBulb 0.3s infinite alternate;
}

.flame {
    transform-origin: 100px 155px;
    animation: flickerFlame 0.08s infinite alternate;
}
.flame-inner {
    transform-origin: 100px 155px;
    animation: flickerFlame 0.1s infinite alternate-reverse;
}


/* === KEYFRAMES === */

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hoverRobot {
    from { transform: translateY(0px); }
    to { transform: translateY(-15px); }
}

@keyframes shadowPulse {
    from { transform: scale(1.2); opacity: 0.9; }
    to { transform: scale(0.6); opacity: 0.2; }
}

@keyframes bobHead {
    from { transform: rotate(-5deg) translateY(0); }
    to { transform: rotate(10deg) translateY(2px); }
}

@keyframes hammer {
    0%, 100% { transform: rotate(-50deg); }
    15%      { transform: rotate(-50deg); }
    35%      { transform: rotate(25deg); }
    45%      { transform: rotate(25deg); }
    80%      { transform: rotate(-50deg); }
}

/* Modificadas para usar origin local */
@keyframes sparkFly1 {
    0%, 32% { opacity: 0; transform: translate(0, 0) scale(0); }
    35%     { opacity: 1; transform: translate(0, 0) scale(1); }
    70%, 100% { opacity: 0; transform: translate(-30px, -40px) scale(1.5); }
}

@keyframes sparkFly2 {
    0%, 32% { opacity: 0; transform: translate(0, 0) scale(0); }
    35%     { opacity: 1; transform: translate(0, 0) scale(1); }
    70%, 100% { opacity: 0; transform: translate(15px, -45px) scale(1.8); }
}

@keyframes sparkFly3 {
    0%, 32% { opacity: 0; transform: translate(0, 0) scale(0); }
    35%     { opacity: 1; transform: translate(0, 0) scale(1); }
    70%, 100% { opacity: 0; transform: translate(30px, -15px) scale(1.3); }
}

@keyframes spinGear {
    to { transform: rotate(360deg); }
}

@keyframes flickerFlame {
    from { transform: scaleY(0.8) scaleX(0.9); }
    to { transform: scaleY(1.4) scaleX(1.1); }
}

@keyframes cartoonBlink {
    0%, 92%, 98% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes lookAround {
    0%, 30% { transform: translateX(0) translateY(0); }
    40%, 60% { transform: translateX(-4px) translateY(2px); }
    80%, 100% { transform: translateX(4px) translateY(-1px); }
}

@keyframes popBulb {
    from { transform: scale(1); filter: drop-shadow(0 0 5px #fbbf24); fill: #f59e0b; }
    to { transform: scale(1.4); filter: drop-shadow(0 0 15px #fbbf24); fill: #fef08a; }
}

@keyframes pulseSmile {
    from { filter: drop-shadow(0 0 2px var(--accent)); }
    to { filter: drop-shadow(0 0 10px var(--accent)); }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    h1 { font-size: 2.2rem; }
    p { font-size: 1.1rem; }
    .robot-container { max-width: 140px; } 
    .logo { max-width: 110px; }
}