/* ==========================================================================
   KAMILY Cartomante & Magista
   style.css

   Conceito: editorial místico premium.
   Fundos quase pretos, fotografia cinematográfica quente que se dissolve no
   fundo, vinho profundo, dourado envelhecido, fios de 1px e muito espaço
   negativo. Nada arredondado além dos 3px dos botões.

   Sumário
   01 · Tokens
   02 · Reset e base
   03 · Tipografia
   04 · Layout
   05 · Componentes
   06 · Seções
   07 · Animação
   08 · Responsividade
   ========================================================================== */


/* ==========================================================================
   01 · TOKENS
   ========================================================================== */

:root {

  /* --- Paleta oficial. Fonte única da verdade: nenhuma cor entra na folha
         sem passar por aqui. --- */
  --bg-main:    #0E0B0B;
  --bg-section: #13100F;
  --bg-card:    #171212;
  --bg-deep:    #0A0909;

  --primary:       #5A232A;
  --primary-hover: #6A2D34;
  --primary-dark:  #3D171B;

  --gold:       #A88768;
  --gold-light: #C2A384;
  --champagne:  #D7B89A;

  --text-main:      #E7D7C8;
  --text-secondary: #B89E8A;
  --text-muted:     #8F7768;

  --border-soft: #2A1B1B;
  --copper:      #7B3D33;

  /* --- Derivadas: apenas opacidades das cores acima ---
     Contrastes medidos sobre --bg-main:
       text-main 14,0:1 · text-secondary 7,7:1 · text-muted 4,7:1
       gold 5,9:1 · gold-light 8,3:1 · champagne 10,5:1
     Todos passam em WCAG AA.
     --copper mede 2,4:1: NUNCA usar como texto, só em gradiente. */

  /* --- Poeira luminosa ---
     Estes são os valores DENTRO da camada, que tem opacidade 0,28. Na tela
     eles chegam em 0,18 champagne, 0,14 dourado e 0,10 cobre — a paleta
     pedida. Para calibrar o efeito inteiro, mexa na opacidade da camada;
     para mexer no peso relativo entre as três cores, mexa aqui. */
  --po-champagne: rgba(215, 184, 154, 0.64);
  --po-ouro:      rgba(168, 135, 104, 0.50);
  --po-cobre:     rgba(123, 61, 51, 0.36);

  --line-gold:    rgba(168, 135, 104, 0.12);  /* fio do header       */
  --line-card:    rgba(168, 135, 104, 0.35);  /* borda de card       */
  --line-btn:     rgba(168, 135, 104, 0.30);  /* borda de botão      */
  --line-photo:   rgba(168, 135, 104, 0.28);  /* fio em fotografia   */
  --line-hair:    rgba(168, 135, 104, 0.18);  /* divisor discreto    */

  /* Cor para a qual as fotografias se dissolvem. Cada seção redefine para
     o próprio fundo, de modo que a imagem morra na cor que está atrás. */
  --photo-fade: 14, 11, 11;

  /* --- Tipografia --- */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Duas trilhas. Rótulo é caixa-alta com entrelinha larga: cabe pequeno
     sem custar leitura. Texto corrido nunca desce de 16px. */
  --fs-micro: 0.8125rem;   /* 13px — eyebrow, selo    */
  --fs-xs:    0.875rem;    /* 14px — rótulos, menu    */
  --fs-sm:    0.9375rem;   /* 15px — botões           */
  --fs-read:  1rem;        /* 16px — apoio e listas   */
  --fs-base:  1.0625rem;   /* 17px — corpo            */
  --fs-md:    1.1875rem;   /* 19px — leads            */

  --ls-wide: 0.20em;
  --ls-mid:  0.12em;
  --ls-btn:  0.08em;

  /* --- Espaçamento --- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* --- Layout --- */
  --container: 1240px;
  --narrow:    760px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --header-h:  80px;

  /* --- Forma e movimento --- */
  --radius: 3px;
  /* Canto de CARTA. Separado de --radius porque aquele veste botao,
     etiqueta, selo, FAQ e ticket, que continuam retos. 10px arredonda o
     suficiente para lembrar carta fisica sem virar cartao de dashboard. */
  --card-radius: 10px;
  --ease:   ease;
  --t-fast: 0.25s;
  --t-slow: 0.35s;
  --t-in:   0.7s;
}


/* ==========================================================================
   02 · RESET E BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  min-height: 100vh;
  background-color: var(--bg-main);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background-color: var(--primary); color: var(--text-main); }

/* O dourado mede 5,9:1 sobre o fundo — o anel de foco é bem visível.
   2px porque 1px se perde contra fotografia. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* O sprite guarda a geometria e não ocupa espaço. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--primary);
  color: var(--text-main);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }


/* ==========================================================================
   03 · TIPOGRAFIA
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--champagne);
}

.h2 {
  font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.125rem);
  margin-bottom: var(--sp-4);
}

p { text-wrap: pretty; }

/* Eyebrow: caixa-alta minúscula em dourado, precedida de um traço. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  flex: 0 0 26px;
  width: 26px;
  height: 1px;
  background-color: var(--gold);
}
.bloco--centro .eyebrow { justify-content: center; }


/* ==========================================================================
   04 · LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--narrow); }

/* Visivel so para leitor de tela. Usado no aviso de posicao do carrossel de
   depoimentos; nao usar `display:none`, que remove o no da leitura. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.bloco { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bloco--centro { text-align: center; }
.bloco--centro .h2 { margin-inline: auto; }


/* ==========================================================================
   05 · COMPONENTES
   ========================================================================== */

/* --- Botões ---
   Vinho preenchido, retangulares com 3px, fio dourado, 13px em caixa-alta.
   Medições sobre --bg-main: texto no vinho 8,7:1 (folgado); o contorno fica
   abaixo dos 3:1 da WCAG, e por isso o anel de foco é dourado e de 2px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  min-height: 44px;                 /* área de toque confortável no celular */
  background-color: var(--primary);
  border: 1px solid var(--line-btn);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background-color: var(--primary-hover);
  border-color: var(--line-card);
  transform: translateY(-1px);
}
.btn:active { background-color: var(--primary-dark); transform: translateY(0); }

.btn--lg { padding: 17px 32px; }


/* --- Medalhão de ícone ---
   Círculo de fio dourado com um ícone linear dentro. É o único elemento
   circular da interface. */
.medal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-hair);
  border-radius: 50%;
  color: var(--gold);
}
.medal svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medal--lg { width: 58px; height: 58px; }
.medal--lg svg { width: 24px; height: 24px; }


/* --- Fotografia ---
   A imagem nunca fica dentro de um card: ela se dissolve no fundo da seção.
   Quatro camadas, todas por cima da foto e nenhuma em volta dela. */
.foto { position: relative; }

.foto img {
  width: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.06) brightness(0.95);
}

.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(var(--photo-fade), 0.45)  0%,
      rgba(var(--photo-fade), 0)    24%,
      rgba(var(--photo-fade), 0)    62%,
      rgba(var(--photo-fade), 0.92) 100%),
    linear-gradient(to right,
      rgba(var(--photo-fade), 0.35)  0%,
      rgba(var(--photo-fade), 0)    20%,
      rgba(var(--photo-fade), 0)    80%,
      rgba(var(--photo-fade), 0.35) 100%),
    linear-gradient(to top,
      rgba(123, 61, 51, 0.20)  0%,
      rgba(123, 61, 51, 0)    50%),
    radial-gradient(116% 86% at 50% 42%,
      rgba(var(--photo-fade), 0)    40%,
      rgba(var(--photo-fade), 0.55) 100%);
}


/* --- Marcas decorativas --- */
.decor {
  position: absolute;
  color: var(--gold);
  opacity: 0.10;
  pointer-events: none;
  aspect-ratio: 1;
  z-index: 0;
}
/* A 0.7 de espessura com 10% de opacidade, 1 pixel físico some na
   suavização de telas densas. */
@media (min-resolution: 2dppx) {
  .decor g { stroke-width: 1; }
}


/* --- Acordeão --- */
.acc { border-top: 1px solid var(--border-soft); }
.acc__item { border-bottom: 1px solid var(--border-soft); }
.acc__head { font: inherit; }

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-4) 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-main);
  transition: color var(--t-fast) var(--ease);
}
.acc__q:hover { color: var(--champagne); }

.acc__ico {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.acc__ico::before,
.acc__ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transition: transform var(--t-fast) var(--ease);
}
.acc__ico::after { transform: rotate(90deg); }
.acc__q[aria-expanded="true"] .acc__ico::after { transform: rotate(0deg); }

.acc__a {
  padding-bottom: var(--sp-4);
  max-width: 62ch;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--text-secondary);
}
.acc__a[hidden] { display: none; }


/* ==========================================================================
   06 · SEÇÕES
   ========================================================================== */

/* --- 01 · Header ------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Opaco onde nao ha desfoque. A 86% da para ler o conteudo que passa por
     tras — no desktop o blur dissolvia isso, mas ele sai no celular por
     custo de pintura, e ai o texto de tras aparecia nitido atravessando o
     cabecalho. Fundo solido resolve sem custo nenhum. */
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--line-gold);
}

/* O desfoque atras do cabecalho e o unico efeito CONTINUO da pagina: o
   cabecalho e sticky, entao o navegador refaz o blur a cada quadro de
   rolagem, do topo ao rodape. Em celular esse e o item mais caro do scroll
   inteiro, e e justamente onde ele quase nao aparece: o fundo ja esta em 86%
   de opacidade sobre um preto quase puro, sobra 14% de imagem para desfocar.
   Fica onde o custo cabe e o efeito se nota. */
@media (min-width: 1024px) {
  .header {
    background-color: rgba(14, 11, 11, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.logo { display: flex; flex-direction: column; gap: 4px; }
.logo__name {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--text-main);
}
.logo__role {
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2rem); }

.nav__link {
  position: relative;
  display: block;
  padding-block: 4px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--text-main); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* 44px é o mínimo confortável para o dedo. No painel mobile este botão é
   um alvo de toque real, não um item de menu de mouse. */
.nav__cta { padding: 13px 22px; min-height: 44px; }

.burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}
.burger span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--text-main);
  transition: transform var(--t-slow) var(--ease), width var(--t-slow) var(--ease);
}
.burger span:last-child { width: 16px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { width: 24px; transform: translateY(-4px) rotate(-45deg); }


/* --- 02 · Hero --------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86vh;
  min-height: 86dvh;
  overflow: hidden;
  background-color: var(--bg-main);
}

.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 26%;   /* mantém o rosto à direita, dentro do quadro */
  filter: saturate(1.05) contrast(1.06) brightness(0.96);
}

/* O escurecimento não é decoração: é o que torna o texto legível sobre uma
   fotografia. Medido contra o pior caso possível — um pixel branco da foto
   atrás da letra. Opacidade 0,88 entrega 10,0:1 no texto principal; abaixo
   de 0,70 o texto secundário já reprova. Por isso o platô cobre toda a
   faixa onde há texto e só então despenca. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(14, 11, 11, 0.98)  0%,
      rgba(14, 11, 11, 0.94) 30%,
      rgba(14, 11, 11, 0.88) 46%,
      rgba(14, 11, 11, 0.45) 64%,
      rgba(14, 11, 11, 0.08) 88%),
    linear-gradient(0deg,
      rgba(14, 11, 11, 0.78) 0%,
      transparent 40%),
    radial-gradient(120% 88% at 50% 40%,
      rgba(14, 11, 11, 0) 42%, rgba(14, 11, 11, 0.5) 100%);
}

.hero__inner { position: relative; z-index: 3; }
.hero__content { max-width: 460px; }

/* 60–72px no desktop. O max-width em ch é o que produz a quebra em quatro
   ou cinco linhas da referência, sem <br> forçado — assim a headline
   reflui sozinha no celular em vez de quebrar em lugar errado. */
