/* métrica.ai — V9.0 | Full Production Layout */
:root {
  --bg: #000000;
  --lime: #C8F000;
  --white: #FFFFFF;
  --gray: #333333;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, sans-serif; background-color: var(--bg); color: var(--white); line-height: 1.4; }

/* Navegación */
.header-nav { display: flex; justify-content: space-between; align-items: center; padding: 25px 5%; background: #000; }
.logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -1px; }
.nav-link { color: var(--white); text-decoration: none; font-size: 0.9rem; font-weight: 600; }

/* Imagen de Header */
.hero-img { width: 100%; height: 350px; object-fit: cover; display: block; }

/* Banda de color */
.color-bar { background: var(--lime); color: #000; padding: 15px 5%; display: flex; justify-content: space-between; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }

/* Contenido */
.content-area { padding: 60px 5%; text-align: center; max-width: 800px; margin: 0 auto; }
.content-area p { color: #aaaaaa; margin-bottom: 15px; font-size: 1.1rem; }
h1 { font-size: 2.8rem; margin-bottom: 25px; line-height: 1.1; letter-spacing: -1.5px; font-weight: 800; }

/* Tags */
.tags-row { display: flex; justify-content: center; gap: 12px; margin: 30px 0; }
.tag { border: 1px solid var(--gray); padding: 8px 14px; font-size: 0.75rem; border-radius: 4px; color: #777; text-transform: uppercase; }

/* Botón ancho */
.btn-wide { 
  display: block; width: 100%; background: var(--white); color: #000; 
  padding: 20px; font-weight: 800; text-align: center; 
  text-decoration: none; border-radius: 4px; margin-top: 30px;
  font-size: 1.1rem; cursor: pointer; transition: opacity 0.3s;
}
.btn-wide:hover { opacity: 0.9; }