/* =====================================================
   Elcejama · Loja de pijamas masculinos de seda
   Estética: luxo silencioso, marfim + rose-gold
   Mobile-first
   ===================================================== */

:root{
  /* paleta */
  --marfim:#F6F1EA;
  --creme:#FBF8F4;
  --branco:#FFFFFF;
  --rose:#C9A88F;
  --rose-escuro:#B98E76;
  --dourado:#D9C3A5;
  --grafite:#2B2B2B;
  --grafite-suave:#5C5750;
  --linha:#E4DACE;

  /* tipografia */
  --serifa:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* medidas */
  --largura-max:1320px;
  --respiro:20px;
  --altura-header:72px;
  --transicao:420ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior:none;
}

html{
  background:var(--marfim);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  color:var(--grafite);
  background:var(--marfim);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
svg{width:100%;height:100%;}

h1,h2,h3,h4{font-family:var(--serifa);font-weight:400;line-height:1.15;letter-spacing:.01em;}

::selection{background:var(--rose);color:var(--branco);}

:focus-visible{
  outline:1px solid var(--rose-escuro);
  outline-offset:3px;
}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.pular-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--grafite);color:var(--creme);
  padding:12px 18px;font-size:14px;
}
.pular-link:focus{left:8px;top:8px;}

/* =====================================================
   1. BARRA DE BENEFÍCIOS ROTATIVA
   ===================================================== */
.barra-beneficios{
  background:linear-gradient(90deg,var(--rose-escuro),var(--rose),var(--rose-escuro));
  color:var(--branco);
  padding-top:env(safe-area-inset-top);
}

.barra-beneficios-palco{
  position:relative;
  /* espaço para o aviso mais longo cair em duas linhas no celular */
  height:44px;
  max-width:var(--largura-max);
  margin:0 auto;
  padding:0 var(--respiro);
}

.beneficio{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--respiro);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--transicao), transform var(--transicao);
  pointer-events:none;
}

.beneficio.is-ativo{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* =====================================================
   2. HEADER
   ===================================================== */
.cabecalho{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(246,241,234,.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linha);
  transition:box-shadow var(--transicao);
}

.cabecalho.is-rolado{box-shadow:0 6px 24px rgba(43,43,43,.06);}

.cabecalho-interno{
  position:relative;
  max-width:var(--largura-max);
  margin:0 auto;
  min-height:var(--altura-header);
  padding:0 var(--respiro);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}

/* --- hambúrguer --- */
.zona-menu{justify-self:start;}

.btn-hamburguer{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 4px;
  position:relative;
}

.hamburguer-traco{
  display:block;
  position:absolute;
  left:4px;
  width:22px;
  height:1px;
  background:var(--grafite);
  transition:transform var(--transicao), opacity 200ms ease;
}
.hamburguer-traco:nth-child(1){transform:translateY(-6px);}
.hamburguer-traco:nth-child(2){transform:translateY(0);}
.hamburguer-traco:nth-child(3){transform:translateY(6px);}

.btn-hamburguer[aria-expanded="true"] .hamburguer-traco:nth-child(1){transform:rotate(45deg);}
.btn-hamburguer[aria-expanded="true"] .hamburguer-traco:nth-child(2){opacity:0;}
.btn-hamburguer[aria-expanded="true"] .hamburguer-traco:nth-child(3){transform:rotate(-45deg);}

.hamburguer-rotulo{
  display:none;
  margin-left:32px;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grafite);
}

/* --- logo ---
   O arquivo original é quadrado e tem muita margem de cetim em volta do
   lockup. A moldura .marca recorta essa sobra por CSS, assim o arquivo
   entregue continua sendo a única fonte da logo. */
.marca{
  display:block;
}
.marca img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.logo{
  justify-self:center;
  width:60px;
  height:60px;
}

/* --- carrinho --- */
.zona-carrinho{justify-self:end;}

.btn-carrinho{
  position:relative;
  width:42px;
  height:42px;
  padding:9px;
  color:var(--grafite);
  transition:color var(--transicao);
}
.btn-carrinho:hover{color:var(--rose-escuro);}

.carrinho-contador{
  position:absolute;
  top:2px;
  right:0;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:var(--rose-escuro);
  color:var(--branco);
  font-size:10px;
  line-height:17px;
  text-align:center;
  letter-spacing:0;
}

