/* ============ baby — página de peça ============ */
:root{
  --obsidiana:#0A0A0A; --ivory:#F7F5F2; --caramelo:#C8A882;
  --ferro:#2C2C2A; --nota:#A9A49A; --linha:rgba(10,10,10,.14);
  --ease:cubic-bezier(.7,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Archivo,system-ui,sans-serif;background:var(--ivory);color:var(--obsidiana);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
:focus-visible{outline:2px solid var(--caramelo);outline-offset:3px}

.nav{display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 6vw;border-bottom:1px solid var(--linha)}
.nav__logo{font-weight:900;font-size:1.3rem;letter-spacing:-.045em;text-decoration:none}
.nav__back{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ferro)}
.nav__back:hover{color:var(--obsidiana)}

/* 1 · fotografia, máx 46% da altura da janela */
.foto{width:min(100% - 12vw, 420px);aspect-ratio:4/5;max-height:46vh;
  margin:2rem 0 0 max(6vw, calc(50% - 380px + 6vw));background:var(--ferro);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.foto__vazia{text-align:center;padding:2rem}
.foto__marca{font-weight:900;font-size:2.4rem;color:var(--nota);line-height:1;letter-spacing:-.04em}
.foto__nota{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.03em;
  color:var(--caramelo);margin-top:1.1rem;max-width:30ch;line-height:1.6}

/* 2 · nome, preço, tamanho */
.ident{padding:2.4rem 6vw 0;max-width:760px;margin:0 auto}
.ident__nome{font-weight:900;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.03em;line-height:1.1}
.ident__preco{font-family:'IBM Plex Mono',monospace;font-size:.9rem;letter-spacing:.06em;
  color:var(--ferro);margin-top:.6rem;line-height:1.5;text-wrap:balance}
.ident__pre{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.06em;
  color:var(--caramelo);margin-top:.4rem}
.tam{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.tam button{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.08em;
  padding:.62rem .95rem;background:none;border:1px solid var(--linha);color:var(--obsidiana);
  cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.tam button:hover{border-color:var(--obsidiana)}
.tam button[aria-pressed="true"]{background:var(--obsidiana);color:var(--ivory);border-color:var(--obsidiana)}
.comprar{margin-top:1.4rem;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.comprar button{font-family:Archivo,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:1rem 2rem;background:var(--obsidiana);color:var(--ivory);
  border:0;cursor:pointer;transition:background .3s var(--ease)}
.comprar button:hover:not([disabled]){background:var(--caramelo);color:var(--obsidiana)}
.comprar button[disabled]{background:none;color:var(--ferro);border:1px solid var(--linha);cursor:default}
.comprar span{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ferro)}

/* 3 · a frase, cortada nas margens, e a explicação por baixo */
.frase{background:var(--obsidiana);margin-top:3.2rem;padding:clamp(3rem,8vh,5rem) 0 clamp(2.6rem,6vh,3.6rem);
  overflow:hidden}
.frase__linha{font-weight:900;font-size:clamp(2.9rem,13vw,9rem);line-height:.88;
  letter-spacing:-.045em;text-transform:uppercase;color:var(--caramelo);
  padding-left:6vw;margin-right:-12vw;white-space:nowrap}
.frase__linha.duas{white-space:normal;margin-right:0;padding-right:6vw}
/* frases de quatro linhas: o corpo de cima transbordava o ecrã */
.frase__linha.longa{white-space:normal;margin-right:0;padding-right:6vw;
  font-size:clamp(1.9rem,7.6vw,5.2rem);line-height:.95}
.registo{padding:2.4rem 6vw 0;max-width:64ch;
  font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.04em;line-height:1.75}
.registo div{display:flex;gap:1.2rem;padding:.34rem 0}
.registo dt{flex:0 0 9.5rem;color:var(--nota);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding-top:.1rem}
.registo dd{flex:1;color:var(--ivory);min-width:0}

/* 4 · três linhas de contexto */
.contexto{padding:3rem 6vw 0;max-width:760px;margin:0 auto}
.contexto p{font-size:17px;line-height:1.65;max-width:60ch}
.contexto p+p{margin-top:.9rem}
.contexto em{font-family:'Bodoni Moda',serif;font-style:italic}

/* 5 · macro de tecido */
.macro{margin:3rem auto 0;max-width:760px;padding:0 6vw}
.macro__campo{aspect-ratio:16/10;background:var(--ferro);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:1.5rem}
.macro__nota{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.03em;
  color:var(--caramelo);max-width:36ch;line-height:1.65}

/* 6 · bloco de confiança */
.confianca{max-width:760px;margin:3.4rem auto 0;padding:2rem 6vw 0;border-top:1px solid var(--ferro)}
.confianca dl{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:20px}
.confianca div{display:flex;gap:1rem;padding:.42rem 0}
.confianca dt{flex:0 0 8.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ferro)}
.confianca dd{flex:1;min-width:0}
.confianca .verif{color:#6E5427}

.sinal{font-family:Archivo,sans-serif;font-weight:900;font-size:1.6rem;line-height:1;
  color:var(--caramelo);text-align:center;user-select:none}
.sinal--abre{padding:2.2rem 6vw .4rem}
.sinal--fecha{padding:3.4rem 6vw 0}

.rodape{margin-top:3rem;background:var(--obsidiana);color:var(--ivory);padding:3.5rem 6vw 2.5rem}
.rodape__mod{font-weight:900;font-size:2.2rem;letter-spacing:-.05em;line-height:1}
.rodape__links{margin-top:1.6rem;display:flex;gap:1.6rem;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem}
.rodape__links a{color:rgba(247,245,242,.68);text-decoration:none}
.rodape__links a:hover{color:var(--caramelo)}
.rodape__linhas{margin-top:1.8rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  letter-spacing:.05em;color:rgba(247,245,242,.5);line-height:1.9}

@media(max-width:760px){
  .confianca div,.registo div{flex-direction:column;gap:.1rem}
  .confianca dt,.registo dt{flex:none}
  .registo dd{margin-bottom:.6rem}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}