:root {
    --ink: #0b0b0c;
    --ink-2: #141416;
    --ink-3: #1c1c1f;
    --steel: #2a2a2e;
    --panel: #121214;
    --line: #2f2f33;
    --line-2: #3a3a40;
    --text: #f3f1ec;
    --muted: #a7a39a;
    --orange: #d35400;
    --orange-2: #e67e22;
    --orange-deep: #a84300;
    --warning: #c0392b;
    --ok: #2ecc71;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --radius: 6px;
    --mono: "IBM Plex Mono", "ui-monospace", Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
    --display: "Oswald", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at top right, rgba(211, 84, 0, .12), transparent 28%),
        linear-gradient(180deg, #0d0d0f 0%, var(--ink) 40%, #09090a 100%);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.pub-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* container mais largo (menos margem lateral) */
.pub-wrap {
    width: min(1320px, calc(100% - 1.25rem));
    margin: 0 auto;
}

/* páginas com ads: conteúdo + trilho 300px */
.page-with-ads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.page-with-ads__main {
    min-width: 0;
}

.page-with-ads__rail {
    position: sticky;
    top: 5.5rem;
    align-self: start;
}

.ad-slot {
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
        var(--ink-2);
    color: var(--muted);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    overflow: hidden;
}

.ad-slot--rail {
    width: 300px;
    min-height: 600px; /* 300x600 ou empilha 300x250 */
}

.ad-slot--footer {
    width: 100%;
    min-height: 90px;
    margin: 1.5rem 0 0;
}

.ad-slot__label {
    opacity: .75;
    padding: .75rem;
}

/* cores disponíveis */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .75rem;
}

.color-swatch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--line);
    background: var(--ink-3);
    padding: .4rem .65rem;
    font-size: .82rem;
}

.color-swatch__dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    flex: 0 0 auto;
}

/* pros / cons */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pros-box,
.cons-box {
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: 1rem;
}

.pros-box h3 { color: var(--ok); }
.cons-box h3 { color: #e74c3c; }

.pros-box ul,
.cons-box ul {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.pros-box li,
.cons-box li { margin: .3rem 0; }

.offer-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .page-with-ads {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-with-ads__rail {
        position: static;
        order: 3;
    }

    .ad-slot--rail {
        width: 100%;
        min-height: 250px;
    }
}

@media (max-width: 720px) {
    .pub-wrap {
        width: min(100% - 1rem, 1320px);
    }

    .pros-cons {
        grid-template-columns: 1fr;
    }

    .product-layout {
        grid-template-columns: 1fr;
    }
}

/* TOPBAR */
.pub-topbar {
    background: linear-gradient(90deg, #0a0a0b, #151515 55%, #1a120c);
    border-bottom: 3px solid var(--orange);
    position: relative; /* mobile: rola junto com a página */
    top: auto;
    z-index: 40;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (min-width: 768px) {
    .pub-topbar {
        position: sticky;
        top: 0;
    }
}

.pub-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
}

.pub-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 180px;
}

.pub-brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: #111;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: .04em;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}

.pub-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.pub-brand__text strong {
    font-family: var(--display);
    font-size: 1.25rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pub-brand__text span {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.pub-nav {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.pub-nav a {
    padding: .65rem .9rem;
    border: 1px solid transparent;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 600;
}

.pub-nav a:hover,
.pub-nav a.is-active {
    color: var(--text);
    border-color: var(--line-2);
    background: rgba(211, 84, 0, .08);
}

.pub-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.pub-lang select,
.pub-search input,
.pub-search select,
.bench-select,
.bench-check {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
}

.pub-lang select:focus,
.pub-search input:focus,
.pub-search select:focus {
    outline: 2px solid rgba(211,84,0,.45);
    border-color: var(--orange);
}

.pub-search {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.pub-search input { min-width: 180px; }

.btn {
    appearance: none;
    border: 1px solid var(--orange-deep);
    background: linear-gradient(180deg, var(--orange-2), var(--orange));
    color: #140c05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .72rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.btn:hover { filter: brightness(1.05); }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-2);
    box-shadow: none;
}

.btn-ghost:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

/* HERO / SECTIONS */
.pub-main { flex: 1; padding: 1.5rem 0 3rem; }

.pub-hero {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
        var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--orange-2), var(--orange-deep));
}

.panel-pad { padding: 1.15rem 1.2rem; }

.panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px dashed var(--line-2);
}

.eyebrow {
    color: var(--orange-2);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 .35rem;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.05;
}

h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.05rem; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .85rem; }

.grid-4, .grid-3, .grid-2 {
    display: grid;
    gap: 1rem;
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.section-block { margin: 1.6rem 0; }

/* CARDS */
.card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}

.card:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.card__media {
    aspect-ratio: 4/3;
    background:
        linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.03) 25%, transparent 25%),
        var(--ink-3);
    background-size: 18px 18px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__body { padding: .95rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }

.card__meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--orange-deep);
    color: var(--orange-2);
    background: rgba(211,84,0,.1);
    padding: .25rem .5rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.badge-steel {
    border-color: var(--line-2);
    color: var(--muted);
    background: rgba(255,255,255,.03);
}

