/* Brechó Nova Chance — site de uma página (briefing PRJ-0002/Site/01-briefing.md, v0.3).
   Estrutura inspirada no site do Peça Rara, com a identidade do Nova Chance.
   Letras próprias (licença SIL OFL, ver pasta fontes): Young Serif nos títulos, Atkinson Hyperlegible no texto. */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/young-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }

/* Cores da identidade aprovada: mostarda #FFBE47, mel #FDB043, caramelo #A77632, café-vinho #601603 e papel #F8F4EC.
   Mostarda sempre com texto vinho (contraste 7,9:1); caramelo só em detalhe decorativo. */
:root {
  --papel: #f8f4ec;
  --papel-escuro: #efe6d6;
  --branco: #fffdf8;
  --mostarda: #ffbe47;
  --mel: #fdb043;
  --caramelo: #a77632;
  --tinta: #2a1712;
  --suave: #5f4b41;
  --vinho: #601603;
  --vinho-escuro: #3d0d02;
  --linha: #ddd0bd;
  --titulo: "Young Serif", "Iowan Old Style", Georgia, serif;
  --texto: "Atkinson Hyperlegible", system-ui, sans-serif;
  --margem: clamp(1rem, 4vw, 3.5rem);
  --largura: 1240px;
  --raio: clamp(20px, 2.4vw, 32px);
  --raio-p: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.1875rem/1.6 var(--texto); }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: var(--vinho); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--vinho); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; color: var(--vinho-escuro); margin: 0; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1rem; text-wrap: pretty; }
figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.pular { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--vinho); color: #fff; padding: .7rem 1rem; border-radius: 999px; }
.pular:focus { top: 1rem; }
.revisao { background: #fff1dc; border-bottom: 1px solid #ecc995; color: #5c3200; font-size: 1.0625rem; text-align: center; padding: .5rem var(--margem); }

/* Rótulos, textos e botões */
.rotulo { font: 700 .9rem/1.35 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--vinho); margin: 0 0 1rem; }
.chamada { font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--suave); max-width: 33rem; }
.sub { font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: var(--suave); max-width: 40rem; margin: 1rem auto 0; }
.nota { color: var(--suave); font-style: italic; margin: 1rem 0 0; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; }
.centro { text-align: center; }
.acoes-centro { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1rem; margin-top: 3rem; }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .8rem 1.8rem; background: var(--vinho); color: #fff; border: 2px solid var(--vinho); font-weight: 700; font-size: 1.08rem; text-decoration: none; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; }
.botao:hover { background: var(--vinho-escuro); border-color: var(--vinho-escuro); }
.botao-mostarda { background: var(--mostarda); border-color: var(--mostarda); color: var(--vinho-escuro); }
.botao-mostarda:hover { background: var(--mel); border-color: var(--mel); }
.botao-contorno { background: transparent; color: var(--vinho); }
.botao-contorno:hover { background: var(--vinho); color: #fff; }
.botao-pequeno { min-height: 2.9rem; padding: .5rem 1.25rem; font-size: 1rem; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(248, 244, 236, .95); border-bottom: 1px solid var(--linha); }
@supports (backdrop-filter: blur(8px)) { .topo { background: rgba(248, 244, 236, .84); backdrop-filter: blur(8px); } }
.topo-linha { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: .55rem var(--margem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marca img { height: 2.9rem; width: auto; }
.topo nav { display: none; gap: 1.8rem; }
.topo nav a { color: var(--tinta); font-weight: 700; font-size: 1rem; text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent; }
.topo nav a:hover { border-color: var(--mostarda); }
.topo-botoes { display: flex; gap: .6rem; }
.topo-consignar { display: none; }

/* Abertura: texto à esquerda, as irmãs sobre o bloco mostarda à direita */
.abertura { background: var(--papel-escuro); }
.abertura-dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 2.4rem var(--margem) 3.6rem; display: grid; gap: 2.8rem; align-items: center; }
.abertura h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); line-height: 1; margin-bottom: 1.5rem; }
.abertura h1 em { font-style: normal; color: var(--vinho); display: inline-block; white-space: nowrap; position: relative; padding: 0 .1em .16em; margin-left: -.1em; background: linear-gradient(transparent 76%, var(--mostarda) 76%); }
.abertura h1 em::after { content: ""; position: absolute; left: .14em; right: .14em; bottom: .075em; height: .028em; min-height: 2px; background: repeating-linear-gradient(90deg, var(--vinho) 0 .16em, transparent .16em .27em); }
.abertura .chamada { margin-bottom: 2rem; }

