/* ============================================================
   TAROT — TEMA "ARCANA"
   Direção de arte autoral: índigo profundo + âmbar/cobre,
   tipografia editorial (Fraunces + Space Grotesk + Inter),
   ícones lineares desenhados sob medida (sem bibliotecas de
   ícone genéricas), textura de grão sutil, sem gradientes
   "clip-text" e sem emojis — nada de vício visual de IA.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: #3c3552 !important;
  border-radius: 10px !important;
  border: 2px solid #0a0815 !important;
}
::-webkit-scrollbar-thumb:hover { background: #574c78 !important; }
* { scrollbar-width: thin !important; scrollbar-color: #3c3552 transparent !important; }

::selection { background: rgba(227, 172, 92, 0.28) !important; color: #fff !important; }
::-moz-selection { background: rgba(227, 172, 92, 0.28) !important; color: #fff !important; }

/* ===== TOKENS ===== */
:root {
  /* Base */
  --ink: #0a0815;
  --ink-soft: #100c1e;
  --panel: #15112380;
  --panel-solid: #16111f;
  --panel-raised: #1e1830;
  --panel-hover: #261f3b;

  /* Acentos */
  --gold: #e3ac5c;
  --gold-soft: #f2cf95;
  --gold-deep: #b9803a;
  --violet: #9a86f2;
  --violet-deep: #6f5cd1;

  /* Elementos (naipes) */
  --flame: #e08a4f;
  --flame-deep: #bd6a34;
  --tide: #5fb8c4;
  --tide-deep: #3f8f9c;
  --air: #b3a8dd;
  --air-deep: #8b7fbd;
  --earth: #94ac74;
  --earth-deep: #6d8654;

  --cream: #f5ecd9;
  --text-primary: #f5ecd9;
  --text-secondary: #cdc3da;
  --text-tertiary: #a196bd;
  --text-muted: #6f6588;

  --border: rgba(245, 236, 217, 0.09);
  --border-strong: rgba(245, 236, 217, 0.2);
  --border-gold: rgba(227, 172, 92, 0.4);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 64px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 36px rgba(227, 172, 92, 0.22);
  --glow-violet: 0 0 36px rgba(154, 134, 242, 0.22);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-ui: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --text-xs: clamp(0.64rem, 1.2vw, 0.73rem);
  --text-sm: clamp(0.76rem, 1.5vw, 0.86rem);
  --text-base: clamp(0.88rem, 1.8vw, 1rem);
  --text-md: clamp(0.96rem, 2.1vw, 1.1rem);
  --text-lg: clamp(1.12rem, 2.6vw, 1.32rem);
  --text-xl: clamp(1.4rem, 3.4vw, 1.8rem);
  --text-2xl: clamp(1.7rem, 4.4vw, 2.35rem);
  --text-3xl: clamp(2.15rem, 5.8vw, 3.4rem);

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 28px; --space-xl: 44px; --space-2xl: 72px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 999px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ink);
}

/* ===== ÍCONES LINEARES ===== */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
}

/* ===== FUNDO CÓSMICO ===== */
body {
  background: var(--ink);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(720px 560px at 10% -6%, rgba(227, 172, 92, 0.14) 0%, transparent 58%),
    radial-gradient(640px 520px at 96% 8%, rgba(154, 134, 242, 0.13) 0%, transparent 55%),
    radial-gradient(680px 540px at 46% 108%, rgba(95, 184, 196, 0.09) 0%, transparent 60%),
    var(--ink);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.material-symbols-outlined { display: none; }

/* ===== TIPOGRAFIA ===== */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.25;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
  text-align: center;
  color: var(--cream);
}
h1 em {
  font-style: italic;
  color: var(--gold-soft);
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }

p { font-family: var(--font-body); }

.hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
.hero-sub strong { color: var(--gold-soft); font-weight: 600; }

/* ===== CONTAINER ===== */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 40px);
  position: relative;
  z-index: 1;
}
main { flex: 1; position: relative; z-index: 1; }

/* ===== HERO ===== */
.hero-section {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  padding-top: var(--space-lg);
}

/* ===== SELETOR DE SPREAD ===== */
.setup-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; }

.spread-picker {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin: 0 auto;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: wrap;
  justify-content: center;
}

.spread-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 10px 20px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.spread-pill .icon { font-size: 16px; }
.spread-pill:hover { color: var(--text-primary); }
.spread-pill.active {
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  color: var(--ink);
  box-shadow: var(--glow-gold);
}

.spread-desc {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-md);
  margin-bottom: 0;
  max-width: 560px;
}

/* ===== TOOLBAR ===== */
.tarot-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-sm);
}

