/* =====================================================================
   SURAYANA · ESTILOS
   Mobile first. Cores e fontes centralizadas nos tokens abaixo.
   ===================================================================== */

/* ---------- Fontes (hospedadas junto com o site) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
/* Cinzel: substituta gratuita da Trajan Pro (mesma origem, as inscrições romanas).
   Se a Surayana tiver a Trajan Pro 3 pelo Adobe Fonts, ela entra no lugar
   automaticamente (veja o LEIA-ME). */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cinzel-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* PALETA OFICIAL (Manual de Identidade Visual Técnica) */
  --borgonha: #5A0E17;      /* títulos, textos, logo, botões */
  --dourado: #D4AF37;       /* ornamentos e linhas; texto só sobre borgonha */
  --marfim: #F7EFE6;        /* fundo principal */

  /* Tons de apoio, obtidos pela mistura das três cores oficiais */
  --areia: #F4E9D4;         /* marfim + 10% de dourado: seções alternadas */
  --papel: #FBF6F1;         /* marfim clareado: rótulos e caixas */
  --placeholder: #ECDFD8;   /* marfim + 7% de borgonha: espaço de foto */
  --texto-suave: #864D51;   /* borgonha + 28% de marfim: textos secundários */
  --marfim-suave: #DBC6C1;  /* texto secundário sobre fundo borgonha */
  --linha: rgba(212, 175, 55, .55);

  /* Nomes usados no restante do CSS */
  --creme: var(--marfim);
  --bordo: var(--borgonha);
  --bordo-noite: var(--borgonha);
  --ouro: var(--dourado);
  --ouro-claro: var(--dourado);
  --ouro-texto: var(--borgonha);
  --tinta: var(--borgonha);
  --tinta-suave: var(--texto-suave);

  /* TIPOGRAFIA: Trajan Pro (institucional) com Cinzel como substituta;
     Cormorant Garamond e Jost como apoio, já que o manual não define secundária */
  --titulo: "trajan-pro-3", "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --margem: clamp(1.25rem, 5.5vw, 4.5rem);
  --largura: 84rem;
  --secao: clamp(5rem, 13vw, 10.5rem);
  --lenta: cubic-bezier(.22, .61, .36, 1);
  --grao: url("../img/grao.svg");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(7.5rem + env(safe-area-inset-top, 0px));
}
body {
  margin: 0;
  background: var(--grao), var(--creme);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
html.trava-rolagem, html.trava-rolagem body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--bordo); }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote, figure, fieldset, dl, dd { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

:focus-visible { outline: 1.5px solid var(--bordo); outline-offset: 3px; }
.velas :focus-visible { outline-color: var(--ouro-claro); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--bordo); color: var(--creme); padding: .75rem 1.25rem; border-radius: 999px;
  text-decoration: none; font-size: .85rem;
}
.pular:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); color: var(--creme); }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: max(var(--margem), env(safe-area-inset-left, 0px));
}

/* Grades do celular: uma palavra longa nunca alarga a coluna além da tela */
.hero__texto, .manifesto__grade, .colecao-macrame__grade, .encomendas__grade, .duvidas__grade,
.processo__cabecalho, .catalogo__cabecalho, .artesa, .rodape__grade, .instagram__cabecalho, .fios__cabecalho {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Tipografia ---------- */
.titulo {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(1.7rem, 8.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: .03em;
  overflow-wrap: break-word;
  color: var(--bordo);
  text-wrap: balance;
}
.titulo--menor { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.titulo__sub { display: block; margin-top: .45rem; font-family: var(--serif); font-style: italic; font-size: .5em; letter-spacing: 0; color: var(--texto-suave); }
.titulo--claro { color: var(--creme); }
.texto-grande {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.35;
  color: var(--tinta);
  text-wrap: pretty;
}
.rotulo {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  margin: 0 0 1rem;
}

/* Divisor: linhas finas douradas com ornamento central */
.divisor {
  display: flex; align-items: center; gap: .9rem;
  color: var(--ouro);
  max-width: 16rem;
}
.divisor::before, .divisor::after {
  content: ""; flex: 1; height: 1px; background: var(--linha);
}
.divisor svg { width: 1.6rem; height: auto; flex: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem;
  padding: .85rem 1.9rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: transparent;
  color: var(--bordo);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .5s var(--lenta), color .5s var(--lenta), border-color .5s var(--lenta);
}
.botao:hover { background: var(--bordo); color: var(--creme); }
.botao--primario { background: var(--bordo); color: var(--creme); }
.botao--primario:hover { background: var(--borgonha); border-color: var(--borgonha); color: var(--dourado); }
.botao--largo { width: 100%; }
.botao[aria-pressed="true"] { background: var(--areia); border-color: var(--bordo); color: var(--bordo); }

.botao-texto {
  background: none; border: 0; padding: .6rem 0;
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bordo);
  min-height: 2.75rem; padding-inline: .5rem;
}
.botao-texto:focus-visible { border-radius: 999px; outline-offset: 2px; }
.botao-texto:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---------- Seções ---------- */
.secao { position: relative; padding-block: var(--secao); isolation: isolate; }
.secao--areia { background: var(--grao), var(--areia); }
.secao--areia .foto { background-color: #E4D4CD; }

/* Sombra de folhas projetada na parede */
.sombra-folhas {
  position: absolute; inset: -12% -8% auto auto;
  width: min(62rem, 110vw); aspect-ratio: 1;
  background: url("../img/sombra-folhas.svg") center / cover no-repeat;
  opacity: .11;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
  transform-origin: 0 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: folhas 44s ease-in-out infinite alternate;
  will-change: transform;
}
.sombra-folhas--direita { inset: auto -20% -25% auto; transform: scaleX(-1); animation-name: folhas-espelho; }
@keyframes folhas {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg); }
  50%  { transform: translate3d(1.2%, .8%, 0) rotate(1.4deg) skewX(1.5deg); }
  100% { transform: translate3d(-.6%, 1.4%, 0) rotate(-.8deg) skewX(-1deg); }
}
@keyframes folhas-espelho {
  0%   { transform: scaleX(-1) translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: scaleX(-1) translate3d(1.5%, 1%, 0) rotate(1.6deg); }
}

/* ---------- Fotos e placeholders ---------- */
.foto {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
  isolation: isolate;
}
.foto::before { /* estrela discreta no centro do placeholder */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C12.5 8.4 15.6 11.5 22.5 12 15.6 12.5 12.5 15.6 12 22.5 11.5 15.6 8.4 12.5 1.5 12 8.4 11.5 11.5 8.4 12 1.5Z' fill='none' stroke='%23B08A4F' stroke-width='.6'/%3E%3C/svg%3E") center / 2.2rem no-repeat;
  opacity: .8;
}
.foto::after { /* nome do arquivo esperado */
  content: attr(data-arquivo);
  position: absolute; left: 0; right: 0; bottom: .9rem; z-index: -1;
  padding-inline: 1rem;
  text-align: center;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .08em;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.foto img, .foto picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.foto img { object-fit: cover; }
.foto img.is-ausente { visibility: hidden; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--1x1 { aspect-ratio: 1 / 1; }
.foto--arco {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}

/* ---------- Revelação ao rolar (só com JS e sem redução de movimento) ---------- */
.js [data-revelar] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--lenta), transform 1.1s var(--lenta);
}
.js [data-revelar="foto"] { transform: none; }
.js [data-revelar="foto"] img { transform: scale(1.045); transition: transform 1.8s var(--lenta); }
.js [data-revelar].is-visivel { opacity: 1; transform: none; }
.js [data-revelar].is-visivel img { transform: none; }

/* =====================================================================
   CABEÇALHO
   ===================================================================== */
.topo {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .6s var(--lenta), box-shadow .6s var(--lenta);
}
.topo.is-rolado {
  background: var(--grao), var(--creme);
  box-shadow: 0 1px 0 var(--linha);
}
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }

.marca { display: inline-flex; align-items: center; gap: 0; min-width: 0; text-decoration: none; color: var(--bordo); }
.marca__icone { width: 3rem; height: 3rem; flex: none; }
/* No topo da página o logo completo aparece no hero; o ícone entra quando a página rola */
.marca { transition: opacity .5s var(--lenta); }
.topo:not(.is-rolado):not(.tem-submenu) .marca--rolagem { opacity: 0; pointer-events: none; }

.topo__nav { display: none; }
.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav__link, .nav__gatilho, .botao-lista, .botao-menu {
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta);
}
.nav__link, .nav__gatilho {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .5rem 0; border: 0;
  background: linear-gradient(var(--bordo), var(--bordo)) left calc(100% - .55rem) / 0 1px no-repeat;
  transition: background-size .6s var(--lenta), color .4s;
}
.nav__link:hover, .nav__gatilho:hover, .nav__gatilho[aria-expanded="true"] { color: var(--bordo); background-size: 100% 1px; }
.nav__link[aria-current] { color: var(--bordo); }
.nav__gatilho::after {
  content: ""; width: .34rem; height: .34rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .45s var(--lenta);
}
.nav__gatilho[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.nav__item--relativo { position: relative; }

/* Submenus do computador */
.submenu { background: var(--grao), var(--creme); }
.submenu--simples {
  position: absolute; top: calc(100% + .9rem); left: -1.5rem; min-width: 15rem;
  padding: 1rem 1.5rem 1.1rem; border: 1px solid var(--linha);
  box-shadow: 0 24px 40px -30px rgba(90, 14, 23, .45);
}
.submenu--simples li a {
  display: block; padding: .5rem 0; text-decoration: none;
  font-family: var(--titulo); font-size: 1rem; color: var(--tinta);
}
.submenu--simples li a:hover { color: var(--bordo); }
.submenu--mega {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  box-shadow: 0 30px 50px -40px rgba(90, 14, 23, .5);
}
.submenu__grade { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
.mega__titulo { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--linha); }
.mega__lista li a {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .4rem 0; text-decoration: none;
  font-family: var(--titulo); font-size: 1rem; line-height: 1.25; color: var(--tinta);
}
.mega__lista li a:hover { color: var(--bordo); }
.mega__lista .amostra { align-self: center; }
.mega__detalhe { width: 100%; font-family: var(--sans); font-size: .78rem; color: var(--tinta-suave); margin-top: -.1rem; }
.mega__lista--velas li a { padding-left: 1.45rem; position: relative; }
.mega__lista--velas li a::before { content: ""; position: absolute; left: .15rem; top: .95rem; width: .4rem; height: .4rem; border: 1px solid var(--ouro); transform: rotate(45deg); }
.mega__ver { display: inline-block; margin-top: 1.1rem; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bordo); text-underline-offset: .35em; }
.mega__destaque { display: grid; align-content: start; gap: 1.75rem; padding-left: 2.5rem; border-left: 1px solid var(--linha); }
.mega__destaque a { font-family: var(--titulo); font-size: 1.35rem; line-height: 1.2; letter-spacing: .02em; color: var(--bordo); text-decoration: none; }
.mega__destaque a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.mega__destaque p { margin: .4rem 0 0; font-size: .9rem; color: var(--tinta-suave); }
.topo.tem-submenu { background: var(--grao), var(--creme); box-shadow: 0 1px 0 var(--linha); backdrop-filter: none; }

.topo__acoes { display: flex; align-items: center; gap: .35rem; }
.botao-lista, .botao-menu {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .6rem .5rem; min-height: 2.75rem;
}
.botao-lista svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--bordo); }
.topo__acoes { flex: none; }
.contador { flex: none; }
@media (max-width: 24em) {
  .topo__barra { gap: .5rem; }
  .marca { gap: .5rem; }
  .marca__icone { width: 2.6rem; height: 2.6rem; }
  .topo__acoes { gap: 0; }
  .botao-lista, .botao-menu { padding-inline: .4rem; }
  .botao-menu { padding-right: 0; }
}
.botao-lista__rotulo { display: none; }
.contador {
  min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--linha);
  font-size: .68rem; letter-spacing: 0; color: var(--bordo);
}
.contador.tem-itens { background: var(--bordo); border-color: var(--bordo); color: var(--creme); }
.contador.pulsa { animation: pulsa .7s var(--lenta); }
@keyframes pulsa { 40% { transform: scale(1.25); } }

@media (min-width: 60em) {
  .topo__barra { min-height: 5rem; }
  .topo__nav { display: block; }
  .botao-menu { display: none; }
  .botao-lista__rotulo { display: inline; }
  .marca__icone { width: 3.3rem; height: 3.3rem; }
}

