/* Áurea · estilos do site (gerado a partir da versão anterior; edite à vontade) */

/* Fontes da marca (auto-hospedadas via @fontsource) */

:root {
  /* Paleta tirada das peças do Instagram */
  --creme: #f9f2ec;
  --creme-2: #f2e8dd;
  --areia: #e5d5c1;
  --ouro: #b08a52;
  --ouro-claro: #cfb07f;
  --ouro-texto: #7f5f36; /* dourado com contraste AA para texto pequeno */
  --cacau: #2f2620;
  --texto: #4a3f37;
  --texto-suave: #6e6158;
  --branco: #fffdfa;

  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-sc: 'Cormorant SC', 'Cormorant Garamond', serif;
  --f-corpo: 'Montserrat', system-ui, sans-serif;
  --f-acento: 'Arapey', 'Cormorant Garamond', serif;

  --largura: 1180px;
  --raio: 4px;
  --sombra: 0 18px 40px -24px rgb(47 38 32 / 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--cacau);
  line-height: 1.1;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
}
/* *palavra* nos títulos editáveis vira itálico dourado */
:is(h1, h2, h3) em {
  font-style: italic;
  color: var(--ouro-texto);
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: 1.6rem;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

/* ---------- utilitários ---------- */
.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--f-sc);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--ouro-texto);
  margin: 0 0 1rem;
  display: block;
}

.acento {
  font-family: var(--f-acento);
  font-style: italic;
  color: var(--ouro-texto);
}

.divisor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ouro);
  margin: 1.5rem 0;
}
.divisor::before,
.divisor::after {
  content: '';
  height: 1px;
  width: 3rem;
  background: currentColor;
  opacity: 0.6;
}
.divisor.centro {
  justify-content: center;
}

.secao {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.secao--alt {
  background: var(--creme-2);
}

.cabecalho-secao {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  font-family: var(--f-corpo);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--cacau);
  border-radius: 999px;
  background: var(--cacau);
  color: var(--creme);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.btn:hover {
  background: var(--ouro-texto);
  border-color: var(--ouro-texto);
}
.btn--linha {
  background: transparent;
  color: var(--cacau);
}
.btn--linha:hover {
  background: var(--cacau);
  color: var(--creme);
  border-color: var(--cacau);
}
.btn svg {
  width: 1.1em;
  height: 1.1em;
}

.link-seta {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cacau);
  border-bottom: 1px solid var(--ouro);
  padding-bottom: 0.3rem;
  transition: color 0.3s;
}
.link-seta:hover {
  color: var(--ouro-texto);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* revelar ao rolar */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 520px) {
  .btn {
    letter-spacing: 0.12em;
    padding-inline: 1.4rem;
  }
  .eyebrow {
    letter-spacing: 0.2em;
  }
}

/* âncoras não ficam escondidas atrás do topo fixo */
[id] {
  scroll-margin-top: 5.5rem;
}

/* ───────── layout ───────── */
.pular {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    background: var(--cacau);
    color: var(--creme);
    padding: 0.6rem 1rem;
    border-radius: var(--raio);
  }
  .pular:focus {
    top: 1rem;
  }

  /* ---------- topo ---------- */
  .topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(249 242 236 / 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition:
      border-color 0.3s,
      box-shadow 0.3s;
  }
  .topo--rolado {
    border-bottom-color: rgb(176 138 82 / 0.2);
  }
  .topo__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5rem;
  }
  .topo__marca {
    text-decoration: none;
  }
  .topo__nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
  .topo__nav ul {
    display: flex;
    gap: 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .topo__nav a {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--texto);
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
    transition:
      color 0.3s,
      border-color 0.3s;
  }
  .topo__nav a:hover,
  .topo__nav a[aria-current='page'] {
    color: var(--ouro-texto);
    border-bottom-color: var(--ouro);
  }
  .topo__ig {
    display: inline-flex;
    border: 0 !important;
  }
  .topo__ig svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .topo__menu-btn {
    display: none;
    background: none;
    border: 0;
    padding: 0.5rem;
    color: var(--cacau);
    cursor: pointer;
  }
  .topo__menu-btn svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .topo__menu-btn .ico-fechar {
    display: none;
  }

  @media (max-width: 860px) {
    .topo__menu-btn {
      display: inline-flex;
      position: relative;
      z-index: 2;
    }
    .topo__nav {
      position: fixed;
      inset: 5rem 0 0 0;
      height: calc(100dvh - 5rem);
      background: var(--creme);
      flex-direction: column;
      justify-content: center;
      gap: 3rem;
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.35s var(--ease),
        visibility 0.35s;
    }
    .topo__nav ul {
      flex-direction: column;
      align-items: center;
      gap: 1.75rem;
    }
    .topo__nav ul a {
      font-family: var(--f-display);
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: none;
    }
    .topo--aberto .topo__nav {
      opacity: 1;
      visibility: visible;
    }
    .topo--aberto .topo__menu-btn .ico-abrir {
      display: none;
    }
    .topo--aberto .topo__menu-btn .ico-fechar {
      display: block;
    }
  }

  /* ---------- rodapé ---------- */
  .rodape {
    background: var(--cacau);
    color: #d9cbbb;
    padding-top: 5rem;
    font-size: 0.92rem;
  }
  .rodape a {
    color: #efe4d7;
    text-decoration: none;
    transition: color 0.3s;
  }
  .rodape a:hover {
    color: var(--ouro-claro);
  }
  .rodape__grade {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
  }
  .rodape__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .rodape__marca .acento {
    color: var(--ouro-claro);
    font-size: 1.2rem;
    margin: 0;
  }
  .rodape__titulo {
    font-family: var(--f-sc);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.24em;
    text-transform: lowercase;
    color: var(--ouro-claro);
    margin-bottom: 1.2rem;
  }
  .rodape ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
  }
  .rodape__social {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }
  .rodape__social svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .rodape__nota {
    margin-top: 1.4rem;
    color: #b9a999;
    font-size: 0.85rem;
  }
  .rodape__base {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1.6rem;
    border-top: 1px solid rgb(207 176 127 / 0.2);
    font-size: 0.78rem;
    color: #a89888;
    letter-spacing: 0.04em;
  }
  @media (max-width: 760px) {
    .rodape__grade {
      grid-template-columns: 1fr;
    }
  }

/* ───────── marca ───────── */
.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ouro);
    line-height: 1;
  }
  .marca__mono {
    height: 2.6rem;
    width: auto;
  }
  .marca__texto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .marca__nome {
    font-family: var(--f-display);
    font-size: 1.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: -0.14em;
  }
  .marca__sub {
    font-family: var(--f-display);
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-top: 0.35rem;
    margin-right: -0.32em;
  }
  .marca--claro {
    color: var(--ouro-claro);
  }
  .marca--grande {
    flex-direction: column;
    gap: 1.2rem;
  }
  .marca--grande .marca__mono {
    height: 5.5rem;
  }
  .marca--grande .marca__nome {
    font-size: 2.6rem;
  }
  .marca--grande .marca__sub {
    font-size: 0.72rem;
    margin-top: 0.6rem;
  }

/* ───────── cartao ───────── */
.cartao__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .cartao__foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--areia);
  }
  .cartao__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
      transform 1.1s var(--ease),
      opacity 0.7s var(--ease);
  }
  .cartao__foto2 {
    opacity: 0;
  }
  .cartao__link:hover .cartao__foto img {
    transform: scale(1.04);
  }
  .cartao__link:hover .cartao__foto2 {
    opacity: 1;
  }
  .cartao__selo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--creme);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
  }
  .cartao__info {
    padding-top: 1.1rem;
    text-align: center;
  }
  .cartao__meta {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-suave);
  }
  .cartao__nome {
    font-size: 1.65rem;
    margin: 0.35rem 0 0.2rem;
    transition: color 0.3s;
  }
  .cartao__link:hover .cartao__nome {
    color: var(--ouro-texto);
  }
  @media (max-width: 520px) {
    .cartao__meta {
      font-size: 0.62rem;
      letter-spacing: 0.1em;
    }
    .cartao__nome {
      font-size: 1.4rem;
    }
  }
  .cartao__preco {
    font-family: var(--f-acento);
    font-style: italic;
    color: var(--ouro-texto);
    font-size: 1.05rem;
  }

