/* Landing: one clear restaurant example, with direct links to each explanation. */
.hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(70px, 9vw, 120px);
}
.hero-copy { max-width: 850px; }
.hero-lead { max-width: 680px; }
.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-actions .button { margin-right: 10px; }
.hero-section-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--brand-line);
  border-radius: 100px;
  background: #fffdf9;
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.hero-section-link:hover { border-color: var(--brand-honey); background: #fff8e9; }
.hero-section-link span { color: #94621e; }
.showcase-grid { display: block; max-width: 640px; margin: 0 auto; }
.example-live-viewport {
  width: min(390px, calc(100% - 64px));
  aspect-ratio: 390 / 620;
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: var(--brand-navy);
  box-shadow: 0 8px 48px #14253d26;
}
.example-live-viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
#futuro-comercio-local[hidden] { display: none !important; }
@media (max-width: 800px) {
  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero-actions { align-items: stretch; flex-direction: row; gap: 10px; }
  .hero-actions .button { margin-right: 0; }
}
@media (max-width: 520px) {
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .hero-section-link { flex: 1 1 calc(50% - 5px); justify-content: space-between; min-height: 56px; line-height: 1.2; overflow-wrap: anywhere; }
  .hero-section-link span { flex-shrink: 0; }
  .example-live-viewport { width: calc(100% - 32px); }
}
@media (max-width: 350px) {
  .hero-section-link { flex-basis: 100%; }
}