/* ==========================================================================
   Velk - site institucional (home PT)
   BEM · base clara com paineis navy · tokens de marca preservados
   Hanken Grotesk (display) + Inter (texto) + JetBrains Mono (mono)

   Regra de forma: pill 999 interativo · 32 painel de secao · 20 card · 12 interno
   Regra de cor:  violeta #5a4efb e o unico acento da pagina inteira
   ========================================================================== */

:root {
    /* --- Marca (identicos ao site atual) --- */
    --c-violet:      #5a4efb;
    --c-violet-deep: #4a3ee8;
    --c-peri:        #8b83fe;
    --c-peri-soft:   #c9c5ff;
    --c-navy:        #1b1652;
    --c-navy-deep:   #120e3d;
    --c-navy-black:  #0e0b30;
    --c-ok:          #7ee2a8;
    --c-white:       #fff;

    /* --- Superficies: base clara --- */
    --s-page:     #fff;
    --s-tint:     #f3f1ff;
    --s-chip:     #eeecfe;
    --s-ink:      var(--c-navy-deep);
    --s-ink-deep: var(--c-navy-black);

    /* --- Tinta sobre claro --- */
    --t-ink:   #1b1652;
    --t-body:  #4a4670;
    --t-muted: #6d6a8f;

    /* --- Tinta sobre escuro --- */
    --d-hi: #fff;
    --d-1:  rgba(255, 255, 255, .88);
    --d-2:  rgba(255, 255, 255, .66);
    --d-3:  rgba(255, 255, 255, .52);

    /* --- Linhas --- */
    --line:        #e6e3f7;
    --line-strong: #d6d1f5;
    --line-dark:   rgba(139, 131, 254, .20);
    --line-dark-hi:rgba(139, 131, 254, .38);

    /* --- Placeholder de imagem pendente --- */
    --c-ph:     #39ff14;
    --c-ph-alt: #2bdc0d;
    --c-ph-ink: #05170a;

    /* --- Tipografia --- */
    --font-display: 'Hanken Grotesk', 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* --- Forma (lock) --- */
    --r-pill:  999px;
    --r-panel: 32px;
    --r-card:  20px;
    --r-inner: 12px;

    /* --- Sombras tintadas no matiz do fundo --- */
    --sh-card:   0 24px 60px rgba(27, 22, 82, .10);
    --sh-lift:   0 40px 90px rgba(27, 22, 82, .16);
    --sh-deep:   0 44px 100px rgba(6, 4, 26, .55);
    --sh-violet: 0 22px 60px rgba(90, 78, 251, .32);

    --ease:    cubic-bezier(.22, .61, .36, 1);
    --ease-io: cubic-bezier(.16, 1, .3, 1);

    --header-h: 72px;
    /* Barra de afiliado fixa acima do header. --chrome-h e a soma, e e o que
       hero, rails sticky e scroll-padding usam de recuo; --header-h continua
       sendo so a altura do header. Com a barra desligada no painel, o
       header.php emite --topbar-h: 0px e todo o resto volta ao que era. */
    --topbar-h: 38px;
    --chrome-h: calc(var(--topbar-h) + var(--header-h));
    --gutter:   clamp(20px, 4vw, 40px);
    --sp-sec:   clamp(64px, 8vw, 120px);
    --maxw:     1280px;

    /* --- Escala de camadas (documentada, sem z-index solto) --- */
    --z-grain:   60;
    --z-header:  100;
    --z-cursor:  110;
    --z-scrim:   115;
    --z-menu:    120;
    --z-consent: 200;
    --z-skip:    300;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--chrome-h) + 16px);
}

html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* Lenis assume o scroll quando ativo; sem isto o smooth nativo briga com ele. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.62;
    color: var(--t-body);
    background: var(--s-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--t-ink);
    line-height: 1.08;
    letter-spacing: -.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
pre { margin: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--c-violet); color: var(--c-white); }

:focus-visible {
    outline: 3px solid var(--c-violet);
    outline-offset: 3px;
    border-radius: 6px;
}

code { font-family: var(--font-mono); font-size: .88em; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.container--wide { max-width: 1480px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed;
    top: -160px; left: 12px;
    z-index: var(--z-skip);
    padding: 12px 20px;
    background: var(--c-navy-deep);
    color: var(--c-white);
    border-radius: var(--r-inner);
    font-size: 14px; font-weight: 600;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Tipografia de secao
   ========================================================================== */

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-violet);
    margin-bottom: 20px;
}

.eyebrow--onDark  { color: var(--c-peri); }
/* Solido: o gradiente violeta clareia ate #6459fb e qualquer alpha reprova AA. */
.eyebrow--onViolet{ color: var(--c-white); }

.s-title {
    font-size: clamp(34px, 5vw, 74px);
    line-height: .96;
    letter-spacing: -.03em;
    max-width: 18ch;
}

.s-title--onDark, .s-title--onViolet { color: var(--c-white); }

.s-lead {
    margin-top: 24px;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
    color: var(--t-body);
    max-width: 58ch;
}

.s-lead--onDark   { color: var(--d-2); }

/* Chip de codigo sobre escuro: o .s-chip claro some no navy. */
.s-lead--onDark code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(139, 131, 254, .20);
    color: var(--c-peri-soft);
    font-family: var(--font-mono);
    font-size: .9em;
}
.s-lead--onViolet { color: var(--c-white); }

/* Titulo que mora numa coluna, nao sobre o container inteiro: na escala de
   secao (ate 74px) ele enche a coluna de ponta a ponta e o bloco perde o ar. */
.s-title--col {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.02;
}

.s-head { margin-bottom: clamp(48px, 6vw, 88px); }
.s-head--center { text-align: center; }
.s-head--center .s-title { margin-inline: auto; }
.s-head--center .s-lead  { margin-inline: auto; }

/* Palavra individual do split-words: o wrapper mascara, o span sobe. */

/* ==========================================================================
   Grid tecnico - motivo direto dos key visuals
   ========================================================================== */

.techgrid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(90, 78, 251, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 78, 251, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}

.techgrid--onDark {
    background-image:
        linear-gradient(rgba(139, 131, 254, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 131, 254, .10) 1px, transparent 1px);
}

.techgrid--onViolet {
    background-image:
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
    -webkit-mask-image: none;
            mask-image: none;
}

/* ==========================================================================
   Cursor - circulo que segue o mouse. Aditivo: o ponteiro nativo permanece.
   ========================================================================== */

.cursor {
    position: fixed;
    left: 0; top: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 1.5px solid var(--c-violet);
    background: rgba(90, 78, 251, .08);
    box-shadow: 0 0 20px rgba(90, 78, 251, .28);
    opacity: 0;
    will-change: transform;
    transition: opacity .4s var(--ease),
                width .3s var(--ease-io), height .3s var(--ease-io),
                margin .3s var(--ease-io), background .3s var(--ease),
                border-color .3s var(--ease);
}

.cursor.is-on { opacity: 1; }

.cursor.is-hot {
    width: 62px; height: 62px;
    margin: -31px 0 0 -31px;
    border-color: transparent;
    background: rgba(90, 78, 251, .16);
}

.cursor.is-onDark { border-color: var(--c-peri); box-shadow: 0 0 22px rgba(139, 131, 254, .34); }
.cursor.is-onDark.is-hot { border-color: transparent; background: rgba(201, 197, 255, .18); }

@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* ==========================================================================
   Botoes - label-swap no hover (assinatura da referencia master)
   ========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .28s var(--ease), color .28s var(--ease),
                border-color .28s var(--ease), transform .18s var(--ease),
                box-shadow .28s var(--ease);
}

.btn:active { transform: translateY(1px) scale(.99); }

/* Mascara do label duplicado: o de cima sobe, o de baixo entra.
   Altura em 1.5em com line-height casado: em 1.15em o overflow cortava a
   cedilha do 'COMECAR' e as descidas de g/p/q. */
.btn__label {
    position: relative;
    display: block;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5;
}
.btn__label span {
    display: block;
    line-height: 1.5;
    transition: transform .42s var(--ease-io);
}
.btn__label span:last-child {
    position: absolute;
    inset: 0;
    transform: translateY(105%);
}
.btn:hover .btn__label span:first-child { transform: translateY(-105%); }
.btn:hover .btn__label span:last-child   { transform: translateY(0); }

.btn__icon { flex: none; transition: transform .3s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
    background: var(--c-violet);
    color: var(--c-white);
    box-shadow: var(--sh-violet);
}
.btn--primary:hover { background: var(--c-violet-deep); }

.btn--ghost {
    background: transparent;
    color: var(--t-ink);
    border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--c-violet); color: var(--c-violet); }

.btn--onDark { color: var(--d-hi); border-color: var(--line-dark-hi); }
.btn--onDark:hover { border-color: var(--c-peri); color: var(--c-peri); }

.btn--onViolet {
    background: var(--c-white);
    color: var(--c-violet);
    box-shadow: 0 18px 44px rgba(14, 11, 48, .26);
}
.btn--onViolet:hover { background: var(--c-peri-soft); }

/* Par do .btn--onViolet quando as duas acoes tem o mesmo peso (baixar e
   GitHub, no fim da Documentacao). Branco a 72% na borda da 3,2:1 sobre o
   ponto mais claro do gradiente; o rotulo e branco solido, 4,8:1. */
.btn--onVioletGhost {
    background: transparent;
    color: var(--c-white);
    border-color: rgba(255, 255, 255, .72);
}
.btn--onVioletGhost:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-white); }

.btn--sm { height: 42px; padding: 0 18px; font-size: 11.5px; }
.btn--lg { height: 58px; padding: 0 32px; }
.btn--block { width: 100%; }

/* Estado indisponivel, agora dentro do card branco do curso. O atributo
   disabled + not-allowed comunicam a condicao; o texto fica em --t-body
   para passar AA (7.5:1) em vez de virar um cinza ilegivel. */
.btn--soon {
    background: var(--s-chip);
    color: var(--t-body);
    border-color: var(--line-strong);
    box-shadow: none;
    cursor: not-allowed;
}
.btn--soon:hover  { background: var(--s-chip); }
.btn--soon:active { transform: none; }

/* Link de texto com seta */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-violet);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.tlink:hover { border-color: currentColor; gap: 14px; }
.tlink--onDark   { color: var(--c-peri); }
.tlink--onViolet { color: var(--c-white); }

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    position: fixed;
    inset: var(--topbar-h) 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    transition: background .32s var(--ease), border-color .32s var(--ease),
                box-shadow .32s var(--ease);
    border-bottom: 1px solid transparent;
}

/* Faixa solida: sem blur e sem transparencia. O conteudo passa por baixo. */
.header.is-scrolled {
    background: var(--s-page);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 24px rgba(27, 22, 82, .06);
}

.header__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}

.header__logo { flex: none; }
.header__logo img { height: 30px; width: auto; }

.header__spacer { flex: 1; }

/* Centrada no eixo da pagina, nao encostada no logo: a posicao dos links
   nao depende da largura do logo nem do bloco de acoes. */
.nav {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav__link {
    position: relative;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--t-body);
    transition: color .25s var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 1.5px;
    background: var(--c-violet);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease-io);
}
.nav__link:hover { color: var(--t-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--t-ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 14px; }

/* Seletor de idioma */
.lang { position: relative; }

.lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--t-body);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang__toggle:hover { border-color: var(--c-violet); color: var(--c-violet); }
.lang__chev { transition: transform .3s var(--ease); }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 172px;
    padding: 8px;
    background: var(--s-page);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .26s var(--ease), transform .26s var(--ease-io), visibility .26s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-inner);
    font-size: 14px;
    color: var(--t-body);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__item:hover { background: var(--s-tint); color: var(--t-ink); }
