/* =========================================================
   Cigana Goga | Cartomante
   Direção: festa cigana de carroça pintada. Fundo marfim,
   painéis turquesa (carroça) e vermelho vivo (saia), ouro de moeda,
   franja de moedas como assinatura e faixa de lenço listrado.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --cha: #FFFAF2;          /* fundo da página: marfim limpo */
  --papel: #FFFFFF;        /* painéis claros */
  --carroca: #0B6B6B;      /* turquesa profundo */
  --carroca-2: #08504F;
  --turquesa: #19B3AE;
  --saia: #B3101E;         /* vermelho vivo da saia */
  --saia-2: #8A0A16;
  --cravo: #E01A2B;        /* CTA */
  --cravo-2: #BF1222;
  --moeda: #F3B83C;
  --moeda-clara: #FFD77A;
  --moeda-escura: #8A5A00; /* ouro legível em fundo claro */
  --rosa: #F07BA0;
  --folha: #2E8B57;
  --lilas: #7B3FA0;
  --tinta: #2B1613;
  --tinta-suave: rgba(43, 22, 19, .76);
  --marfim: #FFF6E9;
  --marfim-suave: rgba(255, 246, 233, .86);
  --linha: rgba(179, 16, 30, .14);

  --lenco: repeating-linear-gradient(90deg,
    var(--cravo) 0 22px, var(--moeda) 22px 36px, var(--turquesa) 36px 58px,
    var(--folha) 58px 70px, var(--lilas) 70px 90px, var(--rosa) 90px 104px);

  --display: "Shrikhand", "Georgia", serif;
  --corpo: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;

  --largura: 1220px;
  --gutter: clamp(16px, 3vw, 32px);
  --raio-g: clamp(28px, 4vw, 44px);
  --raio-m: 22px;
  --raio-p: 14px;
  --sombra: 0 18px 40px -22px rgba(120, 8, 18, .45);
  --sec: clamp(72px, 10vw, 128px);
  --mov: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--cha);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--corpo);
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
s { opacity: .7; font-weight: 500; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--moeda); outline-offset: 3px; border-radius: 8px; }

h2 {
  font: 400 clamp(2rem, 4.6vw, 3.25rem)/1.08 var(--display);
  color: var(--saia);
  text-wrap: balance;
}
h3 { font-weight: 800; font-size: 1.2rem; line-height: 1.3; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--saia); color: var(--marfim); padding: 10px 18px; border-radius: 99px;
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

.sec-cabeca { max-width: 720px; }
.sec-cabeca p { margin-top: 14px; color: var(--tinta-suave); font-size: 1.125rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 22px 6px 6px;
  border-radius: 99px; font-weight: 800; font-size: 1rem; line-height: 1.2;
  text-decoration: none; transition: transform .25s var(--mov), background-color .25s, box-shadow .25s;
}
.btn-cravo {
  background: var(--cravo); color: #fff;
  box-shadow: 0 0 0 2px var(--moeda), 0 10px 22px -10px rgba(195, 18, 61, .8);
}
.btn-cravo:hover { background: var(--cravo-2); }
.btn-moeda {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--moeda-clara), var(--moeda) 55%, #C98A12);
  color: var(--saia); box-shadow: inset 0 0 0 2px rgba(138, 90, 0, .35);
}
.btn-moeda svg { width: 21px; height: 21px; }
.btn-grande { min-height: 58px; font-size: 1.0625rem; padding-right: 28px; }
.btn-grande .btn-moeda { width: 46px; height: 46px; }
.btn-grande .btn-moeda svg { width: 25px; height: 25px; }
.btn-linha-clara {
  padding: 6px 22px; color: var(--marfim);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 233, .55);
}
.btn-linha-clara:hover { box-shadow: inset 0 0 0 2px var(--moeda); color: var(--moeda-clara); }
@media (hover: hover) { .btn-cravo:hover { transform: translateY(-2px); } }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-top: 6px solid transparent;
  border-image: var(--lenco) 1;
}
.topo::before {                         /* o desfoque mora aqui, nunca no header */
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 240, 236, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.topo.rolado::before { opacity: 1; }
.topo-faixa {
  position: relative; max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto;
  padding: 10px var(--gutter); display: flex; align-items: center; gap: 18px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
  font: 400 1.5rem/1 var(--display); color: var(--saia); margin-right: auto;
}
.marca-roda { width: 34px; height: 34px; color: var(--cravo); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav ul { display: flex; gap: 6px; }
.nav ul a {
  display: block; padding: 10px 14px; border-radius: 99px;
  font-weight: 700; text-decoration: none; color: var(--tinta);
}
.nav ul a:hover { background: rgba(224, 26, 43, .1); color: var(--cravo-2); }
.nav ul a[aria-current="true"] { background: var(--saia); color: var(--marfim); }
.nav-cta { min-height: 46px; }
.nav-cta .btn-moeda { width: 34px; height: 34px; }

.musica {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 99px; font-weight: 700; font-size: .9375rem; color: var(--carroca);
  box-shadow: inset 0 0 0 2px rgba(11, 107, 107, .35);
}
.musica:hover, .musica[aria-pressed="true"] { background: var(--carroca); color: var(--marfim); box-shadow: none; }
.musica-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.musica-barras i { width: 3px; height: 5px; background: currentColor; border-radius: 2px; }
.musica-barras i:nth-child(2) { height: 10px; }
.musica-barras i:nth-child(3) { height: 14px; }
.musica-barras i:nth-child(4) { height: 7px; }
.musica[aria-pressed="true"] .musica-barras i { animation: barra .9s ease-in-out infinite alternate; }
.musica[aria-pressed="true"] .musica-barras i:nth-child(2) { animation-delay: -.3s; }
.musica[aria-pressed="true"] .musica-barras i:nth-child(3) { animation-delay: -.6s; }
.musica[aria-pressed="true"] .musica-barras i:nth-child(4) { animation-delay: -.15s; }
@keyframes barra { from { height: 3px; } to { height: 16px; } }

.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; place-items: center; background: var(--saia); color: var(--marfim); }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn .ico-fechar { display: none; }
.menu-btn[aria-expanded="true"] .ico-abrir { display: none; }
.menu-btn[aria-expanded="true"] .ico-fechar { display: block; }

/* ---------- Hero ---------- */
.hero { padding: 92px var(--gutter) 0; position: relative; }
.hero-painel {
  position: relative; max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 68px);
  align-items: center; padding: clamp(24px, 3vw, 38px) clamp(24px, 4vw, 54px) clamp(42px, 5vw, 64px) clamp(24px, 3vw, 38px);
  border-radius: var(--raio-g);
  color: var(--marfim);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(25, 179, 174, .45), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(8, 80, 79, .9), transparent 70%),
    var(--carroca);
  overflow: hidden;
  isolation: isolate;
}
.hero-painel::before {                  /* pintura de carroça: losangos dourados bem leves */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12;
  background:
    linear-gradient(135deg, transparent 46%, var(--moeda) 47% 49%, transparent 50%) 0 0 / 46px 46px,
    linear-gradient(45deg, transparent 46%, var(--moeda) 47% 49%, transparent 50%) 0 0 / 46px 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 60%, transparent);
          mask-image: linear-gradient(90deg, transparent 15%, #000 60%, transparent);
}
.hero-texto { position: relative; }
.hero-chamada {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  color: var(--moeda-clara); font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.hero-chamada::before { content: ""; width: 28px; height: 2px; background: var(--moeda); border-radius: 2px; }
.hero h1 { display: grid; gap: 14px; }
.hero-nome {
  font: 400 clamp(3.4rem, 7.4vw, 6.1rem)/.95 var(--display);
  color: var(--marfim);
  text-shadow: 4px 4px 0 var(--saia), 7px 7px 0 var(--moeda);
  letter-spacing: .005em;
}
.hero-oficio {
  font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.35;
  color: var(--moeda-clara); max-width: 30ch;
}
.hero-boasvindas { margin-top: 22px; max-width: 54ch; color: var(--marfim-suave); font-size: 1.125rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-preco { margin-top: 16px; color: var(--marfim-suave); font-size: .98rem; }
.hero-preco strong { color: var(--moeda-clara); font-weight: 800; }
.hero-fatos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 246, 233, .22); font-size: .95rem; color: var(--marfim-suave);
}
.hero-fatos li { position: relative; padding-left: 20px; line-height: 1.4; }
.hero-fatos li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--moeda-clara), var(--moeda) 60%, #C98A12);
}
.hero-fatos strong { display: block; color: var(--marfim); font-weight: 800; }

