.ac-mapa-natal-sub-form-cosmic {
    background: url('../img/fondo-cosmico.jpg') center center / cover;
    padding: 2.5em;
    border-radius: 22px;
    box-shadow: 0 0 48px 0 rgba(85,41,172,0.3);
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    max-width: 600px;
    margin: 3em auto;
}
.ac-mapa-natal-sub-form-cosmic input,
.ac-mapa-natal-sub-form-cosmic select,
.ac-mapa-natal-sub-form-cosmic button {
    margin: 1em 0;
    border-radius: 9px;
    border: none;
    padding: 0.7em 1em;
    font-size: 1.1em;
}
.ac-mapa-natal-sub-form-cosmic button {
    background: linear-gradient(90deg, #6132a5 30%, #b494ea 100%);
    color: #fff;
    cursor: pointer;
    transition: box-shadow .2s;
}
.ac-mapa-natal-sub-form-cosmic button:hover {
    box-shadow: 0 0 18px 0 #8f6edc80;
}
.genero-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f0f0f5;
  color: #333;
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
  border: none;
  margin: 0.5rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.genero-btn.active {
  background: #000;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}
.genero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 1rem;
  margin-bottom: 2rem;
  justify-items: center;
}
.genero-label {
  width: 100%;
}
.genero-btn .genero-icon {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.genero-btn .genero-icon.masculino { background: #e5f3ff; color: #3daaf8; }
.genero-btn .genero-icon.femenino { background: #ffe7f2; color: #e95e9a; }
.genero-btn .genero-icon.sin-especificar { background: #f2eaff; color: #8a4da5; }
.genero-btn .genero-icon.lgbtttiq { background: #ede7f9; color: #7154b2; }
.genero-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: #000; font-family: 'Helvetica Neue', Arial, sans-serif; }
.genero-subtitle { text-align: center; margin-top: 2rem; font-size: 1rem; line-height: 1.5; color: #4b4b4b; font-family: 'Helvetica Neue', Arial, sans-serif; }
#ac-mapa-natal-sub-map { width: 100%; height: 240px; margin-top: 1rem; border-radius: 1rem; overflow: hidden; background: whitesmoke; }
@media (max-width: 600px) {
  .ac-mapa-natal-sub-form-cosmic { padding: 1.5em; }
  .ac-mapa-natal-sub-form-cosmic .step-4 { padding: 1.5rem; }
  .genero-btn { font-size: 1rem; padding: 0.8rem 1rem; gap: 0.6rem; }
  .genero-btn .genero-icon { width: 2rem; height: 2rem; font-size: 1.2rem; }
  .genero-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; }
  .genero-title { font-size: 1.6rem; }
  .genero-subtitle { font-size: 0.9rem; }
  #ac-mapa-natal-sub-map { height: 200px; }
}
button.next-step, button.prev-step, #next-to-final, #ac-mapa-natal-sub-submit { margin-top: 0; }
.ac-mapa-natal-sub-form-cosmic .step button.prev-step, .ac-mapa-natal-sub-form-cosmic .step button.next-step, .ac-mapa-natal-sub-form-cosmic .step #next-to-final, .ac-mapa-natal-sub-form-cosmic .step #ac-mapa-natal-sub-submit, .ac-mapa-natal-sub-form-cosmic .step #next-to-estado {
  display: inline-block;
  width: calc(49% - 0.5rem);
  margin-top: 2rem;
  text-align: center;
}
.ac-mapa-natal-sub-form-cosmic .step button.prev-step { margin-right: 0.5rem; }
.ac-mapa-natal-sub-form-cosmic .step button.next-step, .ac-mapa-natal-sub-form-cosmic .step #next-to-final, .ac-mapa-natal-sub-form-cosmic .step #ac-mapa-natal-sub-submit { margin-left: 0.5rem; }
.genero-btn .genero-icon.soltero { background: #ede7f9; color: #7154b2; }
.genero-btn .genero-icon.relacion { background: #ffe7f2; color: #e95e9a; }
.genero-btn .genero-icon.comprometido { background: #fdf0e6; color: #c97b5b; }
.genero-btn .genero-icon.casado { background: #e5f3ff; color: #3daaf8; }
.genero-btn .genero-icon.separado { background: #fff4e6; color: #e69a3e; }
.genero-btn .genero-icon.viudo { background: #ecf0f1; color: #7f8c8d; }
.genero-btn .genero-icon.abierta { background: #f3f8e0; color: #8bc34a; }
.genero-btn .genero-icon.union { background: #e7f5ff; color: #5dade2; }

/* --- Estilos para la pantalla de carga y descarga --- */
#ac-mapa-natal-sub-response-container .ac-mapa-natal-sub-status-message { text-align: center; padding: 2em; background-color: rgba(0,0,0,0.2); border-radius: 15px; }
.progress-svg-container { position: relative; margin: 0 auto 2em; width: 150px; height: 150px; }
.progress-svg { width: 100%; height: 100%; }
.progress-bg { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 10; }
.progress-bar { fill: none; stroke: #b494ea; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.5s linear; }
.progress-text-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif; font-size: 2.2em; font-weight: bold; color: #333; line-height: 1; }
.loading-phrase { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1.2em; color: #e0e0e0; min-height: 2em; transition: opacity 0.5s ease-in-out; }
.ac-mapa-natal-sub-download-btn { display: inline-block; margin-top: 1.5em; padding: 1em 2em; background: linear-gradient(90deg, #27ae60 30%, #2ecc71 100%); color: #fff; text-decoration: none; border-radius: 9px; font-size: 1.2em; transition: transform 0.2s ease; }
.ac-mapa-natal-sub-download-btn:hover { transform: scale(1.05); }

.results-container {
    background-color: #f0f0f5;
    padding: 2em;
    border-radius: 15px;
    color: #333;
}

.result-section {
    margin-bottom: 2em;
}

.result-section h2 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2em;
    margin-bottom: 0.5em;
}

.result-section p {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
}