/* Reset básico + variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  /* Brand */
  --red: #d81f26;
  --black: #0b0b0b;
  --white: #ffffff;

  /* UI */
  --bg: var(--white);
  --text: var(--black);
  --muted: rgba(11,11,11,0.68);
  --border: rgba(11,11,11,0.10);
  --soft: rgba(11,11,11,0.04);

  /* Layout */
  --max: 1200px;
  --nav-h: 72px;

  /* Fonts */
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: 'Playfair Display', Georgia, serif;

  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --tracking-sm: 0.08em;
  --tracking-md: 0.14em;
  --tracking-lg: 0.22em;

  --red-weak: rgba(216,31,38,0.10);
  --red-soft: rgba(216,31,38,0.18);
  --red-mid:  rgba(216,31,38,0.35);
  --ring: 0 0 0 4px rgba(216,31,38,0.15);
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}


a{
  color: inherit;
  text-decoration: none;
}

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

.container{
  width: min(var(--max), 92%);
  margin: 0 auto;
}

/* Texto global */
p{
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

strong{
  font-weight: 600;
}

/* ==========================
   TYPOGRAPHY SYSTEM
   ========================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.04em;
}

p{
  font-size: 15px;
  color: var(--muted);
}