.lang__item[aria-current="true"] { color: var(--c-violet); font-weight: 600; }

/* Flex column com gap, nao grid: em grid as tres barras viravam tres faixas
   de 14,7px e o icone abria por todo o botao de 44px. */
.header__toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.4px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0;
}
.header__toggle-bar {
    display: block;
    width: 18px; height: 1.7px;
    margin: 0;
    background: var(--t-ink);
    border-radius: 2px;
    transition: transform .3s var(--ease-io), opacity .2s var(--ease);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* --- Painel do menu mobile ---------------------------------------------- */

/* Cabeca, pe e fundo so existem no painel. No desktop a nav e uma linha de
   quatro links e nada disso aparece. */
.nav__head, .nav__cta, .nav__foot, .nav__scrim { display: none; }

.nav__mark img { height: 34px; width: auto; }

.nav__close {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--t-ink);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.nav__close:hover { border-color: var(--c-violet); color: var(--c-violet); }

/* O mesmo dropdown do desktop, em largura cheia e abrindo para cima: ele mora
   no pe do painel e para baixo nao ha espaco. */
.lang--inNav { margin-top: 14px; }
.lang--inNav .lang__toggle { width: 100%; height: 48px; justify-content: flex-start; gap: 10px; }
.lang--inNav .lang__chev { margin-left: auto; }
.lang--inNav .lang__menu {
    top: auto;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    min-width: 0;
    transform: translateY(6px);
}
.lang--inNav.is-open .lang__menu { transform: translateY(0); }

/* Entre o header e o painel: fecha ao toque fora. Mora dentro do header, que
   e quem cria o contexto de empilhamento dos dois. */
.nav__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(14, 11, 48, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s var(--ease), visibility .34s;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }

.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }

/* ==========================================================================
   Hero - "prompt vivo": uma janela, quatro estados
   ========================================================================== */

.hero {
    position: relative;
    padding-top: calc(var(--chrome-h) + clamp(28px, 4vw, 60px));
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Chevron gigante sangrando pela direita - motivo do KV-1 */
.hero__chevron {
    position: absolute;
    top: -6%;
    right: -14%;
    width: clamp(420px, 52vw, 900px);
    opacity: .07;
    will-change: transform;
}

.hero__aurora {
    position: absolute;
    top: -30%; left: 50%;
    width: 1200px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(90, 78, 251, .16), transparent 72%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    text-align: center;
    display: grid;
    justify-items: center;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-violet);
}

.hero__title {
    margin-top: 18px;
    font-size: clamp(42px, 7vw, 104px);
    line-height: .92;
    letter-spacing: -.035em;
    max-width: 14ch;
}

.hero__lead {
    margin-top: 22px;
    max-width: 58ch;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
    color: var(--t-body);
}

.hero__actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* --- Palco: bloco de 100dvh que o ScrollTrigger pina.
       No frame 0 a copy ocupa o topo e a janela desponta pela dobra. --- */

.hero__stage {
    position: relative;
    margin-top: clamp(24px, 3vw, 44px);
    min-height: 100dvh;
    display: grid;
    /* minmax(0,1fr) e obrigatorio: sem isso o comando em white-space:nowrap
       dentro de .cmd__text estica a trilha ate o max-content (656px no mobile). */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding-block: clamp(20px, 3vh, 44px);
}

.hero__stagewrap {
    width: 100%;
    min-width: 0;
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* Sem GSAP ou com movimento reduzido: os quatro estados empilham no fluxo. */
.hero__stage.is-static {
    min-height: 0;
    display: block;
    padding-bottom: var(--sp-sec);
}
.hero__stage.is-static .win__body { min-height: 0; }
.hero__stage.is-static .win__state {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-top: 1px solid var(--line);
}
.hero__stage.is-static .win__state:first-child { border-top: 0; }
.hero__stage.is-static .win__state--code .code,
.hero__stage.is-static .win__state--admin .admin { min-height: 340px; }
.hero__stage.is-static .win__state--site .shot { min-height: 260px; }

/* ==========================================================================
   Janela - chrome compartilhado (hero, codeshow, bento)
   ========================================================================== */

.win {
    position: relative;
    border-radius: var(--r-panel);
    background: var(--c-white);
    border: 1px solid var(--line);
    box-shadow: var(--sh-lift);
    overflow: hidden;
}

.win--dark {
    background: var(--c-navy-black);
    border-color: var(--line-dark);
    box-shadow: var(--sh-deep);
}

.win__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfaff;
}
.win--dark .win__bar { background: rgba(255, 255, 255, .03); border-bottom-color: var(--line-dark); }

.win__dots { display: flex; gap: 6px; flex: none; }
.win__dots i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
}
.win--dark .win__dots i { background: rgba(255, 255, 255, .18); }

.win__title {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    color: var(--t-muted);
    transition: opacity .3s var(--ease);
}
.win--dark .win__title { color: var(--d-3); }

/* Altura ligada a viewport, nao a largura: o palco inteiro precisa caber
   dentro dos 100dvh que o ScrollTrigger pina, senao a base fica cortada. */
.win__body {
    position: relative;
    min-height: clamp(290px, 44vh, 520px);
}

/* Estados empilhados: so a opacidade e o transform mudam.
   O conteudo dos quatro existe no DOM desde o load - leitor de tela recebe tudo. */
.win__state {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px) scale(.985);
    pointer-events: none;
    will-change: opacity, transform;
}
.win__state.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.win__foot {
    border-top: 1px solid var(--line);
    padding: 16px 18px 18px;
    background: #fbfaff;
}
.win--dark .win__foot { background: rgba(255, 255, 255, .03); border-top-color: var(--line-dark); }

.win__footlabel {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--t-muted);
    margin-bottom: 10px;
}

/* --- Estado 1: chat --- */

.chat { padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }

.chat__msg {
    max-width: 76%;
    padding: 14px 18px;
    border-radius: var(--r-card);
    font-size: 15px;
    line-height: 1.5;
}
.chat__msg--user {
    justify-self: end;
    background: var(--c-violet);
    color: var(--c-white);
    border-bottom-right-radius: 6px;
}
.chat__msg--ai {
    justify-self: start;
    background: var(--s-tint);
    color: var(--t-ink);
    border-bottom-left-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat__spark { flex: none; color: var(--c-violet); animation: spark 1.6s var(--ease) infinite; }
@keyframes spark { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.9); } }

.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-self: start; }
.chat__chip {
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: rgba(126, 226, 168, .16);
    border: 1px solid rgba(126, 226, 168, .4);
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #2f7a52;
}

/* Barra de instalacao: e o proprio prompt que voce cola. */
.cmd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px 13px 16px;
    background: var(--c-navy-black);
    border-radius: var(--r-inner);
}
.cmd__text {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-peri-soft);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.cmd__text::-webkit-scrollbar { display: none; }

.copybtn {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    color: var(--d-2);
    transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.copybtn:hover { background: rgba(255, 255, 255, .16); color: var(--d-hi); border-color: rgba(255, 255, 255, .3); }
.copybtn__icon--check { display: none; color: var(--c-ok); }
.copybtn.is-done .copybtn__icon--copy  { display: none; }
.copybtn.is-done .copybtn__icon--check { display: block; }

/* --- Estado 2: codigo --- */

.code {
    height: 100%;
    padding: clamp(20px, 2.6vw, 34px);
    overflow: auto;
    font-family: var(--font-mono);
    font-size: clamp(11.5px, 1vw, 13.5px);
    line-height: 1.75;
    background: var(--c-navy-black);
    color: var(--d-2);
    scrollbar-width: thin;
}
.code__line { display: block; white-space: pre; }
.code__line--add { background: rgba(126, 226, 168, .09); box-shadow: inset 2px 0 0 var(--c-ok); }

.tok-key { color: var(--c-peri); }
.tok-str { color: var(--c-ok); }
/* .42 e .32 davam 4,03 e 2,81 sobre o navy-black: reprovavam AA. Sobem para
   --d-2 e --d-3 (8,46 e 5,60) e a hierarquia entre eles continua a mesma. */
.tok-pun { color: var(--d-2); }
.tok-com { color: var(--d-3); font-style: italic; }
.tok-fn  { color: #ffd479; }

/* --- Estado 3: painel admin (recriacao real da UI, nao screenshot) --- */

.admin { display: grid; grid-template-columns: 190px 1fr; height: 100%; background: var(--c-white); }

.admin__side {
    border-right: 1px solid var(--line);
    padding: 18px 14px;
    background: #fbfaff;
    display: grid;
    align-content: start;
    gap: 4px;
}

.admin__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-inline: 8px; }
.admin__brand img { height: 18px; width: auto; }

.admin__nav-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--t-body);
}
.admin__nav-item--active { background: var(--s-chip); color: var(--c-violet); font-weight: 600; }

.admin__new {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--c-violet);
    color: var(--c-white);
}

.admin__main { padding: 20px clamp(16px, 2vw, 26px); display: grid; align-content: start; gap: 16px; overflow: auto; }

.admin__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin__title { font-size: 19px; letter-spacing: -.01em; }

.admin__publish {
    height: 34px; padding: 0 16px;
    display: inline-flex; align-items: center;
    border-radius: var(--r-pill);
    background: var(--c-violet);
    color: var(--c-white);
    font-size: 12.5px; font-weight: 600;
}

.admin__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin__field { display: grid; gap: 6px; }

.admin__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--t-muted);
}

.admin__input {
    height: 38px;
    padding: 0 12px;
    display: flex; align-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--c-white);
    font-size: 13.5px;
    color: var(--t-ink);
}
.admin__input--select { justify-content: space-between; color: var(--t-body); }

.admin__toolbar {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #fbfaff;
    font-size: 13px;
    color: var(--t-muted);
}
.admin__toolbar b { color: var(--t-ink); }

.admin__editor {
    border: 1px solid var(--line);
    border-radius: 0 0 9px 9px;
    padding: 14px 12px;
    display: grid;
    gap: 9px;
}
.admin__line { height: 8px; border-radius: 4px; background: var(--s-chip); }
.admin__line:nth-child(2) { width: 88%; }
.admin__line:nth-child(3) { width: 94%; }
.admin__line:nth-child(4) { width: 62%; }

/* --- Estado 4: o site publicado. Recriacao em HTML do mesmo post que foi
       escrito no painel do estado 3, nao um screenshot. --- */

.shot { height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.site {
    height: 100%;
    display: grid;
    /* minmax(0,1fr) na ultima faixa: o corpo cede altura em vez de empurrar
       o corte para o meio da primeira linha do texto. */
    grid-template-rows: auto auto auto minmax(0, 1fr);
    background: var(--c-white);
    overflow: hidden;
}

.site__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px clamp(18px, 2.4vw, 34px);
    border-bottom: 1px solid var(--line);
}

.site__brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    color: var(--t-ink);
}

.site__nav { display: flex; gap: clamp(12px, 1.4vw, 20px); font-size: 12.5px; color: var(--t-muted); }
.site__navlink--here { color: var(--c-violet); font-weight: 600; }

.site__hero { padding: clamp(14px, 1.8vw, 22px) clamp(18px, 2.4vw, 34px) 0; }

.site__tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--s-chip);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-violet-deep);
}

.site__title {
    margin-top: 12px;
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.06;
    letter-spacing: -.03em;
    max-width: 22ch;
}

.site__meta { margin-top: 9px; font-size: 12.5px; color: var(--t-muted); }

.site__cover {
    margin: clamp(12px, 1.6vw, 18px) clamp(18px, 2.4vw, 34px) 0;
    min-height: clamp(46px, 6.5vh, 76px);
    border-radius: var(--r-inner);
    background:
        linear-gradient(300deg, rgba(255, 255, 255, .22), transparent 58%),
        linear-gradient(118deg, var(--c-violet-deep), var(--c-violet) 46%, var(--c-peri));
}

.site__body {
    padding: clamp(12px, 1.5vw, 16px) clamp(18px, 2.4vw, 34px) clamp(16px, 2vw, 24px);
    display: grid;
    align-content: start;
    gap: 9px;
    overflow: hidden;
}
.site__line { height: 8px; border-radius: 4px; background: var(--s-chip); }
.site__line:nth-child(2) { width: 92%; }
.site__line:nth-child(3) { width: 64%; }

/* --- Terminal --- */

.term {
    border-radius: var(--r-card);
    background: var(--c-navy-black);
    border: 1px solid var(--line-dark);
    overflow: hidden;
    box-shadow: var(--sh-deep);
}

.term__bar {
    display: flex; align-items: center; gap: 12px;
    height: 38px; padding: 0 14px;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--d-3);
}

.term__body {
    padding: 16px 18px;
    font-family: var(--font-mono);
    font-size: clamp(11.5px, 1vw, 13px);
    line-height: 1.85;
    color: var(--d-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

/* anywhere, nao normal: a URL do localhost e um token unico e sem isso a
   linha nao quebra, estoura a moldura e o terminal corta o texto no mobile. */
.term__line { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__line--dim { color: var(--d-3); }
.term__line--gap { margin-top: 12px; }
.term__line--ok  { color: var(--c-ok); }
.term__line--in  { color: var(--d-hi); }
.term__prompt { color: var(--c-peri); }

/* Linha do terminal entra sequencialmente quando a secao ativa */
.term--seq .term__line { opacity: 0; transform: translateY(6px); }
.term--seq.is-inview .term__line {
    animation: termIn .42s var(--ease-io) forwards;
    animation-delay: calc(var(--i, 0) * .26s);
}
@keyframes termIn { to { opacity: 1; transform: none; } }

/* Palco do hero: terminal entra nos estados 2 e 3.
   A classe e ligada/desligada pelo scrub, entao a transicao vive aqui:
   sem ela o bloco piscava direto de 0 para 1. */
.hero__term {
    margin-top: 16px;
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity .5s var(--ease), transform .62s var(--ease-io);
    will-change: opacity, transform;
}
.hero__term.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   Badges - faixa hairline, sem cards
   ========================================================================== */

.badges {
    border-block: 1px solid var(--line);
    background: var(--s-page);
}

.badges__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.badges__item {
    flex: 1 1 auto;
    min-width: 150px;
    padding: 26px 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-muted);
    border-left: 1px solid var(--line);
    transition: color .3s var(--ease), background .3s var(--ease);
}
.badges__item:first-child { border-left: 0; }
.badges__item:hover { color: var(--c-violet); background: var(--s-tint); }

/* ==========================================================================
   Pillars - tres cards numa rampa dos violetas da marca
   ========================================================================== */

.pillars { padding-block: var(--sp-sec); background: var(--s-page); }

.pillars__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pillars__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: var(--r-card);
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease);
}
.pillars__item:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }

/* Icone no lugar da tarja: mesma funcao de ancora visual, mais leitura.
   A cor herda pelo currentColor do svg. */
.pillars__icon {
    flex: none;
    color: var(--c-violet);
    margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* A rampa: tint -> peri-soft -> violeta pleno. Um tom por card. */
.pillars__item:nth-child(1) { background: var(--s-tint); }
.pillars__item:nth-child(2) { background: var(--c-peri-soft); }
.pillars__item:nth-child(3) { background: var(--c-violet); }

.pillars__item:nth-child(2) .pillars__icon { color: var(--c-violet-deep); }
.pillars__item:nth-child(3) .pillars__icon { color: var(--c-white); }

.pillars__item:nth-child(3) .pillars__title { color: var(--c-white); }
.pillars__item:nth-child(3) .pillars__text  { color: rgba(255, 255, 255, .92); }
/* Veu escuro, nao claro: clarear o chip sobre o violeta derruba o branco do
   texto para 3,73. Escurecendo, o mesmo branco sobe para 8,0. */
.pillars__item:nth-child(3) .pillars__text code {
    background: rgba(14, 11, 48, .3);
    color: var(--c-white);
}

.pillars__title {
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.pillars__text { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--t-body); }
.pillars__text code {
    background: var(--s-chip);
    color: var(--c-violet-deep);
    padding: 2px 6px;
    border-radius: 6px;
}

/* ==========================================================================
   Painel navy que sobe - assinatura da referencia master
   ========================================================================== */

/* Bloco que sobe sobre a pagina, nao faixa sangrada: por isso a margem
   lateral, o raio nos quatro cantos e a borda clara de 1px. */
.panel {
    position: relative;
    margin-inline: var(--gutter);
    /* Sem esta folga o fundo colorido da secao seguinte encosta no canto
       arredondado do painel e a emenda parece defeito de render. */
    margin-block-end: clamp(32px, 4.4vw, 64px);
    border-radius: var(--r-panel);
    border: 1px solid rgba(255, 255, 255, .16);
    background: var(--s-ink);
    overflow: hidden;
    will-change: transform;
}

.panel--deep { background: var(--s-ink-deep); }

/* Folga tambem no topo. Use quando a secao anterior tem fundo proprio e a
   faixa colorida encostaria no canto de cima do painel. */
.panel--floated { margin-block-start: clamp(32px, 4.4vw, 64px); }

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(820px 480px at 85% 0%, rgba(90, 78, 251, .26), transparent 62%),
        radial-gradient(640px 420px at 6% 100%, rgba(139, 131, 254, .13), transparent 56%);
}

.panel__inner { position: relative; padding-block: var(--sp-sec); }

/* ==========================================================================
   Steps - split sticky sincronizado com o terminal
   ========================================================================== */

.steps__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.steps__intro { position: sticky; top: calc(var(--chrome-h) + 48px); }

.steps__list { margin-top: clamp(34px, 4vw, 52px); display: grid; }

.steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-bottom: clamp(26px, 3.2vw, 38px);
}
.steps__item:last-child { padding-bottom: 0; }

/* Trilho da timeline: desce do marcador ate o marcador seguinte. */
.steps__item::before {
    content: "";
    position: absolute;
    left: 17.5px;
    top: 44px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(var(--line-dark-hi), var(--line-dark));
}
.steps__item:last-child::before { display: none; }

.steps__num {
    position: relative;
    z-index: 1;
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-dark-hi);
    background: rgba(139, 131, 254, .10);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--c-peri);
}

.steps__body { padding-top: 7px; }
.steps__title { font-size: 18px; color: var(--d-hi); letter-spacing: -.01em; }
.steps__text  { margin-top: 6px; font-size: 15px; color: var(--d-2); }

.steps__cta { margin-top: 34px; }

.steps__demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.term--tall .term__body { min-height: clamp(280px, 34vw, 420px); align-content: start; }

/* Caixa da skill oficial */
.skillbox {
    border: 1px solid var(--line-dark);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .034);
    padding: 20px;
}

.skillbox__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.skillbox__head svg { color: var(--c-peri); flex: none; }

.skillbox__flag {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-peri);
}

.skillbox__repo {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--d-hi);
    word-break: break-all;
}
.skillbox__repo:hover { color: var(--c-peri); }

.skillbox__label { margin: 14px 0 10px; font-size: 13.5px; color: var(--d-3); }

.skillbox .cmd { background: rgba(0, 0, 0, .34); border: 1px solid var(--line-dark); }

/* ==========================================================================
   Bento - 7 celulas para 7 itens, sem celula vazia
   ========================================================================== */

.bento { padding-block: var(--sp-sec); background: var(--s-tint); }

.bento__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.bento__card {
    position: relative;
    padding: clamp(22px, 2.4vw, 32px);
    border-radius: var(--r-card);
    background: var(--c-white);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.bento__card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--line-strong); }

.bento__card--fields  { grid-column: span 4; }
.bento__card--panel   { grid-column: span 2; }
.bento__card--seo     { grid-column: span 2; }
.bento__card--forms   { grid-column: span 2; }
.bento__card--i18n    { grid-column: span 2; }
.bento__card--cli     { grid-column: span 3; }
.bento__card--members { grid-column: span 3; }

/* Unica celula escura do grid: cria o ponto focal */
.bento__card--cli {
    background: var(--c-navy-deep);
    border-color: var(--line-dark);
}
.bento__card--cli .bento__title { color: var(--d-hi); }
.bento__card--cli .bento__text  { color: var(--d-2); }

.bento__mark { color: var(--c-violet); margin-bottom: 16px; }
.bento__card--cli .bento__mark { color: var(--c-peri); }

.bento__title { font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.015em; }
.bento__text  { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--t-body); }

/* Chips dos 17 tipos em duas trilhas que correm em sentidos opostos */
.bento__panwrap {
    margin-top: 22px;
    display: grid;
    gap: 8px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bento__pan {
    display: flex;
    gap: 8px;
    width: max-content;
    will-change: transform;
}

.bento__chip {
    flex: none;
    padding: 8px 15px;
    border-radius: var(--r-pill);
    background: var(--s-chip);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-violet-deep);
}

.bento__snippet {
    margin-top: 20px;
    padding: 13px 15px;
    border-radius: var(--r-inner);
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--line-dark);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-peri-soft);
    overflow-x: auto;
    white-space: nowrap;
}

.bento__shot {
    margin-top: 20px;
    border-radius: var(--r-inner);
    overflow: hidden;
    border: 1px solid var(--line);
}

/* --- Mocks das celulas: a mesma UI que ja aparece no hero e no header,
       recriada em escala de card. Nenhum screenshot. --- */

.bento__mock { margin-top: 22px; }

.win--mini { border-radius: var(--r-inner); box-shadow: none; }
.win--mini .win__bar { height: 32px; padding: 0 12px; gap: 10px; }
.win--mini .win__dots i { width: 7px; height: 7px; }
.win--mini .win__title { font-size: 10px; }

.madmin { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 150px; }

.madmin__side {
    border-right: 1px solid var(--line);
    background: #fbfaff;
    padding: 10px 8px;
    display: grid;
    align-content: start;
    gap: 3px;
}

.madmin__nav {
    padding: 5px 7px;
    border-radius: 7px;
    font-size: 10.5px;
    color: var(--t-muted);
}
.madmin__nav--on { background: var(--s-chip); color: var(--c-violet); font-weight: 600; }

.madmin__main { padding: 12px; display: grid; align-content: start; gap: 9px; }
.madmin__field { display: grid; gap: 4px; min-width: 0; }

.madmin__label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--t-muted);
}

.madmin__input {
    height: 26px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 11px;
    color: var(--t-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.madmin__area {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
}
.madmin__area i { height: 6px; border-radius: 3px; background: var(--s-chip); }
.madmin__area i:nth-child(2) { width: 86%; }
.madmin__area i:nth-child(3) { width: 58%; }

/* Seletor de idioma do header, aberto e mais largo, mostrando os prefixos. */
.langmock {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.langmock__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--c-violet);
}
.langmock__chev { transform: rotate(180deg); }

.langmock__menu {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-inner);
    background: var(--c-white);
    box-shadow: var(--sh-card);
}

