/* PontOriginal — referências aprovadas: editorial branco + ficha roxa translúcida.
   Fotografias exclusivamente da gestão. Layout separado dos dados de preço e das fotos por cor. */
:root { --po-ink:#351c38; --po-plum:#49264d; --po-line:#bc92c0; --po-cream:#f8f4ef; --canto-foto:6px; --po-tecido:url('/img/estudio/textura-po.jpg'); --po-tecido-velo:linear-gradient(#ffffff55,#ffffff55); }
::selection { background:#713773; color:#fff; }
body { background:#27172b; }
.livro { box-shadow:0 16px 48px #11091555; }
.folha.esq::after { background:linear-gradient(270deg,#351c3818,transparent 2%); }
.folha.dir::after { background:linear-gradient(90deg,#351c3818,transparent 2%); }
.pagina.peca, .pagina.indice, .pagina.categoria { background:var(--po-tecido-velo),var(--po-tecido) center/cover; color:var(--po-ink); }
/* O tecido pertence à página: o alfa da imagem da gestão deixa-o visível, sem cartão branco. */
.carta .foto, .carta .foto img, .d-foto { background:transparent; }
.sub a.ir img { background:var(--po-tecido-velo),var(--po-tecido) center/cover; }
.peca .cabeca { color:var(--po-ink); text-shadow:none; padding:3.8cqw 4.5cqw; font:400 clamp(13px,2.5cqw,22px)/1 'Designer',var(--corpo); letter-spacing:0; }
/* A capa da gestão ocupa a folha, com uma transição curta para o tecido PO.
   O mesmo enquadramento aplica-se antes e depois de o dono carregar a v1. */
.carta .foto { inset:0 0 14%; padding:0; display:block; container-type:normal; overflow:hidden; mask-image:linear-gradient(90deg,transparent var(--foto-fade-inicio,43%),#000 var(--foto-fade-fim,48%)); }
.modelo-esquerda .carta .foto { inset:0 0 14%; mask-image:linear-gradient(90deg,#000 calc(100% - var(--foto-fade-fim,48%)),transparent calc(100% - var(--foto-fade-inicio,43%))); }
.carta .foto img { position:absolute; width:var(--foto-tamanho,86cqw); height:var(--foto-tamanho,86cqw); max-width:none; top:var(--foto-topo,0cqw); left:var(--foto-direita,31%); object-fit:contain; border-radius:0; transition:none; mask-image:linear-gradient(180deg,transparent,#000 var(--foto-borda,2%),#000 calc(100% - var(--foto-borda,2%)),transparent); }
.modelo-esquerda .carta .foto img { left:var(--foto-esquerda,-17%); }
/* Retratos da referência aprovada: maior presença, mantendo a origem na gestão. */
.carta[data-prod="78b2def1-dd02-4202-9142-56e93eee5ef9"],
.carta[data-prod="b0f88adb-154d-4ab7-a455-04e2344ee97d"] { --foto-tamanho:100cqw; --foto-direita:23%; --foto-esquerda:-23%; }
/* Composições largas: preservar as duas peças ou o contorno completo do saco. */
.carta[data-prod="3e214f4a-1d6a-4e7e-a16a-3a55024bd2a4"],
.carta[data-prod="70d34b85-fc84-40fd-809a-694924aa0599"],
.carta[data-prod="f7ad6237-aab2-4902-90fe-554efdc3f111"],
.carta[data-prod="a19dba44-c06b-4737-9fd3-72b0582fd0eb"],
.carta[data-prod="689b3763-8334-4582-98bf-557bc3c1f29c"],
.carta[data-prod="d0c99ec7-3269-4e47-acec-e5f3fef52c39"],
.carta[data-prod="23245bf0-031b-4d61-95ac-ffc582398fad"],
.carta[data-prod="9af1d822-88bb-42d1-b1fc-f5903d447f70"],
.carta[data-prod="1cb4bd5f-9357-4135-9de9-adcdc1a3dc31"],
.carta[data-prod="bd347635-61c2-457f-9861-cb64707f6489"] { --foto-tamanho:64cqw; --foto-topo:20cqw; --foto-direita:42%; --foto-esquerda:-6%; }
.carta[data-prod="1cb4bd5f-9357-4135-9de9-adcdc1a3dc31"],
.carta[data-prod="bd347635-61c2-457f-9861-cb64707f6489"] { --foto-borda:8%; }
/* Enquadramento editorial da manga comprida: aproximar o modelo sem alterar a fotografia. */
.carta[data-prod="5d075aa4-41fa-4b38-8c32-a9b57e8e93cf"] { --foto-tamanho:115cqw; --foto-topo:-15cqw; --foto-direita:18%; --foto-esquerda:-33%; }
.carta:hover .foto img { transform:none; }
.carta .rotulo { inset:29% auto auto 4.5%; width:40%; height:auto; padding:0; display:block; color:var(--po-ink); }
.modelo-esquerda .rotulo { left:55.5%; width:40%; }
.rotulo h3 { font-size:6.1cqw; line-height:1.03; letter-spacing:-.015em; text-wrap:balance; overflow-wrap:normal; display:block; overflow:visible; -webkit-line-clamp:unset; }
.especificacao { margin-top:3.2cqw; font-size:clamp(12px,2.3cqw,21px); line-height:1.4; }
.especificacao::before { content:''; display:block; width:8cqw; height:3px; margin-bottom:1.8cqw; background:var(--po-ink); border-radius:2px; }
.especificacao .versoes { margin-top:5px; font:400 clamp(11px,1.7cqw,15px)/1.35 var(--corpo); text-transform:none; letter-spacing:0; opacity:1; }
.editorial-rodape { position:absolute; inset:auto 0 0; min-height:14%; padding:2.4cqw 4.5cqw; display:flex; align-items:center; justify-content:space-between; gap:2cqw; background:rgba(250,247,243,.97); border-top:1px solid #351c3812; color:var(--po-ink); }
.editorial-rodape > div { min-width:0; }
.editorial-rodape .preco { display:block; font-size:clamp(15px,2.5cqw,24px); line-height:1.1; white-space:nowrap; }
.editorial-rodape .preco b { font:400 clamp(24px,4.8cqw,44px)/1.1 'Designer',var(--corpo); }
.editorial-rodape .incluida { display:block; font-size:clamp(10px,1.65cqw,15px); line-height:1.3; margin-top:6px; }
.editorial-rodape .mini { display:flex; gap:2cqw; height:auto; min-height:42px; padding:5px 5px 5px 13px; border:1px solid #a36aa7; border-radius:4px; background:var(--po-plum); color:var(--po-cream); font:400 clamp(14px,2.4cqw,22px)/1 'Designer',var(--corpo); letter-spacing:0; }
.editorial-rodape .mini svg { width:30px; height:30px; padding:7px; border-radius:3px; background:var(--po-cream); color:var(--po-plum); }
.carta:hover .mini { background:#633168; color:#fff; }
.carta:focus-visible { outline:3px solid var(--roxo); outline-offset:-4px; }
.carta:focus-visible .foto img { outline:none; }
.carta.realce::after { box-shadow:inset 0 0 0 2px var(--roxo); }
body.duplo #antes { left:10px; width:44px; }
body.duplo #depois { right:10px; width:44px; }
/* O vidro tem uma base roxa suficientemente opaca para manter contraste sobre qualquer fotografia. */
.detalhe { --verde:#eed3ef; --noite:#351c38; --papel:#faf5ef; }
.detalhe.a-fechar { transition:opacity .24s cubic-bezier(.4,0,.2,1); }
.detalhe.a-fechar .rev { transition:none; }
@media (prefers-reduced-motion:reduce) { .detalhe.a-fechar { transition:none; } }
.detalhe .painel { width:clamp(420px,44vw,660px); padding:0 28px 24px; background:rgba(54,27,59,.88); border:1px solid #bd94bf; border-radius:18px; backdrop-filter:blur(24px) saturate(.8); -webkit-backdrop-filter:blur(24px) saturate(.8); box-shadow:0 18px 60px #150b2440; scrollbar-width:thin; scrollbar-color:#bb8cbe transparent; }
.detalhe .p-topo { margin:0 -28px; padding:0 28px; height:56px; background:rgba(54,27,59,.96); color:var(--papel); border-bottom-color:#bd94bf88; font-size:12px; font-weight:600; letter-spacing:.12em; }
.detalhe .fechar { font-size:14px; letter-spacing:0; text-transform:none; }
.detalhe h2 { font-size:clamp(30px,3.5vw,52px); line-height:1.02; margin:20px 0; }
.detalhe .linha { padding:13px 0; gap:10px 12px; border-color:#bd94bf88; }
.detalhe .rot { font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; opacity:1; }
.detalhe .aux { font-size:12px; letter-spacing:0; text-transform:none; opacity:1; }
.detalhe .chips > button { min-height:40px; padding:8px 14px; font-size:14px; border-radius:12px; border-color:#bd94bf; }
.detalhe #dTecs > button { border-radius:12px; }
.detalhe .chips > button[aria-pressed="true"] { font-weight:600; background:var(--papel); color:var(--po-ink); }
.detalhe .chips > button[aria-pressed="true"]::before { content:''; width:12px; height:7px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); }
.detalhe .chips > button[aria-pressed="true"] { display:flex; align-items:center; gap:9px; }
.detalhe .escaloes { gap:7px; }
.detalhe .escaloes span { padding:9px 5px; min-height:58px; border-color:#bd94bf; }
.detalhe .escaloes small { font-size:11px; opacity:1; letter-spacing:0; text-transform:none; }
.detalhe .escaloes b { font-size:19px; font-weight:500; }
.detalhe .escaloes span.ativo { background:var(--papel); color:var(--po-ink); border-color:var(--papel); }
.detalhe .bola { width:32px; height:32px; }
.detalhe .seta { width:32px; height:32px; border-color:#bd94bf; }
.detalhe .tam, .detalhe .passo { border-radius:12px; border-color:#bd94bf; }
.detalhe .tam.com { background:var(--papel); color:var(--po-ink); border-color:var(--papel); }
.detalhe .tam.com i, .detalhe .tam.com .menos, .detalhe .tam.com .mais { color:var(--po-ink); }
.detalhe .tam button, .detalhe .tam .n { min-height:38px; font-size:13px; }
.detalhe .passo button { width:42px; color:var(--papel); }
.detalhe .qtd { font-size:18px; min-height:42px; }
.detalhe .conta b { font-size:26px; font-weight:600; }
.detalhe .conta b small { font-size:11px; letter-spacing:0; opacity:1; }
.detalhe .conta > span, .detalhe .conta > small { opacity:1; }
.detalhe button.pedir { border:1px solid #d5a2da; border-radius:5px; min-height:60px; padding:6px 6px 6px 18px; background:#562d5b88; color:var(--papel); font:400 clamp(18px,2vw,28px)/1.1 'Designer',var(--corpo); letter-spacing:0; }
.detalhe button.pedir::after { content:''; width:44px; height:44px; flex:none; margin-left:12px; border-radius:4px; background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5 19 12 8 19Z' fill='%2349264d'/%3E%3C/svg%3E") center/24px no-repeat; }
.detalhe button.pedir:hover { background:#713773; }
.detalhe button.pedir:hover::after { transform:none; }
.detalhe .nota { font-size:12px; line-height:1.5; letter-spacing:0; text-transform:none; opacity:1; }
.detalhe .ficha summary { font-size:13px; letter-spacing:0; text-transform:none; opacity:1; text-decoration:underline; text-underline-offset:4px; }
.detalhe .d-fechar-foto { background:#49264de6; border-radius:6px; letter-spacing:.05em; }
@media (max-width:899px), (max-aspect-ratio:11/10) {
  .carta { --rodape-altura:110px; }
  .carta .foto, .modelo-esquerda .carta .foto { inset:8% 0 calc(var(--rodape-altura) + 112px); display:grid; place-items:center; container-type:size; mask-image:none; }
  .carta .foto img, .modelo-esquerda .carta .foto img { position:static; width:min(100cqw,100cqh * var(--r,1)); height:auto; max-height:100%; aspect-ratio:var(--r,1); object-fit:contain; transform:none; mask-image:linear-gradient(180deg,transparent,#000 4%,#000 94%,transparent),linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); mask-composite:intersect; }
  .carta:hover .foto img { transform:none; }
  .carta .rotulo, .modelo-esquerda .rotulo { inset:auto 6% calc(var(--rodape-altura) + 20px); width:auto; padding:0; }
  .rotulo h3 { font-size:7.8cqw; line-height:1.03; }
  .especificacao { margin-top:10px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:14px; }
  .especificacao::before { display:none; }
  .especificacao .versoes { margin:0; font-size:12px; }
  .editorial-rodape { height:var(--rodape-altura); min-height:0; padding:14px 6%; gap:10px; }
  .editorial-rodape .preco { font-size:15px; }
  .editorial-rodape .preco b { font-size:27px; }
  .editorial-rodape .incluida { font-size:10px; max-width:22ch; }
  .editorial-rodape .mini { font-size:15px; min-height:44px; gap:9px; padding-left:10px; }
  .peca .cabeca { padding:6cqw; font-size:15px; }
}
@media (max-width:360px) {
  .carta { --rodape-altura:132px; }
  .editorial-rodape { display:grid; grid-template-columns:1fr; gap:6px; padding:12px 6%; }
  .editorial-rodape .mini { justify-self:end; }
  .editorial-rodape .incluida { max-width:none; margin-top:3px; }
}
@media (max-width:760px), (orientation:portrait) {
  body > div[style*="z-index:200"] { top:42px !important; bottom:auto !important; left:auto !important; right:12px; transform:none !important; font-size:8px !important; padding:2px 6px !important; }
  .detalhe .painel { width:100%; max-height:64dvh; padding:0 18px calc(18px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; }
  .detalhe .p-topo { margin:0 -18px; padding:0 18px; height:48px; font-size:11px; }
  .detalhe h2 { font-size:30px; margin:16px 0; }
  .detalhe .linha { padding:12px 0; }
  .detalhe .rot { font-size:14px; }
  .detalhe .chips > button { padding:8px 12px; min-height:44px; }
  .detalhe .escaloes { gap:5px; }
  .detalhe .escaloes b { font-size:16px; }
  .detalhe .escaloes span.sob-proposta b { font-size:10px; }
  .detalhe .escaloes small { font-size:10px; }
  .detalhe .conta b { font-size:24px; }
  .detalhe button.pedir { font-size:20px; }
  .detalhe .nota { letter-spacing:0; }
}
@media (prefers-reduced-motion:reduce) { .mini { transition:none; } }

/* Revisão: botões de marca, leitura do processo e ampliação sobre tecido branco. */
.artigo .pedir, .contra .pedir {
  --botao-cor:#49264d; --botao-borda:#a36aa7; --botao-hover:#633168;
  display:inline-flex; justify-content:space-between; align-items:center; gap:18px;
  min-height:48px; max-width:100%; padding:5px 5px 5px 16px;
  border:1px solid var(--botao-borda); border-radius:4px;
  background:var(--botao-cor); color:var(--po-cream);
  font:400 clamp(15px,2.6cqw,24px)/1.1 'Designer',var(--corpo); letter-spacing:0;
}
.artigo .pedir::before, .contra .pedir::before { content:none; }
.artigo .pedir::after, .contra .pedir::after {
  content:''; flex:0 0 36px; width:36px; height:36px; border-radius:3px;
  background:var(--po-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5 19 12 8 19Z' fill='%2349264d'/%3E%3C/svg%3E") center/22px no-repeat;
}
.contra .pedir { --botao-cor:#176444; --botao-borda:#75c49a; --botao-hover:#207b54; }
.contra .pedir::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5 19 12 8 19Z' fill='%23176444'/%3E%3C/svg%3E"); }
.artigo .pedir:hover, .contra .pedir:hover { background:var(--botao-hover); }
.artigo .pedir:focus-visible, .contra .pedir:focus-visible { outline:2px solid var(--po-line); outline-offset:4px; }
.artigo .pg-in { overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#a36aa7 transparent; }
.artigo .pg-in > * { flex-shrink:0; }
.artigo .passos { flex:1 0 auto; min-height:auto; }
.artigo .passos li { flex:1 0 auto; }
.artigo .fecho { margin-top:4px; }
.d-veu, .d-fundo { background:#f8f7f7; background-image:var(--po-tecido-velo),var(--po-tecido); background-position:center; background-size:cover; background-repeat:no-repeat; }
.d-fundo { filter:none; }
.d-fundo::after { display:none; }
@media (max-width:899px), (max-aspect-ratio:11/10) {
  .livro { touch-action:pan-y; }
  .artigo .pg-in { padding:20px; gap:12px; }
  .artigo h2 { margin-bottom:0; }
  .artigo .passos li { grid-template-columns:40px 1fr; gap:12px; padding:12px 0; }
  .artigo .passos .n { font-size:30px; }
  .artigo .passos h3 { font-size:13px; line-height:1.15; }
  .artigo .passos p { font-size:12px; line-height:1.45; }
  .artigo .fecho { gap:14px; padding-top:14px; }
  .artigo .fecho p { max-width:none; font-size:13px; }
}
@media (max-width:760px), (orientation:portrait) {
  .d-foto { object-fit:cover; object-position:center top; border-radius:0; }
  .detalhe .d-fechar-foto { display:none; }
}

/* Passos: separar a numeração, manter título e descrição como um só bloco. */
.artigo .passos li { grid-template-columns:max-content minmax(0,1fr); column-gap:clamp(18px,3cqw,26px); }
.artigo .passos .n { width:1.85em; }
.artigo .passos li > div { min-width:0; }
.artigo .passos h3 { margin-bottom:2px; line-height:1.1; }
.artigo .passos p { margin-top:0; }

/* Telemóveis e tablets: sem desfoque por trás dos painéis (refazê-lo em cada quadro é caro); o fundo fica mais opaco para ler igual. */
@media (hover: none), (max-width: 899px) {
  .busca-campo, .busca-lista, .detalhe .painel, .detalhe .p-topo, .detalhe .d-fechar-foto, .p-caixa { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .busca-campo { background: rgba(32, 18, 36, .94); }
  .busca-lista, .p-caixa { background: rgba(24, 13, 27, .98); }
  .detalhe .painel { background: rgba(54, 27, 59, .98); }
}

/* A proposta e a pesquisa mantêm as miniaturas brancas; a ficha usa o tecido PO sob o alfa. */
.p-linhas img, .busca-lista li img { background: #fff; }

/* Revista em pares (Brindes): duas peças por página, em zigue-zague. A fotografia ocupa ~2/3 da largura;
   o nome e os três preços ficam numa coluna estreita, do lado de fora. A peça de baixo troca os lados. */
.pagina.par { background:var(--po-tecido-velo),var(--po-tecido) center/cover; color:var(--po-ink); }
.par .cabeca { position:absolute; inset:0 0 auto 0; z-index:2; display:flex; justify-content:space-between; pointer-events:none;
  padding:3.8cqw 4.5cqw; color:var(--po-ink); font:400 clamp(13px,2.5cqw,22px)/1 'Designer',var(--corpo); letter-spacing:0; }
.par-lista { position:absolute; inset:calc(7.6cqw + 22px) 4.5cqw 3.5cqw; display:grid; grid-template-rows:1fr 1fr; }
.pagina.par .carta { position:relative; inset:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,36%);
  align-items:center; gap:3.5cqw; padding:1.6cqh 0; }
.pagina.par .carta + .carta { border-top:1px solid #351c3826; }
.pagina.par .carta.inverte { grid-template-columns:minmax(0,36%) minmax(0,1fr); }
.pagina.par .carta.inverte .foto { order:2; }
.pagina.par .carta .foto { position:relative; inset:auto; align-self:stretch; min-height:0; padding:0; display:block; overflow:visible;
  container-type:normal; mask-image:none; -webkit-mask-image:none; }
.pagina.par .carta .foto img { position:absolute; inset:0; top:0; left:0; width:100%; height:100%; max-width:none; max-height:none;
  aspect-ratio:auto; object-fit:contain; mask-image:none; -webkit-mask-image:none; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.pagina.par .carta:hover .foto img { transform:scale(1.03); }
.par-info { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(4px,1cqh,10px); }
.inverte .par-info { align-items:flex-end; text-align:right; }
/* O bloco do preço afasta-se da margem da folha: o lado de fora leva folga própria. */
.par-info { padding-right:4.5cqw; }
.inverte .par-info { padding-right:0; padding-left:4.5cqw; }
/* O nome vai até 4 linhas, sem nunca partir uma palavra: começa grande e o giro.js (caber) encolhe-o até caber. */
.par-nome { font-size:clamp(16px,5cqw,40px); line-height:1.02; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:normal; hyphens:none; max-width:100%; }
.par-precos { margin:clamp(2px,.6cqh,6px) 0 0; display:grid; gap:2px; width:100%; }
.par-precos div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:2px 0; border-bottom:1px solid #351c3814; }
.par-precos dt { font-size:clamp(9px,1.5cqw,12px); letter-spacing:.08em; text-transform:uppercase; opacity:.7; white-space:nowrap; }
.par-precos dd { margin:0; font-size:clamp(11px,2.1cqw,17px); font-weight:600; white-space:nowrap; }
.par-nota, .par-com { font-size:clamp(8px,1.3cqw,11px); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.par-com { color:#713773; opacity:1; }
.pagina.par .carta:focus-visible { outline:2px solid #713773; outline-offset:4px; }
/* telemóvel: uma página de cada vez, cada peça com metade do ecrã; a coluna dos preços alarga um pouco */
@media (max-width:899px), (max-aspect-ratio:11/10) {
  .par .cabeca { padding:6cqw; font-size:15px; }
  .par-lista { inset:calc(12cqw + 18px) 5cqw 4cqw; }
  .pagina.par .carta { grid-template-columns:minmax(0,1fr) minmax(0,43%); gap:4cqw; }
  .pagina.par .carta.inverte { grid-template-columns:minmax(0,43%) minmax(0,1fr); }
  .pagina.par .carta:hover .foto img { transform:none; }
  .par-nome { font-size:clamp(16px,6.5cqw,28px); }
  .par-info { padding-right:3cqw; }
  .inverte .par-info { padding-right:0; padding-left:3cqw; }
  .par-precos dt { font-size:10px; }
  .par-precos dd { font-size:13px; }
  .par-nota, .par-com { font-size:9px; }
}