/* ==========================================================================
   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:      #121014;
  --cor-texto:       #1C1A1E;
  --cor-texto-suave: #57504A;          /* 7,4:1 sobre branco */
  --cor-acao:        #86621C;          /* dourado ESCURO pra texto pequeno sobre branco e marfim (≥ 5:1) */
  --cor-acao-escura: #7A5A14;
  --cor-acao-viva:   #E7C46A;
  --ouro-1: #F3D98B; --ouro-2: #D9B25A; --ouro-3: #B8872B; --ouro-4: #8A6420;
  --preto-1: #0B0A0C; --preto-2: #17141A;
  /* 24/09 20h13, ela: "quero as cores em preto, dourado e em matizes em prata" — prata é o 2º metal */
  --prata-1: #F5F6F8; --prata-2: #DDE0E5; --prata-3: #B4B9C1; --prata-4: #5E646D;   /* prata-4 = texto (5,9:1 no branco) */
  --grad-prata: linear-gradient(95deg, #8E949D 0%, #C9CED6 45%, #7A8089 100%);
  --grad:      linear-gradient(95deg, #C08F2E 0%, #E2B95C 45%, #A87A22 100%);
  --grad-btn:  linear-gradient(120deg, #F1D27E 0%, #D5A94C 45%, #A87B26 100%);
  --sombra-btn: rgba(168, 123, 38, .45);
  --fundo:          #FFFFFF;
  --fundo-papel:    #FBF7EF;           /* marfim bem leve — ainda lê como branco */
  --borda-cartao:   rgba(168, 123, 38, .28);
  --sombra-cartao:  rgba(30, 20, 5, .14);
  --linha:          rgba(18, 16, 20, .10);
  --fonte:  "Figtree", "Segoe UI", system-ui, sans-serif;
  --serif:  "Playfair Display", Georgia, serif;
  --script: "Pinyon Script", "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: #E9D9B4; border-bottom: 1px solid rgba(217, 178, 90, .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: #140F06; 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(217, 178, 90, .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(217, 178, 90, .45); }
.marca__txt b { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: #F6EBD0; letter-spacing: 0; }
.marca__txt b i { font-style: italic; }
.marca__txt small { color: var(--ouro-2); letter-spacing: .16em; }
.menu a { color: #EDE3CC; }
.menu a::after { background: var(--ouro-2); }
.hamburguer span { background: var(--ouro-1); }
.menu-movel { background: var(--preto-1); }
.menu-movel a { color: #F3E8CF; border-color: rgba(217, 178, 90, .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(8, 7, 9, .78) 0%, rgba(8, 7, 9, .45) 55%, rgba(8, 7, 9, 0) 100%); }
.hero .etiqueta { color: var(--ouro-2); }
.hero h1 { color: #FBF3DF; font-size: clamp(2.6rem, 4.6vw, 4rem); }
.hero__sub { color: #E6DAC0; }
/* pedido dela 27/09: logo grande no banner, com o slogan completo embaixo */
.hero__logo-grande { display: block; width: clamp(96px, 11vw, 148px); height: auto; margin-bottom: 18px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.hero h1.hero__slogan { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.28; letter-spacing: 0; max-width: 9.5em; }

/* ---- benefícios: ícone dourado em círculo preto ---- */
.beneficio__ico { background: var(--preto-1); box-shadow: 0 0 0 3px rgba(217, 178, 90, .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: #F3E8CF; border: 1px solid rgba(217, 178, 90, .55);
  box-shadow: 0 18px 38px rgba(20, 12, 2, .22); transition: transform .25s, box-shadow .25s; }
.colecao:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(20, 12, 2, .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: #FFF6DE; line-height: 1.15; }
.colecao__txt > span { font-size: .9rem; line-height: 1.5; color: #D9CDB2; }
.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, #2A1620 0%, #17101A 100%); }
.colecao--eventos { background: linear-gradient(170deg, #1B1710 0%, #0E0C0A 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(217, 178, 90, .6);
  background: linear-gradient(135deg, #FCE4EA 0%, #F6D3DC 45%, #EFD9B0 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(80, 30, 40, .22); }
.cartao-sweet figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cartao-sweet .etiqueta { color: #8E2F4A; }
.cartao-sweet .titulo { margin-bottom: 12px; color: #3A1422; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #B23A62, #8E2F4A); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #4A2A33; }
.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(30, 20, 5, .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(40, 25, 5, .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: #EFE4CB; 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(217, 178, 90, .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(8, 7, 9, .86) 0%, rgba(8, 7, 9, .62) 55%, rgba(8, 7, 9, .25) 100%); }
.final .etiqueta { color: var(--ouro-2); }
.final h2 { color: #FBF3DF; }
.final__sub { color: #E6DAC0; }

/* ---- rodapé preto com a logo ---- */
.rodape { background: radial-gradient(ellipse at 20% 0%, #1E1A14 0%, var(--preto-1) 60%); color: #D9CDB2; border-top: 1px solid rgba(217, 178, 90, .3); }
.rodape h3 { color: var(--ouro-1); font-family: var(--serif); font-weight: 600; }
.rodape a, .rodape span { color: #E3D7BC; }
.rodape__marca img { width: 150px; height: 150px; border-radius: 50%; }
.rodape__fim { color: #B9AC90; border-color: rgba(217, 178, 90, .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(8, 7, 9, .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(8, 7, 9, .88) 0%, rgba(8, 7, 9, .55) 62%, rgba(8, 7, 9, .15) 100%); }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .hero__logo-grande { width: clamp(72px, 20vw, 100px); margin-bottom: 12px; }
  .hero h1.hero__slogan { font-size: clamp(1.15rem, 5.6vw, 1.5rem); max-width: 100%; }
  .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(8, 7, 9, .55) 0%, rgba(8, 7, 9, .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(201, 206, 214, .28); }
.marca img { box-shadow: 0 0 0 1px rgba(217, 178, 90, .5), 0 0 0 3px rgba(201, 206, 214, .18); }
.beneficio:nth-child(even) .beneficio__ico { box-shadow: 0 0 0 3px rgba(201, 206, 214, .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, #1D1E22 0%, #0E0E10 100%); border-color: rgba(201, 206, 214, .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(217, 178, 90, .55); box-shadow: 0 18px 38px rgba(20, 12, 2, .22), inset 0 0 0 1px rgba(201, 206, 214, .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(40, 46, 56, .18); }
.cartao-sweet figure { box-shadow: 0 12px 28px rgba(30, 34, 42, .25); }
.cartao-sweet .etiqueta { color: var(--prata-4); }
.cartao-sweet .titulo { color: var(--cor-titulo); }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #4E545D 0%, #8E949D 50%, #4E545D 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet__txt > p { color: #3C4047; }
.cartao-sweet .checks li { border-color: rgba(140, 146, 156, .45); }
.cartao-sweet .checks li::before { color: #7E848D; }
.cartao-sweet .btn--escuro { color: var(--prata-1); box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(201, 206, 214, .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: #7E848D; }

/* pagamento e rodapé: detalhe de prata */
.selo + .selo { border-color: rgba(201, 206, 214, .6); color: var(--prata-2); }
.rodape__fim { border-top: 1px solid rgba(201, 206, 214, .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%, #F4E3E8 62%, #DCDDE3 100%); border-color: rgba(190, 160, 172, .7); }
.cartao-sweet .etiqueta { color: #7A5563; }
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #8C5A6C 0%, #94667A 45%, #6F737B 100%); -webkit-background-clip: text; background-clip: text; }
.cartao-sweet .checks li::before { color: #B98A9A; }
.colecao--sweet { background: linear-gradient(170deg, #241C21 0%, #121014 100%); border-color: rgba(214, 190, 200, .7); }
.colecao--sweet .colecao__txt small, .colecao--sweet .colecao__txt em { color: #E3CBD4; }

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

/* ==========================================================================
   AUDITORIA (26/09, sessão Gmail) — v1 guardada em antigo-v1/
   ========================================================================== */
/* página BRANCA do menu ao rodapé (régua 5): o marfim das seções "papel" lia como bege apagado */
:root { --fundo-papel: #FFFFFF; }

/* frase manuscrita no banner, no fundo escuro livre à esquerda (nunca em cima das velas) */
/* o esqueleto põe a frase solta no canto de cima à direita, girada — aqui ela caía sobre o bokeh claro; vai pra baixo do título */
.hero__script { display: block; position: static; transform: none; margin: 2px 0 0; font-family: var(--script);
  font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.05; color: var(--ouro-1); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* linha do rodapé DENTRO da coluna (antes ia de ponta a ponta do shell, 44px além do conteúdo de cada lado) */
.rodape__fim { border-top: 0; background: linear-gradient(rgba(201, 206, 214, .2), rgba(201, 206, 214, .2)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* "abraço": o degradê rosa-prata dava 3,8:1 no meio; escurecido pra ≥ 4,6:1 em todos os pontos, mesmo tom */
.cartao-sweet .titulo .grad { background: linear-gradient(95deg, #7E4F61 0%, #845A6E 45%, #5E636B 100%); -webkit-background-clip: text; background-clip: text; }

/* WhatsApp: ícone nos botões e o flutuante verde (o verde é o que a cliente reconhece) */
.btn .ico { flex: none; }
.flutuante { color: #fff; }

@media (max-width: 640px) {
  .hero__script { font-size: clamp(1.6rem, 7.2vw, 2rem); }
}
/* a 360/375 o "inspira" caía EM CIMA do pote (medido no Browser pane): sem fundo livre, a frase sai do banner (regra da skill) */
@media (max-width: 480px) {
  .hero__script { display: none; }
}