:root {
  --marfim: #F5F1EA;
  --papel: #FBF9F5;
  --pedra: #E7E0D5;
  --areia: #D9CFC1;
  --cafe: #2A2320;
  --cafe-2: #4A3F38;
  --cinza: #7C7168;
  --linha: #DDD4C7;
  --bronze: #8C6B45;
  --pote: #8A4B2E;
  --pote-claro: #F1E3D6;
  --ok: #3F6B4E;
  --erro: #9B3B2E;
  /* Identidade Jugu Clube: Nunito nos títulos e textos, Quicksand nos rótulos */
  --titulo: 'Nunito', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --texto: 'Nunito', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --rotulo: 'Quicksand', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --raio: 18px;
  --gravacao: 'Inter', 'Arial Black', Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--marfim); color: var(--cafe); font-family: var(--texto); font-weight: 400; font-size: 16px; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 1px solid var(--cafe); outline-offset: 4px; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--pote); }
.escuro h1 em, .escuro h2 em, .pote h2 em { color: var(--pote-claro); }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
em { font-style: italic; }
.titulo-m { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.sobre { font-family: var(--rotulo); font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cinza); margin-bottom: 1.4rem; display: block; }
.lead { font-size: 1.12rem; color: var(--cafe-2); max-width: 46ch; }
.pequeno { font-size: .86rem; color: var(--cinza); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1320px, 100% - 32px); margin-inline: auto; }
.secao { padding: clamp(64px, 10vw, 140px) 0; }
.centro { text-align: center; }
.centro .lead { margin-inline: auto; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; background: var(--cafe); color: var(--marfim); border: 1px solid var(--cafe); border-radius: 999px; padding: 1.05em 2.2em; font-family: var(--rotulo); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.btn:hover { background: transparent; color: var(--cafe); }
.btn-linha { background: transparent; color: var(--cafe); }
.btn-linha:hover { background: var(--cafe); color: var(--marfim); }
.btn-claro { background: var(--marfim); color: var(--cafe); border-color: var(--marfim); }
.btn-claro:hover { background: transparent; color: var(--marfim); }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--rotulo); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--cafe); }
.link:hover { color: var(--bronze); }
.link-sutil { font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(245, 241, 234, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.faixa-topo { background: var(--cafe); color: #D9D0C4; text-align: center; font-family: var(--rotulo); font-weight: 600; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; padding: 9px 16px; }
.faixa-topo span + span::before { content: '·'; margin: 0 14px; color: #8C8077; }
.barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.logo { display: block; text-decoration: none; line-height: 0; }
.logo img { height: 54px; width: auto; }
.nav { display: flex; gap: 34px; }
.nav a { font-family: var(--rotulo); font-weight: 600; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-color: var(--cafe); }
.acoes { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.icone-btn { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; position: relative; text-decoration: none; color: var(--cafe); }
.icone-btn svg { width: 22px; height: 22px; }
.contador { position: absolute; top: 4px; right: 0; background: var(--cafe); color: var(--marfim); font-size: .62rem; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-weight: 500; }
.so-mobile { display: none; }
@media (max-width: 900px) {
  .faixa-topo span + span { display: none; }
  .so-mobile { display: grid; }
  .esconde-mobile { display: none; }
  .barra { height: 64px; }
  .logo img { height: 46px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--marfim); border-bottom: 1px solid var(--linha); padding: 8px 16px 24px; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--linha); font-size: .85rem; }
  .menu-aberto .nav { display: flex; }
}

/* Hero */
.hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--areia); }
.hero > img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%; }
.hero-pausa { position: absolute; right: 20px; bottom: 20px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; background: rgba(251, 249, 245, .7); color: var(--cafe); border: 1px solid var(--linha); backdrop-filter: blur(6px); }
.hero-pausa:hover { background: var(--marfim); }
.hero-pausa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hero-pausa .i-tocar { display: none; fill: currentColor; stroke: none; }
.hero-pausa[aria-pressed="true"] .i-pausa { display: none; }
.hero-pausa[aria-pressed="true"] .i-tocar { display: block; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(231, 224, 213, .92) 0%, rgba(231, 224, 213, .6) 32%, rgba(231, 224, 213, 0) 55%); }
.hero .wrap { position: relative; z-index: 1; }
.hero-texto { max-width: 560px; padding: 80px 0; }
.hero h1 em { color: var(--bronze); }
.hero-acoes { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 36px; }
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero > img, .hero-video { position: relative; height: 300px; object-position: 60% 62%; order: 2; }
  .hero-pausa { bottom: 12px; right: auto; left: 12px; }
  .hero::after { display: none; }
  .hero-texto { padding: 48px 0 40px; }
}

