/* ============================================================
   PERFIL DE LIBERTAD — Design System
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark:    #16161D;
  --bg-mid:     #1e1e28;
  --ink:        #f6f6f4;
  --ink-light:  rgba(246,246,244,0.65);
  --ink-faint:  rgba(246,246,244,0.38);
  --surface:    #1e1e28;
  --surface-warm: #16161D;
  --border:     rgba(224,199,135,0.18);
  --accent:     #2761F6;
  --accent-dark: #1d35b4;
  --accent-light: rgba(39,97,246,0.15);
  --gold:       #e0c787;
  --gold-dim:   rgba(224,199,135,0.45);
  --gold-light: rgba(224,199,135,0.08);
  --green: #059669; --green-light: rgba(5,150,105,0.12);
  --red: #dc2626;   --red-light: rgba(220,38,38,0.1);
  --purple: #8b5cf6; --purple-light: rgba(139,92,246,0.12);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Roboto', system-ui, sans-serif;
  --accent-font: 'Anaheim', system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  background: var(--bg-dark);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

#root { position: relative; z-index: 1; min-height: 100vh; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.a  { opacity: 0; animation: fadeUp 0.55s ease-out forwards; }
.d1 { animation-delay: .08s; }
.d2 { animation-delay: .16s; }
.d3 { animation-delay: .24s; }
.d4 { animation-delay: .32s; }
.d5 { animation-delay: .40s; }

/* ── Gate form inputs & selects ────────────────────────── */
.gate-label {
  display: block;
  font-family: var(--accent-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
}
.gate-select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e0c787' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color 0.2s;
  outline: none;
}
.gate-select:focus { border-color: var(--gold); }
.gate-select option { background: #1e1e28; color: #f6f6f4; }
.gate-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.gate-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-light);
}
.gate-input::placeholder { color: var(--ink-faint); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 540px) {
  .page { padding: 32px 16px !important; }
}