/* -----------------------------------------------------
   RESET + BASE GLOBAL
----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main, 'Inter', sans-serif);
  color: var(--color-text, #1a1a1a);
  background: var(--color-bg, #ffffff);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Remove tap highlight */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* -----------------------------------------------------
   TYPOGRAPHY
----------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.75em;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1.2em;
}

/* Lists */
ul, ol {
  margin: 0 0 1.2em 1.4em;
}

li {
  padding-left: 0.25em;
}

/* -----------------------------------------------------
   LINKS
----------------------------------------------------- */
a {
  color: var(--color-accent, #000);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--color-accent-hover, #333);
}

/* -----------------------------------------------------
   IMAGES
----------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -----------------------------------------------------
   FORMS
----------------------------------------------------- */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 1rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.65em 0.8em;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius, 0px);
  background: #fff;
  transition: border-color .2s ease, background .2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent, #000);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: 0.75em 1.25em;
  border: none;
  background: var(--color-accent, #000);
  color: #fff;
  cursor: pointer;
  border-radius: var(--radius, 0px);
  transition: background .2s ease, transform .1s ease;
}

button:hover,
input[type="submit"]:hover {
  background: var(--color-accent-hover, #333);
  transform: translateY(-1px);
}

/* -----------------------------------------------------
   TABLES
----------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
}

th, td {
  padding: 0.75em;
  border: 1px solid var(--color-border, #e5e5e5);
  text-align: left;
}

th {
  background: #f7f7f7;
  font-weight: 600;
}

/* -----------------------------------------------------
   BLOCKQUOTES
----------------------------------------------------- */
blockquote {
  border-left: 4px solid var(--color-accent, #000);
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: #fafafa;
  font-style: italic;
}

/* -----------------------------------------------------
   CODE
----------------------------------------------------- */
pre,
code {
  font-family: monospace;
  background: #f4f4f4;
  padding: 0.25em 0.5em;
  border-radius: 4px;
}

pre {
  overflow-x: auto;
  padding: 1em;
}

/* -----------------------------------------------------
   HR
----------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--color-border, #e5e5e5);
  margin: 2em 0;
}

/* -----------------------------------------------------
   BUTTONS (extra utilities)
----------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.75em 1.25em;
  border-radius: var(--radius, 0px);
  cursor: pointer;
  transition: background .2s ease;
}

.btn-primary {
  background: var(--color-accent, #000);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-hover, #333);
}

/* -----------------------------------------------------
   CONTAINERS
----------------------------------------------------- */
.container {
  width: min(100%, var(--container-width, 1400px));
  margin: 0 auto;
  padding: 0 1rem;
}

/* -----------------------------------------------------
   UTILIDADES
----------------------------------------------------- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }