/* ==========================================================================
   SEÇÃO — PRINCIPAIS DEMANDAS ATENDIDAS  (#areas, item "Áreas de atuação" do menu)
   Porta do consultório que abre em 3D e revela o leque de 8 cards.
   Lógica em js/modules/demandas.js. Original e guia em docs/demandas-original/
   e docs/DEMANDAS-original.md.

   Integração (o resto é o CSS original, sem mudanças):
   - dentro de @layer sections; prefixo .dm- preservado;
   - tokens do site: altura do navbar, fontes, creme e verde do botão;
   - fonte de texto: Manrope (o original carregava Jost);
   - removida uma "}" sobrando antes do bloco de movimento reduzido,
     que fazia o navegador descartar esse bloco inteiro;
   - fallback sem JavaScript no fim do arquivo.

   NÃO ALTERAR (medidas em px da arte 1536×1024): .dm-doorway, .dm-plaque, .dm-spill.
   ========================================================================== */
@layer sections {
.dm {
  /* ---- Paleta (troque pelos tokens do site se já existirem) ---- */
  --dm-green-950: #0b1a13;
  --dm-green-900: var(--c-cta-green);       /* era #0f2a20: verde do botão do site */
  --dm-green-800: #14362a;
  --dm-green-700: #1f4a38;
  --dm-cream: var(--c-cream-warm);          /* era #efe6d6: creme do botão do site */
  --dm-gold: #b8903e;
  --dm-gold-light: #d9b874;
  --dm-ink: #13291e;            /* texto escuro sobre a parede creme */
  --dm-wall: #0b130d;           /* preenchimento de sobra: parede */
  --dm-floor: #1b1108;          /* preenchimento de sobra: piso */

  /* ---- Tipografia ---- */
  --dm-font-display: var(--ff-caps);        /* Cinzel (mesma da placa do Sobre mim) */
  --dm-font-body: var(--ff-sans);           /* Manrope: fonte de texto do site (o original usava Jost) */
  --dm-font-impact: var(--ff-condensed);    /* Bebas Neue (mesma do nome gigante do Sobre mim) */

  /* ---- Altura do header fixo do site (a placa nunca fica atrás dele) ---- */
  --dm-header-h: var(--nav-h);             /* navbar do site: 76px desktop · 62px mobile */

  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  line-height: normal;                      /* a seção foi desenhada sem a entrelinha 1.65 do body */
  scroll-margin-top: calc(-1 * (var(--nav-h) + var(--space-md)));   /* âncora #areas alinha no topo (tela cheia) */
  color: var(--dm-cream);
  background:
    linear-gradient(
      to bottom,
      var(--dm-wall) 0,
      var(--dm-wall) calc(var(--dm-floor-y, 86%) - 24px),
      var(--dm-floor) calc(var(--dm-floor-y, 86%) + 24px),
      #0c0804 100%
    );
}

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

.dm img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

/* blindagem contra estilos globais do site (vem antes das regras dos componentes,
   então qualquer classe .dm-* abaixo continua mandando) */
.dm :where(h2, h3, p) { margin: 0; text-shadow: none; }
.dm :where(h2, h3)::before,
.dm :where(h2, h3)::after { content: none; }
.dm :where(button) {
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  line-height: normal;
  text-transform: none;
  -webkit-appearance: none;
          appearance: none;
}

/* ==========================================================================
   1. INTERIOR (fundo revelado)
   ========================================================================== */

.dm-interior-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* recorte inicial = vão da porta (o JS define o polígono real) */
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.dm-interior {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.dm-interior__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* véu para dar leitura ao conteúdo: centro calmo, bordas mais densas */
.dm-interior__veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(239, 230, 214, 0.14), rgba(239, 230, 214, 0) 60%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(12, 9, 4, 0) 45%, rgba(12, 9, 4, 0.5) 100%),
    linear-gradient(to bottom, rgba(12, 9, 4, 0.12), rgba(12, 9, 4, 0) 28%, rgba(12, 9, 4, 0) 55%, rgba(12, 9, 4, 0.35) 100%);
}

/* ==========================================================================
   2. CENA DA FACHADA (posicionada e escalada pelo JS)
   ========================================================================== */

.dm-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.dm-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 1024px;
  container-type: size;           /* 1cqw = 1% da largura da arte */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* quando sobra espaço (mobile em pé / ultrawide), a arte funde com o fundo */
.dm[data-gap-y="true"] .dm-frame {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.dm[data-gap-x="true"] .dm-frame {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.dm[data-gap-x="true"][data-gap-y="true"] .dm-frame {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
}

.dm-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Luz que escorre pelo piso quando a porta abre ---- */
.dm-spill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  /* trapézio: base da porta → borda inferior da arte */
  clip-path: polygon(33.2% 84.9%, 66.6% 84.9%, 77% 100%, 23.8% 100%);
  background: linear-gradient(to bottom, rgba(255, 196, 120, 0.85), rgba(255, 170, 90, 0.25) 55%, rgba(255, 160, 80, 0) 100%);
  filter: blur(0.4cqw);
}

/* ---- Halo quente em volta do batente ---- */
.dm-halo {
  position: absolute;
  left: 18%;
  top: 6%;
  width: 64%;
  height: 90%;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255, 205, 140, 0.55), rgba(255, 180, 100, 0.12) 55%, rgba(255, 180, 100, 0) 75%);
}

/* ==========================================================================
   3. VÃO DA PORTA (perspectiva 3D + folhas)
   ========================================================================== */

.dm-doorway {
  position: absolute;
  /* medidas do vão na arte (1536×1024): x 510 · y 189 · 513 × 681 */
  left: 33.2031%;
  top: 18.457%;
  width: 33.3984%;
  height: 66.5039%;
  overflow: hidden;
  perspective: 2000px;            /* o JS recalcula conforme a escala */
  perspective-origin: 50.3% 47.4%;
  pointer-events: auto;
  cursor: pointer;
}

/* luz que invade pela abertura */
.dm-bloom {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 45% 55% at 50% 50%, rgba(255, 244, 222, 1), rgba(255, 214, 150, 0.85) 45%, rgba(255, 190, 110, 0.55) 100%);
}

/* espessura da parede (batentes internos) */
.dm-jamb {
  position: absolute;
  background: linear-gradient(to right, #07100b, #0f1e16);
}
.dm-jamb--l { left: 0; top: 0; width: 8.2%; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); }
.dm-jamb--r { right: 0; top: 0; width: 8.2%; height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(to left, #07100b, #0f1e16); }
.dm-jamb--t { left: 0; top: 0; width: 100%; height: 6.2%; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(to bottom, #050b08, #0d1a13); }

/* folhas */
.dm-leaf {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.dm-leaf--l { left: 0; width: 49.9025%; transform-origin: 0 50%; }
.dm-leaf--r { right: 0; width: 50.0975%; transform-origin: 100% 50%; }

.dm-leaf__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* lado de dentro da folha (quase nunca aparece, mas evita "vazio" em ângulos extremos) */
.dm-leaf__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: linear-gradient(to right, #0a1711, #102419);
}

/* espessura da folha (borda livre, do lado da emenda) */
.dm-leaf__edge {
  position: absolute;
  top: 0;
  height: 100%;
  width: 5%;
  background: linear-gradient(to right, #07100b, #142a1f 45%, #09130e);
  box-shadow: inset 1px 0 0 rgba(184, 144, 62, 0.45), inset -1px 0 0 rgba(184, 144, 62, 0.3);
}
.dm-leaf--l .dm-leaf__edge { right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); }
.dm-leaf--r .dm-leaf__edge { left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); }

/* sombra que escurece a folha conforme ela gira (profundidade) */
.dm-leaf__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #050b08;
  backface-visibility: hidden;
}

/* fresta de luz na emenda */
.dm-seam {
  position: absolute;
  left: calc(49.9025% - 0.18%);
  top: 0;
  width: 0.36%;
  height: 100%;
  opacity: 0.35;
  transform-origin: 50% 50%;
  background: linear-gradient(to bottom, rgba(255, 214, 150, 0), rgba(255, 226, 170, 1) 12%, rgba(255, 236, 190, 1) 88%, rgba(255, 214, 150, 0));
  filter: blur(0.5px);
  box-shadow: 0 0 1.2cqw 0.2cqw rgba(255, 196, 120, 0.55);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* versão espectral da fresta (mesma linguagem das linhas do hero) */
.dm-seam--spectrum {
  opacity: 0;
  background: linear-gradient(to bottom, rgba(255, 90, 90, 0), #ff5a5a 10%, #ffa94d 26%, #ffe66d 42%, #6fdc8c 58%, #5aa9ff 74%, #b57bff 90%, rgba(181, 123, 255, 0));
  box-shadow: 0 0 1.6cqw 0.3cqw rgba(255, 230, 190, 0.35);
  filter: blur(0.6px);
  transition: none;
}

/* hover no botão ou na porta: a luz respira mais forte */
.dm[data-state="closed"]:has(.dm-cta:hover, .dm-cta:focus-visible, .dm-doorway:hover) .dm-seam:not(.dm-seam--spectrum) {
  opacity: 0.85;
}

/* ==========================================================================
   4. PLACA (texto real em HTML sobre o latão da arte)
   ========================================================================== */

.dm-plaque {
  position: absolute;
  /* placa na arte: x 565 · y 87 · 402 × 74 */
  left: 36.7839%;
  top: 8.4961%;
  width: 26.1719%;
  height: 7.2266%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28cqw;
  font-family: var(--dm-font-display);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  /* gravação: miolo escuro translúcido + luz batendo na borda de baixo */
  color: rgba(46, 30, 8, 0.86);
  text-shadow:
    0 0.07cqw 0 rgba(255, 232, 178, 0.55),
    0 -0.04cqw 0 rgba(0, 0, 0, 0.35);
}

.dm-plaque__small {
  font-size: 0.8cqw;
  letter-spacing: 0.5em;
  margin-right: -0.5em;          /* compensa o tracking no centro óptico */
  font-weight: 600;
}

.dm-plaque__main {
  font-size: 1.36cqw;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
}

/* ==========================================================================
   5. BOTÃO (mesmo padrão do "Aperte para conhecer" do Sobre mim)
   ========================================================================== */

.dm-cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(28px, 5.5svh);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dm-green-900);
  font: inherit;
  cursor: pointer;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45));
  -webkit-tap-highlight-color: transparent;
}

.dm-cta::before {                   /* contorno paralelogramo externo */
  content: "";
  position: absolute;
  inset: 0 -26px;
  transform: skewX(-24deg);
  border: 1px solid rgba(239, 230, 214, 0.28);
  background: rgba(10, 26, 19, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.dm-cta__label {
  position: relative;
  z-index: 1;                       /* cria contexto para o bloco creme ficar acima do contorno */
  display: flex;
  align-items: center;
  padding: 0 34px;
  min-height: 54px;
  font-family: var(--dm-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dm-green-900);
}

.dm-cta__label::before {            /* bloco creme */
  content: "";
  position: absolute;
  inset: 0 -6px 0 -14px;
  z-index: -1;
  transform: skewX(-24deg);
  background: var(--dm-cream);
  transition: background 0.4s ease;
}

.dm-cta__arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  color: var(--dm-cream);
}
.dm-cta__arrow svg { width: 28px; height: 12px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

.dm-cta:hover::before,
.dm-cta:focus-visible::before { border-color: rgba(217, 184, 116, 0.75); background: rgba(10, 26, 19, 0.85); }
.dm-cta:hover .dm-cta__label::before,
.dm-cta:focus-visible .dm-cta__label::before { background: #f7f0e3; }
.dm-cta:hover .dm-cta__arrow svg,
.dm-cta:focus-visible .dm-cta__arrow svg { transform: translateX(6px); }
.dm-cta:focus-visible { outline: none; }
.dm-cta:focus-visible::after {
  content: "";
  position: absolute;
  inset: -8px -34px;
  transform: skewX(-24deg);
  border: 1px solid var(--dm-gold-light);
}

.dm[data-state="loading"] .dm-cta { opacity: 0; pointer-events: none; }
.dm[data-state="open"] .dm-cta { visibility: hidden; }
.dm[data-state="open"] .dm-cta,
.dm[data-state="opening"] .dm-cta,
.dm[data-state="closing"] .dm-cta { pointer-events: none; }

/* ==========================================================================
   6. CONTEÚDO — LEQUE DE CARDS DAS DEMANDAS
   Cada card: creme ao centro, divisores verdes finos nas bordas e linhas
   arco-íris na diagonal (mesma composição do hero: verde | creme | verde).
   A carta ativa fica à frente; as vizinhas abrem em arco atrás dela.
   ========================================================================== */

.dm-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding: calc(var(--dm-header-h) + clamp(16px, 3svh, 40px)) 0 calc(clamp(16px, 3svh, 40px) + env(safe-area-inset-bottom, 0px));
  visibility: hidden;
}
.dm-content::-webkit-scrollbar { display: none; }

.dm[data-state="open"] .dm-content,
.dm[data-state="closing"] .dm-content { visibility: visible; }

.dm-content__inner {
  width: 100%;
  margin: auto;                  /* centraliza na vertical quando sobra espaço, sem cortar quando falta */
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

/* ---- Deck ---- */
.dm-deck {
  /* tamanho do card: cabe na largura E na altura disponível */
  --dm-card-ratio: 0.75;              /* largura / altura (3:4) */
  --dm-card-w: min(clamp(262px, 25vw, 350px), calc((100svh - var(--dm-header-h) - 250px) * var(--dm-card-ratio)));
  --dm-fan-rot: 8deg;                 /* abertura do leque por posição */
  --dm-fan-x: 5%;                     /* afastamento lateral extra por posição */

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  touch-action: pan-y;                /* swipe horizontal no deck, rolagem vertical livre */
}
.dm-deck:focus-visible .dm-deck__stage::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid var(--dm-gold-light);
  border-radius: 10px;
  pointer-events: none;
}

.dm-deck__stage {
  position: relative;
  width: var(--dm-card-w);
  aspect-ratio: var(--dm-card-ratio);
  margin: 8px 0 0;
}

.dm-deck__stage::after {              /* sombra de contato na parede */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 90%;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 12, 4, 0.45), rgba(20, 12, 4, 0));
  filter: blur(6px);
  z-index: -1;
}

/* ---- Card ---- */
.dm-dcard {
  --dm-card-green: var(--c-cta-green);   /* verde do botão "Aperte para conhecer" (era #123320) */
  --dm-card-cream: var(--c-cream-warm);  /* creme do mesmo botão (era #ece6d4) */
  --dm-card-ink: #173120;
  --dm-seam: 1.1%;                   /* espessura da linha arco-íris */
  --dm-rx: 0deg;
  --dm-ry: 0deg;
  --d: 0;                            /* posição no leque (JS): 0 = ativa, ±1, ±2… */
  --ad: 0;                           /* |d| */

  /* bordas internas dos divisores (topo / base), em % da largura */
  --dm-lt: 18%;
  --dm-lb: 2%;
  --dm-rt: 98%;
  --dm-rb: 82%;

  position: absolute;
  inset: 0;
  container-type: inline-size;       /* tudo dentro escala com a largura do card (cqw) */
  transform-origin: 50% 165%;        /* pivô abaixo do card: o leque abre em arco */
  transform:
    translateX(calc(var(--d) * var(--dm-fan-x)))
    translateY(calc(var(--ad) * -5%))   /* compensa a queda do arco */
    rotate(calc(var(--d) * var(--dm-fan-rot)))
    scale(calc(1 - var(--ad) * 0.06));
  z-index: var(--z, 20);
  /* some suavemente depois da 2ª carta de cada lado */
  opacity: clamp(0, calc(3 - var(--ad)), 1);
  transition:
    transform 0.75s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
  cursor: pointer;
  user-select: none;
}
.dm-dcard[data-pos="active"] { cursor: default; }
.dm-dcard[data-pos="far"] { pointer-events: none; }
.dm-dcard:not([data-pos="active"]) { filter: blur(calc(var(--ad) * 0.5px)); }

/* enquanto arrasta, o leque acompanha o dedo sem atraso */
.dm-deck[data-dragging="true"] .dm-dcard { transition: none; }
.dm-deck[data-dragging="true"] .dm-deck__stage { cursor: grabbing; }

.dm-dcard__tilt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  transform: perspective(1000px) rotateX(var(--dm-rx)) rotateY(var(--dm-ry));
  box-shadow:
    0 50px 80px -44px rgba(16, 10, 3, 0.8),
    0 18px 30px -20px rgba(16, 10, 3, 0.6);
}
.dm-dcard[data-pos="active"] .dm-dcard__tilt { will-change: transform; }
.dm-dcard__tilt::after {             /* filete que emoldura o card */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(236, 230, 212, 0.16);
  pointer-events: none;
}

