/* COMPRA ZUM (prévia 26/09) — camada de marca da loja com TODAS as cores trocadas: azul elétrico + amarelo de promoção;
   letras Poppins/Inter (variedade: nem preto+dourado das joias, nem oceano+coral da agência). */
/* ==========================================================================
   MY BEAUTY CANDLES — a marca por cima do esqueleto (style.css fica intocado)
   Identidade tirada do LOGO dela (24/09): preto profundo + dourado rico, cursiva elegante.
   Página BRANCA (padrão dele), cor forte nos ELEMENTOS: topo e rodapé pretos, cartões escuros com
   borda dourada, botão dourado — o elemento mais intenso da tela.
   ========================================================================== */
:root {
  --cor-titulo:      #0D1B3E;
  --cor-texto:       #1A2548;
  --cor-texto-suave: #4B5675;
  --cor-acao:        #1D4ED8;          /* azul pra texto pequeno sobre branco (6,7:1) */
  --cor-acao-escura: #1E40AF;
  --cor-acao-viva:   #FFD23F;
  --ouro-1: #FFE89A; --ouro-2: #FFD23F; --ouro-3: #F5B700; --ouro-4: #C48F00;
  --preto-1: #0B1B4D; --preto-2: #13277A;
  --prata-1: #EEF3FF; --prata-2: #D6E2FF; --prata-3: #9DB6FF; --prata-4: #2847B8;
  --grad-prata: linear-gradient(95deg, #1E40AF 0%, #3B82F6 45%, #1D4ED8 100%);
  --grad:      linear-gradient(95deg, #1D4ED8 0%, #3B6FF0 45%, #1E40AF 100%);
  --grad-btn:  linear-gradient(120deg, #FFE066 0%, #FFD23F 45%, #F5B700 100%);
  --sombra-btn: rgba(245, 183, 0, .40);
  --fundo:          #FFFFFF;
  --fundo-papel:    #F5F8FF;
  --borda-cartao:   rgba(29, 78, 216, .22);
  --sombra-cartao:  rgba(11, 27, 77, .14);
  --linha:          rgba(13, 27, 62, .10);
  --fonte:  "Inter", "Segoe UI", system-ui, sans-serif;
  --serif:  "Poppins", "Segoe UI", sans-serif;
  --script: "Caveat", "Segoe Script", cursive;
}

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

/* ---- títulos em serifa, "últimas palavras" em dourado itálico ---- */
.titulo, .hero h1, .final h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.titulo .grad, .hero h1 .grad, .final h2 .grad { font-style: italic; padding-right: .08em; }
.etiqueta { color: var(--cor-acao); }

/* ---- botões: dourado rico com texto PRETO (contraste 10:1) ---- */
.btn--acao { color: #1A1400; box-shadow: 0 10px 26px var(--sombra-btn), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--acao:hover { filter: brightness(1.06); }
.btn--escuro { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px;
  background: var(--preto-1); color: var(--ouro-1); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform .2s; }
.btn--escuro:hover { transform: translateY(-2px); }

/* ---- topo preto com a logo redonda ---- */
.topo { background: var(--preto-1); border-bottom: 1px solid rgba(255, 210, 63, .22); }
.topo--rolado { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.marca img { height: 52px; width: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 210, 63, .45); }
.marca__txt b { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: #FFFFFF; letter-spacing: 0; }
.marca__txt b i { font-style: italic; }
.marca__txt small { color: var(--ouro-2); letter-spacing: .16em; }
.menu a { color: #FFF1B8; }
.menu a::after { background: var(--ouro-2); }
.hamburguer span { background: var(--ouro-1); }
.menu-movel { background: var(--preto-1); }
.menu-movel a { color: #FFF1B8; border-color: rgba(255, 210, 63, .18); }

/* ---- banner preto e dourado ---- */
.hero { background: var(--preto-1); }
.hero__foto { object-position: 72% 50%; }
.hero::after { background: radial-gradient(ellipse 62% 90% at 22% 55%, rgba(11, 27, 77, .78) 0%, rgba(11, 27, 77, .45) 55%, rgba(11, 27, 77, 0) 100%); }
.hero .etiqueta { color: var(--ouro-2); }
.hero h1 { color: #FFF8DB; font-size: clamp(2.6rem, 4.6vw, 4rem); }
.hero__sub { color: #FFE58A; }

/* ---- benefícios: ícone dourado em círculo preto ---- */
.beneficio__ico { background: var(--preto-1); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35), 0 10px 20px rgba(0, 0, 0, .18); }
.beneficio__ico svg { width: 28px; height: 28px; color: var(--ouro-1); }
.beneficio h2 { font-family: var(--serif); font-weight: 600; }

/* ---- seções ---- */
.secao--papel { background: var(--fundo-papel); }

/* ---- AS TRÊS COLEÇÕES: cartões escuros com borda dourada (marcam no branco) ---- */
.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: var(--preto-1); color: #FFF1B8; border: 1px solid rgba(255, 210, 63, .55);
  box-shadow: 0 18px 38px rgba(11, 27, 77, .22); transition: transform .25s, box-shadow .25s; }
.colecao:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(11, 27, 77, .3); }
.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.32rem; font-weight: 600; color: #FFF8DB; line-height: 1.15; }
.colecao__txt > span { font-size: .9rem; line-height: 1.5; color: #F5D35C; }
.colecao__txt em { margin-top: 6px; font-style: normal; font-weight: 700; color: var(--ouro-1); font-size: .9rem; }
.colecao--sweet { background: linear-gradient(170deg, #13277A 0%, #0B1B4D 100%); }
.colecao--eventos { background: linear-gradient(170deg, #13277A 0%, #0B1B4D 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 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: 600; font-size: 1.08rem; color: var(--cor-titulo); }
.produto__preco { font-weight: 800; color: var(--cor-titulo); font-size: 1.02rem; }
.btn--comprar { margin-top: auto; width: 100%; justify-content: center; padding: 10px 14px; font-size: .9rem; border: 0; cursor: pointer; font-family: inherit; }
.produto__txt .produto__preco { margin-bottom: 10px; }
.nota { margin-top: 18px; font-size: .8rem; color: var(--cor-texto-suave); }

/* ---- SWEET: cartão em degradê rosado com borda dourada ---- */
.cartao-sweet { 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(255, 210, 63, .6);
  background: linear-gradient(135deg, #EEF3FF 0%, #DCE7FF 45%, #FFE89A 100%); box-shadow: 0 20px 44px rgba(120, 60, 70, .18); }
.cartao-sweet figure { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 12px 28px rgba(29, 78, 216, .22); }
.cartao-sweet figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cartao-sweet .etiqueta { color: #1D4ED8; }
.cartao-sweet .titulo { margin-bottom: 12px; color: #0D1B3E; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #3B6FF0, #1D4ED8); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #34406A; }
.cartao-sweet .btn--escuro { margin-top: 20px; }

/* ---- lista com check dourado ---- */
.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(11, 27, 77, .06); }
.checks li::before { content: "✦"; position: absolute; left: 13px; color: var(--ouro-3); font-size: .8rem; top: 50%; transform: translateY(-52%); }

/* ---- foto com moldura dourada (Eventos, Sobre) ---- */
.foto-moldura { position: relative; margin: 0; padding: 10px; border-radius: 6px; background: linear-gradient(135deg, var(--ouro-1), var(--ouro-3) 55%, var(--ouro-4));
  box-shadow: 0 22px 44px rgba(11, 27, 77, .22); transform: rotate(1.2deg); }
.foto-moldura--esq { 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(--script); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.2; color: var(--ouro-4); }

/* ---- pagamento ---- */
.pagamento { background: var(--preto-2); color: #FFF1B8; 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(255, 210, 63, .55);
  color: var(--ouro-1); font-weight: 700; font-size: .9rem; }
.selo svg { width: 20px; height: 20px; }

/* ---- final: foto das velas de ponta a ponta ---- */
.final { position: relative; overflow: hidden; background: var(--preto-1); isolation: isolate; }
.final__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; z-index: -2; }
.final::after { content: none; }   /* o véu CLARO do esqueleto deixava o texto cinza e ilegível (print 24/09) */
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 85% at 50% 50%, rgba(11, 27, 77, .86) 0%, rgba(11, 27, 77, .62) 55%, rgba(11, 27, 77, .25) 100%); }
.final .etiqueta { color: var(--ouro-2); }
.final h2 { color: #FFF8DB; }
.final__sub { color: #FFE58A; }

/* ---- rodapé preto com a logo ---- */
.rodape { background: radial-gradient(ellipse at 20% 0%, #0D1B3E 0%, var(--preto-1) 60%); color: #F5D35C; border-top: 1px solid rgba(255, 210, 63, .3); }
.rodape h3 { color: var(--ouro-1); font-family: var(--serif); font-weight: 600; }
.rodape a, .rodape span { color: #FFE58A; }
.rodape__marca img { width: 150px; height: 150px; border-radius: 50%; }
.rodape__fim { color: #E0C24A; border-color: rgba(255, 210, 63, .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(11, 27, 77, .6); }
.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: 600; color: var(--cor-titulo); margin-bottom: 10px; }
.aviso-compra__caixa p { color: var(--cor-texto-suave); margin-bottom: 18px; }

/* ---- computador: nada; celular e tablet ---- */
@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: 80% 50%; }
  .hero::after { background: linear-gradient(90deg, rgba(11, 27, 77, .88) 0%, rgba(11, 27, 77, .55) 62%, rgba(11, 27, 77, .15) 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-sweet { grid-template-columns: 1fr; }
  .produto__txt { padding: 12px 12px 14px; }
  .produto__txt h3 { font-size: .98rem; }
  .foto-moldura, .foto-moldura--esq { transform: none; }
  .final::before { background: linear-gradient(180deg, rgba(11, 27, 77, .55) 0%, rgba(11, 27, 77, .85) 100%); }
  .rodape__marca img { width: 110px; height: 110px; }
}

/* ==========================================================================
   PRATA (24/09 20h13 — pedido dela): cada linha com o seu metal.
   Iluminum Luxury = OURO · Sweet = PRATA perolada · Eventos = ouro e prata juntos.
   ========================================================================== */
.topo { border-bottom: 1px solid rgba(157, 182, 255, .28); }
.marca img { box-shadow: 0 0 0 1px rgba(255, 210, 63, .5), 0 0 0 3px rgba(157, 182, 255, .18); }
.beneficio:nth-child(even) .beneficio__ico { box-shadow: 0 0 0 3px rgba(157, 182, 255, .55), 0 10px 20px rgba(0, 0, 0, .18); }
.beneficio:nth-child(even) .beneficio__ico svg { color: var(--prata-2); }

/* Sweet: cartão escuro com borda PRATA */
.colecao--sweet { background: linear-gradient(170deg, #13277A 0%, #0B1B4D 100%); border-color: rgba(157, 182, 255, .7); }
.colecao--sweet .colecao__txt small, .colecao--sweet .colecao__txt em { color: var(--prata-2); }
/* Eventos: ouro e prata */
.colecao--eventos { border-image: linear-gradient(135deg, var(--ouro-2), var(--prata-3)) 1; border-radius: 22px; }
.colecao--eventos { border: 1px solid rgba(255, 210, 63, .55); box-shadow: 0 18px 38px rgba(11, 27, 77, .22), inset 0 0 0 1px rgba(157, 182, 255, .25); }

/* Sweet: cartão PRATA perolado (sai o rosa) */
.cartao-sweet { border-color: rgba(160, 166, 176, .7);
  background: linear-gradient(135deg, #FFFFFF 0%, #EEF0F3 40%, #D9DDE3 100%); box-shadow: 0 20px 44px rgba(11, 27, 77, .18); }
.cartao-sweet figure { box-shadow: 0 12px 28px rgba(11, 27, 77, .25); }
.cartao-sweet .etiqueta { color: var(--prata-4); }
.cartao-sweet .titulo { color: var(--cor-titulo); }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #1E3A8A 0%, #3B6FF0 50%, #1E3A8A 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #34406A; }
.cartao-sweet .checks li { border-color: rgba(140, 146, 156, .45); }
.cartao-sweet .checks li::before { color: #2847B8; }
.cartao-sweet .btn--escuro { color: var(--prata-1); box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(157, 182, 255, .45); }

/* Eventos: moldura em OURO e PRATA */
#eventos .foto-moldura { background: linear-gradient(135deg, var(--ouro-1) 0%, var(--ouro-3) 38%, var(--prata-2) 62%, var(--prata-3) 100%); }
#eventos .checks li:nth-child(2)::before { color: #2847B8; }

/* pagamento e rodapé: detalhe de prata */
.selo + .selo { border-color: rgba(157, 182, 255, .6); color: var(--prata-2); }
.rodape__fim { border-top: 1px solid rgba(157, 182, 255, .2); }
.rodape__col:nth-of-type(2) h3 { color: var(--prata-2); }

/* 24/09 20h15, ela: "a linha Sweet pode ter tons de prata perolado com um ROSA LEVE" */
.cartao-sweet { background: linear-gradient(135deg, #FFFFFF 0%, #F3F1F4 32%, #EEF3FF 62%, #DCDDE3 100%); border-color: rgba(190, 160, 172, .7); }
.cartao-sweet .etiqueta { color: #2847B8; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #1E40AF 0%, #3B6FF0 45%, #6F737B 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet .checks li::before { color: #9DB6FF; }
.colecao--sweet { background: linear-gradient(170deg, #0D1B3E 0%, #0D1B3E 100%); border-color: rgba(157, 182, 255, .7); }
.colecao--sweet .colecao__txt small, .colecao--sweet .colecao__txt em { color: #D6E2FF; }

/* celular: o botão do menu vinha BRANCO do esqueleto — no topo preto vira um quadrado solto */
.hamburguer { background: transparent; border: 1px solid rgba(255, 210, 63, .5); box-shadow: none; }

/* Compra Zum: destaque AMARELO de promoção só onde o fundo é escuro (no branco, amarelo não se lê) */
.hero h1 .grad, .final h2 .grad { background: linear-gradient(95deg, #FFD23F 0%, #FFE680 45%, #FFC400 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.produto__preco { color: #1D4ED8; }