/* Portada con globo terráqueo (index.php) */
html, body.globo-body { height: 100%; }
body.globo-body { margin: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #0d1a3a 0%, #050a18 60%, #020409 100%);
    color: #eee; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.estrellas { position: fixed; inset: 0; pointer-events: none; opacity: .55;
    background-image:
        radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 34% 82%, #cfe 50%, transparent 51%), radial-gradient(1px 1px at 88% 66%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 58%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 92%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 6%, #dff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 64%, #fff 50%, transparent 51%);
    background-size: 420px 420px; }

#globo { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; cursor: grab; display: block; }
#globo:active { cursor: grabbing; }

.globo-cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) 18px 0; pointer-events: none; }
.globo-cabecera > * { pointer-events: auto; }
.globo-cabecera .landing-title { font-size: 1.9rem; color: #e50914; margin: 0; text-shadow: 0 4px 10px rgba(229, 9, 20, .4); }
.globo-sub { color: #9aa6c4; font-size: .85rem; margin-top: 2px; }

.pista { position: fixed; left: 50%; bottom: calc(205px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; pointer-events: none;
    background: rgba(10, 18, 40, .75); border: 1px solid rgba(140, 170, 255, .25); padding: 9px 16px; border-radius: 20px; font-size: .9rem;
    white-space: nowrap; transition: opacity .6s; animation: latido 2.4s ease-in-out infinite; }
.pista.oculta { opacity: 0; }
@keyframes latido { 50% { transform: translateX(-50%) scale(1.04); } }

.etiqueta { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; background: rgba(0, 0, 0, .85); padding: 5px 10px; border-radius: 6px;
    font-size: .85rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.etiqueta.ver { opacity: 1; }

.globo-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom)); pointer-events: none; }
.globo-pie > * { pointer-events: auto; }
.leyenda { color: #9aa6c4; font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; background: #c4121c; display: inline-block; }
.chip { color: #fff; text-decoration: none; background: rgba(30, 50, 100, .7); border: 1px solid rgba(140, 170, 255, .35); padding: 7px 13px;
    border-radius: 20px; font-size: .85rem; }
.chip:hover, .chip:focus-visible { background: rgba(50, 80, 150, .9); outline: none; }
.zoom { margin-left: auto; display: flex; gap: 6px; }
.zoom button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(140, 170, 255, .35); background: rgba(10, 18, 40, .8);
    color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.zoom button:hover, .zoom button:focus-visible { background: rgba(50, 80, 150, .9); outline: none; }

/* Ficha del país tocado */
.ficha { position: fixed; z-index: 8; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 24px));
    transform: translate(-50%, calc(100% + 60px)); visibility: hidden; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .35s;
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; box-sizing: border-box;
    background: rgba(14, 22, 48, .96); border: 1px solid rgba(255, 211, 77, .45); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.ficha.abierta { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.ficha img { width: 64px; height: 42px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); flex: none; }
.ficha .sin-bandera { font-size: 2.2rem; flex: none; }
.ficha-texto { flex: 1; min-width: 0; }
.ficha-nombre { font-weight: bold; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-n { color: #9aa6c4; font-size: .85rem; }
.ficha-ir { background: #e50914; color: #fff; text-decoration: none; font-weight: bold; padding: 11px 14px; border-radius: 10px; white-space: nowrap; flex: none; }
.ficha-ir:hover, .ficha-ir:focus-visible { background: #ff0f1f; outline: 2px solid #ffd34d; }
.ficha .cerrar { position: absolute; top: -12px; right: -8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #445;
    background: #1a2244; color: #ccc; cursor: pointer; font-size: .85rem; }
.ficha.abierta ~ .pista { opacity: 0; }

@media (max-width: 520px) {
    .globo-cabecera .landing-title { font-size: 1.45rem; }
    .globo-sub { font-size: .75rem; }
}
.leyenda .punto-ley{width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid #5a0a10;display:inline-block;margin-left:-2px}

/* Cuatro accesos en círculo a la altura del pie, equidistantes (Niños · Mascotas · Deportes · Listado) */
.circulos { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5;
    width: min(520px, 100vw); display: flex; justify-content: space-evenly; align-items: center; pointer-events: none; }
.circulo { pointer-events: auto; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    text-decoration: none; border: 3px solid rgba(255, 255, 255, .85); box-sizing: border-box; transition: transform .2s, box-shadow .2s, background .2s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.circulo > svg, .circulo .anim { width: 60%; height: 60%; display: block; }
.circulo .anim { display: none; }
.circulo.animado > svg { display: none; }
.circulo.animado .anim { display: block; }
.circulo .anim svg { overflow: visible; }
.circulo:hover, .circulo:focus-visible { transform: scale(1.1); outline: none; }
.circulo:active { transform: scale(.94); }
.btn-ninos { background: #ffb300; color: #8a4b00; box-shadow: 0 4px 16px rgba(255, 179, 0, .55); }
.btn-ninos:hover, .btn-ninos:focus-visible { background: #ffc933; }
.btn-mascotas { background: #43a047; color: #fff; box-shadow: 0 4px 16px rgba(67, 160, 71, .55); }
.btn-mascotas:hover, .btn-mascotas:focus-visible { background: #57b85b; }
.btn-deportes { background: #1e88e5; color: #0d3a66; box-shadow: 0 4px 16px rgba(30, 136, 229, .55); }
.btn-deportes:hover, .btn-deportes:focus-visible { background: #3d9bf0; }
.btn-listado { background: #e50914; color: #fff; box-shadow: 0 4px 16px rgba(229, 9, 20, .55); }
.btn-listado:hover, .btn-listado:focus-visible { background: #ff0f1f; }
@media (max-width: 520px) { .circulo { width: 58px; height: 58px; } }

/* Modo infantil: la Tierra cambia a turquesa claro + terracota (globo.js) y la leyenda la acompaña */
body.globo-ninos .leyenda i { background: #e39a74; }
body.globo-ninos .leyenda .punto-ley { border-color: #a5603e; }
body.globo-ninos .btn-ninos { box-shadow: 0 0 0 4px #7fe3dc, 0 4px 18px rgba(127, 227, 220, .8); }