/* Previa isolada: primeira dobra v2 (Claude, 23/09/2026). Carregar depois de proposta-hero-visual.css.
   So visual: nenhum texto muda. A rota proposta-hero-v2.php acrescenta <span class="hl"> no titulo
   e data-initials nos autores dos depoimentos. */

:root {
  --zc-ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.08-.13-.27-.2-.57-.35M12.05 21.79h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89a11.82 11.82 0 0 0-3.48-8.41z'/%3E%3C/svg%3E");
  --zc-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --zc-ico-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 17v2M13 11v2'/%3E%3C/svg%3E");
}

@keyframes zc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes zc-header-fill {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zc-ping {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- Comum ---------- */

html body #home.hero h1 .hl {
  color: #ff9690;
}

html body #home.hero .mobile-hero-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: max-content;
  max-width: 100% !important;
  padding: 7px 14px 7px 11px !important;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: rgba(236, 241, 247, .84) !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #home.hero .mobile-hero-kicker span {
  position: relative;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7a74;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

html body #home.hero .mobile-hero-kicker span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 122, 116, .55);
  animation: zc-ping 2.6s ease-out infinite;
}

/* Depoimento: uma aspa so, borda uniforme, autor com iniciais */
html body #home.hero .hero-side .t-item::before {
  content: none !important;
}

html body #home.hero .hero-side .t-quote {
  font-style: normal !important;
}

html body #home.hero .hero-side .t-author[data-initials] {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 1px 13px !important;
  align-items: center;
}

html body #home.hero .hero-side .t-author[data-initials]::before {
  content: attr(data-initials);
  content: attr(data-initials) / "";
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f27375, #a92f45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
  color: #fff;
  font: 700 12.5px/1 "Sora", system-ui, sans-serif;
  letter-spacing: .02em;
}

html body #home.hero .hero-side .t-author[data-initials] .t-name,
html body #home.hero .hero-side .t-author[data-initials] .t-role {
  grid-column: 2;
}

