/* ==========================================================================
   StackPronta — folha de estilo única do site (marketing + documentação).
   Consolidada a partir dos <style> inline duplicados em cada página HTML.
   ========================================================================== */

/* --- Base: tokens, reset e componentes compartilhados (marketing + docs) --- */

    :root {
      --bg: #eef9f9;
      --bg2: #f5fbfb;
      --surface: #fff;
      --ink: #0b1517;
      --muted: #607174;
      --line: #dce8e8;
      --teal: #0f8f88;
      --cyan: #0e91b8;
      --blue: #3576d4;
      --violet: #7655d8;
      --dark: #0d1517;
      --dark2: #142124;
      --green: #17966b;
      --amber: #c58a28;
      --shadow: 0 18px 55px rgba(13, 40, 42, .10);
      --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
      --sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--sans);
      color: var(--ink);
      background: var(--bg);
      line-height: 1.6
    }

    a {
      text-decoration: none;
      color: inherit
    }

    img,
    video,
    svg {
      max-width: 100%;
      height: auto
    }

    .container {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    section {
      padding: 94px 0
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font: 700 .73rem var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #087f7a;
      margin-bottom: 17px
    }

    .eyebrow:before {
      content: "";
      width: 21px;
      height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--violet));
      border-radius: 4px
    }

    h1,
    h2,
    h3 {
      line-height: 1.06;
      letter-spacing: -.04em
    }

    h1 {
      font-size: clamp(3.2rem, 6.5vw, 6rem);
      max-width: 880px
    }

    h2 {
      font-size: clamp(2.25rem, 4.5vw, 4rem);
      max-width: 850px
    }

    h3 {
      font-size: 1.45rem
    }

    .lead {
      font-size: 1.14rem;
      color: var(--muted);
      max-width: 760px
    }

    .gradient {
      background: linear-gradient(100deg, #0c807c, #1b92b7 43%, #7655d8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 13px 20px;
      border-radius: 12px;
      font-weight: 800;
      border: 1px solid transparent;
      transition: .2s
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn-primary {
      background: #0b1214;
      color: #fff;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .14)
    }

    .btn-secondary {
      background: #fff;
      border-color: #d7e2e2;
      box-shadow: 0 7px 20px rgba(15, 40, 42, .05)
    }

    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(247, 252, 252, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(211, 226, 226, .85)
    }

    nav .inner {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font: 800 1.3rem var(--mono);
      letter-spacing: -.01em
    }

    .brand-logo {
      width: 38px;
      height: 38px;
      display: block;
      object-fit: contain;
      border-radius: 50%;
      filter: drop-shadow(0 7px 14px rgba(10, 30, 34, .14))
    }

    .brand:hover .brand-logo {
      transform: translateY(-1px);
      transition: .2s ease
    }

    .console-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: linear-gradient(145deg, #071013, #183337);
      display: grid;
      place-items: center;
      color: #6ee7df;
      box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
      font: 900 .9rem var(--mono);
      position: relative
    }

    .console-icon:after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #6ee7df;
      right: 6px;
      bottom: 6px;
      box-shadow: 0 0 8px #6ee7df
    }

    .navlinks {
      display: flex;
      gap: 25px;
      color: #5c6c6e;
      font-size: .9rem
    }

    .navlinks a:hover {
      color: #0a1719
    }

    .hero {
      padding: 96px 0 72px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 83% 20%, rgba(50, 171, 193, .16), transparent 27%),
        radial-gradient(circle at 18% 75%, rgba(80, 205, 187, .13), transparent 26%),
        linear-gradient(180deg, #edfafa 0%, #eef8f8 100%)
    }

    .hero .lead {
      font-size: 1.24rem;
      margin: 23px 0 27px
    }

    .hero-copy {
      position: relative;
      z-index: 1
    }

    .docker-required {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 20px;
      padding: 9px 13px;
      border: 1px solid #c9dddd;
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
      color: #29494c;
      font: 800 .72rem var(--mono);
      box-shadow: 0 6px 18px rgba(15, 40, 42, .05)
    }

    .docker-required span {
      color: #0f8f88;
      font-size: .8rem
    }

    .micro {
      display: flex;
      gap: 17px;
      flex-wrap: wrap;
      margin-top: 18px;
      color: #6b7b7d;
      font: 600 .72rem var(--mono)
    }

    .micro span {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .micro i {
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%
    }

    .terminal-hero {
      margin-top: 55px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 22px;
      align-items: stretch
    }

    .terminal {
      background: #10191b;
      border: 1px solid #27383b;
      border-radius: 18px;
      box-shadow: 0 28px 70px rgba(8, 30, 32, .18);
      overflow: hidden;
      color: #d5e2e2
    }

    .term-top {
      height: 40px;
      background: #0b1113;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      color: #819092;
      font: 600 .68rem var(--mono)
    }

    .td {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4e6265
    }

    .td:nth-child(2) {
      background: #738587
    }

    .td:nth-child(3) {
      background: #9aabad
    }

    .term-body {
      padding: 23px;
      font: 600 .75rem/2 var(--mono)
    }

    .prompt {
      color: #6ee7df
    }

    .ok {
      color: #86efac
    }

    .term-muted {
      color: #738486
    }

    .term-violet {
      color: #c4b5fd
    }

    .vs-card {
      background: linear-gradient(145deg, #fff, #f3f8f8);
      border: 1px solid #d9e6e6;
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 20px
    }

    .vs-head {
      font: 700 .72rem var(--mono);
      color: #728285;
      margin-bottom: 15px
    }

    .vs-tree {
      display: grid;
      gap: 8px;
      font: 600 .74rem var(--mono)
    }

    .vs-row {
      padding: 8px 9px;
      border-radius: 8px
    }

    .vs-row.active {
      background: #e7f3f3;
      color: #087f7a
    }

    .vs-row strong {
      color: #111
    }

    .strip {
      padding: 25px 0;
      border-block: 1px solid var(--line);
      background: #fff
    }

    .techs {
      display: flex;
      justify-content: center;
      gap: 9px;
      flex-wrap: wrap
    }

    .tech-sep {
      display: flex;
      align-items: center;
      margin: 0 4px;
      color: var(--line);
      font: 400 .8rem var(--mono);
      user-select: none
    }

    .tech {
      font: 700 .68rem var(--mono);
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #607174;
      background: #fbfdfd
    }

    /* "Tem muito mais" (#o-que-faz): grade de cards pequenos/médios, um por
       categoria de tecnologia — contraponto de amplitude ao Top 3 (3 cards
       grandes e aprofundados logo acima). */
    .tech-groups {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 14px
    }

    .tech-group {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 18px;
      box-shadow: 0 8px 30px rgba(15, 40, 42, .04)
    }

    .tech-group-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 10px
    }

    /* Categorias um pouco mais destacadas para facilitar a escaneabilidade
       da lista de tecnologias, sem mudar o conteúdo ou o layout do grid. */
    .tech-group .tag {
      display: block;
      font-size: .74rem;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line)
    }

    .tech-group .tech {
      padding: 5px 9px;
      font-size: .63rem
    }

    .statement {
      background: linear-gradient(135deg, #fff, #eef8f8 52%, #f5f1fd)
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .statement-big {
      font-size: clamp(2.4rem, 4.8vw, 4.6rem);
      font-weight: 850;
      line-height: 1.03;
      letter-spacing: -.05em
    }

    .checks {
      display: grid;
      gap: 14px;
      margin-top: 25px
    }

    .check {
      display: grid;
      grid-template-columns: 31px 1fr;
      gap: 11px
    }

    .check-icon {
      width: 31px;
      height: 31px;
      border-radius: 9px;
      background: #e7f4f3;
      color: #087f7a;
      display: grid;
      place-items: center;
      font-weight: 900
    }

    .check p {
      color: var(--muted);
      font-size: .93rem
    }

    .section-head {
      margin-bottom: 43px
    }

    .center {
      text-align: center
    }

    .center .lead {
      margin-inline: auto
    }

    .demo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .demo-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 21px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(15, 40, 42, .045)
    }

    .gif-slot {
      margin: 14px 14px 0;
      height: 190px;
      border: 1px dashed #b9cccc;
      border-radius: 14px;
      background: linear-gradient(145deg, #edf8f8, #f5f2fd);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden
    }

    /* Imagem real já disponível (ex.: print de uma esteira Jenkins) — ao
       contrário do .gif-slot (reservado só para placeholders de GIFs
       futuros, nunca contém <img>), este componente exibe a imagem inteira
       na largura do container, sem cortar. */
    .screenshot-frame {
      margin-top: 25px;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .screenshot-frame img {
      display: block;
      width: 100%;
      height: auto
    }

    .gif-slot .label {
      text-align: center;
      color: #617274;
      font: 700 .68rem var(--mono);
      letter-spacing: .04em
    }

    .gif-slot .label strong {
      display: block;
      color: #0d2528;
      font: 800 1rem var(--sans);
      margin-bottom: 5px
    }

    .gif-slot code {
      display: block;
      margin-top: 7px;
      color: #849698;
      font-size: .62rem
    }

    .demo-body {
      padding: 20px 22px 23px
    }

    .tag {
      font: 700 .68rem var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #087f7a
    }

    .demo-body h3 {
      margin: 8px 0
    }

    .demo-body p {
      font-size: .91rem;
      color: var(--muted)
    }

    .mini {
      display: block;
      margin-top: 13px;
      font: 700 .63rem var(--mono);
      color: #708083
    }

    /* Sem GIF real ainda: em vez do placeholder tracejado "GIF 0X", a
       moldura vira uma vitrine compacta pro ícone do recurso — parece
       proposital, não "conteúdo faltando", e é trocada por um GIF depois
       sem mexer no resto do card. */
    .gif-slot.gif-slot-icon {
      height: 108px;
      border-style: solid;
      border-color: var(--line)
    }

    .gif-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      background: linear-gradient(135deg, var(--teal), var(--violet));
      color: #fff;
      font: 800 1.3rem var(--mono);
      box-shadow: 0 10px 24px rgba(15, 40, 42, .16)
    }

    .pillars-stack {
      display: grid;
      gap: 32px
    }

    .pillar-block {
      width: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 32px 36px;
      box-shadow: 0 8px 30px rgba(15, 40, 42, .045)
    }

    .pillar-head {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 20px
    }

    .pillar-number {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--teal), var(--violet));
      color: #fff;
      display: grid;
      place-items: center;
      font: 800 .85rem var(--mono)
    }

    .pillar-head h3 {
      font-size: 1.08rem;
      line-height: 1.3
    }

    .pillar-features {
      list-style: none;
      display: grid;
      gap: 11px;
      margin-bottom: 22px
    }

    .pillar-features li {
      position: relative;
      padding-left: 20px;
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.5
    }

    .pillar-features li:before {
      content: "→";
      position: absolute;
      left: 0;
      color: #087f7a;
      font-weight: 900
    }

    /* <details> nativo, mas sem o estilo global de "card branco" (definido
       mais abaixo em `details{}` pro FAQ) — aqui é só uma seção recolhível
       dentro do card do pillar, não um componente novo. */
    .pillar-scenarios {
      background: none;
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      padding: 20px 0 0;
      border-top: 1px dashed var(--line)
    }

    /* `summary{display:block}` tira o `display:list-item` nativo, então
       `::marker` não tem efeito — o triângulo é feito à mão com `::before`
       (mais confiável entre navegadores do que brigar com o marcador nativo). */
    .pillar-scenarios summary {
      display: block;
      list-style: none;
      margin-bottom: 11px;
      font: 700 .68rem var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #087f7a
    }

    .pillar-scenarios summary::-webkit-details-marker {
      display: none
    }

    .pillar-scenarios summary::before {
      content: "▸ "
    }

    .pillar-scenarios[open] summary::before {
      content: "▾ "
    }

    .pillar-scenarios ol {
      display: grid;
      gap: 8px;
      padding-left: 18px;
      margin-top: 11px;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.5
    }

    .pillar-cta {
      margin-top: 22px;
      padding: 9px 16px;
      font-size: .8rem
    }

    .pillar-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 12px;
      border: 1px solid var(--line)
    }

    .pillar-image-small {
      width: 420px;
      max-width: 100%
    }

    .stack-intro {
      padding: 48px 0
    }

    .stack-intro-grid {
      display: flex;
      align-items: center;
      gap: 40px
    }

    .stack-intro-image {
      display: block;
      width: 220px;
      max-width: 40%;
      height: auto;
      border-radius: 12px;
      border: 1px solid var(--line);
      flex-shrink: 0
    }

    .stack-intro-text .lead {
      margin-top: 8px
    }

    /* Cards 01-03: linha 1 com texto + conceito lado a lado; linha 2 com
       o gif ("Na Prática") ocupando a largura inteira do card — o gif
       deixa de disputar espaço com a imagem conceitual numa coluna. */
    .pillar-block.pillar-split {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      grid-template-areas:
        "text    concept"
        "practice practice";
      column-gap: 40px;
      row-gap: 32px;
      align-items: start
    }

    .pillar-text {
      grid-area: text
    }

    .pillar-image-item-concept {
      grid-area: concept
    }

    .pillar-image-item-practice {
      grid-area: practice
    }

    /* Card 04: não tem gif — só o infográfico, que reaproveita a área
       "practice" (linha 2, largura maior) pra ficar legível. Texto ocupa
       a linha 1 inteira, já que não há imagem conceitual pra dividir com. */
    .pillar-split-reverse {
      grid-template-columns: 1fr;
      grid-template-areas:
        "text"
        "practice"
    }

    .pillar-split-reverse .pillar-image-item-concept {
      grid-area: practice
    }

    .pillar-split .pillar-image {
      width: 100%;
      height: 100%;
      min-height: 320px;
      object-fit: contain
    }

    /* Cada visual usa width:100% + height:auto, respeitando a proporção
       real do arquivo — nada de height fixo. O Conceito (3:2) e o
       infográfico do card 04 (também 3:2) ganham um teto de largura pra
       não ficarem altos demais; o gif ("Na Prática") ocupa quase toda a
       largura da linha 2, que é bem mais larga que uma coluna. */
    .pillar-image-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0
    }

    .pillar-image-item .pillar-image-zoom {
      display: block;
      width: 100%;
      height: auto
    }

    .pillar-image-item-concept .pillar-image-zoom {
      max-width: 460px;
      margin-inline: auto
    }

    .pillar-image-item-practice .pillar-image-zoom {
      max-width: 1040px;
      margin-inline: auto
    }

    /* Card 04: infográfico mais denso — mais largo que o Conceito comum
       (460px), mas sem ir aos ~1108px inteiros da linha 2, senão o card
       fica desproporcionalmente mais alto que os outros três. */
    .pillar-split-reverse .pillar-image-item-concept .pillar-image-zoom {
      max-width: 820px
    }

    .pillar-image-item .pillar-image-zoom .pillar-image {
      width: 100%;
      height: auto;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 6px 20px rgba(15, 40, 42, .05)
    }

    .pillar-image-caption {
      margin-top: 6px;
      font: 700 .72rem var(--sans);
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center
    }

    /* "Ver na Prática" fica ACIMA do gif (com o divisor tracejado antes
       dele), não abaixo — só inverte a ordem visual via flex `order`,
       sem mudar a ordem no HTML/leitura de tela. */
    .pillar-image-item-practice .pillar-image-caption {
      order: -1;
      margin-top: 0;
      margin-bottom: 10px;
      padding-top: 12px;
      border-top: 1px dashed var(--line)
    }

    .pillar-image-zoom {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: none;
      background: none;
      cursor: zoom-in
    }

    /* Envolve só o botão de zoom (não a legenda) pra o botão de reiniciar
       poder ficar posicionado sobre o gif, fora do lightbox. Mesmo visual
       do ".docs-gif-restart" já usado nas páginas de documentação. */
    .pillar-gif-wrap {
      position: relative
    }

    .pillar-gif-restart {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .92);
      color: var(--ink);
      font-size: 17px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(13, 40, 42, .18);
      transition: transform .15s ease, background .15s ease
    }

    .pillar-gif-restart:hover {
      background: #fff;
      transform: scale(1.08)
    }

    .pillar-gif-restart:active {
      transform: scale(.95)
    }

    .pillar-image-zoom-hint {
      position: absolute;
      inset: auto 0 12px 0;
      margin: 0 auto;
      width: fit-content;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(17, 17, 17, .78);
      color: #fff;
      font: 700 .74rem var(--sans);
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none
    }

    .pillar-image-zoom:hover .pillar-image-zoom-hint,
    .pillar-image-zoom:focus-visible .pillar-image-zoom-hint {
      opacity: 1
    }

    .gif-lightbox {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
      background: rgba(10, 14, 15, .88);
      z-index: 999
    }

    .gif-lightbox.is-open {
      display: flex
    }

    .gif-lightbox-image {
      max-width: 100%;
      max-height: 100%;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
    }

    .gif-lightbox-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer
    }

    .gif-lightbox-close:hover {
      background: rgba(255, 255, 255, .22)
    }

    .gif-lightbox-restart {
      position: absolute;
      top: 20px;
      left: 24px;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.3rem;
      line-height: 1;
      cursor: pointer
    }

    .gif-lightbox-restart:hover {
      background: rgba(255, 255, 255, .22)
    }

    .demo-card-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 14px;
      font: 700 .78rem var(--sans);
      color: var(--teal)
    }

    .demo-card-link:hover {
      text-decoration: underline
    }

    .dark {
      background: var(--dark);
      color: #f5fbfb
    }

    .dark .eyebrow {
      color: #6ee7df
    }

    .dark .eyebrow:before {
      background: linear-gradient(90deg, #45c9bf, #9a7be8)
    }

    .dark .lead,
    .dark .muted {
      color: #a9bbbd
    }

    .dark .demo-card {
      background: var(--dark2);
      border-color: #26383b
    }

    .dark .demo-body p,
    .dark .mini {
      color: #a9bbbd
    }

    .dark .gif-slot {
      border-color: #3b5356;
      background: linear-gradient(145deg, #17292c, #211f32)
    }

    .dark .gif-slot .label {
      color: #a9bbbd
    }

    .dark .gif-slot .label strong {
      color: #edf7f7
    }

    .ci-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-top: 30px
    }

    .ci-step {
      padding: 19px 10px;
      text-align: center;
      border: 1px solid #2b4144;
      background: #132124;
      border-radius: 15px;
      font: 700 .7rem var(--mono);
      color: #b6c8c9
    }

    .ci-step-icon {
      width: 30px;
      height: 30px;
      margin: 0 auto 10px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(110,231,223,.1);
      border: 1px solid rgba(110,231,223,.3);
      color: #6ee7df;
      font: 800 .85rem var(--mono)
    }

    .ci-step b {
      display: block;
      color: #6ee7df;
      font: 850 1.25rem var(--sans);
      margin-bottom: 5px
    }

    .ci-step.active {
      border-color: #5f83d8;
      background: #17263a;
      color: #fff
    }

    .ci-step.active .ci-step-icon {
      background: linear-gradient(135deg, #00d2ff, #3a7bd5);
      border-color: transparent;
      color: #071013;
      box-shadow: 0 6px 16px rgba(0,210,255,.3)
    }

    .callout {
      margin-top: 23px;
      padding: 18px 20px;
      border-radius: 14px;
      background: #f3f8f8;
      border: 1px solid #d7e5e5;
      color: #536668
    }

    .dark .callout {
      background: #17272a;
      border-color: #294044;
      color: #b6c8c9
    }

    /* Destaque tipo "warning" discreto (amarelo/âmbar) — chama atenção
       para o ponto de segurança sem soar como um alerta de erro. */
    .callout.security {
      background: #fdf6e0;
      border-color: #ecd99e;
      color: #6b551c
    }

    .callout.security strong {
      color: #8a6a10
    }

    /* Mesmo espírito do .callout.security (reforço positivo), mas sobre
       qualidade em vez de segurança — cor diferente pra não confundir os
       dois assuntos quando aparecem em sequência na página. */
    .callout.quality {
      background: #eef5fd;
      border-color: #c9dcf5;
      color: #33547a
    }

    .callout.quality strong {
      color: #204a87
    }

    /* Callouts genéricos para os tutoriais da documentação: "dica" (reforço
       amigável, verde) e "atenção" (mesmo tom âmbar do .callout.security,
       mas com nome de classe neutro pra usar fora do contexto de segurança). */
    .callout.tip {
      background: #eef7f5;
      border-color: #bfe2d8;
      color: #2f6b5c
    }

    .callout.tip strong {
      color: #0f6b52
    }

    .callout.warning {
      background: #fdf6e0;
      border-color: #ecd99e;
      color: #6b551c
    }

    .callout.warning strong {
      color: #8a6a10
    }

    .cap-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px
    }

    .cap {
      padding: 22px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 18px
    }

    .cap strong {
      display: block;
      margin: 8px 0 5px
    }

    .cap p {
      font-size: .86rem;
      color: var(--muted)
    }

    .feature {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
      margin-top: 55px
    }

    .feature.reverse .feature-copy {
      order: 2
    }

    .feature h3 {
      font-size: 2rem;
      margin: 10px 0 13px
    }

    .feature-visual {
      min-height: 300px;
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(145deg, #edf8f8, #f6f1fd);
      border: 1px solid var(--line);
      display: grid;
      place-items: center
    }

    .mock {
      width: 100%;
      max-width: 470px;
      background: #fff;
      border: 1px solid #d7e3e3;
      border-radius: 15px;
      padding: 17px;
      box-shadow: var(--shadow)
    }

    .mockbar {
      height: 9px;
      width: 45%;
      background: #dbe7e7;
      border-radius: 10px;
      margin-bottom: 15px
    }

    .mockrow {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #edf2f2;
      font-size: .76rem
    }

    .mockrow:last-child {
      border: 0
    }

    .mockrow b {
      font: 700 .67rem var(--mono);
      color: #167e79
    }

    .profiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 13px
    }

    .profile {
      padding: 21px;
      border: 1px solid #2a3d40;
      border-radius: 17px;
      background: #132124
    }

    .profile strong {
      display: block;
      margin-bottom: 6px
    }

    .profile p {
      font-size: .85rem;
      color: #a9bbbd
    }

    .recipes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .recipe {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 19px;
      padding: 24px
    }

    .recipe h3 {
      margin: 8px 0
    }

    .recipe p {
      font-size: .9rem;
      color: var(--muted)
    }

    .recipe .stack {
      margin-top: 14px;
      font: 700 .64rem var(--mono);
      color: #687a7c;
      line-height: 1.8
    }

    .doc {
      background: linear-gradient(135deg, #f9ffff, #edf7f7 55%, #f4effc)
    }

    .doc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px
    }

    .doc-card {
      padding: 28px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 21px;
      box-shadow: 0 8px 30px rgba(15, 40, 42, .04)
    }

    .doc-card ul {
      list-style: none;
      margin-top: 16px;
      display: grid;
      gap: 8px
    }

    .doc-card li:before {
      content: "→";
      color: #087f7a;
      font-weight: 900;
      margin-right: 8px
    }

    .pricing {
      background: #f5fafa
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 18px
    }

    .plan {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 23px;
      padding: 29px;
      box-shadow: var(--shadow)
    }

    .plan.pro {
      border: 2px solid #5d5ad4;
      position: relative
    }

    .badge {
      position: absolute;
      right: 21px;
      top: 20px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eeeafe;
      color: #624fc7;
      font: 800 .65rem var(--mono)
    }

    .price {
      font-size: 2.7rem;
      font-weight: 850;
      margin: 12px 0 3px
    }

    .price small {
      font-size: .95rem;
      color: var(--muted);
      font-weight: 500
    }

    .plan ul {
      list-style: none;
      margin: 20px 0;
      display: grid;
      gap: 9px
    }

    .plan li:before {
      content: "✓";
      color: var(--green);
      font-weight: 900;
      margin-right: 8px
    }

    .plan .disabled {
      color: #99a6a8
    }

    .plan .disabled:before {
      content: "—";
      color: #99a6a8
    }

    .trial {
      margin-top: 13px;
      color: #624fc7;
      font-weight: 800;
      font-size: .86rem
    }

    .trial-details {
      margin-top: 6px;
      color: var(--muted);
      font-weight: 400;
      font-size: .78rem;
      line-height: 1.5
    }

    .faq {
      max-width: 860px;
      margin: auto
    }

    details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 17px 19px;
      margin-bottom: 9px
    }

    summary {
      cursor: pointer;
      font-weight: 800
    }

    details p {
      padding-top: 10px;
      color: var(--muted);
      font-size: .92rem
    }

    .final {
      padding: 105px 0;
      background: radial-gradient(circle at 20% 25%, rgba(52, 189, 179, .18), transparent 30%), radial-gradient(circle at 80% 65%, rgba(123, 92, 216, .2), transparent 33%), #101a1c;
      color: #fff;
      text-align: center
    }

    .final h2 {
      margin: auto
    }

    .final .lead {
      margin: 18px auto 27px;
      color: #afc0c2
    }

    footer {
      padding: 30px 0;
      background: #0b1214;
      color: #899b9d;
      font-size: .8rem
    }

    footer .inner {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap
    }

    footer strong {
      color: #fff
    }

    footer a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px
    }

    footer a:hover {
      color: #fff
    }

    .reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: .7s ease
    }

    .reveal.show {
      opacity: 1;
      transform: none
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .menu-toggle,
    .mobile-menu {
      display: none
    }

    @media(max-width:950px) {
      .navlinks {
        display: none
      }

      /* Mobile: 1 coluna, sempre texto → conceito → prática nos 4 cards
         (grid-template-areas já resolve a ordem, sem precisar de `order`). */
      .pillar-block.pillar-split {
        grid-template-columns: 1fr;
        grid-template-areas:
          "text"
          "concept"
          "practice"
      }

      .pillar-split-reverse {
        grid-template-areas:
          "text"
          "practice"
      }

      .pillar-split .pillar-image {
        height: auto;
        min-height: 0;
        object-fit: initial
      }

      .stack-intro-grid {
        flex-direction: column;
        text-align: center
      }

      .stack-intro-image {
        max-width: 60%
      }

      .terminal-hero,
      .split,
      .feature,
      .pricing-grid,
      .doc-grid {
        grid-template-columns: 1fr
      }

      .feature.reverse .feature-copy {
        order: 0
      }

      .demo-grid,
      .recipes {
        grid-template-columns: 1fr 1fr
      }

      .cap-grid,
      .profiles {
        grid-template-columns: 1fr 1fr
      }

      .ci-flow {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:620px) {
      section {
        padding: 64px 0
      }

      .container {
        width: calc(100% - 28px);
        max-width: none
      }

      .pillar-block {
        padding: 20px 16px
      }

      .pillar-head {
        gap: 12px
      }

      nav .inner {
        height: 64px
      }

      .brand {
        gap: 8px;
        font-size: 1.1rem
      }

      .brand-logo {
        width: 34px;
        height: 34px
      }

      .nav-cta {
        width: auto !important;
        min-height: 40px;
        padding: 10px 13px;
        border-radius: 10px;
        font-size: .72rem;
        white-space: nowrap
      }

      .menu-toggle {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid #d7e2e2;
        border-radius: 10px;
        background: #fff;
        color: #102022;
        font-size: 1.05rem;
        cursor: pointer
      }

      .mobile-menu {
        display: none;
        position: absolute;
        left: 14px;
        right: 14px;
        top: 70px;
        padding: 9px;
        background: rgba(255, 255, 255, .97);
        border: 1px solid #dce8e8;
        border-radius: 15px;
        box-shadow: 0 18px 45px rgba(13, 40, 42, .14);
        z-index: 60
      }

      .mobile-menu.open {
        display: grid
      }

      .mobile-menu a {
        padding: 12px 13px;
        border-radius: 9px;
        color: #44575a;
        font-weight: 700;
        font-size: .9rem
      }

      .mobile-menu a:hover {
        background: #eef8f8;
        color: #087f7a
      }

      .hero {
        padding: 58px 0 55px
      }

      .hero h1 {
        font-size: clamp(2.65rem, 12vw, 3.45rem);
        line-height: 1.02;
        letter-spacing: -.055em
      }

      .hero .lead {
        font-size: 1rem;
        line-height: 1.65
      }

      .hero .btns {
        display: grid;
        grid-template-columns: 1fr
      }

      .hero .btns .btn {
        width: 100%
      }

      .docker-required {
        margin-top: 4px;
        font-size: .7rem;
        align-items: flex-start
      }

      .docker-required span {
        margin-top: 1px
      }

      .micro {
        gap: 9px 13px;
        font-size: .64rem
      }

      .terminal-hero {
        margin-top: 38px;
        gap: 14px
      }

      .terminal,
      .vs-card {
        border-radius: 14px
      }

      .term-body {
        padding: 16px;
        font-size: .66rem;
        line-height: 1.85;
        overflow-x: auto
      }

      .vs-card {
        padding: 16px
      }

      .vs-tree {
        font-size: .67rem
      }

      .vs-row {
        padding: 7px 8px
      }

      h2 {
        font-size: clamp(2.1rem, 10vw, 3rem)
      }

      .lead {
        font-size: 1rem
      }

      .section-head {
        margin-bottom: 30px
      }

      .demo-grid,
      .recipes,
      .cap-grid,
      .profiles,
      .ci-flow {
        grid-template-columns: 1fr
      }

      .gif-slot {
        height: 205px
      }

      .feature {
        gap: 25px;
        margin-top: 38px
      }

      .feature h3 {
        font-size: 1.75rem
      }

      .feature-visual {
        min-height: 240px
      }

      .mock {
        max-width: 100%
      }

      .pricing-grid {
        gap: 14px
      }

      .plan {
        padding: 23px;
        border-radius: 18px
      }

      .price {
        font-size: 2.35rem
      }

      .plan .btn {
        width: 100%
      }

      .doc-card {
        padding: 23px
      }

      .final {
        padding: 78px 0
      }

      .final h2 {
        font-size: 2.3rem
      }

      footer .inner {
        display: grid;
        gap: 8px
      }
    }

    @media(max-width:380px) {
      .brand span:last-child {
        display: none
      }

      .nav-cta {
        padding-inline: 11px;
        font-size: .68rem
      }

      .menu-toggle {
        width: 38px
      }

      .hero h1 {
        font-size: 2.55rem
      }

      .container {
        width: calc(100% - 24px)
      }
    }

    .docker-requirement {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px auto 0;
      max-width: 900px;
      padding: 12px 16px;
      border: 1px solid rgba(8, 127, 122, .22);
      border-radius: 14px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 8px 24px rgba(24, 34, 44, .06);
      font-size: .86rem;
      line-height: 1.45;
      color: #33404a
    }

    .docker-requirement strong {
      font: 800 .7rem var(--mono);
      letter-spacing: .08em;
      color: #087f7a;
      white-space: nowrap
    }

    .docker-requirement span {
      color: #58636c
    }

    @media(max-width:720px) {
      .docker-requirement {
        display: block;
        text-align: center
      }

      .docker-requirement strong {
        display: block;
        margin-bottom: 4px
      }
    }

    .docs-page {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      line-height: 1.6
    }

    .docs-page .docs-v6-header {
      background: #f7fbfb;
      border-bottom: 1px solid #d8e3e3;
      position: sticky;
      top: 0;
      z-index: 100
    }

    .docs-page .docs-v6-header .container {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    .docs-page .docs-v6-header .inner {
      min-height: 74px;
      display: flex;
      align-items: center;
      gap: 24px
    }

    .docs-page .docs-v6-header .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 220px;
      text-decoration: none;
      color: #0b1517;
      font-family: var(--sans);
      font-weight: 800
    }

    .docs-page .docs-v6-header .brand-logo {
      display: block;
      width: 36px;
      height: 36px;
      object-fit: contain;
      flex: 0 0 36px
    }

    .docs-page .docs-v6-header .brand span {
      font-size: 19px;
      line-height: 1;
      letter-spacing: -.005em
    }

    .docs-page .docs-v6-header .navlinks {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
      flex: 1
    }

    .docs-page .docs-v6-header .navlinks a {
      font-family: var(--sans);
      font-size: 13px;
      color: #4d5b5e;
      text-decoration: none;
      white-space: nowrap
    }

    .docs-page .docs-v6-header .navlinks a:hover {
      color: #0b1517
    }

    .docs-page .docs-v6-header .navlinks a.documentation-link {
      color: #0b1517;
      font-weight: 800
    }

    .docs-page .docs-v6-header .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .docs-page .docs-v6-header .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 158px;
      height: 54px;
      border-radius: 14px;
      background: #0b1517;
      color: #fff;
      text-decoration: none;
      font-family: var(--sans);
      font-weight: 800;
      font-size: 14px
    }

    .docs-page .docs-v6-header .menu-toggle {
      display: none
    }

    .docs-page .docs-v6-header .mobile-menu {
      display: none
    }

    /* Abaixo de 950px o ".navlinks" já some (regra global); aqui aparece
       o botão + o painel, mesmo padrão visual do menu mobile da landing,
       só que na paleta clara do header de docs. */
    @media (max-width: 950px) {
      .docs-page .docs-v6-header .menu-toggle {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid #d7e2e2;
        border-radius: 10px;
        background: #fff;
        color: #102022;
        font-size: 1.05rem;
        cursor: pointer
      }

      .docs-page .docs-v6-header .mobile-menu {
        position: absolute;
        left: 14px;
        right: 14px;
        top: 70px;
        padding: 9px;
        background: rgba(255, 255, 255, .97);
        border: 1px solid #dce8e8;
        border-radius: 15px;
        box-shadow: 0 18px 45px rgba(13, 40, 42, .14);
        z-index: 60
      }

      .docs-page .docs-v6-header .mobile-menu.open {
        display: grid
      }

      .docs-page .docs-v6-header .mobile-menu a {
        display: block;
        padding: 12px 13px;
        border-radius: 9px;
        color: #44575a;
        font-weight: 700;
        font-size: .9rem
      }

      .docs-page .docs-v6-header .mobile-menu a:hover {
        background: #eef8f8;
        color: #087f7a
      }

      .docs-page .docs-v6-header .brand span {
        display: none
      }
    }

    .docs-page .docs-hero {
      padding: 82px 0 48px;
      border-bottom: 1px solid var(--line);
      background: var(--bg)
    }

    .docs-page .docs-hero .container {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    .docs-page .docs-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font: 700 .73rem var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #087f7a
    }

    .docs-page .docs-eyebrow:before {
      content: "";
      width: 21px;
      height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--violet));
      border-radius: 4px
    }

    .docs-page .docs-hero h1 {
      font-family: var(--sans);
      color: var(--ink);
      font-size: clamp(3rem, 5.5vw, 5rem);
      line-height: 1.06;
      letter-spacing: -.04em;
      margin: 10px 0 0
    }

    .docs-page .docs-layout {
      width: min(1180px, calc(100% - 40px));
      margin: auto;
      padding: 54px 0 90px;
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
      gap: 48px
    }

    .docs-page .docs-toc {
      position: sticky;
      top: 92px;
      height: max-content;
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: 14px;
      padding: 15px;
      box-shadow: 0 10px 30px rgba(13, 40, 42, .05)
    }

    .docs-page .docs-toc-title {
      font: 700 .68rem var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 2px 8px 10px
    }

    .docs-page .docs-toc a {
      display: block;
      padding: 8px;
      border-radius: 8px;
      font: 600 .78rem var(--sans);
      color: var(--muted)
    }

    .docs-page .docs-toc a:hover,
    .docs-page .docs-toc a.active {
      background: #eef7f7;
      color: var(--teal)
    }

    .docs-page .docs-main {
      min-width: 0
    }

    .docs-page .docs-main h2 {
      font-family: var(--sans);
      font-size: clamp(1.7rem, 3vw, 2.5rem);
      line-height: 1.08;
      letter-spacing: -.04em;
      color: var(--ink);
      margin: 0 0 12px
    }

    .docs-page .docs-main section {
      padding: 0 0 46px;
      margin: 0 0 42px;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 90px
    }

    .docs-page .docs-main p {
      font-family: var(--sans);
      font-size: 1rem;
      color: var(--muted);
      max-width: 780px
    }

    .docs-page .docs-main ul,
    .docs-page .docs-main ol {
      list-style: none;
      counter-reset: docs-ol;
      margin: 12px 0 22px;
      max-width: 780px;
      display: grid;
      gap: 8px
    }

    .docs-page .docs-main li {
      position: relative;
      padding-left: 24px;
      font-family: var(--sans);
      font-size: 1rem;
      line-height: 1.55;
      color: var(--muted)
    }

    .docs-page .docs-main ul li:before {
      content: "→";
      position: absolute;
      left: 0;
      color: #087f7a;
      font-weight: 900
    }

    .docs-page .docs-main ol li {
      counter-increment: docs-ol
    }

    .docs-page .docs-main ol li:before {
      content: counter(docs-ol) ".";
      position: absolute;
      left: 0;
      color: #087f7a;
      font-weight: 700
    }

    .docs-page .docs-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px
    }

    .docs-page .docs-card {
      display: block;
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: 14px;
      padding: 20px;
      box-shadow: 0 8px 24px rgba(13, 40, 42, .04);
      transition: .2s
    }

    .docs-page .docs-card:hover {
      transform: translateY(-2px);
      border-color: #a9cccc;
      box-shadow: var(--shadow)
    }

    /* Destaca os 3 itens que correspondem ao "Top 3" da home
       (recursos-estrategicos): App/Dev, Esteira e Analista. */
    .docs-page .docs-card.is-top3 {
      position: relative;
      border-color: #b8a8ef;
      background: linear-gradient(165deg, #f6f3ff, #fff 45%);
      box-shadow: 0 10px 28px rgba(98, 79, 199, .13)
    }

    .docs-page .docs-card.is-top3:hover {
      border-color: #8f7be0
    }

    .docs-card-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--teal), var(--violet));
      color: #fff;
      font: 800 .62rem var(--mono);
      letter-spacing: .04em
    }

    .docs-page .docs-card .n {
      font: 700 .68rem var(--mono);
      color: var(--teal);
      letter-spacing: .08em
    }

    .docs-page .docs-card h3 {
      font-family: var(--sans);
      font-size: 1.18rem;
      color: var(--ink);
      margin: 8px 0 5px
    }

    .docs-page .docs-card p {
      font-size: .88rem;
      margin: 0
    }

    .docs-page .docs-footer {
      border-top: 1px solid var(--line);
      padding: 28px 0;
      color: var(--muted);
      font-size: .8rem;
      background: var(--bg2)
    }

    .docs-page .docs-footer-inner {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    @media(max-width:900px) {
      .docs-page .docs-v6-header .container {
        width: min(100% - 32px, 1180px)
      }

      .docs-page .docs-v6-header .navlinks {
        gap: 14px
      }

      .docs-page .docs-v6-header .brand {
        min-width: auto
      }
    }

    @media(max-width:720px) {
      .docs-page .docs-v6-header .navlinks {
        display: none
      }

      .docs-page .docs-v6-header .nav-cta {
        min-width: 128px;
        height: 46px
      }

      .docs-page .docs-hero {
        padding: 58px 0 38px
      }

      .docs-page .docs-layout {
        grid-template-columns: 1fr;
        width: min(100% - 36px, 1180px);
        padding: 34px 0 60px
      }

      .docs-page .docs-toc {
        position: static
      }

      .docs-page .docs-grid {
        grid-template-columns: 1fr
      }

      .docs-page .docs-footer-inner {
        width: min(100% - 36px, 1180px)
      }
    }
  


/* --- GIFs de demonstração (docs/*.html) --- */

/* GIFs de demonstração nas páginas de documentação (docs/*.html).
   Extraído do <style> inline duplicado em cada página — configuracao.html
   estava sem o bloco ".docs-gif img", causando corte (overflow:hidden do
   container recortando a imagem no tamanho nativo em vez de escalar). */
.docs-gif {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

/* Botão "reiniciar" injetado via assets/js/docs-gif-restart.js — recarrega
   só o GIF daquele card, sem afetar os demais nem a página. */
.docs-gif-restart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 40, 42, .18);
  transition: transform .15s ease, background .15s ease;
}