/* Faixa de garantias */
.garantias { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linha); }
.garantias div { padding: 28px 24px; border-right: 1px solid var(--linha); text-align: center; }
.garantias div:last-child { border-right: 0; }
.garantias b { display: block; font-family: var(--titulo); font-size: 1.08rem; font-weight: 800; margin-bottom: 4px; }
.garantias span { font-size: .84rem; color: var(--cinza); }
@media (max-width: 900px) { .garantias { grid-template-columns: 1fr 1fr; } .garantias div:nth-child(2) { border-right: 0; } .garantias div:nth-child(-n+2) { border-bottom: 1px solid var(--linha); } }

/* Foto com nome */

/* Cartões */
.grade-modelos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .grade-modelos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grade-modelos { grid-template-columns: 1fr 1fr; gap: 12px; } }
.cartao { display: block; text-decoration: none; }
.cartao-img { position: relative; background: var(--pedra); border-radius: var(--raio); aspect-ratio: 4 / 5; overflow: hidden; }
.cartao-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .8s ease; }
.cartao-img .troca { position: absolute; inset: 0; opacity: 0; }
.cartao:hover .cartao-img .troca { opacity: 1; }
.cartao:hover .cartao-img img:first-child { opacity: 0; }
.cartao:hover .cartao-img img { transform: scale(1.03); }
.cartao-sub { margin: 2px 2px 0; font-size: .84rem; color: var(--cinza); }
.cartao-info { padding: 18px 2px 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cartao-info h3 { font-size: 1.15rem; margin: 0; }
.cartao-info p { margin: 0; font-size: .9rem; color: var(--cafe-2); }
.cabeca-secao { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.cabeca-secao h2 { margin: 0; }

/* Editorial */
.editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 7vw, 120px); }
.editorial img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); }
.editorial.inverso > :first-child { order: 2; }
.editorial ol { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: p; }
.editorial li { counter-increment: p; display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--linha); }
.editorial li::before { content: counter(p); font-family: var(--titulo); font-weight: 800; font-size: 1.2rem; color: var(--pote); }
.editorial li b { font-weight: 800; display: block; }
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } .editorial.inverso > :first-child { order: 0; } }

