/* ── Variáveis extras ── */
    :root {
      --jade: #4a8c6f;
      --jade-light: #6db89a;
      --vermelho: #8b2020;
    }

    /* ── Layout principal ── */
    .container-pagina { max-width: 860px; }

    /* ── Pergunta do consulente ── */
    .campo-grimorio {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
    }
    .campo-grimorio label {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.85;
    }
    .campo-grimorio textarea {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(201,168,76,0.25);
      border-radius: 6px;
      color: var(--parchment);
      font-family: 'EB Garamond', serif;
      font-size: 1.05rem;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.3s;
      width: 100%;
      resize: vertical;
      min-height: 80px;
    }
    .campo-grimorio textarea:focus {
      border-color: rgba(201,168,76,0.6);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
    }

    /* ── Botão principal ── */
    .botao-grimorio {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--ink);
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border: none;
      border-radius: 6px;
      padding: 14px 32px;
      cursor: pointer;
      transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s;
      width: 100%;
      box-shadow: 0 4px 20px rgba(201,168,76,0.25);
    }
    .botao-grimorio:hover:not(:disabled) {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 6px 28px rgba(201,168,76,0.4);
    }
    .botao-grimorio:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* ── Botão secundário ── */
    .botao-secundario {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      background: transparent;
      border: 1px solid rgba(201,168,76,0.4);
      border-radius: 6px;
      padding: 10px 24px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .botao-secundario:hover { background: rgba(201,168,76,0.08); border-color: var(--gold); }

    /* ── Spinner ── */
    .spinner-grimorio {
      width: 36px; height: 36px;
      border: 2px solid rgba(201,168,76,0.2);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      margin: 20px auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ══════════════════════════════════════
       ÁREA DE RESULTADO
       ══════════════════════════════════════ */
    #area-resultado { display: none; animation: fadeIn 0.6s ease; }

    /* ── Hexagrama SVG ── */
    .hexagrama-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .hexagrama-numero {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      color: var(--gold);
      opacity: 0.6;
      text-transform: uppercase;
    }
    .hexagrama-nome {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.6rem;
      color: var(--gold);
      text-shadow: 0 0 20px rgba(201,168,76,0.5);
      text-align: center;
    }
    .hexagrama-pinyin {
      font-family: 'EB Garamond', serif;
      font-style: italic;
      color: var(--mist);
      font-size: 1.1rem;
    }

    /* ── Linhas do hexagrama ── */
    .hexagrama-svg {
      display: flex;
      flex-direction: column-reverse;
      gap: 5px;
      align-items: center;
    }
    .linha-hex {
      display: flex;
      gap: 8px;
      align-items: center;
      transition: all 0.3s;
    }
    .linha-hex .segmento {
      height: 6px;
      border-radius: 3px;
      transition: all 0.4s ease;
    }
    /* Yang — linha contínua */
    .linha-yang .segmento {
      width: 64px;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold-light), var(--gold-dim));
      box-shadow: 0 0 6px rgba(201,168,76,0.5);
    }
    /* Yin — dois segmentos */
    .linha-yin .segmento {
      width: 28px;
      background: rgba(201,168,76,0.45);
    }
    /* Linha móvel (muda) */
    .linha-movel.linha-yang .segmento {
      background: linear-gradient(90deg, var(--vermelho), #c44, var(--vermelho));
      box-shadow: 0 0 8px rgba(139,32,32,0.7);
    }
    .linha-movel.linha-yin .segmento {
      background: rgba(139,32,32,0.6);
    }

    .linha-numero {
      font-family: 'Cinzel', serif;
      font-size: 0.55rem;
      color: var(--mist);
      opacity: 0.5;
      width: 14px;
      text-align: right;
    }
    .linha-movel-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermelho);
      box-shadow: 0 0 6px rgba(139,32,32,0.8);
      margin-left: 4px;
    }

    /* ── Dois hexagramas lado a lado (quando há mudança) ── */
    .duplo-hexagrama {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }
    .hex-label {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      color: var(--mist);
      opacity: 0.6;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 8px;
    }

    /* ── Trigramas ── */
    .trigramas-row {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 16px 0;
    }
    .trigrama-card {
      background: rgba(201,168,76,0.05);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 8px;
      padding: 12px 18px;
      text-align: center;
      min-width: 130px;
      flex: 1;
    }
    .trigrama-pos {
      font-family: 'Cinzel', serif;
      font-size: 0.55rem;
      letter-spacing: 0.2em;
      color: var(--gold);
      opacity: 0.6;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .trigrama-simbolo {
      font-size: 1.8rem;
      line-height: 1;
      margin-bottom: 4px;
    }
    .trigrama-nome {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      color: var(--gold-light);
    }
    .trigrama-imagem {
      font-family: 'EB Garamond', serif;
      font-style: italic;
      color: var(--mist);
      font-size: 0.85rem;
    }

    /* ── Julgamento e Imagem ── */
    .secao-titulo {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.7;
      margin-bottom: 8px;
      display: block;
    }
    blockquote.citacao-grimorio {
      border-left: 2px solid var(--gold);
      margin: 0 0 16px 0;
      padding: 12px 20px;
      font-style: italic;
      color: var(--mist);
      font-size: 1.1rem;
      background: rgba(201,168,76,0.04);
      border-radius: 0 6px 6px 0;
    }

    /* ── Linhas individuais ── */
    .linhas-lista { list-style: none; padding: 0; margin: 0; }
    .linha-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .linha-item:last-child { border-bottom: none; }
    .linha-pos {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      color: var(--gold);
      opacity: 0.7;
      min-width: 24px;
      padding-top: 2px;
    }
    .linha-texto {
      font-family: 'EB Garamond', serif;
      font-size: 1rem;
      color: var(--parchment);
      line-height: 1.6;
      opacity: 0.85;
    }
    .linha-item.destacada .linha-pos { opacity: 1; color: var(--gold-light); }
    .linha-item.destacada .linha-texto { opacity: 1; }
    .linha-item.destacada { background: rgba(201,168,76,0.04); border-radius: 6px; padding: 10px 12px; }
    .badge-movel {
      font-family: 'Cinzel', serif;
      font-size: 0.5rem;
      letter-spacing: 0.1em;
      color: var(--ink);
      background: var(--gold);
      padding: 2px 6px;
      border-radius: 3px;
      margin-left: 6px;
      vertical-align: middle;
    }

    /* ── Relações ── */
    .relacoes-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .relacao-tag {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(201,168,76,0.35);
      padding: 5px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
      background: transparent;
    }
    .relacao-tag:hover {
      background: rgba(201,168,76,0.1);
      border-color: var(--gold);
    }
    .relacao-tipo {
      opacity: 0.55;
      margin-right: 4px;
    }

    /* ── Pergunta exibida ── */
    .pergunta-exibida {
      font-family: 'EB Garamond', serif;
      font-style: italic;
      color: var(--mist);
      font-size: 1rem;
      opacity: 0.7;
      text-align: center;
      margin-bottom: 0;
    }

    /* ── Moedas animadas ── */
    .moedas-container {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 12px 0;
    }
    .moeda {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      color: var(--gold);
      animation: girar 0.5s ease-in-out;
    }
    @keyframes girar {
      0%   { transform: rotateY(0deg); opacity: 0; }
      50%  { transform: rotateY(90deg); opacity: 0.5; }
      100% { transform: rotateY(0deg); opacity: 1; }
    }

    /* ── Separador ── */
    .divisor { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 300px; margin: 0 auto; }
    .divisor-linha { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
    .divisor-simbolo { color: var(--gold-light); font-size: 1.2rem; text-shadow: 0 0 8px currentColor; }

    /* ── Tabela-grimorio para referência ── */
    .tabela-grimorio { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 16px; }
    .tabela-grimorio th { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,168,76,0.35); padding: 8px 10px; text-align: left; }
    .tabela-grimorio td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--parchment); line-height: 1.5; font-size: 0.95rem; }
    .tabela-grimorio tr:hover td { background: rgba(201,168,76,0.04); }

    /* ── Bloco resultado IA ── */
    .bloco-ia {
      background: rgba(74,140,111,0.07);
      border: 1px solid rgba(74,140,111,0.25);
      border-radius: 8px;
      padding: 20px;
      margin-top: 8px;
    }
    .bloco-ia p { margin-bottom: 10px; }
    .bloco-ia p:last-child { margin-bottom: 0; }

    /* ── Tag ── */
    .tag-grimorio {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(201,168,76,0.4);
      padding: 3px 10px;
      border-radius: 20px;
    }

    /* responsivo */
    @media (max-width: 600px) {
      .duplo-hexagrama { gap: 24px; }
      .trigramas-row { flex-direction: column; align-items: center; }
    }