/* voltmach.com - portada del portal.
   Fondo oscuro a proposito: cada vertical tiene su propia paleta clara, y el
   portal hace de marco neutro para que las dos se reconozcan como de la misma
   casa sin competir entre si. El acento de cada tarjeta es el color de su web. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.15rem, 4vw, 2.5rem);
  background: #0a0b12;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(109, 59, 245, .30), transparent 60%),
    radial-gradient(50rem 36rem at 95% 8%, rgba(0, 224, 255, .16), transparent 60%),
    radial-gradient(46rem 34rem at 50% 120%, rgba(212, 255, 63, .10), transparent 60%);
  color: #f2f3f8;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}
main { width: 100%; max-width: 1120px; }

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.marca {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  /* .16em separaba tanto que, con el cambio de color entre la T y la M,
     se leia «VOLT MACH». Con .05em lee como una sola palabra. */
  letter-spacing: .05em; margin: 0;
}
.marca { display: inline-flex; align-items: center; gap: .62rem; }
.marca span { color: #00e0ff; }
/* El simbolo acompana al nombre; a 1.9em queda a la altura de las mayusculas. */
.simbolo { width: 1.9em; height: 1.9em; color: #00e0ff; flex-shrink: 0; }

/* El cambio de idioma: la bandera siempre visible, el nombre solo cuando cabe.
   En movil la bandera sola es suficiente y no le roba sitio a la marca. */
.idioma {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .78rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  color: #c3c8dc; text-decoration: none; font-size: .87rem; font-weight: 500;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.idioma:hover, .idioma:focus-visible {
  border-color: #00e0ff; color: #f2f3f8; background: rgba(0, 224, 255, .08);
}
.idioma:focus-visible { outline: 2px solid #00e0ff; outline-offset: 2px; }
.bandera { font-size: 1.15rem; line-height: 1; }
@media (max-width: 26rem) { .idi-nom { display: none; } }

.top { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.top .barra { text-align: left; }
.top h1 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 5.6vw, 3.1rem);
  line-height: 1.12; margin: 0 0 1rem; letter-spacing: -.02em;
}
.lead {
  max-width: 60ch; margin: 0 auto; color: #a9aec4;
  font-size: clamp(.97rem, 1.9vw, 1.06rem);
}

.grid {
  display: grid; gap: clamp(1rem, 2.4vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  --acc: #00e0ff;
  position: relative; display: flex; flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  color: inherit; text-decoration: none;
  transition: border-color .22s ease, transform .22s ease, background .22s ease;
}
a.card:hover, a.card:focus-visible {
  border-color: var(--acc);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-3px);
}
a.card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.card.is-soon { opacity: .62; }

.ico { display: block; color: var(--acc); margin-bottom: 1.1rem; }
.ico svg { width: 3.4rem; height: auto; display: block; }

.card h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem; letter-spacing: -.01em;
}
.sub { margin: 0 0 1.1rem; color: #c3c8dc; font-size: 1rem; }

.meta { margin: 0 0 .7rem; font-size: .89rem; color: #8f95ae; }
.meta .n {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700; font-size: 1.25rem; color: var(--acc);
}
.soon-lab { font-size: .89rem; }
.banderas { margin: 0 0 1.3rem; font-size: 1.05rem; letter-spacing: .12em; }

.ir {
  margin-top: auto; font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: .95rem; color: var(--acc);
}

.pie {
  margin-top: clamp(2.4rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .82rem; color: #7b8199; max-width: 78ch;
}
.pie p { margin: 0 0 .7rem; }
.pie strong { color: #a9aec4; }
.marcas { color: #5f657d; }

@media (prefers-reduced-motion: reduce) {
  a.card { transition: none; }
  a.card:hover { transform: none; }
}