/* Texturas de perto */
.texturas-intro { max-width: 640px; margin: -24px 0 40px; }
.texturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.textura { margin: 0; }
.textura img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); background: var(--pedra); display: block; }
.textura figcaption { display: grid; gap: 2px; margin-top: 14px; }
.textura b { font-family: var(--rotulo); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.textura span { color: var(--cafe-2); }
.textura small { color: var(--cinza); font-size: .82rem; }
@media (max-width: 760px) { .texturas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .textura span { font-size: .92rem; } }

.escuro { background: var(--cafe); color: var(--marfim); }
.pote { background: var(--pote); color: var(--marfim); }
.pote .lead { color: var(--pote-claro); }
.pote .sobre { color: #E2C7B4; }
.pote .btn-claro:hover { color: var(--marfim); }
.escuro .lead { color: #CFC5B8; }
.escuro .sobre { color: #A39788; }
.faixa-foto { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.faixa-foto > div { padding: clamp(40px, 6vw, 96px); }
@media (max-width: 860px) { .faixa-foto { grid-template-columns: 1fr; } .faixa-foto img { min-height: 0; aspect-ratio: 16 / 11; } }

/* Depoimentos */
.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.depoimento blockquote { margin: 0 0 20px; font-family: var(--titulo); font-weight: 600; font-size: 1.22rem; line-height: 1.45; }
.depoimento cite { font-style: normal; font-family: var(--rotulo); font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); }
@media (max-width: 860px) { .depoimentos { grid-template-columns: 1fr; gap: 40px; } }

/* Coleção */
.cabeca-pagina { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); }
.complementos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.complemento { border-top: 1px solid var(--cafe); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.complemento h3 { font-size: 1.15rem; margin: 0; }
.complemento .linha-preco { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; }
@media (max-width: 760px) { .complementos { grid-template-columns: 1fr; } }

/* Produto */
.produto { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: clamp(32px, 6vw, 96px); padding: 32px 0 96px; align-items: start; }
/* produto-topo junta a galeria e o formulário; no computador some e as duas colunas ficam como antes */
.produto-topo { display: contents; }
.galeria { position: sticky; top: 140px; grid-column: 1; grid-row: 1 / span 2; }
.produto-escolha { grid-column: 2; grid-row: 1; min-width: 0; }
.produto-mais { grid-column: 2; grid-row: 2; min-width: 0; }
.vitrine { position: relative; background: var(--pedra); border-radius: var(--raio); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.vitrine > img { width: 100%; height: 100%; object-fit: contain; }
.miniaturas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.miniaturas button { aspect-ratio: 1; background: var(--pedra); border-radius: 12px; border: 1px solid transparent; padding: 0; cursor: pointer; overflow: hidden; }
.miniaturas button { position: relative; }
.miniaturas button img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.miniaturas button[aria-pressed="true"] { border-color: var(--cafe); }
.migalhas { font-family: var(--rotulo); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-bottom: 24px; }
.migalhas a { text-decoration: none; }
.produto h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: .2em; }
.preco-linha { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.preco-linha .valor { font-size: 1.3rem; font-weight: 400; }
.preco-linha .pix, .pix { color: var(--ok); font-size: .88rem; }
.opcao { border-top: 1px solid var(--linha); padding: 26px 0; }
.opcao legend, .opcao .rotulo { font-family: var(--rotulo); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; width: 100%; gap: 12px; }
.opcao legend span, .opcao .rotulo span { font-family: var(--texto); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cinza); font-size: .9rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.campo input, .campo select, .campo textarea { border: 0; border-bottom: 1px solid var(--cafe-2); background: transparent; padding: 10px 0; border-radius: 0; width: 100%; font-size: 1rem; }
.campo textarea { border: 1px solid var(--linha); padding: 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--bronze); }
.campo .ajuda { font-size: .82rem; color: var(--cinza); display: flex; justify-content: space-between; gap: 12px; }
.erro { color: var(--erro); font-size: .84rem; }
input.nome-pet { font-family: var(--gravacao); font-weight: 900; letter-spacing: .12em; font-size: 1.3rem; text-transform: uppercase; }
.extras-lista label { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; cursor: pointer; font-size: .95rem; }
.extras-lista input { accent-color: var(--cafe); }
.compra { display: flex; gap: 12px; margin-top: 8px; }
.compra .btn { flex: 1; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--cafe); border-radius: 999px; }
.qtd button { width: 40px; height: 48px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; }
.qtd span { min-width: 22px; text-align: center; }
.prazo { font-size: .9rem; color: var(--cafe-2); margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.frete-calc { display: flex; gap: 12px; align-items: end; }
.frete-calc .campo { flex: 1; }
details.acordeao { border-top: 1px solid var(--linha); }
details.acordeao:last-of-type { border-bottom: 1px solid var(--linha); }
details.acordeao summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 20px 0; font-family: var(--rotulo); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
details.acordeao summary::after { content: '+'; font-size: 1.1rem; font-weight: 300; line-height: 1; }
details.acordeao[open] summary::after { content: '−'; }
details.acordeao summary::-webkit-details-marker { display: none; }
details.acordeao > div { padding-bottom: 22px; color: var(--cafe-2); }
.specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.specs tr:last-child td { border-bottom: 0; }
.specs td:first-child { color: var(--cinza); width: 42%; }
.barra-fixa { display: none; }
@media (max-width: 860px) {
  .produto { display: block; padding-top: 0; }
  /* No celular o 3D fica grudado no alto enquanto a pessoa escolhe altura, cores e nome, e
     solta no fim do formulário. O cabeçalho rola junto com a página para sobrar espaço. */
  body[data-pagina="produto"] .topo, body[data-pagina="personalizar"] .topo { position: relative; }
  .produto-topo { display: block; }
  .galeria { display: contents; }
  .vitrine { position: sticky; top: 0; z-index: 30; margin: 0 -16px; border-radius: 0; aspect-ratio: auto; height: min(42vh, 100vw); height: clamp(230px, 42svh, 100vw); box-shadow: 0 1px 0 var(--linha); }
  .miniaturas { margin: 12px -16px 0; padding: 0 16px; }
  .produto-escolha { margin-top: 28px; }
  .barra-fixa { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--marfim); border-top: 1px solid var(--linha); padding: 12px 16px; gap: 16px; align-items: center; justify-content: space-between; }
  .barra-fixa ~ .conversa { display: none; }
  .barra-fixa .conversa.na-barra { display: grid; position: static; flex: none; width: 44px; height: 44px; margin-left: auto; background: none; color: var(--cafe); border: 1px solid var(--linha); box-shadow: none; }
  .barra-fixa { gap: 10px; }
  .barra-fixa > div:first-child { min-width: 0; }
  .barra-fixa #fixo-nome { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: .8rem; }
  .barra-fixa .btn { flex: none; padding: 1.05em 1.6em; }
}
/* telas estreitas: o nome do suporte tem prioridade sobre o atalho do WhatsApp */
@media (max-width: 380px) { .barra-fixa .conversa.na-barra { display: none; } .barra-fixa .btn { margin-left: auto; padding: 1.05em 1.3em; letter-spacing: .12em; } }

/* Carrinho */
.carrinho { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 80px); padding-bottom: 96px; align-items: start; }
.item { display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; padding: 28px 0; border-top: 1px solid var(--linha); align-items: start; }
.item:last-of-type { border-bottom: 1px solid var(--linha); }
.item .mini { background: var(--pedra); border-radius: 14px; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.item h3 { font-family: var(--gravacao); font-weight: 900; letter-spacing: .06em; font-size: 1.25rem; margin-bottom: 4px; }
.item ul { list-style: none; padding: 0; margin: 0 0 14px; font-size: .9rem; color: var(--cafe-2); }
.item .valor { text-align: right; white-space: nowrap; }
.item .acoes-item { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.item .qtd button { height: 36px; width: 34px; }
.resumo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px; position: sticky; top: 140px; }
.resumo h2 { font-size: 1.5rem; }
.resumo .linha { display: flex; justify-content: space-between; padding: 7px 0; font-size: .95rem; }
.resumo .total { border-top: 1px solid var(--linha); margin-top: 10px; padding-top: 16px; font-size: 1.1rem; font-weight: 400; }
.resumo .desc { color: var(--ok); }
.progresso { background: var(--linha); height: 2px; margin: 10px 0 18px; }
.progresso div { height: 100%; background: var(--cafe); transition: width .5s; }
.cupom { display: flex; gap: 12px; margin: 18px 0; align-items: end; }
.cupom input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--cafe-2); background: transparent; padding: 8px 0; text-transform: uppercase; letter-spacing: .1em; }
.seguro { font-size: .78rem; color: var(--cinza); text-align: center; margin-top: 14px; }
.vazio { text-align: center; padding: 80px 0 120px; }
@media (max-width: 860px) { .carrinho { grid-template-columns: 1fr; } .resumo { position: static; } .item { grid-template-columns: 96px 1fr; } .item .valor { grid-column: 2; text-align: left; } }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); padding-bottom: 96px; align-items: start; }
.etapa { padding: 8px 0 40px; }
.etapa h2 { font-size: 1.5rem; display: flex; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--cafe); padding-bottom: 14px; margin-bottom: 28px; }
.etapa h2 b { font-family: var(--rotulo); font-size: .76rem; letter-spacing: .16em; font-weight: 600; color: var(--pote); }
.grade-campos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px 20px; }
.c6 { grid-column: span 6; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; } .c1 { grid-column: span 1; }
@media (max-width: 600px) { .c4, .c3, .c2, .c1 { grid-column: span 6; } }
.opcoes-radio { display: grid; gap: 10px; }
.opcoes-radio label { display: flex; gap: 14px; align-items: center; border: 1px solid var(--linha); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .2s; }
.opcoes-radio label:has(input:checked) { border-color: var(--cafe); background: var(--papel); }
.opcoes-radio input { accent-color: var(--cafe); }
.opcoes-radio label > b { margin-left: auto; font-weight: 400; }
.opcoes-radio label small { margin-left: auto; color: var(--ok); }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } .checkout .resumo { order: -1; } }