.docs-gif-restart:hover {
  background: #fff;
  transform: scale(1.08);
}

.docs-gif-restart:active {
  transform: scale(.95);
}

.docs-gif img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.docs-page .docs-gif {
  border: 1px dashed #b8cece;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  margin: 22px 0 30px;
}

.docs-page .docs-gif-placeholder {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .8rem;
}

.docs-page .docs-gif-caption {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}

/* Gravações estreitas (ex.: painel de extensões do VS Code) esticadas a
   100% da coluna de conteúdo ficam gigantes e borradas — ".compact" limita
   a largura ao tamanho real da gravação e centraliza. */
.docs-page .docs-gif.compact {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Mesma lógica para .screenshot-frame: um print pequeno (ex.: só um menu)
   não deve esticar pra 100% da coluna de conteúdo. */
.docs-page .screenshot-frame.compact {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* Mini-diagrama de rede (docs/como-funciona.html) — visualiza "app fala
   com cada serviço pelo nome" em vez de só descrever isso em texto. */
.docs-page .docs-net {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.docs-page .docs-net-pill {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 .72rem var(--mono);
  color: var(--ink);
  background: #f6fbfb;
}

.docs-page .docs-net-arrow {
  color: var(--teal);
  font-weight: 700;
}


/* --- Link "Voltar" no topo da sidebar de doc --- */

/* Link "Voltar" no topo da sidebar de cada página de documentação —
   sem ele, a única forma de sair de uma subpágina era o botão Voltar
   do navegador ou o menu superior (que sempre leva pro topo do site). */
.docs-back {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font: 700 .78rem var(--sans);
  color: var(--muted);
}

.docs-back:hover {
  color: var(--teal);
}


/* --- Bloco de código copiável (docs/email.html) --- */

.docs-page .code-block {
      margin: 22px 0 30px;
      border-radius: 12px;
      overflow: hidden;
      background: var(--dark2);
      border: 1px solid #26383b
    }

    .docs-page .code-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: var(--dark);
      color: #a9bbbd;
      font: 700 .68rem var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .docs-page .code-header button {
      border: 1px solid #3b5356;
      background: transparent;
      color: #e8f2f2;
      font: 700 .68rem var(--mono);
      padding: 5px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: .2s
    }

    .docs-page .code-header button:hover {
      background: #1d3033
    }

    .docs-page .code-block pre {
      margin: 0;
      padding: 16px;
      overflow-x: auto
    }

    .docs-page .code-block code {
      font: 400 .82rem/1.55 var(--mono);
      color: #e8f2f2;
      white-space: pre
    }


/* --- Placeholder "em breve" (docs/analista.html) --- */

.docs-gif.coming-soon {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            rgba(0, 160, 150, 0.04),
            rgba(110, 70, 220, 0.06)
        );
    border: 1px dashed #b8cece;
}

.coming-soon-content {
    text-align: center;
    padding: 30px;
}

.coming-soon-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--violet));
    color: white;
    font-size: 16px;
}

