// components/PlanosHero.jsx
const PlanosHero = () => {
  return (
    <section className="p-hero" id="planos-hero">
      <div className="bg-grid" />
      <div className="p-hero-glow" />
      <div className="container p-hero-inner">
        <span className="t-eyebrow"><span className="dot" />{t('planos.hero.eyebrow')}</span>
        <h1 className="p-hero-headline">
          {t('planos.hero.title_a')}<br />
          {t('planos.hero.title_b_a')} <em>{t('planos.hero.title_em')}</em> {t('planos.hero.title_b_b')}
        </h1>
        <p className="p-hero-sub">
          {t('planos.hero.sub')}
        </p>
      </div>
    </section>
  );
};