/* Complementos das páginas institucionais Odous de Deus. */
/* Páginas institucionais Odous: tipografia e superfícies do tema da loja. */
.institutional-link { padding-inline: 11px; }
.institutional-wrap { padding-bottom: 18px; }
.institutional-page { padding-bottom: 28px; }
.institutional-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 420px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  padding: clamp(30px, 5vw, 68px); border-radius: var(--r-2xl);
  color: #fff; background: linear-gradient(115deg, var(--brand-ink) 0%, var(--brand-deep) 65%, #27326f 100%);
  box-shadow: var(--shadow-lg);
}
.institutional-hero::before, .institutional-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.institutional-hero::before { width: 540px; height: 540px; right: -85px; top: -210px; border: 1px solid rgba(255,255,255,.11); box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.02); }
.institutional-hero::after { width: 360px; height: 360px; right: 16%; bottom: -255px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%); }
.institutional-hero-copy { position: relative; z-index: 1; max-width: 700px; }
.institutional-eyebrow, .institutional-kicker {
  display: inline-flex; align-items: center; gap: 8px; color: var(--brand);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.institutional-eyebrow { padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: #fff; }
.institutional-eyebrow .i { color: var(--accent); }
.institutional-hero h1 { max-width: 680px; margin: 22px 0 12px; font-family: var(--font-display); font-size: clamp(36px, 5.1vw, 64px); line-height: 1.04; letter-spacing: -.045em; }
.institutional-hero-copy > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.76); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; }
.institutional-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.institutional-actions .i, .institutional-callout .i, .institutional-card .i { flex: none; }
.btn-ghost-light { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill); color: #fff; font-size: 13px; font-weight: 700; }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); }
.institutional-hero-mark { position: absolute; right: clamp(28px, 7vw, 100px); top: 50%; display: flex; flex-direction: column; align-items: flex-start; transform: translateY(-54%) rotate(-8deg); opacity: .12; }
.institutional-hero-mark span { font-family: var(--font-display); font-size: clamp(50px, 9vw, 126px); font-weight: 800; letter-spacing: -.08em; line-height: .9; }
.institutional-hero-mark b { margin-left: 12px; color: var(--accent); font-size: clamp(15px, 2.2vw, 30px); letter-spacing: .42em; }
.institutional-hero-mark i { margin: 10px 0 0 12px; font-size: 10px; font-style: normal; letter-spacing: .45em; }
.institutional-hero-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: clamp(22px, 5vw, 68px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.institutional-hero-stats div { display: grid; gap: 4px; }
.institutional-hero-stats b { font-family: var(--font-display); color: #fff; font-size: 20px; }
.institutional-hero-stats span { color: rgba(255,255,255,.63); font-size: 12px; }
.institutional-section { padding-top: clamp(48px, 6vw, 78px); }
.institutional-section-heading { max-width: 720px; margin: 0 0 26px; }
.institutional-section-heading h2, .institutional-callout h2 { margin: 9px 0 8px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.institutional-section-heading p, .institutional-callout p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.institutional-section-heading.compact { margin-top: 48px; }
.institutional-card-grid { display: grid; gap: 18px; }
.institutional-card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.institutional-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.institutional-card h3 { margin: 14px 0 8px; font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; }
.institutional-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.institutional-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--brand); background: var(--brand-tint); }
.institutional-icon .i { width: 21px; height: 21px; }
.institutional-number { display: inline-flex; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.institutional-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--brand-tint); }
.institutional-callout h2 { font-size: clamp(21px, 2.4vw, 28px); }
.institutional-callout p { max-width: 600px; }
.event-card { position: relative; overflow: hidden; min-height: 225px; }
.event-label { display: inline-block; padding: 7px 10px; border-radius: var(--r-pill); color: var(--brand); background: var(--brand-tint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.event-card .institutional-icon { margin-top: 20px; }
.event-card h3 { max-width: 270px; }
.event-card > p { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.event-card > p .i { color: var(--brand); }
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.contact-main { padding: clamp(24px, 3vw, 38px); }
.contact-main h3 { font-size: 22px; }
.contact-main > p { margin-bottom: 18px; }
.contact-side { display: grid; gap: 18px; }
.contact-side .institutional-card { display: flex; flex-direction: column; align-items: flex-start; }
.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--brand); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.contact-detail { display: grid; gap: 5px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-detail small { margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.contact-detail a, .contact-detail b { font-size: 14px; }
.contact-topics { margin-top: 18px; }
.story-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 70px); align-items: start; }
.story-steps { display: grid; }
.story-steps article { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.story-steps article:first-child { padding-top: 0; }
.story-steps article > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: var(--brand); background: var(--brand-tint); font-size: 12px; }
.story-steps h3 { margin: 1px 0 5px; font-size: 15px; }
.story-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.values-strip { padding-bottom: 12px; }
.value-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.value-pills span { padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 700; }
@media (max-width: 800px) {
  .institutional-card-grid.three { grid-template-columns: 1fr 1fr; }
  .story-section { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .institutional-hero { min-height: 430px; padding: 26px 22px; border-radius: var(--r-xl); }
  .institutional-hero-mark { right: 18px; top: 58%; }
  .institutional-hero-mark span { font-size: 62px; }
  .institutional-hero-stats { gap: 15px 24px; }
  .institutional-hero-stats b { font-size: 17px; }
  .institutional-card-grid.three { grid-template-columns: 1fr; }
  .institutional-card { padding: 20px; }
  .institutional-callout { align-items: flex-start; flex-direction: column; }
  .institutional-callout .btn { width: 100%; }
  .institutional-section-heading.compact { margin-top: 38px; }
}

/* ============================================================
   BLOG — listagem e matéria
   ============================================================ */

.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 600; transition: all .2s var(--ease);
}
.chip-filter i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.chip-filter:hover { border-color: var(--brand); color: var(--brand); }
.chip-filter.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip-filter.on i { color: rgba(255,255,255,.7); }

/* Grade de matérias: a primeira ocupa a largura toda na página 1. */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-list .post {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.blog-list .post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-tint); }
.blog-list .post-img { height: 190px; }
.blog-list .post-body { display: flex; flex-direction: column; flex: 1; gap: 10px; }
.blog-list .post-body h3 { margin: 0; }
.post-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.post-meta time::before { content: ""; }
.post-more { margin-top: auto; padding-top: 4px; }

.blog-list .post-lead { grid-column: 1 / -1; flex-direction: row; }
.blog-list .post-lead .post-img { flex: 0 0 46%; height: auto; min-height: 300px; }
.blog-list .post-lead .post-img b { font-size: 96px; }
.blog-list .post-lead .post-body { justify-content: center; padding: 34px 38px; gap: 14px; }
.blog-list .post-lead .post-body h3 { font-size: 26px; line-height: 1.22; letter-spacing: -.02em; }
.blog-list .post-lead .post-excerpt { font-size: 15.5px; max-width: 52ch; }

/* ---- matéria ---- */
.article { padding-top: 8px; }
.article-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.article-head .eyebrow { justify-content: center; margin-bottom: 14px; }
.article-head h1 {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.025em;
}
.article-lead { margin: 0 0 20px; font-size: 17.5px; line-height: 1.55; color: var(--muted); }
.article-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 20px; font-size: 13px; color: var(--muted);
}
.article-meta > * { display: inline-flex; align-items: center; gap: 8px; }
.article-meta > * + *::before { content: "·"; margin-right: 12px; color: var(--line); }
.article-author i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  font-style: normal; font-size: 11px; font-weight: 700;
}
.article-cover {
  height: clamp(220px, 34vw, 420px); border-radius: var(--r-xl);
  margin-bottom: 40px; border: 1px solid var(--line);
}