.hero__title {
  max-width: 11ch;
  margin-bottom: var(--sp-4);
  font-size: clamp(2.75rem, 1.7rem + 3.5vw, 4.75rem);
  line-height: 1.06;
  color: var(--champagne);
}

.hero__lead {
  max-width: 34ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-read);
  line-height: 1.7;
  color: var(--text-muted);
}


/* --- 03 e 09 · Faixas de itens ----------------------------------------- */
.strip {
  border-block: 1px solid var(--border-soft);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  background-color: var(--bg-main);
}

/* A poeira luminosa passa por cima do fundo das seções. Estes contentores
   sobem um nível para que nenhum ponto de luz caia sobre texto, card ou
   botão — os demais já tinham z-index próprio. */
.strip > .container,
.processo__inner,
.depo > .container,
.faq > .container,
.footer__inner { position: relative; z-index: 1; }

.strip__list {
  display: grid;
  gap: var(--sp-5) var(--sp-4);
}

.strip__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
/* Alinha oticamente o medalhao com a primeira linha do titulo. */
.strip__item > div { padding-top: 3px; }

.strip__title {
  font-family: var(--sans);
  font-size: var(--fs-read);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-main);
}
.strip__text {
  margin-top: 5px;
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--text-muted);
}

.strip--min { background-color: var(--bg-section); }


/* --- 04 · Sobre -------------------------------------------------------- */
.sobre {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background-color: var(--bg-section);
  --photo-fade: 19, 16, 15;   /* = --bg-section */
}

.sobre__inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

/* Única fotografia com fio: a referência mostra uma borda dourada muito
   fina só aqui. Nas demais, a imagem se dissolve sem contorno. */
.sobre__media { position: relative; }
.sobre__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--line-photo);
  pointer-events: none;
}
.sobre__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.05) contrast(1.06) brightness(0.95);
}

.sobre__content p { margin-bottom: var(--sp-3); max-width: 46ch; }
.sobre__content .btn { margin-top: var(--sp-3); }

.decor--sobre { right: -8%; bottom: -14%; width: min(58vw, 420px); }


/* --- 05 · Depoimento em destaque --------------------------------------- */
.quote {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(90deg, #301316, #4E1E24, #301316);
  text-align: center;
}
.quote__inner { position: relative; z-index: 1; }

.quote__body p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.625rem);
  font-weight: 400;
  line-height: 1.6;
  color: #D8C0AD;
  text-wrap: balance;
}

.quote__author {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  color: var(--text-secondary);
}
.quote__author cite { font-style: normal; }

.decor--quote { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70vw, 460px); opacity: 0.08; }


/* --- 06 · Abertura das consultas --------------------------------------- */
.intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56vh;
  overflow: hidden;
  padding-block: var(--section-y);
  background-color: var(--bg-main);
}

.intro__media { position: absolute; inset: 0; z-index: 1; }
/* Nesta foto a Kamily está no terço ESQUERDO do quadro. Em telas largas a
   imagem preenche exatamente a largura, então object-position horizontal não
   tem efeito algum — ela caía debaixo da faixa escura onde vive o texto.
   O espelhamento a leva para a direita, que é onde a composição a quer. */
.intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: scaleX(-1);
  filter: saturate(1.06) contrast(1.08) brightness(1.06);
}

.intro__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(14, 11, 11, 0.98)  0%,
      rgba(14, 11, 11, 0.94) 34%,
      rgba(14, 11, 11, 0.88) 52%,
      rgba(14, 11, 11, 0.38) 72%,
      rgba(14, 11, 11, 0.04) 94%),
    linear-gradient(0deg,  rgba(14, 11, 11, 0.75) 0%, transparent 22%),
    linear-gradient(180deg, rgba(14, 11, 11, 0.75) 0%, transparent 18%);
}

.intro__inner { position: relative; z-index: 3; }
.intro__content { max-width: 560px; }
.intro__lead { max-width: 44ch; font-size: var(--fs-md); color: var(--text-secondary); }


/* --- 06 a 09 · Grupos de consultas -------------------------------------
   Sao dezoito leituras. Para nao virarem uma tabela de precos, o catalogo
   e quebrado em quatro grupos com hierarquia VISUAL, nao so textual:

     Nivel 1 — rapidas  : cards compactos, sem icone, preco discreto
     Nivel 2 — tematicas: cards medios, com medalhao de icone
     Nivel 3 — completas: cards grandes, mais respiro, um em destaque

   Cada grupo tem sobrancelha, titulo, texto de apoio e uma mudanca sutil
   de fundo. E isso que faz a pessoa perceber que sao categorias distintas
   antes de ler qualquer preco. */

.grupo {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
}
.grupo > .container { position: relative; z-index: 1; }

.grupo--rapidas   { background-color: var(--bg-main); }

/* O catálogo é a única seção que respira mais largo que o resto da página:
   com cinco cards na linha, o container padrão deixava cada um com 217px e o
   texto quebrava em cinco linhas. As variáveis são sobrescritas só aqui —
   nenhuma outra seção enxerga estes valores. */
.grupo--rapidas > .container {
  --container: 1560px;
  --gutter: clamp(1.25rem, 3.5vw, 2rem);
}
.grupo--amor      { background-color: var(--bg-section); }
.grupo--interior  { background-color: var(--bg-main); }
.grupo--completas { background-color: var(--bg-section); }

.grupo__lead { max-width: 60ch; font-size: var(--fs-md); color: var(--text-secondary); }
.grupo__lead--centro { margin-inline: auto; }

.decor--amor      { right: -14%; top: -18%; width: min(52vw, 380px); }
.decor--completas { left: -12%; bottom: -20%; width: min(56vw, 420px); }


/* --- Card de consulta --- */
.cards { display: grid; gap: var(--sp-4); }
/* 20px em vez de 24: com cinco colunas, os 16px economizados no total viram
   largura de card, onde fazem diferença.

   O `align-items: start` é o que torna a expansão possível sem estrago. Com o
   esticamento padrão do grid, abrir um card aumenta a altura da LINHA, e os
   outros quatro esticam junto — medido: os preços vizinhos desciam 44px. Com
   os cards dimensionados pelo próprio conteúdo, quem cresce é só o card sob o
   cursor; os vizinhos ficam parados no pixel. */
.grupo--rapidas .cards { gap: 1.25rem; align-items: start; }

/* Olhar para dentro reaproveita o grid `.cards--3` que ja existia; o que muda
   aqui e so o gap (1.25rem, o mesmo das outras duas listas de servico), o
   `align-items: start` que permite um card crescer sem esticar os vizinhos e
   um teto de largura.

   O teto existe porque tres colunas no container de 1240/1320 dariam cards de
   ~400/430px — largos demais perto dos 380px de Amor & Relacionamentos, e a
   consistencia entre as tres secoes e justamente o ponto. Com 1180px cada card
   fica em 380px de 1280 para cima e acompanha o container abaixo disso. */
.grupo--interior .cards {
  gap: 1.25rem;
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/* O cabecalho desta secao e o unico centrado fora de Leituras Aprofundadas,
   e por um motivo concreto: abaixo dele o baralho abre centrado no
   container. Com o texto encostado a esquerda e o leque no meio, a secao
   lia torta. A centralizacao em si vem do `.bloco--centro`, que a folha ja
   tinha; aqui so entra o teto de largura, para o titulo nao esticar numa
   linha unica de 1200px sobre um elemento estreito e centrado. */
.grupo--amor .bloco { max-width: 900px; margin-inline: auto; }

/* Amor & Relacionamentos usa o mesmo sistema de card das leituras objetivas.
   A unica diferenca e o grid: sao sete cards, e uma linha final com um card
   solto fica torta. Em flex com wrap, a ultima fila se centraliza sozinha em
   qualquer contagem de colunas — 4/3, 3/3/1 ou 2/2/2/1 — e o
   `align-items: flex-start` preserva o que o `align-items: start` do grid
   fazia la: cada card com a propria altura, para que abrir um nao estique os
   vizinhos. */
.grupo--amor .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}
/* O 0.1px descontado nas bases por breakpoint mais adiante e folga contra
   arredondamento subpixel: sem ela, uma largura de container fracionaria pode
   somar 0,5px a mais na linha cheia e jogar o ultimo card para baixo. */
.grupo--amor .love-fan__card { flex: 0 1 100%; min-width: 0; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  /* Em variável porque a capa sangra para fora do padding com margem
     negativa — os dois precisam ler o mesmo número. Valor inalterado. */
  --card-pad: clamp(1.5rem, 2.6vw, 2rem);
  padding: var(--card-pad);
  background-color: #121010;
  border: 1px solid var(--line-card);
  border-radius: var(--card-radius);
  transition: border-color var(--t-slow) var(--ease),
              background-color var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease);
}
.card:hover { background-color: var(--bg-card); border-color: var(--gold); }

/* Fio mais discreto no catálogo: com o card se abrindo no hover, o contorno
   sólido de --gold ficava alto demais para o que é só um realce. Mesma cor
   da paleta, só em opacidade menor. A sombra existe para o card parecer
   subir um pouco sem precisar de translate, que brigaria com a expansão. */
.grupo--rapidas .card,
.grupo--amor .card,
.grupo--interior .card { border-color: rgba(168, 135, 104, 0.24); }
.grupo--rapidas .card:hover,
.grupo--rapidas .card:focus-within,
.grupo--amor .card:hover,
.grupo--amor .card:focus-within,
.grupo--interior .card:hover,
.grupo--interior .card:focus-within {
  border-color: rgba(168, 135, 104, 0.50);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

/* --- Capa do card --------------------------------------------------------
   Uma abertura visual, não uma galeria: a imagem entra sangrada até a borda
   do card e some para dentro dele por um degradê, sem corte duro entre foto
   e texto. O `align-self` existe porque o card alinha os filhos à esquerda;
   as margens negativas devolvem à capa a largura cheia do card.

   A proporção é 16/11, mas com teto de 200px. Sem o teto, numa linha de três
   colunas a foto passaria de 260px e viraria o assunto do card em vez da
   abertura dele. Dentro de cada linha todas continuam idênticas, que é o que
   o olho compara.

   As fotos são retratos 9:16 e o recorte central pega o assunto de todas —
   a mão, as cartas suspensas, as luas, a roda, o leque. Daí object-position
   ficar no centro. --- */
.card__capa {
  position: relative;
  align-self: stretch;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 6px;
  aspect-ratio: 16 / 11;
  max-height: 200px;
  overflow: hidden;
  border-bottom: 1px solid rgba(168, 135, 104, 0.16);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* As fotos já nascem escuras e douradas. O filtro só as puxa para o mesmo
     ponto, para que as cinco pareçam da mesma sessão. */
  filter: brightness(0.72) contrast(1.08) saturate(0.78);
  transition: transform 0.6s var(--ease);
}

/* O degradê é o que dissolve a foto no card. Termina em 0,70 porque abaixo
   disso reaparece a borda dura que ele existe para esconder. */
.card__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(14, 11, 11, 0.02) 0%,
    rgba(14, 11, 11, 0.18) 55%,
    rgba(14, 11, 11, 0.70) 100%);
}

/* Aproximação de 2,5% em 0,6s: mais lenta que a revelação do botão de
   propósito, para a foto acompanhar o gesto sem disputar com ele. */
.card:hover .card__capa img,
.card:focus-within .card__capa img { transform: scale(1.025); }

/* Dois cards da linha têm etiqueta de cartas e três não, e por isso os
   títulos nasciam em alturas diferentes. Aqui os três sem etiqueta reservam
   a altura dela. Onde :has() não existir, volta a ficar como estava. */
/* 22px é a altura medida da etiqueta (12px de texto, 4+4 de padding, 1+1 de
   fio) e --sp-2 é o gap deste card. */
.grupo--rapidas .card:not(:has(.card__tag)) .card__title {
  margin-top: calc(22px + var(--sp-2));
}

/* --- Área do CTA que se abre, nas três seções de serviço ------------------
   Antes o botão ficava invisível mas continuava reservando altura, e sobrava
   um vazio de uns 80px abaixo do preço. Agora quem colapsa é a área inteira:
   no repouso ela tem altura zero e o card termina 24px depois do preço; no
   hover ela abre e o card cresce para baixo.

   A margem negativa constante existe para anular o gap do flex do card: sem
   ela sobrariam 12px entre o preço e uma caixa de altura zero. Com ela, o
   espaçamento passa a ser inteiramente do padding-top, que é o que anima.

   Sem `visibility: hidden` e sem `display: none`: as duas tiram o botão da
   ordem de tabulação, e um botão que não recebe foco nunca dispara o
   :focus-within que deveria abrir a área. Dentro de uma caixa de max-height
   zero ele continua focável e anunciado — o pointer-events fecha a única
   brecha que sobra, que é o clique às cegas com o mouse.

   Fora do (hover: hover) nada disto se aplica: no celular a área nasce
   aberta e o CTA fica sempre visível. --- */
@media (hover: hover) and (pointer: fine) {

  .grupo--rapidas .card__acao,
  .grupo--amor .card__acao,
  .grupo--interior .card__acao {
    --abre: cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: 0;
    padding-top: 0;
    margin-top: calc(-1 * var(--sp-2));
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    translate: 0 8px;
    transition: max-height 0.4s var(--abre),
                padding-top 0.4s var(--abre),
                opacity 0.28s var(--abre),
                translate 0.35s var(--abre);
  }

  /* A margem negativa acima anula o gap do card para que, fechada, a area
     nao ocupe nada. Os cards de amor e de olhar para dentro sao nivel 2 e
     usam --sp-3 de gap, nao o --sp-2 dos compactos: sem esta linha sobrariam
     4px abaixo do preco. */
  .grupo--amor .card__acao,
  .grupo--interior .card__acao { margin-top: calc(-1 * var(--sp-3)); }

  .grupo--rapidas .card:hover .card__acao,
  .grupo--rapidas .card:focus-within .card__acao,
  .grupo--amor .card:hover .card__acao,
  .grupo--amor .card:focus-within .card__acao,
  .grupo--interior .card:hover .card__acao,
  .grupo--interior .card:focus-within .card__acao {
    max-height: 96px;    /* cabe o botão em duas linhas mais o anel de foco */
    padding-top: 20px;
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }

  /* Quem pediu menos movimento recebe a área aberta e parada: abrir sem
     transição vira um estalo, pior que não abrir. */
  @media (prefers-reduced-motion: reduce) {
    .grupo--rapidas .card__acao,
    .grupo--rapidas .card:hover .card__acao,
    .grupo--rapidas .card:focus-within .card__acao,
    .grupo--amor .card__acao,
    .grupo--amor .card:hover .card__acao,
    .grupo--amor .card:focus-within .card__acao,
    .grupo--interior .card__acao,
    .grupo--interior .card:hover .card__acao,
    .grupo--interior .card:focus-within .card__acao {
      max-height: none;
      padding-top: 20px;
      margin-top: 0;
      opacity: 1;
      overflow: visible;
      pointer-events: auto;
      translate: 0 0;
    }
  }
}

/* O botão ocupa a largura que já ocupava; o wrapper não muda nada nele. */
.card__acao { align-self: stretch; display: flex; }

.card__title {
  font-family: var(--sans);
  font-size: var(--fs-read);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-main);
}

.card__text {
  font-size: var(--fs-read);
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Etiqueta de quantidade de cartas. */
.card__tag {
  align-self: flex-start;
  padding: 4px 9px;
  border: 1px solid var(--line-hair);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
}

.card__price {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--champagne);
}
/* Valor ainda nao confirmado: nao pode parecer um preco fechado. */
.card__price--pendente {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold);
}

/* Em coluna estreita rotulos como "QUERO ESSA LEITURA" quebram em duas
   linhas. Em vez de encurtar a copy, o botao reserva altura para duas: assim
   todos os cards de uma fila terminam na mesma linha de base. */
.card .btn {
  width: 100%;
  min-height: 52px;
  padding-inline: 14px;
  line-height: 1.35;
}

/* Nivel 1: mais enxuto — e a porta de entrada, nao o destaque. */
.card--sm { --card-pad: var(--sp-4); padding: var(--card-pad); gap: var(--sp-2); }
.card--sm .card__price { font-size: 1.5rem; }

/* Nivel 3: cada card com a propria altura. Com altura igual, os dois
   primeiros ficavam com 300px de vazio para acompanhar a lista de campos do
   Jogo Completo. Assim o card destacado cresce naturalmente e a hierarquia
   se le sozinha. */
.cards--grandes { align-items: start; }

/* Nivel 3: mais ar e mais presenca. */
.card--lg { --card-pad: clamp(1.75rem, 3vw, 2.5rem); padding: var(--card-pad); gap: var(--sp-3); }
.card--lg .card__price { font-size: 2rem; }

/* O destaque vem do fio, nao de cor chamativa. */
.card--destaque { border-color: rgba(168, 135, 104, 0.65); }
.card__selo {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 6px 12px;
  background-color: var(--bg-section);
  border: 1px solid rgba(168, 135, 104, 0.65);
  border-radius: 0 var(--radius) 0 var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* Lista de campos analisados. */
.campos {
  display: grid;
  gap: 6px var(--sp-3);
  width: 100%;
  padding-top: var(--sp-1);
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--text-muted);
}
.campos li { display: flex; align-items: baseline; gap: 8px; }
.campos li::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 1px;
  background-color: var(--gold);
}

/* Detalhe expansivel: <details> nativo, sem JavaScript e acessivel por
   teclado de graca. */
.detalhe { width: 100%; }
.detalhe summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* alvo de toque confortavel */
  padding-block: 10px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  list-style: none;
}
.detalhe summary::-webkit-details-marker { display: none; }
.detalhe summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.detalhe[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.detalhe summary:hover { color: var(--gold-light); }

.detalhe__lista {
  display: grid;
  gap: 5px;
  margin-top: var(--sp-2);
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--text-muted);
}
.detalhe__lista li { display: flex; align-items: baseline; gap: 8px; }
.detalhe__lista li::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 1px;
  background-color: var(--gold);
}


/* --- Nivel 3 · card fotografico ------------------------------------------
   As tres secoes anteriores usam a foto como abertura: uma faixa 16/11 no
   topo e o texto abaixo, no fundo do card. Aqui a relacao se inverte — a
   fotografia E o card, e o conteudo flutua sobre ela. E o que separa
   "servico" de "experiencia" sem precisar de cor nova, glow ou fonte nova:
   a diferenca vem do tamanho, da area de imagem e da composicao.

   O que nunca depende de hover: titulo, preco e CTA. O hover so revela
   contexto — a descricao e, no Vida Passada, o expansivel.

   Os tres cards sao <li> em grid. O `align-items: start` de .cards--grandes
   continua valendo, entao um card que cresce (details aberto) nao estica os
   vizinhos. --- */

/* O grid desta secao nao herda os breakpoints globais: `.cards` vira duas
   colunas ja em 600px e `.cards--3` vira tres em 1024. Para um card
   editorial de 560px de altura isso daria 258px de largura em 600 e 291px em
   1024 — fatias estreitas, o oposto da presenca pedida. Aqui cada faixa e
   declarada explicitamente. Especificidade 0,2,0 vence o 0,1,0 das regras
   globais sem precisar de !important.

   Uma coluna ate 767 · duas ate 1199 · tres daqui para cima. Com tres cards
   em duas colunas o terceiro cai sozinho numa linha nova, que e o
   comportamento pedido. */
.grupo--completas .cards--grandes {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  max-width: 1200px;
  margin-inline: auto;
}

/* Em coluna unica o card ocuparia a largura toda do container — 690px de
   largura por 520 de altura vira um retangulo deitado, que nao e o formato
   deste card. O teto o mantem vertical e centrado. */
@media (max-width: 767px) {
  .card--deep { width: 100%; max-width: 440px; margin-inline: auto; }
}

/* O teto de 860px existe pelo mesmo motivo do de 1200: sem ele, duas colunas
   em 1199px dariam cards de 527px, quase quadrados. Com ele a largura em
   duas colunas fica entre 334 e 418px. */
@media (min-width: 768px) {
  .grupo--completas .cards--grandes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
  }
  .card--deep { min-height: 560px; }
}
@media (min-width: 1200px) {
  .grupo--completas .cards--grandes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1200px;
  }
}

.card--deep {
  --veu: 10, 8, 8;              /* cor do veu, na linha de --bg-deep */
  --card-pad: clamp(1.5rem, 2.2vw, 1.75rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;         /* o .card base alinha a flex-start */
  gap: 0;
  padding: 0;
  /* Altura por min-height, nao por aspect-ratio: com altura fixa o card nao
     poderia crescer quando o expansivel do Vida Passada abre. Nas larguras
     reais isto da 0,61–0,68 no desktop e 4/5 exato no tablet. */
  min-height: 520px;
  background-color: var(--bg-deep);
  border-color: rgba(168, 135, 104, 0.25);
  transition: border-color var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}
/* O card base clareia o fundo no hover; aqui quem manda e a fotografia. */
.card--deep:hover { background-color: var(--bg-deep); }

/* O prefixo da secao nao e decorativo: `[data-reveal].is-visible` zera o
   transform mais adiante na folha e tem a mesma especificidade que
   `.card--deep:hover`. Sem os 0,3,0 daqui o empate se resolve por ordem, a
   regra de entrada vence e o card nunca sobe no hover. */
.grupo--completas .card--deep:hover,
.grupo--completas .card--deep:focus-within {
  border-color: rgba(168, 135, 104, 0.55);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

/* --- A fotografia --- */
.card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;             /* segura o zoom da imagem */
  border-radius: inherit;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* No repouso a foto continua legivel: e ela que carrega a atmosfera. */
  filter: brightness(0.68) contrast(1.06) saturate(0.82);
  transition: filter 0.45s var(--ease), transform 0.7s var(--ease);
}
/* No hover a foto recua sem sumir — continua reconhecivel por tras do texto. */
.card--deep:hover .card__media img,
.card--deep:focus-within .card__media img {
  filter: brightness(0.42) contrast(1.04) saturate(0.70);
  transform: scale(1.025);
}

/* --- Veu de leitura ---
   Nao e uma cortina uniforme: escurece o topo o bastante para o titulo,
   abre no meio para a fotografia aparecer e fecha embaixo, onde ficam preco
   e botao. O ::after e a camada extra do hover, que so entra quando a
   descricao aparece. */
.card__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to bottom,
    rgba(var(--veu), 0.60)  0%,
    rgba(var(--veu), 0.18) 30%,
    rgba(var(--veu), 0.20) 50%,
    rgba(var(--veu), 0.78) 78%,
    rgba(var(--veu), 0.94) 100%);
}
.card__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--veu), 0.30)  0%,
    rgba(var(--veu), 0.55) 45%,
    rgba(var(--veu), 0.42) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.card--deep:hover .card__veu::after,
.card--deep:focus-within .card__veu::after { opacity: 1; }

/* --- Conteudo sobre a foto ---
   Tres faixas: topo, meio que revela, rodape. O `space-between` prende o
   titulo em cima e o par preco+CTA embaixo; o meio absorve a sobra. */
.card__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--card-pad);
}

/* Titulo a esquerda, etiqueta a direita. O min-height reserva duas linhas de
   titulo em TODOS os tres cards: no Jogo Completo o par titulo+etiqueta pede
   ~295px e a coluna so tem 291 em 1200px, entao ali o titulo quebra em duas
   linhas. Com a altura reservada, quebrar nao desalinha o topo dos vizinhos
   nem desloca o que vem abaixo. */
.card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: calc(2 * 1.35 * var(--fs-base));
}
.card--deep .card__title { min-width: 0; }

/* Sombra curta e larga: sustenta o texto sobre qualquer trecho da foto sem
   virar contorno visivel. */
.card--deep .card__title,
.card--deep .card__price { text-shadow: 0 1px 14px rgba(var(--veu), 0.85); }

.card--deep .card__title { font-size: var(--fs-base); }

/* --- Faixa que revela ---
   `opacity` em vez de `display`/`visibility` por dois motivos: o conteudo
   continua na arvore de acessibilidade e o espaco ja fica reservado no
   repouso, entao aparecer nao mexe em altura nenhuma — nem do titulo, nem do
   preco, nem do botao. O pointer-events fecha a brecha do clique as cegas. */
.card__revela {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

.card__rodape {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
/* No card base o preco empurra a si mesmo para o fim com margin-top:auto.
   Aqui quem posiciona e o rodape. */
.card--deep .card__price { margin-top: 0; padding-top: 0; }

/* Somente onde existe cursor de verdade. Em toque — celular e tablet sem
   mouse — nada disto se aplica e a descricao nasce visivel. */
@media (hover: hover) and (pointer: fine) {

  .card__revela {
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
  }

  .card--deep:hover .card__revela,
  .card--deep:focus-within .card__revela,
  /* Com o expansivel aberto a descricao fica: sem isto, tirar o mouse
     apagaria a lista aberta e o card ficaria alto e vazio. */
  .card--deep:has(details[open]) .card__revela {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .card__revela { opacity: 1; translate: 0 0; pointer-events: auto; }
  }
}

/* Quem pediu menos movimento perde o zoom e o deslocamento; o escurecimento
   do hover fica, porque e o que torna o texto legivel. */
@media (prefers-reduced-motion: reduce) {
  .grupo--completas .card--deep:hover,
  .grupo--completas .card--deep:focus-within { transform: none; }
  .card--deep .card__media img,
  .card--deep:hover .card__media img,
  .card--deep:focus-within .card__media img { transform: none; }
}

/* --- Destaque do Jogo Completo ---
   Tres ajustes discretos e nenhum efeito novo: fio um pouco mais presente,
   fotografia um ponto mais clara que a das vizinhas e a etiqueta. O card
   NAO muda de tamanho. */
.card--deep.card--destaque { border-color: rgba(168, 135, 104, 0.42); }
.card--deep.card--destaque .card__media img { filter: brightness(0.74) contrast(1.06) saturate(0.85); }
.card--deep.card--destaque:hover .card__media img,
.card--deep.card--destaque:focus-within .card__media img { filter: brightness(0.46) contrast(1.04) saturate(0.72); }

/* Etiqueta sobre fotografia: caixa propria, nao mais o canto colado na borda
   do card. Fundo quase opaco para o rotulo nao competir com a imagem. */
.card--deep .card__selo {
  position: static;
  flex: 0 0 auto;
  padding: 4px 9px;
  background-color: rgba(14, 11, 11, 0.80);
  border: 1px solid rgba(168, 135, 104, 0.45);
  border-radius: var(--radius);
  /* Entrelinha do botao em vez da larga dos rotulos: com --ls-mid a etiqueta
     media 20px a mais e disputava a linha com o titulo. */
  letter-spacing: var(--ls-btn);
  color: var(--gold-light);
}

/* Dez campos numa coluna so nao cabem na faixa do meio. Em duas colunas a
   lista ocupa cinco linhas e sobra respiro. */
.card--deep .campos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0;
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}

/* O expansivel continua sendo o <details> nativo — sem JavaScript, abre no
   Enter e e anunciado como botao. So o alvo de toque encolhe, porque aqui
   ele vive dentro da faixa que revela. */
.card--deep .detalhe summary { min-height: 32px; padding-block: 4px; }
/* Com os 14 itens abertos o card cresceria uns 340px. O teto segura o
   crescimento em ~260px e a lista rola dentro dela mesma. */
.card--deep .detalhe__lista {
  max-height: 220px;
  overflow-y: auto;
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}


/* --- Amor & Relacionamentos · o baralho ----------------------------------
   Sete cartas de costas em leque que abrem e viram, mostrando na frente o
   mesmo card que a secao ja usava. Nada aqui substitui o sistema de card: a
   face frontal HOSPEDA o `.card` existente, com a mesma capa, tipografia,
   preco e botao.

   Tres modos, nesta ordem de prioridade:

     1. sem leque   — o PADRAO. As cartas sao itens de flex em fluxo normal,
                      viradas para a frente, e a secao fica exatamente como
                      antes. E o que vale sem JS, com movimento reduzido e em
                      qualquer viewport onde o leque nao caiba com elegancia.
     2. `--hover`   — >= 1200px com ponteiro fino. O baralho abre ao passar o
                      mouse e ao receber foco por teclado.
     3. `--toque`   — telas de toque, com botao explicito de abrir e fechar.

   O modo 1 ser o padrao e deliberado: o conteudo nunca depende de JS, de
   hover nem de gesto para existir. Quem liga os modos 2 e 3 e o JS, que so
   marca a classe depois de existir — se o script falhar, a secao inteira
   continua legivel e clicavel.

   Quem abre e fecha e sempre a classe `.is-open`, nos dois modos: com um
   unico estado aberto o CSS abaixo nao precisa repetir cada regra em tres
   seletores diferentes. --- */

.love-fan { position: relative; }

/* Sem leque as tres camadas novas (carta, inner, face) sao transparentes
   para o layout e as regras de `.grupo--amor .cards` seguem valendo. */
.love-fan__card  { display: flex; min-width: 0; }
.love-fan__inner { display: flex; flex: 1; min-width: 0; }
.love-fan__face  { display: flex; flex: 1; min-width: 0; }
.love-fan__face > .card { flex: 1; min-width: 0; }

/* O verso so existe quando ha leque. */
.love-fan__face--back { display: none; }

/* O botao some por padrao; o `hidden` do HTML cobre o caso sem JS. */
.love-fan__toggle { display: none; }


/* ==== O leque ============================================================
   Ligado por `.love-fan--leque`. Dentro dele as cartas saem do fluxo e
   passam a viver de transform: tanto o leque fechado quanto a grade aberta
   sao posicoes calculadas, entao a passagem de um para o outro e UMA
   interpolacao de transform — animada na GPU, sem recalcular layout a cada
   quadro.

   `--x` e `--y` sao a posicao na grade aberta, em multiplos de (carta+gap).
   `--fa`, `--fx` e `--fy` sao angulo e deslocamento no leque fechado. */

.love-fan--leque .love-fan__deck {
  --fan-gap: 24px;
  /* Largura em px, nunca em %: `--fan-w` tambem alimenta `--fan-h`, e uma
     porcentagem dentro de `height:` passaria a valer sobre a ALTURA do bloco
     pai em vez da largura. Os tres valores sao as quatro colunas que cabem
     no container em cada faixa, menos 6px de folga por carta: `5vw` do
     gutter conta a barra de rolagem e o container nao, e sem essa folga a
     linha de quatro fechava exata e vazava 15px quando a barra aparece. */
  --fan-w: 246px;
  /* 1:2,2 — proporcao de carta de tarot, e altura suficiente para capa,
     titulo, descricao, preco e botao na face frontal. */
  --fan-h: calc(var(--fan-w) * 2.3);
  --fan-linhas: 2;

  display: block;
  position: relative;
  height: calc(var(--fan-h) + 64px);   /* uma carta + a sobra da rotacao */
  margin-inline: auto;
  transition: height 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Aberto: a altura passa a ser a da grade. As duas alturas sao valores
   calculados, entao a transicao interpola de verdade — `auto` nao animaria. */
.love-fan--leque.is-open .love-fan__deck {
  height: calc(var(--fan-linhas) * var(--fan-h)
               + (var(--fan-linhas) - 1) * var(--fan-gap));
}

.love-fan--leque .love-fan__card {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--fan-w);
  height: var(--fan-h);
  margin-left: calc(var(--fan-w) / -2);
  perspective: 1600px;
  transform: translate(var(--fx), var(--fy)) rotate(var(--fa));
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i) * 22ms);
}

/* Aberto: a carta vai para a celula dela e desfaz a rotacao. A ordem do
   escalonamento inverte na volta, para o leque fechar de fora para dentro. */
.love-fan--leque.is-open .love-fan__card {
  transform: translate(calc(var(--x) * (var(--fan-w) + var(--fan-gap))),
                       calc(var(--y) * (var(--fan-h) + var(--fan-gap))))
             rotate(0deg);
  transition-delay: calc((6 - var(--i)) * 22ms);
}

/* Leque fechado. O passo de 62px deixa as sete cartas percebidas uma a uma
   sem esticar o conjunto: 6 x 62 + 280 = 652px de leque, centrado. O z-index
   cresce ate o centro, como um baralho segurado na mao. */
.love-fan--leque .love-fan__card:nth-child(1) { --fa: -12deg; --fx: -186px; --fy: 14px; z-index: 1; --x: -1.5; --y: 0; }
.love-fan--leque .love-fan__card:nth-child(2) { --fa:  -8deg; --fx: -124px; --fy: 10px; z-index: 2; --x: -0.5; --y: 0; }
.love-fan--leque .love-fan__card:nth-child(3) { --fa:  -4deg; --fx:  -62px; --fy:  5px; z-index: 3; --x:  0.5; --y: 0; }
.love-fan--leque .love-fan__card:nth-child(4) { --fa:   0deg; --fx:    0px; --fy:  0px; z-index: 4; --x:  1.5; --y: 0; }
.love-fan--leque .love-fan__card:nth-child(5) { --fa:   4deg; --fx:   62px; --fy:  5px; z-index: 3; --x:   -1; --y: 1; }
.love-fan--leque .love-fan__card:nth-child(6) { --fa:   8deg; --fx:  124px; --fy: 10px; z-index: 2; --x:    0; --y: 1; }
.love-fan--leque .love-fan__card:nth-child(7) { --fa:  12deg; --fx:  186px; --fy: 14px; z-index: 1; --x:    1; --y: 1; }

/* Aberto, quem esta na frente e quem o usuario esta lendo: o z-index do
   leque nao pode deixar carta sobrepondo carta. */
.love-fan--leque.is-open .love-fan__card { z-index: 1; }

/* --- O giro ---
   O `preserve-3d` mantem as duas faces em profundidades diferentes; sem ele
   o navegador achata tudo e o verso continua por cima. */
.love-fan--leque .love-fan__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i) * 22ms);
}
.love-fan--leque.is-open .love-fan__inner {
  transform: rotateY(180deg);
  transition-delay: calc((6 - var(--i)) * 22ms);
}

.love-fan--leque .love-fan__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(168, 135, 104, 0.22);
  border-radius: var(--card-radius);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 0.35s var(--ease);
}
.love-fan--leque .love-fan__card:hover .love-fan__face,
.love-fan--leque .love-fan__card:focus-within .love-fan__face {
  border-color: rgba(168, 135, 104, 0.45);
}