.langmock__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--t-body);
}
.langmock__item b  { font-weight: 400; }
.langmock__item em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    color: var(--t-muted);
}
.langmock__item--on {
    background: var(--s-tint);
    color: var(--c-violet);
}
.langmock__item--on b  { font-weight: 600; }
.langmock__item--on em { color: var(--c-violet); }

/* Resultado de busca: o que o SEO embutido produz, montado em HTML. */
.serp {
    padding: 16px;
    border-radius: var(--r-inner);
    border: 1px solid var(--line);
    background: #fbfaff;
}

.serp__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--t-muted);
}
.serp__fav {
    width: 18px; height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-violet);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.serp__title {
    margin-top: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--c-violet-deep);
}
.serp__desc { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--t-body); }

.serp__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.serp__tags span {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--s-chip);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--c-violet-deep);
}

/* Formulario: os campos, o botao e a confirmacao de gravacao. */
.formock {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: var(--r-inner);
    border: 1px solid var(--line);
    background: #fbfaff;
}

.formock__field { display: grid; gap: 4px; min-width: 0; }
.formock__label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted);
}
.formock__input {
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--c-white);
    font-size: 12px;
    color: var(--t-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formock__foot { margin-top: 2px; display: flex; align-items: center; gap: 12px; }
.formock__send {
    padding: 8px 18px;
    border-radius: var(--r-pill);
    background: var(--c-violet);
    color: var(--c-white);
    font-size: 12px;
    font-weight: 600;
}
.formock__ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t-muted);
}
.formock__ok svg { color: var(--c-violet); flex: none; }

/* Membros: logins do site, com o tipo de cada um. */
.memlist { display: grid; gap: 8px; }

.memlist__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--r-inner);
    border: 1px solid var(--line);
    background: #fbfaff;
}
.memlist__av {
    width: 30px; height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--s-chip);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--c-violet-deep);
}
.memlist__name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--t-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.memlist__tag {
    flex: none;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--s-chip);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--c-violet-deep);
}
.memlist__tag--lead { background: var(--c-violet); color: var(--c-white); }

/* Caixa violeta no lugar da linha divisoria: a frase ocupa a linha inteira e
   o link desce, entao o bloco fecha a secao em vez de virar rodape dela. */
.bento__more {
    margin-top: clamp(34px, 4vw, 48px);
    display: grid;
    justify-items: start;
    gap: 18px;
    padding: clamp(26px, 3vw, 40px);
    border-radius: var(--r-card);
    background: linear-gradient(118deg, var(--c-violet), #4d41f0);
}
.bento__moretext {
    max-width: none;
    font-family: var(--font-display);
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--c-white);
}

/* ==========================================================================
   Codeshow - trilho editorial + codigo sangrando pela direita
   ========================================================================== */

.codeshow__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

.codeshow__rail { position: sticky; top: calc(var(--chrome-h) + 48px); }

/* Pill de painel escuro. Nasceu no codeshow da home e agora serve tambem a
   CLI de Recursos, entao virou bloco proprio em vez de elemento de uma secao.
   Todas na mesma cor e opacidade: a lista e um inventario, nao um indicador
   de posicao. */
.dpills { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }

.dpill {
    padding: 9px 16px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .06);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--d-1);
}

.codeshow__caption {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--d-3);
}

/* ==========================================================================
   Host - violeta pleno, two-up assimetrico
   ========================================================================== */

.host {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-sec);
    background: linear-gradient(160deg, #6459fb 0%, var(--c-violet) 46%, #4d41f0 100%);
}

/* Bento de dois cards sobre o violeta: curso claro, Elleven escuro. */
.host__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(20px, 2.4vw, 32px);
    align-items: stretch;
}

.host__card {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.6vw, 38px);
    border-radius: var(--r-panel);
    background: var(--c-white);
    box-shadow: 0 40px 90px rgba(14, 11, 48, .3);
}

.host__card--elleven {
    background: var(--s-ink-deep);
    border: 1px solid var(--line-dark);
}
/* Os cards do bento sao irmaos: o titulo da Elleven desce da escala de secao
   para a escala de card, a mesma do curso (.host__name). */
.host__card--elleven .s-title {
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: none;
}

.host__flag {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-violet);
}

.host__name { margin-top: 12px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }

.host__shot {
    margin: 22px 0 4px;
    border-radius: var(--r-inner);
    overflow: hidden;
    background: var(--s-tint);
}
.host__shot img { width: 100%; height: auto; }

.host__list { margin-top: 18px; display: grid; gap: 11px; }
.host__list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    color: var(--t-body);
}
.host__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 12px; height: 2px;
    background: var(--c-violet);
    border-radius: 2px;
}

/* margin-top:auto encosta o rodape do card na base: os dois cards do bento
   terminam alinhados mesmo com alturas de conteudo diferentes. */
.host__reco { margin: 20px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--t-muted); }

.host__services { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.host__service {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--r-pill);
    background: rgba(139, 131, 254, .12);
    border: 1px solid var(--line-dark-hi);
    color: var(--d-hi);
    font-size: 14.5px;
}
.host__service svg { flex: none; color: var(--c-peri); }

.host__cta { margin-top: auto; padding-top: 32px; }

/* Terceiro card do bento: faixa da atribuicao, ocupando as duas colunas. */
.host__card--credit {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.6vw, 40px);
    padding-block: clamp(20px, 2.2vw, 28px);
    background: var(--c-navy-deep);
    border: 1px solid var(--line-dark-hi);
}

.host__credit {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(15px, 1.4vw, 17.5px);
    line-height: 1.5;
    color: var(--d-1);
}
.host__credit b { font-weight: 600; color: var(--c-white); }

.host__brands { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.host__brand { display: block; opacity: .92; transition: opacity .3s var(--ease); }
.host__brand:hover { opacity: 1; }
.host__brandsep { width: 1px; height: 26px; background: var(--line-dark-hi); }
.host__brandlogo--elleven { height: 22px; width: auto; }
.host__brandlogo--dls     { height: 34px; width: auto; }

/* ==========================================================================
   Footer - wordmark cortado pela base (motivo do KV-1)
   ========================================================================== */

.footer {
    position: relative;
    overflow: hidden;
    background: var(--s-ink-deep);
    padding-top: var(--sp-sec);
}

.footer__glow {
    position: absolute;
    top: -20%; left: 50%;
    width: 1100px; height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(90, 78, 251, .22), transparent 70%);
    pointer-events: none;
}

.footer__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr);
    gap: clamp(32px, 4vw, 60px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.footer__logo img { height: 32px; width: auto; }
.footer__tagline { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--d-2); max-width: 42ch; }

.footer__stack {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--d-3);
}

.footer__title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-peri);
    margin-bottom: 18px;
}

.footer__list { display: grid; gap: 11px; }

.footer__link {
    font-size: 15px;
    color: var(--d-2);
    transition: color .25s var(--ease), transform .25s var(--ease);
    display: inline-block;
}
.footer__link:hover { color: var(--d-hi); transform: translateX(3px); }

.footer__text { font-size: 15px; line-height: 1.6; color: var(--d-2); margin-bottom: 20px; }

/* Byline: a atribuicao Elleven + Grupo DLS */
/* So texto: os dois logos sairam daqui. O da Elleven virou a assinatura
   discreta do canto inferior direito, na linha do copyright. */
.byline {
    position: relative;
    padding: 26px 0;
    border-top: 1px solid var(--line-dark);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d-3);
}

.byline__text { color: inherit; }

.byline__link {
    color: var(--c-peri);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease);
}
.byline__link:hover { border-color: currentColor; }

.footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--line-dark);
}

.footer__copy {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    color: var(--d-3);
}

/* O .footer__bottom ja e flex com space-between e align-items:center: a marca
   cai no canto direito, centrada na altura do copyright. */
.footer__mark {
    display: block;
    opacity: .85;
    transition: opacity .25s var(--ease);
}
.footer__mark:hover { opacity: 1; }
.footer__mark img { height: 12px; width: auto; }

/* Wordmark gigante cortado pela borda inferior - motivo do KV-1.

   O corte e so pela base. Nao ha ar morto no topo do viewBox: a tinta comeca
   em y=16.94, no alto das hastes do 'l' e do 'k', e o 'e' ainda passa acima da
   linha de x-altura (y=25.41). Qualquer margem negativa aqui decepa a letra.
   A janela vai de 16.94 a 39.35: 22.41 dos 33.88 de glifo, cortados logo
   abaixo da x-altura, com as ascendentes inteiras. */
.footer__wordmark {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 120.1 / 22.41;
    overflow: hidden;
    pointer-events: none;
}
.footer__wordmark svg {
    display: block;
    width: 100%;
    height: auto;
}
.footer__wordmark path { fill: rgba(139, 131, 254, .13); }

/* ==========================================================================
   Placeholder de imagem pendente
   ========================================================================== */

.ph {
    position: relative;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg,
            var(--c-ph) 0 14px,
            var(--c-ph-alt) 14px 28px);
    color: var(--c-ph-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
    min-height: 120px;
}

.ph__box {
    background: var(--c-ph);
    border: 2px solid var(--c-ph-ink);
    border-radius: 8px;
    padding: 10px 16px;
    line-height: 1.5;
}
.ph__dim { display: block; font-size: 15px; letter-spacing: .04em; }

/* ==========================================================================
   Consentimento
   ========================================================================== */

.consent {
    position: fixed;
    left: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: var(--z-consent);
    width: min(400px, calc(100vw - 24px));
    padding: 22px;
    border-radius: var(--r-card);
    background: var(--c-navy-black);
    border: 1px solid var(--line-dark-hi);
    box-shadow: var(--sh-deep);
    transform: translateY(calc(100% + 40px));
    transition: transform .5s var(--ease-io);
}
.consent.is-on { transform: none; }

.consent__title { font-size: 17px; color: var(--d-hi); }
.consent__text  { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--d-2); }
.consent__actions { margin-top: 18px; display: flex; gap: 10px; }

.consent__btn {
    flex: 1;
    height: 42px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-dark-hi);
    background: transparent;
    color: var(--d-2);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.consent__btn:hover { border-color: var(--c-peri); color: var(--d-hi); }
.consent__btn--accept { background: var(--c-violet); border-color: var(--c-violet); color: var(--c-white); }
.consent__btn--accept:hover { background: var(--c-violet-deep); border-color: var(--c-violet-deep); color: var(--c-white); }

/* ==========================================================================
   Entrada em cena
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
}
.has-js [data-reveal] {
    transition: opacity .8s var(--ease-io) var(--d, 0s),
                transform .8s var(--ease-io) var(--d, 0s);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* Sem JS nada fica escondido. */
html:not(.has-js) [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   Recursos - pagina interna
   Regra da pagina: nenhum bloco centralizado e nenhuma grade de 3 colunas
   iguais, que eram os dois vicios do layout original.
   ========================================================================== */

/* --- Palco do hero ------------------------------------------------------ */

/* Inset, nao sangrado: no topo o header e transparente com links escuros, e
   um navy ate a borda de cima apagaria a navegacao inteira. */
.phero {
    padding-top: calc(var(--chrome-h) + clamp(20px, 3vw, 40px));
    background: var(--s-page);
}

.phero__stage {
    position: relative;
    margin-inline: var(--gutter);
    padding-block: clamp(44px, 6vw, 84px);
    border-radius: var(--r-panel);
    border: 1px solid rgba(255, 255, 255, .16);
    background: var(--s-ink);
    overflow: hidden;
}

.phero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 460px at 78% 4%, rgba(90, 78, 251, .30), transparent 62%),
        radial-gradient(560px 420px at 2% 98%, rgba(139, 131, 254, .14), transparent 58%);
}

