/* Educação — Robótica e Computação (planta técnica: quadriculado, marinho, blocos) */

body.rb {
    --rb-ink: #13234d;
    --rb-ink-2: #1d3270;
    --rb-muted: #5a6685;
    --rb-paper: #f4f6fb;
    --rb-grid: #e1e6f1;
    --rb-line: #cfd7e8;
    --rb-blue: #2f6bff;
    --rb-orange: #ff7a2f;
    --rb-green: #14a37a;
    --rb-purple: #7a5cff;
    --rb-yellow: #f5b800;
    --rb-pink: #ff4f8b;
    --rb-teal: #0fa3b1;
    --rb-max: 1160px;
    margin: 0;
    min-height: 100vh;
    color: var(--rb-ink);
    font-family: "Outfit", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        linear-gradient(var(--rb-grid) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, var(--rb-grid) 1px, transparent 1px) 0 0 / 26px 26px,
        var(--rb-paper) !important;
    background-attachment: scroll !important;
}
html:has(> body.rb) { background: var(--rb-paper); }

.rb h1, .rb h2, .rb h3 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    color: var(--rb-ink);
    margin: 0;
    letter-spacing: -0.02em;
}
.rb a { color: inherit; }
.rb-mono { font-family: "Space Mono", ui-monospace, monospace; }

.rb-wrap {
    max-width: var(--rb-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* ---------- Topo ---------- */
.rb-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.4rem 5.5rem 0 0;
}
.rb-brand {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
}
.rb-crumb { font-size: 0.85rem; color: var(--rb-muted); }
.rb-crumb a { text-decoration: none; }
.rb-crumb a:hover { color: var(--rb-ink); }
.rb-crumb::before { content: "/"; margin-right: 0.75rem; color: #b7c0d4; }

/* ---------- Hero ---------- */
.rb-hero {
    position: relative;
    margin-top: 1.5rem;
    padding: clamp(2rem, 4vw, 3.4rem);
    border-radius: 28px;
    overflow: hidden;
    color: #e9eeff;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(ellipse 60% 70% at 85% 30%, rgba(47, 107, 255, 0.35), transparent 70%),
        var(--rb-ink);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: center;
}
.rb-kicker {
    margin: 0 0 1rem;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: #9fb4ff;
}
.rb .rb-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 5.2vw, 3.9rem);
    font-weight: 700;
    line-height: 1.02;
}
.rb-hero h1 em {
    font-style: normal;
    color: var(--rb-yellow);
}
.rb-lead {
    margin: 1.1rem 0 0;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #c8d3f5;
}
.rb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}
.rb-chips a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rb-chips a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.rb-chips .material-icons-outlined { font-size: 1rem; color: var(--rb-yellow); }

/* Blocos de programação desenhados em CSS */
.rb-code {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 340px;
    padding: 1.4rem 1.2rem 1.6rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.25);
}
.rb-code-bot {
    position: absolute;
    top: -22px;
    right: -14px;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--rb-yellow);
    color: var(--rb-ink);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    transform: rotate(8deg);
}
.rb-code-bot .material-icons-outlined { font-size: 2.2rem; }
.rb-block {
    position: relative;
    display: block;
    width: fit-content;
    margin-bottom: 4px;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    background: var(--b, var(--rb-blue));
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.rb-block::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -6px;
    width: 18px;
    height: 7px;
    border-radius: 0 0 5px 5px;
    background: inherit;
    z-index: 1;
}
.rb-block--hat {
    --b: var(--rb-yellow);
    color: var(--rb-ink);
    border-radius: 22px 22px 6px 6px;
    padding-top: 0.85rem;
}
.rb-block--motion { --b: var(--rb-blue); }
.rb-block--light { --b: var(--rb-pink); }
.rb-block--sound { --b: var(--rb-purple); }
.rb-block--c {
    --b: var(--rb-orange);
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
}
.rb-block--c::after { display: none; }
.rb-c-top,
.rb-c-bottom {
    display: block;
    width: 75%;
    background: var(--rb-orange);
    color: #fff;
}
.rb-c-top { padding: 0.6rem 0.9rem; border-radius: 6px 6px 0 0; }
.rb-c-bottom { height: 16px; border-radius: 0 6px 6px 6px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.rb-c-inner {
    display: block;
    padding: 4px 0 2px 16px;
    border-left: 16px solid var(--rb-orange);
}
.rb-c-inner .rb-block { margin-bottom: 4px; }
.rb-block b {
    display: inline-block;
    min-width: 1.6em;
    margin: 0 0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--rb-ink);
    text-align: center;
    font-weight: 700;
}

/* ---------- Seções ---------- */
.rb-main { padding-bottom: 2rem; }
.rb-sec {
    --c: var(--rb-blue);
    padding: clamp(2.5rem, 5vw, 3.8rem) 0 0;
    scroll-margin-top: 1rem;
}
.rb-sec--orange { --c: var(--rb-orange); }
.rb-sec--green { --c: var(--rb-green); }
.rb-sec--purple { --c: var(--rb-purple); }
.rb-sec--yellow { --c: var(--rb-yellow); }
.rb-sec--pink { --c: var(--rb-pink); }
.rb-sec--teal { --c: var(--rb-teal); }

.rb-sec-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem 1rem;
    align-items: baseline;
    max-width: 48rem;
    margin-bottom: 1.5rem;
}
.rb-num {
    grid-row: span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--c);
    color: #fff;
    font-family: "Space Mono", ui-monospace, monospace;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 3px 3px 0 var(--rb-ink);
}
.rb-sec--yellow .rb-num { color: var(--rb-ink); }
.rb .rb-sec-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
}
.rb-sec-head p {
    margin: 0;
    color: var(--rb-muted);
    line-height: 1.55;
}

/* Cards de link */
.rb-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.rb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.2rem 1.25rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rb-card:hover,
.rb-card:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--c);
}
.rb-card:focus-visible { outline: 2px solid var(--rb-ink); outline-offset: 3px; }
.rb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.rb-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    font-size: 1.35rem;
}
.rb-sec--yellow .rb-icon { color: #9a6f00; }
.rb-tag {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--rb-line);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rb-muted);
    white-space: nowrap;
}
.rb .rb-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
}
.rb-card p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.55;
    color: #3f4a66;
}
.rb-go {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--rb-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    color: var(--rb-muted);
}
.rb-go span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-go strong {
    flex-shrink: 0;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.88rem;
    color: var(--rb-ink);
}

/* Biblioteca de PDFs */
.rb-shelf-card {
    padding: 1.6rem;
    border-radius: 18px;
    background: var(--rb-ink);
    color: #dbe3ff;
}
.rb .rb-shelf-card h3 { color: #fff; font-size: 1.35rem; font-weight: 700; }
.rb-shelf-card p { margin: 0.7rem 0 1.3rem; line-height: 1.6; }
.rb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.25rem;
    border-radius: 10px;
    background: var(--rb-yellow);
    color: var(--rb-ink) !important;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.rb-btn:hover { transform: translate(-1px, -1px); }
.rb-btn .material-icons-outlined { font-size: 1.1rem; }
.rb-lib-top {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.rb-lib-kicker {
    margin: 0 0 0.5rem !important;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: #9fb4ff;
}
.rb-lib-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.rb-lib-social a {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
    text-decoration: none;
}
.rb-lib-social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

.rb-lib-tools {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 18px;
}
.rb-lib-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    border: 1.5px solid var(--rb-line);
    border-radius: 12px;
    background: var(--rb-paper);
}
.rb-lib-search:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.rb-lib-search .material-icons-outlined { color: var(--rb-muted); }
.rb-lib-search input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 0;
    border: 0;
    background: transparent;
    color: var(--rb-ink);
    font: inherit;
    font-size: 0.95rem;
    outline: none;
}
.rb-lib-status {
    margin: 0;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--rb-muted);
}
.rb-lib-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}
.rb-lib-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rb-line);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.25;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rb-lib-jump:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.rb-lib-jump .material-icons-outlined { font-size: 1.1rem; color: var(--c); }
.rb-lib-jump span:nth-child(2) { flex: 1; min-width: 0; }
.rb-lib-jump b {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--rb-paper);
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--rb-muted);
}
.rb-lib-jump.is-empty { opacity: 0.4; }

