@layer components {
  /* ===== Capturas de producto (lo visual explica; el texto es mínimo) =====
     Lo usan /aplicaciones/ y /radar/. Cada captura es real, con datos de ejemplo. */
  .shots { display: grid; gap: var(--space-6); }
  .shots--hero { margin-top: var(--space-7); }
  .shots--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
  .shot { margin: 0; display: grid; gap: var(--space-3); }
  .shot img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
  }
  .shot figcaption {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--text);
  }
  .shot-link { display: block; text-decoration: none; color: inherit; }
  .shot-link:hover .shot img { box-shadow: var(--shadow-lg), 0 0 0 3px var(--focus); }

  /* Teléfonos: varias pantallas en fila, cada una con su etiqueta. */
  .shots--phones {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    align-items: start;
    gap: var(--space-5);
  }
  .shots--phones .shot img { border-radius: 1.75rem; border-width: 2px; }
  .shots--phones .shot figcaption { font-size: var(--step-0); }
  .shots--phones-1 { max-width: 15rem; margin-inline: auto; }
  .shots--phones-3 { max-width: 40rem; margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .shots-head { text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
  .shots-head h1, .shots-head h2 { max-width: 22ch; }
  .shots-head--sub { margin-top: var(--space-8); }
  .shots-band { background: var(--surface); }
  .shots-band--alt { background: var(--bg); }
}

@layer components {
  /* ===== Home: hero centrado, una sola accion y producto real debajo ===== */
  .hero--centro { padding-bottom: 0; }
  .hero__centro { display: grid; justify-items: center; text-align: center; gap: var(--space-4); }
  .hero__centro h1 { font-size: clamp(2.4rem, 6.5vw, 4.5rem); line-height: 1.04; max-width: 18ch; margin-block: .1em; }
  .hero__centro h1::after { margin-inline: auto; }
  .hero__centro .hero__lead { max-width: 40ch; margin-inline: auto; }
  .hero__centro .hero__cta { justify-content: center; align-items: center; margin-top: var(--space-3); }
  .hero__imagen { margin-top: var(--space-7); max-width: 68rem; }
  .hero__imagen img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--border); border-bottom: 0;
    box-shadow: var(--shadow-lg);
  }
  .hero--centro .hero__stats { margin-block: var(--space-6); justify-content: center; }
  .enlace-flecha { font-weight: 600; color: var(--link); text-decoration: none; }
  .enlace-flecha::after { content: " \2192"; }
  .enlace-flecha:hover { text-decoration: underline; }
}

@layer components {
  /* ===== OmniLogik: hero centrado con producto real ===== */
  .ol-hero--centro { padding-bottom: 0; }
  .ol-hero--centro .ol-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ol-hero--centro h1 { font-size: clamp(2.4rem, 6.5vw, 4.5rem); line-height: 1.04; max-width: 18ch; margin-inline: auto; }
  .ol-hero--centro .ol-hero__lead { margin-inline: auto; max-width: 40ch; }
  .ol-hero--centro .hero__cta { justify-content: center; }
}