.phero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.phero__title {
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--c-white);
    max-width: 13ch;
}

.phero__lead {
    margin-top: 22px;
    max-width: 46ch;
    font-size: clamp(16.5px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--d-2);
}

/* Do schema ao ar: duas janelas em cascata, a publicada na frente. */
.phero__wins {
    /* A queda da janela publicada e uma variavel porque a seta ancora nela.
       vw, nao %: margin-top em % resolve contra a largura e top em % contra a
       altura, e as duas medidas nao batem. */
    --site-drop: clamp(64px, 8vw, 112px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.phero__win { grid-row: 1; align-self: start; min-width: 0; }
.phero__win--admin { grid-column: 1 / 10; z-index: 1; }
.phero__win--site  { grid-column: 4 / 13; z-index: 2; margin-top: var(--site-drop); }

.phero__win .win { border-radius: var(--r-card); box-shadow: var(--sh-deep); }

/* Fora do palco pinado da home nao ha altura para herdar: os dois mocks
   passam a ceder altura ao conteudo. */
.phero .admin {
    height: auto;
    grid-template-columns: clamp(108px, 12vw, 148px) minmax(0, 1fr);
}
.phero .admin__side { padding: 14px 10px; }
.phero .admin__main { padding: 16px 18px; gap: 14px; }
.phero .site { height: auto; }

/* Sobre a quina superior esquerda da janela publicada: a coluna 4 de 12
   comeca em 25% da moldura, e o topo dela e o --site-drop. */
.phero__arrow {
    position: absolute;
    z-index: 3;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-violet);
    color: var(--c-white);
    box-shadow: var(--sh-violet);
}
.phero__arrow svg { transform: rotate(var(--arrow-turn, 42deg)); }

/* Recursos: filha direta da moldura, sobre a quina superior esquerda da
   janela publicada. A coluna 4 de 12 comeca em 25% e o topo e o --site-drop. */
.phero__wins > .phero__arrow {
    left: 25%;
    top: var(--site-drop);
    transform: translate(-50%, -50%);
}

/* --- Sumario ------------------------------------------------------------ */

.pindex { margin-top: clamp(30px, 4vw, 54px); }

.pindex__list {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.pindex__item { flex: 1 1 auto; min-width: 150px; border-left: 1px solid var(--line); }
.pindex__item:first-child { border-left: 0; }

.pindex__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 18px;
    font-size: 14.5px;
    color: var(--t-body);
    transition: color .25s var(--ease), background .25s var(--ease);
}
.pindex__item:first-child .pindex__link { padding-left: 0; }
.pindex__link:hover { color: var(--c-violet); background: var(--s-tint); }

.pindex__num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--c-violet);
}

/* --- Cabecalho editorial: titulo a esquerda, lead ao lado --------------- */

/* Substitui o .s-head--center do original. O eyebrow ocupa a linha inteira,
   o titulo e o lead dividem a segunda, alinhados pela base. */
.core__head,
.fields__head,
.struct__head,
.prod__head {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(16px, 3vw, 56px);
    align-items: end;
}
.core__head .eyebrow,
.fields__head .eyebrow,
.struct__head .eyebrow,
.prod__head .eyebrow { grid-column: 1 / -1; }
.core__head .s-lead,
.fields__head .s-lead,
.struct__head .s-lead { margin-top: 0; padding-bottom: 6px; }

/* --- O essencial: bento de 6 celulas ------------------------------------ */

.core { padding-block: var(--sp-sec); background: var(--s-page); }

/* Spans variados, sem repetir padrao de linha: 4+2, 2+4, 3+3. */
.bento__grid--core > :nth-child(1) { grid-column: span 4; }
.bento__grid--core > :nth-child(2) { grid-column: span 2; }
.bento__grid--core > :nth-child(3) { grid-column: span 2; }
.bento__grid--core > :nth-child(4) { grid-column: span 4; }
.bento__grid--core > :nth-child(5) { grid-column: span 3; }
.bento__grid--core > :nth-child(6) { grid-column: span 3; }

/* Nota tecnica no pe do card, no lugar dos mocks: repetir aqui o /admin e o
   seletor de idioma da home seria repeticao literal, nao reuso. */
.bento__spec {
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--c-violet);
}
.bento__grid--core .bento__card { display: flex; flex-direction: column; }

/* --- Campos: tabela de referencia --------------------------------------- */

.fields { padding-block: var(--sp-sec); background: var(--s-tint); }

/* Card por tipo, em vez das duas colunas de hairline. Motivo: as faixas de
   linha eram compartilhadas pelas duas colunas, entao uma definicao de duas
   linhas na esquerda abria um vazio na direita. Dentro do card a altura e
   igualada pela propria linha da grade e o desequilibrio some. */
.fields__grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Mesmo idioma de card do bento: branco, borda de 1px, raio 20. Aqui o
   branco sobre o tint da secao e o que separa a caixa do fundo. */
.fields__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(18px, 1.9vw, 24px);
    border-radius: var(--r-card);
    background: var(--c-white);
    border: 1px solid var(--line);
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.fields__card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--line-strong); }

/* 17 tipos em 3 colunas: a sexta linha fica com dois cards e a terceira vaga
   aberta. Todos os cards tem a mesma largura, inclusive o ultimo. A vaga no
   fim da lista le como fim de lista, nao como buraco. */

/* Violeta pleno com texto branco: 5,36 de contraste. O peri-soft com tinta
   violet-deep dava 4,10 e reprovava AA no corpo de 12,5px. */
.fields__name {
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: var(--c-violet);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--c-white);
}

.fields__desc {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--t-body);
}

/* --- Estrutura: o cabecalho e a primeira celula da grade ---------------- */

.struct { padding-block: var(--sp-sec); background: var(--s-page); }

/* Seis itens, seis celulas: 3 colunas por 2 linhas, sem sobra. O cabecalho
   saiu da grade e virou o cabecalho editorial das outras secoes claras. */
.struct__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Tint macico sobre o branco da secao. Diferente do card de Campos, que e
   branco com borda sobre o tint: escala e peso distintos para as duas grades
   nao lerem como a mesma coisa repetida. */
.struct__item {
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: var(--r-card);
    background: var(--s-tint);
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease);
}
.struct__item:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }

/* O link fecha a secao abaixo da grade, ja que nao ha mais celula sobrando. */
.struct__more { margin-top: clamp(26px, 3vw, 38px); }

.struct__title { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.015em; }
.struct__text { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--t-body); }

.struct__text code,
.prod__text code,
.fields__desc code,
.guide__text code,
.dtext code,
.dlist li code,
.dnote code,
.dtable td:last-child code,
.s-lead code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--s-chip);
    color: var(--c-violet-deep);
    font-family: var(--font-mono);
    font-size: .9em;
}

/* --- CLI ---------------------------------------------------------------- */

.cli__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

.cli__rail { position: sticky; top: calc(var(--chrome-h) + 48px); }
.cli__demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* --- Sob o capo: tres linhas, numero em escala display ------------------ */

/* Fundo branco porque o primeiro card da rampa e o proprio tint: sobre tint
   ele desapareceria. */
.prod { padding-block: var(--sp-sec); background: var(--s-page); }

.prod__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.prod__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: var(--r-card);
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease);
}
.prod__row:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }

/* A mesma rampa dos pilares da home: tint, peri-soft, violeta pleno. */
.prod__row:nth-child(1) { background: var(--s-tint); }
.prod__row:nth-child(2) { background: var(--c-peri-soft); }
.prod__row:nth-child(3) { background: var(--c-violet); }

/* Icone no lugar do numero, exatamente como nos pilares da home: a numeracao
   so contava os cards, o icone diz do que cada um trata. */
.prod__icon {
    flex: none;
    color: var(--c-violet);
    margin-bottom: clamp(18px, 2.2vw, 26px);
}
.prod__row:nth-child(2) .prod__icon { color: var(--c-violet-deep); }
.prod__row:nth-child(3) .prod__icon { color: var(--c-white); }

.prod__title { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.12; letter-spacing: -.02em; }
.prod__text  { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--t-body); }

.prod__row:nth-child(3) .prod__title { color: var(--c-white); }
.prod__row:nth-child(3) .prod__text  { color: rgba(255, 255, 255, .92); }
.prod__row:nth-child(3) .prod__text code {
    background: rgba(14, 11, 48, .3);
    color: var(--c-white);
}

/* --- CTA de fim de pagina ----------------------------------------------- */

.pcta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 8vw, 120px);
    background: linear-gradient(160deg, #6459fb 0%, var(--c-violet) 46%, #4d41f0 100%);
}

/* Unico bloco centralizado da pagina, de proposito: fecha a leitura depois de
   seis secoes alinhadas a esquerda. */
.pcta__grid {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: clamp(26px, 3.4vw, 42px);
    text-align: center;
}

.pcta__copy { max-width: 60ch; }
.pcta__copy .s-title { margin-inline: auto; }
.pcta__copy .s-lead  { margin-inline: auto; }

/* Documentacao: seis palavras no titulo. Com a caixa em 60ch (606px fixos) e a
   fonte em clamp ate 74px, ele virava tres linhas a partir de ~1480px. A trava
   em em acompanha a fonte, entao a quebra e a mesma em qualquer largura: a
   primeira linha pede 9,36em e o titulo inteiro pede 14,4em. */
.pcta--doc .pcta__copy { max-width: none; }
.pcta--doc .pcta__copy .s-title { max-width: 11em; }
.pcta--doc .pcta__copy .s-lead  { max-width: 60ch; }

.pcta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 28px);
}

/* ==========================================================================
   Como usar
   ========================================================================== */

/* --- Link dentro de frase corrida --------------------------------------- */

.ilink {
    color: var(--c-violet);
    border-bottom: 1px solid rgba(90, 78, 251, .34);
    transition: border-color .25s var(--ease);
}
.ilink:hover { border-color: currentColor; }

/* Sobre o palco o violeta nao tem contraste: o glow clareia o navy e o peri
   cai para 4,3. O peri-soft sobe para 8,2. */
.phero__lead .ilink {
    color: var(--c-peri-soft);
    border-bottom-color: rgba(201, 197, 255, .4);
}

/* --- Palco: a conversa atras, o terminal na frente ----------------------- */

.phero__win--chat { grid-column: 1 / 10; z-index: 1; }
.phero__win--term { position: relative; grid-column: 4 / 13; z-index: 2; margin-top: var(--site-drop); }
.phero__win--term .term { box-shadow: var(--sh-deep); }

/* Na quina inferior esquerda do terminal, apontando para cima e para a
   direita. Mora dentro da janela porque a altura dela depende do conteudo e
   nao da para calcular a partir da moldura. */
.phero__win--term .phero__arrow {
    --arrow-turn: -42deg;
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}

.phero .chat { padding: clamp(18px, 2.2vw, 28px); gap: 14px; }
.phero .chat__msg { font-size: 14px; }

/* --- Antes de comecar: tres colunas com filete, sem caixa ---------------- */

/* Um icone por assunto: agente, servidor e manual. */
.needs { padding-block: var(--sp-sec); background: var(--s-page); }

.needs__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.needs__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: var(--r-card);
    background: var(--s-tint);
    transition: transform .4s var(--ease-io), box-shadow .4s var(--ease);
}
.needs__item:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }

.needs__icon { flex: none; color: var(--c-violet); margin-bottom: clamp(16px, 2vw, 24px); }
.needs__name { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -.015em; }
.needs__text { margin-top: 12px; font-size: 15.5px; line-height: 1.62; color: var(--t-body); }

