*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-bg);
  font-size:var(--text-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
@media (max-width:768px){
  .container{ padding-inline:var(--space-3); }
}

h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.15; }
p{ margin:0; }

.section{ padding-block:var(--space-8); scroll-margin-top:80px; }
@media (max-width:768px){
  .section{ padding-block:var(--space-6); }
}

.section-header{
  max-width:640px;
  margin-bottom:var(--space-6);
}
.section-header h2{
  font-size:var(--text-h1);
  font-weight:700;
}
.section-header p{
  margin-top:var(--space-3);
  font-size:var(--text-body-lg);
  color:var(--color-ink-muted);
}

/* Botones — DESIGN_SYSTEM.md §6 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:12px 28px;
  border-radius:var(--radius-md);
  font-size:var(--text-body);
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  min-height:44px;
}
.btn-primary{
  background:var(--color-accent);
  color:var(--color-on-dark);
}
.btn-primary:hover{ background:var(--color-accent-hover); transform:translateY(-1px); }
.btn-primary:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

.btn-outline{
  background:transparent;
  border-color:var(--color-ink);
  color:var(--color-ink);
}
.btn-outline:hover{ background:rgba(15,17,33,0.06); }
.btn-outline.on-dark{ border-color:var(--color-on-dark); color:var(--color-on-dark); }
.btn-outline.on-dark:hover{ background:rgba(238,236,234,0.1); }

.btn-link{
  background:none;
  padding:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  min-height:auto;
}
.btn-link:hover{ border-color:var(--color-accent); }

/* Cards */
.card{
  background:var(--color-bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition-duration:1ms; transform:none; }
  html{ scroll-behavior:auto; }
}

/* Focus visible global */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}