/* LUCIVALDO VIAGENS (prévia 26/09) — estrutura da camada de marca da loja preta/dourada, TODAS as cores trocadas:
   oceano profundo + coral de pôr do sol + areia; letras Fraunces/Nunito Sans (lição da variedade, 25/09). */
/* ==========================================================================
   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:      #0B2A3A;
  --cor-texto:       #16303E;
  --cor-texto-suave: #4A5F6B;
  --cor-acao:        #B3471B;          /* coral escuro pra texto pequeno sobre branco (≥ 5:1) */
  --cor-acao-escura: #9A3A12;
  --cor-acao-viva:   #FF9A6B;
  --ouro-1: #FFD2B5; --ouro-2: #FF9A6B; --ouro-3: #F2703A; --ouro-4: #C4501F;
  --preto-1: #062A3C; --preto-2: #0B3A53;
  --prata-1: #EEF8F8; --prata-2: #CBEBEE; --prata-3: #7CC7CF; --prata-4: #1F6F78;
  --grad-prata: linear-gradient(95deg, #1F7580 0%, #3FA9B3 45%, #17656E 100%);
  --grad:      linear-gradient(95deg, #E8622E 0%, #FF9A5C 45%, #D9531F 100%);
  --grad-btn:  linear-gradient(120deg, #FFB27E 0%, #FF8A4C 45%, #E8622E 100%);
  --sombra-btn: rgba(232, 98, 46, .40);
  --fundo:          #FFFFFF;
  --fundo-papel:    #FFF7EE;
  --borda-cartao:   rgba(232, 98, 46, .28);
  --sombra-cartao:  rgba(6, 42, 60, .14);
  --linha:          rgba(11, 42, 58, .10);
  --fonte:  "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --serif:  "Fraunces", Georgia, 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: #FFE3CF; border-bottom: 1px solid rgba(255, 138, 76, .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: #1A0E07; 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, 138, 76, .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, 138, 76, .45); }
.marca__txt b { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: #FFF3E6; letter-spacing: 0; }
.marca__txt b i { font-style: italic; }
.marca__txt small { color: var(--ouro-2); letter-spacing: .16em; }
.menu a { color: #FBE7D3; }
.menu a::after { background: var(--ouro-2); }
.hamburguer span { background: var(--ouro-1); }
.menu-movel { background: var(--preto-1); }
.menu-movel a { color: #FBE7D3; border-color: rgba(255, 138, 76, .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(6, 42, 60, .78) 0%, rgba(6, 42, 60, .45) 55%, rgba(6, 42, 60, 0) 100%); }
.hero .etiqueta { color: var(--ouro-2); }
.hero h1 { color: #FFF4E8; font-size: clamp(2.6rem, 4.6vw, 4rem); }
.hero__sub { color: #F0D5BC; }

/* ---- benefícios: ícone dourado em círculo preto ---- */
.beneficio__ico { background: var(--preto-1); box-shadow: 0 0 0 3px rgba(255, 138, 76, .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: #FBE7D3; border: 1px solid rgba(255, 138, 76, .55);
  box-shadow: 0 18px 38px rgba(6, 42, 60, .22); transition: transform .25s, box-shadow .25s; }
.colecao:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(6, 42, 60, .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: #FFF4E8; line-height: 1.15; }
.colecao__txt > span { font-size: .9rem; line-height: 1.5; color: #E5C3A5; }
.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, #0B3A53 0%, #062A3C 100%); }
.colecao--eventos { background: linear-gradient(170deg, #0B3A53 0%, #062A3C 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, 138, 76, .6);
  background: linear-gradient(135deg, #EEF8F8 0%, #D7F0F2 45%, #FFD9BF 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(14, 76, 109, .22); }
.cartao-sweet figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cartao-sweet .etiqueta { color: #0E6E78; }
.cartao-sweet .titulo { margin-bottom: 12px; color: #0B2A3A; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #1F8A94, #0E6E78); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #34505D; }
.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(6, 42, 60, .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(6, 42, 60, .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: #FBE7D3; 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, 138, 76, .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(6, 42, 60, .86) 0%, rgba(6, 42, 60, .62) 55%, rgba(6, 42, 60, .25) 100%); }
.final .etiqueta { color: var(--ouro-2); }
.final h2 { color: #FFF4E8; }
.final__sub { color: #F0D5BC; }

/* ---- rodapé preto com a logo ---- */
.rodape { background: radial-gradient(ellipse at 20% 0%, #0B2A3A 0%, var(--preto-1) 60%); color: #E5C3A5; border-top: 1px solid rgba(255, 138, 76, .3); }
.rodape h3 { color: var(--ouro-1); font-family: var(--serif); font-weight: 600; }
.rodape a, .rodape span { color: #F0D5BC; }
.rodape__marca img { width: 150px; height: 150px; border-radius: 50%; }
.rodape__fim { color: #D9B79A; border-color: rgba(255, 138, 76, .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(6, 42, 60, .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(6, 42, 60, .88) 0%, rgba(6, 42, 60, .55) 62%, rgba(6, 42, 60, .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(6, 42, 60, .55) 0%, rgba(6, 42, 60, .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(124, 199, 207, .28); }
.marca img { box-shadow: 0 0 0 1px rgba(255, 138, 76, .5), 0 0 0 3px rgba(124, 199, 207, .18); }
.beneficio:nth-child(even) .beneficio__ico { box-shadow: 0 0 0 3px rgba(124, 199, 207, .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, #0B3A53 0%, #062A3C 100%); border-color: rgba(124, 199, 207, .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, 138, 76, .55); box-shadow: 0 18px 38px rgba(6, 42, 60, .22), inset 0 0 0 1px rgba(124, 199, 207, .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(6, 42, 60, .18); }
.cartao-sweet figure { box-shadow: 0 12px 28px rgba(6, 42, 60, .25); }
.cartao-sweet .etiqueta { color: var(--prata-4); }
.cartao-sweet .titulo { color: var(--cor-titulo); }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #0E5560 0%, #2E8C96 50%, #0E5560 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #34505D; }
.cartao-sweet .checks li { border-color: rgba(140, 146, 156, .45); }
.cartao-sweet .checks li::before { color: #1F7580; }
.cartao-sweet .btn--escuro { color: var(--prata-1); box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(124, 199, 207, .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: #1F7580; }

/* pagamento e rodapé: detalhe de prata */
.selo + .selo { border-color: rgba(124, 199, 207, .6); color: var(--prata-2); }
.rodape__fim { border-top: 1px solid rgba(124, 199, 207, .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%, #EEF8F8 62%, #DCDDE3 100%); border-color: rgba(190, 160, 172, .7); }
.cartao-sweet .etiqueta { color: #1F6F78; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #1F7580 0%, #2E8C96 45%, #6F737B 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet .checks li::before { color: #7CC7CF; }
.colecao--sweet { background: linear-gradient(170deg, #0B2A3A 0%, #0B2A3A 100%); border-color: rgba(124, 199, 207, .7); }
.colecao--sweet .colecao__txt small, .colecao--sweet .colecao__txt em { color: #CBEBEE; }

/* 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, 138, 76, .5); box-shadow: none; }