.coming-soon-label {
    display: block;
    margin-bottom: 7px;
    font: 700 11px var(--mono);
    letter-spacing: .12em;
    color: var(--teal);
}

.coming-soon-content strong {
    display: block;
    font: 700 18px var(--sans);
    color: var(--ink);
}

.coming-soon-content p {
    max-width: 420px;
    margin: 8px auto 0;
    font-size: 13px;
    color: var(--muted);
}


/* ==========================================================================
   StackPronta — Hero visual inspirado no landing.html
   Somente o HERO recebe a linguagem escura/gradient do landing.
   ========================================================================== */
:root {
  --hero-bg-1: #0f0c29;
  --hero-bg-2: #24243e;
  --hero-bg-3: #203a43;
  --hero-bg-4: #2c5364;
  --hero-accent: #00d2ff;
  --hero-accent-2: #3a7bd5;
  --hero-accent-3: #928dab;
}

.hero-v2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 86px 0 100px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(0,210,255,.15), transparent 25%),
    radial-gradient(circle at 15% 78%, rgba(58,123,213,.16), transparent 27%),
    linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 32%, var(--hero-bg-3) 68%, var(--hero-bg-4) 100%);
}

.hero-v2 .container {
  position: relative;
  z-index: 2;
}

.hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  align-items: center;
  gap: 58px;
}

