/* ================================================================
   HOME · BASE COMPARTILHADA (v0.44.0)
   Sistema de espaçamento e componentes de todos os containers novos:
   .uos-sec (seção) · .uos-sec__head/__title/__lead · .uos-eyebrow (pílula) · .uos-link
   Referências de ritmo: container 1240px, seções de 96–160px, cabeçalho centrado
   e 48–80px até o conteúdo, cartões de 24–32px de raio sem sombra.
   Convenção: todo container novo leva a classe uos-x.
   ================================================================ */

.uos-sec {
  --uos-sec-bg: var(--uos-paper);
  --hm-pill-bg: var(--uos-white);
  --hm-side: clamp(20px, 4vw, 48px);
  --hm-section: clamp(88px, 10vw, 160px);
  --hm-head-gap: clamp(44px, 5vw, 80px);
  --hm-radius: clamp(20px, 2.2vw, 32px);
  position: relative;
  padding-block: var(--hm-section);
  background: var(--uos-sec-bg);
  color: var(--uos-black);
  font-family: var(--uos-font);
}

.uos-sec--paper { --uos-sec-bg: var(--uos-paper); --hm-pill-bg: var(--uos-white); }
.uos-sec--white { --uos-sec-bg: var(--uos-white); --hm-pill-bg: var(--uos-paper); }
.uos-sec--black { --uos-sec-bg: var(--uos-black); color: var(--uos-white); }

.uos-main .uos-sec > .uos-shell {
  width: min(calc(100% - 2 * var(--hm-side)), 1240px);
  margin-inline: auto;
}

/* ---------- cabeçalho de seção (centrado) ---------- */
.uos-sec__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto var(--hm-head-gap);
  text-align: center;
}

.uos-main .uos-sec .uos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(20px, 2vw, 28px);
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--uos-line);
  border-radius: var(--uos-pill);
  background: var(--hm-pill-bg);
  color: var(--uos-gray-800);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.uos-main .uos-sec .uos-eyebrow::before {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--uos-black) 0 3px, var(--uos-orange) 3.5px);
  content: "";
}

.uos-main .uos-sec--black .uos-sec__lead,
.uos-main .uos-sec--black .uos-sec__note {
  color: rgba(255, 255, 255, 0.72);
}

.uos-main .uos-sec--black .uos-eyebrow {
  border-color: var(--uos-line-inverse);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

.uos-main .uos-sec__title {
  max-width: 17em;
  margin: 0;
  color: inherit;
  font-family: var(--uos-font-display);
  font-size: clamp(2.2rem, 3.7vw, 3.7rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.uos-main .uos-sec__lead {
  max-width: 40em;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: var(--uos-gray-600);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.uos-main .uos-sec__note {
  margin: 16px 0 0;
  color: var(--uos-gray-600);
  font-size: var(--uos-type-secondary);
}

/* nota centralizada abaixo do conteúdo (v0.49.0) */
.uos-main .uos-sec__note--center {
  max-width: 48em;
  margin: clamp(32px, 4vw, 56px) auto 0;
  text-align: center;
}

/* ---------- link com seta ---------- */
.uos-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--uos-red);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.uos-link span {
  display: inline-block;
  transition: transform 300ms var(--uos-ease);
}

.uos-link:hover,
.uos-link:focus-visible {
  text-decoration: underline;
}

.uos-link:hover span,
.uos-link:focus-visible span {
  transform: translateX(6px);
}

/* ---------- entrada escalonada (data-uos-reveal + style="--i:N") ---------- */
.uos-sec [data-uos-reveal] {
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (max-width: 760px) {
  .uos-sec {
    --hm-section: clamp(72px, 18vw, 96px);
  }
}