/* camadas */
.dm-dcard__cream,
.dm-dcard__green,
.dm-dcard__glow,
.dm-dcard__haze,
.dm-dcard__sheen {
  position: absolute;
  inset: 0;
}

.dm-dcard__cream {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 26cqw;                /* ≈ 20% da altura */
  background: var(--dm-card-cream) url("../../img/demandas-card-creme.webp") center / cover;
  color: var(--dm-card-ink);
}

/* dois divisores verdes: faixa esquerda e faixa direita */
.dm-dcard__green {
  background: var(--dm-card-green) url("../../img/demandas-card-verde.webp") center / cover;
  clip-path: polygon(
    0 0, var(--dm-lt) 0, var(--dm-lb) 100%,
    var(--dm-rb) 100%, var(--dm-rt) 0,
    100% 0, 100% 100%, 0 100%
  );
}

/* linhas arco-íris nas bordas internas */
.dm-dcard__glow {
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 244, 225, 0.7));
}
.dm-dcard__band {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #ff5a5a 0%, #ffa94d 20%, #ffe66d 38%, #6fdc8c 56%, #5aa9ff 76%, #b57bff 100%);
}
.dm-dcard__band--l {
  clip-path: polygon(
    var(--dm-lt) 0, calc(var(--dm-lt) + var(--dm-seam)) 0,
    calc(var(--dm-lb) + var(--dm-seam)) 100%, var(--dm-lb) 100%
  );
}
.dm-dcard__band--r {
  clip-path: polygon(
    calc(var(--dm-rt) - var(--dm-seam)) 0, var(--dm-rt) 0,
    var(--dm-rb) 100%, calc(var(--dm-rb) - var(--dm-seam)) 100%
  );
}

