/* ══════════════════════════════════════════════
   BASE — Reset, cuerpo, layout, animaciones,
          scroll reveal y responsive base.
══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: var(--transition-theme);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1),
              transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }
.reveal-d4 { transition-delay: 240ms; }

/* ── Contenedor principal ── */
.page {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  padding: clamp(2rem,5vw,4.5rem) clamp(1.5rem,5vw,4rem);
  display: flex; flex-direction: column;
  min-height: 100vh; gap: 3rem;
}

/* ── Keyframes globales ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;} }
@keyframes fadeIn   { from{opacity:0;}to{opacity:1;} }
@keyframes pdot     { 0%,100%{opacity:1;}50%{opacity:0.25;} }
@keyframes blink    { 0%,100%{opacity:1;}50%{opacity:0;} }
@keyframes bounce   { 0%,80%,100%{transform:translateY(0);opacity:.25;} 40%{transform:translateY(-7px);opacity:1;} }
@keyframes btn-pulse {
  0%,100% { box-shadow:0 0 0 rgba(59,130,246,0); border-color:rgba(59,130,246,0.22); }
  50%      { box-shadow:0 0 12px rgba(59,130,246,0.3); border-color:rgba(59,130,246,0.5); }
}

/* ── Accesibilidad: movimiento reducido ── */
@media(prefers-reduced-motion: reduce) {
  .reveal, .left-col, .right-col, header, footer {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
  .dot, .status-dot, .pb-badge, .projects-btn { animation: none !important; }
}