.hero-retrato {
  position: relative; align-self: stretch; min-height: 610px; overflow: hidden;
  border-radius: calc(var(--raio-g) - 12px) calc(var(--raio-g) - 12px) 24px 24px;
  border: 4px solid var(--moeda); box-shadow: 0 0 0 7px var(--carroca-2), 0 24px 48px -22px rgba(0, 0, 0, .7);
  background: var(--saia);
}
.hero-retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(43, 22, 19, .8));
}
.hero-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.hero-selo {
  position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px;
  display: grid; gap: 1px; padding-left: 16px; border-left: 3px solid var(--moeda);
  color: var(--marfim); line-height: 1.28; text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.hero-selo strong { color: var(--moeda-clara); font-size: 1.15rem; }
.hero-selo span { font-size: .91rem; }

/* Franja de moedas: assinatura visual, pendurada na borda do painel */
.franja {
  position: relative; z-index: 2; max-width: calc(var(--largura) - 2 * var(--raio-g)); height: 46px; margin: -8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='46' viewBox='0 0 56 46'%3E%3Cpath d='M0 3q14 9 28 0t28 0' fill='none' stroke='%23C98A12' stroke-width='2.2'/%3E%3Cpath d='M14 7v9M42 7v17' stroke='%23C98A12' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='21' r='6' fill='%23F3B83C' stroke='%23B9801A' stroke-width='1.4'/%3E%3Ccircle cx='14' cy='21' r='2.6' fill='none' stroke='%23B9801A' stroke-width='1'/%3E%3Ccircle cx='42' cy='32' r='9.5' fill='%23F3B83C' stroke='%23B9801A' stroke-width='1.6'/%3E%3Ccircle cx='42' cy='32' r='5' fill='none' stroke='%23B9801A' stroke-width='1.1'/%3E%3Ccircle cx='39' cy='28.5' r='2' fill='%23FFE7A8'/%3E%3C/svg%3E") center top / 56px 46px;
  background-repeat: round no-repeat;
}

/* ---------- Carta do dia ---------- */
.carta {
  max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter) calc(var(--sec) * .8);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.carta-intro p { margin-top: 16px; color: var(--tinta-suave); font-size: 1.125rem; max-width: 44ch; }
.mesa {
  position: relative; padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 36px);
  border-radius: var(--raio-g);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 215, 122, .25), transparent 60%),
    var(--saia);
  box-shadow: var(--sombra);
}
.mesa::before {                         /* toalha de renda, como na mesa dela */
  content: ""; position: absolute; inset: 12px; border-radius: calc(var(--raio-g) - 12px); pointer-events: none;
  border: 2px dashed rgba(255, 215, 122, .35);
}
.mesa-cartas { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 22px); perspective: 1200px; }
.lcarta {
  width: clamp(92px, 24%, 170px); aspect-ratio: 5 / 8; border-radius: 14px;
  transition: transform .5s var(--mov), opacity .5s;
}
.lcarta:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.lcarta:nth-child(3) { transform: rotate(7deg) translateY(10px); }
@media (hover: hover) {
  .mesa:not(.escolhida) .lcarta:hover { transform: translateY(-12px) rotate(0); }
}
.lcarta-in {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .9s var(--mov);
}
.lcarta-verso, .lcarta-frente {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lcarta-verso {
  display: grid; place-items: center; color: var(--moeda);
  background:
    radial-gradient(circle, var(--cravo) 0 3.5px, transparent 4.5px) 0 0 / 13px 13px,
    var(--saia-2);
  box-shadow: inset 0 0 0 7px var(--saia-2), inset 0 0 0 9px var(--moeda), 0 14px 26px -12px rgba(0, 0, 0, .7);
}
.lcarta-verso::before {
  content: ""; position: absolute; inset: 16px; border-radius: 8px; background: var(--saia);
  box-shadow: inset 0 0 0 1.5px rgba(243, 184, 60, .6);
}
.lcarta-verso svg { position: relative; width: 58%; height: auto; aspect-ratio: 1; }
.lcarta-frente {
  transform: rotateY(180deg);
  background:                            /* moldura de rosas, inspirada no baralho dela */
    radial-gradient(circle at 50% 50%, #FF4F58 0 3px, var(--cravo) 3.2px 6px, transparent 6.5px) 0 0 / 14px 14px,
    #8A0A16;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7);
}
.lcarta-frente .face {
  position: absolute; inset: 9px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFDF8, #FFF1DD);
}
.lcarta-frente .face svg { width: 66%; height: auto; aspect-ratio: 1; }
.lcarta-frente .etiqueta {
  position: absolute; left: 4px; top: 14px; bottom: 14px; width: 18px;
  display: grid; place-items: center; border-radius: 6px; background: #fff; color: var(--tinta);
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: .62rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.lcarta.virada .lcarta-in { transform: rotateY(180deg); }
.mesa.escolhida .lcarta { cursor: default; }
.mesa.escolhida .lcarta:not(.virada) { opacity: .35; transform: translateY(18px) scale(.9); }
.mesa.escolhida .lcarta.virada { transform: translateY(-6px) scale(1.06); }

.mesa-msg { position: relative; margin-top: 30px; min-height: 64px; text-align: center; color: var(--marfim); }
.mesa-espera { color: var(--marfim-suave); }
.msg-nome { font: 400 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--display); color: var(--moeda-clara); }
.msg-texto { margin: 12px auto 0; max-width: 46ch; color: var(--marfim-suave); font-size: 1.0625rem; }
.msg-convite { margin: 22px auto 14px; font-weight: 800; max-width: 40ch; }
.msg-volta { margin-top: 14px; font-size: .9rem; color: var(--marfim-suave); }
.mesa-msg.aparece > * { animation: surge .6s var(--mov) both; }
.mesa-msg.aparece > *:nth-child(2) { animation-delay: .08s; }
.mesa-msg.aparece > *:nth-child(3) { animation-delay: .16s; }
.mesa-msg.aparece > *:nth-child(4) { animation-delay: .24s; }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Consultas ---------- */
.consultas { max-width: var(--largura); margin: 0 auto; padding: calc(var(--sec) * .6) var(--gutter) var(--sec); }
.consultas-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  margin-top: 44px; align-items: start;
}
.destaque {
  position: relative; padding: clamp(28px, 4vw, 44px); border-radius: var(--raio-g);
  background: var(--saia); color: var(--marfim); box-shadow: var(--sombra);
}
/* Sobre painéis vermelhos o CTA vira ouro, para não sumir no fundo. */
.destaque .btn-cravo, .promocao .btn-cravo, .portal .btn-cravo {
  background: linear-gradient(180deg, var(--moeda-clara), var(--moeda)); color: var(--saia-2);
  box-shadow: 0 0 0 2px rgba(255, 246, 233, .7), 0 10px 22px -10px rgba(60, 4, 8, .7);
}
.destaque .btn-cravo:hover, .promocao .btn-cravo:hover, .portal .btn-cravo:hover { background: var(--moeda-clara); }
.destaque .btn-cravo .btn-moeda, .promocao .btn-cravo .btn-moeda, .portal .btn-cravo .btn-moeda { background: var(--saia); color: var(--marfim); box-shadow: none; }
.destaque-selo {
  display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 99px;
  background: var(--moeda); color: var(--saia); font-weight: 800; font-size: .875rem;
}
.destaque h3 { font: 400 clamp(1.6rem, 2.8vw, 2.1rem)/1.12 var(--display); }
.destaque-preco { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 16px; font-weight: 800; color: var(--marfim-suave); }
.destaque-preco span { font-size: 2.6rem; line-height: 1; color: var(--moeda-clara); }
.destaque > p:not(.destaque-selo):not(.destaque-preco) { color: var(--marfim-suave); }
.temas { border: 0; margin: 26px 0 28px; padding: 22px 0 0; border-top: 1px solid rgba(255, 246, 233, .2); min-width: 0; }
.temas legend { padding: 0; font-weight: 800; float: left; width: 100%; margin-bottom: 12px; }
.temas-opcoes { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.temas label { position: relative; }
.temas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.temas span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 246, 233, .4); font-weight: 700; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
.temas input:checked + span { background: var(--moeda); color: var(--saia); box-shadow: none; }
.temas input:focus-visible + span { outline: 3px solid var(--moeda-clara); outline-offset: 2px; }
.temas-texto { margin-top: 16px; color: var(--marfim-suave); min-height: 3.3em; }

.cardapio-lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; gap: 6px 18px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--linha);
}
.cardapio-lista li:first-child { padding-top: 4px; }
.cardapio-lista h3 { color: var(--saia); }
.cardapio-lista p { color: var(--tinta-suave); font-size: .98rem; margin-top: 4px; }
.cardapio-lista .cardapio-preco {
  margin: 0; text-align: right; font-weight: 800; font-size: 1.35rem; color: var(--tinta);
  display: grid; justify-items: end; line-height: 1.2;
}
.cardapio-preco s, .cardapio-preco small { font-size: .82rem; font-weight: 500; color: var(--tinta-suave); }
.cardapio-pedir {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papel); color: var(--cravo); box-shadow: inset 0 0 0 2px rgba(224, 26, 43, .35);
  transition: background-color .2s, color .2s;
}
.cardapio-pedir svg { width: 20px; height: 20px; }
.cardapio-pedir:hover { background: var(--cravo); color: #fff; }
.cardapio-nota {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--raio-p);
  background: rgba(243, 184, 60, .18); color: var(--tinta); font-size: .95rem;
}

/* ---------- Como funciona ---------- */
.como { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.como-painel {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(20px, 3vw, 32px); border-radius: var(--raio-g); background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.como-foto { position: relative; }
.como-foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: calc(var(--raio-g) - 10px);
}
.como-foto figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 99px;
  background: rgba(255, 249, 246, .92); font-size: .875rem; font-weight: 700; color: var(--saia);
}
.como-texto { padding: clamp(4px, 2vw, 24px) clamp(4px, 2vw, 24px) clamp(4px, 2vw, 24px) 0; }
.passos { margin-top: 30px; display: grid; gap: 22px; counter-reset: passo; }
.passos li { position: relative; padding-left: 68px; counter-increment: passo; min-height: 50px; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: -4px; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; font: 400 1.5rem/1 var(--display); color: var(--saia);
  background: radial-gradient(circle at 35% 30%, var(--moeda-clara), var(--moeda) 60%, #C98A12);
  box-shadow: inset 0 0 0 3px rgba(138, 90, 0, .3);
}
.passos h3 { color: var(--saia); }
.passos p { margin-top: 4px; color: var(--tinta-suave); }
.como-local { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); color: var(--tinta-suave); }

/* ---------- Trabalhos ---------- */
.trabalhos { max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter) 0; }
.trabalhos-grade {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 3vw, 36px);
  margin-top: 40px; align-items: stretch;
}
.abas { display: flex; flex-direction: column; min-width: 0; }
.abas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.abas-lista button {
  min-height: 46px; padding: 0 18px; border-radius: 99px; font-weight: 800;
  background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--linha); color: var(--tinta);
  transition: background-color .2s, color .2s;
}
.abas-lista button:hover { box-shadow: inset 0 0 0 1.5px var(--cravo); }
#aba-amor[aria-selected="true"] { background: var(--cravo); color: #fff; box-shadow: none; }
#aba-prosperidade[aria-selected="true"] { background: var(--moeda); color: var(--saia); box-shadow: none; }
#aba-protecao[aria-selected="true"] { background: var(--carroca); color: var(--marfim); box-shadow: none; }
#aba-afrodite[aria-selected="true"] { background: #C9306F; color: #fff; box-shadow: none; }
.aba-painel {
  flex: 1; margin-top: 16px; padding: clamp(24px, 3.5vw, 40px); border-radius: var(--raio-g);
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha);
}
.aba-painel { display: flex; flex-direction: column; align-items: flex-start; }
.aba-painel[hidden] { display: none; }
.aba-painel .btn { margin-top: auto; }
.aba-painel h3 { font: 400 clamp(1.5rem, 2.6vw, 1.9rem)/1.15 var(--display); color: var(--saia); }
.aba-painel > p { margin-top: 8px; color: var(--tinta-suave); }
.lista-ritual { align-self: stretch; margin: 22px 0 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.lista-ritual li { position: relative; padding-left: 26px; line-height: 1.45; }
.lista-ritual li::before {               /* botão de rosa */
  content: ""; position: absolute; left: 0; top: .28em; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFB4A2 0 2px, var(--cravo) 2.5px 5px, #8A0A16 5.5px);
}
.jars {
  display: flex; flex-direction: column; border-radius: var(--raio-g); overflow: hidden;
  background: var(--carroca); color: var(--marfim); box-shadow: var(--sombra);
}
.jars img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 4%; }
.jars-texto { padding: 24px clamp(20px, 2.5vw, 30px) 28px; }
.jars h3 { font: 400 1.7rem/1.1 var(--display); color: var(--moeda-clara); }
.jars-texto > p { margin-top: 8px; color: var(--marfim-suave); }
.jars-precos { margin-top: 18px; display: grid; gap: 10px; }
.jars-precos div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255, 246, 233, .2);
}
.jars-precos dt { color: var(--marfim-suave); }
.jars-precos dd { font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.jars-precos s, .jars-precos small { font-size: .8rem; color: var(--marfim-suave); }

.etica {
  margin-top: clamp(24px, 3vw, 36px); padding: clamp(24px, 3.5vw, 40px); border-radius: var(--raio-g);
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha);
  border-top: 8px solid transparent; border-image: var(--lenco) 1;
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}
.etica h3 { font: 400 clamp(1.4rem, 2.4vw, 1.75rem)/1.2 var(--display); color: var(--saia); }
.etica-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; margin-top: 18px; }
.etica ul { display: grid; gap: 14px; }
.etica li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.etica li svg { width: 24px; height: 24px; margin-top: 1px; }
.etica-sim svg { color: var(--folha); }
.etica-nao svg { color: var(--cravo); }

/* ---------- Sobre ---------- */
.sobre { max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter) 0; }
.sobre-painel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--raio-g); color: var(--marfim);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(224, 26, 43, .35), transparent 60%),
    var(--saia);
}
.sobre-fotos { position: relative; aspect-ratio: 5 / 6; }
.sobre-fotos img {
  position: absolute; object-fit: cover; border-radius: 26px;
  border: 5px solid var(--moeda); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7);
}
.sobre-foto-1 { left: 0; top: 0; width: 72%; height: 86%; object-position: 50% 20%; transform: rotate(-3deg); }
.sobre-foto-2 { right: 0; bottom: 0; width: 50%; height: 56%; object-position: 50% 25%; transform: rotate(4deg); border-color: var(--marfim) !important; }
.sobre h2 { color: var(--marfim); }
.sobre-texto > p { margin-top: 16px; color: var(--marfim-suave); }
.sobre-texto > p:first-of-type { margin-top: 20px; }
.credenciais { margin-top: 28px; display: grid; gap: 12px; }
.credenciais li {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding-top: 12px; border-top: 1px solid rgba(255, 246, 233, .18);
}
.credenciais strong { color: var(--moeda-clara); font-weight: 800; font-size: 1.05rem; }
.credenciais span { color: var(--marfim-suave); font-size: .97rem; line-height: 1.45; }
.compromisso {
  position: relative; margin-top: 30px; padding: 22px 24px 22px 62px; border-radius: var(--raio-m);
  background: rgba(255, 246, 233, .08); font-weight: 500; font-size: 1.08rem;
}
.compromisso::before {
  content: "“"; position: absolute; left: 18px; top: 4px; font: 400 3.4rem/1 var(--display); color: var(--moeda);
}

/* ---------- Depoimentos ---------- */
.depo { max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter) 0; }
.conversas {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 48px) / 3));
  gap: 24px; margin-top: 40px; padding: 4px 4px 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--rosa) transparent; overscroll-behavior-x: contain;
}
.conversa {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 20px 20px; border-radius: var(--raio-g);
  background:
    radial-gradient(circle, rgba(179, 16, 30, .07) 1.4px, transparent 2px) 0 0 / 18px 18px,
    #F7ECDD;
}
.balao {
  position: relative; max-width: 92%; padding: 14px 16px; border-radius: 6px 20px 20px 20px;
  background: #fff; font-size: .98rem; line-height: 1.55; box-shadow: 0 2px 0 rgba(179, 16, 30, .08);
}
.balao-goga {
  align-self: flex-end; display: flex; gap: 10px; align-items: flex-start;
  border-radius: 20px 6px 20px 20px; background: #D5F0EC; font-weight: 500;
}
.balao-goga img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--moeda); }
.conversa-origem { margin-top: auto; padding-top: 6px; font-size: .875rem; font-weight: 700; color: var(--tinta-suave); }
.trilho-setas { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.seta {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--saia); color: var(--marfim);
}
.seta svg { width: 22px; height: 22px; }
.seta-volta svg { transform: scaleX(-1); }
.seta:disabled { opacity: .35; cursor: default; }

/* ---------- Dúvidas ---------- */
.duvidas { max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter); }
.duvidas-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--linha); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 52px 20px 0;
  font-weight: 800; font-size: 1.08rem; color: var(--saia);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  background:
    linear-gradient(var(--saia), var(--saia)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--saia), var(--saia)) center / 2.5px 14px no-repeat,
    rgba(243, 184, 60, .35);
  transition: transform .3s var(--mov);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 52px 22px 0; color: var(--tinta-suave); }

/* ---------- Agendar ---------- */
.agendar { padding: 0 var(--gutter) calc(var(--sec) * .7); }
.agendar-painel {
  max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--raio-g); color: var(--marfim);
  background:
    radial-gradient(100% 80% at 100% 100%, rgba(25, 179, 174, .45), transparent 60%),
    var(--carroca);
}
.agendar h2 { color: var(--marfim); text-shadow: 3px 3px 0 var(--saia); }
.agendar-texto > p:not(.agora) { margin-top: 14px; color: var(--marfim-suave); font-size: 1.125rem; max-width: 46ch; }
.agora {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 22px; padding: 8px 16px; border-radius: 99px;
  background: rgba(0, 0, 0, .18); font-weight: 700; font-size: .95rem;
}
.agora-luz { width: 10px; height: 10px; border-radius: 50%; background: var(--moeda); }
.agora.aberto .agora-luz { background: #5BE28B; box-shadow: 0 0 0 4px rgba(91, 226, 139, .25); }
.agendar-info { margin-top: 30px; display: grid; gap: 12px; }
.agendar-info div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 246, 233, .2);
}
.agendar-info dt { font-weight: 800; color: var(--moeda-clara); }
.agendar-info dd { color: var(--marfim-suave); }
.agendar-info a { font-weight: 800; color: var(--marfim); }
.agendar-arte img {
  width: 100%; border-radius: 30px; border: 6px solid var(--moeda);
  box-shadow: 0 0 0 8px var(--carroca-2), 0 30px 50px -20px rgba(0, 0, 0, .6); transform: rotate(2deg);
}
.franja-baixo { margin-top: -8px; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--saia-2); color: var(--marfim-suave); padding: 56px var(--gutter) 28px;
  border-top: 8px solid transparent; border-image: var(--lenco) 1;
}
.rodape-grade { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; }
.rodape-nome { font: 400 2rem/1 var(--display); color: var(--marfim); margin-bottom: 12px; }
.redes { display: flex; gap: 10px; margin-top: 20px; }
.redes a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--marfim); box-shadow: inset 0 0 0 1.5px rgba(255, 246, 233, .35);
}
.redes a:hover { background: var(--moeda); color: var(--saia); box-shadow: none; }
.redes svg { width: 21px; height: 21px; }
.rodape-aviso h2 { font: 800 1rem/1.3 var(--corpo); color: var(--marfim); }
.rodape-aviso p { margin-top: 10px; font-size: .92rem; }
.rodape-base {
  max-width: var(--largura); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 246, 233, .15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .9rem;
}
.rodape-base a { color: var(--moeda-clara); font-weight: 700; }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutua {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cravo); color: #fff;
  box-shadow: 0 0 0 3px var(--moeda), 0 14px 28px -10px rgba(120, 8, 18, .7);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
  transition: opacity .3s, transform .3s var(--mov), visibility .3s;
}
.whats-flutua svg { width: 30px; height: 30px; }
.whats-flutua.visivel { opacity: 1; visibility: visible; transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .nav ul { gap: 0; }
  .nav ul a { padding: 10px 10px; }
  .nav { gap: 14px; }
}

@media (max-width: 920px) {
  .menu-btn { display: grid; }
  .musica .musica-txt { display: none; }
  .musica { width: 46px; padding: 0; justify-content: center; }
  .nav {
    position: fixed; left: 0; right: 0; top: 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 96px var(--gutter) 28px; background: var(--saia); color: var(--marfim);
    border-radius: 0 0 var(--raio-g) var(--raio-g); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
    transform: translateY(-105%); visibility: hidden; transition: transform .45s var(--mov), visibility .45s;
  }
  .nav.aberto { transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav ul a { color: var(--marfim); font-size: 1.35rem; padding: 12px 6px; border-radius: 12px; }
  .nav ul a:hover, .nav ul a[aria-current="true"] { background: rgba(255, 246, 233, .1); color: var(--moeda-clara); }
  .nav-cta { align-self: flex-start; }
  .topo.menu-aberto::before { opacity: 0; }
  .topo.menu-aberto .marca { color: var(--marfim); position: relative; z-index: 2; }
  .topo.menu-aberto .marca-roda { color: var(--moeda); }
  .topo.menu-aberto .musica { color: var(--marfim); box-shadow: inset 0 0 0 2px rgba(255, 246, 233, .4); }
  .menu-btn, .musica { position: relative; z-index: 2; }

  .hero-painel { grid-template-columns: minmax(0, 1fr); padding: 30px 30px 52px; }
  .hero-retrato { width: min(100%, 560px); min-height: 0; height: min(125vw, 680px); margin: 0 auto; }
  .carta { grid-template-columns: minmax(0, 1fr); }
  .consultas-grade { grid-template-columns: minmax(0, 1fr); }
  .como-painel { grid-template-columns: minmax(0, 1fr); }
  .como-foto img { aspect-ratio: 1 / 1; object-position: 50% 40%; }
  .como-texto { padding: 4px 6px 10px; }
  .trabalhos-grade { grid-template-columns: minmax(0, 1fr); }
  .jars { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .jars img { aspect-ratio: auto; height: 100%; }
  .sobre-painel { grid-template-columns: minmax(0, 1fr); }
  .sobre-fotos { max-width: 480px; width: 100%; margin: 0 auto; }
  .duvidas-grade { grid-template-columns: minmax(0, 1fr); }
  .agendar-painel { grid-template-columns: minmax(0, 1fr); }
  .agendar-arte { max-width: 520px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .conversas { grid-auto-columns: minmax(280px, 46%); }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .marca { font-size: 1.3rem; }
  .marca-roda { width: 28px; height: 28px; }
  .hero { padding-top: 84px; }
  .hero-painel { gap: 30px; padding: 14px 14px 42px; }
  .hero-retrato { width: 100%; height: min(118vw, 500px); border-width: 3px; border-radius: calc(var(--raio-g) - 14px) calc(var(--raio-g) - 14px) 22px 22px; }
  .hero-retrato img { object-position: 50% 36%; }
  .hero-selo { left: 18px; right: 18px; bottom: 16px; }
  .hero-texto { padding: 0 6px; }
  .hero-chamada { margin-bottom: 10px; font-size: .76rem; letter-spacing: .1em; }
  .hero-nome { font-size: clamp(3.25rem, 17vw, 4.65rem); text-shadow: 3px 3px 0 var(--saia), 5px 5px 0 var(--moeda); }
  .hero-boasvindas { font-size: 1.02rem; }
  .hero-acoes .btn { width: 100%; justify-content: flex-start; }
  .hero-acoes .btn-linha-clara { justify-content: center; }
  .hero-fatos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .franja { margin-left: 24px; margin-right: 24px; }

  .lcarta { width: 30%; }
  .mesa { padding: 30px 14px 26px; }
  .lcarta-frente .etiqueta { font-size: .55rem; width: 15px; left: 3px; }

  .lista-ritual { grid-template-columns: minmax(0, 1fr); }
  .jars { display: flex; }
  .jars img { aspect-ratio: 4 / 3; height: auto; }
  .etica-colunas { grid-template-columns: minmax(0, 1fr); }
  .cardapio-lista li { grid-template-columns: minmax(0, 1fr) 46px; }
  .cardapio-lista .cardapio-preco { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; font-size: 1.2rem; }
  .cardapio-pedir { grid-column: 2; grid-row: 1 / span 2; }
  .destaque-preco span { font-size: 2.2rem; }
  .credenciais li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .conversas { grid-auto-columns: 86%; gap: 14px; }
  .agendar-info div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .agendar-texto .btn { width: 100%; }
  .faq summary { padding-right: 46px; font-size: 1.02rem; }
  .faq details p { padding-right: 0; }
  .sobre-painel { padding: 28px 20px 32px; }
  .compromisso { padding: 18px 18px 18px 52px; }
  .whats-flutua { width: 56px; height: 56px; right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Nova direção visual — retrato, marca circular e abertura
   ========================================================= */

/* Abertura: só aparece quando o JavaScript está disponível. */
.portal { display: none; }
.js .portal {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  min-height: 100dvh; padding: 28px var(--gutter); overflow: auto;
  color: var(--marfim); text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(224, 26, 43, .38), transparent 30%),
    radial-gradient(circle at 10% 10%, rgba(243, 184, 60, .18), transparent 24%),
    linear-gradient(150deg, #5C0610, var(--saia-2) 54%, #54050E);
  opacity: 1; visibility: visible;
  transition: opacity .8s var(--mov), visibility .8s;
}
.js .portal::before {
  content: ""; position: fixed; inset: 16px; pointer-events: none;
  border: 1px solid rgba(255, 215, 122, .46); border-radius: 30px;
  box-shadow: inset 0 0 80px rgba(243, 184, 60, .08);
}
.js .portal[hidden] { display: none; }
.portal.saindo { opacity: 0; visibility: hidden; }
.portal-aberto { overflow: hidden; }
.portal-brilho {
  position: absolute; width: min(76vw, 680px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 184, 60, .16), transparent 66%);
  filter: blur(8px); pointer-events: none;
}
.portal-inner { position: relative; width: min(100%, 660px); }
.portal-logo {
  width: clamp(210px, 40vmin, 340px); margin: 0 auto 14px; border-radius: 50%;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .48));
}
.portal h2 { color: var(--marfim); font-size: clamp(2.35rem, 6vw, 4.5rem); text-shadow: 0 4px 0 var(--saia); }
.portal-inner > p { max-width: 48ch; margin: 14px auto 0; color: var(--marfim-suave); }
.portal-acoes { display: grid; justify-items: center; gap: 14px; margin-top: 28px; }
.portal-sem-som {
  min-height: 44px; padding: 8px 20px; color: var(--marfim); font-weight: 800;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 215, 122, .58);
}
.portal .portal-nota { margin-top: 14px; font-size: .82rem; color: rgba(255, 246, 233, .65); }

/* Marca atualizada no topo, rodapé e chamada final. */
.marca-logo {
  width: 42px; height: 42px; flex: none; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--moeda), 0 5px 12px rgba(120, 8, 18, .2);
}
.topo.menu-aberto .marca-logo { box-shadow: 0 0 0 2px var(--moeda); }
.rodape-logo { width: 142px; margin-bottom: 18px; border-radius: 50%; box-shadow: 0 0 0 3px var(--moeda); }
.agendar-arte img { object-fit: contain; background: #050505; border-radius: 50%; transform: rotate(1deg); }

/* Player discreto, criado somente depois da escolha da visitante. */
.musica-player {
  position: fixed; left: 14px; bottom: 14px; z-index: 180; width: 222px; padding: 9px;
  border-radius: 16px; color: var(--marfim); background: rgba(92, 6, 14, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(60, 4, 8, .3), 0 0 0 1px rgba(243, 184, 60, .72);
}
.musica-player[hidden] { display: none; }
.musica-player-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.musica-player-topo strong, .musica-player-topo span { display: block; }
.musica-player-topo strong { font-size: .76rem; line-height: 1.2; }
.musica-player-topo span { margin-top: 1px; color: var(--marfim-suave); font-size: .62rem; }
.musica-player-topo button { width: 25px; height: 25px; flex: none; border-radius: 50%; font-size: 1.15rem; line-height: 1; background: rgba(255,255,255,.1); }
.musica-faixas { display: flex; gap: 5px; margin-bottom: 7px; }
.musica-faixas button {
  min-height: 27px; padding: 4px 8px; border-radius: 99px; color: var(--marfim-suave);
  font-size: .62rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,246,233,.24);
}
.musica-faixas button[aria-pressed="true"] { color: var(--saia); background: var(--moeda-clara); box-shadow: none; }
.musica-player-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px; background: #000; }
.musica-player-video[hidden] { display: none; }
.musica-faixas:has(+ .musica-player-video[hidden]) { margin-bottom: 0; }
.musica-player iframe { width: 100%; height: 100%; border: 0; }

/* Hero claro e editorial, com o retrato de corpo inteiro em destaque. */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 112px var(--gutter) 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(243, 184, 60, .2), transparent 22%),
    radial-gradient(circle at 10% 90%, rgba(224, 26, 43, .1), transparent 26%);
}
.hero-painel {
  width: 100%; grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr); gap: clamp(36px, 6vw, 84px);
  align-items: center; padding: clamp(28px, 4vw, 58px); color: var(--tinta);
  background: rgba(255, 249, 246, .82); border: 1px solid rgba(138, 90, 0, .24); overflow: visible;
  box-shadow: 0 28px 80px -46px rgba(120, 8, 18, .45);
}
.hero-painel::before {
  inset: 18px; border-radius: calc(var(--raio-g) - 12px); opacity: .2;
  background-image: linear-gradient(45deg, transparent 48%, var(--moeda) 49% 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, var(--moeda) 49% 51%, transparent 52%);
  background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 48%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 48%);
}
.hero-texto { position: relative; z-index: 1; padding: 8px 0; }
.hero-chamada { color: var(--moeda-escura); }
.hero-nome { color: var(--saia); text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(243, 184, 60, .78); }
.hero-oficio { color: var(--saia); }
.hero-boasvindas, .hero-preco { color: var(--tinta-suave); }
.hero-preco a { color: var(--saia); font-weight: 800; text-underline-offset: 3px; }
.hero .btn-linha-clara { color: var(--saia); box-shadow: inset 0 0 0 2px rgba(179, 16, 30, .35); }
.hero .btn-linha-clara:hover { color: var(--cravo); box-shadow: inset 0 0 0 2px var(--cravo); }
.hero-fatos { border-top-color: var(--linha); }
.hero-fatos li { color: var(--tinta-suave); }
.hero-fatos li::before { background: var(--moeda); }
.hero-fatos strong { color: var(--saia); }
.hero-retrato {
  min-height: 0; height: clamp(560px, 68vh, 720px); border-radius: 48% 48% 28px 28px;
  border: 5px solid var(--moeda); box-shadow: 0 26px 56px -22px rgba(43, 22, 19, .5);
}
.hero-retrato img { object-position: 50% 42%; }

