/* Pagina da plaquinha pet. Usa os tokens e botoes de ../css/site.css.
   Feita primeiro para o celular: a previa fica presa no topo enquanto a
   pessoa digita, para ver o nome aparecer na peca. */
.pg-pet { --palco-h: clamp(220px, 38svh, 340px); }
.pg-pet svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---- topo ---- */
.pet-nav { border-bottom: 1px solid var(--linha); }
.pet-nav-in { width: min(var(--largura), 100% - 32px); margin-inline: auto; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pet-local { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--txt-2); padding: 6px 12px; border: 1px solid var(--linha-2); border-radius: 99px; }
.pet-local svg { color: var(--acento); font-size: 15px; }

.pet-topo { padding: 28px 0 20px; }
.pet-topo h1 { margin-top: 10px; font-size: clamp(30px, 8.4vw, 52px); line-height: 1.05; }
.pet-sub { margin-top: 12px; color: var(--txt-2); font-size: 16px; max-width: 560px; }

/* ---- montar: previa + formulario ---- */
.pet-montar { display: grid; gap: 16px; padding-bottom: 40px; }

.pet-palco {
  position: sticky; top: 0; z-index: 5;
  margin-inline: -16px; padding: 8px 16px 10px;
  background: linear-gradient(var(--bg) 85%, transparent);
}
.pet-vistas { display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--sup-1); border: 1px solid var(--linha); border-radius: 12px; }
.pet-vistas button { flex: 1; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--txt-2); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; }
.pet-vistas button[aria-selected="true"] { background: var(--sup-3); color: var(--txt); }

.pet-vista {
  position: relative; margin: 0; height: var(--palco-h); min-height: 220px; overflow: hidden;
  border-radius: var(--r-2); border: 1px solid var(--linha);
  background: radial-gradient(120% 90% at 50% 30%, #23252b 0%, #131417 60%, #0e0f11 100%);
}
.pet-vista-3d::before {                       /* bancada: grade discreta de fundo */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.pet-vista canvas { position: relative; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.pet-vista canvas:active { cursor: grabbing; }
.pet-dica { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--txt-3); pointer-events: none; }
.pet-vista img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.pet-vista figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(14, 15, 17, .78); font-size: 12px; font-weight: 600; }

.pet-form { display: flex; flex-direction: column; gap: 14px; }
.pet-campo { display: flex; flex-direction: column; gap: 6px; }
.pet-campo label, .pet-cores legend { font-size: 13.5px; font-weight: 700; color: var(--txt-2); }
.pet-campo input {
  height: 56px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--sup-1);
  font: 700 20px var(--f-titulo); letter-spacing: .02em; transition: border-color .15s, box-shadow .15s;
}
.pet-campo input::placeholder { color: var(--txt-3); font-weight: 500; }
.pet-campo input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.pet-aviso { min-height: 0; font-size: 14px; font-weight: 600; color: #FF8A8A; }
.pet-aviso:empty { display: none; }
.pet-aviso.leve { color: var(--txt-2); }

.pet-cores { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pet-cores legend { padding: 0; margin-bottom: 6px; }
.pet-cor { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--sup-1); cursor: pointer; transition: border-color .15s, background-color .15s; }
.pet-cor input { position: absolute; opacity: 0; pointer-events: none; }
.pet-cor:has(input:checked) { border-color: var(--acento); background: var(--acento-fundo); }
.pet-cor:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.pet-cor b { display: block; font-size: 14.5px; line-height: 1.2; }
.pet-cor small { display: block; font-size: 12.5px; color: var(--txt-2); line-height: 1.3; }
.pet-amostra { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 28px; border-radius: 8px; font: 700 13px var(--f-titulo); }
.amostra-preta { background: #1c1c1f; color: #f3f3f0; border: 1px solid rgba(255, 255, 255, .18); }
.amostra-branca { background: #f1f0ec; color: #1b1b1d; }

.pet-preco { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--sup-1); border: 1px solid var(--linha); }
.pet-preco b { font: 700 26px var(--f-titulo); font-variant-numeric: tabular-nums; }
.pet-preco small { grid-column: 1 / -1; font-size: 13px; color: var(--txt-3); }
.pet-entrega { padding: 4px 10px; border-radius: 99px; background: rgba(52, 211, 153, .1); font-size: 12.5px; font-weight: 700; color: var(--verde); white-space: nowrap; }
.pet-pedir { width: 100%; }

/* ---- detalhes ---- */
.pet-detalhes { padding: 8px 0 48px; }
.pet-vantagens { list-style: none; padding: 0; display: grid; gap: 8px; }
.pet-vantagens li, .pet-passos li { padding: 16px; border-radius: var(--r-2); background: var(--sup-1); border: 1px solid var(--linha); }
.pet-vantagens b, .pet-passos b { display: block; font-family: var(--f-titulo); font-size: 16px; }
.pet-vantagens span, .pet-passos span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--txt-2); }
.pet-detalhes h2 { margin: 40px 0 16px; font-size: 26px; }
.pet-passos { list-style: none; padding: 0; display: grid; gap: 8px; counter-reset: passo; }
.pet-passos li { counter-increment: passo; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; }
.pet-passos li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acento-fundo); color: var(--acento); font: 700 15px var(--f-titulo); }

