/* discovery-pages (product-funnel/discovery-pages): comparativas, cómo funciona y ejemplos. Base: site-base/site.css. */
.page-discovery .hero .callout { margin-top: 28px; }
.vs-table th .pill { margin-left: 6px; font-size: 0.68rem; padding: 2px 8px; text-transform: none; letter-spacing: 0; }
.vs-table tbody th { width: 18%; }
.h-small { font-size: 1.1rem; letter-spacing: -0.01em; color: var(--muted); font-weight: 600; margin-bottom: 20px; }

/* Cómo funciona: línea de tiempo */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 120px); }
.timeline-step { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.timeline-step:nth-child(even) .timeline-copy { order: 2; }
.timeline-step.no-visual { grid-template-columns: 1fr; max-width: 860px; }
.timeline-n { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; border: 1px solid var(--line-2);
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.timeline-copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 14px; }
.timeline-copy p { color: var(--text-2); font-size: 1.08rem; max-width: 480px; }
.timeline-visual .device-phone { margin-inline: auto; }
.screen-top img { object-fit: cover; object-position: top; }
.engine-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.engine-pair .pill { margin-bottom: 14px; }
@media (max-width: 860px) {
  .timeline-step { grid-template-columns: 1fr; }
  .timeline-step:nth-child(even) .timeline-copy { order: 0; }
  .engine-pair { grid-template-columns: 1fr; }
}

/* Ejemplos */
.source-photos { max-width: 560px; margin: 0 auto; }
.source-photos figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 56px) 28px; }
.gallery-item h3 { margin: 24px 0 12px; text-align: center; }
.gallery-item .fine { text-align: center; }
.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; }
.specs div { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.8rem; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; color: var(--text); font-weight: 550; }
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }