/* ============================================================================
   Notes and Tests — design system + home page
   ----------------------------------------------------------------------------
   Um arquivo, sem build, sem dependência. Serve a home (index.html).
   A página do review e as legais ainda carregam review.css, o skin antigo.

   Ordem das camadas declarada de propósito: com @layer o peso do seletor só
   compete dentro da própria camada, então um `.card p` em components nunca é
   atropelado por um `p` de base. É o que substitui a briga de especificidade.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ============================================================ reset ====== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;   /* iOS não aumenta a fonte no giro */
    -webkit-tap-highlight-color: transparent;
  }

  body { min-block-size: 100svh; }

  img, picture, svg, video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  /* Quebra palavra longa em vez de estourar a caixa no celular. */
  p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

  :where(ul, ol)[class] { list-style: none; padding-inline-start: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* =========================================================== tokens ====== */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* --- superfície: areia quente. Herdada do skin antigo de propósito,
       é o que dá continuidade visual entre a home nova e o review. ------- */
    --bg:          #FAF7F2;
    --surface:     #FFFFFF;
    --surface-2:   #F4F0E8;
    --surface-3:   #EDE7DC;
    --line:        #E4DDD0;
    --line-soft:   #EFE9DF;

    /* --- tinta --- */
    --text:        #14181D;
    --muted:       #56606B;
    --dim:         #868E98;

    /* --- acento: verde profundo, contraste AA sobre --bg e sobre branco - */
    --accent:      #0E7250;
    --accent-deep: #0A5A3F;
    --accent-wash: color-mix(in oklab, var(--accent) 7%, transparent);
    --accent-edge: color-mix(in oklab, var(--accent) 28%, transparent);
    --on-accent:   #FFFFFF;

    --focus:       #0E7250;

    /* --- tipografia --- */
    --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Escala fluida. O clamp interpola entre 360px e 1280px de viewport, então
       não há salto em breakpoint: o tablet recebe o tamanho intermediário real
       em vez do tamanho do celular esticado. */
    --step--1: clamp(0.79rem, 0.77rem + 0.09vw,  0.84rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw,  1.13rem);
    --step-1:  clamp(1.25rem, 1.17rem + 0.38vw,  1.52rem);
    --step-2:  clamp(1.56rem, 1.42rem + 0.68vw,  2.05rem);
    --step-3:  clamp(1.95rem, 1.71rem + 1.16vw,  2.77rem);
    --step-4:  clamp(2.44rem, 2.05rem + 1.90vw,  3.73rem);
    --step-5:  clamp(3.05rem, 2.44rem + 2.98vw,  5.05rem);

    /* --- métrica --- */
    --gutter: clamp(1.125rem, 4.5vw, 4rem);
    --maxw:   1180px;
    --maxw-prose: 68ch;
    --radius:    4px;
    --radius-lg: 10px;

    --space-section: clamp(3.5rem, 8vw, 7rem);

    --shadow-sm: 0 1px 2px color-mix(in oklab, var(--text) 6%, transparent);
    --shadow-md: 0 2px 4px color-mix(in oklab, var(--text) 5%, transparent),
                 0 8px 24px -12px color-mix(in oklab, var(--text) 18%, transparent);

    --ease: cubic-bezier(0.2, 0, 0, 1);
  }

  /* Modo escuro por preferência do sistema. Não é o mesmo tema com filtro:
     o verde clareia porque o mesmo #0E7250 sobre fundo escuro reprova em
     contraste, e as superfícies sobem em degraus para manter a hierarquia. */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:          #101316;
      --surface:     #171B1F;
      --surface-2:   #1D2226;
      --surface-3:   #252B30;
      --line:        #2C3339;
      --line-soft:   #242A30;

      --text:        #ECEEF0;
      --muted:       #A2ACB5;
      --dim:         #7C868F;

      --accent:      #3CBF8E;
      --accent-deep: #59D3A5;
      --accent-wash: color-mix(in oklab, var(--accent) 11%, transparent);
      --accent-edge: color-mix(in oklab, var(--accent) 34%, transparent);
      --on-accent:   #06231A;

      --focus:       #59D3A5;

      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.7);
    }
  }
}