.rb-lib { display: grid; gap: 0.7rem; }
.rb-cat {
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
    scroll-margin-top: 1rem;
}
.rb-cat[open] { box-shadow: 5px 5px 0 var(--c); }
.rb-cat summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    list-style: none;
}
.rb-cat summary::-webkit-details-marker { display: none; }
.rb-cat summary:focus-visible { outline: 2px solid var(--rb-ink); outline-offset: 3px; border-radius: 12px; }
.rb-cat-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    font-size: 1.35rem !important;
}
.rb-cat-text strong {
    display: block;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}
.rb-cat-text small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--rb-muted);
}
.rb-cat-count {
    min-width: 2.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--rb-ink);
    color: #fff;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}
.rb-cat-chev { color: var(--rb-muted); transition: transform 0.2s ease; }
.rb-cat[open] .rb-cat-chev { transform: rotate(180deg); }
.rb-cat-body {
    padding: 0.25rem 1.1rem 1.1rem;
    border-top: 1px dashed var(--rb-line);
}
.rb .rb-sub {
    margin: 1rem 0 0.4rem;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c);
}
.rb-sub small {
    margin-left: 0.3rem;
    font-family: "Space Mono", ui-monospace, monospace;
    color: var(--rb-muted);
}
.rb-docs {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    columns: 2 22rem;
    column-gap: 0.75rem;
}
.rb-docs li { break-inside: avoid; }
.rb-docs a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
    text-decoration: none;
}
.rb-docs a:hover { background: color-mix(in srgb, var(--c) 9%, #fff); }
.rb-docs a:hover .rb-doc-t { text-decoration: underline; text-underline-offset: 2px; }
.rb-docs .material-icons-outlined { flex-shrink: 0; margin-top: 0.05rem; font-size: 1.1rem; color: var(--c); }
.rb-doc-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rb-doc-tag {
    flex-shrink: 0;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--rb-line);
    border-radius: 999px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 600;
    color: var(--rb-muted);
}
.rb-lib-empty {
    margin: 1rem 0 0;
    padding: 1.25rem;
    border: 1.5px dashed var(--rb-line);
    border-radius: 14px;
    text-align: center;
    color: var(--rb-muted);
}
.rb-lib-empty[hidden], .rb-cat[hidden], .rb-docs li[hidden], .rb-sub[hidden], .rb-docs[hidden] { display: none; }
.rb-lib-cite {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--rb-muted);
}