/* Pedido */
.confirmado { max-width: 760px; margin: 0 auto; padding: 72px 0 110px; text-align: center; }
.confirmado .lead { margin-inline: auto; }
.linha-tempo { display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0; text-align: left; border-top: 1px solid var(--cafe); }
.linha-tempo div { padding: 18px 16px 0 0; font-size: .88rem; color: var(--cafe-2); }
.linha-tempo b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 1.05rem; color: var(--cafe); }
.linha-tempo .feito b::before { content: '● '; color: var(--ok); font-size: .7em; vertical-align: middle; }
.pix-box { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: 32px; margin: 32px auto; max-width: 440px; }
.pix-box .qr { width: 180px; height: 180px; margin: 0 auto 18px; }
.pix-box code { display: block; word-break: break-all; font-size: .72rem; background: var(--marfim); padding: 12px; margin: 14px 0; text-align: left; }
@media (max-width: 600px) { .linha-tempo { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* Textos (FAQ, políticas, contato) */
.texto { max-width: 720px; }
.texto h2 { font-size: 1.6rem; margin-top: 1.6em; }
.faq-grupos { display: grid; grid-template-columns: 240px 1fr; gap: 64px; padding-bottom: 110px; }
.faq-grupos nav { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.faq-grupos nav a { text-decoration: none; font-family: var(--rotulo); font-weight: 600; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; }
.faq-grupos section { margin-bottom: 56px; scroll-margin-top: 140px; }
.faq-grupos h2 { font-size: 1.8rem; }
@media (max-width: 760px) { .faq-grupos { grid-template-columns: 1fr; gap: 24px; } .faq-grupos nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 18px; } }
.contato-grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; padding-bottom: 110px; }
.canal { border-top: 1px solid var(--linha); padding: 24px 0; }
.canal h3 { font-size: 1.2rem; }
@media (max-width: 760px) { .contato-grade { grid-template-columns: 1fr; gap: 40px; } }
.aviso-revisao { border-left: 3px solid var(--pote); border-radius: 0 10px 10px 0; padding: 10px 16px; font-size: .88rem; color: var(--cafe-2); background: var(--papel); }

/* Rodapé */
.rodape { background: var(--cafe); color: #D9D0C4; padding: 88px 0 28px; }
.rodape-news { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 72px; border-bottom: 1px solid #463D37; }
.rodape-news h2 { color: var(--marfim); margin: 0; max-width: 18ch; }
.rodape .sobre { color: #A39788; }
.news { display: flex; gap: 12px; flex-wrap: wrap; }
.news input { flex: 1; min-width: 200px; border: 0; border-bottom: 1px solid #8C8077; background: transparent; color: var(--marfim); padding: 12px 0; }
.news input::placeholder { color: #A39788; }
.news-msg { width: 100%; font-size: .86rem; min-height: 1.3em; margin: 0; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0; }
.rodape .logo { display: inline-block; margin-bottom: 18px; }
.rodape .logo img { height: 96px; }
.rodape-grade p { font-size: .9rem; max-width: 32ch; color: #B8AEA2; }
.rodape h3 { font-family: var(--rotulo); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--marfim); margin-bottom: 18px; }
.rodape-grade a:not(.logo) { display: block; text-decoration: none; padding: 5px 0; font-size: .9rem; color: #B8AEA2; }
.rodape-grade a:hover { color: var(--marfim); }
.rodape-base { border-top: 1px solid #463D37; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #8C8077; }
@media (max-width: 860px) { .rodape-news { grid-template-columns: 1fr; } .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape-grade > div:first-child { grid-column: 1 / -1; } }

/* Flutuantes */
.conversa { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 52px; height: 52px; border-radius: 50%; background: var(--cafe); color: var(--marfim); display: grid; place-items: center; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.conversa svg { width: 22px; height: 22px; }
.conversa.na-barra { display: none; }
.toast { visibility: hidden; opacity: 0; position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); background: var(--cafe); color: var(--marfim); border-radius: 999px; padding: 14px 24px; font-family: var(--rotulo); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; z-index: 60; transition: all .3s; max-width: calc(100% - 32px); text-align: center; }
.toast.on { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 520px) { .cartao-info { flex-direction: column; gap: 2px; } .cartao-info h3 { font-size: 1.15rem; } }

/* Pagamento em modo de teste */
.caixa-teste { border: 1px dashed var(--bronze); border-radius: 14px; padding: 14px 18px; background: var(--papel); font-size: .9rem; color: var(--cafe-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; }
.caixa-teste p { margin: 0; }
.caixa-teste b { color: var(--cafe); }
.bandeira { float: right; letter-spacing: .04em; text-transform: none; color: var(--pote); }
.recusa { color: var(--erro); background: #F6E6E2; border-radius: 10px; padding: 12px 16px; margin: 16px 0 0; font-size: .92rem; }

/* Status do pedido */
.status { display: inline-block; border-radius: 999px; padding: 4px 12px; font-family: var(--rotulo); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: none; white-space: nowrap; background: var(--pedra); color: var(--cafe); }
.s-aguardando { background: #F3E3C9; color: #6E4A12; }
.s-pago { background: #DCE9DF; color: #2F5A3D; }
.s-producao, .s-aprovacao { background: var(--pote-claro); color: var(--pote); }
.s-enviado { background: #DCE4EC; color: #2C4A66; }
.s-entregue { background: var(--cafe); color: var(--marfim); }
.s-cancelado, .s-recusado { background: #F6E6E2; color: var(--erro); }
.sobre .status { margin-left: 6px; vertical-align: 1px; }

/* Acompanhamento do pedido */
.linha-tempo.cinco { grid-template-columns: repeat(5, 1fr); }
.linha-tempo .agora b::before { content: '● '; color: var(--pote); font-size: .7em; vertical-align: middle; }
.pedido-resumo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; text-align: left; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: 28px; margin: 0 0 32px; }
.pedido-resumo h2 { font-size: 1.2rem; }
.pedido-resumo .linha { display: flex; justify-content: space-between; padding: 6px 0; font-size: .95rem; }
.pedido-resumo .total { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 12px; font-weight: 700; }
.pedido-resumo .desc { color: var(--ok); }
.pedido-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .95rem; }
.pedido-item .mini, .ficha .mini { background: var(--pedra); border-radius: 10px; overflow: hidden; }
@media (max-width: 700px) { .linha-tempo.cinco { grid-template-columns: 1fr 1fr; gap: 12px; } .pedido-resumo { grid-template-columns: 1fr; gap: 16px; padding: 20px; } }

/* Painel da loja */
.painel-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 0 8px; }
.painel-cabeca h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.painel-marca { display: flex; align-items: center; gap: 14px; }
.painel-acoes, .painel-acoes > span { display: flex; gap: 24px; flex-wrap: wrap; }
.pedido-acoes .discreto { margin-left: auto; color: var(--cinza); }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0; }
.numeros > div { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.numeros .sobre { margin: 0 0 4px; }
.numeros b { font-family: var(--titulo); font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filtros button { border: 1px solid var(--linha); background: transparent; border-radius: 999px; padding: 8px 14px; font-family: var(--rotulo); font-weight: 600; font-size: .8rem; cursor: pointer; }
.filtros button span { color: var(--cinza); margin-left: 4px; }
.filtros button[aria-pressed="true"] { background: var(--cafe); color: var(--marfim); border-color: var(--cafe); }
.filtros button[aria-pressed="true"] span { color: var(--areia); }
#lista { padding-bottom: 96px; display: flex; flex-direction: column; gap: 12px; }
.pedido-card { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.pedido-card[open] { border-color: var(--cafe-2); }
.pedido-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.4fr 1.6fr 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; font-size: .95rem; }
.pedido-card summary::-webkit-details-marker { display: none; }
.pedido-card summary .valor { font-variant-numeric: tabular-nums; }
.pets { display: flex; gap: 6px; flex-wrap: wrap; }
.pet { font-family: var(--gravacao); font-weight: 900; font-size: .74rem; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--c1); color: var(--c2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pedido-corpo { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; padding: 8px 20px 20px; border-top: 1px solid var(--linha); }
.pedido-corpo h3 { font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin: 16px 0 8px; }
.pedido-corpo p { font-size: .92rem; margin: 0; overflow-wrap: anywhere; }
.fichas { display: flex; flex-direction: column; gap: 10px; }
.ficha { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; font-size: .9rem; }
.gravado { font-family: var(--gravacao); font-weight: 900; letter-spacing: .08em; font-size: 1.15rem; }
.historico { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.historico li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.pedido-acoes { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; padding: 16px 20px 20px; border-top: 1px solid var(--linha); }
.pedido-acoes .btn { padding: .9em 1.8em; }
.rastreio { min-width: 220px; }
@media (max-width: 900px) {
  .numeros { grid-template-columns: 1fr 1fr; }
  .pedido-card summary { grid-template-columns: 1fr auto; }
  .pedido-card summary > :nth-child(2) { grid-column: 1; }
  .pedido-card summary > :nth-child(3) { grid-column: 1 / -1; order: 5; }
  .pedido-card summary > :nth-child(5) { grid-row: 1; grid-column: 2; }
  .pedido-corpo { grid-template-columns: 1fr; gap: 0; }
}

/* Vitrine 3D e montador do suporte */
.palco { position: absolute; inset: 0; cursor: grab; }
.palco:active { cursor: grabbing; }
.palco canvas { width: 100%; height: 100%; display: block; }
.palco.carregando::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border: 2px solid var(--linha); border-top-color: var(--cafe); border-radius: 50%; animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.palco-acoes { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
.palco-btn { font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .06em; background: rgba(251, 249, 245, .88); color: var(--cafe); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.palco-btn:hover { border-color: var(--cafe); }
.palco-dica { position: absolute; right: 18px; top: 16px; font-family: var(--rotulo); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); pointer-events: none; }
.selo-3d { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-family: var(--rotulo); font-weight: 600; font-size: .66rem; letter-spacing: .08em; color: var(--cafe); }
.nota-fotos { margin: 10px 0 0; font-size: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input, .paleta input, .linhas-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: inline-block; padding: 8px 16px; border: 1px solid var(--linha); border-radius: 999px; font-size: .9rem; background: var(--papel); transition: border-color .2s, background .2s, color .2s; }
.chip:hover > span { border-color: var(--cafe-2); }
.chip input:checked + span { border-color: var(--cafe); background: var(--cafe); color: var(--marfim); }
.chip input:focus-visible + span, .paleta input:focus-visible + .cor, .linhas-escolha input:focus-visible + .amostra { outline: 1px solid var(--cafe); outline-offset: 3px; }
.paleta { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-width: 440px; }
.paleta label { cursor: pointer; }
.paleta .cor { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 1px rgba(42, 35, 32, .16); transition: transform .15s ease; }
.paleta label:hover .cor { transform: scale(1.08); }
.paleta input:checked + .cor { box-shadow: inset 0 0 0 1px rgba(42, 35, 32, .16), 0 0 0 2px var(--marfim), 0 0 0 3px var(--cafe); }
.rotulo-sub { font-family: var(--rotulo); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin: 22px 0 14px; display: flex; justify-content: space-between; }
.rotulo-sub span { font-family: var(--texto); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cinza); font-size: .9rem; }
.acabamento .rotulo-sub:first-of-type { margin-top: 6px; }
.linhas-escolha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.linhas-escolha label { cursor: pointer; }
.linhas-escolha .amostra { display: block; background: var(--pedra); border-radius: 12px; border: 1px solid transparent; padding: 2px 2px 8px; transition: border-color .2s; }
.linhas-escolha img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 64%; }
.linhas-escolha small { display: block; text-align: center; font-size: .74rem; line-height: 1.25; color: var(--cafe-2); }
.linhas-escolha input:checked + .amostra { border-color: var(--cafe); }
details.acabamento summary { cursor: pointer; list-style: none; margin-bottom: 0; justify-content: flex-start; gap: 10px; }
details.acabamento summary::-webkit-details-marker { display: none; }
details.acabamento summary span { margin-left: auto; }
details.acabamento summary::after { content: '+'; font-family: var(--texto); font-size: 1.1rem; font-weight: 300; line-height: 1; letter-spacing: 0; }
details.acabamento[open] summary { margin-bottom: 16px; }
details.acabamento[open] summary::after { content: '−'; }
.mini { display: grid; place-items: center; aspect-ratio: 1; container-type: inline-size; }
.mini > img { width: 100%; height: 100%; object-fit: cover; }
.amostra-pote { display: grid; place-items: center; width: 74%; aspect-ratio: 1.2; background: linear-gradient(var(--c1) 0 56%, var(--c2) 56%); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.amostra-pote b { font-family: var(--gravacao); font-weight: 900; font-size: 10cqw; letter-spacing: .04em; color: var(--letra); transform: translateY(-34%); }
.filtros-colecao { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip-btn { font: inherit; font-size: .9rem; padding: 8px 16px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; color: var(--cafe); cursor: pointer; }
.chip-btn:hover { border-color: var(--cafe-2); }
.chip-btn[aria-pressed="true"] { background: var(--cafe); color: var(--marfim); border-color: var(--cafe); }
.paleta-vitrine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 24px; }
.paleta-vitrine div { display: flex; align-items: center; gap: 12px; font-size: .95rem; }
.paleta-vitrine span { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(42, 35, 32, .16); }
.comando { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; line-height: 1.5; background: var(--pedra); padding: 6px 8px; border-radius: 6px; word-break: break-all; color: var(--cafe-2); }
@media (max-width: 860px) {
  .miniaturas { grid-template-columns: repeat(6, minmax(56px, 1fr)); overflow-x: auto; }
  .palco-dica { display: none; }
}
@media (max-width: 760px) { .paleta-vitrine { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .paleta { grid-template-columns: repeat(5, 1fr); max-width: 260px; gap: 12px; }
  .linhas-escolha { gap: 6px; }
}

/* ---------- guia de altura por porte */
.guia-grade { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.guia-portes { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 26px; }
.guia-medida { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.guia-medida b { font-family: var(--titulo); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--pote); }
.guia-medida span { color: var(--cafe-2); }
.regua { position: relative; height: 40px; margin: 8px 0 18px; }
.regua::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 999px; background: var(--pedra); }
.regua-faixa { position: absolute; top: 10px; height: 6px; border-radius: 999px; background: var(--pote); }
.regua-marca { position: absolute; top: 22px; transform: translateX(-50%); font-family: var(--rotulo); font-size: .72rem; font-weight: 600; color: var(--cinza); white-space: nowrap; }
.regua-marca:nth-child(2) { transform: none; }
.regua-marca:last-child { transform: translateX(-100%); }
.guia-dica { border-left: 3px solid var(--pote); padding: 2px 0 2px 12px; }
.guia-medir { margin-top: 18px; }
.guia-modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guia-modelo { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; text-decoration: none; transition: border-color .2s; }
.guia-modelo:hover { border-color: var(--cafe-2); }
.guia-foto { display: block; width: 72px; aspect-ratio: 1; border-radius: 10px; background: var(--pedra); overflow: hidden; }
.guia-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.guia-modelo b { display: block; font-weight: 700; line-height: 1.25; }
.guia-modelo small { color: var(--cinza); font-size: .86rem; }
.guia .rotulo-sub { margin-top: 0; }
details.guia-mini { margin-top: 12px; }
details.guia-mini summary { display: inline-block; cursor: pointer; list-style: none; font-size: .9rem; color: var(--cafe-2); text-decoration: underline; text-underline-offset: 3px; }
details.guia-mini summary::-webkit-details-marker { display: none; }
.guia-mini .chip-btn { font-size: .84rem; padding: 6px 12px; }
.guia-mini-res { margin: 10px 0 0; }
.guia-mini-res:empty { display: none; }
@media (max-width: 900px) { .guia-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 440px) { .guia-modelos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- compra tranquila */
.confianca { background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.confianca-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
.confianca-grade > div { border-top: 1px solid var(--linha); padding-top: 18px; }
.confianca-grade h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.confianca-grade p { color: var(--cafe-2); margin: 0; font-size: .98rem; }
.confianca-n { font-family: var(--rotulo); font-weight: 600; font-size: .74rem; letter-spacing: .2em; color: var(--pote); }
.pagamentos { list-style: none; padding: 0; margin: 56px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagamentos li { border: 1px solid var(--linha); border-radius: 8px; padding: 6px 12px; font-size: .82rem; font-weight: 700; color: var(--cafe-2); background: var(--marfim); }
.pagamentos li.via { border: 0; background: none; font-weight: 400; color: var(--cinza); }
.estrelas { display: block; color: var(--bronze); letter-spacing: .18em; font-size: .95rem; margin-bottom: 12px; }
.aviso-exemplo { margin: 44px auto 0; max-width: 560px; text-align: center; font-size: .84rem; color: var(--cinza); border: 1px dashed var(--areia); border-radius: 10px; padding: 8px 14px; }
.marque { color: var(--cafe-2); }
.confianca-mini { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; font-size: .9rem; color: var(--cafe-2); }
.confianca-mini li { display: flex; gap: 10px; align-items: baseline; }
.confianca-mini li::before { content: '✓'; color: var(--ok); font-weight: 700; }
@media (max-width: 900px) { .confianca-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .confianca-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* checkout: o pagamento acontece na página da InfinitePay */
.pagar-fora p { margin: 0 0 14px; }
.pagar-fora .pagamentos { margin: 0; }
/* painel: entrada com senha, mensagens do contato e lista das Cartas do clube */
.entrar { max-width: 360px; margin: 24px 0 96px; display: grid; gap: 14px; }
.entrar[hidden], #area[hidden] { display: none; }
.painel-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin: 64px 0 96px; }
.painel-extra:empty { display: none; }
.mensagem { border-top: 1px solid var(--linha); padding: 14px 0; }
.mensagem p { margin: 0 0 6px; overflow-wrap: anywhere; }