/* ---------- Desktop ---------- */
@media (min-width: 901px) {
  /* Cabecalho transparente sobre a cena; ganha fundo ao rolar */
  html body header {
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }

  html body header:not(.scrolled) {
    background: linear-gradient(180deg, rgba(4, 8, 15, .66) 0%, rgba(4, 8, 15, .3) 62%, rgba(4, 8, 15, 0) 100%) border-box no-repeat !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ao comecar a rolar, o cabecalho escurece aos poucos, antes do limite de 80 px do script.
     Navegadores sem suporte ficam com o degrade acima. */
  @supports (animation-timeline: scroll()) {
    html body header:not(.scrolled)::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(7, 11, 18, .88);
      -webkit-backdrop-filter: blur(12px) saturate(1.3);
              backdrop-filter: blur(12px) saturate(1.3);
      pointer-events: none;
      animation: zc-header-fill linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 56px;
    }
  }

  @supports not (animation-timeline: scroll()) {
    html body header:not(.scrolled) {
      background: linear-gradient(rgba(7, 11, 18, .74), rgba(7, 11, 18, .56)) border-box no-repeat !important;
      -webkit-backdrop-filter: blur(12px) saturate(1.45) !important;
              backdrop-filter: blur(12px) saturate(1.45) !important;
    }
  }

  html body header nav a:not(.cta-nav) {
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .84) !important;
  }

  html body header nav a:not(.cta-nav):hover,
  html body header nav a.is-active {
    color: #fff !important;
  }

  html body header .cta-nav {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    border: 1px solid rgba(255, 150, 144, .38) !important;
    background: rgba(229, 57, 53, .12) !important;
    color: #fff !important;
    font-weight: 700 !important;
    transition: background .2s ease, border-color .2s ease;
  }

  html body header .cta-nav::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--zc-ico-wa) center / contain no-repeat;
            mask: var(--zc-ico-wa) center / contain no-repeat;
  }

  html body header .cta-nav:hover {
    background: rgba(229, 57, 53, .24) !important;
    border-color: rgba(255, 150, 144, .6) !important;
  }

  /* Cena: altura da tela, foto inteira respirando, texto em area escura */
  html body #home.hero {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: clamp(660px, 100svh, 960px) !important;
    padding: 112px 0 132px !important;
    background:
      radial-gradient(ellipse 48% 58% at 4% 104%, rgba(214, 48, 58, .26), transparent 70%),
      linear-gradient(90deg, rgba(4, 8, 15, .97) 0%, rgba(5, 10, 18, .9) 26%, rgba(6, 11, 20, .6) 44%, rgba(7, 12, 22, .16) 64%, rgba(7, 12, 22, 0) 80%),
      linear-gradient(180deg, rgba(3, 6, 12, .72) 0%, rgba(3, 6, 12, 0) 20%, rgba(3, 6, 12, 0) 66%, rgba(5, 9, 17, .88) 100%),
      url("/img/hero-zorza-tec.webp") 62% 46% / cover no-repeat,
      #050a13 !important;
  }

  /* Textura: grade de pontos so na area do texto (substitui o traco de rede) */
  html body #home.hero::before {
    background:
      radial-gradient(circle, rgba(170, 192, 214, .16) 1px, transparent 1.2px) 0 0 / 28px 28px !important;
    -webkit-mask-image: radial-gradient(ellipse 46% 62% at 18% 52%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 46% 62% at 18% 52%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
    opacity: .6 !important;
    animation: none !important;
  }

  html body #home.hero .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr) !important;
    align-items: end !important;
    column-gap: 56px !important;
  }

  html body #home.hero .inner > div:first-child {
    animation: none !important;
  }

  html body #home.hero .mobile-hero-kicker {
    margin: 0 0 26px !important;
  }

  html body #home.hero h1 {
    max-width: 11.5em !important;
    font-size: clamp(44px, 4vw, 60px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.034em !important;
    margin: 0 0 22px !important;
  }

  html body #home.hero h1 .hl {
    display: block;
  }

  html body #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) {
    max-width: 44ch !important;
    font-size: 18.5px !important;
    line-height: 1.62 !important;
    color: rgba(226, 233, 242, .76) !important;
    text-wrap: balance !important;
  }

  /* Acoes: botoes separados, com hierarquia e mesma fonte; menus acima do card */
  html body #home.hero .quick {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    margin-top: 36px !important;
    padding: 0 !important;
    gap: 12px !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #home.hero .quick .btn,
  html body #home.hero .quick .dl-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.005em !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html body #home.hero .quick .btn-primary.dl-toggle {
    padding: 0 20px 0 26px !important;
    border: 1px solid rgba(255, 140, 134, .35) !important;
    background: linear-gradient(180deg, #ef5350 0%, #d93a3a 52%, #bd2828 100%) !important;
    box-shadow: 0 16px 34px -12px rgba(229, 57, 53, .75), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
    color: #fff !important;
  }

  html body #home.hero .quick .btn-primary.dl-toggle:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 20px 40px -12px rgba(229, 57, 53, .85), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  }

  html body #home.hero .quick > a.btn.btn-gray,
  html body #home.hero .quick .dl-split-mobile-visible .dl-toggle {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
  }

  html body #home.hero .quick > a.btn.btn-gray {
    padding: 0 24px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  html body #home.hero .quick > a.btn.btn-gray:hover {
    border-color: rgba(255, 255, 255, .34) !important;
    background: rgba(255, 255, 255, .11) !important;
  }

  html body #home.hero .quick .dl-split-mobile-visible .dl-toggle {
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    color: rgba(236, 241, 247, .86) !important;
  }

  html body #home.hero .quick .dl-split-mobile-visible .dl-toggle:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
  }

  html body #home.hero .quick .dl-toggle::after {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    opacity: .85;
    -webkit-mask: var(--zc-ico-chevron) center / contain no-repeat;
            mask: var(--zc-ico-chevron) center / contain no-repeat;
    transition: transform .2s ease;
  }

  html body #home.hero .quick .dl-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  html body #home.hero .quick .btn:focus-visible,
  html body #home.hero .quick .dl-toggle:focus-visible,
  html body header .cta-nav:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .92) !important;
    outline-offset: 3px !important;
  }

  /* Depoimento alinhado a base dos botoes, borda limpa */
  html body #home.hero .hero-side {
    top: auto !important;
    align-self: end !important;
    width: 100% !important;
    max-width: 384px !important;
    margin: 0 0 0 auto !important;
    padding: 26px 26px 22px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-left: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 22px !important;
    background: linear-gradient(160deg, rgba(21, 31, 49, .82), rgba(10, 17, 30, .66)) !important;
    box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
    animation: none !important;
  }

  html body #home.hero .hero-side::before {
    top: -1px !important;
    left: 26px !important;
    right: auto !important;
    width: 44px !important;
    height: 3px !important;
    border-radius: 0 0 3px 3px !important;
    background: linear-gradient(90deg, #ff9690, #e5484d) !important;
    opacity: 1 !important;
  }

  /* Sem aspas gigantes: o rotulo e o avatar ja identificam o depoimento */
  html body #home.hero .hero-side::after {
    content: none !important;
  }

  html body #home.hero .hero-side .t-label::before {
    background: #ff7a74 !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 116, .18) !important;
  }

  html body #home.hero .hero-side .t-quote {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .95) !important;
    margin-bottom: 18px !important;
  }

  html body #home.hero .hero-side .t-author {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
  }

  html body #home.hero .hero-side .t-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  html body #home.hero .hero-side .t-role {
    font-size: 12.5px !important;
    color: rgba(226, 233, 242, .58) !important;
  }

  html body #home.hero .hero-side .t-dots {
    grid-row: 3;
    margin-top: 18px !important;
  }

  /* Depoimentos empilhados na mesma celula: o card fica com a altura do maior e nao pula na troca */
  html body #home.hero .hero-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  html body #home.hero .hero-side .t-label {
    grid-row: 1;
  }

  html body #home.hero .hero-side .t-item {
    display: flex !important;
    flex-direction: column;
    grid-area: 2 / 1;
    visibility: hidden;
    pointer-events: none;
  }

  html body #home.hero .hero-side .t-item.active {
    visibility: visible;
    pointer-events: auto;
  }

  /* Entrada em sequencia */
  @media (prefers-reduced-motion: no-preference) {
    html body #home.hero .mobile-hero-kicker { animation: zc-rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero h1 { animation: zc-rise .7s .08s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) { animation: zc-rise .7s .16s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero .quick { animation: zc-rise .7s .24s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero .hero-side { animation: zc-rise .8s .38s cubic-bezier(.2, .7, .2, 1) backwards !important; }
  }
}