.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
.article-body { max-width: 72ch; font-size: 16.5px; line-height: 1.72; color: var(--text); }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2, .article-body h3, .article-body h4 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25; margin-top: 1.9em;
}
.article-body h2 { font-size: 25px; }
.article-body h3 { font-size: 20px; }
.article-body h4 { font-size: 17px; }
.article-body a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 1.35em; }
.article-body li + li { margin-top: .5em; }
.article-body img { border-radius: var(--r); border: 1px solid var(--line); }
.article-body blockquote {
  padding: 4px 0 4px 22px; border-left: 3px solid var(--brand);
  font-size: 18px; line-height: 1.5; color: var(--text);
}
.article-body code {
  padding: 2px 6px; border-radius: var(--r-xs); background: var(--bg-sunken);
  font-size: .9em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.article-body pre { padding: 18px; border-radius: var(--r); background: var(--bg-sunken); overflow-x: auto; }
.article-body pre code { padding: 0; background: none; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.article-body th, .article-body td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; }
.article-body th { background: var(--bg-sunken); font-weight: 600; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

/* A coluna lateral acompanha a leitura em telas altas. */
.article-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 22px; }
.share-box, .article-tags { display: grid; gap: 10px; }
.share-box > span, .article-tags > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.share-btn {
  display: inline-flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all .2s var(--ease);
}
.share-btn:hover { border-color: var(--brand); color: var(--brand); }
.article-tags { gap: 8px; }
.article-tags a {
  display: inline-block; padding: 5px 12px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--muted);
}
.article-tags a:hover { border-color: var(--brand); color: var(--brand); }