/* `backface-visibility` esconde a pintura, mas o hit-testing da face virada
   nao e consistente entre navegadores — sem isto da para clicar num CTA que
   esta de costas. Nao atrapalha o teclado: foco nao depende de
   pointer-events, e e o foco que abre o baralho. */
.love-fan--leque:not(.is-open) .love-fan__face--front,
.love-fan--leque.is-open .love-fan__face--back { pointer-events: none; }

.love-fan--leque .love-fan__face--back {
  display: block;
  background-color: var(--bg-deep);
}
.love-fan--leque .love-fan__face--back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A face frontal ja nasce virada; com o rotateY(180) do inner ela fica de
   frente para o leitor quando o baralho abre. */
.love-fan--leque .love-fan__face--front {
  transform: rotateY(180deg);
  background-color: var(--bg-card);
}
.love-fan--leque .love-fan__face--front > .card {
  width: 100%;
  height: 100%;
  border: 0;                    /* a moldura agora e a da face */
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

/* --- A face frontal por dentro ---
   O card mantem capa, titulo, descricao, preco e botao: e o mesmo
   componente. Dois ajustes so por causa da altura fixa da carta:

   1. a capa cede altura, porque numa carta de 554-616px ela nao pode comer
      os 200px que comia num card curto e largo;
   2. a descricao e a unica parte elastica. Preco e botao ficam presos no pe
      pelo `margin-top: auto` que o `.card__price` ja tinha, entao mesmo se a
      descricao nao couber inteira o CTA nunca some. */
.love-fan--leque .love-fan__face--front .card {
  --card-pad: 20px;
  display: flex;
  flex-direction: column;
}
.love-fan--leque .love-fan__face--front .card__capa {
  flex: 0 0 auto;
  max-height: 150px;
}
.love-fan--leque .love-fan__face--front .card__text {
  min-height: 0;
  overflow: hidden;
}

/* Nesta secao o `.card__acao` vive colapsado ate o hover do card. Dentro da
   carta isso seria um segundo gesto sobre o primeiro: o baralho ja abriu, o
   botao tem de estar la. Especificidade 0,3,0 vence a regra da secao sem
   depender de ordem nem de !important. */
.love-fan--leque .love-fan__face--front .card__acao {
  max-height: none;
  padding-top: 20px;
  margin-top: 0;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  translate: 0 0;
}


/* Quatro colunas cabem com folgas diferentes conforme o container cresce. */
@media (min-width: 1280px) { .love-fan--leque .love-fan__deck { --fan-w: 254px; } }
@media (min-width: 1440px) { .love-fan--leque .love-fan__deck { --fan-w: 274px; } }


/* ==== Modo toque · botao de abrir ======================================== */
.love-fan--toque .love-fan__toggle {
  /* `flex` e nao `inline-flex`: margem automatica so centraliza caixa de
     nivel de bloco, e era exatamente por isso que o botao encostava a
     esquerda. Com `fit-content` ele continua do tamanho do proprio rotulo —
     nada de largura cheia — e serve aos dois rotulos, abrir e fechar. */
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto var(--sp-4);
  padding: 12px 20px;
  min-height: 44px;
  background-color: transparent;
  border: 1px solid rgba(168, 135, 104, 0.30);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--gold-light);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.love-fan--toque .love-fan__toggle:hover,
.love-fan--toque .love-fan__toggle:focus-visible { border-color: rgba(168, 135, 104, 0.55); }

/* Um botao so, dois rotulos: o no nao muda, so qual rotulo aparece. */
.love-fan__toggle-txt--fechar { display: none; }
.love-fan--toque.is-open .love-fan__toggle-txt--abrir  { display: none; }
.love-fan--toque.is-open .love-fan__toggle-txt--fechar { display: inline; }

/* Fechado no toque o leque ocupa a largura da tela, entao as cartas ficam
   mais estreitas e o passo cai de 62px para 36px — com o passo do desktop
   as sete cartas viravam uma pilha so. */
/* A carta acompanha a tela em vez de ter largura fixa. Com 190px travados, o
   leque fechado media 408px de ponta a ponta — contando a diagonal que a
   rotacao de 12 graus acrescenta — e numa tela de 375px, onde sobram 335 de
   util, as cartas das pontas eram cortadas pelo `overflow: hidden` da secao.

   `vw` e nao `%`: a largura tambem alimenta `--fan-h`, e porcentagem dentro
   de `height` passaria a valer sobre a altura do bloco pai.

   O passo do leque sai da propria largura (11,5% dela), entao a proporcao do
   leque nao muda de tela para tela — so a escala. Meia-extensao = 3 passos +
   0,728 x largura, que da 161px em 375 contra 167 de meia-tela: cabe com
   folga em toda a faixa. */
.love-fan--toque .love-fan__deck {
  --fan-w: min(190px, 40vw);
  --fan-passo: calc(var(--fan-w) * 0.115);
}
.love-fan--toque .love-fan__card:nth-child(1) { --fx: calc(var(--fan-passo) * -3); }
.love-fan--toque .love-fan__card:nth-child(2) { --fx: calc(var(--fan-passo) * -2); }
.love-fan--toque .love-fan__card:nth-child(3) { --fx: calc(var(--fan-passo) * -1); }
.love-fan--toque .love-fan__card:nth-child(4) { --fx: 0px; }
.love-fan--toque .love-fan__card:nth-child(5) { --fx: var(--fan-passo); }
.love-fan--toque .love-fan__card:nth-child(6) { --fx: calc(var(--fan-passo) * 2); }
.love-fan--toque .love-fan__card:nth-child(7) { --fx: calc(var(--fan-passo) * 3); }

/* Em tablet sobra largura: o teto sobe e o passo acompanha sozinho. */
@media (min-width: 600px) {
  .love-fan--toque .love-fan__deck { --fan-w: min(240px, 34vw); }
}

/* Aberto no toque as cartas voltam ao fluxo normal — uma coluna no celular,
   duas no tablet, cada card com a propria altura. Manter a grade calculada
   do desktop obrigaria toda carta a ter a mesma altura fixa, o que no
   celular vira meio metro de vazio por card. Usabilidade acima do efeito. */
.love-fan--toque.is-open .love-fan__deck {
  display: flex;
  height: auto;
}
.love-fan--toque.is-open .love-fan__card {
  position: static;
  width: auto;
  height: auto;
  margin-left: 0;
  transform: none;
  perspective: none;
  /* Sem morfar posicao, que sairia do fluxo: as cartas entram escalonadas. */
  animation: cartaEntra 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i) * 55ms);
}
.love-fan--toque.is-open .love-fan__inner,
.love-fan--toque.is-open .love-fan__face {
  position: static;
  transform: none;
  transform-style: flat;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.love-fan--toque.is-open .love-fan__face {
  display: flex;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.love-fan--toque.is-open .love-fan__face--back { display: none; }
.love-fan--toque.is-open .love-fan__face--front > .card {
  height: auto;
  background-color: #121010;
  border: 1px solid rgba(168, 135, 104, 0.24);
  border-radius: var(--card-radius);
}
.love-fan--toque.is-open .love-fan__face--front .card__capa { max-height: 200px; }
.love-fan--toque.is-open .love-fan__face--front .card__text { overflow: visible; }

@keyframes cartaEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* ==== Movimento reduzido =================================================
   Sem leque e sem giro: a secao volta a ser a grade de sempre, ja de frente.
   Um baralho que abre sem transicao seria um estalo, pior que nao abrir.
   O JS tambem nao liga modo nenhum aqui; estas regras sao a rede de baixo,
   para o caso de a preferencia mudar depois do carregamento. */
@media (prefers-reduced-motion: reduce) {
  .love-fan__toggle { display: none !important; }
  .love-fan__deck   { display: flex !important; height: auto !important; }
  .love-fan__card {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    animation: none !important;
  }
  .love-fan__inner,
  .love-fan__face {
    position: static !important;
    transform: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
  }
  .love-fan__face--back { display: none !important; }
  .love-fan__face {
    display: flex !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .love-fan__face--front > .card {
    height: auto !important;
    background-color: #121010 !important;
    border: 1px solid rgba(168, 135, 104, 0.24) !important;
    border-radius: var(--card-radius) !important;
  }
}


/* --- 08 · Como funciona ------------------------------------------------ */
.processo {
  padding-block: var(--section-y);
  background-color: var(--bg-section);
  --photo-fade: 19, 16, 15;
}
.processo__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

.processo__media { position: relative; }
.processo__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.05) contrast(1.06) brightness(0.95);
}
.processo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(19, 16, 15, 0.7) 0%, rgba(19, 16, 15, 0) 26%,
      rgba(19, 16, 15, 0) 74%, rgba(19, 16, 15, 0.7) 100%),
    linear-gradient(to bottom,
      rgba(19, 16, 15, 0.5) 0%, rgba(19, 16, 15, 0) 22%,
      rgba(19, 16, 15, 0) 70%, rgba(19, 16, 15, 0.85) 100%),
    linear-gradient(to top, rgba(123, 61, 51, 0.18) 0%, rgba(123, 61, 51, 0) 50%);
}

.passos { display: grid; gap: var(--sp-4); margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.passo { display: flex; align-items: flex-start; gap: var(--sp-3); }
.passo__n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-hair);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-light);
}
.passo__title {
  margin-bottom: 2px;
  font-family: var(--sans);
  font-size: var(--fs-read);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-main);
}
.passo p { font-size: var(--fs-read); line-height: 1.7; color: var(--text-secondary); }
.passo > div { padding-top: 3px; }


/* --- 10 · Depoimentos -------------------------------------------------- */
.depo { padding-block: var(--section-y); background-color: var(--bg-main); }
.depo__list { display: grid; gap: var(--sp-4); }

.depo__card {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.depo__card blockquote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-main);
}
.depo__author {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-muted);
}
.depo__author cite { font-style: normal; }


/* --- Depoimentos · carrossel de prints -----------------------------------
   Os prints sao os protagonistas: nenhuma moldura de celular, nenhum mockup,
   nenhuma estrela inventada. So a captura dentro de um cartao discreto.

   A base e `scroll-snap` nativo, nao um carrossel de `transform`. Tres
   ganhos concretos: o arrastar no celular fica com a inercia do proprio
   sistema, o teclado e o leitor de tela navegam pela regiao rolavel de
   graca, e sem JS a faixa continua rolando — o JS so acrescenta setas,
   indicadores, destaque do slide central e o avanco automatico. --- */

.depo__carrossel {
  --depo-slide: 100%;
  --depo-alt: clamp(440px, 46vw, 600px);
  --depo-gap: var(--sp-4);
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Halo muito discreto atras do slide central, na cor de vinho da paleta.
   Fica atras de tudo e nao interfere nas particulas, que sao uma camada
   propria do documento. */
.depo__carrossel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 92%);
  height: 92%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
              rgba(90, 35, 42, 0.08), transparent 60%);
  pointer-events: none;
}

/* A janela. O padding lateral e o que permite ao primeiro e ao ultimo slide
   chegarem ao centro: sem ele, o snap do primeiro para na borda esquerda. */
.depo__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* a navegacao e pelas setas */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.depo__viewport::-webkit-scrollbar { display: none; }

.depo__track {
  display: flex;
  gap: var(--depo-gap);
  padding-inline: calc((100% - var(--depo-slide)) / 2);
  padding-block: var(--sp-3);            /* respiro para o recuo dos laterais */
}

.depo__slide {
  flex: 0 0 var(--depo-slide);
  max-width: var(--depo-slide);
  scroll-snap-align: center;
  /* Os laterais recuam para o central ficar na frente. O JS marca quem esta
     no centro; sem JS todos ficam legiveis, que e o padrao seguro. */
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.depo__carrossel.is-pronto .depo__slide { opacity: 0.45; transform: scale(0.94); }
.depo__carrossel.is-pronto .depo__slide.is-ativo { opacity: 1; transform: scale(1); }

/* O cartao. Padding fino: e uma borda, nao uma moldura. */
.depo__print {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--depo-alt);
  padding: 10px;
  background-color: var(--bg-section);
  border: 1px solid rgba(168, 135, 104, 0.24);
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* `contain` e nao `cover`: sao capturas de conversa, e cortar corta texto.
   As proporcoes vao de 0,76 a 1,48, entao a sobra fica em cima e embaixo nos
   prints largos e nas laterais nos altos — preenchida pelo proprio cartao. */
.depo__print img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: calc(var(--card-radius) - 4px);
}

/* --- Controles ---
   Numa fila abaixo do carrossel, nao sobre os prints: em telas estreitas uma
   seta flutuante cobriria justamente o texto da conversa. */
/* Escondidos ate o JS assumir: sem ele as setas e os indicadores nao fazem
   nada, e um botao focavel que nao responde e pior do que botao nenhum. A
   rolagem nativa continua valendo, entao nenhum depoimento fica inacessivel. */
.depo__controles { display: none; }
.depo__carrossel.is-pronto .depo__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.depo__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--bg-section);
  border: 1px solid rgba(168, 135, 104, 0.30);
  border-radius: 50%;
  color: var(--gold-light);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.depo__seta svg { width: 20px; height: 20px; }
.depo__seta:hover,
.depo__seta:focus-visible {
  background-color: var(--primary);
  border-color: rgba(168, 135, 104, 0.45);
  color: var(--text-main);
}

.depo__dots { display: flex; align-items: center; gap: 10px; }

/* Alvo de toque de 24px com ponto de 7px: confortavel de acertar sem virar
   um indicador grande. */
.depo__dot {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.depo__dot::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(168, 135, 104, 0.25);
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.depo__dot[aria-current="true"]::before {
  background-color: var(--gold);
  transform: scale(1.25);
}
.depo__dot:hover::before { background-color: var(--gold-light); }

.depo__micro {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

/* Larguras do slide. O padding do track deriva daqui, entao trocar so estas
   linhas reposiciona tudo. Em celular o slide ocupa a largura toda e os
   vizinhos nao aparecem; a partir de 768 sobra margem para o espiar. */
@media (min-width:  768px) { .depo__carrossel { --depo-slide: 500px; } }
@media (min-width: 1024px) { .depo__carrossel { --depo-slide: 560px; } }
@media (min-width: 1280px) { .depo__carrossel { --depo-slide: 640px; } }

/* Sem movimento: o recuo dos laterais some, a rolagem deixa de ser suave e o
   avanco automatico nem chega a ligar (quem decide isso e o JS). */
@media (prefers-reduced-motion: reduce) {
  .depo__viewport { scroll-behavior: auto; }
  .depo__carrossel.is-pronto .depo__slide,
  .depo__carrossel.is-pronto .depo__slide.is-ativo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --- 11 · FAQ ---------------------------------------------------------- */
.faq { padding-block: var(--section-y); background-color: var(--bg-section); }


/* --- 12 · Benefício para visitantes -------------------------------------
   Um ticket, não um cupom. A base é escura como o resto do site e o metal
   aparece só como reflexo: a camada colorida vive sob um véu de #0E0B0B que
   nunca desce de 58% de opacidade. Medido no pior caso — champagne por baixo,
   faixa de luz por cima — o texto sobre o metal mantém cerca de 4,5:1; no
   corpo do ticket, onde o véu passa de 76%, fica acima de 9:1.
   Fundo, brilho, textura, serrilhado e recortes são CSS: nenhuma imagem.
   ------------------------------------------------------------------------- */
.site-benefit {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background-color: var(--bg-main);
}

.site-benefit__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

/* O eyebrow padrão tem entrelinha 1 porque em toda a página cabe numa linha
   só. Este é o único longo o bastante para quebrar no celular. */
.site-benefit .eyebrow { line-height: 1.45; }

.site-benefit__lead {
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* O halo mora fora do ticket de propósito: o ticket é recortado por mask, e
   qualquer luz pintada nele seria cortada junto com os recortes laterais.
   Assim a seção segue escura e só o entorno do ticket acende. */
.site-benefit__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}
.site-benefit__halo {
  position: absolute;
  inset: -24% -16%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(90, 35, 42, 0.15), transparent 65%);
}

/* A flutuação vive no invólucro e a inclinação do cursor no ticket: duas
   animações na mesma propriedade brigariam pelo mesmo transform. */
.site-benefit__ticket-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  perspective: 1200px;
  filter:
    drop-shadow(0 15px 25px rgba(0, 0, 0, 0.35))
    drop-shadow(0 35px 55px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 25px rgba(90, 35, 42, 0.08));
  animation: ticketFlutua 6.5s ease-in-out infinite;
}

@keyframes ticketFlutua {
  0%, 100% { transform: translateY(0) rotate(-0.3deg); }
  50%      { transform: translateY(-8px) rotate(0.3deg); }
}

/* Recortes laterais por mask: a união de duas metades furadas devolve o
   retângulo inteiro menos os dois semicírculos, e o fundo da seção aparece
   pelo furo — sem círculo pintado por cima do metal. No celular a picotagem
   é horizontal, então os recortes ficam nas laterais. */
.site-benefit__ticket {
  --stub: 96px;        /* altura do canhoto no celular */
  --recorte: 13px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: var(--radius);
  background-color: var(--bg-section);
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--t-fast) var(--ease);
  -webkit-mask:
    radial-gradient(circle var(--recorte) at 0    calc(100% - var(--stub)), #0000 98%, #000 100%) left  / 51% 100% no-repeat,
    radial-gradient(circle var(--recorte) at 100% calc(100% - var(--stub)), #0000 98%, #000 100%) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--recorte) at 0    calc(100% - var(--stub)), #0000 98%, #000 100%) left  / 51% 100% no-repeat,
    radial-gradient(circle var(--recorte) at 100% calc(100% - var(--stub)), #0000 98%, #000 100%) right / 51% 100% no-repeat;
}
.site-benefit__ticket-wrap:hover .site-benefit__ticket { --lift: -6px; }

/* Metal camaleão. Três camadas numa só pintura, do topo para o fundo: véu
   escuro que protege a leitura, reflexos cônicos e a base metálica. Só as
   duas de baixo se movem; o véu fica parado sobre o texto. */
.site-benefit__ticket-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 82% at 50% 50%,
      rgba(14, 11, 11, 0.93) 0%,
      rgba(14, 11, 11, 0.86) 55%,
      rgba(14, 11, 11, 0.45) 100%),
    conic-gradient(from 200deg at 32% 24%,
      rgba(90, 35, 42, 0.92),
      rgba(123, 61, 51, 0.78),
      rgba(168, 135, 104, 0.62),
      rgba(215, 184, 154, 0.52),
      rgba(94, 102, 78, 0.26),
      rgba(106, 45, 52, 0.80),
      rgba(61, 23, 27, 0.95),
      rgba(90, 35, 42, 0.92)),
    linear-gradient(135deg,
      #3D171B 0%,
      #7B3D33 20%,
      #A88768 38%,
      #D7B89A 48%,
      #6A2D34 63%,
      #A88768 78%,
      #3D171B 100%);
  background-size: 100% 100%, 220% 220%, 200% 200%;
  background-position: 50% 50%, 0% 50%, 0% 50%;
}

@keyframes benefitMetal {
  from { background-position: 50% 50%,   0% 50%,   0% 50%; }
  to   { background-position: 50% 50%, 100% 50%, 100% 50%; }
}

/* Faixa de luz diagonal. Anda por transform — composta pela GPU — e por isso
   pode continuar no celular, ao contrário do metal, que repinta. */
.site-benefit__ticket::before {
  content: "";
  position: absolute;
  inset: -30% -70%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(215, 184, 154, 0.16) 45%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 65%);
  animation: benefitBrilho 11s ease-in-out infinite alternate;
}

@keyframes benefitBrilho {
  from { transform: translate3d(-32%, 0, 0); }
  to   { transform: translate3d( 32%, 0, 0); }
}

/* Fio cruzado de 1px, como guilhochê de certificado. Tira o ar de gradiente
   digital chapado sem chegar perto de atrapalhar a leitura. */
.site-benefit__ticket-textura {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Line-art do sprite que a página já carrega. É textura, não conteúdo. */
.site-benefit__signo {
  position: absolute;
  z-index: 1;
  display: block;
  color: var(--champagne);
  pointer-events: none;
}
.site-benefit__signo svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-benefit__signo--lua     { top: -14px;    right: 4%;   width: 74px; height: 74px; opacity: 0.10; }
.site-benefit__signo--estrela { top: 44%;      left: -12px; width: 46px; height: 46px; opacity: 0.12; }
.site-benefit__signo--espiral { bottom: -20px; right: 5%;   width: 96px; height: 96px; opacity: 0.07; }

.site-benefit__corpo {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 8px;
  padding: clamp(1.25rem, 3.5vw, 1.5rem);
}

.site-benefit__marca { display: grid; gap: 5px; margin-bottom: 2px; }
.site-benefit__marca-nome {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--text-main);
}
.site-benefit__marca-papel {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.site-benefit__titulo { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); }

.site-benefit__para {
  font-size: var(--fs-read);
  letter-spacing: var(--ls-btn);
  color: var(--gold-light);
}
.site-benefit__desc {
  max-width: 42ch;
  font-size: var(--fs-read);
  line-height: 1.7;
  color: var(--text-secondary);
}

.site-benefit__cta { margin-top: 4px; }

.site-benefit__micro {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Canhoto: no celular é uma faixa embaixo; no desktop, a coluna da direita. */
.site-benefit__stub {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  min-height: var(--stub);   /* casa com os recortes: a mask corta em --stub */
  padding: var(--sp-3);
  border-top: 1px dashed rgba(231, 215, 200, 0.22);
}
.site-benefit__badge {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-main);
}
.site-benefit__codigo {
  width: 84px;
  height: 20px;
  opacity: 0.45;
  background: repeating-linear-gradient(90deg,
    rgba(231, 215, 200, 0.85) 0 1px,
    transparent 1px 3px,
    rgba(231, 215, 200, 0.85) 3px 5px,
    transparent 5px 9px);
}


/* --- 13 · CTA final ---------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  overflow: hidden;
  padding-block: var(--section-y);
  background-color: var(--bg-main);
  text-align: center;
}

.cta__media { position: absolute; inset: 0; z-index: 1; }
/* Enquadramento deliberadamente diferente do da abertura das consultas:
   mesma foto, outro recorte, para as duas seções não se repetirem. */
/* Mesma foto da abertura, sem espelhamento e com recorte fechado: aqui ela
   é atmosfera atrás de um texto centralizado, não protagonista. As duas
   seções não repetem a mesma composição. */
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 68%;
  filter: saturate(1.02) contrast(1.05) brightness(0.85);
}

.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(14, 11, 11, 0.94) 0%,
      rgba(14, 11, 11, 0.86) 40%,
      rgba(14, 11, 11, 0.94) 100%),
    radial-gradient(90% 70% at 50% 50%,
      rgba(14, 11, 11, 0.55) 0%, rgba(14, 11, 11, 0.95) 100%);
}

