/* ═══════════════════════
   BLINDA — MAIN.CSS
═══════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@300;400;500&display=swap');

:root {
  --bg:        #0c0e12;
  --bg-dark:   #080a0d;
  --surface:   #12161d;
  --surface2:  #181d27;
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.12);
  --accent:    #e8b84b;
  --accent2:   #f0c96a;
  --white:     #f0f2f5;
  --gray:      #8a94a0;
  --gray2:     #3a4250;
  --danger:    #e05252;
  --font:      'Barlow', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ── BOTONES ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-2px); }
.btn-primary.btn-block { width: 100%; justify-content: center; }
.btn-primary.btn-lg { font-size: 18px; padding: 18px 44px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ── SECCIONES ── */
.section { padding: 96px 80px; }
.dark-section { background: var(--bg-dark); }

.sec-header { text-align: center; margin-bottom: 56px; }
.sec-label {
  font-family: var(--font-cond);
  font-size: 13px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.sec-header h2 {
  font-family: var(--font-cond);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700; letter-spacing: 1px;
  line-height: 1.05; margin-bottom: 14px;
}
.sec-header p { font-size: 17px; color: var(--gray); font-weight: 300; max-width: 500px; margin: 0 auto; }

@media (max-width: 768px) {
  .section { padding: 64px 20px; }
}