/* ============================================
   TEMA GLOBAL - BLANCO MINIMALISTA EMPRESARIAL
   Grupo Canteras Peninsulares
   ============================================ */

/* Variables de Color */
:root {
  /* Colores principales */
  --color-fondo-principal: #FFFFFF;
  --color-fondo-secundario: #F8F9FA;
  --color-fondo-terciario: #F3F4F6;
  
  /* Colores de texto */
  --color-texto-principal: #1F2937;
  --color-texto-secundario: #6B7280;
  --color-texto-claro: #9CA3AF;
  
  /* Colores de acento */
  --color-acento-primario: #FF6B35;
  --color-acento-secundario: #2563EB;
  --color-acento-hover: #E85A2A;
  
  /* Bordes y líneas */
  --color-borde: #E5E7EB;
  --color-borde-hover: #D1D5DB;
  
  /* Sombras */
  --sombra-suave: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --sombra-media: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --sombra-grande: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Espaciado */
  --espaciado-xs: 0.25rem;
  --espaciado-sm: 0.5rem;
  --espaciado-md: 1rem;
  --espaciado-lg: 1.5rem;
  --espaciado-xl: 2rem;
  --espaciado-2xl: 3rem;
  
  /* Tipografía */
  --fuente-principal: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fuente-titulos: 'Fjalla One', 'Raleway', sans-serif;
}

/* Reset y Base */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-fondo-principal);
  color: var(--color-texto-principal);
  font-family: var(--fuente-principal);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía Global */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  color: var(--color-texto-principal);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  color: var(--color-texto-secundario);
  line-height: 1.7;
  margin-bottom: var(--espaciado-md);
}

/* Enlaces */
a {
  color: var(--color-acento-primario);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-acento-hover);
}

/* Botones Base */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-acento-primario);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-acento-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--sombra-media);
}

.btn-secondary {
  background-color: var(--color-fondo-secundario);
  color: var(--color-texto-principal);
  border: 1px solid var(--color-borde);
}

.btn-secondary:hover {
  background-color: var(--color-fondo-terciario);
  border-color: var(--color-borde-hover);
}

/* Tarjetas */
.card {
  background-color: var(--color-fondo-principal);
  border: 1px solid var(--color-borde);
  border-radius: 0.5rem;
  padding: var(--espaciado-lg);
  box-shadow: var(--sombra-suave);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--sombra-media);
}

/* Secciones */
section {
  padding: var(--espaciado-2xl) var(--espaciado-md);
}

.section-light {
  background-color: var(--color-fondo-principal);
}

.section-gray {
  background-color: var(--color-fondo-secundario);
}

/* Contenedor */
.contenedor {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--espaciado-md);
}

/* Utilidades de Espaciado */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--espaciado-xs); }
.mt-2 { margin-top: var(--espaciado-sm); }
.mt-3 { margin-top: var(--espaciado-md); }
.mt-4 { margin-top: var(--espaciado-lg); }
.mt-5 { margin-top: var(--espaciado-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--espaciado-xs); }
.mb-2 { margin-bottom: var(--espaciado-sm); }
.mb-3 { margin-bottom: var(--espaciado-md); }
.mb-4 { margin-bottom: var(--espaciado-lg); }
.mb-5 { margin-bottom: var(--espaciado-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--espaciado-xs); }
.pt-2 { padding-top: var(--espaciado-sm); }
.pt-3 { padding-top: var(--espaciado-md); }
.pt-4 { padding-top: var(--espaciado-lg); }
.pt-5 { padding-top: var(--espaciado-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--espaciado-xs); }
.pb-2 { padding-bottom: var(--espaciado-sm); }
.pb-3 { padding-bottom: var(--espaciado-md); }
.pb-4 { padding-bottom: var(--espaciado-lg); }
.pb-5 { padding-bottom: var(--espaciado-xl); }

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

.text-primary { color: var(--color-texto-principal); }
.text-secondary { color: var(--color-texto-secundario); }
.text-accent { color: var(--color-acento-primario); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

/* Bordes y Líneas */
.border { border: 1px solid var(--color-borde); }
.border-top { border-top: 1px solid var(--color-borde); }
.border-bottom { border-bottom: 1px solid var(--color-borde); }
.border-left { border-left: 1px solid var(--color-borde); }
.border-right { border-right: 1px solid var(--color-borde); }

.rounded { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Sombras */
.shadow-sm { box-shadow: var(--sombra-suave); }
.shadow { box-shadow: var(--sombra-media); }
.shadow-lg { box-shadow: var(--sombra-grande); }

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  
  section {
    padding: var(--espaciado-xl) var(--espaciado-sm);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
  }
}