.btn-tarot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 24px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.btn-tarot .icon { font-size: 17px; }
.btn-tarot:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow-gold), var(--shadow-md); }
.btn-tarot:active:not(:disabled) { transform: translateY(0); }
.btn-tarot:disabled { opacity: 0.32; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-tarot.shuffling .icon { animation: spin 0.6s ease-in-out; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== MESA DE LEITURA ===== */
.reading-table-section { display: none; margin: var(--space-lg) 0; }
.reading-table-section.visible { display: block; animation: tableAppear 0.6s ease both; }

@keyframes tableAppear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.table-surface {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3.5vw, 40px) clamp(12px, 2.5vw, 30px);
  background: linear-gradient(160deg, var(--panel-raised), var(--panel-solid));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.table-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.table-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(70px, 16vw, 130px); }

.table-slot .slot-label {
  font-family: var(--font-ui);
  font-size: clamp(8px, 1.6vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.3;
  min-height: 16px;
}

.slot-card {
  width: 100%;
  aspect-ratio: 3/5;
  background: var(--panel-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}
.slot-card.empty { border-style: dashed; opacity: 0.32; cursor: default; }
.slot-card.filled { cursor: pointer; }
.slot-card.filled:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.slot-card.revealed { border-color: var(--gold); box-shadow: var(--glow-gold); cursor: pointer; }
.slot-card.active-slot { border-color: var(--violet); box-shadow: var(--glow-violet); }
.slot-card.flipping { animation: cardFlip 0.6s cubic-bezier(0.34, 1.2, 0.64, 1); }
.slot-card img, .slot-card .img-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--panel-raised); color: var(--text-secondary);
  font-family: var(--font-ui); font-size: 9px; text-align: center; padding: 4px;
}

@keyframes cardFlip {
  0% { transform: rotateY(0deg) scale(1); }
  30% { transform: rotateY(90deg) scale(0.92); }
  60% { transform: rotateY(180deg) scale(1.06); }
  80% { transform: rotateY(270deg) scale(0.96); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* ===== DICA DE CLIQUE ===== */
.click-hint {
  display: none;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--gold-soft);
  margin: var(--space-md) 0;
}
.click-hint .icon { font-size: 18px; color: var(--gold); }

/* ===== PAINEL DE RESULTADO ===== */
.reveal-panel {
  margin-top: var(--space-lg);
  display: none;
  gap: var(--space-lg);
  align-items: flex-start;
  position: relative;
  background: linear-gradient(150deg, var(--panel-raised), var(--panel-solid));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow-lg);
}
.reveal-panel::before {
  content: '';
  position: absolute;
  top: 0; left: var(--space-lg); right: var(--space-lg);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.reveal-panel.open { display: flex; animation: revealSlide 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; }

@keyframes revealSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.reveal-panel .reveal-img-wrap {
  flex-shrink: 0;
  width: clamp(100px, 20vw, 156px);
}
.reveal-panel .reveal-img-wrap img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-gold);
  box-shadow: var(--shadow-md);
  display: block;
}

.reveal-panel .reveal-body { flex: 1; min-width: 0; }

.reveal-panel .reveal-position {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 6px;
}

.reveal-panel .reveal-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.reveal-panel .reveal-position-desc {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.reveal-panel .reveal-meaning {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.85;
}

.reveal-panel .reveal-close {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reveal-panel .reveal-close .icon { font-size: 15px; }
.reveal-panel .reveal-close:hover { color: var(--text-primary); border-color: var(--border-strong); }

@media (max-width: 560px) {
  .reveal-panel { flex-wrap: wrap; }
  .reveal-panel .reveal-img-wrap { width: 96px; margin: 0 auto; }
  .reveal-panel .reveal-body { text-align: center; width: 100%; }
  .reveal-panel .reveal-close { position: absolute; top: 14px; right: 14px; }
}

/* ===== DECK HINT ===== */
.deck-hint {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: var(--space-lg) 0 var(--space-sm);
}

.deck-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-style: italic;
  text-align: center;
}

/* ===== BARALHO (leque de cartas) ===== */
.cards-grid {
  position: relative;
  width: 100%;
  max-width: min(1080px, 94vw);
  margin: var(--space-sm) auto;
  transition: height 0.25s ease;
  min-height: 120px;
}

.cards-grid .tarot-card-slot { position: absolute; transform-origin: center center; will-change: left, top, transform; }

.cards-grid .tarot-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cards-grid .tarot-card:hover:not(.chosen) {
  transform: scale(1.35) translateY(-10px);
  z-index: 500;
  box-shadow: var(--glow-gold), 0 8px 40px rgba(0, 0, 0, 0.5);
}

.cards-grid .tarot-card.chosen {
  opacity: 1 !important;
  transform: scale(0.85);
  pointer-events: none;
  cursor: default;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.cards-grid .tarot-card.chosen img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); }