/* Telas baixas: os menus de Suporte e Acessos abrem para cima para nao passar da borda da tela */
@media (min-width: 901px) and (max-height: 880px) {
  html body #home.hero .quick .dl-menu {
    top: auto !important;
    bottom: calc(100% + 12px) !important;
  }

  html body #home.hero .quick .dl-menu::before {
    top: auto !important;
    bottom: -11px !important;
    transform: rotate(180deg);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body #home.hero .inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
    column-gap: 32px !important;
  }

  html body #home.hero .hero-side {
    max-width: 340px !important;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  html body header .logo img {
    height: 46px !important;
    width: auto !important;
  }

  html body #home.hero .inner {
    gap: 0 !important;
    padding-top: 18px !important;
  }

  html body #home.hero .mobile-hero-kicker {
    justify-self: start;
    margin-bottom: 18px !important;
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
  }

  html body #home.hero h1 {
    margin-bottom: 14px !important;
    text-wrap: balance !important;
  }

  html body #home.hero .inner > div:first-child::after {
    height: clamp(150px, 46vw, 188px) !important;
    margin: 6px auto 2px !important;
    background-image: url("/zor-assets/ilustracoes/hero-conexoes-v2.svg") !important;
  }

  html body #home.hero .mobile-hero-cta {
    min-height: 58px !important;
    border-radius: 16px !important;
  }

  html body #home.hero .mobile-trust-note {
    margin-top: 12px !important;
    font-size: 12.5px !important;
    color: rgba(237, 242, 247, .7) !important;
  }

  html body #home.hero .mobile-hero-secondary-actions {
    margin-top: 18px !important;
  }

  html body #home.hero .mobile-hero-secondary:not(.mobile-hero-secondary-disabled) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    color: rgba(241, 246, 250, .92) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  html body #home.hero .mobile-hero-secondary:not(.mobile-hero-secondary-disabled)::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: .8;
    -webkit-mask: var(--zc-ico-ticket) center / contain no-repeat;
            mask: var(--zc-ico-ticket) center / contain no-repeat;
  }

  /* Depoimento no mesmo estilo do desktop */
  html body #home.hero .hero-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0 !important;
    margin-top: 26px !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-left: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important;
  }

  html body #home.hero .hero-side::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -1px !important;
    left: 20px !important;
    width: 40px !important;
    height: 3px !important;
    border-radius: 0 0 3px 3px !important;
    background: linear-gradient(90deg, #ff9690, #e5484d) !important;
  }

  html body #home.hero .hero-side .t-item {
    display: flex !important;
    flex-direction: column;
    grid-area: 1 / 1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    visibility: hidden;
  }

  html body #home.hero .hero-side .t-item.active {
    visibility: visible;
  }

  html body #home.hero .hero-side .t-quote {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
    color: rgba(255, 255, 255, .9) !important;
    margin-bottom: 14px !important;
  }

  html body #home.hero .hero-side .t-author[data-initials]::before {
    width: 34px;
    height: 34px;
    font-size: 11.5px;
  }

  html body #home.hero .hero-side .t-author[data-initials] {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  html body #home.hero .hero-side .t-author {
    margin-top: auto !important;
  }

  html body #home.hero .hero-side .t-role {
    color: rgba(226, 233, 242, .66) !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    html body #home.hero .inner > div:first-child { animation: none !important; }
    html body #home.hero .mobile-hero-kicker { animation: zc-rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero h1 { animation: zc-rise .7s .08s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) { animation: zc-rise .7s .16s cubic-bezier(.2, .7, .2, 1) backwards; }
    html body #home.hero .quick { animation: zc-rise .7s .24s cubic-bezier(.2, .7, .2, 1) backwards; }
  }
}

