/* ALMARE Maison — estilos do site.
   As cores, fontes e botões vêm de identidade/tokens.css (carregado antes deste arquivo). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.btn { cursor: pointer; text-align: center; }

/* Acessibilidade: foco visível e link para pular navegação */
:focus-visible { outline: 1px solid var(--almare-champanhe); outline-offset: 4px; }
.pular { position: absolute; left: -999px; top: 0; background: var(--almare-onix); color: var(--almare-marfim); padding: .75rem 1.25rem; z-index: 100; }
.pular:focus { left: 1rem; top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rótulos pequenos em ônix para manter contraste AA sobre o marfim */
.rotulo { color: var(--almare-onix); display: block; }
.secao--escura .rotulo { color: var(--almare-champanhe); }

.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--esp-3); }
@media (min-width: 900px) { .container { padding: 0 var(--esp-5); } }

.secao { padding: var(--esp-6) 0; }
@media (min-width: 900px) { .secao { padding: var(--esp-7) 0; } }
.secao--pedra { background: var(--almare-pedra); }
.secao--escura { background: var(--almare-onix); color: var(--almare-marfim); }

.cabecalho-secao { max-width: 40rem; margin-bottom: var(--esp-5); }
.cabecalho-secao--centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabecalho-secao--centro .linha-dourada { margin-left: auto; margin-right: auto; }
.cabecalho-secao h2 { font-size: var(--t-h1); margin-top: var(--esp-2); }
.linha-dourada { display: block; margin: var(--esp-3) 0; }

/* ---------- Barra superior ---------- */
.barra-topo { background: var(--almare-onix); color: var(--almare-marfim); text-align: center;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: .6rem var(--esp-2); line-height: 1.5; }

/* ---------- Cabeçalho ---------- */
.cabecalho { position: sticky; top: 0; z-index: 50; background: var(--almare-marfim);
  border-bottom: var(--borda-fina); transition: box-shadow var(--transicao); }
.cabecalho.rolou { box-shadow: 0 1px 0 var(--almare-areia), 0 8px 24px rgba(20,20,20,.04); }
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--esp-3); }
.logo img { height: 20px; width: auto; }
@media (min-width: 900px) { .logo img { height: 24px; } .cabecalho .container { height: 92px; } }

.menu { display: none; }
.menu ul { display: flex; gap: var(--esp-4); }
.menu a { font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: .2em; padding: .4rem 0; position: relative; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--almare-champanhe);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transicao); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.cabecalho .btn { padding: .75rem 1.4rem; display: none; }

.botao-menu { background: none; border: 0; padding: .5rem; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 2; }
.botao-menu span { display: block; width: 26px; height: 1px; background: var(--almare-onix); transition: transform var(--transicao), opacity var(--transicao); }
.botao-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.botao-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu do celular (abre abaixo do cabeçalho) */
.menu-movel { position: fixed; left: 0; right: 0; bottom: 0; top: var(--altura-topo, 76px); background: var(--almare-marfim); z-index: 45;
  padding: var(--esp-5) var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-4); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--transicao), visibility var(--transicao); }
.menu-movel.aberto { opacity: 1; visibility: visible; }
.menu-movel ul { display: flex; flex-direction: column; gap: var(--esp-3); }
.menu-movel a:not(.btn) { font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1.1; }
.menu-movel .btn { align-self: flex-start; }
body.menu-aberto { overflow: hidden; }

@media (min-width: 1000px) {
  .menu { display: block; }
  .cabecalho .btn { display: inline-block; }
  .botao-menu, .menu-movel { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: var(--esp-5) 0 var(--esp-6); }
.hero .container { display: grid; gap: var(--esp-5); align-items: center; }
.hero h1 { font-size: var(--t-display); margin-top: var(--esp-3); }
.hero p { max-width: 30rem; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
.hero-foto { aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
@media (min-width: 900px) {
  .hero { padding: var(--esp-6) 0 var(--esp-7); }
  .hero .container { grid-template-columns: 1.05fr 1fr; gap: var(--esp-6); }
}
@media (max-width: 520px) { .botoes .btn { width: 100%; } }

/* ---------- Cards de coleção ---------- */
.grade-colecoes { display: grid; gap: var(--esp-5); }
@media (min-width: 760px) { .grade-colecoes { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); } }
.card-colecao { display: block; }
.card-colecao .moldura { aspect-ratio: 4 / 5; overflow: hidden; background: var(--almare-pedra); }
.card-colecao img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.card-colecao:hover img { transform: scale(1.04); }
.card-colecao h3 { font-size: var(--t-h2); margin: var(--esp-3) 0 var(--esp-1); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card-colecao h3::after { content: "→"; font-family: var(--fonte-texto); font-size: 1rem; color: var(--almare-champanhe); transition: transform var(--transicao); }
.card-colecao:hover h3::after { transform: translateX(6px); }
.card-colecao p { max-width: 22rem; }
@media (min-width: 760px) { .card-colecao:nth-child(2) { margin-top: var(--esp-6); } }

/* ---------- Produtos ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-5) var(--esp-2); }
@media (min-width: 900px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6) var(--esp-4); } }
.produto .moldura { aspect-ratio: 4 / 5; overflow: hidden; background: var(--almare-pedra); }
.produto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.produto:hover img { transform: scale(1.04); }
.etiqueta { display: inline-block; margin-top: var(--esp-2); font-size: .6875rem; text-transform: uppercase; letter-spacing: .2em; color: var(--almare-bordo); }
.produto h3 { font-size: 1.5rem; margin: .35rem 0 .25rem; }
.produto .meta { font-size: var(--t-pequeno); letter-spacing: .08em; }
.produto .preco { margin-top: var(--esp-1); font-weight: 400; letter-spacing: .04em; }
.produto .descricao { margin-top: var(--esp-2); }
.produto dl { margin: var(--esp-2) 0 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .9375rem; }
.produto dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .2em; padding-top: .2rem; }
.produto dd { margin: 0; }
.produto .btn { margin-top: var(--esp-3); padding: .85rem 1.4rem; width: 100%; }
@media (max-width: 899px) {
  .grade-produtos--detalhe { grid-template-columns: 1fr; }
  .grade-produtos:not(.grade-produtos--detalhe) .produto h3 { font-size: 1.25rem; }
}
@media (min-width: 560px) and (max-width: 899px) { .grade-produtos--detalhe { grid-template-columns: repeat(2, 1fr); } }
.mais { text-align: center; margin-top: var(--esp-6); }

/* Filtro de coleções */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-bottom: var(--esp-3); border-bottom: var(--borda-fina); padding-bottom: var(--esp-3); }
.filtro { background: none; border: 1px solid transparent; padding: .6rem 1.1rem; font-size: var(--t-pequeno);
  text-transform: uppercase; letter-spacing: .2em; transition: border-color var(--transicao); }
.filtro:hover { border-color: var(--almare-areia); }
.filtro[aria-pressed="true"] { border-color: var(--almare-onix); }
.descricao-colecao { min-height: 3.4em; margin-bottom: var(--esp-5); max-width: 36rem; font-family: var(--fonte-titulo); font-size: var(--t-h3); line-height: 1.4; }

/* ---------- Manifesto ---------- */
.manifesto { text-align: center; }
.manifesto blockquote p { font-family: var(--fonte-titulo); font-size: var(--t-h1); line-height: 1.2; font-style: italic; }
.manifesto blockquote p + p { margin-top: .4em; }
.manifesto .linha-dourada { margin: var(--esp-4) auto; }

/* ---------- Compromissos ---------- */
.compromissos { display: grid; gap: var(--esp-5); }
@media (min-width: 760px) { .compromissos { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); } }
.compromisso svg { width: 44px; height: 44px; stroke: var(--almare-onix); stroke-width: 1; fill: none; }
.compromisso h3 { font-size: var(--t-h3); margin: var(--esp-3) 0 var(--esp-1); }
.compromisso { border-top: var(--borda-fina); padding-top: var(--esp-4); }

/* ---------- Bloco dividido (imagem + texto) ---------- */
.dividido { display: grid; gap: var(--esp-5); align-items: center; }
.dividido .foto { aspect-ratio: 3 / 2; overflow: hidden; }
.dividido .foto img { width: 100%; height: 100%; object-fit: cover; }
.dividido .foto.foto-arco { aspect-ratio: 4 / 5; }
.dividido h2 { font-size: var(--t-h1); margin-top: var(--esp-2); }
.dividido p + p { margin-top: var(--esp-2); }
@media (min-width: 900px) {
  .dividido { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
  .dividido--invertido .foto { order: 2; }
}

/* ---------- Newsletter ---------- */
.newsletter { text-align: center; max-width: 36rem; margin: 0 auto; }
.newsletter h2 { font-size: var(--t-h1); }
.newsletter form { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-4); }
.newsletter input { font: inherit; font-weight: 300; background: transparent; border: 0; border-bottom: 1px solid var(--almare-onix);
  padding: .9rem 0; color: var(--almare-onix); border-radius: 0; text-align: center; }
.newsletter input::placeholder { color: var(--almare-onix); opacity: .75; }
.newsletter .nota { font-size: var(--t-pequeno); margin-top: var(--esp-3); }
@media (min-width: 600px) {
  .newsletter form { flex-direction: row; }
  .newsletter input { flex: 1; text-align: left; }
}

/* ---------- Página interna: cabeçalho ---------- */
.topo-pagina { padding: var(--esp-6) 0 var(--esp-5); }
.topo-pagina h1 { font-size: var(--t-display); margin-top: var(--esp-2); }
.topo-pagina p { max-width: 36rem; }

/* Números do ateliê */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-5) var(--esp-3); text-align: center; }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero strong { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: var(--t-h1); line-height: 1; color: var(--almare-marfim); }
.numero span { display: block; margin-top: var(--esp-2); font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: .2em; color: var(--almare-champanhe); }

