/* ====================================================================
   BASE.CSS — THINKCHIP
   Reset, estilos base de HTML/body y tipografía global.
==================================================================== */

/* ====================================================================
   2.0 - ESTILOS BASE Y RESETEO
==================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background-color: var(--gris-900); 
}
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--gris-300);
  line-height: 1.68;
  overflow-x: hidden;
  background: radial-gradient(circle at top, #1b2a42 0%, #0d141f 52%, #0b1019 100%);
  min-height: 100vh;
}
figure {
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; 
  color: #EDF5FF;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  text-align: center;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-top: 1.5rem; letter-spacing: 0.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 2.5rem; }
h3 { font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
h4 { font-size: clamp(1rem, 2vw, 1.3rem); }

/* ====================================================================
   3.0 - CLASES DE MAQUETACIÓN (Layout)
==================================================================== */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
}
.grid-destacado, .grid-marcas { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 2rem; 
}
.recomendaciones-grid-estatica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}
.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}