/* Asistente de perfil (perfil.html): panel de datos, nombre, voz, países y globo 3D. */
      /* ============================================================
         PROGRESS BAR
      ============================================================ */
      .progress-bar-wrap {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        height: 4px;
        background: rgba(var(--gold-muted-rgb), 0.15);
      }

      .progress-bar-fill {
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--purple), var(--gold-light));
        transition: width 0.5s ease;
        box-shadow: 0 0 12px rgba(var(--gold-light-rgb), 0.6);
      }

      .profile-hub-inner { max-width: 720px; }
      .profile-data-list { display: grid; gap: 10px; }
      .profile-data-card {
        width: 100%; min-height: 92px; padding: 14px 16px;
        display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center; gap: 12px; text-align: left;
        color: var(--text); background: rgba(255,255,255,.045);
        border: 1px solid rgba(200,195,224,.22); border-radius: var(--r-md);
        cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
      }
      .profile-data-card:hover { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--gold-rgb), .07); transform: translateY(-1px); }
      .profile-data-card.is-complete { border-color: rgba(var(--gold-muted-rgb), .48); background: rgba(var(--gold-muted-rgb), .075); }
      .profile-card-state { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(200,195,224,.35); border-radius: 50%; color: var(--text-muted); font-weight: 800; }
      .profile-data-card.is-complete .profile-card-state { color: #06051a; background: var(--gold-light); border-color: var(--gold-light); }
      .profile-card-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
      .profile-card-copy strong { font-family: var(--font-h); font-size: 15px; color: #fff; }
      .profile-card-copy > span { color: var(--gold-light); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .profile-card-copy small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
      .profile-card-action { color: var(--gold-light); font-family: var(--font-h); font-size: 12px; font-weight: 700; }
      .profile-ai-status { padding: 14px 16px; border: 1px solid rgba(124,58,237,.4); border-radius: var(--r-md); background: rgba(124,58,237,.1); color: #e9e5fa; font-size: 14px; line-height: 1.55; }
      .profile-ai-status strong { display: block; margin-bottom: 3px; color: #fff; }
      .profile-ai-status.is-ready { border-color: rgba(var(--gold-muted-rgb), .55); background: rgba(var(--gold-muted-rgb), .1); }
      .profile-destinations { display: grid; gap: 12px; }
      .profile-destination-card {
        width: 100%; min-height: 108px; padding: 18px;
        display: grid; grid-template-columns: 42px minmax(0,1fr) auto;
        align-items: center; gap: 14px; text-align: left; color: var(--text);
        border: 1px solid rgba(var(--gold-muted-rgb), .42); border-radius: var(--r-md);
        background: linear-gradient(135deg, rgba(124,58,237,.17), rgba(255,255,255,.045));
        cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s;
      }
      .profile-destination-card.universe { background: linear-gradient(135deg, rgba(14,165,233,.17), rgba(124,58,237,.1)); }
      .profile-destination-card:hover { transform: translateY(-2px); border-color: var(--gold-light); box-shadow: 0 8px 28px rgba(6,5,26,.36); }
      .profile-destination-icon { font-size: 30px; }
      .profile-destination-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
      .profile-destination-card strong { color: #fff; font-family: var(--font-h); font-size: 16px; line-height: 1.3; }
      .profile-destination-card small { color: #d5d0e8; font-size: 13px; line-height: 1.5; }
      .profile-destination-arrow { color: var(--gold-light); font-size: 22px; }

      @media (min-width: 680px) {
        .profile-data-list { grid-template-columns: 1fr 1fr; }
        .profile-data-card:first-child { grid-column: 1 / -1; }
        .profile-destinations { grid-template-columns: 1fr 1fr; }
      }

      @media (max-width: 480px) {
        .profile-data-card { min-height: 82px; padding: 12px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
        .profile-card-action { grid-column: 2; }
        .profile-card-copy small { font-size: 11px; }
        .profile-destination-card { min-height: 96px; padding: 14px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; }
        .profile-destination-icon { font-size: 25px; }
        .profile-destination-card strong { font-size: 14px; }
        .profile-destination-card small { font-size: 12px; }
      }

      .identity-card {
        background: rgba(14, 12, 40, 0.96);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: 20px;
        backdrop-filter: blur(14px);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .identity-label {
        display: block;
        margin-bottom: 8px;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .identity-input {
        width: 100%;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-sm);
        padding: 14px 16px;
        background: rgba(6, 5, 26, 0.9);
        color: #ffffff;
        font-size: 16px;
        font-family: var(--font-b);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .identity-input:focus {
        border-color: var(--gold-light);
        box-shadow: 0 0 0 3px rgba(var(--gold-light-rgb), 0.25);
        outline: none;
      }

      .identity-hint { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.55; font-weight: 400; }
      .identity-declaration { margin-top: 14px; color: #dedbf0; font-family: var(--font-h); font-size: 13.5px; line-height: 1.65; font-weight: 500; }
      .identity-declaration strong { color: var(--gold-light); }

      /* ============================================================
         SCREEN 2 — GENDER
      ============================================================ */
      .gender-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        border-radius: var(--r-md);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .gender-btn {
        background: var(--card);
        border: 2px solid var(--border-strong);
        border-radius: var(--r-lg);
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
        color: var(--text);
        font-family: inherit;
      }

      .gender-btn:active { transform: scale(0.96); }

      @media (hover: hover) {
        .gender-btn:hover {
          border-color: var(--gold-light);
          background: rgba(var(--gold-muted-rgb), 0.08);
          box-shadow: 0 0 24px rgba(var(--gold-muted-rgb), 0.22);
        }
      }

      .gender-btn.selected {
        border-color: var(--gold-light);
        background: rgba(124,58,237,0.22);
        box-shadow: 0 0 28px rgba(var(--gold-rgb), 0.3), inset 0 0 16px rgba(var(--gold-rgb), 0.1);
      }

      .gender-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 14px rgba(var(--gold-light-rgb), 0.5)); color: var(--gold-light); }
      .gender-label { font-family: var(--font-h); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; }
      .gender-desc { font-size: 13px; color: #c8c3e0; text-align: center; line-height: 1.5; font-weight: 400; }

      /* ============================================================
         SCREENS 3 & 4 — GLOBE
      ============================================================ */
      .earth-picker-slot {
        width: 100%;
        height: 230px;
        flex: 0 0 230px;
        pointer-events: none;
      }

      /* En móvil el gesto empieza sobre este hueco, mientras la Tierra WebGL
         permanece como fondo. Sin touch-action: none el navegador prioriza el
         desplazamiento de la pantalla y cancela el arrastre casi enseguida. */
      body.earth-picker-open .earth-picker-slot {
        pointer-events: auto;
        touch-action: none;
      }

      @media (min-width: 600px) {
        .earth-picker-slot {
          height: 310px;
          flex-basis: 310px;
        }
      }

      .country-search-wrap {
        position: relative;
        border-radius: var(--r-md);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .country-search-input {
        width: 100%;
        padding: 14px 16px 14px 44px;
        background: rgba(14, 12, 40, 0.95);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        color: #ffffff;
        font-family: var(--font-b);
        font-size: 16px;
        transition: border-color 0.2s, box-shadow 0.2s;
        backdrop-filter: blur(12px);
      }

      .country-search-input:focus {
        border-color: var(--gold-light);
        box-shadow: 0 0 0 3px rgba(var(--gold-light-rgb), 0.25);
        outline: none;
      }

      .country-search-input::placeholder { color: var(--text-muted); opacity: 0.8; }

      .country-search-icon {
        position: absolute;
        left: 16px; top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--gold-light);
        pointer-events: none;
      }

      .country-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0; right: 0;
        background: rgba(14, 12, 40, 0.98);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        max-height: 220px;
        overflow-y: auto;
        z-index: 60;
        display: none;
        box-shadow: 0 12px 40px rgba(0,0,0,0.8);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .country-results.visible { display: block; }

      .country-result-item {
        width: 100%;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid rgba(var(--gold-muted-rgb), 0.12);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        text-align: left;
        transition: background 0.15s;
      }

      .country-results li:last-child .country-result-item { border-bottom: none; }
      .country-result-item:hover { background: rgba(var(--gold-muted-rgb), 0.12); color: #ffffff; }
      .country-result-flag { font-size: 22px; }

      .country-selected-display {
        background: rgba(var(--gold-muted-rgb), 0.1);
        border: 1.5px solid rgba(var(--gold-muted-rgb), 0.4);
        border-radius: var(--r-md);
        padding: 14px 18px;
        align-items: center;
        gap: 14px;
        font-size: 15px;
        color: #ffffff;
        display: none;
      }

      .country-selected-display.visible { display: flex; }
      .country-selected-flag { font-size: 26px; }
      .country-selected-name { font-weight: 600; color: var(--gold-light); }
      .country-selected-change {
        margin-left: auto;
        font-size: 12px;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-weight: 700;
        cursor: pointer;
        background: rgba(var(--gold-muted-rgb), 0.15);
        border: 1px solid rgba(var(--gold-muted-rgb), 0.3);
        border-radius: var(--r-sm);
        padding: 6px 12px;
        letter-spacing: 0.08em;
        transition: background 0.2s;
      }
      .country-selected-change:hover { background: rgba(var(--gold-muted-rgb), 0.3); color: #ffffff; }