/* Protótipo da página de entrada vinda dos Shorts (03/11/2026). Dados de exemplo. */
  @font-face {
    font-family: "Outfit";
    src: url("../assets/fonts/Outfit-Variable.woff2") format("woff2");
    font-weight: 100 900;
  }
  * { box-sizing: border-box; margin: 0; }
  body {
    font: var(--text-body);
    background: var(--background);
    color: var(--foreground);
    padding-bottom: 96px;
  }
  .wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--s-4); }

  .topo {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 var(--s-4);
    background: var(--background); border-bottom: 1px solid var(--border);
  }
  .topo img { height: 22px; }
  .selo {
    font: var(--text-caption); color: var(--warning-soft-foreground);
    background: var(--warning-soft); padding: 2px var(--s-2); border-radius: var(--r-full);
  }

  .origem {
    margin-top: var(--s-4); font: var(--text-caption); color: var(--muted-foreground);
  }
  h1 { font: 600 26px/31px var(--font-sans); letter-spacing: -0.02em; margin-top: var(--s-2); }

  .foto {
    margin-top: var(--s-4); background: var(--surface); border-radius: var(--r-node);
    aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  }
  .foto img { width: 82%; height: auto; }

  .produto { margin-top: var(--s-4); font: var(--text-h3); letter-spacing: var(--tracking-h3); }
  .perfil {
    display: inline-block; margin-top: var(--s-2); font: var(--text-caption);
    background: var(--accent); color: var(--accent-foreground);
    padding: 2px var(--s-2); border-radius: var(--r-full);
  }

  .preco { margin-top: var(--s-4); font: var(--text-price); letter-spacing: var(--tracking-price); }
  .preco sup { font-size: 16px; }
  .parcela { color: var(--muted-foreground); }

  .criterios { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-node); }
  .criterios h2, .bloco h2 { font: var(--text-h3); letter-spacing: var(--tracking-h3); }
  .criterios ul { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-3); }
  .criterios li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); }
  .criterios li::before {
    content: ""; width: 10px; height: 10px; margin: 7px 0 0 4px;
    border-radius: var(--r-full); background: var(--brand-ciano);
  }
  .criterios strong { font-weight: 600; }
  .contra { margin-top: var(--s-3); color: var(--muted-foreground); font: var(--text-caption); }

  .bloco { margin-top: var(--s-6); }
  .aviso { margin-top: var(--s-2); font: var(--text-caption); color: var(--muted-foreground); }

  .lojas { list-style: none; padding: 0; margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-node); }
  .lojas li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 64px; padding: var(--s-3) var(--s-4);
  }
  .lojas li + li { border-top: 1px solid var(--border); }
  .lojas .nome { font-weight: 600; }
  .lojas .valor { font-weight: 600; }
  .lojas .valor small { display: block; font: var(--text-caption); color: var(--muted-foreground); font-weight: 400; }
  .btn-sec {
    font: var(--text-ui); min-height: 44px; padding: 0 var(--s-4);
    border-radius: var(--r-full); border: 1px solid var(--border);
    background: var(--card); color: var(--card-foreground);
  }

  .alts { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--s-3) calc(var(--s-4) * -1) 0; padding: 0 var(--s-4) var(--s-2); }
  .alt {
    flex: 0 0 72%; scroll-snap-align: start; padding: var(--s-4);
    border: 1px solid var(--border); border-radius: var(--r-node); background: var(--card);
  }
  .alt .tag { font: var(--text-caption); color: var(--muted-foreground); }
  .alt .n { font-weight: 600; margin-top: var(--s-1); }
  .alt .v { margin-top: var(--s-2); font-weight: 600; }
  .alt p { font: var(--text-caption); color: var(--muted-foreground); margin-top: var(--s-1); }

  details { margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-node); }
  summary { min-height: 56px; display: flex; align-items: center; padding: 0 var(--s-4); font-weight: 600; cursor: pointer; }
  dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); padding: 0 var(--s-4) var(--s-4); }
  dt { color: var(--muted-foreground); }

  .notas { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); font: var(--text-note); color: var(--muted-foreground); display: grid; gap: var(--s-2); }

  .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--background); border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
  }
  .barra .p { line-height: 1.2; }
  .barra .p strong { display: block; font-size: 20px; font-weight: 600; }
  .barra .p span { font: var(--text-caption); color: var(--muted-foreground); }
  .btn {
    flex: 1; min-height: 52px; border: 0; border-radius: var(--r-full);
    background: var(--primary); color: var(--primary-foreground);
    font: 600 17px/1 var(--font-sans);
  }
  @media (min-width: 768px) {
    .barra { justify-content: center; }
    .btn { flex: 0 0 320px; }
  }

  /* Logo por tema (mesma regra de components.css) */
  .topo a { display: inline-flex; align-items: center; min-height: 44px; }
  .tp-logo-dark { display: none; }
  [data-theme="dark"] .tp-logo-light { display: none; }
  [data-theme="dark"] .tp-logo-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tp-logo-light { display: none; }
    :root:not([data-theme="light"]) .tp-logo-dark { display: block; }
  }

  /* Home */
  .home { padding-bottom: 0; }
  .hero { padding-top: var(--s-5); }
  .hero p { margin-top: var(--s-2); color: var(--muted-foreground); }

  .perfis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1);
    margin-top: var(--s-4); padding: var(--s-1);
    background: var(--surface); border-radius: var(--r-full);
  }
  .perfis button {
    min-height: 44px; border: 0; border-radius: var(--r-full);
    background: transparent; color: var(--muted-foreground); font: var(--text-ui);
  }
  .perfis button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-node); font-weight: 600; }

  .cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
  .cabeca a { font: var(--text-ui); color: var(--link); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

  .escolhas { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-3); }
  .card {
    display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3);
    padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-node); background: var(--card);
  }
  .card .img { background: var(--surface); border-radius: var(--radius); display: grid; place-items: center; aspect-ratio: 1; }
  .card .img img { width: 88%; height: auto; }
  .card .pos { font: var(--text-caption); color: var(--muted-foreground); }
  .card .n { font-weight: 600; line-height: 1.25; }
  .card .c { font: var(--text-caption); color: var(--muted-foreground); margin-top: var(--s-1); }
  .card .v { font-weight: 600; margin-top: var(--s-2); }
  .card .acoes { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 3fr; gap: var(--s-2); }
  .card .acoes .btn, .card .acoes .btn-sec { min-height: 44px; font: 600 15px/1 var(--font-sans); text-decoration: none; display: grid; place-items: center; }

  .cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
  .cat {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    padding: var(--s-3); min-height: 120px; text-decoration: none; color: var(--foreground);
    background: var(--surface); border-radius: var(--r-node); font-weight: 600;
  }
  .cat img { width: 64px; height: 64px; object-fit: contain; }
  .cat:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 88px; }

  .videos .alt { flex-basis: 46%; text-decoration: none; color: var(--foreground); }
  .play { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface); margin-bottom: var(--s-2); }
  .play img { width: 80%; }

  .passos { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-2); counter-reset: p; }
  .passos li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .passos li::before {
    counter-increment: p; content: counter(p);
    width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center;
    background: var(--accent); color: var(--accent-foreground); font-weight: 600;
  }
  .passos strong { display: block; }
  .passos span { color: var(--muted-foreground); font: var(--text-caption); }

  .rodape { margin-top: var(--s-6); padding: var(--s-5) 0 var(--s-6); background: var(--surface); }

  .tp-skip { position: absolute; left: var(--s-2); top: -100px; z-index: 20; padding: var(--s-2) var(--s-3); background: var(--card); color: var(--foreground); border-radius: var(--radius); }
  .tp-skip:focus { top: var(--s-2); }
  main[tabindex="-1"]:focus { outline: none; }

  .lojas li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome btn" "valor btn"; row-gap: 2px; }
  .lojas li > div { grid-area: nome; }
  .lojas .valor { grid-area: valor; white-space: nowrap; }
  .lojas .valor small { display: inline; margin-left: var(--s-2); }
  .lojas .btn-sec { grid-area: btn; white-space: nowrap; }

  /* Home no tablet e no desktop: a mesma página, ampliada (03-design-system.md, seção 0) */
  @media (min-width: 768px) {
    .home .wrap { max-width: 1120px; padding: 0 var(--s-5); }
    .home .topo { padding: 0 max(var(--s-5), calc((100% - 1120px) / 2 + var(--s-5))); height: 64px; }
    .home .topo img { height: 26px; }
    .home .hero { padding-top: var(--s-6); max-width: 800px; }
    .home h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
    .home .hero p { font: var(--text-lead); letter-spacing: var(--tracking-lead); }
    .home .perfis { max-width: 520px; }
    .home .bloco { margin-top: var(--s-7); }
    .home .bloco h2 { font: 600 28px/34px var(--font-sans); letter-spacing: -0.02em; }

    .escolhas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
    .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: var(--s-4); }
    .card .img { aspect-ratio: 4 / 3; }
    .card .acoes { grid-template-columns: 1fr; }

    .videos .alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); overflow: visible; margin: var(--s-3) 0 0; padding: 0; }
    .videos .alt { flex: none; }
    .videos .play { aspect-ratio: 16 / 10; }
    .videos .play { overflow: hidden; }
    .videos .play img { width: auto; height: auto; max-width: 70%; max-height: 80%; object-fit: contain; }

    .cats { grid-template-columns: repeat(5, 1fr); }
    .cat:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; min-height: 120px; }
    .cat { min-height: 140px; justify-content: center; }
    .cat img { width: 80px; height: 80px; }

    .passos { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
    .passos li { border: 1px solid var(--border); border-radius: var(--r-node); padding: var(--s-4); }

    .home .notas { max-width: 760px; }
  }

  @media (min-width: 1024px) {
    .card { grid-template-columns: 120px 1fr; grid-template-rows: auto; }
    .card .img { aspect-ratio: 1; }
    .card .acoes { grid-template-columns: 2fr 3fr; }
    .card .acoes .btn, .card .acoes .btn-sec { font-size: 14px; }
  }

  /* Busca */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .busca { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
  .busca input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--s-4);
    font: 400 16px/1 var(--font-sans); color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--r-full);
  }
  .busca input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
  .busca .btn { flex: 0 0 auto; min-height: 48px; padding: 0 var(--s-5); font-size: 16px; }
  .resultado { margin-top: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-node); background: var(--card); display: grid; gap: var(--s-2); }
  .res-t { font-weight: 600; }
  .res-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center; min-height: 64px; color: var(--foreground); text-decoration: none; border-top: 1px solid var(--border); padding-top: var(--s-2); }
  .res-item img { width: 56px; height: 56px; object-fit: contain; background: var(--surface); border-radius: var(--radius); }
  .res-item small { display: block; font: var(--text-caption); color: var(--muted-foreground); }
  .vazio { display: grid; gap: var(--s-3); }
  .vazio p:not(.res-t):not(.aviso) { color: var(--muted-foreground); }
  .vazio .btn { display: grid; place-items: center; text-decoration: none; padding: 0 var(--s-4); text-align: center; line-height: 1.2; }
  .vazio .aviso { margin-top: 0; }
  @media (min-width: 768px) { .busca, .resultado { max-width: 640px; } }

  /* Níveis e estrelas (01-metodologia-recomendacao.md, seção 0) */
  .estrelas { display: flex; align-items: center; gap: var(--s-1); font: var(--text-caption); color: var(--muted-foreground); margin-top: 2px; }
  .estrelas .e {
    position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px;
    color: var(--border);
  }
  .estrelas .e::before { content: "★★★★★"; }
  .estrelas .e::after {
    content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--v); overflow: hidden; white-space: nowrap;
    color: var(--warning);
  }
  .card .pos { font-weight: 600; color: var(--foreground); }
  .card.destaque { border-color: var(--brand-ciano); box-shadow: 0 0 0 1px var(--brand-ciano); }
  .card.destaque .pos { color: var(--accent-foreground); }

  /* Página de produto: níveis, estrelas e telas maiores */
  .rotulos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
  .rotulos .perfil { margin-top: 0; }
  .perfil.nivel { background: var(--brand-ciano); color: var(--brand-preto); font-weight: 600; }
  .estrelas.grande { margin-top: var(--s-3); font: var(--text-ui); color: var(--foreground); }
  .estrelas.grande .e { font-size: 20px; }
  .base-estrelas { font: var(--text-caption); color: var(--muted-foreground); margin-top: var(--s-1); }
  .btn-inline { display: none; }
  .alt .estrelas { margin-top: var(--s-1); }

  @media (min-width: 768px) {
    .pagina-produto .wrap { max-width: 1120px; padding: 0 var(--s-5); }
    .pagina-produto .topo { padding: 0 max(var(--s-5), calc((100% - 1120px) / 2 + var(--s-5))); height: 64px; }
    .pagina-produto h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
    .prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
    .prod-foto { position: sticky; top: 88px; }
    .prod .foto, .prod .produto { margin-top: 0; }
    .pagina-produto .bloco { margin-top: var(--s-7); }
    .pagina-produto .lojas { max-width: 720px; }
    .pagina-produto .alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: var(--s-3) 0 0; padding: 0; max-width: 720px; }
    .pagina-produto .alt { flex: none; }
    .pagina-produto details, .pagina-produto .notas { max-width: 720px; }
  }

  @media (min-width: 1024px) {
    .prod { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  }

  .resultado[hidden] { display: none; }

  /* Cabeçalho com lupa e menu de categorias */
  .faixa { font: var(--text-caption); text-align: center; padding: var(--s-1) var(--s-4); background: var(--warning-soft); color: var(--warning-soft-foreground); }
  .topo { gap: var(--s-2); }
  .topo-logo { flex-shrink: 0; }
  .topo-acoes { display: flex; align-items: center; gap: var(--s-1); }
  .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .topo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
    min-width: 44px; min-height: 44px; padding: 0 var(--s-2);
    background: transparent; border: 0; border-radius: var(--r-full);
    color: var(--foreground); font: var(--text-ui); cursor: pointer;
  }
  .topo-btn:hover, .topo-btn[aria-expanded="true"] { background: var(--surface); }
  .seta { width: 16px; height: 16px; transition: transform .15s; }
  .cat-btn[aria-expanded="true"] .seta { transform: rotate(180deg); }

  .topo-busca { display: none; }
  .topo-busca.aberta {
    display: flex; align-items: center;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--s-3) var(--s-4); background: var(--background); border-bottom: 1px solid var(--border);
  }
  .topo-busca .ico { position: absolute; left: calc(var(--s-4) + 14px); color: var(--muted-foreground); pointer-events: none; }
  .topo-busca input {
    flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--s-4) 0 42px;
    font: 400 16px/1 var(--font-sans); color: var(--foreground);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  }
  .topo-busca input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }

  .lista-cat {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 6;
    list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-3);
    background: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lift);
  }
  .lista-cat[hidden] { display: none; }
  .lista-cat a {
    display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-2);
    color: var(--foreground); text-decoration: none; font-weight: 500; border-radius: var(--radius);
  }
  .lista-cat a:hover { background: var(--surface); }
  .lista-cat img { width: 36px; height: 36px; object-fit: contain; }

  @media (min-width: 768px) {
    .lupa { display: none; }
    .topo-acoes { flex: 1; justify-content: flex-end; gap: var(--s-3); }
    .topo-busca, .topo-busca.aberta {
      display: flex; align-items: center; position: relative; top: auto; left: auto; right: auto;
      padding: 0; border: 0; background: none; flex: 0 1 360px;
    }
    .topo-busca .ico { left: 14px; }
    .menu-cat { position: relative; }
    .lista-cat {
      left: auto; right: 0; top: calc(100% + var(--s-2)); width: 260px;
      padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-node);
    }
  }

  /* Busca do meio da home: mais discreta que a do cabeçalho (pedido de Augusto, 03/11/2026) */
  .busca { margin-top: var(--s-3); }
  .busca input { min-height: 44px; background: var(--surface); border-color: transparent; font-size: 15px; }
  .busca .btn {
    min-height: 44px; padding: 0 var(--s-4); font: var(--text-ui); font-weight: 500;
    background: transparent; color: var(--muted-foreground); border: 1px solid var(--border);
  }
  .busca .btn:hover { color: var(--foreground); }

  /* Categorias com as imagens novas (quadradas, 3 modelos cada): maiores e com destaque */
  .cat {
    padding: var(--s-2) var(--s-2) var(--s-3); gap: var(--s-1); min-height: 0;
    background: linear-gradient(180deg, var(--accent) 0%, var(--surface) 100%);
    border: 1px solid var(--border); font: 600 16px/1.2 var(--font-sans);
    transition: transform .15s, box-shadow .15s;
  }
  .cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .cat img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
  .cat:last-child:nth-child(odd) { flex-direction: row; justify-content: flex-start; gap: var(--s-4); min-height: 0; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); }
  .cat:last-child:nth-child(odd) img { width: 45%; }
  .lista-cat img { width: 44px; height: 44px; }
  @media (min-width: 768px) {
    .cat { min-height: 0; justify-content: flex-start; }
    .cat img { width: 100%; height: auto; }
    .cat:last-child:nth-child(odd) { flex-direction: column; padding: var(--s-2) var(--s-2) var(--s-3); gap: var(--s-1); }
    .cat:last-child:nth-child(odd) img { width: 100%; }
  }
  .cat img { aspect-ratio: auto; }

  /* Apoio do Resumo do RI (mesmo bloco de components.css) */
  .tp-ft-apoio { display: flex; align-items: center; gap: var(--s-3); max-width: 34ch; margin-top: var(--s-4); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--foreground); text-decoration: none; background: var(--background); }
  .tp-ft-apoio img { width: 48px; height: 48px; border-radius: var(--r-full); flex-shrink: 0; }
  .tp-ft-apoio > span { display: flex; flex-direction: column; gap: 2px; }
  .tp-ft-apoio-t { font: var(--text-ui); font-weight: 600; }
  .tp-ft-apoio-d { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }

  .topo-logo img { height: 22px; width: auto; }

  /* Preenchimento das estrelas: o JS grava o valor real a partir de data-v */
  .estrelas .e { --v: 0%; }

  /* Como escolhemos: fluxo vertical no celular, lado a lado no computador (03/11/2026) */
  .como-sub { margin-top: var(--s-1); color: var(--muted-foreground); }
  .fluxo {
    margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-panel);
    background-color: var(--surface);
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1.4px);
    background-size: var(--grid) var(--grid);
  }
  .fluxo-entrada {
    position: relative; padding: var(--s-4); border-radius: var(--r-node);
    background: var(--card); border: 1px solid var(--brand-ciano); box-shadow: var(--shadow-node);
  }
  .fluxo-rot { font: var(--text-caption); color: var(--accent-foreground); font-weight: 600; }
  .fluxo-t { margin-top: var(--s-1); font: var(--text-h3); letter-spacing: var(--tracking-h3); }
  .fluxo-d { margin-top: var(--s-1); font: var(--text-caption); color: var(--muted-foreground); }
  .fluxo-passos { position: relative; list-style: none; margin: 0; padding: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
  /* Linha que liga a entrada aos passos, com um pulso ciano descendo */
  .fluxo-passos::before {
    content: ""; position: absolute; left: 19px; top: 0; bottom: 24px; width: 2px;
    background: linear-gradient(var(--brand-ciano), var(--border));
  }
  .fluxo-passos::after {
    content: ""; position: absolute; left: 17px; top: 0; width: 6px; height: 36px; border-radius: var(--r-full);
    background: var(--brand-ciano); box-shadow: 0 0 10px var(--brand-ciano);
    animation: fluxo-pulso 3.2s var(--ease-io, ease-in-out) infinite;
  }
  @keyframes fluxo-pulso { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 60px); opacity: 0; } }
  .fluxo-passos li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; }
  .fluxo-num {
    position: relative; z-index: 1; width: 40px; height: 40px; border-radius: var(--r-full);
    display: grid; place-items: center; font-weight: 600;
    background: var(--card); color: var(--accent-foreground); border: 2px solid var(--brand-ciano);
  }
  .fluxo-passos li > div { padding: var(--s-3) var(--s-4); border-radius: var(--r-node); background: var(--card); box-shadow: var(--shadow-node); }
  .fluxo-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
  .fluxo-cab strong { font-weight: 600; line-height: 1.3; }
  .fluxo-tag { flex-shrink: 0; font: var(--text-caption); font-weight: 600; padding: 2px var(--s-2); border-radius: var(--r-full); background: var(--accent); color: var(--accent-foreground); }
  .fluxo-passos p { margin-top: var(--s-1); font: var(--text-caption); color: var(--muted-foreground); }
  .como-nota { margin-top: var(--s-3); font: var(--text-caption); color: var(--muted-foreground); }


  /* Rodapé: mesmas logos, ícones e linha final do site; o resto reorganizado para o celular */
  .rodape { --ft-gap: var(--s-5); margin-top: var(--s-7); padding: var(--s-6) 0 var(--s-5); background: var(--background); border-top: 1px solid var(--border); color: var(--muted-foreground); font: var(--text-note); }
  .ft-marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .ft-marca .tp-ft-apoio { margin-top: var(--s-2); background: var(--surface); }
  .ft-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
  .ft-h { font: var(--text-ui); font-weight: 600; color: var(--foreground); margin-bottom: var(--s-1); }
  .ft-links ul { list-style: none; margin: 0; padding: 0; }
  .ft-links li { min-height: 44px; display: flex; align-items: center; }
  .ft-links a { color: var(--muted-foreground); text-decoration: none; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
  .ft-links a:hover { color: var(--foreground); }
  .ft-breve { gap: var(--s-2); font-size: 15px; flex-wrap: wrap; }
  .ft-breve span { font: var(--text-note); font-weight: 500; padding: 2px var(--s-2); border-radius: var(--r-full); background: var(--secondary); color: var(--secondary-foreground); }
  .ft-aviso { margin-top: var(--s-6); padding: var(--s-4); border-radius: var(--r-node); background: var(--surface); }
  .ft-aviso-t { font: var(--text-h3); letter-spacing: var(--tracking-h3); color: var(--foreground); margin-bottom: var(--s-1); }
  .ft-aviso p:not(.ft-aviso-t) { font: var(--text-caption); }

  @media (min-width: 768px) {
    .rodape .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--s-6); }
    .ft-links { margin-top: 0; }
    .ft-aviso, .rodape .tp-ft-base { grid-column: 1 / -1; }
    .ft-aviso { padding: var(--s-5); }
  }

  /* Barra de compra presa na tela em todas as larguras; some ao chegar no rodapé (03/11/2026) */
  .barra { transition: opacity .25s, transform .25s; }
  .barra.some { opacity: 0; transform: translateY(100%); pointer-events: none; }
  .barra-in { display: flex; align-items: center; gap: var(--s-3); width: 100%; }
  .barra-prod { display: none; }
  @media (min-width: 768px) {
    .barra { justify-content: center; }
    .barra-in { max-width: 1120px; padding: 0 var(--s-5); }
    .barra-in .btn { flex: 0 0 300px; margin-left: auto; }
  }
  @media (min-width: 1024px) {
    .barra-prod { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; font-weight: 600; }
    .barra-prod img { width: 48px; height: 36px; object-fit: contain; }
    .barra-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .barra-in .btn { margin-left: 0; }
  }

  /* Texto de SEO abaixo da ficha técnica */
  .seo { max-width: 720px; }
  .seo h3 { margin-top: var(--s-5); font: 600 18px/24px var(--font-sans); }
  .seo p { margin-top: var(--s-2); color: var(--muted-foreground); }
  .seo h2 + h3 { margin-top: var(--s-4); }
  .seo-nota { font: var(--text-caption); font-style: italic; }

  /* Botão de oferta repetido logo abaixo do preço (a barra fixa continua) */
  .btn-inline { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; margin-top: var(--s-4); flex: none; }

  /* Carrossel de fotos do produto */
  .car { position: relative; }
  .car-trilha { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-node); }
  .car-trilha::-webkit-scrollbar { display: none; }
  .car-trilha:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .car-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
  .car-slide.foto { margin-top: 0; }
  .prod-foto .car { margin-top: var(--s-4); }
  @media (min-width: 768px) { .prod-foto .car { margin-top: 0; } }
  .car-pausa {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer;
  }
  .car-pausa .i-tocar { display: none; fill: currentColor; stroke: none; }
  .car.pausado .i-pausa { display: none; }
  .car.pausado .i-tocar { display: block; }
    content: ""; position: absolute; left: 4px; top: 20px; height: 4px; border-radius: var(--r-full);
    background: var(--brand-preto); opacity: .25; width: 0; animation: car-tempo 3.5s linear forwards;
  }

  /* Como escolhemos: passo em destaque percorre 1, 2 e 3 */
  .fluxo-passos li > div, .fluxo-num { transition: border-color .3s, box-shadow .3s, background-color .3s, color .3s, transform .3s; }
  .fluxo-passos li > div { border: 1px solid transparent; }
  .fluxo-passos li.ativo > div { border-color: var(--brand-ciano); box-shadow: var(--shadow-lift); transform: translateX(4px); }
  .fluxo-passos li.ativo .fluxo-num { background: var(--brand-ciano); color: var(--brand-preto); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-ciano) 22%, transparent); }
  /* Entrada em cena */
  .fluxo.anima .fluxo-entrada, .fluxo.anima .fluxo-passos li { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
  .fluxo.anima.visto .fluxo-entrada, .fluxo.anima.visto .fluxo-passos li { opacity: 1; transform: none; }
  .fluxo.anima.visto .fluxo-passos li:nth-child(1) { transition-delay: .15s; }
  .fluxo.anima.visto .fluxo-passos li:nth-child(2) { transition-delay: .3s; }
  .fluxo.anima.visto .fluxo-passos li:nth-child(3) { transition-delay: .45s; }
  /* Ponto pulsando na saída do ponto de partida */
  .fluxo-entrada::before {
    content: ""; position: absolute; width: 12px; height: 12px; border-radius: var(--r-full);
    background: var(--brand-ciano); left: 13px; bottom: -6px; z-index: 2;
    animation: fluxo-bate 1.6s ease-out infinite;
  }
  @keyframes fluxo-bate { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-ciano) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

  .fluxo { position: relative; }
  .fluxo-linhas { display: none; }
  @media (min-width: 1024px) {
    .fluxo {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 140px;
      align-items: center; padding: var(--s-6);
    }
    .fluxo-entrada { align-self: center; }
    .fluxo-entrada::before { left: auto; right: -6px; bottom: auto; top: calc(50% - 6px); }
    .fluxo-passos { padding-top: 0; gap: var(--s-4); }
    .fluxo-passos::before, .fluxo-passos::after { display: none; }
    .fluxo-linhas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
    .fluxo-trilho { fill: none; stroke: var(--border); stroke-width: 2; }
    .fluxo-luz {
      fill: none; stroke: var(--brand-ciano); stroke-width: 3; stroke-linecap: round;
      stroke-dasharray: 14 100; stroke-dashoffset: 114; opacity: .45;
      filter: drop-shadow(0 0 4px var(--brand-ciano));
      animation: fluxo-corre 2.4s linear infinite; animation-delay: var(--atraso, 0s);
      transition: opacity .3s;
    }
    .fluxo-luz.ativo { opacity: 1; stroke-width: 4; }
    .fluxo-passos li.ativo > div { transform: translateX(6px); }
  }
  @keyframes fluxo-corre { to { stroke-dashoffset: 0; } }

  /* Faixa de lojas no protótipo (mesmo componente da home do site; por enquanto só Amazon) */
  .lojas-proto { --lojas-dur: 40s; overflow: hidden; margin-top: var(--s-6); }
  .lojas-proto .tp-lojas-t { font: var(--text-ui); font-weight: 600; color: var(--muted-foreground); margin-bottom: var(--s-3); }
  .lojas-proto .tp-lojas-faixa { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, var(--brand-preto) 8%, var(--brand-preto) 92%, transparent); mask-image: linear-gradient(to right, transparent, var(--brand-preto) 8%, var(--brand-preto) 92%, transparent); }
  .lojas-proto .tp-lojas-track { display: flex; width: max-content; animation: lojas-gira var(--lojas-dur) linear infinite; }
  .lojas-proto .tp-lojas-set { display: flex; flex: none; width: max-content; margin: 0; padding: 0; list-style: none; }
  .lojas-proto .tp-store { flex: none; max-width: none; margin-inline-end: var(--s-4); }
  .lojas-proto:hover .tp-lojas-track { animation-play-state: paused; }
  @keyframes lojas-gira { to { transform: translateX(-50%); } }

  /* Animações sempre ativas, mesmo com "reduzir movimento" no aparelho (decisão de Augusto,
     03/11/2026). O base.css zera animações nesse caso; aqui elas voltam. O que se move sozinho
     tem pausa (carrossel) ou para ao passar o mouse (faixa de lojas). */
  @media (prefers-reduced-motion: reduce) {
    .fluxo-passos::after { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; }
    .fluxo-entrada::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
    .fluxo-luz { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
    .lojas-proto .tp-lojas-track { animation-duration: var(--lojas-dur) !important; animation-iteration-count: infinite !important; }
      .barra, .fluxo-passos li > div, .fluxo-num, .fluxo.anima .fluxo-entrada, .fluxo.anima .fluxo-passos li { transition-duration: .3s !important; }
    .seta { transition-duration: .15s !important; }
  }

  /* Atraso de cada linha do fluxo: o JS grava o valor real */
  .fluxo-luz { --atraso: 0s; }

  /* Fundo pontilhado interativo do computador (desenhado em canvas pelo prototipo-celular.js) */
  .pontos-fundo { display: none; }
  .com-pontos .pontos-fundo { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
  .com-pontos body > *:not(.pontos-fundo):not(.barra):not(.topo):not(.tp-skip) { position: relative; z-index: 1; }

  /* Carrossel v2 (03/11/2026): miniaturas à esquerda; tempo e pausa dentro da foto */
  .car { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
  .car-minis { display: flex; flex-direction: column; gap: var(--s-2); }
  .car-mini {
    display: block; width: 56px; height: 56px; padding: 4px; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--radius); background: var(--surface);
    transition: border-color .2s, opacity .2s; opacity: .7;
  }
  .car-mini img { width: 100%; height: 100%; object-fit: contain; }
  .car-mini:hover { opacity: 1; }
  .car-mini[aria-current] { border-color: var(--brand-ciano); opacity: 1; }
  .car-mini:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .car-palco { position: relative; min-width: 0; }
  .car-rodape {
    position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
    display: flex; align-items: center; gap: var(--s-3);
  }
  .car-rodape .car-pausa { width: 36px; height: 36px; flex-shrink: 0; background: var(--card); box-shadow: var(--shadow-node); }
  .car-tempo { flex: 1; height: 4px; border-radius: var(--r-full); background: color-mix(in srgb, var(--foreground) 15%, transparent); overflow: hidden; }
  .car-tempo span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand-ciano); }
  .car-tempo.corre span { animation: car-barra 3.5s linear forwards; }
  .car.parado .car-tempo span, .car.pausado .car-tempo span { animation-play-state: paused; }
  @keyframes car-barra { to { width: 100%; } }
  @media (min-width: 768px) {
    .car { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); }
    .car-mini { width: 72px; height: 72px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .car-tempo.corre span { animation-duration: 3.5s !important; }
    .car-mini { transition-duration: .2s !important; }
  }

  /* Faixa da Amazon contínua: logos soltos, sem placa, para parecer uma tira só */
  .lojas-proto .loja-logo { flex: none; display: grid; place-items: center; height: 48px; margin-inline-end: var(--s-6); }
  .lojas-proto .loja-logo img { height: 26px; width: auto; }

  /* Selos dos níveis (decisão de Augusto, 03/11/2026): Econômico amarelo, Preço justo ciano, Ideal verde */
  .selo-nivel {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 4px 10px 4px 8px; border-radius: var(--r-full);
    font: 600 13px/1 var(--font-sans); letter-spacing: 0.01em;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-preto) 12%, transparent);
  }
  .selo-nivel::before {
    content: ""; width: 8px; height: 8px; border-radius: var(--r-full);
    background: currentColor; opacity: .55;
  }
  .selo-nivel[data-nivel="economico"] { background: var(--nivel-economico); color: var(--nivel-economico-foreground); }
  .selo-nivel[data-nivel="justo"] { background: var(--nivel-justo); color: var(--nivel-justo-foreground); }
  .selo-nivel[data-nivel="ideal"] { background: var(--nivel-ideal); color: var(--nivel-ideal-foreground); }
  .card .pos.selo-nivel { margin-bottom: var(--s-1); }
  .card .pos.selo-nivel[data-nivel="economico"] { color: var(--nivel-economico-foreground); }
  .card .pos.selo-nivel[data-nivel="justo"] { color: var(--nivel-justo-foreground); }
  .card .pos.selo-nivel[data-nivel="ideal"] { color: var(--nivel-ideal-foreground); }
  .alt .selo-nivel { margin-bottom: var(--s-1); }

  /* Outros níveis no produto: foto pequena à direita e botão para ver o produto */
  .aviso-oferta { max-width: 360px; }
  .alt.alt-nivel { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: var(--s-3); align-items: start; }
  .alt-nivel .alt-foto { width: 76px; height: 76px; object-fit: contain; border-radius: var(--radius); background: var(--surface); padding: 4px; }
  .alt-nivel .alt-d, .alt-nivel .alt-btn { grid-column: 1 / -1; }
  .alt-nivel .alt-btn { display: flex; align-items: center; justify-content: center; margin-top: var(--s-3); min-height: 44px; text-decoration: none; font: var(--text-ui); font-weight: 600; }
  .alt-nivel .alt-btn:hover { border-color: var(--brand-ciano); }
  .pagina-produto .alts .alt-nivel { flex-basis: 84%; }

  /* Ficha técnica em tabela (03/11/2026): linhas alternadas, ícone ao lado de cada item */
  .ficha-card { margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-node); overflow: hidden; background: var(--card); }
  .ficha-tab { width: 100%; border-collapse: collapse; }
  .ficha-tab tr:nth-child(odd) { background: var(--secondary); }
  .ficha-tab tr:nth-child(even) { background: var(--card); }
  .ficha-tab th, .ficha-tab td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
  .ficha-tab th { width: 46%; font-weight: 500; color: var(--muted-foreground); }
  .ficha-tab td { font-weight: 600; color: var(--foreground); }
  .ficha-rot { display: flex; align-items: center; gap: var(--s-3); }
  .ficha-ico {
    width: 22px; height: 22px; flex-shrink: 0;
    fill: none; stroke: var(--accent-foreground); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .ficha-ico .ficha-ico-cheio { fill: var(--accent-foreground); stroke: none; }
  @media (min-width: 768px) {
    .ficha-tab th { width: 34%; }
    .ficha-tab th, .ficha-tab td { padding: var(--s-4) var(--s-5); }
  }

  /* Texto "Por que escolhemos" dentro de um card, para leitura sem o fundo pontilhado */
  .seo { padding: var(--s-5); border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-node); }
  .seo h2 { font: var(--text-h3); letter-spacing: var(--tracking-h3); }
  .seo h3 { padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .seo h2 + h3 { padding-top: 0; border-top: 0; }
  .seo p { line-height: 1.65; }
  @media (min-width: 768px) { .seo { padding: var(--s-6); max-width: 820px; } }

  /* Avisos em três cards */
  .avisos { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
  .aviso-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start;
    padding: var(--s-4); border-radius: var(--r-node); background: var(--card); border: 1px solid var(--border);
  }
  .aviso-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--accent); }
  .aviso-ico .ficha-ico { width: 20px; height: 20px; }
  .aviso-t { font-weight: 600; color: var(--foreground); margin-bottom: 2px; }
  .aviso-card p:not(.aviso-t) { font: var(--text-caption); color: var(--muted-foreground); line-height: 1.55; }
  @media (min-width: 1024px) { .avisos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Tema WordPress (03/11/2026): estados e blocos que os protótipos não tinham */
  [data-perfil-bloco][hidden] { display: none; }
  .vazio-perfil { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-5); border: 1px dashed var(--border); border-radius: var(--r-node); background: var(--card); }
  .vazio-perfil p:not(.res-t) { color: var(--muted-foreground); }
  .vazio-perfil .btn-sec { justify-self: start; display: inline-flex; align-items: center; text-decoration: none; }
  .alerta-hw { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning-soft-foreground); }
  .conta { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
  .conta li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border-radius: var(--radius); background: var(--secondary); }
  .conta-n { display: grid; place-items: center; height: 36px; border-radius: var(--radius); background: var(--accent); color: var(--accent-foreground); font-weight: 700; }
  .conta strong { color: var(--foreground); }
  .seo .conta-total { margin-top: var(--s-3); font-weight: 600; color: var(--foreground); }
  .analise h2, .analise h3 { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); font: 600 18px/24px var(--font-sans); color: var(--foreground); }
  .analise p, .analise li { margin-top: var(--s-2); color: var(--muted-foreground); line-height: 1.65; }
  .analise ul, .analise ol { padding-left: var(--s-5); }
  .legal { margin-top: var(--s-5); }
  .legal h1 { font: var(--text-h3); font-size: 28px; line-height: 34px; }
  .legal h2 { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); font: 600 20px/26px var(--font-sans); }
  .legal h3 { border-top: 0; padding-top: 0; margin-top: var(--s-4); }
  .legal a, .analise a { color: var(--link); }
  .ft-contato { font: var(--text-caption); color: var(--muted-foreground); max-width: 34ch; }
  .tp-ft-social a { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; border-radius: var(--r-full); }
  .tp-ft-social a:hover { color: var(--foreground); background: var(--secondary); }
  .ft-aviso p + p { margin-top: var(--s-2); }
  .res-item span:empty { width: 56px; height: 56px; border-radius: var(--radius); background: var(--surface); }

  /* Tema WordPress, rodada 2 (03/11/2026): todas as páginas usam a largura do computador, não só
     a home e o produto (categoria, busca, privacidade e rodapé ficavam na coluna de celular) */
  @media (min-width: 768px) {
    .wrap { max-width: 1120px; padding: 0 var(--s-5); }
    .topo { padding: 0 max(var(--s-5), calc((100% - 1120px) / 2 + var(--s-5))); height: 64px; }
    .topo-logo img { height: 26px; }
    main .hero { padding-top: var(--s-6); max-width: 820px; }
    main .hero h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
    main .hero p { font: var(--text-lead); letter-spacing: var(--tracking-lead); }
    main .perfis { max-width: 520px; }
    main .bloco { margin-top: var(--s-7); }
    main .bloco h2 { font: 600 28px/34px var(--font-sans); letter-spacing: -0.02em; }
    main > .resultado { max-width: 720px; margin-top: var(--s-5); }
    .vazio-perfil { max-width: 720px; padding: var(--s-6); }
    .legal { max-width: 820px; margin-left: auto; margin-right: auto; }
    .legal h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
  }

  /* Botão "Buscar na Amazon": mais destaque, com seta de saída */
  .btn-amazon {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 52px; padding: 0 var(--s-6); text-decoration: none; font: 600 17px/1.2 var(--font-sans);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-ciano) 35%, transparent);
    transition: transform .15s, box-shadow .15s;
  }
  .btn-amazon:hover { transform: translateY(-1px); box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-ciano) 45%, transparent); }
  .btn-amazon .ico { width: 18px; height: 18px; }
  .vazio-perfil .btn-amazon { justify-self: start; }

  /* Frase obrigatória da Amazon em destaque no rodapé */
  .ft-amazon {
    margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--card); font: var(--text-caption); color: var(--foreground);
  }
  .ft-amazon strong { display: block; margin-bottom: 2px; }
  @media (min-width: 768px) { .ft-amazon { grid-column: 1 / -1; } }

  /* Enquadramento das fotos (03/11/2026). As fotos são recortadas rente ao produto no envio
     (habilidade enquadrar-foto); aqui cada moldura tem proporção fixa e a foto ocupa o espaço
     inteiro sem cortar nem distorcer (contain), centrada e com o mesmo respiro em todo lugar. */
  .card .img, .foto, .car-mini, .alt-nivel .alt-foto, .res-item img, .barra-prod img, .videos .play { overflow: hidden; }
  .card .img img, .foto img, .car-slide img, .videos .play img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
  }
  .card .img { padding: var(--s-2); }
  .foto { padding: 6%; }
  .videos .play { padding: var(--s-3); }
  .videos .play img { max-width: none; max-height: none; }
  .alt-nivel .alt-foto, .res-item img, .barra-prod img { object-fit: contain; }

  /* Card da escolha: foto maior, sem texto corrido */
  .card { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .card .img { aspect-ratio: 1; }
  .card .n { font-size: 17px; }
  @media (min-width: 768px) {
    .card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; align-items: stretch; gap: var(--s-3); }
    .card .img { aspect-ratio: 4 / 3; padding: var(--s-4); }
    .card .n { font-size: 19px; line-height: 1.25; margin-top: var(--s-1); }
    .card .v { font-size: 22px; letter-spacing: -0.01em; }
    .card .acoes { grid-template-columns: 2fr 3fr; align-self: end; }
    .card .acoes .btn, .card .acoes .btn-sec { font-size: 15px; }
  }

  /* Artigo da página do produto */
  .analise h3 { margin-top: var(--s-5); }
  .analise ul { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--muted-foreground); }
  .analise li { margin-top: var(--s-1); line-height: 1.6; }
  .analise strong { color: var(--foreground); }
  .seo .btn-inline { margin-top: var(--s-5); }

  /* Botão como link (no tema o .btn é <a>, no protótipo era <button>): texto centrado, sem sublinhado */
  a.btn, a.btn-sec { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; padding: 0 var(--s-4); }
  .barra-in a.btn { display: flex; }