/* Guia de seção (celular e tablet) */
.guia {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(247, 239, 230, .97);
  border-bottom: 1px solid var(--linha);
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .45s var(--lenta), transform .45s var(--lenta), visibility 0s .45s;
}
.guia[data-visivel="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--lenta), transform .45s var(--lenta); }
.guia__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.9rem; }
.guia__atual {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem;
  padding: 0; border: 0; background: none; text-align: left;
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--bordo);
}
.guia__atual::before { content: ""; flex: none; width: .45rem; height: .45rem; background: var(--bordo); transform: rotate(45deg); }
.guia__proxima {
  display: inline-flex; align-items: baseline; gap: .45rem; min-height: 2.75rem; align-items: center;
  text-decoration: none; text-align: right;
  font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
}
.guia__proxima strong { font-family: var(--titulo); font-size: .9rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tinta); }
.guia__proxima:hover strong { color: var(--bordo); }
.guia__progresso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--bordo); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* Trilha lateral (computador) */
.trilha { display: none; }
@media (min-width: 80em) {
  :root { --largura: 72rem; --trilha: 16rem; }
  html { scroll-padding-top: calc(5.5rem + env(safe-area-inset-top, 0px)); }
  .container {
    max-width: none;
    padding-left: max(var(--trilha), calc((100% - var(--largura)) / 2));
    padding-right: max(var(--margem), calc((100% - var(--largura)) / 2));
  }
  .topo__barra.container { padding-inline: 3rem; }
  .guia { display: none; }

  .trilha {
    display: block; position: fixed; z-index: 20;
    left: 3rem; top: 50%; transform: translateY(-42%);
    width: 11rem;
    opacity: 0; transition: opacity .8s var(--lenta);
  }
  .trilha.is-pronta { opacity: 1; }
  .trilha ol { position: relative; display: grid; gap: clamp(.7rem, 2.3vh, 1.3rem); padding-left: 1.5rem; }
  .trilha ol::before { content: ""; position: absolute; left: .3rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--linha); transition: background-color .6s; }
  .trilha__preenchido { position: absolute; left: .3rem; top: .6rem; width: 1px; height: var(--preenchido, 0px); background: var(--bordo); transition: background-color .6s; }
  .trilha a {
    position: relative; display: block; text-decoration: none;
    font-family: var(--titulo); font-size: .9rem; line-height: 1.2; color: var(--tinta-suave);
    transition: color .5s var(--lenta);
  }
  .trilha a:hover { color: var(--bordo); }
  .trilha__marca {
    position: absolute; left: -1.5rem; top: .36rem; width: .6rem; height: .6rem;
    display: grid; place-items: center;
  }
  .trilha__marca::before {
    content: ""; width: .38rem; height: .38rem; transform: rotate(45deg);
    border: 1px solid var(--ouro); background: var(--creme);
    transition: background-color .5s, border-color .5s, width .5s var(--lenta), height .5s var(--lenta);
  }
  .trilha .is-passado .trilha__marca::before { background: var(--ouro); }
  .trilha .is-atual a { color: var(--bordo); font-weight: 500; }
  .trilha .is-atual .trilha__marca::before { width: .55rem; height: .55rem; background: var(--bordo); border-color: var(--bordo); }
  .trilha .is-proximo a { color: var(--tinta); }

  /* sobre o fundo bordô das velas */
  .trilha--escura a { color: var(--marfim-suave); }
  .trilha--escura .is-atual a, .trilha--escura a:hover { color: var(--ouro-claro); }
  .trilha--escura .is-proximo a { color: var(--marfim); }
  .trilha--escura ol::before { background: rgba(212, 175, 55, .35); }
  .trilha--escura .trilha__preenchido { background: var(--ouro-claro); }
  .trilha--escura .trilha__marca::before { background: var(--bordo-noite); border-color: var(--ouro-claro); }
  .trilha--escura .is-passado .trilha__marca::before, .trilha--escura .is-atual .trilha__marca::before { background: var(--ouro-claro); border-color: var(--ouro-claro); }

    .rodape__legal::before { left: var(--trilha); }
}

/* Menu do celular */
.menu {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: calc(env(safe-area-inset-top, 0px) + .5rem) var(--margem) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  border: 0;
  background: var(--grao), var(--creme);
  color: var(--tinta);
  flex-direction: column;
}
.menu[open] { display: flex; animation: aparece .45s var(--lenta); }
.menu::backdrop { background: transparent; }
.menu__topo { display: flex; justify-content: space-between; align-items: center; min-height: 4.25rem; }
.menu__icone { width: 2.6rem; height: 2.6rem; }
.menu { overflow-y: auto; }
.menu__nav { flex: 1; padding: 1.5rem 0 2.5rem; }
.menu__grupo summary, .menu__link {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 3.6rem; padding: .35rem 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--titulo); font-size: clamp(1.6rem, 7.4vw, 2.3rem); line-height: 1.15;
  letter-spacing: .02em; text-decoration: none; color: var(--bordo);
  list-style: none; cursor: pointer;
}
.menu__grupo summary::-webkit-details-marker { display: none; }
.menu__grupo summary::after { content: "+"; font-family: var(--sans); font-size: 1.4rem; font-weight: 300; transition: transform .45s var(--lenta); }
.menu__grupo[open] summary::after { transform: rotate(45deg); }
.menu__sub { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--linha); }
.menu__sub p { margin: .9rem 0 .4rem; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); }
.menu__sub p:first-child { margin-top: 0; }
.menu__sub li a, .menu__sub > a {
  display: flex; align-items: center; gap: .6rem; min-height: 2.6rem;
  font-family: var(--titulo); font-size: 1.1rem; color: var(--tinta); text-decoration: none;
}
.menu__sub > a { font-size: .74rem; font-family: var(--sans); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bordo); }
.menu a[aria-current] { color: var(--bordo); }
.menu a[aria-current]::after { content: ""; width: .4rem; height: .4rem; background: var(--bordo); transform: rotate(45deg); margin-left: .75rem; }
.menu__rodape { display: flex; align-items: center; gap: .9rem; color: var(--ouro); }
.menu__rodape svg { width: 1.5rem; }
.menu__rodape p { margin: 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(5rem, 10vw, 8rem); margin-top: calc(-4.25rem - env(safe-area-inset-top, 0px)); padding-top: calc(4.25rem + env(safe-area-inset-top, 0px) + clamp(1.5rem, 5vw, 3.5rem)); }
.hero .sombra-folhas { inset: -6% auto auto -18%; width: min(58rem, 130vw); opacity: .13; }