/* BREADCRUMB */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
}

.breadcrumb a:hover { color: var(--orange-2); }
.breadcrumb .sep { opacity: .5; }

/* PRODUCT */
.product-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1rem;
}

.gallery {
    display: grid;
    gap: .75rem;
}

.gallery__main {
    border: 1px solid var(--line);
    background: var(--ink-2);
    min-height: 360px;
    display: grid;
    place-items: center;
}

.gallery__main img { width: 100%; height: 100%; object-fit: contain; max-height: 460px; }

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .5rem;
}

.gallery__thumbs button {
    border: 1px solid var(--line);
    background: var(--ink-3);
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery__thumbs button.is-active,
.gallery__thumbs button:hover { border-color: var(--orange); }

.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spec-table,
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.spec-table th,
.spec-table td,
.compare-table th,
.compare-table td {
    border: 1px solid var(--line);
    padding: .75rem .8rem;
    text-align: left;
    vertical-align: top;
}

.spec-table th,
.compare-table th {
    background: #18181b;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.compare-table th:first-child,
.compare-table td:first-child {
    position: sticky;
    left: 0;
    background: #151518;
    z-index: 1;
}

/* ARTICLE */
.article-hero {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.article-content {
    display: grid;
    gap: 1rem;
}

.prose {
    color: #ddd8cf;
    line-height: 1.7;
    font-size: 1.02rem;
}

.prose p { margin: 0 0 1rem; }

.product-slot {
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: 1rem;
}

.product-slot.is-winner {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 1px rgba(211,84,0,.35);
}

.product-slot__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: .8rem;
}

.score {
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--orange-2);
    line-height: 1;
}

.list-plain {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.list-plain li { margin: .25rem 0; }

/* cards de artigo empilhados */
.article-product-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.article-product-stack .product-slot {
    width: 100%;
}

/* link discreto laranja */
.text-link {
    color: var(--orange);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.text-link:hover {
    color: var(--orange-2, #e67e22);
    text-decoration: underline;
}

/* carrossel do card de comparação */
.product-carousel {
    position: relative;
    margin-top: .85rem;
    border: 1px solid var(--line);
    background: var(--ink-3);
    overflow: hidden;
}

.product-carousel__viewport {
    width: 100%;
    overflow: hidden;
}

.product-carousel__track {
    display: flex;
    transition: transform .28s ease;
    will-change: transform;
}

.product-carousel__slide {
    flex: 0 0 100%;
    margin: 0;
    min-width: 100%;
}

.product-carousel__slide img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: var(--ink-3);
}

.product-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-2);
    background: rgba(12, 12, 14, .78);
    color: var(--text, #fff);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.product-carousel__nav:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.product-carousel__nav--prev { left: .55rem; }
.product-carousel__nav--next { right: .55rem; }

.product-carousel__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .55rem;
    display: flex;
    justify-content: center;
    gap: .35rem;
    z-index: 2;
}

.product-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.2);
    padding: 0;
    cursor: pointer;
}