/* Carta do dia mais ilustrada, usando a fotografia do baralho real como textura. */
.mesa {
  background:
    linear-gradient(rgba(112, 8, 18, .88), rgba(120, 8, 18, .94)),
    url("../assets/img/goga-baralho-novo.webp") center 56% / cover;
}
.lcarta-verso {
  background:
    linear-gradient(rgba(120, 8, 18, .32), rgba(120, 8, 18, .32)),
    url("../assets/img/goga-baralho-novo.webp") center / cover;
  box-shadow: inset 0 0 0 6px var(--saia-2), inset 0 0 0 9px var(--moeda), 0 14px 26px -12px rgba(0, 0, 0, .7);
}
.lcarta-verso::before { background: rgba(120, 8, 18, .62); backdrop-filter: blur(2px); }
.lcarta-verso svg { color: var(--moeda-clara); filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }

/* Cinco vagas promocionais. */
.promocao {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(28px, 5vw, 64px);
  align-items: center; margin-top: 40px; padding: clamp(28px, 4vw, 52px); border-radius: var(--raio-g);
  color: var(--marfim); background:
    radial-gradient(circle at 8% 0%, rgba(243, 184, 60, .23), transparent 28%),
    linear-gradient(135deg, var(--saia-2), var(--saia));
  box-shadow: var(--sombra);
}
.promocao-selo { display: inline-block; padding: 7px 13px; border-radius: 99px; color: var(--saia); background: var(--moeda); font-weight: 800; font-size: .84rem; }
.promocao h3 { margin-top: 14px; color: var(--marfim); font: 400 clamp(1.9rem, 4vw, 3.05rem)/1.08 var(--display); }
.promocao-texto > p:last-child { margin-top: 14px; color: var(--marfim-suave); }
.promocao-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 22px; border-radius: 24px; background: rgba(255,255,255,.08); }
.promocao-form label { display: grid; gap: 6px; font-weight: 800; font-size: .88rem; }
.promocao-form label:nth-child(3), .promocao-form .btn, .promocao-privacidade { grid-column: 1 / -1; }
.promocao-form input, .promocao-form select {
  width: 100%; min-height: 50px; border: 1px solid rgba(255,246,233,.34); border-radius: 12px;
  padding: 0 14px; color: var(--tinta); background: var(--papel); font: 500 1rem var(--corpo);
}
.promocao-form input:focus, .promocao-form select:focus { outline: 3px solid var(--moeda); outline-offset: 2px; }
.promocao-form .btn { justify-self: start; margin-top: 4px; }
.promocao-privacidade { color: rgba(255,246,233,.7); font-size: .78rem; line-height: 1.45; }

/* Modalidades com as fotos reais da cliente. */
.modalidades { max-width: var(--largura); margin: 0 auto; padding: var(--sec) var(--gutter) 0; }
.modalidades-grade { margin-top: 40px; }
.modalidades article { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; overflow: hidden; border-radius: var(--raio-g); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra); }
.modalidades img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 10%; }
.modalidades article > div { padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 52px) 30px; }
.modalidades h3 { margin-top: 6px; color: var(--saia); font: 400 1.65rem/1.15 var(--display); }
.modalidades article > div > p:not(.modalidade-etiqueta) { margin-top: 10px; color: var(--tinta-suave); }
.modalidade-formatos { display: grid; gap: 12px; list-style: disc; margin-top: 16px; padding-left: 1.1em; color: var(--tinta-suave); }
.modalidade-formatos strong { color: var(--tinta); }
.modalidade-etiqueta { color: var(--moeda-escura); font-weight: 800; font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }

/* Registros reais dos trabalhos e vídeos curtos. */
.trabalhos-mosaico { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; margin-top: 40px; }
.trabalhos-mosaico figure { position: relative; min-height: 400px; overflow: hidden; border-radius: var(--raio-g); background: var(--saia-2); }
.trabalhos-mosaico img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.trabalhos-mosaico-principal img { object-position: center 60%; }
.trabalhos-mosaico figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 15px; border-radius: 14px;
  color: var(--marfim); background: rgba(92, 6, 14, .78); backdrop-filter: blur(9px); font-size: .9rem; font-weight: 700;
}
.rituais-reais { margin-top: clamp(36px, 6vw, 72px); padding: clamp(24px, 4vw, 44px); border-radius: var(--raio-g); color: var(--marfim); background: var(--saia-2); }
.rituais-reais-cabeca { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: end; }
.rituais-reais h3 { color: var(--moeda-clara); font: 400 clamp(1.65rem, 3.2vw, 2.45rem)/1.12 var(--display); }
.rituais-reais-cabeca p { color: var(--marfim-suave); }
.rituais-videos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 16px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.rituais-videos figure { scroll-snap-align: start; min-width: 0; }
.rituais-videos video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; background: #2A0306; box-shadow: 0 0 0 2px rgba(243,184,60,.45); }
.rituais-videos figcaption { margin-top: 9px; color: var(--marfim-suave); text-align: center; font-size: .86rem; font-weight: 700; }

/* Trabalhos realizados: três nichos em arco, como capelinhas de altar. O do meio sobe no desktop. */
.realizados { margin-top: clamp(36px, 6vw, 72px); }
.realizados-cabeca { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: end; }
.realizados h3 { color: var(--saia); font: 400 clamp(1.65rem, 3.2vw, 2.45rem)/1.12 var(--display); }
.realizados-cabeca p { color: var(--tinta-suave); max-width: 52ch; }
.realizados-nichos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); margin-top: 34px; padding-top: 34px; list-style: none; }
.realizados-nichos li:nth-child(2) { transform: translateY(-34px); }
.nicho { display: block; color: inherit; text-decoration: none; text-align: center; border-radius: 999px 999px 26px 26px; }
.nicho-moldura {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: 999px 999px 26px 26px; background: var(--saia-2);
  box-shadow: 0 0 0 3px var(--moeda), 0 0 0 9px var(--cha), 0 0 0 11px rgba(243, 184, 60, .55), var(--sombra);
}
.nicho-moldura img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--mov), filter .7s var(--mov); }
.nicho-moldura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 215, 122, .28), transparent 55%);
  opacity: 0; transition: opacity .5s var(--mov);
}
.nicho-legenda {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 16px; border-radius: 999px;
  color: var(--saia); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha);
  font-size: .92rem; font-weight: 800;
}
.nicho-legenda::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--moeda); box-shadow: 0 0 0 3px rgba(243, 184, 60, .3); }
.nicho:hover .nicho-moldura img, .nicho:focus-visible .nicho-moldura img { transform: scale(1.05); filter: saturate(1.1); }
.nicho:hover .nicho-moldura::after, .nicho:focus-visible .nicho-moldura::after { opacity: 1; }
.nicho:focus-visible { outline: 3px solid var(--carroca); outline-offset: 14px; }