.hero-v2-copy {
  animation: heroFadeUp .9s .08s cubic-bezier(.22,1,.36,1) both;
}

.hero-v2 .eyebrow {
  color: #67e8e0;
}

.hero-v2 .eyebrow:before {
  background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));
}

.hero-v2 .hero-docker-required {
  margin-top: 2px;
  color: #dbe9eb;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.hero-v2 .hero-docker-required span {
  color: #6ee7df;
}

.hero-v2 h1 {
  font-family: "Sora", var(--sans);
  font-size: clamp(3.15rem, 5.3vw, 5.35rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 720px;
  margin: 0;
}

.hero-v2 .hero-typing {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid var(--hero-accent);
  padding-right: 4px;
  animation:
    heroTyping 2.8s steps(24,end) .45s both,
    heroBlink .72s step-end infinite;
}

.hero-v2 .lead {
  color: rgba(255,255,255,.76);
  max-width: 650px;
  margin: 24px 0 30px;
}

.hero-v2 .lead strong {
  color: #fff;
}

.hero-v2-primary {
  color: #071013;
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  box-shadow: 0 8px 28px rgba(0,210,255,.28);
  font-family: "Sora", var(--sans);
}

.hero-v2-primary:hover {
  box-shadow: 0 14px 36px rgba(0,210,255,.38);
}

.hero-v2-ghost {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}

.hero-v2-ghost:hover {
  border-color: var(--hero-accent);
  background: rgba(255,255,255,.1);
}

.hero-v2 .hero-micro {
  color: rgba(255,255,255,.58);
}

.hero-v2 .hero-micro i {
  background: #42d5c9;
  box-shadow: 0 0 8px rgba(66,213,201,.35);
}

/* Carousel */
.hero-carousel {
  position: relative;
  width: calc(100% - 34px);
  min-width: 0;
  height: 455px;
  animation: heroFadeUp .9s .25s cubic-bezier(.22,1,.36,1) both;
}

.hero-carousel-window {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transform: translateX(34px) scale(.97);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.hero-slide-label {
  margin-bottom: 14px;
  color: rgba(255,255,255,.56);
  font: 700 .67rem var(--mono);
  letter-spacing: .08em;
}

/* Slide com uma imagem real (ex.: infra.png) em vez de terminal/vs-card —
   sem isso a imagem renderiza no tamanho nativo e estoura a moldura do
   slide (.hero-slide já tem padding:30px; a imagem preenche esse espaço
   sem cortar, do mesmo jeito que .hero-terminal/.hero-vs-card preenchem). */
.hero-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.hero-terminal {
  height: calc(100% - 35px);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
}

.hero-terminal .term-body {
  font-size: .75rem;
  line-height: 1.95;
}

.hero-vs-card {
  height: calc(100% - 35px);
  padding: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(240,247,247,.97));
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
}

.hero-vs-card .vs-tree {
  gap: 9px;
}

.hero-vs-card .vs-row {
  padding: 8px 10px;
}

.hero-combined {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  height: calc(100% - 35px);
}

.hero-terminal-small,
.hero-vs-small {
  height: 100%;
  min-width: 0;
}

.hero-terminal-small .term-body {
  padding: 18px;
  font-size: .68rem;
  line-height: 1.9;
}

.hero-vs-small {
  padding: 15px;
}

.hero-vs-small .vs-tree {
  gap: 5px;
  font-size: .68rem;
}

.hero-vs-small .vs-row {
  padding: 6px 7px;
}

.hero-carousel-btn {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(10,18,26,.62);
  color: #fff;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(10px);
  transition: transform .2s, background .2s, border-color .2s;
}

.hero-carousel-btn:hover {
  transform: scale(1.06);
  background: rgba(0,210,255,.18);
  border-color: rgba(0,210,255,.65);
}

.hero-carousel-prev { left: -21px; }
.hero-carousel-next { right: -21px; }

.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.hero-carousel-dots button {
  width: auto;
  height: auto;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.68);
  font: 600 .68rem var(--mono);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.hero-carousel-dots button:hover {
  color: #fff;
  border-color: rgba(255,255,255,.32);
}

.hero-carousel-dots button.is-active {
  color: #071013;
  border-color: transparent;
  background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .32;
  pointer-events: none;
  z-index: 0;
  animation: heroFloat 12s ease-in-out infinite alternate;
}

.hero-blob-1 {
  width: 430px;
  height: 430px;
  background: #00d2ff;
  top: -180px;
  right: -130px;
}

.hero-blob-2 {
  width: 330px;
  height: 330px;
  background: #7655d8;
  bottom: -170px;
  left: 16%;
  animation-delay: -5s;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroTyping {
  from { max-width: 0; }
  to { max-width: 100%; }
}

@keyframes heroBlink {
  50% { border-color: transparent; }
}

@keyframes heroFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(45px) scale(1.08); }
}