.product-carousel__dot.is-active {
    background: var(--orange);
    border-color: var(--orange);
}

@media (max-width: 720px) {
    .product-carousel__slide img {
        max-height: 240px;
    }
}

/* canto vazio do thead — sem título, mas com bordas compartilhadas */
.compare-table--article thead th.compare-table__corner {
    background: transparent;
    color: transparent;
    box-shadow: none;
    min-width: 140px;

    /* remove só o que não é compartilhado */
    border-top-color: transparent;
    border-left-color: transparent;

    /* mantém as bordas compartilhadas com as outras células */
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.compare-table--article tbody th[scope="row"] {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.compare-table__section th,
.compare-table__section td {
    vertical-align: top;
}

.compare-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.compare-list li {
    margin: .25rem 0;
}

.compare-list--pros li::marker {
    color: var(--ok);
}

.compare-list--cons li::marker {
    color: #e74c3c;
}

/* BENCHMARK */
.bench-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
}

.bench-list {
    display: grid;
    gap: .55rem;
    max-height: 70vh;
    overflow: auto;
    padding-right: .2rem;
}

.bench-item {
    display: flex;
    gap: .7rem;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: .7rem;
}

.bench-item img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid var(--line);
}

/* benchmark */
.bench-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: 1rem;
}

.bench-toolbar input[type="search"],
.bench-toolbar input[type="text"] {
    flex: 1 1 220px;
    min-width: 180px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
}

.bench-pick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.bench-pick-card {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: .75rem;
    cursor: pointer;
    min-height: 88px;
    transition: border-color .15s ease, transform .15s ease;
}

.bench-pick-card:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
}

.bench-pick-card.is-selected {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 1px rgba(211, 84, 0, .35);
}

.bench-pick-card.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.bench-pick-card img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex: 0 0 auto;
    background: var(--ink-3);
}

.bench-pick-card input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.bench-pick-card__body {
    min-width: 0;
}

.bench-pick-card__body strong {
    display: block;
    line-height: 1.25;
    word-break: break-word;
}

.bench-sticky-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-2);
    background: rgba(12, 12, 14, .92);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
}

.bench-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bench-chip {
    border: 1px solid var(--orange-deep);
    color: var(--orange-2);
    background: rgba(211, 84, 0, .1);
    padding: .25rem .55rem;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bench-empty-filter {
    display: none;
    margin-top: 1rem;
}

.bench-empty-filter.is-visible {
    display: block;
}

@media (max-width: 1100px) {
    .bench-pick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .bench-pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .bench-pick-grid {
        grid-template-columns: 1fr;
    }
}

/* FOOTER */
.pub-footer {
    border-top: 1px solid var(--line);
    background: #0a0a0b;
    margin-top: auto;
}

.pub-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 0;
    color: var(--muted);
    font-size: .85rem;
}

.alert {
    border: 1px solid var(--line-2);
    background: rgba(230, 126, 34, .08);
    color: #f0d2b0;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}

.alert-warn {
    border-color: rgba(192, 57, 43, .5);
    background: rgba(192, 57, 43, .12);
    color: #f5c4bf;
}

.pagination {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.pagination > * {
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: .55rem .8rem;
    color: var(--muted);
}

.pagination .active span,
.pagination a:hover {
    border-color: var(--orange);
    color: var(--text);
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .pub-hero,
    .product-layout,
    .article-hero,
    .bench-layout,
    .grid-4,
    .grid-3 { grid-template-columns: 1fr 1fr; }

    .bench-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .pub-topbar__inner { flex-direction: column; align-items: stretch; }
    .pub-brand { min-width: 0; }
    .pub-tools, .pub-search { width: 100%; }
    .pub-search { flex-direction: column; align-items: stretch; }
    .pub-hero,
    .product-layout,
    .article-hero,
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }
    .pub-footer__inner { flex-direction: column; }
}