/* Visualizador da foto ampliada. */
.galeria-zoom {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(30, 3, 6, .97); color: var(--marfim);
}
.galeria-zoom::backdrop { background: rgba(30, 3, 6, .6); }
.galeria-zoom[open] { display: grid; place-items: center; animation: zoom-entra .35s var(--mov); }
@keyframes zoom-entra { from { opacity: 0; } }
.galeria-zoom figure { display: grid; justify-items: center; gap: 14px; padding: 64px 72px 24px; max-width: 100%; }
.galeria-zoom img {
  width: auto; height: auto; max-width: min(100%, 760px); max-height: calc(100dvh - 150px);
  border-radius: 22px; box-shadow: 0 0 0 2px rgba(243, 184, 60, .6), 0 30px 60px -20px #000;
}
.galeria-zoom figcaption { font-weight: 800; text-align: center; }
.galeria-zoom-conta { margin-left: 8px; color: var(--moeda-clara); font-weight: 700; font-size: .88rem; }
.galeria-zoom-btn {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  color: var(--tinta); background: var(--moeda); box-shadow: 0 8px 20px -8px #000; transition: background .2s;
}
.galeria-zoom-btn:hover { background: var(--moeda-clara); }
.galeria-zoom-btn:focus-visible { outline: 3px solid var(--marfim); outline-offset: 3px; }
.galeria-zoom-btn svg { width: 22px; height: 22px; }
.galeria-zoom-fechar { top: 14px; right: 14px; }
.galeria-zoom-ant, .galeria-zoom-prox { top: 50%; margin-top: -25px; }
.galeria-zoom-ant { left: 14px; }
.galeria-zoom-ant svg { transform: scaleX(-1); }
.galeria-zoom-prox { right: 14px; }

.sobre-foto-2 { object-fit: contain !important; background: #050505; border-color: var(--moeda) !important; border-radius: 50% !important; }

.depo-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.depo-cta p { max-width: 55ch; color: var(--tinta-suave); }

@media (max-width: 920px) {
  .hero { padding-top: 98px; }
  .hero-painel { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  .hero-retrato { grid-row: 1; width: min(100%, 470px); height: min(122vw, 620px); margin: 0 auto; }
  .hero-texto { grid-row: 2; text-align: center; }
  .hero-acoes { justify-content: center; }
  .hero-fatos { text-align: left; }
  .promocao { grid-template-columns: minmax(0, 1fr); }
  .modalidades article { grid-template-columns: minmax(0, 1fr); }
  .modalidades img { height: auto; aspect-ratio: 16 / 10; }
  .trabalhos-mosaico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trabalhos-mosaico figure { min-height: 330px; }
  .rituais-reais-cabeca { grid-template-columns: minmax(0, 1fr); }
  .rituais-videos { grid-auto-columns: minmax(190px, 42%); }
  .realizados-cabeca { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .js .portal { padding: 26px 24px; }
  .js .portal::before { inset: 9px; border-radius: 22px; }
  .portal-logo { width: min(58vw, 248px); }
  .portal h2 { font-size: clamp(2.1rem, 12vw, 3.1rem); }
  .portal-inner > p { font-size: .93rem; }
  .portal-acoes { margin-top: 22px; }
  .portal .btn { width: 100%; justify-content: flex-start; }
  .marca { font-size: 1.17rem; gap: 8px; }
  .marca-logo { width: 34px; height: 34px; }
  .musica-player { left: 10px; bottom: 10px; width: min(210px, calc(100vw - 82px)); }
  .hero { min-height: auto; padding-top: 92px; }
  .hero-painel { gap: 28px; padding: 14px 14px 36px; }
  .hero-retrato { width: 100%; height: min(126vw, 530px); border-radius: 46% 46% 22px 22px; }
  .hero-texto { padding: 0 6px; }
  .hero-nome { font-size: clamp(3.05rem, 16vw, 4.5rem); text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(243,184,60,.78); }
  .hero-fatos { text-align: left; }
  .promocao { padding: 26px 18px; }
  .promocao-form { grid-template-columns: minmax(0, 1fr); padding: 18px 14px; }
  .promocao-form label, .promocao-form label:nth-child(3), .promocao-form .btn, .promocao-privacidade { grid-column: 1; }
  .promocao-form .btn { width: 100%; justify-content: flex-start; }
  .modalidades img { aspect-ratio: 4 / 3; }
  .trabalhos-mosaico { grid-template-columns: minmax(0, 1fr); }
  .trabalhos-mosaico figure { min-height: 420px; }
  .rituais-videos { grid-auto-columns: 72%; }
  /* No celular os nichos viram uma fileira para deslizar, como os vídeos. */
  .realizados-nichos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1);
    padding: 16px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
  }
  .realizados-nichos li { scroll-snap-align: start; padding: 12px 0 0 12px; }
  .realizados-nichos li:last-child { padding-right: 12px; }
  .realizados-nichos li:nth-child(2) { transform: none; }
  .galeria-zoom figure { padding: 74px 14px 96px; }
  .galeria-zoom img { max-height: calc(100dvh - 210px); }
  .galeria-zoom-ant, .galeria-zoom-prox { top: auto; bottom: 22px; margin-top: 0; }
  .galeria-zoom-ant { left: calc(50% - 64px); }
  .galeria-zoom-prox { right: calc(50% - 64px); }
  .rodape-logo { width: 118px; }
}

/* Página de privacidade */
.politica-body { background: var(--papel); }
.politica-topo {
  max-width: 980px; margin: 0 auto; padding: 20px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--linha);
}
.politica-voltar { color: var(--saia); font-weight: 800; text-underline-offset: 4px; }
.politica-page { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 92px) var(--gutter); }
.politica-page > h1 { margin-top: 8px; color: var(--saia); font: 400 clamp(2.5rem, 7vw, 4.8rem)/1.04 var(--display); text-wrap: balance; }
.politica-etiqueta { color: var(--moeda-escura); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.politica-atualizacao { margin-top: 12px; color: var(--tinta-suave); }
.politica-page section { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--linha); }
.politica-page section h2 { font-size: clamp(1.55rem, 3.5vw, 2.1rem); }
.politica-page section p { margin-top: 12px; color: var(--tinta-suave); }
.politica-page section a { color: var(--saia); font-weight: 800; }
.politica-cta { margin-top: 48px; padding: 26px; border-radius: var(--raio-m); color: var(--marfim); background: var(--saia); }
.politica-cta p { margin-bottom: 14px; font-weight: 800; }
.politica-rodape { padding: 26px var(--gutter); color: var(--marfim-suave); text-align: center; background: var(--saia-2); }

@media (max-width: 600px) {
  .politica-topo .marca span { display: none; }
}