/* --- mega menu (gaveta no mobile) --- */
.mega-menu{
  position:fixed;
  top:0;
  left:0;
  z-index:80;
  width:min(88vw,360px);
  height:100%;
  height:100dvh;
  padding:18px var(--respiro) 40px;
  background:var(--creme);
  border-right:1px solid var(--linha);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(-102%);
  visibility:hidden;
  transition:transform var(--transicao), visibility var(--transicao);
}

.mega-menu.is-aberto{
  transform:translateX(0);
  visibility:visible;
}

.mega-menu-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:16px;
  margin-bottom:8px;
  border-bottom:1px solid var(--linha);
}

.mega-menu-titulo{
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grafite-suave);
}

.btn-fechar{
  font-size:28px;
  line-height:1;
  width:36px;
  height:36px;
  color:var(--grafite);
}

.mega-menu-grade{display:block;}

.mega-coluna{border-bottom:1px solid var(--linha);}

.mega-coluna-titulo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  font-family:var(--serifa);
  font-size:21px;
  text-align:left;
  color:var(--grafite);
}

.mega-coluna-titulo a{flex:1;}

.mega-coluna-titulo::after{
  content:"";
  width:8px;
  height:8px;
  margin-left:12px;
  border-right:1px solid var(--rose-escuro);
  border-bottom:1px solid var(--rose-escuro);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--transicao);
  flex:0 0 auto;
}
.mega-coluna-titulo[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px);}

.mega-lista{
  list-style:none;
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transicao);
}
.mega-coluna-titulo[aria-expanded="true"] + .mega-lista{max-height:340px;}

.mega-lista li a{
  display:block;
  padding:9px 0 9px 2px;
  font-size:14px;
  color:var(--grafite-suave);
  transition:color 220ms ease, padding-left 220ms ease;
}
.mega-lista li a:hover{color:var(--rose-escuro);padding-left:8px;}
.mega-lista li:last-child a{padding-bottom:18px;}

.mega-menu-nota{
  margin-top:26px;
  font-size:12.5px;
  font-style:italic;
  color:var(--grafite-suave);
}

/* fundo escurecido da gaveta */
.fundo-escuro{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(43,43,43,.34);
  opacity:0;
  transition:opacity var(--transicao);
}
.fundo-escuro.is-visivel{opacity:1;}

body.is-travado{overflow:hidden;}

/* =====================================================
   3. HERO
   ===================================================== */
.hero{
  /* Trocar a imagem do hero aqui. Basta apontar para o novo arquivo. */
  --hero-imagem:url("produtos/produto-1-1.webp");

  position:relative;
  width:100%;
  min-height:clamp(460px,86vh,760px);
  display:flex;
  align-items:flex-end;
  background-color:var(--marfim);
  background-image:
    linear-gradient(180deg, rgba(246,241,234,0) 16%, rgba(246,241,234,.55) 40%, rgba(246,241,234,.94) 64%, rgba(246,241,234,.99) 100%),
    var(--hero-imagem);
  background-size:cover, cover;
  background-position:center 18%, center 18%;
  background-repeat:no-repeat;
  overflow:hidden;
}

.hero-conteudo{
  width:100%;
  max-width:var(--largura-max);
  margin:0 auto;
  padding:0 var(--respiro) 54px;
  text-align:center;
}

.hero-etiqueta{
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:#96674E;
  margin-bottom:16px;
  text-shadow:0 1px 8px rgba(246,241,234,.95);
}

.hero-titulo{
  font-size:clamp(36px,8.6vw,66px);
  font-weight:400;
  color:var(--grafite);
  margin-bottom:18px;
  text-shadow:0 1px 10px rgba(246,241,234,.85);
}

.hero-texto{
  max-width:540px;
  margin:0 auto 28px;
  font-size:16.5px;
  line-height:1.65;
  color:var(--grafite);
  text-shadow:0 1px 8px rgba(246,241,234,.9);
}

/* =====================================================
   BOTÕES E LINKS
   ===================================================== */
