:root {
  --rojo-accorp: #d00000;
  --gris-900: #1a1a1a;
  --gris-700: #3a3a3a;
  --gris-400: #9a9a9a;
  --blanco: #ffffff;
  --container: 1200px;
}
* { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--gris-900); background: var(--blanco);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
/* Header */
.site-header { background: var(--rojo-accorp); color: var(--blanco); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.logo img { height: 42px; }
.main-nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.main-nav a { color: var(--blanco); text-decoration: none; font-weight: 700; }
.main-nav a:hover { text-decoration: underline; }

/* Hero */
.hero {
  background: url('assets/img/hero-tech.jpg') center/cover no-repeat, var(--gris-900);
  color: var(--blanco);
}
.hero-inner { padding: 6rem 1rem; text-align: center; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.hero p { margin: 0 0 1.25rem; color: #f2f2f2; }

.btn {
  display: inline-block; padding: .8rem 1.4rem; border-radius: .6rem;
  background: var(--rojo-accorp); color: var(--blanco); text-decoration: none; font-weight: 800;
}

/* Sections */
.section { padding: 2.5rem 0; }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 880px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid #eee; border-radius: .8rem; padding: 1.25rem; background: #fff;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.badge { display: inline-block; background: #fff; border: 1px solid #eee; padding: .25rem .5rem; border-radius: .4rem; color: var(--gris-700); }

/* Footer */
.site-footer { background: var(--rojo-accorp); color: var(--blanco); text-align: center; padding: 1.25rem 0; margin-top: 2rem; }

/* Forms */
form .row { margin-bottom: .75rem; }
label { font-weight: 700; display: block; margin-bottom: .35rem; }
input, textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid #ddd; border-radius: .5rem; font: inherit;
}
textarea { min-height: 120px; resize: vertical; }