.hero__marca { grid-column: 1 / -1; width: clamp(7rem, 24vw, 9.5rem); height: auto; margin-bottom: .25rem; }
.js .hero__marca { opacity: 0; animation: aparece 1.2s var(--lenta) forwards; }
.hero__texto { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero__titulo {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(2rem, 10.3vw, 6.6rem);
  overflow-wrap: break-word;
  line-height: .98;
  letter-spacing: .02em;
  color: var(--bordo);
}
.hero__linha { display: block; }
.hero__linha--2 { padding-left: .5em; }
.hero__linha--3 { padding-left: 1em; }
.hero__lado p { max-width: 26rem; margin-bottom: 1.5rem; color: var(--tinta); }

.hero__imagem { position: relative; }
.selo {
  position: absolute;
  width: clamp(6.8rem, 26vw, 10.5rem);
  left: calc(var(--margem) - .9rem);
  bottom: calc(clamp(6.8rem, 26vw, 10.5rem) * -.42);
}
.selo__fundo { fill: var(--creme); }
.selo__anel { fill: none; stroke: var(--linha); stroke-width: 1; }
.selo__texto { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 3.2px; fill: var(--bordo); }
.selo__ramo { color: var(--ouro); }

/* Carregamento do hero: a única entrada orquestrada da página */
.js .hero__linha, .js .hero__lado { opacity: 0; transform: translateY(18px); animation: entra 1.3s var(--lenta) forwards; }
.js .hero__linha--2 { animation-delay: .12s; }
.js .hero__linha--3 { animation-delay: .24s; }
.js .hero__lado { animation-delay: .45s; }
.js .hero__imagem .foto { opacity: 0; animation: entra-foto 1.8s var(--lenta) .2s forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }
@keyframes entra-foto { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

@media (min-width: 48em) {
  .foto--arco { aspect-ratio: 16 / 9; border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
  .hero__texto { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .hero__titulo { grid-column: 1 / span 8; font-size: clamp(3.2rem, 6.5vw, 6.2rem); }
  .hero__linha--2 { padding-left: .6em; }
  .hero__linha--3 { padding-left: 1.2em; }
  .hero__lado { grid-column: 9 / span 4; padding-bottom: .6rem; padding-left: 1rem; }
  .selo { left: calc(var(--margem) + 2rem); }
}

/* =====================================================================
   MANIFESTO
   ===================================================================== */
.manifesto { overflow: hidden; }
.manifesto__grade { display: grid; gap: 2.25rem; }
.manifesto__texto { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); }
.proposito .rotulo { margin-bottom: .6rem; }
.proposito__lema {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  line-height: 1.3;
  color: var(--borgonha);
  max-width: 30ch;
  margin-bottom: .75rem;
  text-wrap: balance;
}
.proposito p:not(.proposito__lema) { max-width: 40rem; color: var(--texto-suave); margin: 0; }
.manifesto__assinatura p {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--bordo); margin: 1rem 0 0;
}
@media (min-width: 60em) {
  .manifesto__grade { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .manifesto__grade .titulo { grid-column: 1 / span 4; position: sticky; top: 7.5rem; align-self: start; }
  .manifesto__texto { grid-column: 6 / span 7; }
  .manifesto__assinatura { grid-column: 6 / span 6; }
}

/* =====================================================================
   COLEÇÃO MACRAMÊ
   ===================================================================== */
.colecao-macrame__grade { display: grid; gap: 2.5rem; }
.colecao-macrame__texto .titulo { margin-bottom: 1.5rem; }
.colecao-macrame__texto p:not(.texto-grande) { max-width: 34rem; color: var(--tinta-suave); margin-bottom: 1.25rem; }
.colecao-macrame__texto strong { font-weight: 500; color: var(--borgonha); }
.colecao-macrame__texto .colecao-macrame__fecho { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--borgonha); margin: 1.75rem 0 2rem; }
.colecao-macrame__detalhe { width: 62%; justify-self: end; margin-top: -1rem; }

@media (min-width: 60em) {
  .colecao-macrame__grade { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: 0; align-items: start; }
  .colecao-macrame__principal { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .colecao-macrame__texto { grid-column: 8 / span 5; grid-row: 1; padding-top: 3rem; }
  .colecao-macrame__detalhe { grid-column: 8 / span 3; grid-row: 2; width: 100%; justify-self: start; margin-top: 3.5rem; }
}

/* =====================================================================
   LUZ DOS CHAKRAS
   ===================================================================== */
.velas {
  background: var(--grao), var(--bordo-noite);
  color: var(--creme);
  --raio-a: var(--ouro-claro);
}

.velas__cabecalho { text-align: center; max-width: 48rem; margin: 0 auto clamp(3.5rem, 8vw, 6rem); }
.velas__lua { width: 2.4rem; height: 2.4rem; margin: 0 auto 1.25rem; color: var(--ouro-claro); }
.velas__sub { margin: 1rem 0 1.75rem; font-size: .78rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ouro-claro); }
.velas__intro { max-width: 38rem; margin-inline: auto; font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.45; color: var(--marfim); }
.velas__lema { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.45rem); color: var(--ouro-claro); margin: 1.5rem 0 2.25rem; }
.velas__ficha { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; line-height: 1.5; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--marfim-suave); }
.velas__ficha li { display: flex; align-items: center; justify-content: center; }
@media (min-width: 48em) {
  .velas__ficha { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 0; }
}
@media (min-width: 48em) { .velas__ficha li + li::before {
  content: ""; width: .38rem; height: .38rem; margin-inline: 1rem;
  border: 1px solid var(--ouro-claro); transform: rotate(45deg);
} }