.botao{
  display:inline-block;
  padding:14px 34px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao-claro{background:var(--rose-escuro);color:var(--branco);}
.botao-claro:hover{background:var(--grafite);}

.botao-escuro{background:var(--grafite);color:var(--creme);}
.botao-escuro:hover{background:var(--rose-escuro);}

.botao-contorno{border-color:var(--rose-escuro);color:var(--rose-escuro);background:transparent;}
.botao-contorno:hover{background:var(--rose-escuro);color:var(--branco);}

.link-sublinhado{
  display:inline-block;
  padding-bottom:3px;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  transition:color var(--transicao), letter-spacing var(--transicao);
}
.link-sublinhado:hover{color:var(--rose-escuro);letter-spacing:.26em;}

/* =====================================================
   Cabeçalhos de seção
   ===================================================== */
.secao-cabecalho{
  max-width:640px;
  margin:0 auto 34px;
  text-align:center;
}

.secao-etiqueta{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rose-escuro);
  margin-bottom:10px;
}

.secao-titulo{
  font-size:clamp(28px,6.4vw,44px);
  font-weight:300;
  margin-bottom:10px;
}

.secao-texto{
  font-size:15px;
  color:var(--grafite-suave);
}

/* =====================================================
   4. BANNERS DE COLEÇÃO
   ===================================================== */
.colecoes{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:var(--largura-max);
  margin:0 auto;
  padding:56px var(--respiro) 0;
}

.colecao{
  position:relative;
  min-height:400px;
  display:flex;
  align-items:flex-end;
  padding:30px 26px;
  overflow:hidden;
  isolation:isolate;
}

.colecao::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.colecao:hover::after{transform:scale(1.05);}

/* A foto entra por cima do gradiente de apoio. Se o arquivo ainda não existir,
   o gradiente sustenta o banner sozinho. Troque a url para mudar a foto. */
.colecao-noite::after{
  background:
    linear-gradient(180deg, rgba(43,43,43,.10) 30%, rgba(43,43,43,.72) 100%),
    url("produtos/produto-21-1.webp") center 22% / cover no-repeat,
    linear-gradient(150deg,#4A4038 0%,#6E5C4C 45%,#C9A88F 100%);
}
.colecao-noite .colecao-titulo,
.colecao-noite .colecao-descricao,
.colecao-noite .link-sublinhado{color:var(--creme);}
.colecao-noite .colecao-etiqueta{color:var(--dourado);}

.colecao-dia::after{
  background:
    linear-gradient(180deg, rgba(246,241,234,0) 34%, rgba(246,241,234,.88) 100%),
    url("produtos/produto-20-1.webp") center 22% / cover no-repeat,
    linear-gradient(150deg,#F7EFE6 0%,#EBDCCC 50%,#D8BFA6 100%);
}

.colecao-texto{max-width:340px;}

.colecao-etiqueta{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--rose-escuro);
  margin-bottom:8px;
}

.colecao-titulo{
  font-size:clamp(26px,6vw,38px);
  font-weight:300;
  margin-bottom:8px;
}

.colecao-descricao{
  font-size:14.5px;
  margin-bottom:16px;
}

/* =====================================================
   5. VITRINE DE PRODUTOS
   ===================================================== */
.vitrine{
  max-width:var(--largura-max);
  margin:0 auto;
  padding:66px var(--respiro) 0;
}

/* --- cabeçalho de cada categoria --- */
.categoria{margin-bottom:58px;}
.categoria:last-of-type{margin-bottom:0;}

.categoria-cabecalho{
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--linha);
  scroll-margin-top:calc(var(--altura-header) + 20px);
}

.categoria-etiqueta{
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rose-escuro);
  margin-bottom:6px;
}

.categoria-titulo{
  font-size:clamp(24px,5.4vw,34px);
  font-weight:300;
  margin-bottom:6px;
}

.categoria-texto{
  max-width:520px;
  font-size:14px;
  color:var(--grafite-suave);
}

.categoria[id]{scroll-margin-top:calc(var(--altura-header) + 16px);}

.grade-produtos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px 14px;
}

.card-produto{
  display:flex;
  flex-direction:column;
  text-align:center;
}

.card-foto{
  position:relative;
  aspect-ratio:3/4;
  margin-bottom:14px;
  background:linear-gradient(160deg,#F1E8DD 0%,#E7D9C9 100%);
  overflow:hidden;
}

.card-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 900ms cubic-bezier(.22,.61,.36,1), opacity var(--transicao);
}
.card-produto:hover .card-foto img{transform:scale(1.045);}

/* --- seletor de tamanho --- */
.card-tamanhos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin:12px 0;
}

/* no celular os cinco tamanhos dividem a largura do card em uma fileira só */
.pill-tamanho{
  flex:1 1 0;
  min-width:0;
  padding:6px 2px;
  border:1px solid var(--linha);
  background:var(--branco);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--grafite-suave);
  transition:border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}
