/* ALL IN · brand.css — tokens y componentes base compartidos por galería, login y decks.
   Fuente de verdad de marca: BRANDKIT.md ("Edición Papel": 70% papel + 20% tinta + 7% rojo + 3% acento). */

:root {
  --paper: #F4EFE3;
  --paper-soft: #FBF8EF;
  --ink: #1A1916;
  --muted: #716B5F;
  --red: #C0392B;
  --green: #3B5A49;
  --navy: #16293F;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  /* Sombras "sello de goma": offset sólido, jamás blur */
  --shadow-card: 4px 5px 0 var(--ink);
  --shadow-card-red: 4px 5px 0 var(--red);
  --shadow-stamp: 2px 2px 0 var(--ink);
  --shadow-stamp-sm: 2px 3px 0 var(--ink);

  --ai-gradient: linear-gradient(110deg, #FFB42B 0%, #FF6A3D 24%, #FF226E 48%, #C65CFF 72%, #22C8F6 100%);

  --max: 1120px;
  --edge: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1;
  margin: 0 0 0.5em;
}
h1 { font-weight: 900; }
h2, h3 { font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.rule { border: 0; border-top: 1.5px solid var(--ink); margin: 0; }
.rule-dashed { border: 0; border-top: 1.5px dashed rgba(26, 25, 22, 0.4); margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.9em;
}

.lead { color: var(--muted); max-width: 62ch; font-size: 18px; }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.card {
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 2px 8px;
}
.pill-red { border-color: var(--red); color: var(--red); }
.pill-green { border-color: var(--green); color: var(--green); }

.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 3px;
  padding: 4px 12px;
  transform: rotate(-2.5deg);
}

.btn {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 9px 18px;
  background: var(--paper-soft);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-stamp);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--red); border-color: var(--ink); color: var(--paper-soft); }

/* Lockup reconstruido con texto (los PNG del logo viven en el repo del sitio web) */
.lockup {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
}
.lockup-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.01em;
}
.lockup-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Solo para menciones de IA, como microseñal (~3%) */
.text-ai {
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grano de papel sutil, activable pieza por pieza */
.paper-grain { position: relative; }
.paper-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}