/*==================================================================\
  Hub Tachyonix — folha de estilo
  ------------------------------------------------------------------
  Toda a aparência vem dos tokens em tokens.css. Não introduza cores,
  raios, sombras ou tamanhos literais aqui: use as variáveis.
\==================================================================*/

* {
    box-sizing: border-box;
}

body {
    margin     : 0;
    padding    : 0;
    background : var(--color-bg);
    color      : var(--text-body);
    font-family: var(--font-body);
    font-size  : var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family   : var(--font-display);
    color         : var(--text-heading);
    line-height   : var(--lh-heading);
    letter-spacing: var(--ls-tight);
    font-weight   : var(--fw-bold);
    margin        : 0 0 var(--space-4);
}

h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-top: var(--space-7); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-top: var(--space-6); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

p, li, span {
    font-weight  : var(--fw-regular);
    overflow-wrap: anywhere;
}

strong {
    font-weight: var(--fw-bold);
    color      : var(--text-heading);
}

::selection {
    background: var(--ty-teal-100);
    color     : var(--ty-indigo-900);
}

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ty-gray-300); border-radius: var(--radius-pill); border: 3px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ty-gray-400); }

.icone {
    flex: 0 0 auto;
}


/**************************************************\
 C A B E Ç A L H O
\**************************************************/

header {
    position       : sticky;
    top            : 0;
    z-index        : 20;
    height         : var(--header-h);
    display        : flex;
    align-items    : center;
    gap            : var(--space-4);
    padding        : 0 var(--space-5);
    background     : rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom  : var(--border-thin);
}

.botao-menu {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 auto;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    border         : none;
    background     : transparent;
    border-radius  : var(--radius-sm);
    color          : var(--text-heading);
    cursor         : pointer;
    transition     : background var(--dur-fast) var(--ease-out);
}

.botao-menu:hover:not([disabled]) {
    background: var(--ty-gray-100);
}

.botao-menu.fechar {
    margin : var(--space-3) var(--space-2);
    display: inline-flex;
}

.marca {
    display        : flex;
    align-items    : center;
    gap            : var(--space-3);
    flex           : 0 0 auto;
    text-decoration: none;
}

.marca .divisor {
    width     : 1px;
    height    : 24px;
    background: var(--color-border-strong);
}

.marca .produto {
    font-family   : var(--font-display);
    font-weight   : var(--fw-semibold);
    font-size     : var(--fs-md);
    color         : var(--text-heading);
    letter-spacing: -0.01em;
}

.links-externos {
    display    : flex;
    align-items: center;
    gap        : var(--space-2);
    flex       : 0 0 auto;
}

