/* ════════════════════════════════════════════════════════
       ESTILOS ESPECÍFICOS — MAPA ASTRAL CÓSMICO
    ════════════════════════════════════════════════════════ */

    /* ── Planetas flutuando no cabeçalho ── */
    .orbita-header {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin: 14px 0 4px;
      flex-wrap: wrap;
    }
    .planeta-icone {
      font-size: 1.3rem;
      opacity: 0.35;
      color: var(--gold);
      text-shadow: 0 0 10px rgba(201,168,76,0.5);
      animation: flutua 4s ease-in-out infinite;
    }
    .planeta-icone:nth-child(2)  { animation-delay: 0.4s; }
    .planeta-icone:nth-child(3)  { animation-delay: 0.8s; }
    .planeta-icone:nth-child(4)  { animation-delay: 1.2s; }
    .planeta-icone:nth-child(5)  { animation-delay: 1.6s; }
    .planeta-icone:nth-child(6)  { animation-delay: 2.0s; }
    .planeta-icone:nth-child(7)  { animation-delay: 2.4s; }
    .planeta-icone:nth-child(8)  { animation-delay: 2.8s; }
    .planeta-icone:nth-child(9)  { animation-delay: 3.2s; }
    .planeta-icone:nth-child(10) { animation-delay: 3.6s; }
    @keyframes flutua {
      0%, 100% { transform: translateY(0);   opacity: 0.35; }
      50%       { transform: translateY(-7px); opacity: 0.85; }
    }

    /* ── Formulário ── */
    .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 input,
    .campo-grimorio select {
      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: 10px 14px;
      outline: none;
      transition: border-color 0.3s;
      width: 100%;
    }
    .campo-grimorio input:focus {
      border-color: rgba(201,168,76,0.6);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
    }
    /* O select em si fica com --parchment (regra acima), mas o dropdown
       (lista de <option>) é renderizado pelo navegador/SO e ignora a
       maior parte do CSS do elemento — por isso precisa de regra própria. */
    .campo-grimorio select option {
      background-color: #1a1118;
      color: var(--parchment);
    }
    .campo-grimorio select option:checked,
    .campo-grimorio select option:hover {
      background-color: rgba(201,168,76,0.2);
      color: var(--gold-light);
    }
    .campos-duplos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 500px) { .campos-duplos { grid-template-columns: 1fr; } }

    /* ── Botões ── */
    .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  { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(201,168,76,0.4); }
    .botao-grimorio:active { transform: translateY(0); }
    .botao-grimorio:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .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); } }

    /* ════════════════ RESULTADO ════════════════ */
    #resultado-mapa { display: none; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
    .reveal { animation: fadeInUp 0.55s ease both; }
    .reveal-1 { animation-delay: 0.05s; }
    .reveal-2 { animation-delay: 0.15s; }
    .reveal-3 { animation-delay: 0.25s; }
    .reveal-4 { animation-delay: 0.35s; }
    .reveal-5 { animation-delay: 0.45s; }
    .reveal-6 { animation-delay: 0.55s; }

    /* ── Banner de identidade ── */
    .banner-identidade { text-align: center; padding: 8px 0 16px; }
    .banner-nome {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.3rem, 5vw, 2rem);
      color: var(--gold);
      text-shadow: 0 0 24px rgba(201,168,76,0.5);
      margin-bottom: 6px;
    }
    .banner-data {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      letter-spacing: 0.3em;
      color: var(--mist);
      opacity: 0.65;
    }
    .banner-jd {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      letter-spacing: 0.15em;
      color: rgba(201,168,76,0.3);
      margin-top: 3px;
    }

    /* ── Dupla Sol / Lua ── */
    .duo-sol-lua {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    @media (max-width: 520px) { .duo-sol-lua { grid-template-columns: 1fr; } }

    .astro-card {
      background: rgba(201,168,76,0.04);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 10px;
      padding: 20px 16px;
      text-align: center;
      transition: border-color 0.3s, transform 0.2s;
    }
    .astro-card:hover { border-color: rgba(201,168,76,0.45); transform: translateY(-2px); }
    .astro-simbolo {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 8px;
      text-shadow: 0 0 18px rgba(201,168,76,0.7);
    }
    .astro-titulo {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      letter-spacing: 0.25em;
      color: var(--gold);
      opacity: 0.7;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .astro-signo {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.2rem;
      color: var(--gold-light);
      margin-bottom: 4px;
    }
    .astro-posicao {
      font-size: 0.82rem;
      color: var(--mist);
      opacity: 0.75;
      margin-bottom: 6px;
    }
    .astro-elemento { font-size: 0.9rem; }
    .astro-resumo {
      font-size: 0.88rem;
      font-style: italic;
      color: var(--mist);
      margin-top: 10px;
      line-height: 1.5;
      opacity: 0.85;
    }
    .astro-traits {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
      margin-top: 10px;
    }
    .trait-tag {
      font-family: 'Cinzel', serif;
      font-size: 0.54rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold-dim);
      border: 1px solid rgba(201,168,76,0.2);
      padding: 2px 8px;
      border-radius: 12px;
    }

    /* ── Fase Lunar ── */
    .fase-lunar-box {
      background: rgba(201,168,76,0.04);
      border: 1px solid rgba(201,168,76,0.14);
      border-radius: 10px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .fase-simbolo { font-size: 2rem; flex-shrink: 0; }
    .fase-info h3 { font-size: 1rem; margin-bottom: 2px; color: var(--gold-light); }
    .fase-info p  { font-size: 0.85rem; color: var(--mist); margin: 0; opacity: 0.8; }
    .fase-ilum {
      margin-left: auto;
      flex-shrink: 0;
      text-align: right;
    }
    .fase-pct {
      font-family: 'Cinzel', serif;
      font-size: 1.2rem;
      color: var(--gold);
    }
    .fase-pct-label {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      letter-spacing: 0.15em;
      color: var(--mist);
      opacity: 0.6;
      display: block;
    }

    /* ── Grid de planetas ── */
    .grid-planetas { display: flex; flex-direction: column; gap: 6px; }

    .linha-planeta {
      display: grid;
      grid-template-columns: 36px 80px 1fr auto 28px;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid transparent;
      transition: all 0.22s;
      cursor: default;
    }
    .linha-planeta:hover {
      background: rgba(201,168,76,0.05);
      border-color: rgba(201,168,76,0.15);
    }
    .pl-sym {
      font-size: 1.3rem;
      text-align: center;
      text-shadow: 0 0 8px rgba(201,168,76,0.45);
    }
    .pl-nome {
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      color: var(--gold);
      opacity: 0.65;
      text-transform: uppercase;
    }
    .pl-signo {
      font-size: 0.98rem;
      color: var(--parchment);
    }
    .pl-resumo {
      font-size: 0.78rem;
      font-style: italic;
      color: var(--mist);
      opacity: 0.65;
      margin-top: 1px;
    }
    .pl-pos {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      color: var(--gold-dim);
      white-space: nowrap;
      text-align: right;
    }
    .pl-elem { font-size: 0.85rem; text-align: center; }

    .separador-geracional {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0;
      opacity: 0.4;
    }
    .separador-geracional::before,
    .separador-geracional::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(201,168,76,0.25);
    }
    .separador-geracional span {
      font-family: 'Cinzel', serif;
      font-size: 0.55rem;
      letter-spacing: 0.2em;
      color: var(--mist);
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* ── Número de vida ── */
    .numero-vida-display { text-align: center; padding: 12px 0 20px; }
    .numero-gigante {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(4.5rem, 18vw, 7rem);
      color: var(--gold);
      text-shadow: 0 0 40px rgba(201,168,76,0.6), 0 0 90px rgba(201,168,76,0.2);
      line-height: 1;
      margin-bottom: 6px;
      animation: pulso-glow 3s ease-in-out infinite;
    }
    @keyframes pulso-glow {
      0%, 100% { text-shadow: 0 0 30px rgba(201,168,76,0.5); }
      50%       { text-shadow: 0 0 55px rgba(201,168,76,0.85), 0 0 110px rgba(201,168,76,0.3); }
    }
    .numero-arquetipo {
      font-family: 'Cinzel', serif;
      font-size: 1.2rem;
      color: var(--gold-light);
      letter-spacing: 0.1em;
      margin-bottom: 10px;
    }
    .numero-missao {
      font-style: italic;
      color: var(--mist);
      font-size: 1rem;
      max-width: 480px;
      margin: 0 auto 16px;
      line-height: 1.6;
    }
    .lista-dupla {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 12px;
      text-align: left;
    }
    @media (max-width: 480px) { .lista-dupla { grid-template-columns: 1fr; } }
    .lista-grupo h3 {
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      margin-bottom: 8px;
      color: var(--gold-dim);
    }
    .lista-grupo ul { list-style: none; padding: 0; }
    .lista-grupo ul li {
      font-size: 0.92rem;
      color: var(--mist);
      margin-bottom: 4px;
      padding-left: 16px;
      position: relative;
    }
    .lista-grupo ul li::before {
      content: '✦';
      position: absolute;
      left: 0;
      color: var(--gold-dim);
      font-size: 0.55rem;
      top: 5px;
    }

    /* ── Elementos ── */
    .elemento-dominante-box {
      background: rgba(201,168,76,0.07);
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 10px;
      padding: 16px 20px;
      text-align: center;
      margin-bottom: 18px;
    }
    .elem-dom-simbolo { font-size: 2.2rem; margin-bottom: 4px; }
    .elem-dom-nome {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      color: var(--gold-light);
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .elem-dom-desc {
      font-size: 0.9rem;
      font-style: italic;
      color: var(--mist);
      opacity: 0.85;
    }

    .barras-elementos { display: flex; flex-direction: column; gap: 10px; }
    .barra-linha {
      display: grid;
      grid-template-columns: 28px 90px 1fr 24px;
      align-items: center;
      gap: 10px;
    }
    .barra-emoji { font-size: 1rem; text-align: center; }
    .barra-label {
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      color: var(--mist);
      opacity: 0.65;
    }
    .barra-track {
      height: 5px;
      background: rgba(255,255,255,0.05);
      border-radius: 3px;
      overflow: hidden;
    }
    .barra-fill {
      height: 100%;
      background: linear-gradient(to right, var(--gold-dim), var(--gold));
      border-radius: 3px;
      width: 0%;
      transition: width 1.1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
    }
    .barra-count {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      color: var(--gold-dim);
      text-align: center;
    }

    /* ── Síntese ── */
    .sintese-item {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      align-items: flex-start;
    }
    .sintese-bullet { color: var(--gold); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
    .sintese-texto  { font-size: 1rem; line-height: 1.65; color: var(--parchment); margin: 0; }
    .sintese-texto em { color: var(--gold-light); font-style: normal; font-weight: 500; }

    /* ── Disclaimer ── */
    .disclaimer {
      font-size: 0.78rem;
      color: rgba(200,191,176,0.35);
      font-style: italic;
      text-align: center;
      border-top: 1px solid rgba(201,168,76,0.1);
      padding-top: 14px;
      margin-top: 8px;
    }

    /* ── Ação nova consulta ── */
    .acao-nova { text-align: center; margin-top: 6px; }

    /* ── Autocomplete de municípios ── */
    .campo-com-sugestoes { position: relative; }
    .lista-sugestoes {
      display: none;
      position: absolute;
      z-index: 50;
      left: 0; right: 0;
      top: calc(100% + 6px);
      max-height: 260px;
      overflow-y: auto;
      background: #1a1118;
      border: 1px solid rgba(201,168,76,0.35);
      border-radius: 8px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.38);
      padding: 6px;
    }
    .item-sugestao {
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: var(--parchment);
      padding: 10px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-family: 'EB Garamond', serif;
      font-size: 1rem;
      line-height: 1.25;
      display: block;
    }
    .item-sugestao:hover,
    .item-sugestao:focus { background: rgba(201,168,76,0.10); outline: none; }
    .item-sugestao small {
      display: block;
      color: var(--mist);
      opacity: 0.75;
      margin-top: 3px;
      font-size: 0.84rem;
    }
    .status-municipios {
      font-size: 0.82rem;
      color: var(--mist);
      opacity: 0.6;
      margin: -6px 0 14px;
      min-height: 1.2em;
    }

    /* ── Ascendente & Meio do Céu ── */
    .asc-box {
      background: rgba(201,168,76,0.05);
      border: 1px solid rgba(201,168,76,0.25);
      border-radius: 10px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 12px;
    }
    .asc-simbolo {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.5rem;
      color: var(--gold);
      text-shadow: 0 0 14px rgba(201,168,76,0.6);
      flex-shrink: 0;
      min-width: 40px;
      text-align: center;
    }
    .asc-info { flex: 1; }
    .asc-titulo {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.7;
      margin-bottom: 3px;
    }
    .asc-signo {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.15rem;
      color: var(--gold-light);
      margin-bottom: 2px;
    }
    .asc-pos { font-size: 0.8rem; color: var(--mist); opacity: 0.7; }
    .asc-resumo {
      font-size: 0.86rem;
      font-style: italic;
      color: var(--mist);
      opacity: 0.82;
      margin-top: 6px;
      line-height: 1.5;
    }

    /* ── Grade de Casas Astrológicas ── */
    .grid-casas {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 10px;
    }
    @media (max-width: 540px) { .grid-casas { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 380px) { .grid-casas { grid-template-columns: repeat(2, 1fr); } }
    .casa-item {
      background: rgba(201,168,76,0.04);
      border: 1px solid rgba(201,168,76,0.13);
      border-radius: 8px;
      padding: 10px 6px;
      text-align: center;
      transition: border-color 0.2s;
    }
    .casa-item:hover { border-color: rgba(201,168,76,0.3); }
    .casa-numero {
      font-family: 'Cinzel', serif;
      font-size: 0.52rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.55;
      margin-bottom: 4px;
    }
    .casa-signo { font-size: 0.92rem; color: var(--parchment); margin-bottom: 2px; }
    .casa-grau  { font-family: 'Cinzel', serif; font-size: 0.58rem; color: var(--gold-dim); }
    .casa-tema  { font-size: 0.7rem; color: var(--mist); opacity: 0.55; margin-top: 4px; font-style: italic; line-height: 1.3; }