/* ============================================================= base ====== */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.62;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.022em;
    text-wrap: balance;          /* impede a viúva de uma palavra no título */
  }

  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
  h4 { font-size: var(--step-0); letter-spacing: 0; }

  p { text-wrap: pretty; }

  /* Sem sublinhado por padrão, e o link de texto puro escolhe voltar a ter.
     Precisa ser explícito: qualquer <a class="..."> — botão, item de nav, card —
     herdaria o sublinhado do navegador se este reset não existisse. */
  a { color: inherit; text-decoration: none; }

  a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: var(--accent-edge);
    transition: text-decoration-color 0.15s var(--ease);
  }
  a:not([class]):hover { text-decoration-color: currentColor; }

  strong, b { font-weight: 650; }

  code, kbd { font-family: var(--mono); font-size: 0.9em; }

  ::selection {
    background: var(--accent);
    color: var(--on-accent);
  }

  /* Um anel único no site inteiro, e só no foco por teclado. */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Âncora não para embaixo do header fixo. */
  [id] { scroll-margin-block-start: 6rem; }

  ::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 99px;
  }
}

/* =========================================================== layout ====== */
@layer layout {
  .wrap {
    inline-size: min(100% - (var(--gutter) * 2), var(--maxw));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-section); }

  .section + .section { padding-block-start: 0; }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-inline-size: var(--maxw-prose);
    margin-block-end: clamp(2rem, 4vw, 3.25rem);
  }

  .section-head > p:last-child {
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.5;
  }

  /* Grade que se adapta sozinha. O min() interno é o que evita o overflow
     horizontal quando a viewport é menor que o minmax. */
  .grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .grid-2 {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    border-radius: var(--radius);
    translate: 0 -180%;
  }
  .skip-link:focus-visible { translate: 0 0; }
}