/* Valores */
.valores { display: grid; gap: var(--esp-4); counter-reset: valor; }
@media (min-width: 760px) { .valores { grid-template-columns: repeat(2, 1fr); gap: var(--esp-5) var(--esp-6); } }
@media (min-width: 1100px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valor { border-top: var(--borda-fina); padding-top: var(--esp-3); }
.valor h3 { font-size: var(--t-h3); margin-bottom: var(--esp-1); }
.valor h3::before { counter-increment: valor; content: "0" counter(valor); display: block; font-family: var(--fonte-texto);
  font-size: var(--t-pequeno); letter-spacing: .2em; color: var(--almare-bordo); margin-bottom: var(--esp-1); }

.missao { display: grid; gap: var(--esp-5); }
@media (min-width: 760px) { .missao { grid-template-columns: 1fr 1fr; gap: var(--esp-6); } }
.missao p { font-family: var(--fonte-titulo); font-size: var(--t-h3); line-height: 1.45; margin-top: var(--esp-2); }

/* ---------- Contato ---------- */
.infos { display: grid; gap: var(--esp-4); }
@media (min-width: 760px) { .infos { grid-template-columns: repeat(2, 1fr); gap: var(--esp-5); } }
@media (min-width: 1100px) { .infos { grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); } }
.info { border-top: var(--borda-fina); padding-top: var(--esp-3); }
.info h2 { font-size: var(--t-h3); margin: var(--esp-1) 0 var(--esp-2); }
.info a { border-bottom: 1px solid var(--almare-areia); transition: border-color var(--transicao); }
.info a:hover { border-color: var(--almare-onix); }

.faq { max-width: 52rem; margin: 0 auto; border-top: var(--borda-fina); }
.faq details { border-bottom: var(--borda-fina); }
.faq summary { list-style: none; cursor: pointer; padding: var(--esp-3) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2);
  font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--fonte-texto); font-weight: 300; font-size: 1.5rem; color: var(--almare-champanhe); transition: transform var(--transicao); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--esp-3); max-width: 40rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--almare-onix); color: var(--almare-marfim); padding: var(--esp-6) 0 calc(var(--esp-4) + 64px); font-size: .9375rem; }
.rodape .logo-rodape { height: 26px; width: auto; }
.rodape-grade { display: grid; gap: var(--esp-4); }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h2 { font-family: var(--fonte-texto); font-weight: 400; font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: .2em; color: var(--almare-champanhe); margin-bottom: var(--esp-2); }
.rodape li + li { margin-top: .4rem; }
.rodape a { transition: color var(--transicao); }
.rodape a:hover { color: var(--almare-champanhe); }
.rodape .slogan { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.5rem; margin-top: var(--esp-3); }
.rodape-base { margin-top: var(--esp-5); padding-top: var(--esp-3); border-top: 1px solid rgba(245,240,232,.18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2); font-size: var(--t-pequeno); letter-spacing: .06em; }

/* ---------- Botão flutuante de WhatsApp ---------- */
.whats { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: .6rem;
  background: var(--almare-onix); color: var(--almare-marfim); border: 1px solid var(--almare-champanhe);
  padding: .85rem 1.2rem; font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: .2em;
  box-shadow: 0 10px 30px rgba(20,20,20,.18); transition: background var(--transicao), color var(--transicao), transform var(--transicao); }
.whats svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
.whats:hover { background: var(--almare-marfim); color: var(--almare-onix); transform: translateY(-2px); }
@media (min-width: 900px) { .whats { right: 32px; bottom: 32px; } }

/* ---------- Animação de entrada ao rolar ---------- */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .card-colecao img, .produto img { transition: none; }
}

/* Monograma na página Ateliê */
.dividido .foto.monograma { aspect-ratio: 1; max-width: 340px; width: 100%; margin: 0 auto; }
.dividido .foto.monograma img { object-fit: contain; }
body.menu-aberto .whats { display: none; }
/* Filtros no celular: uma linha só, com rolagem lateral */
@media (max-width: 699px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--esp-3)); margin-right: calc(-1 * var(--esp-3)); padding-left: var(--esp-3); padding-right: var(--esp-3); }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; padding: .55rem .9rem; letter-spacing: .16em; }
}
/* Âncoras não ficam escondidas atrás do cabeçalho fixo */
section[id] { scroll-margin-top: 90px; }