/* ---- vazio ---- */
.empty {
  display: grid; justify-items: center; gap: 12px; padding: 70px 20px; text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty .i { width: 34px; height: 34px; color: var(--muted); opacity: .5; }
.empty h3 { margin: 0; font-size: 18px; font-weight: 600; }
.empty p { margin: 0; max-width: 42ch; color: var(--muted); font-size: 14.5px; }
.empty .btn { margin-top: 8px; }

@media (max-width: 1000px) {
  .article-wrap { grid-template-columns: 1fr; gap: 32px; }
  .article-side { position: static; grid-template-columns: 1fr 1fr; gap: 24px; }
  .blog-list { grid-template-columns: repeat(2, 1fr); }
  .blog-list .post-lead .post-img { flex-basis: 40%; min-height: 240px; }
  .blog-list .post-lead .post-body { padding: 26px 28px; }
  .blog-list .post-lead .post-body h3 { font-size: 22px; }
}

@media (max-width: 640px) {
  .blog-list { grid-template-columns: 1fr; }
  .blog-list .post-lead { flex-direction: column; }
  .blog-list .post-lead .post-img { flex: none; min-height: 200px; height: 200px; }
  .blog-list .post-lead .post-body { padding: 20px; }
  .blog-list .post-lead .post-body h3 { font-size: 20px; }
  .article-side { grid-template-columns: 1fr; }
  .article-body { font-size: 16px; }
}

/* ============================================================
   BARRA FIXA DE COMPRA (celular)
   ============================================================ */

/* Só existe no celular: no desktop o botão original está sempre à vista. */
.pdp-bar { display: none; }

@media (max-width: 860px) {
  .pdp-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -12px rgba(0,0,0,.35);
    transform: translateY(110%); transition: transform .28s var(--ease);
  }
  .pdp-bar.on { transform: translateY(0); }
  .pdp-bar[hidden] { display: none; }

  .pdp-bar-info { display: grid; gap: 1px; line-height: 1.15; }
  .pdp-bar-info strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
  .pdp-bar-info small { font-size: 11.5px; color: var(--muted); }
  .pdp-bar-info s { color: var(--muted); }
  .pdp-bar .btn { flex: 1; min-height: 46px; }

  /* O botão do WhatsApp flutua no mesmo canto: sobe para não ser coberto. */
  /* mesmo padrão já usado pelo toast: desloca o grupo, não cada botão */
  body:has(.pdp-bar.on) .fabs { transform: translateY(-72px); transition: transform .28s var(--ease); }
}

/* Separa o Plano de Corte das abas da conta: ele leva para outra área. */
.acc-nav-tool {
  margin-top: 8px; padding-top: 14px !important;
  border-top: 1px solid var(--line);
  color: var(--brand) !important; font-weight: 600;
}

