* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      -webkit-font-smoothing: antialiased;
      font-family: 'IBM Plex Sans', sans-serif;
      background: #F5F7FA;
      color: #0F2544;
    }

    html {
      scroll-behavior: smooth;
    }

    a {
      color: #EE8B1E;
      text-decoration: none;
    }

    a:hover {
      color: #D97300;
    }

    button {
      font: inherit;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

    .nav-link {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.82);
      padding: 8px 0;
    }

    .nav-link:hover {
      color: #EE8B1E;
    }

    .nav-link.active {
      color: #EE8B1E;
      font-weight: 600;
    }

    .nav-link:focus-visible {
      outline: 2px solid #EE8B1E;
      outline-offset: 4px;
      border-radius: 4px;
    }

    .nav-link-mobile {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'IBM Plex Sans', sans-serif;
      color: rgba(255, 255, 255, 0.82);
      padding: 14px 4px;
      font-size: 16px;
      text-align: left;
      width: 100%;
      min-height: 44px;
      font-weight: 500;
    }

    .nav-link-mobile.active {
      color: #EE8B1E;
      font-weight: 600;
    }

    .nav-link-mobile:focus-visible {
      outline: 2px solid #EE8B1E;
    }

    .btn-primary {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 600;
      font-size: 14.5px;
      padding: 15px 28px;
      border-radius: 100px;
      background: #EE8B1E;
      color: #fff;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-primary:hover {
      background: #D97300;
    }

    .btn-primary:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }

    .btn-outline-dark {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 600;
      font-size: 14.5px;
      padding: 13px 26px;
      border-radius: 100px;
      background: transparent;
      color: #0B1F4A;
      border: 1.5px solid #0B1F4A;
      cursor: pointer;
    }

    .btn-outline-dark:hover {
      background: #0B1F4A;
      color: #fff;
    }

    .btn-outline-dark:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: 2px;
    }

    .btn-outline-light {
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 600;
      font-size: 14.5px;
      padding: 15px 28px;
      border-radius: 100px;
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, 0.5);
      cursor: pointer;
    }

    .btn-outline-light:hover {
      border-color: #fff;
      background: rgba(255, 255, 255, 0.08);
    }

    .btn-outline-light:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: 3px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12.5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .eyebrow .dash {
      width: 18px;
      height: 1px;
      background: #EE8B1E;
      display: inline-block;
    }

    .grid-bg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    input,
    textarea {
      width: 100%;
      padding: 13px 14px;
      border-radius: 8px;
      border: 1.5px solid rgba(15, 37, 68, 0.18);
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 15px;
      background: #fff;
      color: #0F2544;
    }

    input:focus-visible,
    textarea:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: 1px;
      border-color: #0B1F4A;
    }

    label {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #5B6B85;
      margin-bottom: 6px;
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    .tag-pill {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      padding: 6px 14px;
      border-radius: 100px;
      background: #F5F7FA;
      color: #2C5F7C;
      border: 1px solid rgba(15, 37, 68, 0.12);
    }

    .tool-pill {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      padding: 8px 18px;
      border-radius: 100px;
      background: #fff;
      color: #2C5F7C;
      border: 1px solid rgba(15, 37, 68, 0.12);
    }

    .service-row {
      padding: 40px 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 32px;
      border-top: 1px solid rgba(15, 37, 68, 0.12);
    }

    .service-row:first-child {
      border-top: none;
    }

    @media (max-width:879px) {
      #hero-static {
        height: calc(100vh - 76px);
        /* svh usa sempre a altura MÍNIMA do viewport (barra de endereço
           visível) e nunca recalcula — diferente de dvh, que acompanha a
           barra em tempo real e faria a imagem (object-fit:cover) esticar/
           encolher a cada scroll. Navegadores sem suporte a svh ignoram a
           linha e ficam em vh. */
        height: calc(100svh - 76px);
      }
    }

    .circle-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }

    .circle-btn:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .circle-btn:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: 2px;
    }

    .faq-item {
      border-bottom: 1px solid rgba(15, 37, 68, 0.12);
      padding: 24px 0;
    }

    .faq-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      padding: 0;
    }

    .faq-btn:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: 4px;
    }

    .faq-item.open .faq-icon::before {
      content: "−";
    }

    .faq-icon::before {
      content: "+";
    }

    footer a:hover {
      color: #EE8B1E;
    }

    .dalmas-badge {
      opacity: 0.4;
      transition: opacity .25s ease;
    }

    .dalmas-badge:hover {
      opacity: 0.7;
    }

    .footer-link {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.75);
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 14px;
      cursor: pointer;
      padding: 2px 0;
      text-align: left;
      transition: color .25s ease, transform .25s ease;
      display: inline-block;
    }

    .footer-link:hover {
      color: #EE8B1E;
      transform: translateX(3px);
    }

    /* ---------- Premium polish: transitions, hover, scroll reveal ---------- */
    .btn-primary,
    .btn-outline-dark,
    .btn-outline-light {
      transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(238, 139, 30, 0.35);
    }

    .btn-outline-dark:hover,
    .btn-outline-light:hover {
      transform: translateY(-2px);
    }

    .btn-primary:active,
    .btn-outline-dark:active,
    .btn-outline-light:active {
      transform: translateY(0);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 2px;
      height: 2px;
      background: #EE8B1E;
      transition: right .3s cubic-bezier(.16, 1, .3, 1);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      right: 0;
    }

    .circle-btn {
      transition: all .25s ease, transform .2s ease;
    }

    .circle-btn:hover {
      transform: scale(1.08);
    }

    .faq-answer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      display: block;
      padding-left: 38px;
      font-size: 15px;
      color: #5B6B85;
      margin-top: 0;
      max-width: 640px;
      transition: max-height .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, margin-top .45s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 600px;
      opacity: 1;
      margin-top: 16px;
    }

    .faq-icon {
      transition: transform .35s cubic-bezier(.16, 1, .3, 1);
      display: inline-block;
    }

    .faq-item.open .faq-icon {
      transform: rotate(180deg);
    }

    .reveal-item {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
      will-change: opacity, transform;
    }

    .reveal-item.in-view {
      opacity: 1;
      transform: none;
    }

    .card-hover {
      transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px rgba(11, 31, 74, 0.18);
    }

    .card-hover img {
      transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    }

    .card-hover:hover img {
      transform: scale(1.05);
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .card-hover,
      .card-hover:hover,
      .card-hover img,
      .card-hover:hover img,
      .btn-primary,
      .btn-outline-dark,
      .btn-outline-light,
      .nav-link::after,
      .circle-btn,
      .footer-link {
        transition: none !important;
        transform: none !important;
      }

      .faq-answer {
        transition: none !important;
      }
    }

    three-d-stage:not(:defined) {
      visibility: hidden;
    }

    @keyframes trivector-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .product-file-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 20px;
      background: none;
      border: none;
      border-left: 2px solid transparent;
      color: rgba(255, 255, 255, 0.7);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      cursor: pointer;
      text-align: left;
      min-height: 44px;
    }

    .product-file-btn:hover {
      background: rgba(238, 139, 30, 0.1);
    }

    .product-file-btn:focus-visible {
      outline: 2px solid #EE8B1E;
      outline-offset: -2px;
    }

    .product-file-btn.active {
      background: rgba(238, 139, 30, 0.14);
      border-left-color: #EE8B1E;
      color: #fff;
    }

    .produtos-desktop-cad {
      display: block;
    }

    .product-case-detail {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      margin-top: 0;
      transition: max-height .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, margin-top .4s ease;
    }

    .product-case-detail.open {
      max-height: 600px;
      opacity: 1;
      margin-top: 12px;
    }

    .product-case-detail h4 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      color: #EE8B1E;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 12px 0 4px;
    }

    .product-case-detail h4:first-child {
      margin-top: 0;
    }

    .product-case-detail p {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.5;
      margin: 0;
    }

    .product-case-detail ul {
      margin: 4px 0 0;
      padding-left: 16px;
    }

    .product-case-detail li {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.5;
    }

    .produtos-mobile-gallery {
      display: none;
    }

    @media (max-width: 879px) {
      .produtos-desktop-cad {
        display: none;
      }

      .produtos-mobile-gallery {
        display: block;
      }
    }

    .service-card {
      position: relative;
      background: #fff;
      border: 1px solid rgba(15, 37, 68, 0.12);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .service-card-media {
      position: relative;
      height: 260px;
      background: #F5F7FA;
      border-bottom: 1px solid rgba(15, 37, 68, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .service-card-media::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(15, 37, 68, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 37, 68, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .blueprint-corner {
      position: absolute;
      width: 16px;
      height: 16px;
      z-index: 1;
    }

    .blueprint-corner.tl {
      top: 14px;
      left: 14px;
      border-top: 2px solid #EE8B1E;
      border-left: 2px solid #EE8B1E;
    }

    .blueprint-corner.tr {
      top: 14px;
      right: 14px;
      border-top: 2px solid #EE8B1E;
      border-right: 2px solid #EE8B1E;
    }

    .blueprint-corner.bl {
      bottom: 14px;
      left: 14px;
      border-bottom: 2px solid #EE8B1E;
      border-left: 2px solid #EE8B1E;
    }

    .blueprint-corner.br {
      bottom: 14px;
      right: 14px;
      border-bottom: 2px solid #EE8B1E;
      border-right: 2px solid #EE8B1E;
    }

    .service-row {
      display: flex;
      align-items: center;
      gap: 20px;
      width: 100%;
      background: none;
      border: none;
      border-top: 1px solid rgba(15, 37, 68, 0.12);
      padding: 22px 4px;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: inherit;
      position: relative;
      transition: padding-left .25s ease;
    }

    .service-row:last-child {
      border-bottom: 1px solid rgba(15, 37, 68, 0.12);
    }

    .service-row::before {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      bottom: -1px;
      width: 0;
      background: #EE8B1E;
      transition: width .25s ease;
    }

    .service-row:hover,
    .service-row:focus-visible {
      padding-left: 20px;
    }

    .service-row:hover::before,
    .service-row:focus-visible::before {
      width: 3px;
    }

    .service-row:focus-visible {
      outline: 3px solid #EE8B1E;
      outline-offset: -3px;
    }

    .service-row-index {
      font-family: 'IBM Plex Mono', monospace;
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 600;
      color: rgba(238, 139, 30, 0.45);
      flex-shrink: 0;
      width: 68px;
      transition: color .25s ease;
    }

    .service-row:hover .service-row-index,
    .service-row:focus-visible .service-row-index {
      color: #EE8B1E;
    }

    .service-row-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
    }

    .service-row-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #0B1F4A;
    }

    .service-row-desc {
      font-size: 13.5px;
      line-height: 1.5;
      color: #5B6B85;
      max-width: 560px;
    }

    .service-row-arrow {
      flex-shrink: 0;
      color: #0B1F4A;
      font-size: 18px;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity .25s ease, transform .25s ease;
    }

    .service-row-more {
      border-top-style: dashed;
    }

    .service-row-more:last-child {
      border-bottom-style: dashed;
    }

    .service-row-more .service-row-index {
      color: #EE8B1E;
    }

    .service-row:hover .service-row-arrow,
    .service-row:focus-visible .service-row-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    @media (max-width:700px) {
      .service-row {
        gap: 14px;
      }

      .service-row-index {
        width: 44px;
        font-size: 16px;
      }

      .service-row-arrow {
        display: none;
      }
    }

    .service-deliverable {
      display: flex;
      gap: 10px;
      font-size: 14px;
      line-height: 1.5;
      color: #3D4C66;
    }

    .service-benefit {
      background: #F5F7FA;
      border-left: 3px solid #EE8B1E;
      border-radius: 0 6px 6px 0;
      padding: 14px 18px;
      font-size: 14px;
      color: #0B1F4A;
    }

    .diferencial-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.85);
    }

    .diferencial-check {
      color: #EE8B1E;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ---------- Serviços: roleta circular ---------- */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Página de Serviços: menu horizontal de abas (servicos-tabs) + painéis
       de conteúdo completo (servico-panel), trocados via classe .active —
       mesmo padrão de .page/.faq-item usado no resto do site. Substituiu o
       painel de crossfade em tela cheia em 2026-08-11, pra caber conteúdo
       mais longo (O que fazemos/Para quem/Etapas/Entregáveis/Normas/
       Exemplos/FAQ por serviço) em vez de só título + descrição curta. */
    .servicos-cat-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-top: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .servico-cat-tab {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.55);
      padding: 0 0 12px;
      position: relative;
      transition: color .2s ease;
    }

    .servico-cat-tab:hover,
    .servico-cat-tab:focus-visible {
      color: #fff;
    }

    .servico-cat-tab.active {
      color: #EE8B1E;
    }

    .servico-cat-tab.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: #EE8B1E;
    }

    .servicos-tabs-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.5);
      margin: 24px 0 10px;
    }

    .servicos-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .servico-tab {
      background: rgba(255, 255, 255, 0.05);
      border: 1.5px solid rgba(255, 255, 255, 0.16);
      border-radius: 100px;
      padding: 10px 18px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.75);
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

    .servico-tab:hover,
    .servico-tab:focus-visible {
      border-color: rgba(255, 255, 255, 0.4);
      color: #fff;
    }

    .servico-tab.active {
      background: rgba(238, 139, 30, 0.12);
      border-color: #EE8B1E;
      color: #fff;
    }

    /* Sinaliza que a fileira de pills rola horizontalmente — sem isso, com 9
       serviços de nome longo cortados na borda, não fica óbvio que dá pra
       arrastar pra ver o resto. Legenda de texto abaixo da fileira, não um
       ícone por cima dela — versões com ícone sobreposto (gradiente escuro,
       seta simples, círculo laranja) sempre competiam de alguma forma com o
       texto dos próprios pills. */
    .servicos-tabs-hint {
      display: none;
    }

    @media (max-width:879px) {
      .servicos-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .servicos-tabs-hint {
        display: block;
        margin: 8px 0 0;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.45);
      }
    }

    .servico-panel {
      display: none;
      position: relative;
      overflow: hidden;
      min-height: 560px;
    }

    .servico-panel.active {
      display: flex;
      align-items: center;
    }

    .servico-panel-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .servico-panel-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .servico-panel-bg img.bw {
      filter: grayscale(1);
    }

    /* Véu em diagonal: escuro/opaco onde o texto fica (esquerda), abrindo
       pro resto da imagem à direita — mesmo princípio de contraste da antiga
       roleta de Serviços, adaptado pro card único. */
    .servico-panel-veil {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(100deg,
          rgba(7, 18, 41, 0.98) 0%,
          rgba(7, 18, 41, 0.94) 32%,
          rgba(7, 18, 41, 0.55) 62%,
          rgba(7, 18, 41, 0.22) 100%);
    }

    .servico-panel-body {
      position: relative;
      z-index: 2;
      width: 100%;
      min-width: 0;
      max-width: 560px;
      padding: 48px;
    }

    @media (max-width: 879px) {
      .servico-panel {
        min-height: 0;
      }

      /* No mobile o painel fica vertical (375x876) e as imagens são
         horizontais (900x502). Com a imagem de fundo atrás do texto, o
         object-fit:cover mostrava só ~24% dela — uma tira do meio ampliada
         2,3x — e o véu cobria isso com 98% de opacidade: virava um borrão
         escuro. Aqui a imagem vira faixa no topo, no aspecto dela, e o texto
         desce pro fundo sólido. Nenhum texto fica sobre imagem, então o véu
         só precisa fundir a base da faixa com o corpo. */
      .servico-panel.active {
        display: block;
      }

      .servico-panel-bg {
        position: relative;
        aspect-ratio: 16 / 9;
      }

      .servico-panel-veil {
        bottom: auto;
        aspect-ratio: 16 / 9;
        background: linear-gradient(180deg,
            rgba(7, 18, 41, 0.10) 0%,
            rgba(7, 18, 41, 0.45) 65%,
            rgba(7, 18, 41, 1) 100%);
      }

      .servico-panel-body {
        max-width: none;
        padding: 28px;
        background: #071229;
      }

      /* --- Acordeão (mobile): as duas camadas de abas dão lugar a uma lista
         vertical, montada por script.js movendo os mesmos nós. --- */
      /* O .servicos-tabs-hint é IRMÃO do .servicos-tabs-wrap, não filho —
         esconder só o wrap deixava a legenda "Arraste para o lado" órfã. */
      #servicos-cat-tabs,
      .servicos-tabs-title,
      .servicos-tabs-wrap,
      .servicos-tabs-hint {
        display: none;
      }

      .servicos-acc-cat {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #8FB4E8;
        margin: 0;
        padding: 28px 28px 10px;
      }

      /* O pill vira linha de largura cheia. Precisa desfazer border-radius,
         nowrap e o padding do pill, senão o texto longo do serviço não quebra. */
      .servico-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 16px 28px;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 0;
        background: transparent;
        font-size: 15px;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
      }

      .servico-tab::after {
        content: "▾";
        flex: none;
        color: #EE8B1E;
        font-size: 13px;
        transition: transform .2s ease;
      }

      .servico-tab.active {
        background: rgba(238, 139, 30, 0.08);
        color: #fff;
        border-top-color: rgba(238, 139, 30, 0.45);
      }

      .servico-tab.active::after {
        transform: rotate(180deg);
      }
    }

    .servico-panel-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: clamp(26px, 3vw, 34px);
      color: #fff;
      margin: 0 0 8px;
    }

    .servico-panel-tagline {
      font-family: 'IBM Plex Sans', sans-serif;
      font-style: italic;
      font-size: 17px;
      color: #EE8B1E;
      margin: 0 0 14px;
    }

    .servico-panel-lead {
      font-size: 15.5px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      margin: 0 0 8px;
      max-width: 560px;
    }

    /* lista de recursos no painel: bullet laranja + título curto + descrição
       de uma linha, com divisória fina entre itens (referência enviada pelo
       cliente pra essa página) */
    .servico-feature-list {
      list-style: none;
      margin: 24px 0 0;
      padding: 0;
    }

    .servico-feature-list li {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 0 14px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
    }

    .servico-feature-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 22px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #EE8B1E;
    }

    .servico-feature-list li strong {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 15px;
      color: #fff;
    }

    .servico-feature-list li span {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.55;
      max-width: 560px;
    }

    .servico-panel-body p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      max-width: 560px;
    }

    .inline-link {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: #EE8B1E;
      text-decoration: underline;
      cursor: pointer;
    }

    .inline-link:hover {
      color: #fff;
    }

    /* marca os serviços ainda em implantação, na aba e no painel */
    .soon-tag {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #EE8B1E;
      border: 1px solid rgba(238, 139, 30, 0.5);
      border-radius: 4px;
      padding: 3px 9px;
      vertical-align: middle;
    }

    @media (max-width:480px) {
      .footer-legal {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center;
      }

      .footer-legal span[style*="text-align:left"] {
        text-align: center !important;
      }

      .footer-legal a {
        grid-column: 1 !important;
      }
    }

    .whatsapp-float:hover {
      transform: scale(1.08);
    }

    @media (prefers-reduced-motion: reduce) {
      .whatsapp-float {
        transition: none !important;
      }

      .whatsapp-float:hover {
        transform: none;
      }
    }