/* ======================================================= components ====== */
@layer components {

  /* ------------------------------------------------------------ header -- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    border-block-end: 1px solid var(--line);
  }

  /* backdrop-filter só onde é suportado: sem o @supports, o navegador que
     não tem cai num header semitransparente e o texto passa por baixo. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header {
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      backdrop-filter: saturate(180%) blur(14px);
    }
  }

  .site-header > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 4rem;
    flex-wrap: wrap;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .brand .dot {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    background: var(--accent);
    border-radius: 2px;
    rotate: 45deg;
    flex: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2.2vw, 1.6rem);
    flex-wrap: wrap;
    font-size: var(--step--1);
    font-weight: 500;
  }

  .site-nav a {
    color: var(--muted);
    text-decoration: none;
    padding-block: 0.35rem;
    border-block-end: 1.5px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  }

  .site-nav a:hover { color: var(--text); }

  .site-nav a[aria-current] {
    color: var(--text);
    border-block-end-color: var(--accent);
  }

  /* ------------------------------------------------------------ intro --- */
  /* A home é um índice, não uma página de venda: a apresentação ocupa o mínimo
     necessário para o visitante saber onde caiu, e os cards começam alto. */
  .intro {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
    border-block-end: 1px solid var(--line);
    background:
      radial-gradient(80ch 40ch at 12% -10%, var(--accent-wash), transparent 70%);
  }

  .intro h1 {
    font-size: var(--step-4);
    max-inline-size: 20ch;
    margin-block: 1.1rem 0;
  }

  .intro h1 em {
    font-style: normal;
    color: var(--accent);
  }

  .intro .lede {
    max-inline-size: 62ch;
    margin-block-start: 1.5rem;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--muted);
  }

  .intro .lede-sub {
    max-inline-size: 62ch;
    margin-block-start: 0.9rem;
    color: var(--muted);
  }

  .eyebrow {
    display: flex;
    /* baseline, não center: quando o texto quebra em duas linhas no celular,
       `center` joga o quadradinho para o meio do bloco inteiro. */
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .eyebrow .tick { color: var(--accent); font-size: 0.7em; }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2.25rem;
  }

  /* ------------------------------------------------------------ button -- */
  .btn {
    --_bg: var(--accent);
    --_fg: var(--on-accent);
    --_bd: var(--accent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    /* 48px de alvo de toque: abaixo disso o dedo erra no celular. */
    min-block-size: 3rem;
    padding-inline: 1.4rem;
    background: var(--_bg);
    color: var(--_fg);
    border: 1.5px solid var(--_bd);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
                translate 0.16s var(--ease);
  }

  .btn:hover { --_bg: var(--accent-deep); --_bd: var(--accent-deep); translate: 0 -1px; }
  .btn:active { translate: 0 0; }

  .btn .arrow { transition: translate 0.16s var(--ease); }
  .btn:hover .arrow { translate: 3px 0; }

  .btn-ghost {
    --_bg: transparent;
    --_fg: var(--text);
    --_bd: var(--line);
  }
  .btn-ghost:hover { --_bg: var(--surface-2); --_fg: var(--text); --_bd: var(--accent-edge); }

  /* -------------------------------------------------------- fact strip -- */
  /* 16rem é escolhido, não arbitrário: com a --maxw de 1180px o auto-fit dá 4
     colunas no desktop e 2 no tablet, nunca 3 — e 3 colunas para 4 itens deixa
     uma célula órfã na segunda linha. */
  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Divisória por borda da célula, com -1px para a primeira de cada eixo
     desaparecer sob a borda do container. O truque de `gap` com fundo colorido
     é mais curto, mas pinta a área vazia da última linha quando a grade não
     fecha — que é exatamente o que acontece em largura de tablet. */
  .facts > div {
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    border-block-start: 1px solid var(--line);
    border-inline-start: 1px solid var(--line);
    margin-block-start: -1px;
    margin-inline-start: -1px;
  }

  .facts dt {
    font-family: var(--mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dim);
  }

  .facts dd {
    margin-block-start: 0.45rem;
    font-family: var(--display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  /* ------------------------------------------------------------- card --- */
  .card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.35rem, 3vw, 1.9rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .card .num {
    font-family: var(--mono);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--accent);
  }

  .card h3 { text-wrap: balance; }

  .card p {
    color: var(--muted);
    font-size: var(--step--1);
    line-height: 1.65;
  }

  /* -------------------------------------------------------- review card - */
  /* auto-FILL e não auto-fit: com auto-fit as trilhas vazias colapsam e o
     único card existente esticaria na largura toda da página, parecendo um
     banner. Com auto-fill a trilha vazia continua ocupando espaço, então um
     card sozinho fica do tamanho que terá quando houver seis. */
  .review-grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.65rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    align-items: stretch;
  }

  .review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
                translate 0.18s var(--ease);
  }

  /* :has() faz o card inteiro reagir ao link de dentro, sem JS e sem envolver
     o bloco todo num <a> — o que enfiaria títulos e listas dentro de um link. */
  .review-card:has(a:hover),
  .review-card:has(a:focus-visible) {
    border-color: var(--accent-edge);
    box-shadow: var(--shadow-md);
    translate: 0 -2px;
  }

  .review-card .shot-link { display: block; }

  .review-card .shot {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 45%;
    background: var(--surface-2);
    border-block-end: 1px solid var(--line);
  }

  .review-card .body {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.8rem;
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    /* empurra a meta-line para a base: cards de alturas diferentes na mesma
       linha terminam alinhados. */
    block-size: 100%;
  }

  .review-card h3 { font-size: var(--step-2); }

  /* O `color` explícito é necessário: sem classe, este <a> casa com a regra
     `a:not([class])` da camada base e sairia verde já em repouso. O acento
     fica reservado para o hover, que é onde ele informa alguma coisa. */
  .review-card h3 a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s var(--ease);
  }
  .review-card h3 a:hover { color: var(--accent); }

  /* O título estende a área de clique ao card inteiro. Fica no título e não
     num wrapper para o leitor de tela anunciar um link só, com nome útil. */
  .review-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .review-card .excerpt { color: var(--muted); font-size: var(--step--1); line-height: 1.65; }

  .review-card .meta-line { margin-block-start: auto; padding-block-start: 0.3rem; }

  /* ---- vaga vazia: mesma caixa, sem peso visual de conteúdo publicado --- */
  .review-card.is-empty {
    /* align-self: start tira este card do esticamento da linha. Sem isso ele
       acompanha a altura do card publicado e sobra um vão morto no meio. */
    align-self: start;
    background: transparent;
    border-style: dashed;
    box-shadow: none;
  }
  .review-card.is-empty .body { block-size: auto; }
  .review-card.is-empty:has(a:hover) { translate: 0; box-shadow: none; }
  .review-card.is-empty h3 { font-size: var(--step-1); color: var(--muted); }
  .empty-action { margin-block-start: auto; padding-block-start: 0.3rem; }

  /* Veredito e categoria na mesma linha. Com vários segmentos no mesmo índice,
     a categoria é o que deixa a grade escaneável — sem ela, seis cards de
     assuntos diferentes viram uma lista indistinta. */
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    inline-size: 100%;
  }

  .category {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
  }

  .verdict-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: start;
    padding: 0.28rem 0.65rem;
    background: var(--accent-wash);
    border: 1px solid var(--accent-edge);
    border-radius: 99px;
    font-family: var(--mono);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .verdict-tag.muted-tag {
    background: transparent;
    border-color: var(--line);
    color: var(--dim);
  }

  /* Ficha técnica em duas colunas: rótulo em cima, valor embaixo. Varre-se
     mais rápido do que a mesma informação corrida numa linha. */
  .spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    inline-size: 100%;
    padding-block: 0.35rem;
    border-block: 1px solid var(--line-soft);
    margin-block: 0.15rem;
  }

  .spec-grid dt {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dim);
  }

  .spec-grid dd {
    margin-block-start: 0.15rem;
    font-weight: 650;
    font-size: var(--step--1);
  }

  .meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-family: var(--mono);
    font-size: var(--step--1);
    color: var(--dim);
  }

  /* --------------------------------------------------------- callout ---- */
  .callout {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.25rem, 3vw, 1.85rem);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
  }

  .callout p { color: var(--muted); }
  .callout p strong { color: var(--text); }

  /* ------------------------------------------------------- check list --- */
  .check-list { display: flex; flex-direction: column; gap: 0.85rem; }

  .check-list li {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    gap: 0.75rem;
    align-items: start;
    color: var(--muted);
  }

  .check-list li::before {
    content: "";
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-block-start: 0.5rem;
    border-radius: 1px;
    rotate: 45deg;
    background: var(--accent);
  }

  .check-list.negative li::before { background: var(--dim); }

  .check-list b { color: var(--text); }

  /* ------------------------------------------------------------ footer -- */
  .site-footer {
    margin-block-start: var(--space-section);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    background: var(--surface-2);
    border-block-start: 1px solid var(--line);
    font-size: var(--step--1);
  }

  .footer-grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  .footer-grid > div:first-child { grid-column: span 2; }

  @media (width < 48rem) {
    .footer-grid > div:first-child { grid-column: auto; }
  }

  .site-footer h2 {
    font-size: var(--step--1);
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dim);
    margin-block-end: 0.9rem;
  }

  .site-footer p { color: var(--muted); max-inline-size: 60ch; }
  .site-footer p + p { margin-block-start: 0.8rem; }

  .site-footer ul { display: flex; flex-direction: column; gap: 0.55rem; }

  .site-footer ul a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s var(--ease);
  }
  .site-footer ul a:hover { color: var(--accent); }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding-block-start: 1.35rem;
    border-block-start: 1px solid var(--line);
    color: var(--dim);
  }
}

/* ======================================================== utilities ====== */
@layer utilities {
  .prose-w { max-inline-size: var(--maxw-prose); }
  .muted   { color: var(--muted); }
  .center  { text-align: center; margin-inline: auto; }

  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Transição entre páginas no navegador que suporta. Sem isto o site continua
   idêntico — é enfeite progressivo, não dependência. */
@view-transition { navigation: auto; }

/* Impressão: sem header fixo, sem fundo, links com o destino visível. */
@media print {
  .site-header, .skip-link, .actions { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Ressalva do card: alegação do fabricante nunca aparece sem a etiqueta. */
.card-fineprint {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--dim);
}