/* ===== Aelin Velas Aromáticas — estilo ===== */

:root {
    --tinta: #1d2621;      /* verde quase preto, cor do pavio queimado */
    --tinta2: #28352e;
    --papel: #eceee6;      /* cera de soja, com um fundo esverdeado */
    --papel2: #dfe3d8;
    --folha: #5f7a68;      /* eucalipto */
    --chama: #e38b2c;      /* amarelo-âmbar da chama */
    --chama-escura: #9c520f; /* o mesmo âmbar, legível sobre fundo claro */
    --ouro: #c9a14a;       /* dourado, só nos detalhes da vela da capa */
    --ouro-claro: #ecd48f;
    --ouro-escuro: #8c6a24;
    --ouro-texto: #7d5c12; /* dourado escuro para texto sobre fundo claro */
    --suave: #56605a;      /* texto secundário */
    --linha: #c6cbbd;
    --ok: #3f7a4f;
    --alerta: #b8741a;
    --zero: #a33b2e;

    --titulo: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", serif;
    --texto: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--texto);
    background: var(--papel);
    color: var(--tinta);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* a área de conteúdo cresce e empurra o rodapé para o fim da tela */
.hero, .secao, .login-fundo, .painel { flex: 1 0 auto; }
.rodape { margin-top: auto; }

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; line-height: 1.15; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.centro { text-align: center; }

