/* ============================================================
   GLOBAL.CSS – Estilos base del sitio Liam Select (Optimizado)
   Paleta oficial: negro (#000000), dorado (#BF9B30), blanco (#FFFFFF)
============================================================ */

/* ------------------------------------------------------------
   1) Variables globales – Paleta corporativa
------------------------------------------------------------ */
:root {
  --negro: #000000;
  --blanco: #ffffff;
  --dorado: #bf9b30;
  --dorado-oscuro: #a88326;

  /* Neutros suaves */
  --gris-suave: #f2f2f2;
  --gris-texto: #bdbdbd;

  /* Sombras */
  --shadow-soft: 0px 6px 22px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------
   2) Reset global
------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Inter', sans-serif;
  background-color: var(--blanco);
  color: var(--negro);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

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

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

/* ------------------------------------------------------------
   3) Jerarquía tipográfica
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--negro);
}

p {
  color: var(--gris-texto);
  font-size: 0.98rem;
}

/* ------------------------------------------------------------
   4) Botones globales
------------------------------------------------------------ */

/* BOTÓN PRINCIPAL (CTA) */
.btn-primary-premium {
  background-color: var(--dorado);
  color: var(--negro);
  padding: 0.7rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  transition: 0.25s;
}
.btn-primary-premium:hover {
  background-color: var(--dorado-oscuro);
}

/* BOTÓN OUTLINE */
.btn-outline-premium {
  border: 2px solid var(--dorado);
  color: var(--dorado);
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.25s;
}

.btn-outline-premium:hover {
  background-color: var(--dorado);
  color: var(--negro);
}

/* Botón negro */
.btn-negro {
  background: var(--negro);
  color: var(--blanco);
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--blanco);
  transition: 0.25s;
}
.btn-negro:hover {
  background: #111111;
}

/* ------------------------------------------------------------
   5) Utilidades rápidas
------------------------------------------------------------ */
.text-dorado {
  color: var(--dorado) !important;
}

.text-negro {
  color: var(--negro) !important;
}

.text-blanco {
  color: var(--blanco) !important;
}

.bg-dorado {
  background: var(--dorado) !important;
  color: var(--negro) !important;
}

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

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

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------
   6) Inputs globales
------------------------------------------------------------ */
input, select, textarea {
  border-radius: 6px;
  border: 1px solid #cccccc;
  padding: 0.55rem 0.75rem;
  background: var(--blanco);
  color: var(--negro);
  font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--dorado);
  outline: none;
  box-shadow: 0 0 0 2px rgba(191, 155, 48, 0.25);
}

/* ------------------------------------------------------------
   7) Contenedores y espaciados generales
------------------------------------------------------------ */
.container-premium {
  width: 90%;
  max-width: 1400px;
  margin: auto;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  color: var(--blanco);
}