/*
 * Tela 1 · Boas-vindas — estilos exclusivos do hero.
 * Cópia fiel do bloco "Tela 1 · Boas-vindas" de
 * /mockup/agendador-cardapio-web.html.
 */

.hero{padding:clamp(34px,6vw,64px) clamp(24px,5vw,64px);text-align:center;max-width:760px;margin:clamp(8px,4vw,48px) auto 0}
.selo{
  display:inline-flex;align-items:center;gap:8px;background:var(--lilas-suave);color:var(--roxo);
  border-radius:var(--r-full);padding:7px 16px;font-size:12.5px;font-weight:700;letter-spacing:.02em;margin-bottom:22px;
}
.hero h1{font-size:clamp(30px,5.4vw,46px);font-weight:800;letter-spacing:-1.1px;line-height:1.12;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--roxo);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.34em;background:rgba(162,110,205,.22);border-radius:4px;z-index:-1}
.hero p{font-size:clamp(15px,2.2vw,17.5px);color:var(--tinta-media);max-width:530px;margin:0 auto 30px}

.beneficios{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 auto 32px;max-width:640px;text-align:left}
.beneficio{display:flex;gap:11px;align-items:flex-start;background:var(--fundo);border:1px solid var(--linha);border-radius:var(--r-md);padding:14px}
.beneficio .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--lilas-suave);color:var(--roxo)}
.beneficio b{display:block;font-size:13.5px;font-weight:700;margin-bottom:1px}
.beneficio span{font-size:12.5px;color:var(--tinta-media);line-height:1.42}