/* globo.css — el globo de información (BLOQUE 4.1 p3; maqueta «Globo de Información Cancun100»). Solo tokens del tema:
   la «i» hereda el color del texto donde está; el recuadro es tinta sobre fondo invertido, igual de noche y de día. */

.c100-globo { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 4px; }
.c100-i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; background: none;
  color: var(--mu); font: 700 13px/1 var(--ui); text-transform: none; letter-spacing: 0; font-style: normal; cursor: pointer; padding: 0; position: relative;
  display: inline-grid; place-items: center;
}
.c100-i::after { content: ""; position: absolute; inset: -11px; }   /* zona de toque de 44 px */
.c100-i[aria-expanded="true"] { background: var(--tx); color: var(--g); border-color: var(--tx); }
.c100-i:focus-visible, .c100-globo__x:focus-visible, .c100-globo__caja a:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

.c100-globo__caja {
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 30; width: min(320px, 86vw); transform: translateX(var(--c100-globo-x, -50%));
  background: var(--tx); color: var(--g); border-radius: 14px; padding: 14px 44px 14px 14px;
  font: 500 14px/1.45 var(--ui); text-transform: none; letter-spacing: 0; text-align: left; box-shadow: 0 14px 34px rgba(0, 0, 0, .28);   /* no hereda el mono en mayusculas de una celda o rotulo */
}
.c100-globo__caja::before { content: ""; position: absolute; top: -6px; left: calc(50% + var(--c100-globo-punta, 0px) - 6px); width: 12px; height: 12px; background: var(--tx); transform: rotate(45deg); }
.c100-globo__caja[hidden] { display: none; }
.c100-globo__caja b { display: block; font-weight: 800; margin-bottom: 2px; }
.c100-globo__caja a { color: var(--ac); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.c100-globo__x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: none; color: inherit; font: 700 18px/1 inherit; cursor: pointer; opacity: .7; }
@media (prefers-reduced-motion: no-preference) { .c100-globo__caja:not([hidden]) { animation: c100-globo-sale .14s ease-out; } }
@keyframes c100-globo-sale { from { opacity: 0; transform: translateX(var(--c100-globo-x, -50%)) translateY(-4px); } }

/* ARREGLOS-VISUALES-13-OCT §6: el globo abierto quedaba DETRÁS de las tarjetas vecinas (las cifras del héroe de la home
   y las mini homes): cada tarjeta .glass crea su propio contexto de apilamiento (backdrop-filter), así que ningún z-index
   dentro del globo lo sacaba. Mientras está abierto, sube la tarjeta que lo lleva (y su <li>) por encima de las demás.
   El diseño del globo no cambia. */
:is(li, .glass, .tarjeta, article, .c100-cifra):has(.c100-i[aria-expanded="true"]) { position: relative; z-index: 60; }