/* Documentação: título e sidebar mais equilibrados */
.docs-page .docs-hero {
  padding: 64px 0 42px;
}

.docs-page .docs-hero h1 {
  font-family: var(--sans);
  font-size: clamp(2.8rem, 5vw, 4.55rem);
  line-height: .98;
  letter-spacing: -.055em;
  margin-top: 8px;
  max-width: 900px;
}

.docs-page .docs-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 42px;
}

.docs-page .docs-toc {
  width: 220px;
  max-width: 100%;
}

@media (max-width: 950px) {
  .hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero-v2-copy {
    text-align: center;
  }

  .hero-v2 .lead {
    margin-inline: auto;
  }

  .hero-v2 .btns,
  .hero-v2 .micro {
    justify-content: center;
  }

  .hero-carousel {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .hero-v2 {
    padding: 62px 0 82px;
  }

  .hero-v2 h1 {
    font-size: clamp(2.7rem, 12vw, 3.7rem);
  }

  .hero-v2 .hero-typing {
    white-space: normal;
    border-right-width: 2px;
  }

  .hero-carousel {
    height: 390px;
    width: calc(100% - 22px);
  }

  .hero-slide {
    padding: 0;
    border-radius: 0;
  }

  .hero-terminal .term-body {
    padding: 15px;
    font-size: .63rem;
    overflow-x: auto;
  }

  .hero-carousel-btn {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  .hero-carousel-prev { left: -10px; }
  .hero-carousel-next { right: -10px; }

  .hero-combined {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .hero-vs-small {
    display: none;
  }

  .docs-page .docs-hero {
    padding: 50px 0 34px;
  }

  .docs-page .docs-hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
    line-height: .98;
  }

  .docs-page .docs-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .docs-page .docs-toc {
    width: 100%;
  }
}


/* ==========================================================================
   Ajustes finais de lançamento — tipografia, navbar e seção de recursos
   ========================================================================== */

/* Navbar mais integrada ao hero e com comportamento responsivo */
body > nav:not(.docs-v6-header) {
  background: rgba(15, 12, 41, .82);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body > nav:not(.docs-v6-header) .brand,
body > nav:not(.docs-v6-header) .navlinks {
  color: #fff;
}

body > nav:not(.docs-v6-header) .navlinks a {
  color: rgba(255,255,255,.72);
  transition: color .2s ease, background .2s ease;
}

body > nav:not(.docs-v6-header) .navlinks a:hover {
  color: #fff;
}

body > nav:not(.docs-v6-header) .nav-cta {
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  color: #071013;
  box-shadow: 0 7px 22px rgba(0,210,255,.24);
}

body > nav:not(.docs-v6-header) .menu-toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

/* Hero mais compacto: começa praticamente colado à navbar */
.hero-v2 {
  padding-top: 44px;
  padding-bottom: 78px;
}

.hero-v2 h1 {
  font-size: clamp(2.65rem, 4.55vw, 4.65rem);
  line-height: 1.04;
}

.hero-v2 .lead {
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 610px;
  margin-top: 19px;
  margin-bottom: 25px;
}

.hero-v2 .btn {
  padding: 11px 18px;
  font-size: .88rem;
}

.hero-v2 .hero-micro {
  margin-top: 15px;
  font-size: .68rem;
}

.hero-carousel {
  height: 420px;
}

.hero-slide {
  padding: 0;
}

.hero-slide-label {
  margin-bottom: 11px;
  font-size: .62rem;
}

.hero-terminal .term-body {
  font-size: .68rem;
  line-height: 1.85;
}

/* A seção "Queremos que você veja" passa a usar visuais compactos,
   mais adequados para cards do que GIFs grandes. */
#o-que-faz .section-head h2 {
  font-size: clamp(2rem, 3.7vw, 3.25rem);
}

#recursos-estrategicos .section-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  max-width: none;
}

#o-que-faz .section-head .lead {
  font-size: 1rem;
}

