/* ===================================================================
   PORTADA — Rótulo Técnico

   Todo cuelga de .vg-home para no pisar los estilos del tema de la
   tienda.

   El motivo visual es la placa bicapa: fondo del color de la superficie,
   texto en el color que aparece al grabar y, en el borde de abajo, el
   canto donde se ve la segunda capa. Se usa tres veces y nada más
   (portada, etiquetas del muestrario y números de los pasos).
   =================================================================== */
.vg-home {
  /* Papel: un gris frío de taller (ni blanco puro ni crema). */
  --paper: #eceef0;
  --paper-hi: #ffffff;
  --rule: #d3d8dc;
  --ink: #1a1d20;
  --ink-dim: #5d666d;
  /* Naranja de acción: el mismo del diseñador, para que el botón de
     aquí y el de dentro se reconozcan como lo mismo. */
  --action: #ff7a1a;

  /* Placa por defecto: negra con el interior blanco (la más clásica). */
  --ps: #1a1d20;   /* superficie */
  --pc: #eef1f3;   /* interior que aparece al grabar */
  --eng-sh: rgba(0, 0, 0, 0.55);

  /* Dos familias bien distintas: una estrecha de rótulo industrial
     para lo grabado, y la del sistema para leer. Ninguna se descarga
     de fuera, como el resto del módulo. */
  --cond: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  /* El tema de la tienda mete su contenido en una columna estrecha y
     centrada. Estos márgenes negativos sacan la sección de esa columna
     para que ocupe TODO el ancho de la ventana, como ocupaba antes el
     diseñador. (El overflow-x de abajo evita la barra horizontal que
     asomaría por el ancho de la barra de desplazamiento.) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 44px 32px 48px;
  box-sizing: border-box;
}
/* Evita la barra horizontal que asomaría al sacar la sección de la
   columna del tema. Solo afecta a la portada, porque esta hoja de
   estilos únicamente se carga ahí. */
html { overflow-x: hidden; }
.vg-home *,
.vg-home *::before,
.vg-home *::after { box-sizing: border-box; }
.vg-home a { color: var(--ink); }
.vg-home :focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }

/* ---------- La placa ---------- */
.vg-home .vg-plate {
  position: relative;
  background: var(--ps);
  color: var(--pc);
  border-radius: 4px;
  /* 3px de canto en el color del interior + la sombra de apoyo. */
  box-shadow: 0 3px 0 0 var(--pc), 0 16px 26px -10px rgba(16, 20, 24, 0.5);
}
/* Combinaciones reales del material. */
.vg-home .vg-wb {
  --ps: #eef1f3; --pc: #1a1d20; --eng-sh: rgba(255, 255, 255, 0.65);
  /* Sobre papel claro, una placa blanca se confundiría con el fondo. */
  border: 1px solid #c9ced3;
}
.vg-home .vg-yk { --ps: #f2c200; --pc: #17191b; --eng-sh: rgba(255, 255, 255, 0.5); }
.vg-home .vg-rw { --ps: #c0291f; --pc: #f4f1f1; --eng-sh: rgba(0, 0, 0, 0.45); }

/* Lo grabado: estrecho, en mayúsculas y con una sombra de 1px que
   simula el hueco del grabado. Las mayúsculas aquí no son un adorno:
   es como se rotula de verdad una placa de cuadro o de puerta. */
.vg-home .vg-eng {
  font-family: var(--cond);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 var(--eng-sh);
}

/* Taladros: el papel se ve a través del agujero. */
.vg-home .vg-holes-2::before,
.vg-home .vg-holes-2::after,
.vg-home .vg-holes-4::before,
.vg-home .vg-holes-4::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.55);
}
.vg-home .vg-holes-2::before { left: 9px; top: 50%; transform: translateY(-50%); }
.vg-home .vg-holes-2::after { right: 9px; top: 50%; transform: translateY(-50%); }
.vg-home .vg-holes-4::before { left: 14px; top: 14px; }
.vg-home .vg-holes-4::after { right: 14px; top: 14px; }