/* ───────── pedido ───────── */
.pedido {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .pedido .btn {
    width: 100%;
  }
  .pedido__aviso {
    font-size: 0.9rem;
    color: var(--ouro-texto);
    margin: 0 0 0.4rem;
  }

/* ───────── quiz ───────── */
.quiz {
    max-width: 46rem;
    margin-inline: auto;
    background: var(--branco);
    border: 1px solid rgb(176 138 82 / 0.25);
    border-radius: 6px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--sombra);
  }
  .quiz__progresso {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 2rem;
  }
  .quiz__progresso span {
    flex: 1;
    height: 2px;
    background: var(--areia);
    transition: background 0.4s;
  }
  .quiz__progresso span.ativo {
    background: var(--ouro);
  }
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    animation: entrar 0.5s var(--ease);
  }
  fieldset[hidden] {
    display: none;
  }
  legend {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--cacau);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    padding: 0;
  }
  .quiz__num {
    display: block;
    font-family: var(--f-corpo);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--ouro-texto);
    margin-bottom: 0.6rem;
  }
  .quiz__opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .quiz__opcao {
    position: relative;
    cursor: pointer;
  }
  .quiz__opcao input {
    position: absolute;
    opacity: 0;
  }
  .quiz__opcao span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--areia);
    border-radius: var(--raio);
    font-size: 0.92rem;
    line-height: 1.45;
    transition:
      border-color 0.25s,
      background 0.25s;
  }
  .quiz__opcao:hover span {
    border-color: var(--ouro);
  }
  .quiz__opcao input:checked + span {
    border-color: var(--ouro);
    background: var(--creme);
  }
  .quiz__opcao input:focus-visible + span {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
  }

  .quiz__resultado {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 2rem;
    align-items: center;
    animation: entrar 0.6s var(--ease);
  }
  .quiz__resultado[hidden] {
    display: none;
  }
  .quiz__resultado img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 200px 200px var(--raio) var(--raio);
  }
  .quiz__resultado h3 {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    color: var(--cor);
    margin-bottom: 0.3rem;
  }
  .quiz__titulo {
    font-weight: 500;
    color: var(--cacau);
  }
  .quiz__resultado .acento {
    color: var(--cor);
    font-size: 1.15rem;
  }
  .quiz__acoes {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
  }
  .quiz__refazer {
    background: none;
    border-top: 0;
    border-inline: 0;
    cursor: pointer;
    font-family: inherit;
  }
  @keyframes entrar {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
  @media (max-width: 600px) {
    .quiz__opcoes,
    .quiz__resultado {
      grid-template-columns: 1fr;
    }
    .quiz__resultado img {
      max-width: 14rem;
      margin-inline: auto;
    }
  }

/* ───────── página: home ───────── */
.pg-home {
.centro {
    text-align: center;
    margin-top: 3.5rem;
  }

  /* hero */
  .hero {
    padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
    overflow: hidden;
  }
  .hero__grade {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
  }
  .hero__sub {
    font-size: 1.05rem;
    max-width: 30rem;
    margin-block: 1.5rem 2.5rem;
  }
  .hero__acoes {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .hero__foto {
    position: relative;
  }
  .hero__foto > img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 999px 999px 6px 6px;
    box-shadow: var(--sombra);
  }
  .hero__foto::before {
    content: '';
    position: absolute;
    inset: -1rem -1rem 2rem 1rem;
    border: 1px solid var(--ouro);
    border-radius: 999px 999px 6px 6px;
    opacity: 0.5;
    z-index: -1;
  }
  .hero__selo {
    position: absolute;
    left: -2rem;
    bottom: 2.5rem;
    width: 6.5rem;
    height: 6.5rem;
    display: grid;
    place-items: center;
    background: var(--creme);
    border-radius: 50%;
    border: 1px solid rgb(176 138 82 / 0.35);
  }
  .hero__selo img {
    height: 3.6rem;
    width: auto;
  }

  /* faixa */
  .faixa {
    border-block: 1px solid rgb(176 138 82 / 0.25);
    background: var(--creme-2);
  }
  .faixa__linha {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-block: 1.3rem;
  }
  .faixa span {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto);
  }
  .faixa svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--ouro);
  }

  /* grade */
  .grade-velas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  /* aromas */
  .aromas__grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
  }
  .aroma {
    text-decoration: none;
    text-align: center;
    background: var(--creme);
    padding: 1rem 1rem 1.6rem;
    border-radius: 6px;
    transition:
      transform 0.5s var(--ease),
      box-shadow 0.5s var(--ease);
  }
  .aroma:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
  }
  .aroma__foto {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 999px 999px 4px 4px;
    margin-bottom: 1.4rem;
    background: var(--cor-suave);
  }
  .aroma__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .aroma h3 {
    color: var(--cor);
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }
  .aroma__titulo {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--cacau);
    margin-bottom: 0.4rem;
  }
  .aroma .acento {
    color: var(--cor);
    margin: 0;
  }

  /* cuidados */
  .cuidados__grade {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  .cuidados__foto img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 6px;
  }
  .tempos {
    list-style: none;
    padding: 0;
    margin: 2rem 0 2.5rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-block: 1px solid rgb(176 138 82 / 0.3);
  }
  .tempos li {
    padding: 1.2rem 0.5rem;
    text-align: center;
  }
  .tempos li + li {
    border-left: 1px solid rgb(176 138 82 / 0.3);
  }
  .tempos strong {
    display: block;
    font-family: var(--f-sc);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: var(--ouro-texto);
    font-size: 0.95rem;
  }
  .tempos span {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--cacau);
  }

  /* instagram */
  .insta__grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
  .insta__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--raio);
  }
  .insta__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
  }
  .insta__icone {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(47 38 32 / 0.35);
    color: var(--creme);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .insta__icone svg {
    width: 2rem;
    height: 2rem;
  }
  .insta__item:hover img {
    transform: scale(1.05);
  }
  .insta__item:hover .insta__icone {
    opacity: 1;
  }

  @media (max-width: 980px) {
    .grade-velas,
    .aromas__grade {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 820px) {
    .hero__grade,
    .cuidados__grade {
      grid-template-columns: 1fr;
    }
    .hero__foto {
      max-width: 26rem;
      margin-inline: auto;
      width: 88%;
    }
    .hero__texto {
      text-align: center;
    }
    .hero__sub {
      margin-inline: auto;
    }
    .hero__acoes {
      justify-content: center;
    }
    .hero__selo {
      left: -1.25rem;
      width: 5rem;
      height: 5rem;
    }
    .hero__selo img {
      height: 2.8rem;
    }
    .insta__grade {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 520px) {
    .aroma {
      padding: 0.6rem 0.6rem 1.2rem;
    }
    .aroma h3 {
      font-size: 1.6rem;
    }
    .aroma__titulo {
      font-size: 0.8rem;
    }
    .aroma .acento {
      font-size: 0.85rem;
    }
  }
}

/* ───────── página: velas ───────── */
.pg-velas {
.topo-pagina {
    text-align: center;
    padding-block: clamp(3rem, 7vw, 5rem) 2.5rem;
  }
  .topo-pagina p {
    max-width: 34rem;
    margin-inline: auto;
  }
  .lista {
    padding-bottom: clamp(4rem, 9vw, 7rem);
  }
  .filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
    padding-block: 1.5rem;
    margin-bottom: 3rem;
    border-block: 1px solid rgb(176 138 82 / 0.25);
  }
  .filtros__grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .filtros__rotulo {
    font-family: var(--f-sc);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--ouro-texto);
    margin-right: 0.5rem;
  }
  .chip {
    font-family: var(--f-corpo);
    font-size: 0.8rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--areia);
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    transition: all 0.25s;
  }
  .chip:hover {
    border-color: var(--ouro);
  }
  .chip[aria-pressed='true'] {
    background: var(--cacau);
    border-color: var(--cacau);
    color: var(--creme);
  }
  .grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .grade > [hidden] {
    display: none;
  }
  .vazio {
    text-align: center;
    padding: 3rem 0;
  }
  @media (max-width: 900px) {
    .grade {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 520px) {
    .grade {
      gap: 1rem;
    }
    .filtros {
      justify-content: flex-start;
    }
  }
}

