/* REALEZA PERFUMES (prévia 26/09, lead 4925) — a marca por cima do esqueleto (style.css fica intocado).
   Paleta NOVA, tirada do nome e da foto do banner: ROXO REAL + OURO QUENTE. Letras Cinzel (logo), Marcellus (títulos),
   Manrope (texto). Variedade (cerebro/41): nem preto+dourado (Gil), nem oceano+coral (Lucivaldo), nem azul+amarelo (Compra Zum).
   Página BRANCA, cor forte nos ELEMENTOS: topo, banner, cartões das categorias, faixa de pagamento, final e rodapé em roxo.
   Ouro só sobre roxo (ouro no branco = 2,7:1, ilegível); no branco o destaque é o roxo #6B2FB3 (7,8:1). */
:root {
  --cor-titulo:      #1E0B3A;
  --cor-texto:       #2A1E40;
  --cor-texto-suave: #5E5270;
  --cor-acao:        #6B2FB3;
  --cor-acao-escura: #4B1F86;
  --roxo-1: #1E0B3A; --roxo-2: #2E1257; --roxo-3: #4B1F86;
  --ouro-1: #FBE7AE; --ouro-2: #F2CE6B; --ouro-3: #E0AE45; --ouro-4: #8A5A00;
  --grad:      linear-gradient(95deg, #6B2FB3 0%, #9B4DDB 50%, #4B1F86 100%);
  --grad-ouro: linear-gradient(95deg, #F2CE6B 0%, #FFE9A8 45%, #E0AE45 100%);
  --grad-btn:  linear-gradient(120deg, #FFE39A 0%, #F2CE6B 45%, #E0AE45 100%);
  --sombra-btn: rgba(224, 174, 69, .42);
  --fundo:          #FFFFFF;
  --fundo-papel:    #F8F4FD;
  --borda-cartao:   rgba(107, 47, 179, .20);
  --sombra-cartao:  rgba(30, 11, 58, .13);
  --linha:          rgba(30, 11, 58, .10);
  --fonte:  "Manrope", "Segoe UI", system-ui, sans-serif;
  --serif:  "Marcellus", Georgia, serif;
  --realeza: "Cinzel", Georgia, serif;
}

/* ---- aviso de prévia (honestidade) ---- */
.aviso-previa { margin: 0; padding: 7px 16px; text-align: center; font-size: .78rem; letter-spacing: .02em;
  background: #120624; color: var(--ouro-1); border-bottom: 1px solid rgba(242, 206, 107, .22); }
.aviso-previa b { color: var(--ouro-2); font-weight: 700; }

/* ---- títulos ---- */
.titulo, .hero h1, .final h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
.titulo .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .grad, .final h2 .grad { background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.etiqueta { color: var(--cor-acao); }

/* ---- botões: ouro com texto roxo profundo (11,9:1) ---- */
.btn--acao { background: var(--grad-btn); color: var(--roxo-1); box-shadow: 0 10px 26px var(--sombra-btn), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn--acao:hover { filter: brightness(1.05); }
.btn--escuro { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px;
  background: var(--roxo-2); color: var(--ouro-1); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px rgba(30, 11, 58, .28); transition: transform .2s; }
.btn--escuro:hover { transform: translateY(-2px); }

/* ---- logo: coroa em ouro num círculo roxo + nome em Cinzel ---- */
.coroa { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4B1F86 0%, #2E1257 60%, #1E0B3A 100%);
  box-shadow: 0 0 0 1.5px var(--ouro-2), 0 0 0 4px rgba(242, 206, 107, .18); }
.coroa svg { width: 28px; height: 28px; color: var(--ouro-2); }
.coroa--grande { width: 130px; height: 130px; }
.coroa--grande svg { width: 72px; height: 72px; }
.topo { background: var(--roxo-1); border-bottom: 1px solid rgba(242, 206, 107, .22); }
.topo--rolado { box-shadow: 0 10px 28px rgba(18, 6, 36, .45); }
.marca__txt b { font-family: var(--realeza); font-weight: 700; font-size: 1.36rem; letter-spacing: .12em; color: var(--ouro-2); }
.marca__txt small { font-size: .52rem; letter-spacing: .2em; color: #E7DAFF; }
.menu a { color: #EFE6FF; }
.menu a::after { background: var(--ouro-2); }
.hamburguer { background: transparent; border: 1px solid rgba(242, 206, 107, .5); box-shadow: none; }
.hamburguer span { background: var(--ouro-1); }
.menu-movel { background: var(--roxo-1); }
.menu-movel a { color: #EFE6FF; border-color: rgba(242, 206, 107, .16); }

/* ---- banner roxo e ouro (a foto já traz o roxo do lado esquerdo, vazio pro texto) ---- */
.hero { background: var(--roxo-1); }
.hero__foto { object-position: 70% 50%; }
.hero::after { background: radial-gradient(ellipse 55% 90% at 22% 55%, rgba(24, 8, 48, .55) 0%, rgba(24, 8, 48, .25) 60%, rgba(24, 8, 48, 0) 100%); }
.hero .etiqueta { color: var(--ouro-2); }
.hero h1 { color: #FFF7E6; font-size: clamp(2.7rem, 4.8vw, 4.2rem); line-height: 1.02; letter-spacing: -.01em; }
.hero__sub { color: #E7DAFF; }

/* ---- busca ---- */
.busca { background: var(--roxo-2); padding: 18px 0; border-top: 1px solid rgba(242, 206, 107, .18); }
.busca__form { display: flex; gap: 10px; }
.busca__form input { flex: 1; min-width: 0; font: 500 1rem var(--fonte); padding: 14px 18px; border-radius: 999px;
  border: 2px solid var(--ouro-2); outline: none; color: var(--cor-texto); }
.busca__form input:focus { box-shadow: 0 0 0 4px rgba(242, 206, 107, .35); }
.busca__form button { flex: none; }

/* ---- benefícios: ícone ouro em círculo roxo ---- */
.beneficio__ico { background: var(--roxo-2); box-shadow: 0 0 0 3px rgba(242, 206, 107, .38), 0 10px 20px rgba(30, 11, 58, .2); }
.beneficio__ico svg { width: 28px; height: 28px; color: var(--ouro-2); }
.beneficio h2 { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; }

.secao--papel { background: var(--fundo-papel); }

/* ---- categorias: cartões roxos com borda de ouro ---- */
.colecoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.colecao { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; text-decoration: none;
  background: linear-gradient(170deg, #2E1257 0%, #1E0B3A 100%); color: #EFE6FF; border: 1px solid rgba(242, 206, 107, .5);
  box-shadow: 0 18px 38px rgba(30, 11, 58, .24); transition: transform .25s, box-shadow .25s; }
.colecao:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(30, 11, 58, .32); }
.colecao img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }
.colecao__txt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.colecao__txt small { color: var(--ouro-2); letter-spacing: .2em; text-transform: uppercase; font-size: .68rem; font-weight: 700; }
.colecao__txt b { font-family: var(--serif); font-size: 1.36rem; font-weight: 400; color: #FFF7E6; line-height: 1.15; }
.colecao__txt > span { font-size: .9rem; line-height: 1.5; color: #D9C8F5; }
.colecao__txt em { margin-top: 6px; font-style: normal; font-weight: 700; color: var(--ouro-1); font-size: .9rem; }
.colecao--meio { background: linear-gradient(170deg, #4B1F86 0%, #2E1257 100%); }

/* ---- loja ---- */
.produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.produto { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff;
  border: 1px solid var(--borda-cartao); box-shadow: 0 14px 30px var(--sombra-cartao); }
.produto[hidden] { display: none; }
.produto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.produto__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px 18px; flex: 1; }
.produto__txt small { color: var(--cor-acao); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.produto__txt h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--cor-titulo); }
.produto__preco { font-weight: 800; color: var(--cor-acao); font-size: 1.04rem; margin-bottom: 10px; }
.btn--comprar { margin-top: auto; width: 100%; justify-content: center; padding: 10px 14px; font-size: .9rem; border: 0; cursor: pointer; font-family: inherit; }
.selo-top { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--roxo-2); color: var(--ouro-2);
  font: 800 .64rem/1.6 var(--fonte); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.nao-achou { margin: 22px auto 0; max-width: 620px; text-align: center; background: #fff; border: 2px dashed var(--cor-acao);
  border-radius: 18px; padding: 22px 20px; }
.nao-achou h3 { font-family: var(--serif); font-weight: 400; color: var(--cor-titulo); margin: 0 0 6px; font-size: 1.3rem; }
.nao-achou p { margin: 0 0 14px; color: var(--cor-texto-suave); }
.nota { margin-top: 18px; font-size: .8rem; color: var(--cor-texto-suave); }

/* ---- presente: cartão em degradê lilás com borda de ouro ---- */
.cartao-presente { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 28px); border-radius: 26px; border: 1px solid rgba(224, 174, 69, .6);
  background: linear-gradient(135deg, #FFFFFF 0%, #F1E8FC 45%, #FBE7AE 100%); box-shadow: 0 20px 44px rgba(30, 11, 58, .16); }
.cartao-presente figure { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 12px 28px rgba(75, 31, 134, .25); }
.cartao-presente figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cartao-presente .titulo { margin-bottom: 12px; }
.cartao-presente__txt > p { color: #3E3058; }
.cartao-presente .btn--escuro { margin-top: 20px; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checks li { padding: 7px 14px 7px 32px; border-radius: 999px; background: #fff; border: 1px solid var(--borda-cartao);
  font-size: .86rem; font-weight: 600; color: var(--cor-titulo); position: relative; box-shadow: 0 4px 10px rgba(30, 11, 58, .06); }
.checks li::before { content: "♛"; position: absolute; left: 12px; color: var(--cor-acao); font-size: .8rem; top: 50%; transform: translateY(-54%); }

/* ---- sobre: foto com moldura de ouro ---- */
.foto-moldura { position: relative; margin: 0; padding: 10px; border-radius: 6px; background: linear-gradient(135deg, var(--ouro-1), var(--ouro-3) 55%, #B98526);
  box-shadow: 0 22px 44px rgba(30, 11, 58, .22); transform: rotate(-1.2deg); }
.foto-moldura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 4px solid #fff; }
.slogan { margin-top: 18px; font-family: var(--realeza); font-weight: 700; letter-spacing: .08em; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; color: var(--cor-acao-escura); }

/* ---- pagamento ---- */
.pagamento { background: var(--roxo-2); color: #EFE6FF; padding-block: 22px; }
.pagamento__grid { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.pagamento p { font-weight: 600; margin-right: 6px; }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(242, 206, 107, .55);
  color: var(--ouro-1); font-weight: 700; font-size: .9rem; }
.selo svg { width: 20px; height: 20px; }

/* ---- final: foto roxa de ponta a ponta ---- */
.final { position: relative; overflow: hidden; background: var(--roxo-1); isolation: isolate; }
.final__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; z-index: -2; }
.final::after { content: none; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 85% at 50% 50%, rgba(24, 8, 48, .72) 0%, rgba(24, 8, 48, .45) 60%, rgba(24, 8, 48, .1) 100%); }
.final .etiqueta { color: var(--ouro-2); }
.final h2 { color: #FFF7E6; }
.final__sub { color: #E7DAFF; }

/* ---- rodapé roxo com a coroa ---- */
.rodape { background: radial-gradient(ellipse at 20% 0%, #2E1257 0%, var(--roxo-1) 60%); color: #D9C8F5; border-top: 1px solid rgba(242, 206, 107, .3); }
.rodape h3 { color: var(--ouro-2); font-family: var(--serif); font-weight: 400; }
.rodape a, .rodape span { color: #E7DAFF; }
.rodape__fim { color: #BFAEDD; border-color: rgba(242, 206, 107, .18); }

/* ---- aviso do botão comprar (prévia) ---- */
.aviso-compra { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(18, 6, 36, .62); }
.aviso-compra[hidden] { display: none; }
.aviso-compra__caixa { max-width: 380px; padding: 26px 24px; border-radius: 20px; background: #fff; text-align: center;
  border: 1px solid var(--borda-cartao); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.aviso-compra__caixa h2 { font-family: var(--serif); font-weight: 400; color: var(--cor-titulo); margin-bottom: 10px; }
.aviso-compra__caixa p { color: var(--cor-texto-suave); margin-bottom: 18px; }

/* ---- tablet e celular ---- */
@media (max-width: 900px) {
  .produtos { grid-template-columns: repeat(2, 1fr); }
  .colecoes { grid-template-columns: 1fr; }
  .colecao { flex-direction: row; }
  .colecao img { width: 42%; aspect-ratio: auto; min-height: 180px; }
}
@media (max-width: 640px) {
  .aviso-previa { font-size: .7rem; }
  .hero__foto { object-position: 84% 50%; }
  .hero::after { background: linear-gradient(90deg, rgba(24, 8, 48, .9) 0%, rgba(24, 8, 48, .66) 58%, rgba(24, 8, 48, .12) 100%); }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .colecao { flex-direction: column; }
  .colecao img { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
  .cartao-presente { grid-template-columns: 1fr; }
  .produto__txt { padding: 12px 12px 14px; }
  .produto__txt h3 { font-size: 1rem; }
  .foto-moldura { transform: none; }
  .final::before { background: linear-gradient(180deg, rgba(24, 8, 48, .6) 0%, rgba(24, 8, 48, .86) 100%); }
  .coroa--grande { width: 100px; height: 100px; }
  .coroa--grande svg { width: 56px; height: 56px; }
}