/* ---------- Portada ---------- */
.vg-home .vg-hero {
  border-radius: 6px;
  padding: 32px 30px 30px;
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  /* Texto a la izquierda y captura a la derecha. */
  .vg-home .vg-hero {
    display: grid;
    grid-template-columns: minmax(290px, 0.85fr) 1.55fr;
    gap: 40px;
    align-items: center;
    padding: 38px 38px 38px;
  }
  .vg-home .vg-hero-sub { margin-bottom: 0; }
}
.vg-home .vg-hero-h {
  margin: 0 0 14px;
  letter-spacing: 0.03em;
  /* Escala 1,25: 17 → 21 → 27 → 34 → 42 */
  font-size: clamp(27px, 3.1vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pc);
}
.vg-home .vg-hero-sub {
  margin: 0 0 26px;
  max-width: 54ch;
  color: #b9c1c6;
  font-size: 17px;
}

/* La captura: el enlace grande. */
.vg-home .vg-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(238, 241, 243, 0.25);
  border-radius: 3px;
  background: #0f1113;
  text-decoration: none;
}
.vg-home .vg-shot img { display: block; width: 100%; height: auto; }
.vg-home .vg-shot:hover { border-color: var(--action); }
.vg-home .vg-shot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: #7d868c;
  font-size: 15px;
  background: repeating-linear-gradient(45deg, #15181a, #15181a 12px, #1b1f22 12px, #1b1f22 24px);
}
/* La llamada va DENTRO del enlace, en una banda pegada debajo de la
   captura: así la imagen y el botón son una sola pieza que se pulsa,
   sin tapar la captura ni repetir dos veces la misma frase. */
.vg-home .vg-shot-go {
  display: block;
  padding: 14px 18px;
  background: var(--action);
  color: #1a1200;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}
.vg-home .vg-shot:hover .vg-shot-go { background: #ff8c38; }

/* Botón de acción. */
.vg-home .vg-go {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 4px;
  background: var(--action);
  color: #1a1200;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
}
.vg-home .vg-go:hover { background: #ff8c38; color: #1a1200; text-decoration: none; }

/* ---------- Muestrario ---------- */
.vg-home .vg-h3 {
  max-width: 1320px;
  margin: 46px auto 22px;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
.vg-home .vg-samples {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 40px;
}
@media (min-width: 700px) {
  .vg-home .vg-samples { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  /* Tres y tres: dos filas iguales. Con "auto-fit" salían cuatro en la
     primera fila y dos en la segunda. */
  .vg-home .vg-samples { grid-template-columns: repeat(3, 1fr); }
}
.vg-home .vg-samples > li { margin: 0; }
.vg-home .vg-samples p {
  margin: 16px 0 0;
  max-width: 44ch;
  color: var(--ink-dim);
  font-size: 16px;
}
/* La etiqueta se ajusta a su texto, como una placa de verdad: así el
   muestrario sale con placas de distintos anchos y no con seis
   recuadros iguales. */
.vg-home .vg-tag {
  display: inline-block;
  padding: 9px 18px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}
.vg-home .vg-tag.vg-holes-2 { padding-left: 26px; padding-right: 26px; }

/* ---------- Pasos ---------- */
.vg-home .vg-steps {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 28px;
}
@media (min-width: 700px) {
  .vg-home .vg-steps { grid-template-columns: repeat(3, 1fr); }
}
.vg-home .vg-steps > li {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 16px;
}
.vg-home .vg-n {
  display: inline-block;
  min-width: 26px;
  margin-right: 6px;
  color: var(--ink-dim);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}

/* ---------- El segundo producto ---------- */
.vg-home .vg-otro {
  display: block;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-hi);
  text-decoration: none;
}
.vg-home .vg-otro:hover { border-color: var(--action); }
.vg-home .vg-otro p { margin: 14px 0 0; max-width: 60ch; color: var(--ink-dim); font-size: 16px; }
.vg-home .vg-otro-go { display: inline-block; margin-top: 12px; color: var(--ink); font-weight: 700; }

/* ---------- Pie ---------- */
.vg-home .vg-foot {
  max-width: 1320px;
  margin: 44px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.vg-home .vg-foot p { margin: 16px 0 0; color: var(--ink-dim); font-size: 16px; }
.vg-home .vg-foot a:not(.vg-go) { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 560px) {
  .vg-home { padding: 24px 14px 28px; font-size: 16px; }
  .vg-home .vg-hero { padding: 26px 18px 22px; }
  .vg-home .vg-holes-4::before,
  .vg-home .vg-holes-4::after { display: none; }
  .vg-home .vg-shot-go { font-size: 16px; padding: 13px 14px; }
  .vg-home .vg-go { width: 100%; text-align: center; }
  .vg-home .vg-h3 { font-size: 21px; margin-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-home .vg-shot, .vg-home .vg-go { transition: none; }
}