/* ───────── página: vela ───────── */
.pg-vela {
.migalhas {
    padding-block: 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--texto-suave);
  }
  .migalhas a {
    text-decoration: none;
  }
  .migalhas a:hover {
    color: var(--ouro-texto);
  }
  .migalhas span {
    margin-inline: 0.4rem;
  }
  .migalhas [aria-current] {
    margin: 0;
    color: var(--cacau);
  }

  .produto {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
    align-items: start;
  }
  .galeria {
    position: sticky;
    top: 6.5rem;
  }
  .galeria__principal {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--areia);
  }
  .galeria__principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .galeria__miniaturas {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }
  .miniatura {
    width: 5.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--raio);
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: 0.65;
    transition: all 0.25s;
  }
  .miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .miniatura:hover,
  .miniatura[aria-pressed='true'] {
    opacity: 1;
    border-color: var(--ouro);
  }

  .info h1 {
    margin-bottom: 0.2rem;
  }
  .preco {
    font-family: var(--f-acento);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--ouro-texto);
    margin-bottom: 1.2rem;
  }
  .resumo {
    font-size: 1.05rem;
  }

  .aromas {
    border: 0;
    padding: 0;
    margin: 2rem 0;
  }
  .aromas legend {
    font-family: var(--f-sc);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--ouro-texto);
    margin-bottom: 0.9rem;
    padding: 0;
  }
  .aromas__opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .aroma-op {
    position: relative;
    cursor: pointer;
  }
  .aroma-op input {
    position: absolute;
    opacity: 0;
  }
  .aroma-op span {
    display: block;
    padding: 0.8rem 1rem;
    border: 1px solid var(--areia);
    border-radius: var(--raio);
    transition: all 0.25s;
  }
  .aroma-op strong {
    display: block;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--cor);
  }
  .aroma-op small {
    font-size: 0.78rem;
    color: var(--texto-suave);
  }
  .aroma-op input:checked + span {
    border-color: var(--cor);
    background: var(--cor-suave);
  }
  .aroma-op input:focus-visible + span {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
  }

  .descricao {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(176 138 82 / 0.25);
  }
  .detalhes {
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0;
  }
  .detalhes div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid rgb(176 138 82 / 0.18);
    font-size: 0.9rem;
  }
  .detalhes dt {
    color: var(--texto-suave);
  }
  .detalhes dd {
    margin: 0;
    text-align: right;
    color: var(--cacau);
  }

  .cuidado {
    margin-top: 1.5rem;
    border: 1px solid rgb(176 138 82 / 0.3);
    border-radius: var(--raio);
    padding: 1rem 1.2rem;
    background: var(--branco);
  }
  .cuidado summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--cacau);
  }
  .cuidado p {
    margin: 0.8rem 0 0;
    font-size: 0.92rem;
  }

  .relacionadas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  @media (max-width: 860px) {
    .produto {
      grid-template-columns: 1fr;
    }
    .galeria {
      position: static;
    }
    .relacionadas {
      grid-template-columns: repeat(2, 1fr);
    }
    .relacionadas > :nth-child(3) {
      display: none;
    }
  }
}

/* ───────── página: aromas ───────── */
.pg-aromas {
.intro {
    text-align: center;
    padding-block: clamp(3rem, 7vw, 5rem);
  }
  .intro p {
    max-width: 32rem;
    margin-inline: auto;
  }
  .intro__atalhos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
  }
  .intro__atalhos a {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--cor);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
  }
  .intro__atalhos a:hover {
    border-bottom-color: currentColor;
  }

  .perfil {
    background: linear-gradient(to bottom, var(--creme), var(--cor-suave) 30%, var(--cor-suave) 70%, var(--creme));
    padding-block: clamp(3rem, 7vw, 5.5rem);
    scroll-margin-top: 5rem;
  }
  .perfil__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
  }
  .perfil--inv .perfil__foto {
    order: 2;
  }
  .perfil__foto img {
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 999px 999px 6px 6px;
    box-shadow: var(--sombra);
  }
  .perfil__num {
    font-family: var(--f-display);
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--cor);
    opacity: 0.8;
  }
  .perfil h2 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: var(--cor);
    margin: 0.2rem 0 1rem;
  }
  .perfil__titulo {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--cacau);
  }
  .perfil__linha {
    width: 3rem;
    height: 1px;
    background: var(--cor);
    opacity: 0.6;
    margin: 1.5rem 0;
  }
  .perfil__assinatura {
    color: var(--cor);
    font-size: 1.35rem;
    margin-bottom: 2rem;
  }
  @media (max-width: 760px) {
    .perfil__grade {
      grid-template-columns: 1fr;
    }
    .perfil--inv .perfil__foto {
      order: 0;
    }
    .perfil__foto img {
      max-width: 18rem;
    }
    .perfil__texto {
      text-align: center;
    }
    .perfil__linha {
      margin-inline: auto;
    }
  }
}