/* névoa da parede: as cartas de trás "afundam" no ambiente */
.dm-dcard__haze {
  pointer-events: none;
  background: #cfae80;
  opacity: calc(var(--ad) * 0.3);
  transition: opacity 0.5s ease;
}

/* brilho que acompanha o cursor (só na carta ativa) */
.dm-dcard__sheen {
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--dm-mx, 50%) var(--dm-my, 40%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
  transition: opacity 0.5s ease;
}
.dm-dcard[data-pos="active"]:hover .dm-dcard__sheen { opacity: 1; }

/* ---- Tipografia ---- */
.dm-dcard__num {
  position: absolute;
  top: 13.3cqw;                      /* ≈ 10% da altura */
  left: 21%;
  font-family: var(--dm-font-display);
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
  color: rgba(23, 49, 32, 0.55);
}

.dm-dcard__title {
  max-width: 70cqw;
  margin: 0 0 0 6cqw;                /* centro óptico do creme inclinado */
  font-family: var(--dm-font-impact);
  font-weight: 400;
  font-size: var(--dm-title-fs, 12cqw);   /* o JS ajusta para caber */
  line-height: 0.96;
  letter-spacing: 0.015em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dm-card-ink);
}

.dm-dcard__rule {
  flex: none;
  width: 14cqw;
  height: 1.4cqw;
  margin: 6cqw 0 0 -1cqw;
  transform: skewX(-24deg);
  background: var(--dm-card-green);
  opacity: 0.85;
}

.dm-dcard__desc {
  margin: 7cqw 17cqw 0 12cqw;
  font-family: var(--dm-font-body);
  font-size: var(--dm-desc-fs, 4.5cqw);
  line-height: 1.55;
  text-align: center;
  color: rgba(23, 49, 32, 0.9);
  text-wrap: pretty;
}

/* ---- Navegação: setas no padrão do botão do site + pontos arco-íris ---- */
.dm-deck__nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(46px, 7svh, 72px);
}

