:root {
    --color-background: #050505;
    --color-primary-cyan: #00ffff;
    --color-secondary-purple: #9e00ff; 
    --color-alert-red: #ff003c;
    --color-gold: #D4AF37;
    --color-text-light: #f5f5f5;
    --color-text-medium: #b0b0b0;
    --color-border: rgba(0, 255, 255, 0.1); 
}

/* --- TRANSICIONES Y EFECTOS --- */
.trans-matrix {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: black; z-index: 99999; display: flex; justify-content: center; align-items: center;
    transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}
.trans-matrix.active { transform: translateY(0); }
.trans-matrix::after { content: 'SYSTEM_BOOT_SEQUENCE...'; color: #0f0; font-family: 'Roboto Mono'; font-size: 2vw; }

.trans-warp {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 99999; opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease-in;
}
.trans-warp.active { opacity: 1; }

.trans-tv {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 99999; opacity: 0; pointer-events: none;
}
.trans-tv.active { opacity: 1; animation: tvOffAnim 0.5s forwards; }

@keyframes tvOffAnim {
    0% { transform: scale(1, 1); background: white; }
    50% { transform: scale(1, 0.005); background: white; }
    100% { transform: scale(0, 0.005); background: black; }
}

.trans-gold-layer {
    position: fixed; top: 0; width: 50%; height: 100%; background: #000; z-index: 99999;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1); border-right: 2px solid var(--color-gold);
}
.t-left { left: 0; transform: translateX(-100%); }
.t-right { right: 0; transform: translateX(100%); border-left: 2px solid var(--color-gold); border-right: none; }

.trans-gold-container.active .t-left { transform: translateX(0); }
.trans-gold-container.active .t-right { transform: translateX(0); }

/* --- ESTILOS BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--color-background);
    background-image: 
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 50px 50px;
    background-attachment: fixed;
    color: var(--color-text-medium);
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}

.container { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

h2 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--color-text-light); font-weight: 900; line-height: 1.1; text-align: center; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; color: var(--color-primary-cyan); font-family: 'Roboto Mono', monospace; margin-bottom: 2rem; }
p { font-size: 1.2rem; text-align: center; max-width: 65ch; margin: 0 auto 2rem auto; }
strong { color: var(--color-primary-cyan); font-weight: 800; }

/* --- COMPONENTES --- */
.protocol-section {
    padding: 8rem 0; min-height: 100vh; display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    border-bottom: 1px solid var(--color-border);
    opacity: 0; transition: opacity 1s, transform 1s;
}
.protocol-section.is-visible { opacity: 1; animation: fadeInUp 0.8s forwards; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }

.section-tag {
    display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--color-border);
    font-family: 'Roboto Mono', monospace; color: var(--color-primary-cyan);
    font-weight: 700; margin-bottom: 2rem; background: rgba(0,0,0,0.5);
}

.typewriter {
    display: inline-block; overflow: hidden; white-space: nowrap;
    border-right: .15em solid var(--color-primary-cyan);
    animation: typing 3s steps(30, end) infinite alternate, blink-caret .75s step-end infinite;
}

@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { 50% { border-color: transparent } }

.hero { justify-content: center; text-align: center; }
.robotiax-title {
    font-family: 'Roboto Mono', monospace;
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 900; color: var(--color-primary-cyan);
    text-align: center; margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}
.robotiax-title span { display: inline-block; transition: transform 0.2s; }
.robotiax-title.powered-up { animation: finalPowerUp 0.5s ease-in-out; }

@keyframes finalPowerUp { 50% { transform: scale(1.1); text-shadow: 0 0 50px var(--color-secondary-purple); } }

.content-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; }

.action-button {
    display: inline-block; width: 100%; max-width: 400px;
    padding: 1.5rem 1rem; margin-top: 1rem;
    border: 2px solid var(--color-primary-cyan); border-radius: 4px;
    background: linear-gradient(90deg, var(--color-primary-cyan), var(--color-secondary-purple), var(--color-primary-cyan));
    background-size: 200% 200%; color: #000;
    font-family: 'Roboto Mono', monospace; font-size: 1.3rem; font-weight: 800;
    text-align: center; text-decoration: none; text-transform: uppercase;
    transition: all 0.3s;
    animation: buttonFlow 3s ease infinite;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    cursor: pointer;
}
.action-button:hover { transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 40px rgba(0, 255, 255, 0.6); }

@keyframes buttonFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.btn-ia { 
    border-color: var(--color-secondary-purple); 
    background: linear-gradient(90deg, var(--color-secondary-purple), #ff00ff, var(--color-secondary-purple));
    box-shadow: 0 0 20px rgba(158, 0, 255, 0.4);
}
.btn-ia:hover { box-shadow: 0 10px 40px rgba(158, 0, 255, 0.6); }

.btn-sec {
    border-color: var(--color-alert-red);
    background: linear-gradient(90deg, var(--color-alert-red), #ff4444, var(--color-alert-red));
    box-shadow: 0 0 20px rgba(255, 0, 60, 0.4);
}
.btn-sec:hover { box-shadow: 0 10px 40px rgba(255, 0, 60, 0.6); }

.btn-gold {
    border-color: var(--color-gold);
    background: linear-gradient(90deg, var(--color-gold), #ffd700, var(--color-gold));
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
.btn-gold:hover { box-shadow: 0 10px 40px rgba(212, 175, 55, 0.6); }

footer { padding: 4rem 1.5rem; text-align: center; border-top: 1px solid var(--color-border); font-family: 'Roboto Mono'; }