.pet-rodape { padding: 24px 0 40px; border-top: 1px solid var(--linha); font-size: 13.5px; color: var(--txt-3); }
.pet-rodape a { text-decoration: none; }
.pet-rodape a:hover { color: var(--txt); }

/* ---- resumo do pedido ---- */
.pet-resumo {
  width: min(460px, 100%); max-width: 100%; max-height: 100dvh; margin: auto; padding: 0;
  border: 1px solid var(--linha-2); border-radius: var(--r-3); background: var(--sup-1); color: var(--txt);
}
.pet-resumo::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.pet-resumo[open] { animation: resumo-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes resumo-entra { from { opacity: 0; transform: translateY(24px); } }
.resumo-in { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.resumo-in h2 { font-size: 24px; }
.resumo-itens { margin: 0; display: grid; gap: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.resumo-itens div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.resumo-itens div + div { border-top: 1px solid var(--linha); }
.resumo-itens dt { color: var(--txt-2); font-size: 14px; }
.resumo-itens dd { margin: 0; font-weight: 700; font-size: 14.5px; text-align: right; overflow-wrap: anywhere; }
.resumo-total { display: flex; justify-content: space-between; align-items: baseline; }
.resumo-total span { color: var(--txt-2); font-weight: 600; }
.resumo-total b { font: 700 30px var(--f-titulo); font-variant-numeric: tabular-nums; }
.resumo-entrega { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .22); font-size: 14px; color: var(--txt-2); }
.resumo-entrega svg { color: var(--verde); font-size: 20px; margin-top: 1px; }
.resumo-entrega b { color: var(--txt); }
.resumo-continuar svg { font-size: 20px; }
.resumo-continuar, .resumo-voltar { width: 100%; }
.resumo-voltar { margin-top: -6px; }

/* celular: o resumo sobe de baixo, colado na borda */
@media (max-width: 559px) {
  .pet-resumo { margin: auto 0 0; width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; border-bottom: 0; }
  .resumo-in { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* o campo focado nao pode ficar escondido atras da previa presa no topo */
  html { scroll-padding-top: calc(var(--palco-h) + 80px); }
}

/* ---- computador: previa a esquerda, formulario a direita ---- */
@media (min-width: 860px) {
  .pg-pet { --palco-h: 440px; }
  .pet-topo { padding: 56px 0 32px; }
  .pet-montar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .pet-palco { top: 24px; margin: 0; padding: 0; background: none; }
  .pet-vantagens, .pet-passos { grid-template-columns: repeat(3, 1fr); }
  .pet-detalhes { padding-top: 24px; }
}