.cta__inner { position: relative; z-index: 3; }
.cta__lead {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.cta__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* --- 14 · Footer ------------------------------------------------------- */
.footer {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background-color: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
}
.footer__inner { display: grid; gap: var(--sp-5); }
.footer__tag {
  margin-top: var(--sp-2);
  max-width: 34ch;
  font-size: var(--fs-read);
  line-height: 1.7;
  color: var(--text-muted);
}

.footer__nav ul,
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Sem isto os links do rodapé têm 15px de altura — alvo de toque pequeno
   demais no celular. O padding não muda o espaçamento visual porque o gap
   da lista é maior que ele. */
.footer__nav a,
.footer__social a { display: inline-block; padding-block: 14px; }

.footer__nav a:hover,
.footer__social a:hover { color: var(--gold-light); }

.footer__legal {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-read);
  line-height: 1.7;
  color: var(--text-muted);
}
.footer__aviso { max-width: 64ch; }

/* Rotulos dos grupos do rodape. Nascem escondidos: no desktop o rodape e uma
   fila horizontal onde eles nao cabem, e o layout de la esta aprovado. */
.footer__grupo { display: none; }

/* Assinatura de autoria, ultima linha do rodape. Discreta de proposito: e
   credito, nao marca — nao pode disputar atencao com o nome logo acima.

   Sem `justify-self`: como item de grade ela estica, entao o fio do topo
   atravessa a largura toda e o texto segue o alinhamento herdado — a
   esquerda no desktop, centrado no celular, sem precisar de regra para cada
   caso. O fio e mais fraco (0,10) que o dos grupos do rodape (0,18): separa
   sem virar mais uma divisao de peso igual. */
.footer__signature {
  grid-column: 1 / -1;
  display: block;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(168, 135, 104, 0.10);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.8;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.footer__signature:hover,
.footer__signature:focus-visible {
  color: var(--gold-light);
  opacity: 1;
}
.footer__signature:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}


/* --- Botão flutuante --------------------------------------------------- */
.float {
  position: fixed;
  /* A area segura entra somada, senao em iPhone o botao assenta em cima da
     barra de gestos. O `0px` de reserva mantem a regra valida onde `env()`
     nao existe — sem ele a declaracao inteira seria descartada. */
  right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1.125rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease),
              visibility var(--t-slow) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.float__icone { display: block; width: 100%; height: 100%; }
.float.is-visible { opacity: 1; visibility: visible; transform: none; }
.float.is-visible:hover { box-shadow: 0 8px 26px rgb(0 0 0 / 0.45); transform: scale(1.06); }


/* --- 15 · Poeira luminosa ------------------------------------------------
   Reinterpretação do céu estrelado: não é céu nenhum, é pó em suspensão.

   Onde ela mora: fixa, em z-index 1, primeira no documento. Fica ACIMA do
   fundo das seções e ABAIXO de tudo que é conteúdo, porque todo conteúdo
   desta página vive em contentor com z-index próprio — fotografia, véu,
   card, texto e botão estão todos em 1 ou mais, e empatam por ordem de
   documento, que a poeira perde por vir primeiro.

   Como é desenhada: três camadas, cada uma um único elemento com um ladrilho
   de radial-gradients que se repete. Nenhum box-shadow, nenhum nó por ponto.
   O movimento é transform — a GPU compõe e não repinta — e o laço é exato:
   cada camada anda exatamente a altura do próprio ladrilho, então o padrão
   volta a coincidir consigo mesmo e nunca salta.
   -------------------------------------------------------------------------- */
.ambient-stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.28;
  /* A máscara é o que separa poeira de céu estrelado: o miolo da tela, onde
     mora a leitura, fica limpo, e os pontos se concentram nas laterais e nos
     cantos — espaço negativo, não conteúdo. */
  -webkit-mask-image: radial-gradient(112% 78% at 50% 44%,
    transparent 0%, transparent 16%,
    rgba(0, 0, 0, 0.42) 46%,
    rgba(0, 0, 0, 0.85) 72%,
    #000 100%);
  mask-image: radial-gradient(112% 78% at 50% 44%,
    transparent 0%, transparent 16%,
    rgba(0, 0, 0, 0.42) 46%,
    rgba(0, 0, 0, 0.85) 72%,
    #000 100%);
  transition: opacity 1.8s var(--ease);
}

/* Sobre a fotografia da abertura e em volta do ticket metálico a poeira quase
   some: nesses dois lugares já existe um objeto disputando o olho. */
.ambient-stars.is-discreto { opacity: 0.09; }

/* A luz atmosférica de vinho subindo do rodapé foi tentada aqui e retirada:
   dentro desta camada ela recebe a mesma máscara dos pontos, e a máscara
   recorta nela um arco escuro bem visível no meio da tela. Fora da camada,
   ela teria de disputar z-index com o conteúdo. A página já tem atmosfera
   pelos véus das fotografias e pelo halo do ticket. */

.ambient-stars__camada {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Um ladrilho a mais de altura: quando a camada sobe a própria altura de
     ladrilho, a base ainda cobre a tela e não abre faixa vazia. */
  height: calc(100% + var(--ladrilho));
  background-repeat: repeat;
  animation: poeiraSobe var(--passo) linear infinite;
}

@keyframes poeiraSobe {
  to { transform: translate3d(0, calc(-1 * var(--ladrilho)), 0); }
}

/* Camada 1 — 12 pontos de 1px por ladrilho de 460px. Numa tela de 1440
   equivale a cerca de 74 pontos, dos quais a máscara deixa ver uns 45. */
.ambient-stars__camada--1 {
  --ladrilho: 460px;
  --passo: 190s;
  background-size: 460px 460px;
  background-image:
    radial-gradient(circle 0.9px at  6%  9%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 12% 79%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 19% 63%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 27% 22%, var(--po-ouro)      0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 38% 88%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 44% 41%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 57% 14%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 63% 72%, var(--po-cobre)     0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 71% 34%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 78% 91%, var(--po-ouro)      0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 86% 52%, var(--po-champagne) 0 55%, transparent 100%),
    radial-gradient(circle 0.9px at 93% 26%, var(--po-champagne) 0 55%, transparent 100%);
}

/* Camada 2 — 5 pontos de 1,5px por ladrilho de 620px: uns 17 na tela,
   uns 10 depois da máscara. */
.ambient-stars__camada--2 {
  --ladrilho: 620px;
  --passo: 260s;
  background-size: 620px 620px;
  background-image:
    radial-gradient(circle 1.4px at 14% 31%, var(--po-champagne) 0 45%, transparent 100%),
    radial-gradient(circle 1.4px at 36% 77%, var(--po-ouro)      0 45%, transparent 100%),
    radial-gradient(circle 1.4px at 58% 18%, var(--po-champagne) 0 45%, transparent 100%),
    radial-gradient(circle 1.4px at 74% 59%, var(--po-champagne) 0 45%, transparent 100%),
    radial-gradient(circle 1.4px at 91% 84%, var(--po-ouro)      0 45%, transparent 100%);
}

/* Camada 3 — 3 pontos de 2px por ladrilho de 820×700: uns 7 na tela, uns 4
   depois da máscara. É a única que respira, e só ela, para não virar
   pisca-pisca: a amplitude toda cabe entre 0,10 e 0,17 de opacidade final. */
.ambient-stars__camada--3 {
  --ladrilho: 700px;
  --passo: 360s;
  background-size: 820px 700px;
  background-image:
    radial-gradient(circle 2.1px at 22% 44%, var(--po-champagne) 0 35%, transparent 100%),
    radial-gradient(circle 2.1px at 61% 12%, var(--po-ouro)      0 35%, transparent 100%),
    radial-gradient(circle 2.1px at 84% 71%, var(--po-champagne) 0 35%, transparent 100%);
  animation:
    poeiraSobe var(--passo) linear infinite,
    poeiraRespira 12s ease-in-out infinite;
}

@keyframes poeiraRespira {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

/* ==========================================================================
   07 · ANIMAÇÃO
   Discreta por princípio: fade curto com 18px de deslocamento, nada mais.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-in) var(--ease), transform var(--t-in) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.strip__list [data-reveal]:nth-child(2),
.cards [data-reveal]:nth-child(2),
.depo__list [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.strip__list [data-reveal]:nth-child(3),
.cards [data-reveal]:nth-child(3),
.depo__list [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.strip__list [data-reveal]:nth-child(4),
.cards [data-reveal]:nth-child(4) { transition-delay: 240ms; }

/* O hero não usa [data-reveal]: ele depende do IntersectionObserver, e se o
   JS falhar a primeira tela fica em branco. Aqui a entrada é CSS puro. */
@keyframes entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__content { animation: entra var(--t-in) var(--ease) both; }
.hero__media   { animation: entra 1s var(--ease) both; }

body.is-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* O ticket para de flutuar, o metal para de correr e a faixa de luz vira
     um reflexo fixo. O objeto continua metálico, só não se mexe. */
  .site-benefit__ticket-wrap { animation: none; }
  .site-benefit__ticket-bg   { animation: none; }
  .site-benefit__ticket::before {
    animation: none;
    transform: translate3d(-6%, 0, 0);
    opacity: 0.5;
  }
  .site-benefit__ticket { transition: none; }

  /* A capa do card para de se aproximar no hover. */
  .card__capa img,
  .card:hover .card__capa img,
  .card:focus-within .card__capa img { transform: none; transition: none; }

  /* A poeira para de subir e a camada 3 para de respirar. Os pontos
     continuam lá, na mesma posição e no mesmo brilho. */
  .ambient-stars__camada { animation: none; }
  .ambient-stars__camada--3 { animation: none; opacity: 0.8; }
  .ambient-stars { transition: none; }
}


/* ==========================================================================
   08 · RESPONSIVIDADE — mobile-first
   Verificado em 375, 390, 430, 768, 1024, 1280 e 1440.
   ========================================================================== */

/* --- Até 1199px: menu em painel ---
   O menu completo media cerca de 620px quando os rótulos tinham 12px. Com
   14px ele passou de 810px e, somado à marca e ao botão, deixou de caber
   numa janela de 1024: o cabeçalho vazava 18px e a página ganhava barra
   horizontal. O limiar subiu junto com a tipografia. Abaixo disso, painel. */
@media (max-width: 1199px) {
  .burger { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--gutter);
    overflow-y: auto;
    background-color: var(--bg-main);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-slow) var(--ease),
                transform var(--t-slow) var(--ease),
                visibility var(--t-slow) var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--border-soft); }
  .nav__list li:first-child { border-top: 1px solid var(--border-soft); }
  .nav__link {
    padding-block: var(--sp-3);
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-main);
  }
  .nav__link::after { display: none; }
  .nav__cta { align-self: flex-start; }
}