.rituais { display: grid; gap: clamp(3.5rem, 8vw, 5.5rem); }
.ritual { display: grid; gap: 0; }
.ritual .foto { background-color: #672028; }
.ritual .foto::after { color: var(--marfim-suave); }

/* Rótulo inspirado no rótulo do pote */
.rotulo-vela {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3.25rem);
  isolation: isolate;
}
.rotulo-vela::before {
  content: ""; position: absolute; inset: .5rem; z-index: -1;
  border: 1px solid rgba(90, 14, 23, .35);
}
.rotulo-vela__estrela { position: absolute; width: .6rem; height: .6rem; color: var(--ouro); }
.rotulo-vela__estrela--1 { top: .9rem; right: .9rem; }
.rotulo-vela__estrela--2 { bottom: .9rem; left: .9rem; }
.rotulo-vela h3 {
  font-family: var(--titulo); font-weight: 400; font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1;
  letter-spacing: .03em; color: var(--bordo);
}
.rotulo-vela__chakra { margin: .7rem 0 0; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-texto); }
.rotulo-vela .divisor { margin: 1.2rem 0; max-width: 13rem; }
.rotulo-vela .divisor svg { width: .7rem; }
.rotulo-vela__aroma { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--tinta); margin-bottom: .75rem; }
.rotulo-vela__aroma span { color: var(--ouro-texto); }
.rotulo-vela__tipo { margin: 0 0 .5rem; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-suave); }
.rotulo-vela__intencao { margin: 0 0 1.75rem; font-family: var(--titulo); font-size: .95rem; letter-spacing: .03em; line-height: 1.6; color: var(--borgonha); }
.rotulo-vela__intencao span { display: block; margin-bottom: .2rem; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-suave); }
.rotulo-vela blockquote {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.4rem); line-height: 1.45;
  color: var(--bordo); margin: 1.25rem 0 1.5rem; max-width: 42ch; text-wrap: pretty;
}
.rotulo-vela__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.rotulo-vela__preco { font-size: 1.05rem; margin-right: auto; color: var(--tinta); }
.rotulo-vela__status { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bordo); }

@media (min-width: 48em) {
  .ritual { grid-template-columns: 5fr 7fr; align-items: stretch; }
  .ritual .foto { aspect-ratio: auto; min-height: 100%; }
  .ritual:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .ritual:nth-child(even) .foto { order: 2; }
  .rotulo-vela { display: flex; flex-direction: column; justify-content: center; }
}

/* =====================================================================
   CATÁLOGO
   ===================================================================== */
.catalogo__cabecalho { display: grid; gap: 1.25rem; margin-bottom: 2.25rem; }
.catalogo__cabecalho p { max-width: 34rem; color: var(--tinta-suave); margin: 0; }
.catalogo__texto { display: grid; gap: .9rem; }
.catalogo__texto p:first-child { color: var(--borgonha); }
@media (min-width: 60em) {
  .catalogo__cabecalho { grid-template-columns: 1fr 1fr; align-items: end; }
}

.filtro { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filtro button {
  min-height: 2.75rem; padding: .5rem 1.25rem;
  border: 1px solid var(--linha); border-radius: 999px; background: transparent;
  font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta);
  transition: background-color .4s var(--lenta), color .4s var(--lenta), border-color .4s var(--lenta);
}
.filtro button:hover { border-color: var(--bordo); color: var(--bordo); }
.filtro button[aria-pressed="true"] { background: var(--bordo); border-color: var(--bordo); color: var(--creme); }

.grade-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
@media (min-width: 48em) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 1.5rem; } }

.card { position: relative; }
.card[hidden] { display: none; }
.card__link { display: block; text-decoration: none; color: inherit; }
.card .foto img { transition: transform 1.4s var(--lenta); }
.card__link:hover .foto img, .card__link:focus-visible .foto img { transform: scale(1.035); }
.card__info { padding-top: 1rem; }
.card__linha { font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-texto); margin: 0 0 .35rem; }
.card__nome { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.02rem, 3.3vw, 1.3rem); line-height: 1.2; letter-spacing: .01em; color: var(--tinta); margin: 0 0 .35rem; }
.card__link:hover .card__nome { color: var(--bordo); }
.card__variacao { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--tinta-suave); margin: 0 0 .3rem; }
.card__preco { font-size: .95rem; margin: 0; }
.preco__apartir { font-size: .78em; letter-spacing: .02em; color: var(--tinta-suave); font-weight: 400; }
.card__status {
  position: absolute; left: .6rem; top: .6rem; z-index: 2;
  padding: .3rem .7rem; border-radius: 999px; background: var(--creme);
  font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bordo);
}

.amostra { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid rgba(90, 14, 23, .25); flex: none; }
.amostra--mais {
  border: 1px dashed var(--tinta-suave); background: transparent;
  display: inline-grid; place-items: center; position: relative;
}
.amostra--mais::before, .amostra--mais::after { content: ""; position: absolute; background: var(--tinta-suave); }
.amostra--mais::before { width: 50%; height: 1px; }
.amostra--mais::after { width: 1px; height: 50%; }
.card__cores { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .1rem 0 .45rem; }
.card__cores .amostra { width: .75rem; height: .75rem; }
.card__cores .amostra--atual { box-shadow: 0 0 0 1.5px var(--creme), 0 0 0 2.5px var(--tinta-suave); }
.card__meta { margin: .25rem 0 0; font-size: .74rem; letter-spacing: .04em; color: var(--tinta-suave); }

