/* ===========================
   BASE DE PAGINAS INTERNAS
   Tema y reset compartidos por about, star-trek-infinite,
   project-shelter y el template. Se carga DESPUES de variables.css
   porque ajusta los tokens de color y ensancha el contenedor a 1600px.
   =========================== */

:root {
    --bg-panel: rgba(26, 29, 36, 0.6);
    --accent: #00d4ff;
    --accent-glow: rgba(0, 212, 255, 0.15);
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #2c313a;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Orbitron', sans-serif; color: #fff; letter-spacing: 1px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
ul { list-style: none; }

main { margin-top: 80px; padding-bottom: 12rem; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 2rem; }

.reveal-left, .reveal-right, .reveal-up {
    opacity: 0; transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-up { transform: translateY(40px); }
.active { opacity: 1; transform: translate(0); }