/* --- O guia: trilho de fases fixo + os sete passos ----------------------- */

.guide { padding-block: var(--sp-sec); background: var(--s-tint); }

.guide__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

/* Nao e cabecalho fixo como os outros tres trilhos do projeto: e uma lista
   de fases com a atual acesa. Sem JS continua sendo tres ancoras validas. */
.guide__rail { position: sticky; top: calc(var(--chrome-h) + 48px); }
.guide__railflag { margin-bottom: 18px; }

.guide__phases { margin: 0; padding: 0; list-style: none; display: grid; }

.guide__philink {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px 0;
    border-top: 1px solid var(--line-strong);
    color: var(--t-muted);
}
.guide__phase:last-child .guide__philink { border-bottom: 1px solid var(--line-strong); }

.guide__phinum {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--c-violet);
    opacity: .42;
    transition: opacity .32s var(--ease);
}
.guide__phname {
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--t-ink);
    transition: color .32s var(--ease);
}
.guide__phrange { font-size: 13.5px; }

.guide__philink:hover .guide__phname { color: var(--c-violet); }
.guide__phase.is-current .guide__phinum { opacity: 1; }
.guide__phase.is-current .guide__phname { color: var(--c-violet); }

.guide__act + .guide__act { margin-top: clamp(56px, 6vw, 88px); }
.guide__acthead { margin-bottom: clamp(30px, 3.4vw, 44px); }
.guide__acthead .s-lead { margin-top: 16px; }

/* Sem caixa: sete cards empilhados numa coluna seriam o mesmo vicio do
   original com cantos arredondados. As caixas ficam nos widgets. */
.guide__step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
}
.guide__step + .guide__step { margin-top: clamp(34px, 3.6vw, 52px); }

.guide__num {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-violet);
}

.guide__title { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.015em; }
.guide__text {
    margin-top: 10px;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--t-body);
}

.guide__widget { margin-top: 18px; }
.guide__widget--tight { margin-top: 10px; }

.guide__note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--t-muted); }

/* Skillbox nasceu para painel navy: sobre o tint o fundo a 3,4% de branco
   sumiria. Aqui ela vira caixa escura, igual ao terminal logo abaixo. */
.guide .skillbox { background: var(--c-navy-deep); border-color: var(--line-dark); }

/* --- Card de prompt ----------------------------------------------------- */

/* Frase em portugues, nao comando: fonte de corpo, nao mono. O botao e o
   texto sao irmaos porque o initCopy() procura o .js-copy-src no pai. */
.prompt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border-radius: var(--r-inner);
    background: var(--c-white);
    border: 1px solid var(--line);
}

.prompt__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--t-ink);
}

.prompt .copybtn {
    background: var(--s-chip);
    border-color: var(--line-strong);
    color: var(--c-violet-deep);
}
.prompt .copybtn:hover { background: var(--c-peri-soft); border-color: var(--c-peri); color: var(--c-violet-deep); }

.prompt--onDark {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-dark);
}
.prompt--onDark .prompt__text { color: var(--d-1); }
.prompt--onDark .copybtn {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--d-2);
}
.prompt--onDark .copybtn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: var(--d-hi); }

/* --- Dicas: quatro padroes em 2x2 --------------------------------------- */

.tips__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 32px);
    row-gap: clamp(34px, 4vw, 56px);
}

.tips__item { display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
.tips__title { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.22; letter-spacing: -.015em; color: var(--d-hi); }
.tips__text  { margin: 5px 0 0; font-size: 15px; line-height: 1.6; color: var(--d-2); }

/* Subgrid: os quatro itens dividem as mesmas duas faixas da linha, entao o
   bloco de texto e o card de prompt tem altura identica lado a lado. Sem
   subgrid a caixa ainda estica pela faixa 1fr, so nao fica sincronizada. */
@supports (grid-template-rows: subgrid) {
    .tips__grid { grid-template-rows: repeat(2, auto); }
    .tips__item { grid-row: span 2; grid-template-rows: subgrid; }
}



/* ==========================================================================
   Documentacao - referencia longa: sumario fixo + treze secoes numa coluna
   ========================================================================== */

/* Palco sem janelas: numa pagina de consulta um mock de painel nao ensina
   nada. O lugar dele e da skill, que carrega esta mesma referencia. */
.phero__grid--doc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.phero__aside { min-width: 0; }
.phero__copy .dpills { margin-top: 30px; }

.docs { padding-block: clamp(56px, 7vw, 104px) var(--sp-sec); background: var(--s-page); }

.docs__grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 4.4vw, 64px);
    align-items: start;
}

/* Mesmo sumario do site atual: lista plana, sem numero, com o filete a
   esquerda marcando a secao em cena. Sem max-height: a lista tem ~500px e
   cabe numa viewport de 768px, e um sticky mais alto que a tela e que para
   de grudar. */
.docs__rail { position: sticky; top: calc(var(--chrome-h) + 32px); }

.docs__railflag {
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.docs__item + .docs__item { margin-top: 2px; }

.docs__link {
    display: block;
    padding: 8px 14px;
    border-left: 2px solid var(--line);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--t-muted);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.docs__link:hover { color: var(--t-ink); }

.docs__item.is-current .docs__link {
    color: var(--c-violet);
    border-left-color: var(--c-violet);
    font-weight: 600;
}

.docs__content { min-width: 0; }

/* --- Secao ---------------------------------------------------------------- */

/* Filete entre todas as secoes, como no original. */
.dsec {
    padding-bottom: clamp(40px, 4vw, 56px);
    border-bottom: 1px solid var(--line);
}
.dsec + .dsec { margin-top: clamp(40px, 4vw, 56px); }
.docs__content > .dsec:last-child { padding-bottom: 0; border-bottom: 0; }

.dsec__head { margin-bottom: 18px; }

.dsec__title {
    font-size: clamp(25px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.02em;
}

.dsub {
    margin-top: clamp(28px, 3vw, 38px);
    font-size: clamp(17.5px, 1.4vw, 19.5px);
    line-height: 1.3;
    letter-spacing: -.015em;
}

/* --- Corpo ---------------------------------------------------------------- */

/* A prosa para em 66ch e as caixas usam a coluna inteira: e o que da textura
   a uma pagina que e, no fundo, treze blocos do mesmo tipo. */
.dtext {
    margin-top: 16px;
    max-width: 66ch;
    font-size: 16px;
    line-height: 1.72;
    color: var(--t-body);
}

/* Marcador nativo, nao ::before em grid: com o li em grid cada <code> virava
   uma celula propria e o texto seguinte caia na coluna de 24px. O ::marker
   ainda alinha a base sozinho. */
.dlist {
    margin-top: 16px;
    max-width: 66ch;
    padding-left: 22px;
    list-style: disc outside;
}
.dlist li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--t-body);
}
.dlist li + li { margin-top: 9px; }
.dlist li::marker { color: var(--c-violet); }
.dlist li strong { color: var(--t-ink); }

.dlist--num { padding-left: 26px; list-style: decimal outside; }
.dlist--num li::marker {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--c-violet);
}

/* --- Tabela de referencia -------------------------------------------------- */

.dtablewrap { margin-top: 22px; overflow-x: auto; }

.dtable { width: 100%; border-collapse: collapse; text-align: left; }

.dtable th {
    padding: 0 22px 11px 0;
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--t-muted);
    white-space: nowrap;
}

.dtable td {
    padding: 13px 22px 13px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: 15px;
    line-height: 1.6;
    color: var(--t-body);
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable th:last-child, .dtable td:last-child { padding-right: 0; }

/* A primeira coluna e sempre um identificador: mono aqui evita um <code>
   linha a linha em onze tabelas.

   A largura e uma dica, nao uma trava: com table-layout auto o navegador passa
   de 30% quando o token nao cabe. Sem ela as onze tabelas abriam a primeira
   coluna entre 130px e 456px, cada uma com um ritmo. */
.dtable td:first-child {
    width: 30%;
    font-family: var(--font-mono);
    font-size: 12.8px;
    line-height: 1.55;
    color: var(--c-violet-deep);
}

/* --- Caixas ---------------------------------------------------------------- */

/* Bloco de codigo: a mesma moldura do terminal, com a sombra do card no lugar
   da sombra profunda. Oito caixas flutuando alto numa pagina branca cansam. */
.snip { margin-top: 22px; box-shadow: var(--sh-card); }
.code--doc {
    height: auto;
    padding: 16px 18px;
    font-size: clamp(11.5px, .95vw, 12.8px);
    line-height: 1.72;
}

/* Largura cheia, igual a do terminal logo acima: a nota comenta a caixa. */
.dnote {
    margin-top: 24px;
    padding: clamp(18px, 2vw, 24px);
    border-radius: var(--r-card);
    background: var(--s-tint);
    font-size: 15px;
    line-height: 1.68;
    color: var(--t-body);
}
.dnote strong { color: var(--c-violet-deep); }

.dact { margin-top: 24px; }

/* Na pagina branca o card de prompt inverte: fundo tint e botao branco, senao
   e um retangulo branco sobre branco. */
.docs .prompt { margin-top: 22px; max-width: 66ch; }
.prompt--tint { background: var(--s-tint); border-color: var(--line-strong); }
.prompt--tint .copybtn {
    background: var(--c-white);
    border-color: var(--line-strong);
    color: var(--c-violet-deep);
}
.prompt--tint .copybtn:hover { background: var(--s-chip); border-color: var(--c-violet); color: var(--c-violet); }

/* O primeiro bloco depois do cabecalho ja recebeu o ar do proprio cabecalho. */
.dsec__head + .dtext,
.dsec__head + .dsub,
.dsec__head + .dlist,
.dsec__head + .dtablewrap,
.dsec__head + .snip,
.dsec__head + .prompt { margin-top: 0; }


/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1080px) {
    /* Recursos: tudo que era duas colunas assimetricas vira uma. */
    .phero__grid,
    .phero__grid--doc,
    .cli__grid,
    .core__head,
    .fields__head,
    .struct__head,
    .prod__head { grid-template-columns: minmax(0, 1fr); }
    .cli__rail { position: static; min-width: 0; }
    .cli__demo { min-width: 0; }
    .core__head .s-lead,
    .fields__head .s-lead,
    .struct__head .s-lead { margin-top: 20px; padding-bottom: 0; }

    /* 17 campos em 2 colunas: 8 linhas cheias e o ultimo card sozinho na
       nona, na mesma largura dos outros. */
    .fields__grid,
    .struct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Sem coluna lateral o sumario perde o sticky e vira faixa de pills
       acima do texto, como no site atual. */
    .docs__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
    .docs__rail { position: static; }
    .docs__list { display: flex; flex-wrap: wrap; gap: 8px; }
    .docs__item + .docs__item { margin-top: 0; }
    .docs__link {
        padding: 8px 16px;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        font-size: 13.5px;
    }
    .docs__item.is-current .docs__link {
        border-color: var(--c-violet);
        background: var(--s-chip);
    }

    /* Sem coluna lateral o trilho perde o sticky e vira faixa de tres. */
    .guide__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
    .guide__rail { position: static; }
    .guide__phases { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
    .guide__phase:last-child .guide__philink { border-bottom: 0; }

    /* minmax(0,1fr), nunca 1fr: o comando em white-space:nowrap do .skillbox
       esticava a trilha ate 622px dentro de um painel de 304px e o texto dos
       passos saia cortado pela direita. */
    .steps__grid,
    .codeshow__grid { grid-template-columns: minmax(0, 1fr); }
    .steps__intro,
    .steps__demo,
    .codeshow__rail { position: static; min-width: 0; }
    .host__grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Em coluna unica a capa do curso ganharia ~700px de altura e desequilibrava o
   card inteiro: limita a altura e deixa o object-fit cortar. */
@media (min-width: 721px) and (max-width: 1080px) {
    .host__shot img { height: clamp(240px, 30vw, 340px); object-fit: cover; }
}

@media (max-width: 960px) {
    .pillars__list,
    .prod__list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    /* Especificidade acima da regra de span: (0,2,1) contra (0,2,0). */
    .bento__grid.bento__grid--core > * { grid-column: span 1; }

    .nav {
        position: fixed;
        inset: 0 0 0 auto;
        left: auto;
        width: min(340px, 84vw);
        z-index: var(--z-menu);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 24px 24px;
        background: var(--s-page);
        border-left: 1px solid var(--line);
        box-shadow: -20px 0 60px rgba(27, 22, 82, .16);
        transform: translateX(100%);
        transition: transform .42s var(--ease-io);
        overflow-y: auto;
    }
    .nav.is-open { transform: none; }

    .nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--chrome-h);
        margin-bottom: 10px;
    }

    /* Filete entre itens, nunca antes do primeiro nem depois do ultimo. */
    .nav__link { font-size: 17px; padding: 16px 2px; width: 100%; }
    .nav__link + .nav__link { border-top: 1px solid var(--line); }
    .nav__link::after { display: none; }

    /* Ação principal no topo, acima dos links; o filete separa do primeiro. */
    .nav__cta {
        display: block;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line);
    }
    .nav__foot { display: block; margin-top: auto; padding-top: 26px; }
    .nav__scrim { display: block; }

    .header__toggle { display: flex; }
    .header__spacer { flex: 1; }
    .header__cta { display: none; }

    /* O seletor de idioma do header sai: ele vive no painel, e com o painel
       aberto o header fica atras dele. */
    .header__actions .lang { display: none; }

    .bento__grid { grid-template-columns: repeat(2, 1fr); }
    .bento__card--fields,
    .bento__card--cli,
    .bento__card--members { grid-column: span 2; }
    .bento__card--panel,
    .bento__card--seo,
    .bento__card--forms,
    .bento__card--i18n { grid-column: span 1; }
}