/* Estrela da lista de desejos */
.estrela {
  position: absolute; top: .45rem; right: .45rem; z-index: 2;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(247, 239, 230, .88);
  color: var(--bordo);
  transition: background-color .4s var(--lenta), transform .4s var(--lenta);
}
.estrela svg { width: 1.1rem; height: 1.1rem; transition: transform .6s var(--lenta); }
.estrela:hover { background: var(--creme); }
.estrela[aria-pressed="true"] { --preenche: var(--bordo); }
.estrela[aria-pressed="true"] svg { transform: rotate(45deg); }
.estrela--rotulo {
  position: static; width: auto; height: auto; min-height: 2.75rem;
  gap: .5rem; display: inline-flex; padding: .4rem .2rem; background: none; border-radius: 0;
  font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.estrela--rotulo:hover { background: none; text-decoration: underline; text-underline-offset: .3em; }

/* =====================================================================
   PROCESSO
   ===================================================================== */
.processo__cabecalho { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.processo__cabecalho .texto-grande { max-width: 34rem; margin: 0; }
@media (min-width: 60em) {
  .processo__cabecalho { grid-template-columns: 5fr 7fr; align-items: end; column-gap: 1.5rem; }
}

.etapas { display: grid; gap: 2.5rem; }
.etapa { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
.etapa .foto { grid-row: 1 / span 3; }
.etapa p { margin: 0; font-size: .98rem; }
.etapa__numero { display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--ouro-texto); margin-bottom: .2rem; }
.etapa h3 { font-family: var(--titulo); font-size: clamp(1.2rem, 4.6vw, 1.55rem); font-weight: 400; letter-spacing: .03em; color: var(--bordo); margin-bottom: .6rem; }
.etapa p { color: var(--tinta-suave); max-width: 30rem; }
@media (min-width: 48em) {
  .etapas { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .etapa { display: block; }
  .etapa .foto { margin-bottom: 1.4rem; }
  .etapa p { font-size: 1.0625rem; }
  .etapa:nth-child(2) { margin-top: 4rem; }
  .etapa:nth-child(3) { margin-top: 8rem; }
}

.artesa { display: grid; gap: 2rem; margin-top: clamp(4rem, 10vw, 8rem); }
.artesa .foto { max-width: 26rem; }
.artesa__texto p { font-family: var(--serif); font-size: clamp(1.25rem, 2.8vw, 1.6rem); line-height: 1.45; max-width: 34ch; }
.artesa__texto .titulo { margin-bottom: 1.25rem; }
@media (min-width: 60em) {
  .artesa { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .artesa .foto { grid-column: 2 / span 4; max-width: none; }
  .artesa__texto { grid-column: 7 / span 5; }
}

/* =====================================================================
   ENCOMENDAS
   ===================================================================== */
.encomendas { overflow: hidden; }
.encomendas .sombra-folhas { inset: auto -25% -30% auto; opacity: .09; }
.encomendas__grade { display: grid; gap: 3rem; }
.encomendas__texto .titulo { margin-bottom: 1.5rem; }
.encomendas__texto p:not(.texto-grande) { color: var(--tinta-suave); max-width: 34rem; }
.cores-fio { margin: 2.25rem 0 2.5rem; }
.cores-fio ul { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; }
.cores-fio li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.cores-fio .amostra { width: 1.6rem; height: 1.6rem; }
@media (min-width: 60em) {
  .encomendas__grade { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
  .encomendas__texto { grid-column: 1 / span 6; }
  .encomendas__foto { grid-column: 8 / span 5; }
}

/* =====================================================================
   DÚVIDAS
   ===================================================================== */
.duvidas__grade { display: grid; gap: 2.5rem; }
.duvidas__cabecalho p { color: var(--tinta-suave); margin-top: 1.25rem; }
@media (min-width: 60em) {
  .duvidas__grade { grid-template-columns: 4fr 1fr 7fr; }
  .perguntas { grid-column: 3; }
}
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:last-child { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 0;
  font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 500; line-height: 1.3; color: var(--tinta);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::before {
  content: ""; flex: none; width: .75rem; height: .75rem; margin-top: .45em;
  background: var(--ouro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.5 8 16 11.5 24 12 16 12.5 12.5 16 12 24 11.5 16 8 12.5 0 12 8 11.5 11.5 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.5 8 16 11.5 24 12 16 12.5 12.5 16 12 24 11.5 16 8 12.5 0 12 8 11.5 11.5 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s var(--lenta);
}
.perguntas details[open] summary::before { transform: rotate(45deg); }
.perguntas summary:hover { color: var(--bordo); }
.perguntas details > div { padding: 0 0 1.5rem 1.75rem; color: var(--tinta-suave); max-width: 40rem; }
.perguntas details > div ul { display: grid; gap: .6rem; }
.perguntas details > div li { padding-left: 1rem; position: relative; }
.perguntas details > div li::before { content: ""; position: absolute; left: 0; top: .72em; width: .3rem; height: .3rem; border: 1px solid var(--ouro); transform: rotate(45deg); }

/* =====================================================================
   INSTAGRAM
   ===================================================================== */
.instagram { padding-bottom: 0; }
.instagram__cabecalho { display: grid; gap: 1rem; margin-bottom: 2.5rem; justify-items: start; }
.instagram__cabecalho .titulo { text-transform: none; letter-spacing: .02em; }
.instagram__cabecalho .titulo a { text-decoration: none; }
.instagram__cabecalho p { color: var(--tinta-suave); margin: 0 0 .5rem; }
@media (min-width: 60em) {
  .instagram__cabecalho { grid-template-columns: 1fr auto; align-items: end; }
  .instagram__cabecalho p { grid-column: 1; }
  .instagram__cabecalho .botao { grid-column: 2; grid-row: 1 / span 2; }
}
.instagram__faixa {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
  gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--margem); scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.instagram__faixa::-webkit-scrollbar { display: none; }
.instagram__faixa li { scroll-snap-align: start; }
.instagram__faixa a { display: block; }
.instagram__faixa .foto img { transition: transform 1.4s var(--lenta), opacity .6s; }
.instagram__faixa a:hover img { transform: scale(1.04); }
@media (min-width: 48em) {
  .instagram__faixa { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; padding-inline: 0; }
}

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.rodape {
  background: var(--grao), var(--areia);
  padding: clamp(4.5rem, 10vw, 7rem) 0 calc(2rem + env(safe-area-inset-bottom, 0px));
  margin-top: clamp(4.5rem, 10vw, 7rem);
}
.rodape__grade { display: grid; gap: 3.5rem; }
.rodape__marca { display: grid; justify-items: center; text-align: center; }
.rodape__logo { width: clamp(10rem, 40vw, 13rem); height: auto; }
.rodape__frase { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--bordo); margin: 1rem 0 0; }
.rodape__colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rodape__colunas li { margin-bottom: .55rem; font-size: .95rem; }
.rodape__colunas a { text-decoration: none; }
.rodape__colunas a:hover { text-decoration: underline; }
.rodape__legal { margin-top: 4rem; padding-top: 1.5rem; font-size: .78rem; color: var(--tinta-suave); position: relative; }
.rodape__legal::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); height: 1px; background: var(--linha); }
@media (min-width: 60em) {
  .rodape__grade { grid-template-columns: 5fr 1fr 6fr; align-items: center; }
  .rodape__marca { justify-items: start; text-align: left; }
  .rodape__colunas { grid-column: 3; }
}

/* =====================================================================
   PAINEL DO PRODUTO
   ===================================================================== */
.painel, .lista {
  padding: 0; border: 0; color: var(--tinta);
  max-width: none; max-height: none;
  background: transparent;
}
.painel::backdrop, .lista::backdrop { background: rgba(90, 14, 23, .38); }
.painel[open]::backdrop, .lista[open]::backdrop { animation: aparece .5s var(--lenta); }

.painel { width: 100%; height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.painel__caixa {
  position: relative;
  min-height: 100%;
  background: var(--grao), var(--creme);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.painel[open] .painel__caixa { animation: sobe .6s var(--lenta); }
.painel.is-fechando .painel__caixa, .lista.is-fechando .lista__caixa { animation: desce .3s var(--lenta) forwards; }
.painel.is-fechando::backdrop, .lista.is-fechando::backdrop { opacity: 0; transition: opacity .3s; }
.painel.is-fechando .painel__fechar { opacity: 0; }
@keyframes sobe { from { transform: translateY(4%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes desce { to { transform: translateY(3%); opacity: 0; } }

.painel__fechar {
  position: fixed; z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + .75rem); right: .75rem;
  background: rgba(247, 239, 230, .92); padding: .5rem 1.1rem; border-radius: 999px;
}
.painel__galeria { position: relative; }
.galeria__trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__trilho .foto { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 5; }
.galeria__pontos { display: flex; justify-content: center; gap: .15rem; padding: .6rem 0 0; }
.galeria__pontos button {
  width: 2.25rem; height: 2.25rem; border: 0; background: none; display: grid; place-items: center; padding: 0;
}
.galeria__pontos button::before {
  content: ""; width: .45rem; height: .45rem; border: 1px solid var(--ouro); transform: rotate(45deg);
  transition: background-color .4s;
}
.galeria__pontos button[aria-current="true"]::before { background: var(--ouro); }

.painel__info { padding: 1.5rem var(--margem) 0; }
.painel__linha { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: .6rem; }
.painel__titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.7rem, 5.4vw, 2.4rem); line-height: 1.05; letter-spacing: .03em; color: var(--bordo); margin-bottom: .5rem; }
.painel__chakra { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-texto); }
.painel__chakra:empty, .painel__frase:empty, .painel__nota:empty { display: none; }
.painel__preco { font-size: 1.15rem; margin: .75rem 0 1.25rem; }
.painel__descricao p { color: var(--tinta-suave); }
.painel__frase { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--bordo); margin: 1.25rem 0 1.5rem; padding-left: 1.25rem; border-left: 1px solid var(--ouro); }

.variacoes { margin: 1.5rem 0; }
.variacoes legend { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: .75rem; padding: 0; }
.variacoes__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao label {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem;
  padding: .45rem 1.1rem .45rem .8rem; border: 1px solid var(--linha); border-radius: 999px;
  font-size: .92rem; cursor: pointer; transition: border-color .4s, background-color .4s;
}
.opcao input:checked + label { border-color: var(--bordo); background: var(--papel); box-shadow: inset 0 0 0 1px var(--bordo); }
.opcao input:focus-visible + label { outline: 1.5px solid var(--bordo); outline-offset: 3px; }

.ficha { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; font-size: .93rem; margin-bottom: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.ficha dt { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-texto); padding-top: .2rem; }
.ficha dd { color: var(--tinta); }

.painel__acoes { display: grid; gap: .6rem; margin-bottom: 1.75rem; }
.cuidados { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cuidados summary { cursor: pointer; padding: 1.1rem 0; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--bordo); list-style: none; display: flex; justify-content: space-between; }
.cuidados summary::-webkit-details-marker { display: none; }
.cuidados summary::after { content: "+"; font-size: 1.1rem; line-height: 1; letter-spacing: 0; transition: transform .5s var(--lenta); }
.cuidados[open] summary::after { transform: rotate(45deg); }
.cuidados ul { display: grid; gap: .6rem; padding-bottom: 1.25rem; font-size: .93rem; color: var(--tinta-suave); }
.cuidados li { padding-left: 1rem; position: relative; }
.cuidados li::before { content: ""; position: absolute; left: 0; top: .72em; width: .3rem; height: .3rem; border: 1px solid var(--ouro); transform: rotate(45deg); }
.painel__nota {
  margin: 0 0 1.75rem; padding: 1.25rem 1.25rem 1.3rem;
  border: 1px solid var(--linha); background: var(--papel);
  font-size: .92rem; line-height: 1.6; color: var(--tinta-suave);
}
.personalize__titulo { display: block; margin-bottom: .45rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--bordo); }
.painel__nota a { display: inline-block; margin-top: .6rem; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bordo); }
.variacoes__dica { margin: .75rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--bordo); }
.opcao--personalizada label { border-style: dashed; }

/* Fios (seção Personalizar) */
.fios { margin-top: clamp(4rem, 9vw, 7rem); }
.fios__cabecalho { display: grid; gap: 1rem; margin-bottom: 2.25rem; }
.fios__cabecalho p { max-width: 36rem; color: var(--tinta-suave); margin: 0; }
.fios__lista { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.fios__lista li { display: grid; align-content: start; gap: .35rem; padding: 1.35rem 0; border-bottom: 1px solid var(--linha); }
.fios__lista h4 { margin: 0; font-family: var(--titulo); font-weight: 400; font-size: clamp(1.1rem, 2.8vw, 1.3rem); line-height: 1.2; color: var(--tinta); }
.fios__lista p { margin: 0; color: var(--tinta-suave); max-width: 40rem; }
@media (min-width: 48em) {
  .fios__lista { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
@media (min-width: 60em) {
  .fios__cabecalho { grid-template-columns: 5fr 7fr; align-items: end; column-gap: 1.5rem; }
}

@media (min-width: 60em) {
  .painel { width: min(74rem, calc(100% - 4rem)); height: min(52rem, calc(100% - 4rem)); margin: auto; overflow: hidden; }
  .painel__caixa { height: 100%; min-height: 0; display: grid; grid-template-columns: 1.05fr 1fr; padding-bottom: 0; }
  .painel__fechar { position: absolute; top: 1rem; right: 1rem; }
  .painel__galeria { height: 100%; min-height: 0; }
  .galeria__trilho { height: 100%; }
  .galeria__trilho .foto { aspect-ratio: auto; height: 100%; }
  .galeria__pontos { position: absolute; left: 0; right: 0; bottom: .75rem; }
  .galeria__pontos button::before { background: rgba(247, 239, 230, .7); }
  .painel__info { overflow-y: auto; overscroll-behavior: contain; padding: 3.5rem 3rem 3rem; }
}

/* =====================================================================
   LISTA DE DESEJOS
   ===================================================================== */
.lista { width: 100%; height: 100%; margin: 0 0 0 auto; }
.lista__caixa {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--grao), var(--creme);
  padding: calc(env(safe-area-inset-top, 0px) + .5rem) var(--margem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.lista[open] .lista__caixa { animation: desliza .55s var(--lenta); }
@keyframes desliza { from { transform: translateX(6%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 40em) {
  .lista { width: min(30rem, 100%); }
  .lista__caixa { padding-inline: 2.25rem; }
}
.lista__topo { display: flex; justify-content: space-between; align-items: center; min-height: 4.25rem; border-bottom: 1px solid var(--linha); }
.lista__titulo { font-family: var(--titulo); font-size: 1.6rem; letter-spacing: .03em; color: var(--bordo); }
.lista__itens { flex: 1; overflow-y: auto; padding: .5rem 0; }
.item-lista { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(212, 175, 55, .3); }
.item-lista .foto { aspect-ratio: 4 / 5; }
.item-lista .foto::after, .item-lista .foto::before { display: none; }
.item-lista__nome { font-family: var(--titulo); font-size: 1.05rem; font-weight: 400; line-height: 1.15; margin: 0 0 .2rem; }
.item-lista__var { font-size: .85rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.item-lista__acoes { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.quantidade { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; }
.quantidade button { width: 2.5rem; height: 2.5rem; border: 0; background: none; font-size: 1.1rem; color: var(--bordo); }
.quantidade output { min-width: 1.5rem; text-align: center; font-size: .92rem; }
.item-lista .botao-texto { font-size: .68rem; color: var(--tinta-suave); }
.lista__vazia { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.25rem; padding: 2rem 0; }
.lista__vazia svg { width: 2rem; height: 2rem; color: var(--ouro); }
.lista__vazia p { max-width: 20rem; color: var(--tinta-suave); margin: 0; }
.lista__rodape { padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.lista__total { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: 1rem; }
.lista__total:empty { display: none; }
.lista__nota { font-size: .82rem; color: var(--tinta-suave); text-align: center; margin: .9rem 0 0; }
[hidden] { display: none !important; }

/* Aviso */
.aviso {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--bordo); color: var(--creme);
  padding: .8rem 1.4rem; border-radius: 999px;
  font-size: .85rem; letter-spacing: .02em; white-space: nowrap;
  transition: opacity .45s var(--lenta), transform .45s var(--lenta);
}
.aviso.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* Hero com a trilha lateral: o título encolhe para caber ao lado do texto */
@media (min-width: 80em) {
  .hero__titulo { font-size: min(4.9vw, 4.8rem); }
  .hero__lado { padding-left: 1.5rem; }
  .selo { left: calc(var(--trilha) + 2rem); }
}


/* =====================================================================
   MOLDURA "CARTA DE TARÔ"
   Um fio fino corre pelas laterais. Nos cantos, recorte arredondado com
   estrela. Em alguns pontos o fio vira mandala ou ramo de folhas.
   ===================================================================== */
.fio {
  --fio-x: .7rem;                  /* distância da borda da tela */
  --fio-r: 1.4rem;                 /* raio do canto recortado */
  --fio-topo: calc(4.25rem + env(safe-area-inset-top, 0px) + .35rem);
  --fio-base: 1.5rem;
  --fio-cor: var(--borgonha);
  --fio-orn: var(--dourado);
  position: absolute; top: 0; bottom: 0; left: var(--fio-x); right: var(--fio-x);
  z-index: 1; pointer-events: none;
}
.fio--inicio { top: var(--fio-topo); }
.fio--fim { bottom: var(--fio-base); }
.fio--escuro { --fio-cor: var(--dourado); --fio-topo: clamp(.7rem, 2vw, 1.4rem); --fio-base: clamp(.7rem, 2vw, 1.4rem); }

.fio__lado {
  position: absolute; top: 0; bottom: 0; width: 0;
  display: flex; flex-direction: column; align-items: center;
}
.fio__lado--esq { left: 0; }
.fio__lado--dir { right: 0; }
.fio--inicio .fio__lado { top: var(--fio-r); }
.fio--fim .fio__lado { bottom: var(--fio-r); }
.fio__seg { flex: 1 1 0; min-height: .75rem; width: 1px; background: var(--fio-cor); }

.fio__linha { position: absolute; left: var(--fio-r); right: var(--fio-r); height: 1px; background: var(--fio-cor); }
.fio__linha--topo { top: 0; }
.fio__linha--base { bottom: 0; }
.fio__canto { position: absolute; width: var(--fio-r); height: var(--fio-r); max-width: none; overflow: visible; color: var(--fio-cor); }
.fio__canto--se { top: 0; left: 0; }
.fio__canto--sd { top: 0; right: 0; transform: scaleX(-1); }
.fio__canto--ie { bottom: 0; left: 0; transform: scaleY(-1); }
.fio__canto--id { bottom: 0; right: 0; transform: scale(-1, -1); }

.fio__orn { flex: none; max-width: none; color: var(--fio-orn); overflow: visible; }
.fio__orn--lotus { width: 20px; height: 63px; margin-block: .4rem; }
.fio__orn--flor { width: 20px; height: 50px; margin-block: .4rem; }
.fio__orn--ramo { display: none; width: 60px; height: 367px; margin-block: .5rem; }

/* os ornamentos se "desenham" quando entram na tela */
.js .fio [data-revelar="traco"] { opacity: 1; transform: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--lenta); }
.js .fio [data-revelar="traco"].is-visivel { stroke-dashoffset: 0; }

@media (min-width: 48em) {
  .fio { --fio-x: 1.25rem; --fio-r: 2.2rem; --fio-base: 2rem; }
  .fio__orn--lotus { width: 44px; height: 138px; }
  .fio__orn--flor { width: 44px; height: 110px; }
  .fio__orn--ramo { display: block; }
}
@media (min-width: 60em) {
  .fio { --fio-topo: calc(5rem + .35rem); }
}
/* no computador o fio da esquerda coincide com a linha da trilha lateral */
@media (min-width: 80em) {
  .fio { --fio-x: 3.3rem; --fio-r: 2.6rem; }
  .fio__orn--lotus { width: 48px; height: 150px; }
  .fio__orn--flor { width: 48px; height: 120px; }
  .fio__orn--ramo { width: 72px; height: 440px; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .fio [data-revelar="traco"] { stroke-dashoffset: 0 !important; }
  .js [data-revelar], .js [data-revelar] img,
  .js .hero__linha, .js .hero__lado, .js .hero__imagem .foto, .js .hero__marca { opacity: 1 !important; transform: none !important; }
}