* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    font-family: 'Comic Sans MS', 'Trebuchet MS', 'Segoe UI', sans-serif;
    background: #050716;
    color: #fff;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #scene { position: fixed; inset: 0; z-index: 0; touch-action: none; }

  /* ---------- Botones de zoom (+/-) ---------- */
  #zoomCtrl {
    position: fixed; right: 12px; bottom: 16px; z-index: 15;
    display: flex; flex-direction: column; gap: 9px;
  }
  #zoomCtrl button {
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: none;
    font-family: inherit; font-weight: bold; font-size: 26px; line-height: 1; color: #fff;
    background: linear-gradient(#3a7bd5, #2456b0);
    box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
  }
  #zoomCtrl button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }

  /* ---------- Encabezado ---------- */
  #header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    text-align: center; padding: 12px 10px 8px;
    pointer-events: none;
  }
  #header h1 {
    font-size: clamp(20px, 4vw, 40px);
    text-shadow: 0 0 12px #4db8ff, 0 3px 6px rgba(0,0,0,.7);
    letter-spacing: 1px;
  }
  #header p {
    font-size: clamp(12px, 2vw, 18px);
    color: #ffe27a; margin-top: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,.8);
  }

  /* ---------- Botones de filtro ---------- */
  #filters {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 15; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    padding: 0 8px; width: max-content; max-width: 96vw;
  }
  .filter-btn {
    cursor: pointer; border: none; border-radius: 999px;
    padding: 10px 18px; font-size: clamp(13px, 2vw, 18px);
    font-family: inherit; font-weight: bold; color: #fff;
    box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.4);
    transition: transform .12s, box-shadow .12s, filter .12s;
    display: flex; align-items: center; gap: 6px;
  }
  .filter-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
  .filter-btn.todos    { background: linear-gradient(#7d5cff, #5b34e0); }
  .filter-btn.natural  { background: linear-gradient(#37c86b, #1f9e4e); }
  .filter-btn.artificial { background: linear-gradient(#ff9a3c, #f56a1c); }
  .filter-btn.active { outline: 2px solid #fff; filter: brightness(1.15); transform: scale(1.06); }

  /* ---------- Tarjeta de información ---------- */
  #infocard {
    position: fixed; z-index: 20; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(230%);
    width: min(92vw, 520px);
    background: rgba(15, 22, 55, 0.96);
    border: 3px solid #ffe27a; border-radius: 22px;
    padding: 16px 18px 18px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
    transition: transform .35s cubic-bezier(.2,1.3,.4,1);
    backdrop-filter: blur(4px);
  }
  #infocard.show { transform: translateX(-50%) translateY(0); }
  #infocard .emoji { font-size: 46px; line-height: 1; }
  #infocard h2 { font-size: clamp(20px, 3.5vw, 28px); margin: 6px 0; }
  #infocard .tag {
    display: inline-block; font-size: 14px; font-weight: bold;
    padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
  }
  #infocard .tag.nat { background: #1f9e4e; }
  #infocard .tag.art { background: #f56a1c; }
  #infocard .tag.star { background: #e0a400; }
  #infocard .tag.planet { background: #2a7fd6; }
  #infocard p { font-size: clamp(15px, 2.4vw, 19px); line-height: 1.4; color: #eaf1ff; }
  #infocard .row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
  #infocard button {
    cursor: pointer; border: none; border-radius: 999px; font-family: inherit;
    font-weight: bold; font-size: 15px; padding: 9px 16px; color: #fff;
  }
  #speakBtn { background: #2a7fd6; }
  #closeBtn { background: #666; }

  /* ---------- Botón de ayuda (ampolleta a la izquierda) ---------- */
  #helpBtn {
    position: fixed; left: 12px; top: 92px; z-index: 16;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(150,130,255,.45); background: rgba(20,16,60,.6);
    font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
  }
  #helpBtn .help-text {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    width: max-content; max-width: 62vw; text-align: left;
    background: rgba(0,0,0,.82); color: #d6e2ff; font-family: inherit;
    font-size: 14px; font-weight: bold; line-height: 1.3;
    padding: 9px 13px; border-radius: 12px; border: 1px solid rgba(150,190,255,.4);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s;
  }
  #helpBtn.open .help-text { opacity: 1; visibility: visible; }
  /* ---------- Pantalla de carga ---------- */
  #loader {
    position: fixed; inset: 0; z-index: 50; background: #050716;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .6s; text-align: center;
  }
  #loader .rocket { font-size: 70px; animation: fly 1.2s ease-in-out infinite alternate; }
  #loader p { margin-top: 10px; font-size: 20px; color: #ffe27a; }
  @keyframes fly { from { transform: translateY(10px) rotate(-8deg);} to { transform: translateY(-14px) rotate(8deg);} }

  .hidden { opacity: 0 !important; pointer-events: none !important; }

  /* ---------- Botón mostrar/ocultar órbitas (esquina) ---------- */
  .corner-btn {
    position: fixed; top: 14px; right: 14px; z-index: 15;
    cursor: pointer; border: none; border-radius: 999px;
    padding: 8px 13px; font-family: inherit; font-weight: bold;
    font-size: clamp(13px, 1.8vw, 16px); color: #fff;
    background: linear-gradient(#3a7bd5, #2456b0);
    box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.4);
    display: flex; align-items: center; gap: 0;
  }
  .corner-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
  .corner-btn.off { filter: grayscale(.6) brightness(.85); }
  /* Colapsado por defecto: solo el icono; el texto aparece al pasar el mouse */
  .corner-btn .cico { font-size: 18px; line-height: 1; }
  .corner-btn .obl {
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
    transition: max-width .3s ease, opacity .25s ease, margin-left .3s ease;
  }
  .corner-btn.open .obl { max-width: 180px; opacity: 1; margin-left: 6px; }
  @media (hover: hover) {
    .corner-btn:hover .obl { max-width: 180px; opacity: 1; margin-left: 6px; }
  }

  /* ---------- Astronauta y "para qué sirve" dentro de la tarjeta ---------- */
  #infocard .astronaut {
    position: absolute; top: -46px; left: -8px;
    font-size: 58px; line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.55));
    animation: floaty 2.4s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes floaty { from { transform: translateY(0) rotate(-4deg);} to { transform: translateY(-9px) rotate(4deg);} }
  #infocard .purpose-list {
    display: none; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 14px; margin: 12px 0 6px;
  }
  #infocard .purpose-list .pchip {
    position: relative; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 16px; font-size: 38px;
    background: rgba(120,170,255,.14); border: 2px solid rgba(150,190,255,.4);
    transition: transform .12s, background .12s;
  }
  #infocard .purpose-list .pchip.show-tip {
    transform: translateY(-3px); background: rgba(120,170,255,.28);
  }
  @media (hover: hover) {
    #infocard .purpose-list .pchip:hover {
      transform: translateY(-3px); background: rgba(120,170,255,.28);
    }
  }
  /* Globo del tooltip */
  #infocard .purpose-list .pchip .tip {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: #0f1838; color: #fff; border: 2px solid rgba(150,190,255,.55);
    padding: 6px 11px; border-radius: 12px; font-size: 14px; font-weight: bold;
    line-height: 1.2; text-align: center; max-width: 150px; width: max-content;
    box-shadow: 0 6px 14px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s;
    z-index: 6;
  }
  #infocard .purpose-list .pchip .tip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #0f1838;
  }
  #infocard .purpose-list .pchip.show-tip .tip { opacity: 1; visibility: visible; }
  @media (hover: hover) {
    #infocard .purpose-list .pchip:hover .tip { opacity: 1; visibility: visible; }
  }

  /* ---------- Control de velocidad (esquina superior izquierda) ---------- */
  #speedCtrl {
    position: fixed; top: 14px; left: 14px; z-index: 15; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    background: rgba(20,16,60,.5); padding: 6px 11px; border-radius: 999px;
    border: 1px solid rgba(150,130,255,.4);
  }
  #speedCtrl .cico { font-size: 16px; line-height: 1; }
  /* Valor actual visible cuando está colapsado */
  #speedCtrl .cur {
    font-size: 14px; font-weight: bold; color: #ffe27a; overflow: hidden;
    max-width: 40px; opacity: 1; transition: max-width .3s ease, opacity .2s ease;
  }
  #speedCtrl .lbl {
    font-size: 13px; color: #cfe0ff; font-weight: bold; white-space: nowrap; overflow: hidden;
    max-width: 0; opacity: 0; transition: max-width .3s ease, opacity .25s ease;
  }
  /* Botones ocultos hasta el hover */
  #speedCtrl .opts {
    display: flex; align-items: center; gap: 6px; overflow: hidden;
    max-width: 0; opacity: 0; transition: max-width .35s ease, opacity .25s ease;
  }
  /* Expandido al PRESIONAR (clase .open, táctil; se alterna) */
  #speedCtrl.open .cur { max-width: 0; opacity: 0; margin: 0; }
  #speedCtrl.open .lbl { max-width: 90px; opacity: 1; }
  #speedCtrl.open .opts { max-width: 220px; opacity: 1; }
  /* Solo con mouse real: expandir al hover (evita el "hover pegajoso" en táctil) */
  @media (hover: hover) {
    #speedCtrl:hover .cur { max-width: 0; opacity: 0; margin: 0; }
    #speedCtrl:hover .lbl { max-width: 90px; opacity: 1; }
    #speedCtrl:hover .opts { max-width: 220px; opacity: 1; }
  }
  #speedCtrl .spd {
    cursor: pointer; border: none; border-radius: 999px;
    padding: 5px 11px; font-family: inherit; font-weight: bold; font-size: 14px;
    color: #fff; background: #2456b0;
  }
  #speedCtrl .spd.active { box-shadow: inset 0 0 0 2px #fff; filter: brightness(1.15); }

  /* ---------- Crédito del autor (estilo espacial) ---------- */
  #author {
    position: fixed; bottom: 14px; left: 14px; z-index: 12; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 999px;
    background: rgba(20,16,60,.55);
    border: 1px solid rgba(150,130,255,.5);
    box-shadow: 0 0 18px rgba(120,90,255,.45), inset 0 0 12px rgba(120,90,255,.22);
    backdrop-filter: blur(3px);
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  /* Brillo del borde y astronauta al PRESIONAR (clase .show-astro; táctil, se alterna) */
  #author.show-astro {
    border-color: rgba(190,170,255,.95);
    box-shadow: 0 0 30px rgba(150,120,255,.85), inset 0 0 16px rgba(150,120,255,.4);
  }
  /* Mini astronauta que hace de icono; se oculta cuando aparece el grande */
  #author .astro-mini {
    height: 27px; width: auto; display: block;
    filter: drop-shadow(0 0 4px rgba(160,140,255,.6));
    transition: opacity .18s ease;
  }
  #author.show-astro .astro-mini { opacity: 0; }
  /* Astronauta grande: crece desde el botón y queda apoyado encima */
  #author #astro-pop {
    position: absolute; left: 50%; bottom: calc(100% - 10px);
    width: 118%; height: auto; transform-origin: left bottom;
    /* -36% en vez de -50%: centra la CINTURA (no el borde de la imagen) en el botón */
    transform: translateX(-36%) translateY(24px) scale(.32);
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease, transform .42s cubic-bezier(.2,1.25,.4,1);
  }
  #author.show-astro #astro-pop {
    opacity: 1; transform: translateX(-36%) translateY(0) scale(1);
  }
  /* Solo con mouse real: mostrar con hover (evita el "hover pegajoso" en táctil que
     impedía volver a la normalidad al tocar de nuevo) */
  @media (hover: hover) {
    #author:hover {
      border-color: rgba(190,170,255,.95);
      box-shadow: 0 0 30px rgba(150,120,255,.85), inset 0 0 16px rgba(150,120,255,.4);
    }
    #author:hover .astro-mini,
    #author:focus-within .astro-mini { opacity: 0; }
    #author:hover #astro-pop,
    #author:focus-within #astro-pop {
      opacity: 1; transform: translateX(-36%) translateY(0) scale(1);
    }
  }
  #author .name {
    font-size: clamp(13px, 2vw, 16px); font-weight: bold; letter-spacing: 1.2px;
    background: linear-gradient(90deg, #8fd3ff, #c9a6ff, #ffd36e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 6px rgba(160,140,255,.55));
  }

  /* ============================================================
     RESPONSIVE — celular y tablet
     ============================================================ */

  /* Celular y tablet (< 1100px): apilar en vertical. El AUTOR va arriba y
     los filtros al fondo, así el astronauta (que sube desde el autor) no
     pasa por encima de los botones. */
  @media (max-width: 1100px) {
    #filters { bottom: 12px; gap: 8px; }
    #author { left: 50%; right: auto; transform: translateX(-50%); bottom: 70px; }
    #infocard { bottom: 120px; }
  }

  /* Celular (pantallas angostas): filtros SOLO con icono (ahorra espacio),
     título más abajo para no chocar con los controles, tarjeta con scroll */
  @media (max-width: 600px) {
    #header { padding-top: 50px; }
    #header h1 { font-size: 22px; }
    #header p { font-size: 13px; }
    #filters { gap: 36px; }
    #filters .filter-btn { padding: 11px; }
    #filters .filter-btn .fic { font-size: 24px; line-height: 1; }
    #filters .filter-btn .flbl { display: none; }
    #helpBtn { top: 120px; }
    #infocard { max-height: calc(100dvh - 150px); overflow-y: auto; }
    #infocard .astronaut { display: none; }
  }

  /* Poca altura (celular en horizontal): compactar y que la
     tarjeta de info quepa con scroll */
  @media (max-height: 520px) {
    #header { padding-top: 6px; }
    #header h1 { font-size: 20px; }
    #infocard { top: 6px; bottom: 60px; max-height: none; overflow-y: auto; }
    #infocard .astronaut { display: none; }
  }