@media (max-width: 359px) {
  html body #home.hero .mobile-hero-kicker {
    gap: 7px !important;
    padding: 6px 10px 6px 9px !important;
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  html body #home.hero .quick {
    margin-top: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #home.hero .mobile-hero-kicker span::after {
    display: none;
    animation: none !important;
  }
}

/* ---------- Navegacao lateral por secoes (desktop largo) ----------
   Trilho de vidro escuro: legivel sobre a foto e sobre as secoes claras.
   So aparece a partir de 1280 px, onde nao encosta no conteudo; abaixo disso
   o cabecalho fixo ja indica a secao atual. Rotulos vem do aria-label existente. */
@media (min-width: 901px) and (max-width: 1279px) {
  html body .scroll-dots {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  html body .scroll-dots {
    display: flex !important;
    align-items: center !important;
    right: 22px !important;
    gap: 12px !important;
    padding: 14px 9px !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(11, 20, 35, .74);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
            backdrop-filter: blur(12px) saturate(1.2);
  }

  html body .scroll-dots a {
    width: 6px !important;
    height: 6px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .5) !important;
    transition: height .25s ease, background-color .2s ease;
  }

  /* area de clique maior que o ponto */
  html body .scroll-dots a::before {
    content: "";
    position: absolute;
    inset: -7px -9px;
  }

  html body .scroll-dots a:hover,
  html body .scroll-dots a:focus-visible {
    background: rgba(255, 255, 255, .9) !important;
  }

  html body .scroll-dots a.active {
    height: 22px !important;
    background: #ff9690 !important;
  }

  html body .scroll-dots a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 4px;
  }

  html body .scroll-dots a::after {
    right: calc(100% + 19px) !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px !important;
    background: rgba(8, 13, 22, .9) !important;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
    color: #fff !important;
    font: 600 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important;
    letter-spacing: .01em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .scroll-dots a {
    transition: none !important;
  }
}