#o-que-faz .demo-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

#o-que-faz .demo-card {
  border-radius: 18px;
}

#o-que-faz .gif-slot.demo-visual {
  height: 150px;
  margin: 12px 12px 0;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 15%, rgba(0,210,255,.13), transparent 32%),
    linear-gradient(145deg, #edf8f8, #f5f1fd);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 22px;
}

#o-que-faz .demo-visual .label {
  width: 100%;
  text-align: left;
  color: #66777a;
}

#o-que-faz .demo-visual .label strong {
  margin: 5px 0 9px;
  color: #0d2528;
  font-size: 1rem;
}

#o-que-faz .demo-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #0e91b8, #7655d8);
  color: #fff;
  font: 800 .92rem var(--mono);
  box-shadow: 0 7px 18px rgba(53,118,212,.18);
}

#o-que-faz .demo-lines {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  height: 27px;
  margin: 0 0 8px;
}

#o-que-faz .demo-lines i {
  display: block;
  width: 9%;
  min-width: 14px;
  height: 12px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #159f99, #8ddad4);
}

#o-que-faz .demo-lines i:nth-child(2) { height: 21px; }
#o-que-faz .demo-lines i:nth-child(3) { height: 16px; }
#o-que-faz .demo-lines i:nth-child(4) { height: 25px; }