/* ----- topo ----- */
.topo {
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    position: sticky;
    top: 0;
    z-index: 10;
}
.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}
.logo { font-family: var(--titulo); font-size: 28px; font-weight: 600; line-height: 1; }
.logo small { display: block; font-family: var(--texto); font-size: 12px; font-weight: 400; color: var(--suave); margin-top: 3px; }
.topo nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.topo nav a { font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.topo nav a:hover { border-bottom-color: var(--linha); }
.topo nav a.ativo { border-bottom-color: var(--chama); font-weight: 600; }
.conta { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.conta > a:hover { color: var(--ouro-texto); }

/* ----- botões ----- */
.btn {
    display: inline-block;
    background: var(--tinta);
    color: var(--papel);
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid var(--tinta);
    font: 600 15px var(--texto);
    cursor: pointer;
}
.btn:hover { background: var(--tinta2); }
.btn.sec { background: none; color: var(--tinta); }
.btn.sec:hover { background: var(--papel2); }
.btn.sec-escuro { background: none; color: var(--tinta); border-color: var(--tinta); }
.btn.peq { padding: 5px 14px; font-size: 14px; }
.btn.cheio { width: 100%; margin-top: 20px; padding: 12px; }
.btn.perigo { background: var(--zero); border-color: var(--zero); color: #fff; }
:focus-visible { outline: 3px solid var(--chama); outline-offset: 2px; }

/* ----- avisos ----- */
.flash, .erro {
    width: calc(100% - 40px);
    max-width: 1040px;
    margin: 14px auto;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 15px;
}
.flash { background: var(--papel2); border-left: 4px solid var(--folha); }
.erro { background: #f3d9d3; border-left: 4px solid var(--zero); color: #6e231a; }

/* ----- capa ----- */
.hero {
    background: var(--tinta);
    color: var(--papel);
    padding: 72px 20px 80px;
    display: grid;
    grid-template-columns: minmax(0, 560px) 180px;
    justify-content: center;
    align-items: center;
    gap: 40px 90px;
}
.hero-texto { min-width: 0; }
.hero h1 { font-size: 88px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.hero h2 { font-size: 22px; font-weight: 400; font-style: italic; color: var(--ouro); margin: 6px 0 26px; }
.hero p { font-size: 18px; margin-bottom: 8px; max-width: 34em; }
.hero .frase { color: #b9c2b5; margin-bottom: 28px; }
.hero .acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero .btn { background: var(--chama); border-color: var(--chama); color: var(--tinta); }
.hero .btn:hover { background: #f09a3c; }
.hero .btn.sec { background: none; color: var(--papel); border-color: #6c7a71; }
.hero .btn.sec:hover { background: var(--tinta2); }
.link-claro { color: var(--ouro); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* a vela da capa: a única animação do site */
.vela-hero { position: relative; width: 120px; height: 300px; justify-self: center; }
.vela-hero .cera {
    position: absolute; bottom: 0; left: 0; right: 0; height: 190px;
    background: linear-gradient(90deg, #cfd3c3 0%, #f4f2e8 35%, #f4f2e8 60%, #bcc1b0 100%);
    border-radius: 8px 8px 4px 4px;
}
.vela-hero .cera::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 20px;
    background: #e6e4d6; border-radius: 50%;
    transform: translateY(-50%);
}
/* faixa dourada em espiral ao redor da vela, com brilhos e sombra lateral de cilindro */
.vela-hero .cera::after {
    content: ""; position: absolute; top: 12px; left: 0; right: 0; bottom: 0;
    border-radius: 0 0 4px 4px;
    background:
        radial-gradient(circle, #fff 0 1px, rgba(255, 244, 207, .7) 1.5px, transparent 4px) 24px 38px / 12px 12px no-repeat,
        radial-gradient(circle, #fff 0 1px, rgba(255, 244, 207, .7) 1.5px, transparent 4px) 86px 70px / 12px 12px no-repeat,
        radial-gradient(circle, #fff 0 1px, rgba(255, 244, 207, .7) 1.5px, transparent 4px) 52px 112px / 12px 12px no-repeat,
        radial-gradient(circle, #fff 0 1px, rgba(255, 244, 207, .7) 1.5px, transparent 4px) 94px 150px / 12px 12px no-repeat,
        linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(255, 255, 255, .12) 35%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .22) 100%),
        repeating-linear-gradient(
            162deg,
            transparent 0 22px,
            var(--ouro-escuro) 22px 23px,
            var(--ouro-claro) 23px 26px,
            var(--ouro) 26px 29px,
            var(--ouro-escuro) 29px 31px,
            transparent 31px 52px
        );
}
/* pires dourado sob a vela */
.vela-hero::after {
    content: ""; position: absolute; bottom: -10px; left: -22px; right: -22px; height: 14px;
    background: linear-gradient(180deg, var(--ouro-claro), var(--ouro) 45%, var(--ouro-escuro));
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.vela-hero .pavio { position: absolute; bottom: 188px; left: 50%; width: 3px; height: 26px; margin-left: -1.5px; background: #0d120f; border-radius: 2px; }
.vela-hero .chama {
    position: absolute; bottom: 206px; left: 50%; width: 26px; height: 56px; margin-left: -13px;
    background: radial-gradient(ellipse at 50% 75%, #fff4cf 0%, #ffc566 35%, var(--chama) 70%, rgba(227, 139, 44, 0) 100%);
    border-radius: 50% 50% 50% 50% / 68% 68% 32% 32%;
    box-shadow: 0 0 60px 24px rgba(227, 139, 44, .35);
    transform-origin: 50% 100%;
    animation: chama 2.4s ease-in-out infinite;
}
@keyframes chama {
    0%, 100% { transform: scale(1, 1) rotate(0deg); box-shadow: 0 0 60px 24px rgba(227, 139, 44, .35); }
    12% { transform: scale(.93, 1.1) rotate(-3deg); box-shadow: 0 0 70px 30px rgba(227, 139, 44, .42); }
    25% { transform: scale(1.04, .94) rotate(2.5deg); box-shadow: 0 0 52px 20px rgba(227, 139, 44, .3); }
    40% { transform: scale(.95, 1.08) rotate(-1.5deg); box-shadow: 0 0 66px 28px rgba(227, 139, 44, .4); }
    55% { transform: scale(1.05, .96) rotate(3.5deg); box-shadow: 0 0 54px 22px rgba(227, 139, 44, .32); }
    72% { transform: scale(.97, 1.07) rotate(-2.5deg); box-shadow: 0 0 68px 29px rgba(227, 139, 44, .41); }
    88% { transform: scale(1.02, .98) rotate(1deg); box-shadow: 0 0 58px 23px rgba(227, 139, 44, .34); }
}

/* ----- seções ----- */
.secao { padding: 64px 0; }
.secao.perg { background: var(--papel2); }
.secao.escura { background: var(--tinta); color: var(--papel); }
.titulo { text-align: left; font-size: 34px; }
.titulo.esq, .lead.esq { text-align: left; }
.secao.escura .titulo { color: var(--ouro); }
.lead { text-align: left; font-size: 17px; color: var(--suave); margin: 8px 0 32px; max-width: 40em; }
.secao.escura .lead { color: #b9c2b5; }
.subtitulo { margin: 8px 0 14px; font-size: 22px; }
.subtitulo small { font-family: var(--texto); font-weight: 400; font-size: 14px; color: var(--suave); margin-left: 8px; }
.espaco { margin-top: 38px; }

/* páginas Sobre e Produtos: dourado escuro em poucos pontos de destaque */
.dourado .lead, .dourado .subtitulo, .dourado .preco, .ouro { color: var(--ouro-texto); }
.dourado a.atalho h3 { color: var(--ouro-texto); }
.dourado .subtitulo small { color: var(--suave); }
.ouro { font-style: italic; }

.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sobre p { font-size: 17px; max-width: 34em; }
.sobre.com-montagem { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }

/* vídeo vertical (464x832) ao lado de imagem quadrada: as colunas seguem as proporções, então os dois ficam com a mesma altura */
.montagem { display: grid; grid-template-columns: 464fr 832fr; gap: 12px; align-items: stretch; }
.montagem video, .montagem img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: var(--papel2); }
.montagem video { aspect-ratio: 464 / 832; }

/* ----- fotos (espaços reservados) ----- */
.foto {
    background: var(--papel2);
    color: var(--suave);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    padding: 10px;
    min-height: 140px;
    border-radius: 4px;
}
.perg .foto { background: var(--linha); }
.escura .foto { background: var(--tinta2); color: #b9c2b5; }
.foto.peq { min-height: 90px; margin-bottom: 4px; }
.foto.largo { margin-top: 30px; min-height: 200px; }
.foto.alto { min-height: 260px; }
.foto img { max-width: 100%; }

/* fotos reais de produtos e kits: formato 4:3, cortadas ao centro */
.foto-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--papel2); }

/* produtos: fotos verticais 3:4 (a foto e o quadro de espera têm o mesmo formato, então a grade não "pula" ao entrar uma foto) */
.foto-img.retrato { aspect-ratio: 3 / 4; }
.foto.retrato { aspect-ratio: 3 / 4; min-height: 0; margin-bottom: 0; }

/* kits: fotos quase quadradas, levemente horizontais (10:9) */
.foto-img.paisagem { aspect-ratio: 10 / 9; }
.foto.paisagem { aspect-ratio: 10 / 9; min-height: 0; margin-bottom: 0; }

/* faixa larga (montagem 3:1) na página Velas: ocupa a largura toda, sem cortar */
.foto-faixa { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; margin-top: 30px; border-radius: 4px; background: var(--papel2); }

/* ----- cartões ----- */
.grade { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.card {
    background: #f7f8f3;
    border-top: 3px solid var(--folha);
    border-radius: 0 0 6px 6px;
    padding: 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.perg .card { background: var(--papel); }
.escura .card { background: var(--tinta2); color: var(--papel); border-top-color: var(--chama); }
.card h3 { font-size: 20px; margin-top: 6px; }
.card .nota { font-size: 14px; color: var(--suave); font-style: normal; margin-top: 0; }
.escura .card .nota { color: #b9c2b5; }
.preco { font-family: var(--titulo); font-size: 24px; font-weight: 600; margin: 4px 0 8px; }
.escura .preco { color: var(--ouro); }
.card > .foto, .card > .foto-img { align-self: stretch; }
.card > .btn, .card > .tag { margin-top: auto; }

.vela .peso { font-family: var(--titulo); font-size: 34px; color: var(--ouro-texto); font-weight: 600; }

a.atalho:hover { border-top-color: var(--chama); }
a.atalho:hover h3 { text-decoration: underline; text-decoration-color: var(--chama); text-underline-offset: 4px; }

.tag {
    display: inline-block;
    background: var(--chama);
    color: var(--tinta);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
}
.tag.esgotado { background: var(--zero); color: #fff; }

.selos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.selos span { background: var(--papel2); border-radius: 3px; padding: 6px 14px; font-size: 14px; }

.kit .itens { font-size: 14px; font-weight: 600; }

/* ----- aromas ----- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { border: 1px solid #6c7a71; color: var(--papel); padding: 5px 14px; border-radius: 30px; font-size: 14px; }
.chip:hover { background: var(--tinta2); }
.chip.on { background: var(--chama); border-color: var(--chama); color: var(--tinta); }
.aroma h3 { color: var(--ouro); font-size: 19px; margin-top: 0; }
.aroma .fam { font-size: 13px; font-style: italic; color: #b9c2b5; }
.aroma p { font-size: 14px; }
.aroma.indisponivel { opacity: .6; }
.aviso { margin-top: 22px; font-size: 14px; color: var(--suave); }
.escura .aviso { color: #b9c2b5; }

/* ----- descontos ----- */
.faixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.faixa { background: var(--tinta); color: var(--papel); border-radius: 6px; padding: 18px; }
.faixa b { display: block; font-family: var(--titulo); font-size: 26px; color: var(--ouro); margin-bottom: 4px; }
.faixa span { font-size: 14px; }
.obs { font-size: 14px; color: var(--suave); margin-top: 20px; }

/* ----- como pedir ----- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; counter-reset: p; margin-top: 30px; }
.passo { padding: 4px 0 0; }
.passo::before { counter-increment: p; content: counter(p); display: block; font-family: var(--titulo); font-size: 44px; line-height: 1; color: var(--ouro-texto); margin-bottom: 6px; }
.contato { margin: 34px 0 14px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- rodapé ----- */
.rodape { background: var(--tinta); color: #b9c2b5; padding: 34px 20px; font-size: 14px; }
.rodape b { font-family: var(--titulo); font-size: 18px; font-weight: 600; color: var(--papel); }

/* ----- login e formulários ----- */
.login-fundo {
    background: var(--papel2);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.caixa, .caixa-form {
    background: var(--papel);
    border-top: 3px solid var(--chama);
    border-radius: 0 0 6px 6px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
}
.caixa h1 { font-size: 26px; }
.caixa .nota { font-size: 14px; font-style: normal; color: var(--suave); margin-top: 6px; }
.caixa .nota a { text-decoration: underline; text-underline-offset: 3px; }
.caixa-form { margin: 0 auto; max-width: 460px; }
.caixa-form h1 { font-size: 26px; margin-bottom: 6px; }
.botoes { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.rotulo { font-size: 13px; color: var(--suave); margin-top: 14px; }
.dado { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
input, select {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid #9aa391;
    border-radius: 4px;
    background: #fbfcf8;
    color: var(--tinta);
    width: 100%;
}
input:focus, select:focus { border-color: var(--tinta); }

/* ----- painel de estoque ----- */
.painel { padding-top: 28px; padding-bottom: 60px; }

.conta-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--linha); margin-bottom: 24px; }
.conta-nav a { padding: 8px 0; font-size: 15px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.conta-nav a:hover { border-bottom-color: var(--linha); }
.conta-nav a.ativo { font-weight: 600; border-bottom-color: var(--chama); }

.aviso-acesso { background: #f6e8d2; border-left: 4px solid var(--alerta); border-radius: 4px; padding: 12px 16px; margin-bottom: 22px; font-size: 15px; }
.aviso-acesso a { text-decoration: underline; font-weight: 600; }
.painel h1 { font-size: 30px; }
.sub { font-size: 15px; color: var(--suave); margin: 2px 0 22px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi { background: #f7f8f3; border-left: 4px solid var(--ok); border-radius: 0 6px 6px 0; padding: 14px 16px; }
.kpi b { display: block; font-family: var(--titulo); font-size: 34px; line-height: 1.1; }
.kpi span { font-size: 14px; color: var(--suave); }
.kpi.baixo { border-left-color: var(--alerta); }
.kpi.zero { border-left-color: var(--zero); }

.abas { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.aba { border: 1px solid var(--tinta); padding: 6px 16px; border-radius: 30px; font-size: 14px; }
.aba:hover { background: var(--papel2); }
.aba.on { background: var(--tinta); color: var(--papel); }

.ferramentas { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.ferramentas input { max-width: 280px; }
.ferramentas select { max-width: 220px; }
.ferramentas input, .ferramentas select { flex: 1 1 160px; }

.tabela-wrap { background: #f7f8f3; border-radius: 6px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
th { background: var(--papel2); text-align: left; padding: 12px 14px; font-weight: 600; font-size: 14px; border-bottom: 2px solid var(--tinta); }
td { padding: 10px 14px; border-top: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
tbody tr:first-child td { border-top: 0; }
td.acoes { white-space: nowrap; }
td.acoes a { text-decoration: underline; text-underline-offset: 3px; margin-right: 12px; font-size: 14px; }
td.acoes a:hover { color: var(--ouro-texto); }

.qt { display: inline-flex; align-items: center; gap: 8px; }
.qt button {
    width: 28px; height: 28px; border-radius: 4px;
    border: 1px solid var(--tinta); background: none; color: var(--tinta);
    cursor: pointer; font-size: 16px; line-height: 1;
}
.qt button:hover { background: var(--tinta); color: var(--papel); }
.qt span { min-width: 30px; text-align: center; font-weight: 600; font-size: 16px; }

.st { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px; color: #fff; }
.st.ok { background: var(--ok); }
.st.baixo { background: var(--alerta); }
.st.zero { background: var(--zero); }

.pilula { border: 0; border-radius: 3px; padding: 4px 12px; font: 600 13px var(--texto); color: #fff; cursor: pointer; }
.pilula.ligado { background: var(--ok); }
.pilula.desligado { background: #757d71; }

.nota { font-size: 13px; margin-top: 12px; color: var(--suave); }
.foto-form { display: flex; gap: 6px; align-items: center; }
.foto-form select { min-width: 150px; padding: 5px 8px; }
.vazio { padding: 20px; text-align: center; }

/* ----- celular ----- */
@media (max-width: 720px) {
    .sobre, .sobre.com-montagem { grid-template-columns: minmax(0, 1fr); }
    .hero { grid-template-columns: minmax(0, 1fr); padding: 48px 20px 56px; }
    .hero h1 { font-size: 64px; }
    .vela-hero { transform: scale(.7); transform-origin: 0 100%; justify-self: start; height: 210px; width: 84px; }
    .titulo { font-size: 28px; }
    .barra { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .vela-hero .chama { animation: none; }
}