.pill-tamanho:hover{border-color:var(--rose);color:var(--grafite);}

.pill-tamanho[aria-pressed="true"]{
  border-color:var(--rose-escuro);
  background:var(--rose-escuro);
  color:var(--branco);
}

.card-tamanhos.is-alerta .pill-tamanho{border-color:var(--rose-escuro);}

/* --- botão comprar --- */
.btn-comprar{
  margin-top:auto;
  width:100%;
  padding:12px 10px;
  border:1px solid var(--grafite);
  background:var(--grafite);
  color:var(--creme);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-comprar:hover{background:var(--rose-escuro);border-color:var(--rose-escuro);color:var(--branco);}
.btn-comprar:disabled{background:var(--rose-escuro);border-color:var(--rose-escuro);color:var(--branco);cursor:default;}

.card-aviso{
  min-height:16px;
  margin-top:6px;
  font-size:11.5px;
  color:var(--rose-escuro);
}

/* enquanto a foto do produto ainda não existe, o card mantém o fundo em cetim */
.card-foto.sem-imagem::before{
  content:"Foto em breve";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--rose-escuro);
}

.card-nome{
  font-size:16.5px;
  font-weight:400;
  line-height:1.25;
  margin-bottom:4px;
  /* reserva duas linhas para os preços ficarem alinhados entre os cards */
  min-height:2.5em;
}

.card-preco{
  font-size:14.5px;
  color:var(--grafite);
  letter-spacing:.02em;
}

.card-parcela{
  font-size:12.5px;
  color:var(--grafite-suave);
}

.vitrine-rodape{
  margin-top:42px;
  text-align:center;
}

/* =====================================================
   6. PROPOSTA DE VALOR
   ===================================================== */
.valores{
  margin-top:72px;
  padding:56px var(--respiro);
  background:var(--creme);
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
}

.valores-grade{
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:38px;
  text-align:center;
}

.valor-icone{
  width:42px;
  height:42px;
  margin:0 auto 16px;
  color:var(--rose-escuro);
  stroke-linecap:round;
  stroke-linejoin:round;
}

.valor-titulo{
  font-size:22px;
  font-weight:400;
  margin-bottom:8px;
}

.valor-texto{
  max-width:300px;
  margin:0 auto;
  font-size:14.5px;
  color:var(--grafite-suave);
}

/* =====================================================
   7. NEWSLETTER
   ===================================================== */
.newsletter{
  padding:66px var(--respiro);
  background:var(--marfim);
}

.newsletter-interno{
  max-width:660px;
  margin:0 auto;
  text-align:center;
}

.newsletter-chapeu{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rose-escuro);
  margin-bottom:12px;
}

.newsletter-titulo{
  font-size:clamp(28px,6.4vw,42px);
  font-weight:300;
  margin-bottom:10px;
}

.newsletter-texto{
  font-size:14.5px;
  color:var(--grafite-suave);
  margin-bottom:26px;
}

.newsletter-form{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.campo{
  width:100%;
  padding:14px 16px;
  background:transparent;
  border:1px solid var(--linha);
  border-radius:0;
  font-size:14px;
  font-weight:300;
  color:var(--grafite);
  transition:border-color var(--transicao);
}
.campo::placeholder{color:#A79C90;}
.campo:focus{outline:none;border-color:var(--rose-escuro);}

.newsletter-form .botao{width:100%;cursor:pointer;}

.newsletter-aviso{
  min-height:20px;
  margin-top:14px;
  font-size:13px;
  color:var(--rose-escuro);
}

/* =====================================================
   8. RODAPÉ
   ===================================================== */
.rodape{
  background:var(--creme);
  border-top:1px solid var(--linha);
  padding:56px var(--respiro) 0;
}

.rodape-topo{
  max-width:var(--largura-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
}

.rodape-logo{
  width:90px;
  height:90px;
  margin-bottom:16px;
}

.rodape-historia{
  max-width:420px;
  font-size:13.5px;
  color:var(--grafite-suave);
}

.rodape-titulo{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grafite);
  margin-bottom:14px;
}

.rodape-lista{list-style:none;}
.rodape-lista li a{
  display:block;
  padding:6px 0;
  font-size:14px;
  color:var(--grafite-suave);
  transition:color 220ms ease;
}
.rodape-lista li a:hover{color:var(--rose-escuro);}

/* selos */
.rodape-selos{
  max-width:var(--largura-max);
  margin:44px auto 0;
  padding-top:30px;
  border-top:1px solid var(--linha);
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}

.selos-titulo{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grafite-suave);
  margin-bottom:12px;
}

.selos-lista{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.selo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:1px solid var(--linha);
  background:var(--branco);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--grafite-suave);
}