/* --- Até 767px: acabamento de celular --- */
@media (max-width: 767px) {

  /* O botao flutuante ocupa os ultimos ~74px do canto direito. Sem esta
     folga ele assenta sobre a ultima linha do rodape. So aqui: no desktop
     ele fica sobre a margem lateral, que ja e larga. */
  .footer { padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + 56px); }

  /* Dez indicadores mais duas setas pedem 466px numa tela que oferece 335 de
     util. Em linha unica os indicadores encolhiam de 24px para ~11px de alvo
     de toque, com dez deles lado a lado. Aqui eles ganham linha propria: o
     alvo volta aos 24px e a fila mede 312px, que cabe desde 375. */
  .depo__controles { flex-wrap: wrap; gap: var(--sp-3); }
  .depo__dots {
    order: -1;              /* indicadores logo abaixo do print, setas embaixo */
    flex-basis: 100%;
    justify-content: center;
    gap: 8px;
  }

  /* --- CTAs de secao ---
     O `.btn` e inline-flex, entao em bloco de texto ele assenta onde o
     alinhamento mandar — a esquerda, encostado na coluna. Vira nivel de
     bloco: ocupa a largura do conteudo (que ja e a viewport menos os 20px de
     gutter do container, dos dois lados) e centraliza. O teto de 550px so
     entra em tablet estreito; em celular a largura do conteudo manda. */
  .btn--secao {
    display: flex;
    width: 100%;
    max-width: 550px;
    margin-inline: auto;
  }

  /* --- Rodape ---
     No desktop e uma fila horizontal; aqui vira uma coluna centrada, com os
     grupos separados por fios em vez de por vazio. O `gap: 0` do grid e
     proposital: quem espaca agora e o padding de cada grupo, que e tambem o
     que segura os fios. */
  .footer {
    padding-top: clamp(3rem, 9vw, 4rem);
    /* O flutuante ocupa os ultimos ~74px do canto direito; 96px afastam o
       aviso legal dele com folga, e a area segura entra por cima. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .footer__inner {
    max-width: 520px;
    margin-inline: auto;
    justify-items: center;
    text-align: center;
    gap: 0;
  }

  .footer__marca { padding-bottom: var(--sp-5); }
  .footer__marca .logo { align-items: center; }
  .footer__tag { max-width: 30ch; margin-inline: auto; }

  .footer__grupo {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--gold);
  }

  .footer__nav,
  .footer__social {
    width: 100%;
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line-hair);
  }

  /* Em coluna e centrados. O gap fica em zero de proposito: cada link ja
     carrega 14px de padding em cima e embaixo para o alvo de toque passar de
     44px, o que ja rende 28px entre uma linha de texto e a seguinte. Somar
     gap a isso abriria a lista demais. */
  .footer__nav ul,
  .footer__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .footer__legal {
    width: 100%;
    padding-top: var(--sp-5);
    border-top-color: var(--line-hair);
    justify-items: center;
  }
  .footer__aviso {
    max-width: 44ch;
    margin-inline: auto;
    font-size: var(--fs-xs);
  }

  /* A grade aqui usa `gap: 0`, entao o afastamento vem por margem. No
     desktop o gap de 32px do rodape ja faz esse papel. */
  .footer__signature { margin-top: var(--sp-5); }
}

/* --- Até 767px: poeira mais rala ---
   Ladrilho maior é a forma barata de rarear: o mesmo desenho espalhado em
   mais área dá cerca de metade dos pontos, sem trocar nenhum gradiente. A
   camada dos pontos maiores sai de cena — numa tela estreita ela é a única
   que o olho pegaria sozinha. */
@media (max-width: 767px) {
  .ambient-stars { opacity: 0.20; }
  .ambient-stars__camada--1 { --ladrilho: 620px; background-size: 620px 620px; }
  .ambient-stars__camada--2 { --ladrilho: 820px; background-size: 820px 820px; }
  .ambient-stars__camada--3 { display: none; }
}


/* --- Até 767px: fotografia acima, texto embaixo ---
   Num retrato de 390px de largura o escurecimento horizontal não serve: ele
   só apaga um terço lateral e o texto cai em cima do rosto. Aqui o
   escurecimento é VERTICAL — o rosto fica visível no topo, o texto assenta
   na base escura.

   Opacidades medidas contra o pior caso (pixel branco da foto atrás da
   letra): 0,82 entrega 8,2:1 e 0,97 é praticamente opaco. --- */
@media (max-width: 767px) {

  .hero { align-items: flex-end; }
  .hero__inner { padding-bottom: clamp(2rem, 6vw, 3rem); }
  .hero__content { max-width: none; }
  .hero__title { max-width: 12ch; }
  .hero__media img { object-position: 62% 16%; }

  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(14, 11, 11, 0.74)  0%,
        rgba(14, 11, 11, 0.24) 20%,
        rgba(14, 11, 11, 0.80) 52%,
        rgba(14, 11, 11, 0.97) 100%),
      linear-gradient(to top, rgba(123, 61, 51, 0.16) 0%, rgba(123, 61, 51, 0) 45%);
  }

  /* Mesma lógica na abertura das consultas. */
  .intro { align-items: flex-end; min-height: 78vh; }
  .intro__media img { object-position: center 22%; }
  .intro__scrim {
    background:
      linear-gradient(180deg,
        rgba(14, 11, 11, 0.72)  0%,
        rgba(14, 11, 11, 0.22) 18%,
        rgba(14, 11, 11, 0.82) 50%,
        rgba(14, 11, 11, 0.97) 100%);
  }
}


/* --- 480px+ : diferenciais em 2 × 2 --- */
@media (min-width: 480px) {
  .strip__list { grid-template-columns: repeat(2, 1fr); }
}

/* --- 600px+ : cards de consulta em duas colunas --- */
@media (min-width: 600px) {
  .cards      { grid-template-columns: repeat(2, 1fr); }
  .depo__list { grid-template-columns: repeat(2, 1fr); }
  .grupo--amor .love-fan__card { flex-basis: calc((100% - 1.25rem) / 2 - 0.1px); }
}

/* --- 768px+ : tablet --- */
@media (min-width: 768px) {
  .hero__content  { max-width: 420px; }
  .intro__content { max-width: 520px; }

  /* O ticket deita: corpo à esquerda, canhoto à direita, picotagem vertical
     e os recortes migram para o topo e a base. */
  .site-benefit__ticket-wrap { max-width: 620px; }

  .site-benefit__ticket {
    --stub: 132px;             /* agora é a largura do canhoto */
    grid-template-rows: none;
    grid-template-columns: 1fr var(--stub);
    min-height: 280px;
    -webkit-mask:
      radial-gradient(circle var(--recorte) at calc(100% - var(--stub)) 0,    #0000 98%, #000 100%) top    / 100% 51% no-repeat,
      radial-gradient(circle var(--recorte) at calc(100% - var(--stub)) 100%, #0000 98%, #000 100%) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--recorte) at calc(100% - var(--stub)) 0,    #0000 98%, #000 100%) top    / 100% 51% no-repeat,
      radial-gradient(circle var(--recorte) at calc(100% - var(--stub)) 100%, #0000 98%, #000 100%) bottom / 100% 51% no-repeat;
  }

  .site-benefit__stub {
    min-height: 0;             /* deitado, quem define a largura e a coluna */
    border-top: none;
    border-left: 1px dashed rgba(231, 215, 200, 0.22);
    align-content: center;
    gap: var(--sp-4);
  }
  .site-benefit__badge { writing-mode: vertical-rl; transform: rotate(180deg); }

  /* Deitado sobra topo: a lua sai de cima da marca e vai para o meio. */
  .site-benefit__signo--lua { right: 34%; }

  /* O metal só passa a correr aqui. No celular ele fica parado: mover a
     posição de três gradientes repinta a cada quadro, e a faixa de luz, que
     anda por transform, já dá vida suficiente ao objeto. */
  .site-benefit__ticket-bg { animation: benefitMetal 13s ease-in-out infinite alternate; }
}

/* --- 1024px+ : desktop --- */
@media (min-width: 1024px) {

  .strip__list { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

  /* Referência: texto 35–40%, fotografia dominando o restante. */
  .hero__content { max-width: 40%; min-width: 400px; }

  /* Referência: foto 44%, texto 56%. */
  .sobre__inner { grid-template-columns: 44fr 56fr; align-items: center; }
  .sobre__inner > * { min-width: 0; }

  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .cards--5 { grid-template-columns: repeat(3, 1fr); }
  .depo__list { grid-template-columns: repeat(3, 1fr); }

  /* Tres colunas dao 304px em 1024 e 392px em 1279 — exatamente a mesma
     largura que os cards das leituras objetivas tem nesta faixa. */
  .grupo--amor .love-fan__card { flex-basis: calc((100% - 2.5rem) / 3 - 0.1px); }

  /* Referência: foto 47%, conteúdo 53%. */
  .processo__inner { grid-template-columns: 47fr 53fr; }
  .processo__inner > * { min-width: 0; }


  .footer__inner {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .footer__legal {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--sp-5);
  }
  .footer__aviso { order: -1; }
}

/* --- 1280px+ : mais respiro --- */
@media (min-width: 1280px) {
  .hero__content { max-width: 38%; }

  /* So a partir daqui a quarta coluna cabe sem apertar: em 1280 o card fica
     com 289px e em 1440 com 315px. Abaixo disto cairia para ~270 e o titulo
     em caixa-alta comecaria a quebrar em tres linhas. Sete cards viram 4 + 3,
     com a fila de baixo centralizada pelo justify-content. */
  .grupo--amor .love-fan__card { flex-basis: calc((100% - 3.75rem) / 4 - 0.1px); }

  /* Texto à esquerda, ticket à direita. Só aqui: com 45/55 abaixo de 1280 a
     coluna do ticket cai para ~470px e ele deixa de ter formato de ingresso.
     Até 1279 a seção fica empilhada e o ticket usa a largura cheia. */
  .site-benefit__inner { grid-template-columns: 45fr 55fr; }
  .site-benefit__inner > * { min-width: 0; }
}


/* --- 1350px+ : as cinco leituras objetivas numa linha só ---
   Descia de 1440 para cá porque o container desta seção agora vai a 1560:
   em 1350 cada card ainda fica com ~240px, que é o piso confortável para o
   título em caixa-alta não quebrar em três linhas. */
@media (min-width: 1350px) {
  .cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Sem esticamento, quem alinha os preços é o texto. Nesta faixa a descrição
     mais longa ocupa cinco linhas e as demais quatro; reservar as cinco deixa
     os cinco preços na mesma altura sem esticar card nenhum. Em em, para
     acompanhar a escala tipográfica se ela mudar. */
  .grupo--rapidas .card__text { min-height: calc(5 * 1.75em); }
}

/* Entre 1350 e 1439 a coluna fica com ~240px e "Tiragem Detalhada" quebra em
   duas linhas enquanto as vizinhas ficam em uma — 21px de desencontro nos
   preços. Reservar a segunda linha resolve nesta faixa; de 1440 em diante
   todos os títulos cabem numa linha e a reserva só sobraria. */
@media (min-width: 1350px) and (max-width: 1439px) {
  .grupo--rapidas .card__title { min-height: calc(2 * 1.35em); }
}

/* --- Olhar para dentro · os tres cards com a mesma altura ----------------
   Os cards nasciam desiguais por duas somas independentes: "MÉTODO DE
   AUTOCONHECIMENTO" quebra em duas linhas onde os outros dois titulos cabem
   em uma, e a descricao dele ocupa uma linha a mais que as vizinhas. Juntas,
   davam uns 50px de diferenca.

   A correcao e a mesma ja usada nas leituras objetivas: reservar a altura do
   pior caso no titulo e na descricao, para que a igualdade venha do conteudo
   e nao do esticamento do grid. Isso importa porque `align-items: start`
   precisa continuar valendo — e ele que impede que abrir o CTA de um card
   no hover estique os vizinhos e empurre os precos deles para baixo.

   As reservas sao o pior caso medido em cada faixa, nao o caso tipico:
   reservar demais so acrescenta altura igual aos tres e eles seguem iguais,
   enquanto reservar de menos deixa o card mais longo sobrando de novo. A
   contagem cai conforme a coluna alarga, e volta a subir em 1024, onde o
   grid passa de duas para tres colunas e as colunas estreitam.

   Em em, para acompanharem a escala tipografica se ela mudar. */
@media (min-width: 600px) {
  .grupo--interior .card__title { min-height: calc(2 * 1.35em); }
  .grupo--interior .card__text  { min-height: calc(7 * 1.75em); }
}
@media (min-width: 700px) {
  .grupo--interior .card__text  { min-height: calc(6 * 1.75em); }
}
@media (min-width: 1280px) {
  .grupo--interior .card__text  { min-height: calc(5 * 1.75em); }
}


/* --- 1440px+ --- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}