/* ==========================================================================
   sections.css: uma secção por bloco, pela ordem do documento
   ========================================================================== */

/* ---------- 01 · Hero ---------- */
.hero { background: var(--paper); padding-block: clamp(40px, 8vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.hero__title {
  margin-top: 18px;
  font: 700 clamp(2rem, 4.6vw, 3.1rem)/1.12 var(--font-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--orange-text); }
.hero__title-2 { display: block; }   /* "Voltamos em breve!" numa linha própria */

.hero__lead {
  margin-top: 14px;
  font: 600 clamp(1.05rem, 2vw, 1.25rem)/1.4 var(--font-head);
}
.hero__note {
  margin-top: 12px; max-width: 46ch;
  font-style: italic; color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

.hero__visual { position: relative; display: grid; place-items: center; }
.hero__visual::before {              /* halo quente atrás do celular */
  content: ""; position: absolute; inset: 8% 6%; z-index: 0;
  background: radial-gradient(closest-side, rgba(243, 146, 0, .18), rgba(243, 146, 0, 0));
  border-radius: 50%;
}
.hero__phone {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  animation: float 6s ease-in-out infinite;
}

/* ---------- 02 · Funcionalidades ---------- */
.features { background: var(--white); padding-block: clamp(48px, 8vw, 88px); text-align: center; }
.features__title { font: 600 clamp(1.6rem, 3.4vw, 2.3rem)/1.2 var(--font-head); }
.features__lead { margin: 10px auto 0; max-width: 60ch; color: var(--ink-soft); }
.features__list {
  list-style: none; margin: clamp(32px, 5vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.feature__icon { width: 48px; height: 48px; margin-inline: auto; }
.feature__title { margin-top: 14px; font: 600 clamp(1.15rem, 2vw, 1.4rem)/1.25 var(--font-head); }
.feature__text { margin: 6px auto 0; max-width: 32ch; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- 03 · Rodapé ---------- */
.footer { background: var(--dark); color: var(--white); padding-block: clamp(36px, 6vw, 56px) 28px; }
.footer__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px clamp(24px, 4vw, 72px);
}
.footer__logo { width: 220px; height: auto; }
.footer__title { font: 600 1.15rem/1.2 var(--font-head); }
.footer__mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--white); text-decoration: none; opacity: .92; overflow-wrap: anywhere;
}
.footer__mail:hover { color: var(--orange); opacity: 1; }
.social {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.social__link {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.social__link img { width: 16px; height: 16px; }
.social__link:hover {
  background: rgba(243, 146, 0, .22);
  box-shadow: inset 0 0 0 1px var(--orange);
  transform: translateY(-3px);
}
.footer__bottom {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  text-align: center; font-size: 0.8rem; line-height: 1.7; color: rgba(255, 255, 255, .85);
}