/*
  Divina Essência — layout "Oliva" (teste de subidentidade visual)
  Este arquivo só afeta esta página de teste (body.essencia-oliva).
  Não altera css/style.css nem nenhuma outra página do Divina Festa.
*/

body.essencia-oliva{
  --texto:#2C2622;
  --muted:#5E554E;
  --oliva:#5B6458;
  --oliva-texto:#454C40;
  background:#EAE5DD;
  color:var(--texto);
}

/* Topbar acompanha o tom greige da página em vez do creme padrão */
body.essencia-oliva .topbar{
  background:rgba(234,229,221,.86);
}

/* Ritmo de fundos entre seções: greige (padrão do body) alternando com creme claro,
   e um respiro em tom oliva claro só na seção editorial de benefício. */
body.essencia-oliva .essencia-band--light{background:#F5F1E8}
body.essencia-oliva .essencia-band--editorial{background:#DCD4C7}

/* Formulário: card claro discreto, sem parecer um cartão branco flutuante */
body.essencia-oliva .form-panel{
  background:#F8F6F1;
  border-color:#D2C7B6;
}

/* Nova seção editorial — "Receber é ótimo. Ter que cuidar de tudo sozinho, nem tanto." */
.essencia-beneficio{padding-block:44px}
.essencia-beneficio-wrap{max-width:860px;position:relative;padding-top:22px}
/* Traço discreto acima do eyebrow — assinatura visual delicada, só aqui (sem faixa grossa) */
.essencia-beneficio-wrap::before{
  content:"";position:absolute;top:0;left:0;
  width:38px;height:2px;background:var(--oliva);
}
.essencia-beneficio .eyebrow{color:var(--oliva-texto)}
.essencia-beneficio h2{max-width:46ch}
.essencia-beneficio > .wrap > p{max-width:62ch}
.essencia-beneficio-steps p.essencia-beneficio-headline{
  margin:0 0 6px;font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--texto);
}

/* CTA intermediário em tom oliva, para diferenciar dos CTAs dourados principais (hero/formulário) */
body.essencia-oliva .essencia-beneficio-cta{
  background:transparent;
  border-color:var(--oliva);
  color:var(--oliva-texto);
}
@media (hover:hover) and (pointer:fine){
  body.essencia-oliva .btn.btn-slim.essencia-beneficio-cta:hover{
    border-color:var(--oliva);
    background:#EFEDE4;
    color:var(--oliva-texto);
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(91,100,88,.18);
  }
}

/* "Como funciona" — eyebrow oliva */
.essencia-oliva-eyebrow{color:var(--oliva-texto)}

/* Timeline vertical simples e editorial: os 4 passos recebem exatamente o mesmo
   tratamento, sem hover, sem sombra e sem preenchimento — só a linha conectando os círculos. */
body.essencia-oliva .essencia-timeline{
  display:grid;gap:0;counter-reset:ess;
}
body.essencia-oliva .essencia-timeline li{
  position:relative;padding:0 0 26px 50px;
  background:none;transform:none;box-shadow:none;transition:none;
}
body.essencia-oliva .essencia-timeline li:last-child{padding-bottom:0}
body.essencia-oliva .essencia-timeline li::before{
  content:counter(ess);
  position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--oliva);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.92rem;color:var(--oliva-texto);
  transition:none;box-shadow:none;
}
body.essencia-oliva .essencia-timeline li:not(:last-child)::after{
  content:"";position:absolute;left:15.5px;top:32px;bottom:0;
  width:1px;background:rgba(69,82,64,.28);
}
body.essencia-oliva .essencia-timeline li:hover,
body.essencia-oliva .essencia-timeline li:active,
body.essencia-oliva .essencia-timeline li:hover::before,
body.essencia-oliva .essencia-timeline li:active::before{
  background:none;transform:none;box-shadow:none;border-color:var(--oliva);color:var(--oliva-texto);
}
body.essencia-oliva .essencia-timeline h3{font-size:1.05rem}

/* Hero: pequenos ajustes de ritmo entre eyebrow, título, texto e botões */
body.essencia-oliva .ess-hero-text .line-tag{margin-bottom:14px}
body.essencia-oliva .ess-hero-text h1{margin-bottom:16px}
body.essencia-oliva .ess-hero-text .lead{margin-bottom:22px}
body.essencia-oliva .ess-hero-actions{margin-top:8px}

/* Listas de texto corrido: um pouco mais de respiro entre itens */
body.essencia-oliva .ess-list{gap:12px}
body.essencia-oliva .ess-list li{line-height:1.55}
/* Marcador "-" com posição em px fixo (em vez de em, sujeito a arredondamento) para não
   renderizar mais fino/apagado em alguns itens da lista */
body.essencia-oliva .ess-list li::before{top:9px;height:3px}

/* Deixa o título da seção visível ao rolar para #gastronomia / #como-funciona / #proposta,
   compensando a altura do cabeçalho fixo (sticky) */
body.essencia-oliva #gastronomia,
body.essencia-oliva #como-funciona,
body.essencia-oliva #proposta{
  scroll-margin-top:112px;
}
@media (max-width:560px){
  body.essencia-oliva #gastronomia,
  body.essencia-oliva #como-funciona,
  body.essencia-oliva #proposta{
    scroll-margin-top:94px;
  }
}

/* Pills "Onde o evento pode acontecer": leve mais respiro no desktop, mesma quebra no mobile */
body.essencia-oliva .ess-chips{gap:12px 16px}

/* "Que eventos atendemos": 8 itens distribuem melhor em 4 colunas no desktop */
body.essencia-oliva .essencia-band--light .ess-cols--accent{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  body.essencia-oliva .essencia-band--light .ess-cols--accent{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  body.essencia-oliva .essencia-band--light .ess-cols--accent{grid-template-columns:1fr}
}

.essencia-beneficio-steps{
  list-style:none;margin:30px 0 26px;padding:24px 0 0;
  border-top:1px solid rgba(44,38,34,.16);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px 30px;
}
.essencia-beneficio-steps li{padding:0}
.essencia-beneficio-steps h3{
  margin:0 0 8px;font-size:.76rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oliva-texto);
}
.essencia-beneficio-steps p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}

.essencia-beneficio-close{
  margin:0 0 24px;padding-top:20px;
  border-top:1px solid rgba(44,38,34,.16);
  font-size:1.2rem;font-weight:700;letter-spacing:-.015em;color:var(--texto);
  max-width:44ch;
}

.essencia-beneficio-cta{margin-top:2px}

@media (max-width:900px){
  .essencia-beneficio-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .essencia-beneficio{padding-block:32px}
  .essencia-beneficio-steps{grid-template-columns:1fr;gap:20px}
  .essencia-beneficio h2{max-width:none}
}