.selo svg{width:14px;height:14px;stroke-linecap:round;stroke-linejoin:round;color:var(--rose-escuro);}

.selo-destaque{
  border-color:var(--rose);
  color:var(--rose-escuro);
}

.rodape-base{
  max-width:var(--largura-max);
  margin:0 auto;
  padding:26px 0 calc(30px + env(safe-area-inset-bottom));
  margin-top:34px;
  border-top:1px solid var(--linha);
  text-align:center;
  font-size:12px;
  color:var(--grafite-suave);
}

.rodape-copy{margin-top:8px;}

/* =====================================================
   BREAKPOINT 600px
   ===================================================== */
@media (min-width:600px){
  :root{--respiro:28px;}

  .grade-produtos{grid-template-columns:repeat(2,1fr);gap:34px 22px;}

  .card-tamanhos{gap:6px;}
  .pill-tamanho{flex:0 0 auto;min-width:36px;padding:6px 8px;font-size:11.5px;letter-spacing:.1em;}

  .newsletter-form{
    grid-template-columns:1fr 1fr;
  }
  .newsletter-form .botao{grid-column:1 / -1;}

  .valores-grade{grid-template-columns:repeat(3,1fr);gap:26px;}

  .rodape-selos{grid-template-columns:1.6fr 1fr;}
}

/* =====================================================
   BREAKPOINT 900px (desktop: mega-menu no hover)
   ===================================================== */
@media (min-width:900px){
  :root{--respiro:40px;--altura-header:88px;}

  body{font-size:16.5px;}

  .barra-beneficios-palco{height:42px;}
  .beneficio{font-size:12px;}

  .logo{width:78px;height:66px;}

  .hamburguer-rotulo{display:inline-block;}

  /* mega menu vira painel horizontal ancorado no header */
  .mega-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    height:auto;
    max-height:none;
    padding:38px var(--respiro) 30px;
    background:var(--creme);
    border-right:0;
    border-bottom:1px solid var(--linha);
    box-shadow:0 18px 40px rgba(43,43,43,.07);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    overflow:visible;
    transition:opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
  }

  /* abre no hover da zona do menu ou do próprio painel */
  .zona-menu:hover .mega-menu,
  .zona-menu:focus-within .mega-menu,
  .mega-menu.is-aberto{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
  }

  /* a zona do menu precisa cobrir a largura toda para ancorar o painel */
  .zona-menu{position:static;}

  .mega-menu-topo{display:none;}

  /* sete categorias no painel: duas fileiras de quatro até 1199px */
  .mega-menu-grade{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px 26px;
    max-width:var(--largura-max);
    margin:0 auto;
  }

  .mega-coluna{border-bottom:0;}

  .mega-coluna-titulo{
    padding:0 0 12px;
    font-size:21px;
    line-height:1.2;
    /* duas linhas reservadas para os títulos longos alinharem a borda */
    min-height:calc(2.4em + 12px);
    align-items:flex-end;
    cursor:default;
    border-bottom:1px solid var(--linha);
    margin-bottom:10px;
  }
  .mega-coluna-titulo::after{display:none;}
  .mega-coluna-titulo a{transition:color 220ms ease;}
  .mega-coluna-titulo a:hover{color:var(--rose-escuro);}

  .mega-lista{max-height:none;overflow:visible;}
  .mega-coluna-titulo[aria-expanded="true"] + .mega-lista{max-height:none;}
  .mega-lista li a{padding:6px 0;font-size:13.5px;}
  .mega-lista li:last-child a{padding-bottom:6px;}

  .mega-menu-nota{
    max-width:var(--largura-max);
    margin:24px auto 0;
    text-align:center;
  }

  /* hero */
  .hero{
    align-items:center;
    background-image:
      linear-gradient(90deg, rgba(246,241,234,.94) 0%, rgba(246,241,234,.78) 38%, rgba(246,241,234,0) 68%),
      var(--hero-imagem);
    background-position:center, center 22%;
  }

  .hero-conteudo{
    padding:0 var(--respiro);
    text-align:left;
  }

  .hero-texto{margin:0 0 30px;}

  /* coleções */
  .colecoes{
    grid-template-columns:1fr 1fr;
    gap:18px;
    padding-top:80px;
  }
  .colecao{min-height:520px;padding:40px 36px;}

  /* produtos */
  .vitrine{padding-top:96px;}
  .grade-produtos{grid-template-columns:repeat(3,1fr);gap:44px 26px;}
  .card-nome{font-size:18px;min-height:2.5em;}
  .categoria{margin-bottom:76px;}
  .categoria-cabecalho{margin-bottom:34px;}

  .secao-cabecalho{margin-bottom:48px;}

  .valores{margin-top:100px;padding:76px var(--respiro);}
  .newsletter{padding:90px var(--respiro);}

  .newsletter-form{grid-template-columns:1fr 1fr auto;gap:12px;}
  .newsletter-form .botao{grid-column:auto;width:auto;}

  .rodape{padding-top:76px;}
  .rodape-topo{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
  .rodape-base{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 18px;
  }
  .rodape-copy{margin-top:0;}
}