/* ───────── página: cuidados ───────── */
.pg-cuidados {
.intro {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }
  .intro__grade {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  .intro img {
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .passos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .passo {
    background: var(--creme);
    border: 1px solid rgb(176 138 82 / 0.3);
    border-radius: 6px;
    padding: 2.25rem 2rem;
    text-align: center;
  }
  .passo svg {
    width: 3rem;
    height: 3rem;
    color: var(--ouro);
    margin: 0 auto 1.2rem;
  }
  .passo h2 {
    font-family: var(--f-sc);
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--ouro-texto);
    margin-bottom: 1rem;
  }
  .passo ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.4rem;
    font-family: var(--f-display);
    font-size: 1.35rem;
    color: var(--cacau);
  }
  .passo ul span {
    font-family: var(--f-corpo);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-right: 0.5rem;
  }
  .nota {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin: 0;
  }

  .comparacao {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 8vw, 6rem);
    flex-wrap: wrap;
  }
  .comparacao figure {
    margin: 0;
    text-align: center;
    max-width: 14rem;
  }
  .comparacao figcaption {
    font-size: 0.9rem;
  }
  .comparacao strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--cacau);
  }
  .certo strong::before {
    content: '✓ ';
    color: #5f7a3a;
  }
  .errado strong::before {
    content: '✕ ';
    color: #a35a3a;
  }
  /* ilustração em CSS do pote visto de cima */
  .ilustra {
    display: grid;
    place-items: center;
    height: 10rem;
    margin-bottom: 1rem;
  }
  .pote {
    position: relative;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: repeating-conic-gradient(#fff 0 6deg, #efe7dc 6deg 12deg);
    box-shadow:
      inset 0 0 0 0.6rem #fbf7f1,
      0 10px 24px -14px rgb(47 38 32 / 0.5);
    display: grid;
    place-items: center;
  }
  .cera {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff3d9 0%, #f6e3bf 60%, #ecd3a6 100%);
  }
  .cera--cheia {
    inset: 0.6rem;
  }
  .cera--tunel {
    inset: 2.6rem;
    box-shadow: 0 0 0 1.9rem #f4efe7;
  }
  .pavio {
    position: relative;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--cacau);
    box-shadow: 0 0 14px 6px rgb(255 190 90 / 0.55);
  }

  .resultado {
    text-align: center;
    margin-top: 3.5rem;
  }
  .resultado ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--cacau);
  }

  .dicas ol {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: dica;
  }
  .dicas li {
    counter-increment: dica;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding-block: 1.2rem;
    border-bottom: 1px solid rgb(176 138 82 / 0.25);
  }
  .dicas li::before {
    content: counter(dica, decimal-leading-zero);
    font-family: var(--f-display);
    font-size: 1.6rem;
    color: var(--ouro);
    line-height: 1.2;
  }

  @media (max-width: 860px) {
    .intro__grade,
    .passos {
      grid-template-columns: 1fr;
    }
  }
}

/* ───────── página: sobre ───────── */
.pg-sobre {
.sobre {
    padding-block: clamp(3rem, 7vw, 6rem);
  }
  .sobre__grade {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 7vw, 6rem);
    align-items: center;
  }
  .sobre__foto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 999px 999px 6px 6px;
    box-shadow: var(--sombra);
  }
  .sobre__texto p {
    font-size: 1.02rem;
  }
  .divisor svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  .sobre__texto .assinatura {
    font-size: 1.6rem;
  }
  .encomendas {
    font-size: 0.92rem !important;
    color: var(--texto-suave);
  }
  .encomendas a {
    color: var(--ouro-texto);
  }
  @media (max-width: 820px) {
    .sobre__grade {
      grid-template-columns: 1fr;
    }
    .sobre__foto {
      max-width: 22rem;
      margin-inline: auto;
    }
  }
}

/* ───────── página: erro ───────── */
.pg-erro {
.nao-encontrada {
    text-align: center;
    padding-block: clamp(4rem, 12vw, 9rem);
  }
  img {
    height: 5rem;
    width: auto;
    margin: 0 auto 2rem;
  }
}

/* ───────── carregando ───────── */
.carregando {
  min-height: 70vh;
  display: grid;
  place-items: center;
}
.carregando img {
  height: 4.5rem;
  width: auto;
  animation: respirar 1.6s ease-in-out infinite;
}
@keyframes respirar {
  50% { opacity: 0.35; }
}
.rodape:empty { display: none; }
.topo:empty { min-height: 5rem; }