/* =============================
	 Variables globales Diaztecnologia
	 Basado en el Manual de Identidad de Marca
============================= */
:root {
	/* Colores principales */
	--color-negro: #000000;
	--color-blanco: #FFFFFF;
	--color-gris: #808080;

	/* Colores secundarios */
	--color-azul: #007BFF;
	--color-verde: #00FF88;
	--color-plateado: #C0C0C0;

	/* Tipografías */
	--font-principal: 'Gotham', Arial, sans-serif;
	--font-secundaria: 'Roboto', 'Open Sans', Arial, sans-serif;
	--font-acento: 'Source Code Pro', monospace;
}

/* =============================
	 Reset y clases globales
============================= */
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: var(--color-negro);
	color: var(--color-blanco);
	font-family: var(--font-secundaria);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-principal);
	color: var(--color-negro);
	margin-top: 0;
}

a {
	color: var(--color-azul);
	text-decoration: none;
	transition: color 0.2s;
}
a:hover, a:focus {
	color: var(--color-verde);
}

.btn {
	display: inline-block;
	padding: 0.5em 1.5em;
	border-radius: 4px;
	background: var(--color-azul);
	color: var(--color-blanco);
	font-family: var(--font-principal);
	font-weight: bold;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.btn:hover, .btn:focus {
	background: var(--color-verde);
	color: var(--color-negro);
}

.text-acento {
	color: var(--color-azul);
	font-family: var(--font-acento);
}

.bg-negro {
	background: var(--color-negro) !important;
	color: var(--color-blanco) !important;
}
.bg-blanco {
	background: var(--color-blanco) !important;
	color: var(--color-negro) !important;
}
.bg-azul {
	background: var(--color-azul) !important;
	color: var(--color-blanco) !important;
}
.bg-verde {
	background: var(--color-verde) !important;
	color: var(--color-negro) !important;
}
.bg-plateado {
	background: var(--color-plateado) !important;
	color: var(--color-negro) !important;
}

/* Utilidades */
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}

.mt-1 { margin-top: 0.5em; }
.mt-2 { margin-top: 1em; }
.mt-3 { margin-top: 2em; }
.mb-1 { margin-bottom: 0.5em; }
.mb-2 { margin-bottom: 1em; }
.mb-3 { margin-bottom: 2em; }