@media (max-width: 720px) {
    :root { --header-h: 64px; }

    /* Recursos no mobile: janelas empilhadas, tabela em coluna unica. */
    .phero__stage { margin-inline: 12px; }
    .phero__wins { grid-template-columns: minmax(0, 1fr); }
    .phero__win--admin,
    .phero__win--site,
    .phero__win--chat,
    .phero__win--term { grid-column: 1; grid-row: auto; margin-top: 0; }
    .phero__win--site,
    .phero__win--term { margin-top: 16px; }

    .needs__list { grid-template-columns: minmax(0, 1fr); }

    /* Tabela de referencia vira lista: em 375px a coluna do identificador
       cabia em 101px e quebrava em ate sete linhas, com linhas de 147px de
       altura. Empilhada, o identificador ganha a largura toda e o cabecalho
       de coluna sai, porque a ordem ja diz o que e cada linha. */
    .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: auto; }
    .dtable thead { display: none; }
    .dtable tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .dtable tr:last-child { border-bottom: 0; }
    .dtable td { padding: 0; border: 0; }
    .dtable td:first-child { width: auto; margin-bottom: 6px; }
    .guide__phases { grid-template-columns: minmax(0, 1fr); }
    .guide__phase:last-child .guide__philink { border-bottom: 1px solid var(--line-strong); }
    .guide__step { grid-template-columns: 38px minmax(0, 1fr); }
    .tips__grid { grid-template-columns: minmax(0, 1fr); }
    .phero__arrow { display: none; }

    .pindex__item { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--line); }
    .pindex__item:first-child { border-top: 0; }
    .pindex__link { padding-inline: 0; }

    .struct__grid { grid-template-columns: minmax(0, 1fr); }

    /* Duas colunas ate aqui: em coluna unica o card de campo passaria de
       700px de largura para uma definicao de uma linha so. */
    .fields__grid { grid-template-columns: minmax(0, 1fr); }

    /* Margem lateral do painel encolhe: em telas estreitas o gutter duplo
       (painel + container) comeria metade da largura util. */
    .panel { margin-inline: 12px; }

    /* Centralizado tambem no mobile, como no desktop. Só o teto de 14ch sai:
       o titulo tem <br> proprio e nao precisa de outra trava de largura. */
    .hero__title { max-width: 100%; }

    .win__body { min-height: 360px; }
    .admin { grid-template-columns: 1fr; }
    .admin__side { display: none; }
    .admin__row { grid-template-columns: 1fr; }

    .badges__item { flex: 1 1 50%; min-width: 50%; border-left: 0; border-top: 1px solid var(--line); }
    .badges__item:nth-child(odd) { border-right: 1px solid var(--line); }

    .bento__grid { grid-template-columns: 1fr; }
    .bento__card--fields,
    .bento__card--panel,
    .bento__card--seo,
    .bento__card--forms,
    .bento__card--i18n,
    .bento__card--cli,
    .bento__card--members { grid-column: span 1; }

    /* Sem GSAP no mobile: o pan-x vira scroll nativo com snap. */
    .bento__panwrap { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .bento__pan { transform: none !important; }
    .bento__chip { scroll-snap-align: start; }

    .host__card--credit { flex-direction: column; align-items: flex-start; }

    .footer__grid { grid-template-columns: 1fr; }

    .consent { width: calc(100vw - 24px); }
    .consent__actions { flex-direction: column; }
}

/* ==========================================================================
   Movimento reduzido - tudo colapsa para estatico
   ========================================================================== */

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

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .term--seq .term__line { opacity: 1; transform: none; }
    .hero__chevron { transform: none !important; }
    .bento__pan { transform: none !important; }
    .bento__panwrap { overflow-x: auto; }

    /* O palco vira grade estatica: os quatro estados visiveis lado a lado. */
    .hero__stage { position: static !important; }
    .hero__term { opacity: 1; transform: none; }
    .consent { transform: none; }
}

/* ─── Home: hero v1 + header negativo ────────────────────────────────
   O hero v1 ja e escuro; aqui fica so o que o header precisa. */
/* Header sobre o hero escuro: some com o fundo claro ate rolar. */
.header__logoimg--light { display: none; }
.is-home .header:not(.is-scrolled) .header__logoimg--dark  { display: none; }
.is-home .header:not(.is-scrolled) .header__logoimg--light { display: block; }
.is-home .header:not(.is-scrolled) .nav__link,
.is-home .header:not(.is-scrolled) .lang__toggle { color: var(--d-1); }
.is-home .header:not(.is-scrolled) .nav__link:hover,
.is-home .header:not(.is-scrolled) .lang__toggle:hover { color: var(--d-hi); }
.is-home .header:not(.is-scrolled) .header__toggle-bar { background: var(--d-hi); }

/* A faixa de badges encosta no hero escuro: mantem a emenda limpa. */
.is-home .badges { border-top-color: transparent; }

/* ─── Hero da home: layout v1 preservado a pedido ───────────────────────
   Regras do tema anterior, escopadas em .hero--v1 para nao colidirem com
   as mesmas classes (.chat, .admin, .term, .code) usadas nas internas. */
.hero--v1 {
    --c-ink: #1b1652; --c-muted: #6d6a8f; --c-lav-chip: #eeecfe;
    --c-line: #e6e3f7; --c-line-strong: #d6d1f5; --radius-pill: 999px;
    --shadow-deep: 0 40px 90px rgba(14, 11, 48, .45);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* Botao-chave da hero: a pilula branca com a seta encapsulada continua
   sendo o elemento da v1, mas a tipografia agora vem da base .btn do novo
   design (JetBrains Mono 12,5px / .1em). Era a v1 sobrescrever font-family,
   size e weight que deixava o rotulo em Inter 16px bold, fora da identidade.
   Cor, sombra e hover saem de .btn--onViolet / .btn--onDark, pelo markup. */
.hero--v1 .btn--kv { gap: 14px; }
.hero--v1 .btn--lg.btn--kv { padding: 0 8px 0 30px; }
.hero--v1 .btn--kv .btn__cap {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--s-chip);
    color: var(--c-violet);
    transition: background-color .28s var(--ease), color .28s var(--ease),
                transform .28s var(--ease);
}
.hero--v1 .btn--kv:hover .btn__cap {
    background: var(--c-violet);
    color: var(--c-white);
    transform: translateX(2px);
}
.hero--v1 {
    position: relative;
    overflow: hidden;
    padding: calc(var(--chrome-h) + 88px) 0 88px;
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(90, 78, 251, .38), transparent 62%),
        radial-gradient(760px 460px at 88% -4%, rgba(139, 131, 254, .20), transparent 58%),
        linear-gradient(180deg, #171243 0%, var(--c-navy-deep) 55%, #100c36 100%);
}
.hero--v1 .hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(139, 131, 254, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 131, 254, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 85% 72% at 50% 18%, #000 30%, transparent 74%);
    mask-image: radial-gradient(ellipse 85% 72% at 50% 18%, #000 30%, transparent 74%);
    pointer-events: none;
}
.hero--v1 .hero__mark {
    position: absolute;
    top: -60px;
    right: -170px;
    width: 620px;
    height: 940px;
    background: url('images/icone-negativo.svg') top right / contain no-repeat;
    opacity: .05;
    pointer-events: none;
}
.hero--v1 .container { position: relative; }
.hero--v1 .hero__intro {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.hero--v1 .hero__eyebrow { color: var(--c-peri); }
.hero--v1 .hero__title {
    margin-top: 26px;
    margin-inline: auto;
    color: var(--c-white);
}
.hero--v1 .hero__title-accent {
    background: linear-gradient(98deg, #d6d3ff 0%, var(--c-peri) 52%, var(--c-violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero--v1 .hero__lead {
    max-width: 640px;
    margin: 26px auto 0;
    font-size: 17.5px;
    line-height: 1.68;
    color: rgba(255, 255, 255, .74);
}
.hero--v1 .hero__lead code {
    background: rgba(139, 131, 254, .16);
    color: var(--c-peri-soft);
    border: 1px solid rgba(139, 131, 254, .28);
}
.hero--v1 .hero__install {
    max-width: 660px;
    margin: 36px auto 0;
}
.hero--v1 .hero__install-hint {
    font-size: 13px;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 10px;
}
.hero--v1 .hero__install-cmd {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: rgba(139, 131, 254, .1);
    border: 1px solid rgba(139, 131, 254, .32);
    border-radius: 14px;
    padding: 12px 14px;
}
.hero--v1 .hero__install-cmd code {
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #d9d6ff;
}
.hero--v1 .hero__actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero--v1 .stage {
    position: relative;
    margin-top: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}
.hero--v1 .stage__col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.hero--v1 .stage__col--right { margin-top: 34px; }
.hero--v1 .stage__link {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--c-white);
    background: var(--c-violet);
    box-shadow: 0 0 0 8px rgba(90, 78, 251, .18), 0 14px 30px rgba(0, 0, 0, .35);
}
.hero--v1 .browser {
    border-radius: 18px;
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-line);
}
.hero--v1 .browser__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-line);
}
.hero--v1 .browser__dots {
    display: inline-flex;
    gap: 5px;
}
.hero--v1 .browser__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-line-strong);
}
.hero--v1 .browser__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero--v1 .browser--dark {
    background: var(--c-navy-black);
    border-color: rgba(139, 131, 254, .26);
    box-shadow: var(--shadow-deep);
}
.hero--v1 .browser--dark .browser__bar { border-color: rgba(139, 131, 254, .18); }
.hero--v1 .browser--dark .browser__dots i { background: rgba(139, 131, 254, .4); }
.hero--v1 .browser--dark .browser__title { color: rgba(255, 255, 255, .48); }
.hero--v1 .browser--panel { box-shadow: var(--shadow-deep); }
.hero--v1 .code {
    padding: 18px 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}