/* Abertura: duas peças da loja em cartões, uma por cima da outra, sobre o bloco mostarda */
.abertura-visual { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); padding: 2.4rem 0 0; }
.abertura-visual::before { content: ""; position: absolute; top: 0; right: 0; bottom: 3.4rem; left: 14%; background: var(--mostarda); border-radius: var(--raio); }
.vitrine { position: relative; z-index: 1; grid-row: 1; background: var(--branco); padding: .55rem; border-radius: var(--raio); box-shadow: 0 18px 40px rgba(42, 23, 18, .2); }
.vitrine img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--raio) - .4rem); }
.vitrine-a { grid-column: 1 / 9; rotate: -2deg; }
.vitrine-b { grid-column: 7 / 13; align-self: end; margin-bottom: -1.2rem; rotate: 3deg; z-index: 2; }
.vitrine-legenda { grid-column: 1 / -1; position: relative; z-index: 1; font-size: 1.0625rem; font-weight: 700; color: var(--vinho-escuro); margin: 2.4rem 0 0; text-align: center; }
.tag-vitrine { top: 1.6rem; width: 5.6rem; padding: 1.05rem .5rem .55rem; --giro: -6deg; rotate: var(--giro); }
.vitrine-a .tag-vitrine { left: -.9rem; }
.vitrine-b .tag-vitrine { right: -.9rem; background: var(--mostarda); --giro: 5deg; }
.tag-vitrine .tag-marca { font-size: .56rem; letter-spacing: .08em; white-space: nowrap; }
.vitrine-b .tag-vitrine { top: .8rem; }
.tag-vitrine .tag-num { font-size: 1.6rem; }
.tag-vitrine .tag-linha { font-size: .72rem; }

/* Etiqueta pendurada (a etiqueta da loja como símbolo) */
.tag { position: absolute; z-index: 2; background: var(--branco); color: var(--tinta); box-shadow: 0 8px 20px rgba(42, 23, 18, .2); border-radius: 6px; transform-origin: 50% -2.2rem; text-align: center; }
.tag::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 2.4rem; background: var(--tinta); opacity: .7; }
.tag-furo { position: absolute; top: .45rem; left: 50%; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--papel); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.tag-marca { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vinho); }
.tag-num { display: block; font: 2rem/1.05 var(--titulo); color: var(--vinho-escuro); margin: .15rem 0 .05rem; }
.tag-linha { display: block; font-size: .8rem; color: var(--vinho-escuro); border-top: 1px dashed var(--vinho); padding-top: .3rem; }

/* Seções */
.secao { padding: 4.5rem var(--margem); }
.secao-branca { background: var(--branco); }
.secao-papel { background: var(--papel-escuro); }
.secao-cabeca { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.secao-cabeca h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

/* Como funciona: 3 passos em cartões, cada um com sua etiqueta numerada */
.passos { max-width: var(--largura); margin: 0 auto 2.8rem; display: grid; gap: 2.6rem 1.6rem; }
.passo { position: relative; background: var(--papel); border-radius: var(--raio); padding: 4.6rem 1.8rem 2rem; text-align: center; margin-top: 1.6rem; }
.passo h3 { font-size: clamp(1.55rem, 2.2vw, 1.85rem); margin-bottom: .8rem; }
.passo p { color: var(--suave); margin: 0 auto; max-width: 22rem; }
.tag-passo { top: -1.2rem; left: 50%; margin-left: -2.6rem; width: 5.2rem; padding: 1.1rem .5rem .55rem; background: var(--mostarda); rotate: -4deg; }
.passo:nth-child(2) .tag-passo { rotate: 3deg; }
.passo:nth-child(3) .tag-passo { rotate: -2deg; }
.tag-passo .tag-num { font-size: 2.1rem; margin: 0; }

/* Peças: cartões arredondados, nome em cima e foto embaixo */
.cartoes-pecas { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cartao-peca { background: var(--branco); border-radius: var(--raio); padding: .8rem; height: 100%; display: flex; flex-direction: column; }
.cartao-peca figcaption { display: flex; align-items: center; gap: .55rem; font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: var(--vinho-escuro); padding: .3rem .2rem .8rem; min-height: 3.6rem; }
.cartao-peca img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio-p); margin-top: auto; }
.mini-tag { flex: none; font: 400 1.05rem/1 var(--titulo); color: var(--vinho-escuro); background: var(--mostarda); padding: .35rem .5rem .3rem; border-radius: 6px; }

/* Nossa história */
.historia-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: 2.6rem; align-items: center; }
.historia-foto img { width: 100%; aspect-ratio: 1300 / 1164; object-fit: cover; border-radius: var(--raio); }
.historia-foto figcaption { font-size: 1.0625rem; font-weight: 700; color: var(--vinho-escuro); margin-top: .9rem; text-align: center; }
.historia-texto h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: 1.4rem; }
.relato { margin: 0; }
.relato p { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.4 var(--titulo); color: var(--vinho); margin-bottom: 1rem; }
.relato p::before { content: "\201C"; }
.relato p::after { content: "\201D"; }
.relato footer { font-size: 1.125rem; color: var(--suave); padding-left: 2.6rem; position: relative; }
.relato footer::before { content: ""; position: absolute; left: 0; top: .8em; width: 1.8rem; border-top: 3px solid var(--mostarda); }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 2.2rem 0 0; }
.numeros div { display: flex; flex-direction: column-reverse; justify-content: flex-end; background: var(--papel); border-radius: var(--raio-p); padding: 1rem .9rem; text-align: center; }
.numeros dd { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.2rem)/1 var(--titulo); color: var(--vinho); }
.numeros dt { font-size: 1rem; line-height: 1.3; color: var(--suave); margin-top: .5rem; }