#o-que-faz .demo-code,
#o-que-faz .demo-schema,
#o-que-faz .demo-diagram {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  color: #247b86;
  font: 700 .64rem var(--mono);
}

#o-que-faz .demo-diagram {
  position: relative;
  height: 27px;
}

#o-que-faz .demo-diagram i {
  position: absolute;
  width: 30px;
  height: 20px;
  border: 1px solid #6aaeb0;
  border-radius: 5px;
  background: rgba(255,255,255,.7);
}

#o-que-faz .demo-diagram i:nth-child(1) { left: 3%; top: 3px; }
#o-que-faz .demo-diagram i:nth-child(2) { left: 39%; top: 3px; }
#o-que-faz .demo-diagram i:nth-child(3) { right: 3%; top: 3px; }

#o-que-faz .demo-schema {
  display: flex;
  gap: 8px;
  height: 27px;
  align-items: center;
}

#o-que-faz .demo-schema i {
  flex: 1;
  max-width: 72px;
  height: 20px;
  border: 1px solid #8ab7b8;
  border-radius: 5px;
  background: rgba(255,255,255,.72);
}

#o-que-faz .demo-visual code {
  color: #7a8b8d;
  font-size: .58rem;
}

@media (max-width: 950px) {
  .hero-v2 {
    padding-top: 38px;
  }

  #o-que-faz .demo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .hero-v2 {
    padding-top: 30px;
    padding-bottom: 68px;
  }

  .hero-v2 h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
  }

  .hero-v2 .lead {
    font-size: .96rem;
  }

  .hero-carousel {
    height: 365px;
  }

  #o-que-faz .demo-grid {
    grid-template-columns: 1fr;
  }

  #o-que-faz .gif-slot.demo-visual {
    height: 142px;
  }
}

@media (max-width: 620px) {
  body > nav:not(.docs-v6-header) .mobile-menu {
    background: rgba(15,12,41,.97);
    border-color: rgba(255,255,255,.14);
  }

  body > nav:not(.docs-v6-header) .mobile-menu a {
    color: rgba(255,255,255,.78);
  }

  body > nav:not(.docs-v6-header) .mobile-menu a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
}


/* ==========================================================================
   Refinamento final — escala tipográfica e laboratório
   ========================================================================== */
.hero-v2 {
  padding-top: 32px;
  padding-bottom: 68px;
}

.hero-v2 h1 {
  font-size: clamp(2.45rem, 4.05vw, 4.15rem);
  line-height: 1.045;
  letter-spacing: -.052em;
}

.hero-v2 .hero-typing {
  padding-right: 3px;
}

.hero-v2 .lead {
  font-size: 1rem;
  line-height: 1.58;
  margin-top: 16px;
  margin-bottom: 22px;
}

.hero-carousel {
  height: 395px;
}

/* Documentação mais compacta: menos vazio entre header, título e conteúdo. */
.docs-page .docs-hero {
  padding: 20px 0 14px;
}

.docs-page .docs-hero .container {
  width: min(1180px, calc(100% - 40px));
}

.docs-page .docs-hero .eyebrow {
  margin-bottom: 8px;
}

.docs-page .docs-hero h1 {
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 4px 0 0;
}

.docs-page .docs-layout {
  padding-top: 18px;
  padding-bottom: 60px;
  gap: 36px;
}

.docs-page .docs-main h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.docs-page .docs-main section {
  padding-bottom: 34px;
  margin-bottom: 30px;
}

.docs-page .docs-main p {
  font-size: .94rem;
  line-height: 1.6;
}

.docs-page .docs-toc {
  top: 88px;
}

/* Laboratório: substitui GIFs pequenos por conteúdo visual amplo e informativo. */
.laboratory-section {
  padding-top: 82px;
  padding-bottom: 88px;
}