/* ============================================================
   VENDA POR MEDIDA (metro, m²)
   ============================================================ */

.pdp-price .pdp-unit {
  margin-left: 4px; font-family: var(--font); font-size: 15px;
  font-weight: 500; color: var(--muted);
}

.pdp-measure {
  margin: 18px 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
}
.pdp-measure > b { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }

.measure-row { display: flex; align-items: center; gap: 10px; }
.measure-btn {
  display: grid; place-items: center; flex: none; width: 42px; height: 46px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: .16s var(--ease);
}
.measure-btn:hover { border-color: var(--brand); color: var(--brand); }

/* O campo digitável é a fonte da verdade — daí o destaque. */
.measure-field { position: relative; flex: 1; }
.measure-field input {
  width: 100%; height: 46px; padding: 0 46px 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
}
.measure-field input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.measure-field i {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--muted);
  pointer-events: none;
}

.measure-slider { width: 100%; margin-top: 14px; accent-color: var(--brand); }
.measure-scale {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 11px; color: var(--muted);
}

.measure-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--muted);
}
.measure-total b {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text);
}

/* Com seletor de medida, o contador de unidades não faz sentido. */
.pdp-actions[data-sem-qty] .qty-stepper { display: none; }
.pdp-actions[data-sem-qty] .btn-block { flex: 1 1 100%; }

/* Quantas opções o produto tem — aparece no card da vitrine. */
.pcard-variants {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: 10.5px; font-weight: 600;
}

/* ---------- checkout: como o cliente recebe ---------- */
/* Retirada é o que a loja quer vender primeiro, então estes cartões
   ficam acima do endereço e maiores que os de frete. */
.fulfil-options { display: grid; gap: 10px; }

.fulfil-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.fulfil-card:hover { border-color: var(--brand); }
.fulfil-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft, rgba(0,0,0,.03)); }
.fulfil-card input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }

.fulfil-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fulfil-body b { font-size: 15px; font-weight: 600; }
.fulfil-body small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.fulfil-tag {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-weight: 700; color: var(--ok, #15803d); white-space: nowrap;
}
.fulfil-tag small { font-weight: 400; font-size: 11.5px; color: var(--muted); }

/* barra de progresso da entrega regional grátis */
#freeDeliveryBar:not(:empty) { margin-bottom: 12px; }
#freeDeliveryBar .freeship.is-free p { color: var(--ok, #15803d); }
#freeDeliveryBar .freeship p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#freeDeliveryBar .freeship p small { color: var(--muted); font-size: 12px; }

/* ---------- linha do tempo do pedido ---------- */
/* Mostra o caminho inteiro, não só o passado: as etapas futuras ficam
   apagadas para o cliente saber o que ainda vem. */
.timeline-track .tl-futuro { opacity: .45; }
.timeline-track .tl-futuro .tl-dot { background: var(--line); }
.timeline-track .tl-feito .tl-dot { background: var(--ok, #15803d); }
.timeline-track .tl-atual .tl-dot {
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.timeline-track .tl-atual b { font-weight: 700; }

.tl-detalhe { margin-top: 14px; }
.tl-detalhe summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tl-detalhe[open] summary { margin-bottom: 10px; }

/* ---------- código de retirada ---------- */
.pickup-box {
  margin-top: 16px; padding: 16px; border-radius: var(--r);
  border: 1.5px dashed var(--brand); background: var(--brand-soft, rgba(0,0,0,.03));
}
.pickup-box b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pickup-box p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pickup-box small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pickup-box.is-used { border-style: solid; border-color: var(--line); background: transparent; }

.pickup-code {
  display: block; margin-top: 10px; font-size: 26px; font-weight: 700;
  letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- itens encomendados ---------- */
/* O prazo maior aparece no carrinho e no checkout: descobrir isso só
   depois de pagar é a reclamação clássica de loja com encomenda. */
.line-encomenda {
  display: inline-block; margin-top: 4px;
  color: var(--warn, #b45309); font-weight: 500;
}
.ck-encomenda {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--r); border: 1px solid var(--warn, #b45309);
  background: color-mix(in srgb, var(--warn, #b45309) 8%, transparent);
  font-size: 13px; line-height: 1.5;
}
.ck-encomenda .i { flex: none; margin-top: 2px; }
.pdp-stock.wait { color: var(--warn, #b45309); }

/* ============================================================
   MOVIMENTO
   ============================================================
   Durações eram decididas caso a caso (.15s aqui, .7s ali) e o site
   parecia montado por pessoas diferentes. Estes quatro tempos cobrem
   tudo: o que muda é o quanto o elemento se desloca, não a cadência.

   Regra que vale para todos: nada se move por enfeite. Ou a animação
   explica de onde a coisa veio, ou ela não existe.
   ============================================================ */
:root {
  --dur-instant: .12s;   /* estado de botão, hover                       */
  --dur-fast:    .22s;   /* abrir menu, trocar aba                       */
  --dur-base:    .38s;   /* entrada de cartão, gaveta                    */
  --dur-slow:    .62s;   /* revelação de seção ao rolar                  */
  --ease-io:     cubic-bezier(.4, 0, .2, 1);
}

/* ---------- revelação escalonada ----------
   Uma grade inteira aparecendo no mesmo instante parece um corte de
   vídeo. Com 45ms entre cartões o olho acompanha a ordem de leitura,
   e o atraso total fica abaixo de 300ms mesmo com oito itens. */
.js .reveal { transition-duration: var(--dur-slow); }
.js .reveal[style*="--i"] { transition-delay: calc(var(--i) * 45ms); }

/* Teto de 6 posições: a partir daí o atraso incomoda mais do que
   organiza, então os últimos entram junto. */
.js .reveal { --i: 0; }

/* ---------- micro-interações ---------- */
.pcard { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease); }
.pcard:hover { transform: translateY(-3px); }

/* A imagem cresce dentro da moldura em vez de a moldura crescer: o
   layout não mexe, então nada empurra o que está ao redor. */
.pcard-media { overflow: hidden; }
.pcard-media img { transition: none; }
.pcard:hover .pcard-media img { transform: none; }

/* Botão pressionado responde na hora — 120ms é o limite em que o
   toque ainda parece causa e efeito. */
.btn:active { transform: translateY(1px); transition-duration: var(--dur-instant); }

/* ---------- transição entre páginas ----------
   Navegar dentro da loja deixa de piscar branco. Só nos navegadores
   que suportam; nos outros, nada muda. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sairPagina var(--dur-fast) var(--ease-io) both; }
::view-transition-new(root) { animation: entrarPagina var(--dur-base) var(--ease-out) both; }

@keyframes sairPagina   { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes entrarPagina { from { opacity: 0; transform: translateY(10px); } }

/* ---------- quem pediu menos movimento recebe menos ----------
   O bloco que já existia zera duração; este desliga também o que a
   duração sozinha não alcança: deslocamento, escala e a transição de
   página inteira. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transition-delay: 0s !important; opacity: 1; transform: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard-media img { transform: none; }
  .btn:active { transform: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   BLOG
   ============================================================ */

/* ---------- barra de progresso da leitura ---------- */
.leitura-progresso {
  position: fixed; z-index: 90; top: 0; left: 0;
  width: 100%; height: 3px;
  background: transparent; pointer-events: none;
}
.leitura-progresso i {
  display: block; width: 0; height: 100%;
  background: var(--brand);
  transition: width .1s linear;
}

/* ---------- busca do blog ---------- */
.blog-busca {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 6px 6px 6px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.blog-busca:focus-within { border-color: var(--brand); background: var(--surface); }
.blog-busca .i { flex: none; color: var(--muted); }
.blog-busca input {
  flex: 1; min-width: 0; height: 40px;
  border: 0; background: transparent; font-size: 15px; color: var(--text);
}
.blog-busca input:focus { outline: none; }

.blog-resultado {
  display: flex; align-items: center; gap: 10px;
  margin: -8px 0 18px; font-size: 13.5px; color: var(--muted);
}

/* ---------- artigo em destaque ---------- */
/* Um artigo puxando a página, em vez de dez cartões iguais disputando
   atenção. Só existe na capa, sem filtro aplicado. */
.post-destaque {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0; margin-bottom: 28px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.post-destaque-img { display: block; min-height: 260px; }
.post-destaque-corpo { display: flex; flex-direction: column; gap: 12px; padding: 30px 32px; }
.post-destaque-corpo h3 { font-size: 27px; line-height: 1.18; letter-spacing: -.02em; }
.post-destaque-corpo h3 a { color: inherit; }
.post-destaque-corpo h3 a:hover { color: var(--brand); }
.post-destaque-corpo p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.post-destaque-corpo .btn { align-self: flex-start; margin-top: 4px; }

/* ---------- nuvem de assuntos ---------- */
.blog-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
}
.blog-tags b { width: 100%; margin-bottom: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- sumário do artigo ---------- */
.artigo-sumario {
  margin: 0 0 28px; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0; background: var(--surface-2);
}
.artigo-sumario b { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.artigo-sumario ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: sec; }
.artigo-sumario li { counter-increment: sec; }
.artigo-sumario li.nivel-3 { padding-left: 16px; }
.artigo-sumario a {
  display: block; padding: 5px 8px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.4; color: var(--text-2);
  transition: background var(--dur-instant) var(--ease), color var(--dur-instant) var(--ease);
}
.artigo-sumario a::before { content: counter(sec) '. '; color: var(--muted); }
.artigo-sumario a:hover { background: var(--surface); color: var(--brand); }
/* A seção em leitura fica marcada — é o que transforma o índice em
   bússola em vez de lista. */
.artigo-sumario a.on { background: var(--surface); color: var(--brand); font-weight: 600; }

/* Sem isto, clicar no índice deixa o título colado no topo, escondido
   atrás do cabeçalho fixo. */
.article-body h2, .article-body h3 { scroll-margin-top: 96px; }

/* ---------- vitrine dentro do artigo ---------- */
.artigo-produtos { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.artigo-produtos .grid-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}

/* ---------- anterior / próximo ---------- */
.artigo-vizinhos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line);
}
.vizinho {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.vizinho:hover { border-color: var(--brand); transform: translateY(-2px); }
.vizinho small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.vizinho b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.vizinho-prox { text-align: right; }
.vizinho-prox small { justify-content: flex-end; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .post-destaque { grid-template-columns: minmax(0, 1fr); }
  .post-destaque-img { min-height: 190px; }
  .post-destaque-corpo { padding: 22px 20px; }
  .post-destaque-corpo h3 { font-size: 22px; }
  .artigo-vizinhos { grid-template-columns: minmax(0, 1fr); }
  .vizinho-prox { text-align: left; }
  .vizinho-prox small { justify-content: flex-start; }
  .artigo-produtos .grid-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .leitura-progresso i { transition: none; }
  .vizinho:hover { transform: none; }
}

/* ---------- tipografia do artigo ---------- */
/* O resumo era centralizado como o título. Em cinco linhas no celular,
   texto centralizado obriga o olho a procurar o início de cada linha —
   funciona em legenda, não em parágrafo. */
.article-lead { text-align: left; max-width: 62ch; margin-inline: auto; }

/* Título não deixa uma palavra sozinha na última linha. */
.article-head h1,
.article-body h2,
.article-body h3 { text-wrap: balance; }
.article-body p { text-wrap: pretty; }

@media (max-width: 860px) {
  .article-head { text-align: left; }
  .article-head .article-meta { justify-content: flex-start; }
}

/* ---------- ficha do tutorial ---------- */
.artigo-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
  margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--surface);
}
.artigo-ficha > div { padding: 14px 16px; border-right: 1px solid var(--line); }
.artigo-ficha > div:last-child { border-right: 0; }
.artigo-ficha .i { color: var(--brand); margin-bottom: 4px; }
.artigo-ficha small { display: block; font-size: 11.5px; color: var(--muted); }
.artigo-ficha b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }

/* ---------- partes da série ---------- */
.artigo-serie {
  margin: 0 0 24px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.artigo-serie b { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13.5px; }
.artigo-serie b .i { color: var(--brand); }
.artigo-serie ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.artigo-serie li { font-size: 14px; line-height: 1.45; }
.artigo-serie li.on { font-weight: 600; color: var(--brand); }
.artigo-serie li.on::marker { color: var(--brand); }

/* ---------- isso ajudou? ---------- */
.artigo-util {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 36px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.artigo-util b { font-size: 14.5px; }
.artigo-util-btns { display: flex; gap: 8px; margin-left: auto; }
.artigo-util-msg { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--brand); }
.artigo-util-msg:empty { display: none; }
.artigo-util.respondido .artigo-util-btns { opacity: .45; }

/* ---------- assinatura do autor ---------- */
.artigo-autor {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 20px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r);
}
.artigo-autor img, .artigo-autor-ini {
  flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
}
.artigo-autor-ini {
  display: grid; place-items: center; background: var(--brand); color: var(--on-brand);
  font-weight: 700; font-size: 17px; text-transform: uppercase;
}
.artigo-autor b { display: block; font-size: 15px; }
.artigo-autor small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.artigo-autor p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 860px) {
  .artigo-ficha > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .artigo-ficha > div:last-child { border-bottom: 0; }
  .artigo-util-btns { margin-left: 0; }
}

/* ---------- página do autor ---------- */
.autor-capa {
  display: flex; align-items: flex-start; gap: 20px;
  margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.autor-capa img, .autor-capa .artigo-autor-ini { width: 84px; height: 84px; font-size: 26px; }
.autor-capa h1 { font-size: 30px; letter-spacing: -.02em; margin: 4px 0 2px; }
.autor-cargo { color: var(--brand); font-weight: 600; font-size: 14px; }
.autor-capa p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 6px; max-width: 62ch; }
.autor-total { font-size: 13px; }

.artigo-autor b a { color: inherit; }
.artigo-autor b a:hover, .artigo-serie b a:hover { color: var(--brand); }
.artigo-serie b a { color: inherit; }

/* ---------- página da série ---------- */
/* Numerada porque numa série a ordem é informação: a parte 3 supõe
   que a 1 foi lida. */
.serie-partes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.serie-partes a {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r);
  color: inherit; background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.serie-partes a:hover { border-color: var(--brand); transform: translateX(3px); }
.serie-num {
  flex: none; font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  color: var(--line-2); font-variant-numeric: tabular-nums;
}
.serie-partes a:hover .serie-num { color: var(--brand); }
.serie-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.serie-texto b { font-size: 16px; font-weight: 600; }
.serie-texto small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.serie-texto em { font-size: 12px; color: var(--muted); font-style: normal; }
.serie-seta { flex: none; color: var(--muted); }

@media (max-width: 860px) {
  .autor-capa { flex-direction: column; gap: 14px; }
  .autor-capa img, .autor-capa .artigo-autor-ini { width: 64px; height: 64px; font-size: 20px; }
  .autor-capa h1 { font-size: 24px; }
  .serie-partes a { gap: 14px; padding: 15px 16px; }
  .serie-num { font-size: 21px; }
  .serie-seta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .serie-partes a:hover { transform: none; }
}


/* Variação da marca para contraste no tema escuro */
:root[data-theme="dark"] .site-header .brand {
  display: block; flex: 0 0 210px; width: 210px; height: 51px;
  background: url("/assets/img/logo-odous-dark.svg?v=20261015") center / contain no-repeat;
}
:root[data-theme="dark"] .site-header .brand img { visibility: hidden; content: none; }
@media (max-width: 860px) { :root[data-theme="dark"] .site-header .brand { flex-basis: 170px; width: 170px; } }
@media (max-width: 480px) { :root[data-theme="dark"] .site-header .brand { flex-basis: 150px; width: 150px; } }