.hero--v1 .code code { all: unset; font: inherit; }
.hero--v1 .tk-k { color: #a49cff; }
.hero--v1 .tk-s { color: var(--c-ok); }
.hero--v1 .tk-p { color: rgba(255, 255, 255, .42); }
.hero--v1 .tk-t { color: var(--c-peri); }
.hero--v1 .tk-f { color: #d9d6ff; }
.hero--v1 .tk-v { color: var(--c-white); }
.hero--v1 .tk-c { color: rgba(255, 255, 255, .34); font-style: italic; }
.hero--v1 .tk-h { color: rgba(255, 255, 255, .6); }
.hero--v1 .code__line {
    display: inline-block;
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
}
.hero--v1 .code__line--add {
    background: rgba(90, 78, 251, .22);
    box-shadow: inset 3px 0 0 var(--c-peri);
}
.hero--v1 .chat {
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(139, 131, 254, .28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 16px 18px 18px;
}
.hero--v1 .chat__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 14px;
}
.hero--v1 .chat__status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-ok);
    box-shadow: 0 0 0 3px rgba(126, 226, 168, .16);
}
.hero--v1 .chat__msg {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 92%;
}
.hero--v1 .chat__msg--user {
    background: var(--c-violet);
    color: var(--c-white);
    border-radius: 14px 14px 4px 14px;
    padding: 10px 14px;
    margin-left: auto;
    width: fit-content;
}
.hero--v1 .chat__msg--ai {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
}
.hero--v1 .chat__spark { flex: none; transform: translateY(1px); color: var(--c-violet); }
.hero--v1 .chat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.hero--v1 .chat__chip {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ok);
    border: 1px solid rgba(126, 226, 168, .32);
    background: rgba(126, 226, 168, .08);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.hero--v1 .admin {
    display: flex;
    min-height: 296px;
    background: var(--c-white);
}
.hero--v1 .admin__side {
    flex: none;
    width: 122px;
    background: #f7f6fe;
    border-right: 1px solid var(--c-line);
    padding: 14px 10px;
}
.hero--v1 .admin__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: var(--c-ink);
    padding: 0 6px 12px;
}
.hero--v1 .admin__brand img { height: 15px; width: auto; }
.hero--v1 .admin__nav-item {
    font-size: 11px;
    font-weight: 500;
    color: var(--c-muted);
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.hero--v1 .admin__nav-item--active {
    background: var(--c-white);
    color: var(--c-violet);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(27, 22, 82, .08);
}
.hero--v1 .admin__new {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-white);
    background: var(--c-violet);
    border-radius: var(--radius-pill);
    padding: 2px 6px;
}
.hero--v1 .admin__main {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 16px;
}
.hero--v1 .admin__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.hero--v1 .admin__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--c-ink);
}
.hero--v1 .admin__publish {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-white);
    background: var(--c-violet);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
}
.hero--v1 .admin__field { min-width: 0; margin-bottom: 10px; }
.hero--v1 .admin__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.hero--v1 .admin__label {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.hero--v1 .admin__input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: var(--c-white);
    font-size: 12px;
    color: var(--c-ink);
    padding: 7px 10px;
    white-space: nowrap;
    overflow: hidden;
}
.hero--v1 .admin__input--select::after {
    content: '▾';
    color: var(--c-peri);
    font-size: 10px;
    margin-left: 8px;
}
.hero--v1 .admin__editor {
    border: 1px solid var(--c-line);
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}
.hero--v1 .admin__toolbar {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--c-muted);
    background: #fafafe;
    border-bottom: 1px solid var(--c-line);
    padding: 6px 10px;
    margin-bottom: 10px;
}
.hero--v1 .admin__toolbar b { font-weight: 800; }
.hero--v1 .admin__line {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--c-lav-chip);
    margin: 7px 10px 0;
}
.hero--v1 .term {
    border-radius: 16px;
    overflow: hidden;
    background: #0b0926;
    border: 1px solid rgba(139, 131, 254, .26);
    box-shadow: var(--shadow-deep);
}
.hero--v1 .term__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(139, 131, 254, .16);
}
.hero--v1 .term__bar .browser__dots i { background: rgba(139, 131, 254, .4); }
.hero--v1 .term__bar .browser__title { color: rgba(255, 255, 255, .48); }
.hero--v1 .term__body {
    padding: 14px 18px 16px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .88);
}
.hero--v1 .term__prompt { color: var(--c-peri); }
.hero--v1 .term__line--dim { color: rgba(255, 255, 255, .55); }
.hero--v1 .term__line--ai { color: var(--c-peri-soft); }
.hero--v1 .term__line--ok { color: var(--c-ok); }
.hero--v1 .term__ok { color: var(--c-ok); }
.hero--v1 .term__cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--c-peri);
    animation: blink 1s steps(2) infinite;
}
.hero--v1 .term__body--seq .term__line {
    opacity: 0;
    transform: translateY(6px);
}
.hero--v1 .copybtn {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--c-white);
    color: var(--c-violet);
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
                transform .2s var(--ease-out);
}
.hero--v1 .copybtn:hover {
    background: var(--c-violet);
    color: var(--c-white);
    transform: translateY(-1px);
}
.hero--v1 .copybtn__icon--check { display: none; }
.hero--v1 .copybtn.is-copied { background: var(--c-violet); color: var(--c-white); }
.hero--v1 .copybtn.is-copied .copybtn__icon--copy { display: none; }
.hero--v1 .copybtn.is-copied .copybtn__icon--check { display: block; }
.hero--v1 .codeshow__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.hero--v1 .codeshow .section-head { margin-bottom: 30px; }
.hero--v1 .codeshow__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero--v1 .codeshow__chips li {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-peri-soft);
    background: rgba(139, 131, 254, .09);
    border: 1px solid rgba(139, 131, 254, .32);
    border-radius: 9px;
    padding: 7px 13px;
}
.hero--v1 .codeshow__window { min-width: 0; }
.hero--v1 .codeshow__caption {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

@media (max-width: 1024px) {
.hero--v1 .stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 920px) {
.hero--v1 .codeshow__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
.hero--v1 { padding-top: calc(var(--chrome-h) + 56px); }
.hero--v1 .stage { grid-template-columns: 1fr; }
.hero--v1 .stage__col--right { margin-top: 0; }
.hero--v1 .stage__link {
        margin: -4px auto;
        transform: rotate(90deg);
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 560px) {
.hero--v1 .hero__eyebrow {
        font-size: 11px;
        letter-spacing: .12em;
    }
.hero--v1 .hero__lead { font-size: 16px; }
.hero--v1 .hero__install-cmd { align-items: flex-start; }
.hero--v1 .hero__actions { flex-direction: column; align-items: stretch; }
.hero--v1 .hero__actions .btn { width: 100%; }
.hero--v1 .hero__mark { display: none; }
.hero--v1 .admin__side { width: 104px; }
.hero--v1 .admin__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
.hero--v1 .term__body--seq .term__line { opacity: 1; transform: none; }
}

/* ─── Barra de afiliado no topo ─────────────────────────────────────────
   Fixa, acima do header, em todas as paginas. Mono e caixa alta para ler
   como as pills e os botoes; a continuacao da frase some no celular. */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: var(--topbar-h);
    padding: 0 var(--gutter);
    background: var(--c-violet);
    color: var(--c-white);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transition: background .28s var(--ease);
}
.topbar:hover { background: var(--c-violet-deep); color: var(--c-white); }
.topbar__label { display: block; }
.topbar__icon { flex: none; opacity: .8; transition: transform .25s var(--ease); }
.topbar:hover .topbar__icon { transform: translate(2px, -2px); }

@media (max-width: 720px) {
    :root { --topbar-h: 34px; }
    .topbar { font-size: 10.5px; letter-spacing: .03em; gap: 7px; }
    .topbar__more { display: none; }
}

/* ─── Hospedagem recomendada, curso e lista de espera ───────────────────
   A coluna da esquerda virou um unico card alto (a hospedagem) e a direita
   empilha Elleven em cima e o curso embaixo — por isso o span de 2 linhas. */
.host__card--hosting { grid-row: span 2; }

/* Rotulo a esquerda, marca a direita, na mesma linha. O margin-left: auto
   (em vez de justify-content) mantem a marca a direita tambem quando a
   linha quebra em card estreito — a margem automatica age por linha. */
.host__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.host__brandmark { margin-left: auto; color: #673de6; }
.host__brandmark svg { display: block; width: 108px; height: auto; }

.host__specs { margin: 20px 0 22px; display: grid; gap: 11px; }
.host__specs li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    color: var(--t-body);
}
.host__specs li::before {
    content: "";
    position: absolute;
    left: 2px; top: .34em;
    width: 6px; height: 11px;
    border: solid var(--c-violet);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

/* margin-top: auto gruda o bloco de acao no rodape do card, que e alto. */
.host__off {
    margin: auto 0 18px;
    padding: 11px 14px;
    border-radius: var(--r-inner);
    background: var(--s-chip);
    color: var(--c-violet);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}
.host__alt {
    margin-top: 14px;
    font-size: 14px;
    color: var(--t-muted);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s var(--ease);
}
.host__alt:hover { color: var(--c-violet); }

.host__card--course {
    background: var(--s-ink-deep);
    border: 1px solid var(--line-dark);
}
.host__coursename {
    margin-top: 10px;
    font-size: clamp(22px, 2.1vw, 28px);
    letter-spacing: -.02em;
    color: var(--c-white);
}
.host__card--course .s-lead { margin-top: 12px; font-size: 16px; }
.host__note { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--d-3); }

.waitlist { margin-top: auto; padding-top: 20px; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist__input {
    flex: 1 1 220px;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-dark-hi);
    background: rgba(139, 131, 254, .10);
    color: var(--d-hi);
    font-family: var(--font-body);
    font-size: 15px;
}
.waitlist__input::placeholder { color: var(--d-3); }
.waitlist__input:focus-visible { outline: 2px solid var(--c-peri); outline-offset: 2px; }
.waitlist .btn { flex: none; }

.waitlist__msg {
    margin-top: 16px;
    padding: 11px 16px;
    border-radius: var(--r-inner);
    font-size: 14px;
    line-height: 1.5;
}
.waitlist__msg--success { background: rgba(126, 226, 168, .12); color: var(--c-ok); }
.waitlist__msg--error   { background: rgba(255, 255, 255, .08); color: var(--d-1); }

@media (max-width: 1080px) {
    /* Coluna unica: o span de 2 linhas deixaria um buraco abaixo do card. */
    .host__card--hosting { grid-row: auto; }
}

@media (max-width: 720px) {
    /* No celular o card tem ~287px uteis e o pior caso (o rotulo em
       portugues, 206px) nao cabe ao lado da marca de 108px. Tracking mais
       curto e marca menor devolvem a linha unica com folga. */
    .host__head { gap: 10px; }
    .host__head .host__flag { letter-spacing: .10em; }
    .host__brandmark svg { width: 82px; }
}