.dm-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dm-cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dm-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: skewX(-24deg);
  border: 1px solid rgba(239, 230, 214, 0.35);
  background: rgba(10, 26, 19, 0.72);
  transition: background 0.35s ease, border-color 0.35s ease;
}
.dm-nav--next { color: var(--dm-green-900); }
.dm-nav--next::before { background: var(--dm-cream); border-color: var(--dm-cream); }
.dm-nav svg {
  position: relative;
  width: 24px;
  height: 11px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dm-nav--prev:hover svg { transform: translateX(-4px); }
.dm-nav--next:hover svg { transform: translateX(4px); }
.dm-nav--prev:hover::before { border-color: rgba(217, 184, 116, 0.8); }
.dm-nav--next:hover::before { background: #f7f0e3; }
.dm-nav:focus-visible { outline: none; }
.dm-nav:focus-visible::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
  transform: skewX(-24deg);
  border: 1px solid var(--dm-gold-light);
}

.dm-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-dots__dot {
  position: relative;
  width: 10px;
  height: 22px;                       /* área de toque maior que o traço */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dm-dots__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  transform: skewX(-24deg);
  background: rgba(239, 230, 214, 0.45);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.dm-dots__dot:hover::before { background: rgba(239, 230, 214, 0.85); }
.dm-dots__dot[aria-current="true"] { width: 34px; }
.dm-dots__dot[aria-current="true"]::before {
  background: linear-gradient(to right, #ff5a5a, #ffa94d, #ffe66d, #6fdc8c, #5aa9ff, #b57bff);
  box-shadow: 0 0 8px rgba(255, 236, 200, 0.55);
}
.dm-dots__dot:focus-visible { outline: 1px solid var(--dm-gold-light); outline-offset: 2px; }

/* ---- Sair da sala ---- */
.dm-exit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(10px, 2svh, 20px) auto 0;
  padding: 10px 16px;
  border: 0;
  background: none;
  font-family: var(--dm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(239, 230, 214, 0.82);
  cursor: pointer;
  transition: color 0.3s ease;
}
.dm-exit svg { width: 22px; height: 10px; transition: transform 0.4s ease; }
.dm-exit:hover,
.dm-exit:focus-visible { color: var(--dm-gold-light); }
.dm-exit:hover svg { transform: translateX(-4px); }
.dm-exit:focus-visible { outline: 1px solid var(--dm-gold-light); outline-offset: 2px; }

/* ==========================================================================
   7. RESPONSIVO
   ========================================================================== */

@media (max-width: 640px) {
  .dm { min-height: 560px; }

  .dm-cta { bottom: calc(max(22px, 4svh) + env(safe-area-inset-bottom, 0px)); }
  .dm-cta__label { padding: 0 22px; min-height: 50px; font-size: 11.5px; letter-spacing: 0.2em; }
  .dm-cta__arrow { width: 60px; }

  /* card mais alto e maior no celular: texto legível sem apertar */
  .dm-deck {
    --dm-card-ratio: 0.72;
    --dm-card-w: min(82vw, 340px, calc((100svh - var(--dm-header-h) - 210px) * var(--dm-card-ratio)));
    --dm-fan-rot: 5deg;
    --dm-fan-x: 8%;
  }
  .dm-deck__nav { margin-top: clamp(36px, 5.5svh, 56px); gap: 14px; }
  .dm-dots { gap: 6px; }
  .dm-dots__dot { width: 8px; height: 30px; }
  .dm-dots__dot[aria-current="true"] { width: 26px; }
  .dm-nav { width: 56px; height: 46px; }   /* alvo de toque confortável */
  .dm-exit { margin-top: 6px; padding: 12px 18px; }

  /* no celular o bloco de texto fica centrado no creme (sem vazio embaixo) */
  .dm-dcard__cream { justify-content: center; padding: 20cqw 0 14cqw; }
  .dm-dcard__rule { margin-top: 5.5cqw; }
  .dm-dcard__desc { margin-top: 6cqw; line-height: 1.5; }
}

/* ==========================================================================
   8. MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dm-cta__arrow svg,
  .dm-dcard__sheen,
  .dm-dcard__haze,
  .dm-dots__dot,
  .dm-dots__dot::before { transition-duration: 0.01s !important; }
  .dm-dcard { transition: opacity 0.25s ease, filter 0.25s ease; }
}

/* ==========================================================================
   9. SEM JAVASCRIPT: sem porta; os 8 cards aparecem direto, em grade
   ========================================================================== */
html:not(.js) .dm { height: auto; min-height: 0; overflow: visible; }
html:not(.js) .dm-scene,
html:not(.js) .dm-cta,
html:not(.js) .dm-deck__nav,
html:not(.js) .dm-exit { display: none; }
html:not(.js) .dm-interior-clip { clip-path: none; }
html:not(.js) .dm-interior__veil { opacity: 1; }
html:not(.js) .dm-content { position: relative; visibility: visible; overflow: visible; }
html:not(.js) .dm-deck__stage {
  width: min(100% - 32px, 1120px); aspect-ratio: auto; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px;
}
html:not(.js) .dm-deck__stage::after { content: none; }
html:not(.js) .dm-dcard { position: relative; inset: auto; aspect-ratio: 3 / 4; transform: none; opacity: 1; filter: none; }
html:not(.js) .dm-dcard__title { font-size: 9cqw; }
}