.links-externos a {
    font-family    : var(--font-display);
    font-weight    : var(--fw-medium);
    font-size      : var(--fs-sm);
    color          : var(--text-body);
    text-decoration: none;
    padding        : var(--space-2) var(--space-3);
    border-radius  : var(--radius-sm);
    transition     : background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.links-externos a:hover {
    background: var(--ty-gray-100);
    color     : var(--text-heading);
}

/* Réplica dos links do cabeçalho exibida dentro do menu em telas estreitas */
.links-popover {
    display: none;
}


/**************************************************\
 B U S C A
\**************************************************/

.pesquisa {
    flex           : 1;
    display        : flex;
    justify-content: center;
    align-self     : stretch;
    align-items    : center;
    position       : relative;
}

.campo-busca {
    display      : flex;
    align-items  : center;
    gap          : var(--space-3);
    width        : 100%;
    max-width    : 420px;
    padding      : var(--space-2) var(--space-4);
    background   : var(--color-surface);
    border       : 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color        : var(--text-muted);
    transition   : border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.campo-busca:focus-within {
    border-color: var(--color-primary);
    box-shadow  : var(--focus-ring);
}

.pesquisa input {
    flex       : 1;
    min-width  : 0;
    border     : none;
    outline    : none;
    background : transparent;
    font-family: var(--font-body);
    font-size  : var(--fs-sm);
    color      : var(--text-body);
}

.pesquisa input::placeholder {
    color: var(--text-muted);
}

.limpar {
    display        : none;
    align-items    : center;
    justify-content: center;
    padding        : 0;
    border         : none;
    background     : transparent;
    color          : var(--text-muted);
    cursor         : pointer;
}

.limpar:hover {
    color: var(--text-heading);
}

.limpar.exibir {
    display: inline-flex;
}

.lupa {
    display        : none;
    align-items    : center;
    justify-content: center;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    border         : none;
    background     : transparent;
    border-radius  : var(--radius-sm);
    color          : var(--text-heading);
    cursor         : pointer;
}

.lupa:hover {
    background: var(--ty-gray-100);
}

.result {
    display      : none;
    position     : absolute;
    top          : calc(100% + var(--space-2));
    left         : 50%;
    transform    : translateX(-50%);
    width        : min(560px, 92vw);
    max-height   : 60vh;
    overflow-y   : auto;
    overflow-x   : hidden;
    z-index      : 30;
    text-align   : left;
    padding      : var(--space-2);
    background   : var(--color-surface);
    border       : var(--border-thin);
    border-radius: var(--radius-lg);
    box-shadow   : var(--shadow-lg);
}

.result.exibir {
    display: block;
}

.result ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.result li {
    margin: 0;
}

.result li a {
    display        : block;
    padding        : var(--space-2) var(--space-3) 0;
    font-family    : var(--font-display);
    font-weight    : var(--fw-semibold);
    font-size      : var(--fs-sm);
    line-height    : 1.3;
    color          : var(--text-heading);
    text-decoration: none;
    border-radius  : var(--radius-sm) var(--radius-sm) 0 0;
}

.result li p {
    margin       : 0;
    padding      : 0 var(--space-3) var(--space-2);
    font-size    : var(--fs-xs);
    color        : var(--text-muted);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.result li:hover a,
.result li:hover p {
    background: var(--ty-gray-100);
}

.result .destaque {
    background   : var(--ty-teal-100);
    color        : var(--ty-indigo-900);
    border-radius: var(--radius-xs);
    font-weight  : var(--fw-bold);
}


/**************************************************\
 M E N U   L A T E R A L
\**************************************************/

.container {
    display: flex;
}

.sidebar {
    position    : sticky;
    top         : var(--header-h);
    flex        : 0 0 var(--sidebar-w);
    width       : var(--sidebar-w);
    height      : calc(100vh - var(--header-h));
    overflow-y  : auto;
    padding     : var(--space-5) var(--space-3) var(--space-8);
    background  : var(--color-surface);
    border-right: var(--border-thin);
}

body.sidebar-oculta .menu-block {
    display: none;
}

.sidebar ul {
    list-style: none;
    margin    : 0;
    padding   : 0;
}

/* Trilho de indentação dos níveis aninhados */
.sidebar ul ul {
    margin     : 2px 0 var(--space-3) 17px;
    padding-left: var(--space-3);
    border-left: 1.5px solid var(--color-border);
}

.sidebar li {
    position: relative;
    margin  : 1px 0;
}

.sidebar a {
    display        : flex;
    align-items    : center;
    gap            : var(--space-2);
    padding        : 6px 11px;
    border-radius  : var(--radius-sm);
    font-size      : var(--fs-sm);
    line-height    : 1.35;
    font-weight    : var(--fw-regular);
    color          : var(--text-body);
    text-decoration: none;
    transition     : background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar a:hover {
    background: var(--ty-gray-100);
}

.sidebar .chevron {
    display    : inline-flex;
    flex       : 0 0 auto;
    color      : var(--text-muted);
    transition : transform var(--dur-fast) var(--ease-out);
}

.sidebar .rotulo {
    flex: 1;
}

/* Grupos de primeiro nível */
.sidebar .menu-raiz > li.grupo > a {
    padding    : 9px 12px;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size  : var(--fs-sm);
    color      : var(--text-heading);
    letter-spacing: -0.01em;
}

.sidebar .menu-raiz > li.grupo + li.grupo {
    margin-top: var(--space-1);
}

/* Ramos intermediários */
.sidebar li.filhos:not(.grupo) > a {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color      : var(--text-heading);
}

/* Item selecionado */
.sidebar li.sel > a {
    background : var(--ty-teal-50);
    color      : var(--ty-teal-700);
    font-weight: var(--fw-semibold);
    box-shadow : inset 2px 0 0 var(--color-primary);
}

/* Abertura: automática no ramo que contém a página atual, manual pelo chevron */
.sidebar li.filhos > ul {
    display: none;
}

.sidebar li.filhos.sel > ul,
.sidebar li.filhos:has(.sel) > ul,
.sidebar li.filhos.aberto > ul {
    display: block;
}

.sidebar li.filhos.sel > a > .chevron,
.sidebar li.filhos:has(.sel) > a > .chevron,
.sidebar li.filhos.aberto > a > .chevron {
    transform: rotate(90deg);
}

.sidebar li.filhos.fechado > ul {
    display: none;
}

.sidebar li.filhos.fechado > a > .chevron {
    transform: rotate(0deg);
}

.menu-popover {
    position     : fixed;
    z-index      : 999;
    top          : 0;
    left         : 0;
    bottom       : 0;
    outline      : none;
    width        : auto !important;
    background   : var(--color-surface);
    border-right : var(--border-thin);
    box-shadow   : var(--shadow-lg);
}

.menu-popover .sidebar {
    top         : 0;
    height      : calc(100vh - 56px);
    border-right: none;
}

.menu-popover-fundo::before {
    position       : fixed;
    z-index        : 99;
    inset          : 0;
    display        : block;
    cursor         : default;
    content        : " ";
    background     : rgba(45, 24, 93, 0.45);
    backdrop-filter: blur(3px);
}

.menu-popover.off,
.menu-popover-fundo.off {
    display: none !important;
}


/**************************************************\
 Á R E A   D E   C O N T E Ú D O
\**************************************************/

.content {
    flex          : 1;
    min-width     : 0;
    display       : flex;
    flex-direction: column;
    min-height    : calc(100vh - var(--header-h));
    background    : var(--color-bg);
}

.centraliza {
    flex     : 1 0 auto;
    width    : 100%;
    max-width: calc(var(--container-md) + 2 * var(--space-7));
    margin   : 0 auto;
    padding  : var(--space-6) var(--space-7) var(--space-9);
}

.centraliza hr {
    border    : none;
    border-top: var(--border-thin);
    margin    : var(--space-7) 0;
}

.centraliza a {
    color          : var(--text-link);
    cursor         : pointer;
    text-decoration: none;
    transition     : color var(--dur-fast) var(--ease-out);
}

.centraliza a:hover {
    color          : var(--text-link-hover);
    text-decoration: underline;
}

.centraliza em {
    color      : var(--text-link);
    font-style : normal;
    font-weight: var(--fw-bold);
}

.centraliza .monospace a {
    font-family: var(--font-mono);
}

/*-- Trilha de navegação -------------------------------------------*/

.trilha {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : var(--space-2);
    margin     : 0 0 var(--space-5);
    font-size  : var(--fs-sm);
    color      : var(--text-muted);
}

.centraliza .trilha a {
    color: var(--text-muted);
}

.centraliza .trilha a:hover {
    color          : var(--color-primary);
    text-decoration: none;
}

.trilha .separador {
    opacity: 0.5;
}

.trilha .atual {
    color      : var(--text-body);
    font-weight: var(--fw-semibold);
}

/*-- Código --------------------------------------------------------*/

.centraliza code,
.centraliza .code {
    display      : block;
    background   : var(--ty-gray-100);
    font-family  : var(--font-mono);
    font-size    : var(--fs-sm);
    font-weight  : var(--fw-regular);
    padding      : var(--space-3) var(--space-4);
    margin       : var(--space-4) 0;
    border-radius: var(--radius-sm);
    border-left  : 4px solid var(--color-primary);
    white-space  : pre-wrap;
}

.code > .keyword { color: var(--ty-indigo-900); font-weight: var(--fw-bold); }
.code > .string  { color: var(--ty-teal-700); }
.code > .comment { color: var(--text-muted); font-style: italic; }
.code > .char    { color: var(--ty-danger); }

/*-- Imagens -------------------------------------------------------*/

.centraliza img {
    max-width      : 100%;
    margin         : var(--space-6) 0;
    border         : var(--border-thin);
    border-radius  : var(--radius-md);
    box-shadow     : var(--shadow-md);
    image-rendering: smooth;
    cursor         : zoom-in;
}

.centraliza .img-icone {
    margin        : 0;
    border        : none;
    box-shadow    : none;
    border-radius : 0;
    display       : inline-block;
    vertical-align: text-bottom;
    cursor        : default;
}

.centraliza .sem-bordas {
    border    : none;
    box-shadow: none;
}

/*-- Tabelas -------------------------------------------------------*/

/* O contêiner de rolagem é criado por index.js — não exige alteração
   nos arquivos de conteúdo. */
.tabela-rolagem {
    margin       : var(--space-6) 0;
    overflow-x   : auto;
    background   : var(--color-surface);
    border       : var(--border-thin);
    border-radius: var(--radius-lg);
    box-shadow   : var(--shadow-sm);
}

.centraliza table {
    width          : 100%;
    border-collapse: collapse;
    text-align     : left;
    font-size      : var(--fs-sm);
}

.centraliza table th {
    padding       : 13px 16px;
    background    : var(--ty-indigo-900);
    color         : var(--text-on-brand);
    font-family   : var(--font-display);
    font-weight   : var(--fw-semibold);
    font-size     : var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space   : nowrap;
    border        : none;
}

.centraliza table td {
    padding       : 12px 16px;
    vertical-align: top;
    line-height   : 1.5;
    border        : none;
    border-top    : var(--border-thin);
}

.centraliza table tbody tr:nth-child(even) {
    background: var(--color-surface-sunk);
}

.centraliza table td > strong {
    color: var(--text-heading);
}

/*-- Destaques -----------------------------------------------------*/

.destaque-claro    { color: var(--color-primary) !important; }
.destaque-escuro   { color: var(--ty-indigo-900) !important; }
.destaque-vermelho { color: var(--ty-danger) !important; }


/**************************************************\
 Í N D I C E   D E   S E Ç Ã O
\**************************************************/

.indice-secao {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap                  : var(--space-4);
    margin               : var(--space-6) 0 0;
}

.centraliza .cartao-indice {
    display        : flex;
    align-items    : center;
    gap            : var(--space-3);
    padding        : var(--space-5) var(--space-5);
    background     : var(--color-surface);
    border         : var(--border-thin);
    border-radius  : var(--radius-lg);
    box-shadow     : var(--shadow-sm);
    color          : var(--text-heading);
    text-decoration: none;
    transition     : transform var(--dur-base) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out),
                     border-color var(--dur-base) var(--ease-out);
}

.centraliza .cartao-indice:hover {
    transform      : translateY(-3px);
    box-shadow     : var(--shadow-lg);
    border-color   : var(--ty-teal-100);
    text-decoration: none;
    color          : var(--text-heading);
}

.cartao-indice .titulo {
    flex       : 1;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size  : var(--fs-sm);
    line-height: 1.35;
}

.cartao-indice .meta {
    font-size     : var(--fs-xs);
    color         : var(--text-muted);
    white-space   : nowrap;
}

.cartao-indice .seta {
    display: inline-flex;
    color  : var(--color-primary);
}


/**************************************************\
 H O M E
\**************************************************/

.hero {
    position       : relative;
    padding        : var(--space-8) var(--space-7) var(--space-7);
    text-align     : center;
    background-image: var(--pattern-dots), var(--gradient-brand);
    background-size : 22px 22px, auto;
    overflow        : hidden;
}

.hero-conteudo {
    position : relative;
    width    : 100%;
    max-width: 760px;
    margin   : 0 auto;
}

.hero h1 {
    margin     : 0 0 var(--space-4);
    font-size  : var(--fs-3xl);
    line-height: var(--lh-tight);
    color      : var(--text-on-brand);
}

.hero p {
    max-width  : 560px;
    margin     : 0 auto var(--space-6);
    font-size  : var(--fs-md);
    line-height: var(--lh-body);
    color      : rgba(255, 255, 255, 0.86);
}

.busca-hero {
    display      : flex;
    align-items  : center;
    gap          : var(--space-3);
    width        : 100%;
    max-width    : 560px;
    margin       : 0 auto;
    padding      : 14px 22px;
    background   : var(--color-surface);
    border-radius: var(--radius-pill);
    box-shadow   : var(--shadow-lg);
    color        : var(--color-primary);
}

.busca-hero input {
    flex       : 1;
    min-width  : 0;
    border     : none;
    outline    : none;
    background : transparent;
    font-family: var(--font-body);
    font-size  : var(--fs-md);
    color      : var(--text-body);
}

.result-home {
    position : static;
    transform: none;
    max-width: 560px;
    width    : 100%;
    margin   : var(--space-2) auto 0;
}

.home-secoes {
    flex        : 1 0 auto;
    width       : 100%;
    max-width   : calc(var(--container-lg) + 2 * var(--space-7));
    margin      : 0 auto;
    padding     : var(--space-7) var(--space-7) var(--space-9);
    column-width: 340px;
    column-gap  : 22px;
}

.cartao-secao {
    break-inside : avoid;
    margin-bottom: 22px;
    background   : var(--color-surface);
    border       : var(--border-thin);
    border-radius: var(--radius-lg);
    box-shadow   : var(--shadow-sm);
    overflow     : hidden;
}

.cartao-secao .cabecalho {
    display        : flex;
    align-items    : center;
    gap            : var(--space-3);
    padding        : var(--space-5) var(--space-5) var(--space-4);
    border-bottom  : var(--border-thin);
    text-decoration: none;
    transition     : background var(--dur-fast) var(--ease-out);
}

.cartao-secao .cabecalho:hover {
    background: var(--ty-gray-100);
}

.cartao-secao .icone-secao {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 auto;
    width          : 38px;
    height         : 38px;
    border-radius  : var(--radius-md);
    background     : var(--gradient-brand);
    color          : var(--text-on-brand);
}

.cartao-secao .cabecalho .titulo {
    font-family   : var(--font-display);
    font-weight   : var(--fw-bold);
    font-size     : var(--fs-lg);
    color         : var(--text-heading);
    letter-spacing: var(--ls-tight);
}

.cartao-secao .links {
    padding: var(--space-3);
}

.rotulo-ramo {
    padding       : var(--space-3) var(--space-3) 3px;
    font-family   : var(--font-display);
    font-weight   : var(--fw-bold);
    font-size     : 11px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color         : var(--text-muted);
}

.link-secao {
    display        : flex;
    align-items    : center;
    gap            : var(--space-2);
    padding        : 6px 10px;
    margin         : 1px 0;
    font-size      : var(--fs-sm);
    line-height    : 1.35;
    color          : var(--text-link);
    text-decoration: none;
    border-radius  : var(--radius-sm);
    transition     : background var(--dur-fast) var(--ease-out);
}

.link-secao .icone {
    color: var(--color-primary);
}

.link-secao:hover {
    background: var(--ty-teal-50);
}

.link-secao.recuado {
    margin-left: var(--space-3);
}


/**************************************************\
 N A V E G A Ç Ã O   A N T E R I O R  /  P R Ó X I M O
\**************************************************/

.navegacao {
    display    : flex;
    gap        : var(--space-4);
    margin-top : var(--space-8);
    padding-top: var(--space-6);
    border-top : var(--border-thin);
}

.centraliza .cartao-nav {
    flex           : 1;
    min-width      : 0;
    padding        : var(--space-4) var(--space-5);
    background     : var(--color-surface);
    border         : var(--border-thin);
    border-radius  : var(--radius-md);
    text-decoration: none;
    transition     : border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.centraliza .cartao-nav:hover {
    border-color   : var(--color-primary);
    box-shadow     : var(--shadow-sm);
    text-decoration: none;
}

.cartao-nav.direita {
    text-align: right;
}

.cartao-nav .rotulo {
    display       : flex;
    align-items   : center;
    gap           : var(--space-1);
    font-family   : var(--font-display);
    font-weight   : var(--fw-bold);
    font-size     : 11px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color         : var(--text-muted);
}

.cartao-nav.direita .rotulo {
    justify-content: flex-end;
}

.cartao-nav .titulo {
    margin-top : var(--space-1);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size  : var(--fs-sm);
    color      : var(--text-heading);
    line-height: 1.35;
}


/**************************************************\
 B O T Ã O   T O P O   E   R O D A P É
\**************************************************/

.botao-topo {
    position       : fixed;
    z-index        : 10;
    bottom         : var(--space-7);
    right          : var(--space-7);
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 3rem;
    height         : 3rem;
    border         : none;
    border-radius  : var(--radius-pill);
    background     : var(--color-primary);
    color          : var(--text-on-brand);
    box-shadow     : var(--shadow-teal);
    opacity        : 0;
    cursor         : pointer;
    transition     : opacity var(--dur-slow) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.botao-topo:hover {
    opacity  : 1;
    transform: translateY(-2px);
}

.footer {
    margin-top: auto;
    padding   : var(--space-6) var(--space-7);
    background: var(--ty-indigo-900);
    text-align: center;
}

.footer .disclaimer {
    color    : rgba(255, 255, 255, 0.86);
    font-size: var(--fs-sm);
}


/**************************************************\
 P R O G R E S S O   E   E T A P A S
\**************************************************/

.topo-flutuante {
    position  : sticky;
    top       : var(--header-h);
    z-index   : 5;
    padding   : var(--space-4) var(--space-2);
    background: var(--color-bg);
}

.topo-flutuante.destacado {
    background   : var(--color-surface);
    border       : var(--border-thin);
    border-top   : none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow   : var(--shadow-sm);
}

.progress-bar-container {
    width        : 100%;
    height       : 10px;
    overflow     : hidden;
    background   : var(--ty-gray-200);
    border-radius: var(--radius-pill);
}

.progress-bar {
    width      : 0;
    height     : 100%;
    background : var(--gradient-teal);
    transition : width var(--dur-slow) var(--ease-out);
}

.checkbox-container {
    margin-bottom: var(--space-4);
    padding      : var(--space-4) var(--space-5);
    background   : var(--color-surface);
    border       : var(--border-thin);
    border-radius: var(--radius-lg);
    box-shadow   : var(--shadow-xs);
    transition   : background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.checkbox-container.selecionado {
    background  : var(--ty-teal-50);
    border-color: var(--ty-teal-100);
}

.checkbox-container input[type="checkbox"] {
    accent-color: var(--color-primary);
    width       : 16px;
    height      : 16px;
    cursor      : pointer;
}

.checkbox-container label {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    color      : var(--text-heading);
    cursor     : pointer;
}

.checkbox-container > div {
    padding-left: 1.6rem;
    transition  : all var(--dur-base) var(--ease-out);
}

.checkbox-container.selecionado > div {
    display: none;
    opacity: 0;
}


/**************************************************\
 F O R M U L Á R I O
\**************************************************/

.formulario {
    display: none;
}

.formulario.visivel {
    display: inline;
}

.formulario ul {
    display: none;
}

.formulario ul.visivel {
    display: block;
}

.formulario > .grupo {
    margin-bottom: var(--space-4);
}

.formulario > .grupo label {
    display      : block;
    margin-bottom: var(--space-1);
    font-family  : var(--font-display);
    font-weight  : var(--fw-semibold);
    font-size    : var(--fs-sm);
    color        : var(--text-heading);
}

.formulario > .grupo input {
    width        : 100%;
    max-width    : 20rem;
    padding      : var(--space-2) var(--space-3);
    background   : var(--color-surface);
    border       : 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family  : var(--font-body);
    font-size    : var(--fs-sm);
    color        : var(--text-body);
    outline      : none;
    transition   : border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.formulario > .grupo input:focus {
    border-color: var(--color-primary);
    box-shadow  : var(--focus-ring);
}

.formulario .botoes {
    display        : flex;
    gap            : var(--space-3);
    justify-content: space-between;
    max-width      : 20rem;
}

.formulario .gerarLinks,
.formulario .reverEtapas {
    margin-top    : var(--space-3);
    padding       : 10px 20px;
    border        : 1.5px solid transparent;
    border-radius : var(--radius-pill);
    font-family   : var(--font-display);
    font-weight   : var(--fw-semibold);
    font-size     : var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    cursor        : pointer;
    transition    : background var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out);
}

.formulario .gerarLinks {
    background: var(--color-primary);
    color     : var(--text-on-brand);
    box-shadow: var(--shadow-teal);
}

.formulario .gerarLinks:hover {
    background: var(--color-primary-hover);
}

.formulario .reverEtapas {
    background  : var(--color-surface);
    border-color: var(--color-border-strong);
    color       : var(--text-body);
}

.formulario .reverEtapas:hover {
    background: var(--ty-gray-100);
    color     : var(--text-heading);
}

.formulario .gerarLinks:active,
.formulario .reverEtapas:active {
    transform: translateY(1px) scale(0.98);
}

.formulario .links {
    list-style-type     : none;
    padding-inline-start: 0;
    margin-block-start  : var(--space-7);
}


/**************************************************\
 V Í D E O   E   V I S I B I L I D A D E
\**************************************************/

.video-container {
    position      : relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height        : 0;
    overflow      : hidden;
    max-width     : 100%;
    margin        : var(--space-6) 0;
    border-radius : var(--radius-lg);
    box-shadow    : var(--shadow-md);
}

.video-container iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    border  : none;
}

.desktop { display: block; }
.mobile  { display: none;  }


/**************************************************\
 R E S P O N S I V O
\**************************************************/

@media (max-width: 1280px) {
    .menu-block {
        display: none !important;
    }

    .pesquisa {
        display : none;
        position: fixed;
        top     : 0;
        left    : 5px;
        right   : 5px;
        bottom  : 5px;
        z-index : 40;
    }

    .pesquisa.exibir {
        display        : block;
        padding-top    : var(--space-2);
        background     : rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
    }

    .campo-busca {
        max-width: none;
    }

    .pesquisa .result {
        position  : fixed;
        top       : calc(var(--header-h) - 6px);
        left      : 5px;
        right     : 5px;
        bottom    : 5px;
        width     : auto;
        transform : none;
        max-height: none;
    }

    .lupa {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .hero {
        padding: var(--space-7) var(--space-5) var(--space-6);
    }

    .hero h1 {
        font-size: var(--fs-xl);
    }

    .home-secoes {
        padding: var(--space-6) var(--space-5) var(--space-8);
    }

    .centraliza {
        padding: var(--space-5) var(--space-5) var(--space-8);
    }
}

@media (max-width: 680px) {
    /* Não há espaço ao lado da marca: os links migram para o menu. */
    header .links-externos {
        display: none;
    }

    .links-popover {
        display    : flex;
        padding    : var(--space-4) var(--space-5);
        border-top : var(--border-thin);
    }

    .marca svg {
        height: 22px;
    }

    .navegacao {
        flex-direction: column;
    }

    .cartao-nav.direita {
        text-align: left;
    }

    .cartao-nav.direita .rotulo {
        justify-content: flex-start;
    }

    /* Tabelas viram cartões empilhados */
    .tabela-rolagem {
        border    : none;
        background: transparent;
        box-shadow: none;
        overflow-x: visible;
    }

    .centraliza table thead {
        display: none;
    }

    .centraliza table tbody tr {
        display      : block;
        padding      : var(--space-4);
        margin-bottom: var(--space-3);
        background   : var(--color-surface);
        border       : var(--border-thin);
        border-radius: var(--radius-lg);
        box-shadow   : var(--shadow-sm);
    }

    .centraliza table tbody tr:nth-child(even) {
        background: var(--color-surface);
    }

    .centraliza table td {
        display   : block;
        padding   : var(--space-1) 0;
        text-align: left;
        position  : relative;
        border    : none;
    }

    .centraliza table td::before {
        content      : attr(data-label) ":  ";
        display      : inline-block;
        padding-right: var(--space-2);
        font-family  : var(--font-display);
        font-weight  : var(--fw-semibold);
        font-size    : var(--fs-xs);
        color        : var(--text-muted);
    }

    .centraliza table td > strong {
        color: var(--color-primary);
    }

    .desktop { display: none;  }
    .mobile  { display: block; }
}

@media (max-width: 520px) {
    header {
        padding: 0 var(--space-3);
        gap    : var(--space-2);
    }

    .marca .divisor,
    .marca .produto {
        display: none;
    }

    .marca svg {
        height: 20px;
    }

    .botao-topo {
        bottom: var(--space-5);
        right : var(--space-5);
    }
}