.laboratory-section .section-head h2 {
  font-size: clamp(2rem, 3.55vw, 3.05rem);
  line-height: 1.06;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}

.lab-card {
  position: relative;
  min-height: 285px;
  padding: 23px 20px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

.lab-card:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -85px;
  bottom: -85px;
  border-radius: 50%;
  background: rgba(0,210,255,.10);
  filter: blur(30px);
}

.lab-number {
  position: absolute;
  top: 18px;
  right: 18px;
  font: 700 .62rem var(--mono);
  color: rgba(255,255,255,.32);
}

.lab-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0,210,255,.9), rgba(58,123,213,.9));
  color: #071013;
  font: 800 .9rem var(--mono);
  box-shadow: 0 8px 22px rgba(0,210,255,.16);
}

.lab-card .tag {
  color: #67e8e0;
  margin-bottom: 7px;
}

.lab-card strong {
  display: block;
  color: #fff;
  font-family: "Sora", var(--sans);
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 9px;
}

.lab-card p {
  color: rgba(255,255,255,.66);
  font-size: .83rem;
  line-height: 1.55;
  margin: 0;
}

.lab-meta {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: rgba(255,255,255,.40);
  font: 600 .58rem var(--mono);
  letter-spacing: .04em;
}

.lab-showcase {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

.lab-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  font-size: .72rem;
}

.lab-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.lab-flow > div {
  min-height: 92px;
  padding: 17px 19px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.lab-flow > div:last-child {
  border-right: 0;
}

.lab-flow b {
  display: block;
  color: #67e8e0;
  font: 700 .62rem var(--mono);
  margin-bottom: 6px;
}

.lab-flow span {
  display: block;
  color: #fff;
  font: 700 .86rem var(--sans);
}

.lab-flow small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.43);
  font-size: .67rem;
}

@media (max-width: 1050px) {
  .lab-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .hero-v2 {
    padding-top: 25px;
    padding-bottom: 60px;
  }

  .hero-v2 h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.1rem);
  }

  .hero-carousel {
    height: 355px;
  }

  .docs-page .docs-hero {
    padding: 14px 0 10px;
  }

  .docs-page .docs-layout {
    padding-top: 12px;
    gap: 22px;
  }

  .docs-page .docs-hero h1 {
    font-size: clamp(1.3rem, 6vw, 1.6rem);
  }

  .lab-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .lab-card {
    min-height: 235px;
  }

  .lab-flow {
    grid-template-columns: 1fr;
  }

  .lab-flow > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .lab-flow > div:last-child {
    border-bottom: 0;
  }

  .lab-showcase-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}


/* ==========================================================================
   V17 — correção de clipping e overflow do Hero
   ========================================================================== */
.hero-v2 {
  overflow: hidden;
}

.hero-v2-grid {
  min-width: 0;
}

.hero-v2-safe {
  min-width: 0;
  overflow: visible;
}

.hero-v2-safe h1 {
  max-width: 100%;
  overflow: visible;
  font-size: clamp(2.2rem, 3.7vw, 3.85rem);
  line-height: 1.08;
  padding-bottom: .08em;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-v2 .hero-typing {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  border-right: 3px solid var(--hero-accent);
  animation:
    heroTypingV17 2.8s steps(24,end) .45s both,
    heroBlink .72s step-end infinite;
}

@keyframes heroTypingV17 {
  from { max-width: 0; }
  to { max-width: 100%; }
}

.hero-v2 .hero-docker-compact {
  font-size: .72rem;
  line-height: 1.2;
  padding: 7px 10px;
  min-height: 0;
  width: fit-content;
  max-width: 100%;
}

.hero-v2 .hero-docker-compact span {
  font-size: .62rem;
}

.hero-v2 .hero-micro {
  position: relative;
  z-index: 2;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
}

.hero-carousel {
  min-width: 0;
  overflow: visible;
}

.hero-carousel-window {
  min-width: 0;
  overflow: hidden;
  border-radius: 0;
}

.hero-slide {
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 950px) {
  .hero-v2-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-v2-safe h1 {
    font-size: clamp(2.35rem, 7vw, 3.7rem);
  }
}

@media (max-width: 720px) {
  .hero-v2-safe h1 {
    font-size: clamp(2.15rem, 10vw, 3rem);
    line-height: 1.07;
  }

  .hero-v2 .hero-docker-compact {
    font-size: .67rem;
  }

  .hero-v2 .hero-micro {
    gap: 7px 12px;
  }
}


/* ==========================================================================
   V18 — refinamento final do Hero
   ========================================================================== */

/* A frase de destaque nunca quebra durante a animação.
   A largura do bloco acompanha o texto, evitando o "salto" após o typing. */
.hero-v2-grid {
  grid-template-columns: minmax(480px, .78fr) minmax(520px, 1.22fr);
  gap: 36px;
}

/* Hero um pouco mais largo que o container padrão, para dar mais espaço
   ao carousel do lado direito sem apertar o texto à esquerda. */
.hero-v2 .container.hero-v2-grid {
  width: min(1320px, calc(100% - 24px));
}

.hero-v2-safe h1 {
  font-size: clamp(1.75rem, 2.9vw, 3.65rem);
  line-height: 1.06;
}

.hero-v2 .hero-typing {
  display: block;
  width: fit-content;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid var(--hero-accent);
  animation:
    heroTypingV18 2.8s steps(24, end) .45s both,
    heroBlink .72s step-end infinite;
}

@keyframes heroTypingV18 {
  from { width: 0; }
  to { width: 100%; }
}

/* Badge do Docker bem discreto */
.hero-v2 .hero-docker-compact {
  font-size: .62rem;
  padding: 5px 8px;
  gap: 6px;
  border-radius: 7px;
  letter-spacing: -.01em;
}

.hero-v2 .hero-docker-compact span {
  font-size: .52rem;
}

/* CTA da navbar: menor e perfeitamente centralizado verticalmente */
body > nav:not(.docs-v6-header) {
  align-items: center;
}

body > nav:not(.docs-v6-header) .nav-cta {
  align-self: center;
  padding: 9px 17px;
  min-height: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  border-radius: 12px;
}

/* A navbar não deve criar uma faixa vertical desproporcional */
body > nav:not(.docs-v6-header) {
  min-height: 64px;
}

/* Tablets: mantém o destaque em uma linha enquanto houver espaço. */
@media (max-width: 1100px) and (min-width: 951px) {
  .hero-v2-grid {
    grid-template-columns: minmax(440px, .95fr) minmax(410px, 1.05fr);
    gap: 34px;
  }

  .hero-v2-safe h1 {
    font-size: clamp(2.45rem, 3.5vw, 3.15rem);
  }
}

@media (max-width: 950px) {
  .hero-v2-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-v2-safe h1 {
    font-size: clamp(2.45rem, 7vw, 3.65rem);
  }

  .hero-v2 .hero-typing {
    display: inline-block;
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .hero-v2-safe h1 {
    font-size: clamp(2.15rem, 9.7vw, 3rem);
  }

  .hero-v2 .hero-typing {
    max-width: 100%;
    font-size: clamp(1.75rem, 8.4vw, 2.65rem);
    letter-spacing: -.045em;
  }

  .hero-v2 .hero-docker-compact {
    font-size: .59rem;
    padding: 4px 7px;
  }

  body > nav:not(.docs-v6-header) .nav-cta {
    height: 38px;
    padding: 7px 13px;
    font-size: .72rem;
  }
}

@media (max-width: 370px) {
  .hero-v2 .hero-typing {
    font-size: 1.58rem;
  }
}


/* ==========================================================================
   V20 — Diretórios da home de documentação (Guias/Recursos/Referência)
   Os cards são filhos diretos da seção, portanto a própria seção controla
   a grade. Isso evita que regras antigas de .docs-grid os empilhem.
   ========================================================================== */
.docs-page .docs-main > .docs-directory-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.docs-page .docs-main > .docs-directory-section > h2 {
  grid-column: 1 / -1;
  margin-bottom: 3px;
}

.docs-page .docs-main > .docs-directory-section > .docs-card {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 720px) {
  .docs-page .docs-main > .docs-directory-section {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .docs-page .docs-main > .docs-directory-section > h2 {
    grid-column: 1;
  }
}

/* Acessibilidade: reduz/zera animações e transições para quem prefere
   menos movimento (carrossel do hero, reveals, hovers etc), sem alterar
   layout, espaçamento ou breakpoints. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}