.cards-grid .tarot-card.flipping { animation: cardFlip 0.5s cubic-bezier(0.34, 1.2, 0.64, 1); z-index: 100; }

.cards-grid.locked .tarot-card-slot { pointer-events: none; }
.cards-grid.locked .tarot-card:hover:not(.chosen) { transform: none; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5); }
.cards-grid.rebuilding .tarot-card-slot { pointer-events: none; transition: none; }

/* Verso da carta */
.card-back {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, #241c38 0%, #170f26 55%, #0e0a19 100%);
  border: 1px solid var(--border-strong);
}
.card-back::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(227, 172, 92, 0.28);
  border-radius: 5px;
}
.card-back::after {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(245, 236, 217, 0.1);
  border-radius: 3px;
}
.card-back .back-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back .back-pattern .icon {
  width: 46%;
  height: 46%;
  color: var(--gold);
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(227, 172, 92, 0.4));
}

/* ===== SEÇÃO DE TODAS AS CARTAS ===== */
.all-cards-section { margin-top: var(--space-xl); }
.all-cards-intro { color: var(--text-tertiary); font-size: var(--text-base); margin-bottom: var(--space-md); }

.suit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg);
}
.suit-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--panel-solid);
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.suit-chip .icon { font-size: 15px; }
.suit-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.suit-chip.active { color: var(--ink); border-color: transparent; }
.suit-chip[data-suit="all"].active { background: linear-gradient(120deg, var(--gold), var(--gold-soft)); }
.suit-chip[data-suit="major"].active { background: linear-gradient(120deg, var(--violet), var(--violet-deep)); color: #fff; }
.suit-chip[data-suit="wands"].active { background: linear-gradient(120deg, var(--flame), var(--flame-deep)); color: #fff; }
.suit-chip[data-suit="cups"].active { background: linear-gradient(120deg, var(--tide), var(--tide-deep)); color: #fff; }
.suit-chip[data-suit="swords"].active { background: linear-gradient(120deg, var(--air), var(--air-deep)); color: var(--ink); }
.suit-chip[data-suit="pentacles"].active { background: linear-gradient(120deg, var(--earth), var(--earth-deep)); color: #fff; }

/* ===== CARROSSEL DE CARTAS (Nativo sem barra de rolagem) ===== */
.carousel-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding: clamp(18px, 3vw, 36px);
  overflow: hidden;
  max-width: 100%;
}

.carousel-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  max-width: 100%;
}

.carousel-track-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 20px 50px;
  max-width: 100%;
  width: 100%;
}

.carousel-track .card-slide {
  flex: 0 0 clamp(130px, 20vw, 180px);
  scroll-snap-align: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.5;
  transform: scale(0.88);
  cursor: pointer;
  position: relative;
  pointer-events: none;
  flex-shrink: 0;
}
.carousel-track .card-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.carousel-track .card-slide img {
  width: 100%;
  aspect-ratio: 3/5;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
  display: block;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.carousel-track .card-slide.is-active img {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(227, 172, 92, 0.15), var(--shadow-md);
}
.carousel-track .card-slide:hover:not(.is-active) img {
  border-color: var(--border-strong);
}

/* Navegação do carrossel */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(22, 17, 31, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.carousel-nav .icon {
  font-size: 18px;
}
.carousel-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: var(--glow-gold);
}
.carousel-nav:active {
  transform: translateY(-50%) scale(0.92);
}
.carousel-prev {
  left: 4px;
}
.carousel-next {
  right: 4px;
}

/* Significado da carta no carrossel */
.carousel-meaning {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-sm);
}
.carousel-meaning .cm-suit-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 10px;
}
.carousel-meaning .cm-suit-tag .icon {
  font-size: 14px;
}
.carousel-meaning .cm-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}
.carousel-meaning .cm-meaning {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.85;
}
.carousel-meaning .cm-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Responsividade do carrossel */
@media (max-width: 1024px) {
  .carousel-track .card-slide {
    flex: 0 0 clamp(120px, 18vw, 160px);
  }
}
@media (max-width: 820px) {
  .carousel-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .carousel-track {
    padding: 16px 40px;
    gap: 12px;
  }
  .carousel-track .card-slide {
    flex: 0 0 clamp(110px, 25vw, 140px);
  }
  .carousel-meaning {
    min-height: 150px;
  }
}
@media (max-width: 480px) {
  .carousel-wrap {
    padding: clamp(12px, 2vw, 18px);
  }
  .carousel-track {
    padding: 12px 32px;
    gap: 8px;
  }
  .carousel-track .card-slide {
    flex: 0 0 clamp(80px, 22vw, 100px);
  }
  .carousel-nav {
    width: 28px;
    height: 28px;
  }
  .carousel-nav .icon {
    font-size: 14px;
  }
  .carousel-prev {
    left: 2px;
  }
  .carousel-next {
    right: 2px;
  }
  .carousel-meaning .cm-name {
    font-size: var(--text-xl);
  }
  .carousel-meaning .cm-meaning {
    font-size: var(--text-sm);
  }
}
@media (max-width: 360px) {
  .carousel-track {
    padding: 8px 24px;
    gap: 6px;
  }
  .carousel-track .card-slide {
    flex: 0 0 clamp(65px, 20vw, 80px);
  }
  .carousel-nav {
    width: 24px;
    height: 24px;
  }
  .carousel-nav .icon {
    font-size: 12px;
  }
}