/* O cuidado: cartão mostarda */
.cuidado { max-width: var(--largura); margin: 4rem auto 0; background: var(--mostarda); border-radius: var(--raio); padding: 2.4rem 1.6rem; display: grid; gap: 2rem; align-items: center; }
.cuidado .rotulo { color: var(--vinho-escuro); }
.cuidado h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1rem; }
.cuidado p { color: var(--tinta); max-width: 34rem; margin-bottom: 1.6rem; }
.cuidado-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--raio-p); }

/* Visite: texto à esquerda, fachada em cartão à direita (no lugar do mapa) */
.visite-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: 2.4rem; align-items: center; }
.visite h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-bottom: 1.2rem; }
.endereco { font-size: 1.2rem; }
.endereco strong { font-size: 1.35rem; color: var(--vinho-escuro); }
.horario { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: 1.8rem; font-weight: 700; }
.confirmar { font-size: 1rem; font-weight: 700; background: #fff1dc; color: #5c3200; border: 1px dashed #c98a2b; padding: .15rem .65rem; border-radius: 999px; }
.visite-foto { background: var(--branco); border-radius: var(--raio); padding: .7rem; box-shadow: 0 18px 40px rgba(42, 23, 18, .1); }
.visite-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--raio) - .5rem); }

/* Rodapé */
.rodape { background: var(--vinho-escuro); color: #ecd3c8; padding: 3rem 0 6.5rem; }
.rodape-grade { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 1.4rem; }
.rodape img { width: 9.5rem; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.rodape p { margin: 0; font-size: 1.125rem; }
.rodape a { color: var(--mostarda); }
.rodape .leve { color: #d9b9ab; font-size: 1.0625rem; max-width: 34rem; }
.rodape :focus-visible { outline-color: var(--mostarda); }

/* WhatsApp sempre à mão no celular */
.whats-fixo { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 30; display: flex; justify-content: center; align-items: center; min-height: 3.4rem; background: var(--vinho); color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; border-radius: 999px; box-shadow: 0 10px 26px rgba(61, 13, 2, .35); }

/* ---------- Telas médias ---------- */
@media (max-width: 519px) {
  .numeros { grid-template-columns: 1fr; }
  .numeros div { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 1rem; text-align: left; }
  .numeros dd { min-width: 5.4rem; }
  .numeros dt { margin-top: 0; }
}
@media (min-width: 520px) {
  .topo-consignar { display: inline-flex; }
}
@media (min-width: 700px) {
  .passos { grid-template-columns: repeat(3, 1fr); }
  .cartoes-pecas { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .cartao-peca { padding: 1rem; }
  .cuidado { grid-template-columns: 1.4fr 1fr; padding: 3rem; }
}

/* ---------- Computador ---------- */
@media (min-width: 960px) {
  .topo nav { display: flex; }
  .whats-fixo { display: none; }
  .rodape { padding: 4rem 0 3rem; }
  .rodape-grade { grid-template-columns: auto 1fr 1fr; align-items: start; gap: 3rem; }

  .abertura-dentro { grid-template-columns: 1fr 1.05fr; gap: 4rem; padding-top: 4.5rem; padding-bottom: 5.5rem; }
  .abertura-visual { padding: 3rem 0 0; }
  .vitrine { padding: .7rem; }
  .tag-vitrine { width: 7rem; top: 2.2rem; padding: 1.2rem .6rem .65rem; }
  .vitrine-a .tag-vitrine { left: -1.6rem; }
  .vitrine-b .tag-vitrine { right: -1.6rem; top: 2.2rem; }
  .tag-vitrine .tag-marca { font-size: .66rem; letter-spacing: .12em; }
  .tag-num, .tag-vitrine .tag-num { font-size: 2.1rem; }

  .secao { padding: 6rem var(--margem); }
  .secao-cabeca { margin-bottom: 3.6rem; }
  .passo { padding: 5rem 2.2rem 2.4rem; }

  .historia-grade { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .cuidado { grid-template-columns: 7fr 4fr; padding: 3.4rem 4rem; gap: 4rem; margin-top: 6rem; }

  .visite-grade { grid-template-columns: 5fr 7fr; gap: 4.5rem; }
}

/* ---------- Movimento (só para quem não pediu menos movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tag-vitrine { animation: balanco 3.2s ease-in-out .4s 2 both; }
  .vitrine-b .tag-vitrine { animation-delay: .9s; }
  @keyframes balanco { 0%, 100% { rotate: var(--giro); } 40% { rotate: calc(var(--giro) - 7deg); } 70% { rotate: calc(var(--giro) + 3deg); } }
  .botao { transition: background .2s, color .2s, border-color .2s, translate .2s; }
  .botao:hover { translate: 0 -2px; }

  @supports (animation-timeline: view()) {
    .passo, .cartao-peca, .historia-foto img, .cuidado, .visite-foto {
      animation: surgir linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    @keyframes surgir { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print { .topo, .whats-fixo, .revisao { display: none; } }