/* ═════════════════════════════════════════════
   EL BRUSH · MEMPHIS GALLEGO · DISEÑO COMPARTIDO
   Variables, tipografía, dark mode, layout base
   ═════════════════════════════════════════════ */

/* ═══ VARIABLES ═══ */
:root {
  --paper: #faf6ed;
  --paper2: #f3ecdb;
  --paper3: #ede3cc;
  --ink: #2c1810;
  --ink2: #4a3728;
  --ink3: #6b5a4e;
  --ink4: #9c8b7a;
  --cream: #fdf8ef;
  --card-bg: #fdf8ef;
  --card-border: rgba(139,109,71,0.15);
  --terracotta: #c67b4b;
  --terracotta-light: #f0d5c1;
  --terracotta-text: #a0522d;
  --olive: #5c7a4a;
  --olive-light: #e0ebd5;
  --blue: #3a6b8c;
  --blue-light: #d4e5f0;
  --gold: #b8861e;
  --gold-light: #faf0d7;
  --red: #c0392b;
  --red-light: #f5e5e0;
  --purple: #6b3a8c;
  --purple-light: #e8d5f0;
  --shadow-sm: 0 1px 3px rgba(44,24,16,0.06);
  --shadow-md: 0 4px 16px rgba(44,24,16,0.08);
  --shadow-lg: 0 8px 30px rgba(44,24,16,0.12);
  --toggle-bg: #ede3cc;
  --toggle-icon: '🌙';
  --bg-dots: rgba(139,109,71,0.04);
  --border-thick: 2px solid rgba(44,24,16,0.12);
  --divider-line: rgba(139,109,71,0.2);
  --tab-active-bg: var(--terracotta);
  --tab-active-color: #fff;
}

.dark {
  --paper: #1a1512;
  --paper2: #221c18;
  --paper3: #2d2620;
  --ink: #e8d5c4;
  --ink2: #c4b09a;
  --ink3: #9c8b7a;
  --ink4: #6b5e52;
  --cream: #1f1a15;
  --card-bg: #1f1a15;
  --card-border: rgba(200,180,160,0.12);
  --terracotta: #d4956b;
  --terracotta-light: #3d2820;
  --terracotta-text: #d4956b;
  --olive: #7a9e5a;
  --olive-light: #262f20;
  --blue: #7ab8d4;
  --blue-light: #1e2d3a;
  --gold: #c8963e;
  --gold-light: #2d2418;
  --red: #d4706a;
  --red-light: #3a2020;
  --purple: #9b6ab8;
  --purple-light: #2a1e32;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  --toggle-bg: #3d3028;
  --toggle-icon: '☀️';
  --bg-dots: rgba(200,180,160,0.025);
  --border-thick: 2px solid rgba(200,180,160,0.12);
  --tab-active-bg: var(--terracotta);
  --tab-active-color: #fff;
}

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

/* ═══ BODY ═══ */
body {
  font-family:'Crimson Text',Georgia,'Times New Roman',serif;
  background-color:var(--paper);
  background-image:radial-gradient(circle,var(--bg-dots) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);
  min-height:100vh;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  transition:background-color 0.4s,color 0.4s;
}
body::before {
  content:'';
  position:fixed;inset:0;
  background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 15%,var(--paper2) 100%);
  pointer-events:none;z-index:-1;
  transition:background 0.4s;
}

/* ═══ CONTAINER ═══ */
.container { max-width:1000px;margin:0 auto;padding:0 20px;position:relative;z-index:1; }

/* ═══ THEME TOGGLE ═══ */
.theme-toggle {
  position:fixed;top:20px;right:20px;
  width:40px;height:40px;
  border-radius:50%;
  border:1.5px solid var(--card-border);
  background:var(--toggle-bg);
  cursor:pointer;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;z-index:100;
  box-shadow:var(--shadow-sm);
}
.theme-toggle:hover { transform:scale(1.1);box-shadow:var(--shadow-md); }
.theme-toggle::after { content:var(--toggle-icon); }

/* ═══ ANIMACIONES ═══ */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ═══ FOOTER ═══ */
.footer {
  text-align:center;
  padding:28px 20px;
  border-top:var(--border-thick);
  color:var(--ink4);
  font-size:14px;
}
.footer .crafted {
  font-family:'Caveat',cursive;
  font-size:20px;
  color:var(--ink3);
  margin-top:6px;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:600px) {
  .container { padding:0 12px; }
  .theme-toggle { top:12px;right:12px;width:34px;height:34px;font-size:16px; }
}