/* ===== GRADE DE DIFERENCIAIS ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-xl);
}
.feature-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.feature-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(227, 172, 92, 0.1);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  margin-bottom: var(--space-md);
}
.feature-icon .icon { font-size: 19px; }
.feature-card h3 {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text-primary);
}
.feature-card p {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.65;
}

/* ===== CONTEÚDO ===== */
.content-section { max-width: 780px; margin: 0 auto var(--space-xl); }
.content-section h2 { font-size: var(--text-xl); color: var(--text-primary); }
.content-section p { margin-bottom: var(--space-sm); font-size: var(--text-base); color: var(--text-secondary); }
.content-section .section-kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.accordion { margin-top: var(--space-md); border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); transition: background 0.2s ease; }
.accordion-item.open { background: rgba(227, 172, 92, 0.03); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: transparent;
  border: none;
  padding: var(--space-md) var(--space-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--text-primary);
  transition: color 0.25s ease;
}
.accordion-trigger:hover { color: var(--gold-soft); }
.accordion-icon-wrap {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: 50%;
  transition: all 0.25s ease;
  position: relative;
}
.accordion-item.open .accordion-icon-wrap { border-color: var(--gold); background: rgba(227, 172, 92, 0.1); }
.accordion-icon-wrap .icon-plus-h,
.accordion-icon-wrap .icon-plus-v {
  position: absolute;
  width: 12px; height: 1.6px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-icon-wrap .icon-plus-v { transform: rotate(90deg); }
.accordion-item.open .accordion-icon-wrap .icon-plus-v { transform: rotate(0deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.accordion-panel-inner { padding: 0 var(--space-sm) var(--space-md); font-size: var(--text-base); color: var(--text-secondary); line-height: 1.7; }

.divider { border: none; border-top: 1px solid var(--border); margin: var(--space-2xl) 0; }

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  .container { padding: 0 14px; }
  .table-surface .slot-card { width: clamp(60px, 14vw, 90px) !important; }
  .table-slot { width: clamp(60px, 14vw, 90px); }
  .hero-section { padding-top: var(--space-sm); }
  .hero-section h1 { font-size: var(--text-xl); }
  .spread-picker {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: 6px;
    gap: 4px;
  }
  .spread-pill {
    padding: 8px 14px;
    font-size: var(--text-xs);
    flex: 0 1 auto;
    min-width: 0;
  }
  .spread-pill .icon {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .btn-tarot { padding: 8px 18px; font-size: var(--text-xs); min-height: 38px; }
  .table-slot { width: clamp(55px, 14vw, 70px); }
  .table-surface .slot-card { width: clamp(55px, 14vw, 70px) !important; }
  .accordion-trigger { font-size: var(--text-sm); padding: var(--space-sm) 2px; gap: var(--space-sm); }
  .accordion-panel-inner { font-size: var(--text-sm); }
  .hero-section h1 { font-size: var(--text-lg); }
  .hero-section .hero-sub { font-size: var(--text-sm); }
  .cards-grid .tarot-card:hover:not(.chosen) { transform: scale(1.15) translateY(-6px); }
  .spread-pill {
    padding: 6px 10px;
    font-size: 10px;
    gap: 4px;
  }
  .spread-pill .icon {
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .table-slot { width: clamp(48px, 12vw, 58px); }
  .table-surface .slot-card { width: clamp(48px, 12vw, 58px) !important; }
  .cards-grid .tarot-card:hover:not(.chosen) { transform: scale(1.08) translateY(-4px); }
  .spread-pill {
    padding: 4px 8px;
    font-size: 9px;
  }
  .spread-pill .icon {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}