/* =====================================================
   BREAKPOINT 1200px
   ===================================================== */
@media (min-width:1200px){
  /* cinco peças por categoria, uma fileira limpa por seção */
  .grade-produtos{grid-template-columns:repeat(3,1fr);gap:52px 26px;}
  .colecao{min-height:580px;}

  /* as sete categorias do menu cabem em uma única fileira */
  .mega-menu-grade{grid-template-columns:repeat(7,1fr);gap:22px;}
  .mega-coluna-titulo{font-size:19px;}
}

/* =====================================================
   Galeria: foto do card clicável + lightbox
   ===================================================== */

/* a foto principal do card vira botão, sem alterar o enquadramento */
.card-foto-abrir{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
/* a moldura corta o excedente, então o contorno de foco vem para dentro */
.card-foto-abrir:focus-visible{outline-offset:-3px;}

.galeria{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  padding:16px;
  overflow:hidden;
}

.galeria-fundo{
  position:absolute;
  inset:0;
  background:rgba(30,28,26,.88);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

.galeria-caixa{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:600px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  padding:44px 16px 18px;
  background:var(--creme);
  box-shadow:0 30px 80px rgba(30,28,26,.42);
  animation:galeriaEntra 320ms cubic-bezier(.22,.61,.36,1);
}

@keyframes galeriaEntra{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

.galeria-fechar{
  position:absolute;
  top:8px;
  right:8px;
  width:38px;
  height:38px;
  padding:9px;
  color:var(--grafite);
  border:1px solid transparent;
  transition:color var(--transicao), border-color var(--transicao);
}
.galeria-fechar:hover{color:var(--rose-escuro);border-color:var(--linha);}
.galeria-fechar svg{display:block;width:100%;height:100%;}

.galeria-palco{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(160deg,#F1E8DD 0%,#E7D9C9 100%);
}

/* a imagem grande nunca passa de ~80vh e sempre deixa espaço para as
   miniaturas e o botão fechar, em qualquer altura de tela */
.galeria-imagem{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:58vh;
  max-height:min(58vh, calc(100dvh - 210px));
  object-fit:contain;
}

.galeria-miniaturas{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:8px;
  width:100%;
}

.galeria-mini{
  flex:0 0 auto;
  width:58px;
  padding:0;
  border:1px solid var(--linha);
  background:var(--branco);
  line-height:0;
  opacity:.62;
  cursor:pointer;
  transition:opacity var(--transicao), border-color var(--transicao);
}
.galeria-mini img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.galeria-mini:hover{opacity:.9;border-color:var(--rose);}

.galeria-mini[aria-current="true"]{
  opacity:1;
  border-color:var(--rose-escuro);
}

@media (min-width:900px){
  .galeria{padding:32px;}

  .galeria-caixa{
    max-width:760px;
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    padding:52px 26px 24px;
    gap:18px;
  }

  .galeria-fechar{top:12px;right:12px;width:42px;height:42px;}

  .galeria-imagem{
    max-height:80vh;
    max-height:min(80vh, calc(100dvh - 270px));
  }
  .galeria-miniaturas{gap:12px;}
  .galeria-mini{width:74px;}
}

/* =====================================================
   Acessibilidade: menos movimento
   ===================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}