/* =========================
   VARIABLES GLOBALES
========================= */

:root {
  /* Colores principales */
  --color-primary: #352B46;
  --color-success: #6D4691;
  --color-warning: #40A8CD;
  --color-dark:   #161621;
  --color-light: #F7F7F7;

  /* Colores auxiliares */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Tipografía */
  --font-primary: 'Segoe UI', sans-serif;

  /* Layout */
  --max-width: 1400px;
  --border-radius: 12px;

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}


/* =========================
   RESET GLOBAL
========================= */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-primary);
  overflow-x: hidden;
  line-height: 1.5;
  padding-top: 90px;
}


/* =========================
   ELEMENTOS BASE
========================= */

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

button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  outline: none;
}

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

ul,
ol {
  list-style: none;
}


/* =========================
   CONTENEDOR GLOBAL
========================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

html {
    scroll-behavior: smooth;
}