/* ============================= */
/* VARIABLES DE MARCA + RESET    */
/* ============================= */

html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

:root {
  --azul-principal: #0a1f44;
  --azul-hover:     #0f2c66;
  --celeste-acento: #00c2ff;
  --blanco:         #ffffff;
  --gris-texto:     #555;
}

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

body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a2a44;
}

/* Títulos con Poppins — look ecommerce moderno */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Botones, etiquetas, navegación — Inter semibold */
button, .btn-primary, .btn-secondary, .btn-carrito,
.hero-tag, .nav-busqueda-input, .burbuja-btn,
.hero-busqueda-btn, label {
  font-family: 'Inter', sans-serif;
}

/* Precio — Inter bold para contraste ecommerce */
.precio {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Util: texto Creativos — fuente tipo logo */
.creativos {
  font-family: 'Lobster', cursive;
  font-weight: 400;
  background: linear-gradient(
    90deg,
    #ff4d4d, #ff9f1a, #ffe600,
    #2ed573, #1e90ff, #3742fa, #ff4d4d
  );
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: creativosMove 6s linear infinite;
}

@keyframes creativosMove {
  0%   { background-position: 0% }
  100% { background-position: 300% }
}

/* Responsive base */
@media (max-width: 600px) {
  section {
    padding: 60px 5%;
  }
}