/* Sobre */
.rb-sobre {
    margin-top: clamp(2.5rem, 5vw, 3.8rem);
    padding: 1.6rem 1.8rem;
    border: 1.5px dashed var(--rb-ink);
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
}
.rb-sobre > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rb-green) 14%, #fff);
    color: var(--rb-green);
}
.rb .rb-sobre h2 { font-size: 1.3rem; font-weight: 700; }
.rb-sobre p { margin: 0.5rem 0 0; line-height: 1.6; color: #3f4a66; }
.rb-sobre p small { color: var(--rb-muted); }

/* ---------- Rodapé ---------- */
.rb-foot {
    margin-top: 3rem;
    padding: 1.25rem 0 5.5rem;
    border-top: 1px solid var(--rb-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--rb-muted);
}
.rb-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rb-foot a { text-decoration: none; }
.rb-foot a:hover { color: var(--rb-ink); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .rb-hero { grid-template-columns: 1fr; }
    .rb-code { max-width: 360px; justify-self: start; margin-top: 0.5rem; }
    .rb-lib-top { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .rb-wrap { padding: 0 1rem; }
    .rb-hero { border-radius: 20px; padding: 1.75rem 1.3rem; }
    .rb-code-bot { width: 52px; height: 52px; right: -6px; }
    .rb-code-bot .material-icons-outlined { font-size: 1.8rem; }
    .rb-sobre { grid-template-columns: 1fr; padding: 1.3rem; }
    .rb-list { grid-template-columns: 1fr; }
    .rb-lib-index { grid-template-columns: 1fr; }
    .rb-cat summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.85rem; }
    .rb-cat-chev { display: none; }
    .rb-cat-text small { display: none; }
    .rb-cat-body { padding: 0.25rem 0.6rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-card, .rb-btn, .rb-chips a, .rb-cat-chev, .rb-lib-jump { transition: none; }
}

/* ---------- Modo escuro ---------- */
[data-theme="dark"] body.rb {
    --rb-ink: #e6ebff;
    --rb-muted: #9aa6c6;
    --rb-paper: #0f1629;
    --rb-grid: #18223b;
    --rb-line: #2a3656;
}
[data-theme="dark"] .rb-hero { background-color: #0a1024; color: #e9eeff; }
[data-theme="dark"] .rb-hero { background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(ellipse 60% 70% at 85% 30%, rgba(47, 107, 255, 0.35), transparent 70%),
        #0a1024; }
[data-theme="dark"] .rb-card,
[data-theme="dark"] .rb-lib-tools,
[data-theme="dark"] .rb-cat,
[data-theme="dark"] .rb-sobre { background: #151e36; }
[data-theme="dark"] .rb-card p,
[data-theme="dark"] .rb-sobre p { color: #c3cbe3; }
[data-theme="dark"] .rb-lib-jump:hover,
[data-theme="dark"] .rb-docs a:hover { background: color-mix(in srgb, var(--c) 16%, #151e36); }
[data-theme="dark"] .rb-cat-icon { background: color-mix(in srgb, var(--c) 22%, #151e36); }
[data-theme="dark"] .rb-cat-count { background: #e6ebff; color: #0f1629; }
[data-theme="dark"] .rb-lib-search { background: #0f1629; }
[data-theme="dark"] .rb-shelf-card { background: #0a1024; border: 1px solid var(--rb-line); }
[data-theme="dark"] .rb-num { color: #0f1629; }
[data-theme="dark"] .rb-icon { background: color-mix(in srgb, var(--c) 22%, #151e36); }
[data-theme="dark"] .rb-block b,
[data-theme="dark"] .rb-block--hat,
[data-theme="dark"] .rb-code-bot { color: #13234d; }
[data-theme="dark"] .rb-btn { color: #13234d !important; }

/* ---------- AlgoCards ---------- */
.rb-algo {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.rb-algo-intro { display: flex; flex-direction: column; align-items: flex-start; }
.rb-algo-lic {
    margin: 1.2rem 0 0 !important;
    padding-top: 0.9rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #aebbe6;
}
.rb-algo-lic a { color: #fff; }
.rb-algo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.rb-pcard {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.2rem 1.25rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
}
.rb .rb-pcard h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
.rb-pcard p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: #3f4a66; }
.rb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
}
.rb-pills a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.7rem;
    border: 1.5px solid var(--rb-ink);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.rb-pills a:hover,
.rb-pills a:focus-visible {
    background: color-mix(in srgb, var(--c) 12%, #fff);
    box-shadow: 2px 2px 0 var(--c);
    transform: translate(-1px, -1px);
}
.rb-pills .material-icons-outlined { font-size: 1rem; color: var(--c); }
.rb-pills small {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 400;
    color: var(--rb-muted);
}

/* ---------- Atividades por série ---------- */
.rb-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    padding: 0.7rem 0.8rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
}
.rb-filter-label { margin-right: 0.2rem; font-weight: 600; font-size: 0.9rem; }
.rb-filter button {
    min-width: 2.6rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--rb-line);
    border-radius: 999px;
    background: var(--rb-paper);
    color: var(--rb-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.rb-filter button:hover { border-color: var(--c); }
.rb-filter button.is-on { background: var(--rb-ink); border-color: var(--rb-ink); color: #fff; }
.rb-filter-status {
    margin-left: auto;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--rb-muted);
}
.rb-acts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}
.rb-act {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
}
.rb-act[hidden], .rb-tool[hidden] { display: none; }
.rb-act-head { display: flex; flex-direction: column; gap: 0.35rem; }
.rb .rb-act h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.rb-grade {
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c) 12%, #fff);
    color: var(--rb-ink-2);
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
}
.rb-grade--all { background: color-mix(in srgb, var(--rb-green) 14%, #fff); }
.rb-act-uses {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    font-size: 0.8rem;
    color: var(--rb-muted);
    text-decoration: none;
}
.rb-act-uses:hover { color: var(--rb-ink); text-decoration: underline; }
.rb-act-uses .material-icons-outlined { font-size: 0.95rem; color: var(--rb-pink); }
.rb-act-desc { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--rb-muted); }
.rb-act .rb-pills { padding-top: 0.4rem; }
.rb-list--compact .rb-card { padding: 1rem 1.1rem 0.95rem; }
.rb .rb-sub--gap { margin-top: 2.2rem; }

/* ---------- Chamada IA ---------- */
.rb-ia-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border-radius: 20px;
    color: #dbe3ff;
    text-decoration: none;
    background:
        radial-gradient(ellipse 50% 80% at 90% 20%, rgba(15, 163, 177, 0.4), transparent 70%),
        var(--rb-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rb-ia-banner:hover, .rb-ia-banner:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--c); }
.rb .rb-ia-banner h3 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; }
.rb-ia-banner-text p:not(.rb-lib-kicker) { margin: 0.7rem 0 1.2rem; line-height: 1.6; }
.rb-ia-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rb-ia-stats li {
    padding: 0.9rem;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 12px;
}
.rb-ia-stats b {
    display: block;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--rb-yellow);
}
.rb-ia-stats span { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: #c8d3f5; }

/* ---------- IA na escola: referencial ---------- */
.rb-dims {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}
.rb-dim {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 14px;
}
.rb-dim--ethics { border-style: dashed; }
.rb-dim strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1rem; }
.rb-dim strong em {
    margin-left: 0.3rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--rb-paper);
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 400;
    color: var(--rb-muted);
}
.rb-dim p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.5; color: #3f4a66; }
.rb-dimtag {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 7px;
    background: var(--dc, var(--rb-ink));
    color: #fff;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rb-dim .rb-dimtag { width: 2.3rem; height: 2.3rem; border-radius: 10px; font-size: 1rem; }
.rb-dimtag--I { --dc: var(--rb-blue); }
.rb-dimtag--P { --dc: var(--rb-teal); }
.rb-dimtag--R { --dc: var(--rb-purple); }
.rb-dimtag--A { --dc: var(--rb-orange); }
.rb-dimtag--S { --dc: var(--rb-pink); }
.rb-dimtag--E { --dc: var(--rb-green); }
.rb-ref-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}
.rb-aspects, .rb-comps {
    display: grid;
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}
.rb-aspects li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
    border: 1px solid var(--rb-line);
    border-radius: 12px;
}
.rb-aspects .material-icons-outlined { color: var(--c); }
.rb-aspects strong, .rb-comps li::before { font-family: "Space Grotesk", system-ui, sans-serif; }
.rb-aspects p { margin: 0.2rem 0 0; font-size: 0.87rem; line-height: 1.5; color: #3f4a66; }
.rb-comps { counter-reset: comp; }
.rb-comps li {
    counter-increment: comp;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
    border: 1px solid var(--rb-line);
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #3f4a66;
}
.rb-comps li::before {
    content: counter(comp);
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 8px;
    background: var(--c);
    color: #fff;
    font-weight: 700;
}
.rb-ref-note {
    margin: 1.2rem 0 0;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--c);
    background: #fff;
    border-radius: 0 12px 12px 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #3f4a66;
}
.rb-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.rb-legend span[role="listitem"] { display: inline-flex; align-items: center; gap: 0.4rem; }
.rb-legend-title { font-weight: 600; }
.rb-legend-note { color: var(--rb-muted); font-style: italic; }
.rb-hab {
    width: 100%;
    margin-top: 0.8rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.rb-hab th {
    padding: 0.5rem 0.6rem;
    border-bottom: 1.5px solid var(--rb-ink);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    color: var(--rb-muted);
}
.rb-hab td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px dashed var(--rb-line);
    vertical-align: top;
    line-height: 1.5;
}
.rb-hab-code { font-family: "Space Mono", ui-monospace, monospace; font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--c); }
.rb-hab-asp { width: 11rem; font-size: 0.84rem; color: var(--rb-muted); }
.rb-hab-dims { width: 5.5rem; }
.rb-hab-dims .rb-dimtag { margin: 0 0.2rem 0.2rem 0; }

/* ---------- IA na escola: planos, ferramentas ---------- */
.rb-plan-mat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.2rem;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--rb-ink);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 10%, #fff);
    font-weight: 600;
    text-decoration: none;
}
.rb-plan-mat:hover { box-shadow: 3px 3px 0 var(--c); }
.rb-plan-mat .material-icons-outlined { color: var(--c); }
.rb-plan-mat span:nth-child(2) { flex: 1; }
.rb-plan-mat small { font-family: "Space Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 400; color: var(--rb-muted); }
.rb-plans { list-style: none; }
.rb-plan-n {
    flex-shrink: 0;
    min-width: 2.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    background: var(--rb-paper);
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    color: var(--c);
}
.rb-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--rb-ink);
    border-radius: 14px;
    background: #fff;
}
.rb-note .material-icons-outlined { color: var(--c); }
.rb-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: #3f4a66; }
.rb-tools-bar {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid var(--rb-ink);
    border-radius: 16px;
}
.rb-suggest { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rb-suggest button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rb-line);
    border-radius: 999px;
    background: var(--rb-paper);
    color: var(--rb-ink);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.rb-suggest button:hover { border-color: var(--c); }
.rb-suggest button.is-on { background: var(--c); border-color: var(--c); color: #fff; }
.rb-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.rb-tool {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.95rem 1rem;
    background: #fff;
    border: 1px solid var(--rb-line);
    border-left: 4px solid var(--c);
    border-radius: 12px;
}
.rb .rb-tool h3 { font-size: 1rem; font-weight: 700; }
.rb-tool p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: #3f4a66; }
.rb-tool-links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: auto; padding-top: 0.35rem; }
.rb-tool-links a {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--rb-ink-2);
    text-decoration: none;
}
.rb-tool-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .rb-algo, .rb-ia-banner, .rb-ref-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .rb-algo-grid { grid-template-columns: 1fr; }
    .rb-filter-status { margin-left: 0; width: 100%; }
    .rb-hab thead { display: none; }
    .rb-hab, .rb-hab tbody, .rb-hab tr, .rb-hab td { display: block; width: auto; }
    .rb-hab tr { padding: 0.7rem 0; border-bottom: 1px dashed var(--rb-line); }
    .rb-hab td { padding: 0.15rem 0; border: 0; }
    .rb-hab-asp::before { content: "Aspecto: "; font-weight: 600; }
    .rb-dims { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-pills a, .rb-ia-banner { transition: none; }
}

[data-theme="dark"] .rb-pcard,
[data-theme="dark"] .rb-filter,
[data-theme="dark"] .rb-act,
[data-theme="dark"] .rb-dim,
[data-theme="dark"] .rb-aspects li,
[data-theme="dark"] .rb-comps li,
[data-theme="dark"] .rb-ref-note,
[data-theme="dark"] .rb-note,
[data-theme="dark"] .rb-tools-bar,
[data-theme="dark"] .rb-tool,
[data-theme="dark"] .rb-pills a { background: #151e36; }
[data-theme="dark"] .rb-pcard p,
[data-theme="dark"] .rb-dim p,
[data-theme="dark"] .rb-aspects p,
[data-theme="dark"] .rb-comps li,
[data-theme="dark"] .rb-ref-note,
[data-theme="dark"] .rb-note p,
[data-theme="dark"] .rb-tool p { color: #c3cbe3; }
[data-theme="dark"] .rb-pills a:hover { background: color-mix(in srgb, var(--c) 18%, #151e36); }
[data-theme="dark"] .rb-grade { background: color-mix(in srgb, var(--c) 22%, #151e36); color: #e6ebff; }
[data-theme="dark"] .rb-grade--all { background: color-mix(in srgb, var(--rb-green) 22%, #151e36); }
[data-theme="dark"] .rb-filter button,
[data-theme="dark"] .rb-suggest button { background: #0f1629; }
[data-theme="dark"] .rb-filter button.is-on { background: #e6ebff; color: #0f1629; }
[data-theme="dark"] .rb-plan-mat { background: color-mix(in srgb, var(--c) 18%, #151e36); }
[data-theme="dark"] .rb-plan-n { background: #0f1629; }
[data-theme="dark"] .rb-tool-links a { color: #9fb4ff; }
[data-theme="dark"] .rb-ia-banner { background:
        radial-gradient(ellipse 50% 80% at 90% 20%, rgba(15, 163, 177, 0.35), transparent 70%),
        #0a1024; border: 1px solid var(--rb-line); }
[data-theme="dark"] .rb-dim strong em { background: #0f1629; }