/* ═══════════════════════════════════════════════
   AUGU · la guía que baja por su telaraña
   Componente de augu.js. Todo vive bajo .augu / .augu-brujula.
   ═══════════════════════════════════════════════ */
.augu, .augu-brujula {
  --augu-noche: var(--noche, #00040d);
  --augu-tinta: var(--tinta, #0e0b16);
  --augu-hueso: var(--hueso, #efe8da);
  --augu-bruma: var(--bruma, #a69fb3);
  --augu-azul: var(--azul, #2a12ff);
  --augu-azul-luz: var(--azul-luz, #9ba5ff);
  --augu-veneno: var(--veneno, #8fc3ff);
  --augu-gotica: var(--gotica, "Grenze Gotisch", serif);
  --augu-mono: var(--mono, "Space Mono", ui-monospace, Menlo, monospace);
  --augu-letra: "Augurium", var(--augu-gotica);  /* tipografía de la marca (alta y angosta) */
  /* geometría (augu.js lee --augu-alto, --augu-hebra y --augu-dentro: déjalos en px) */
  --augu-arriba: calc(60px + env(safe-area-inset-top, 0px));   /* borde inferior de la barra */
  --augu-abajo: calc(14px + env(safe-area-inset-bottom, 0px));
  --augu-anclaje: 12px;  /* la telita que cuelga de la barra */
  --augu-x: 9px;         /* distancia del hilo al borde derecho */
  --augu-alto: 80px;
  --augu-hebra: 22px;    /* hebra entre el nudo y la coronilla */
  --augu-dentro: -22px;  /* cuánto se asoma al hablar */
}

/* ─────────── el riel ─────────── */
.augu {
  position: fixed; z-index: 52;
  top: var(--augu-arriba); bottom: 0; left: 0; right: env(safe-area-inset-right, 0px);
  overflow: hidden;      /* nunca por encima de la barra, y lo que asoma por la derecha no ensancha la página */
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, visibility .5s;
}
.augu.augu--listo { opacity: 1; }
html.leyendo .augu, html.leyendo .augu-brujula { opacity: 0; visibility: hidden; }

.augu-tela {
  position: absolute; top: 0; right: 0; width: 64px; height: 44px; overflow: visible;
  fill: none; stroke: var(--augu-hueso); stroke-width: .7; opacity: .26;
}
.augu-via { position: absolute; top: var(--augu-anclaje); bottom: var(--augu-abajo); right: 0; width: 64px; }
.augu-riel {
  position: absolute; top: 0; bottom: 0; right: var(--augu-x); width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--augu-azul-luz) 42%, transparent), color-mix(in srgb, var(--augu-hueso) 20%, transparent) 18%, color-mix(in srgb, var(--augu-hueso) 14%, transparent) 82%, rgba(239, 232, 218, 0));
}
.augu-riel-hecho {
  position: absolute; inset: 0;
  transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(180deg, color-mix(in srgb, var(--augu-hueso) 50%, transparent), color-mix(in srgb, var(--augu-azul-luz) 95%, transparent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--augu-azul-luz) 75%, transparent);
  will-change: transform;
}

/* nudos (uno por sección) */
.augu-marca {
  position: absolute; top: -22px; right: 0; width: 44px; height: 44px;
  pointer-events: auto; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.augu-nudo {
  position: absolute; top: 50%; right: calc(var(--augu-x) - 2.5px);
  width: 6px; height: 6px; margin-top: -3px;
  background: var(--augu-noche); box-shadow: 0 0 0 1px color-mix(in srgb, var(--augu-hueso) 60%, transparent);
  transform: rotate(45deg);
  transition: background .3s, box-shadow .3s, transform .3s;
}
.augu-marca b {
  position: absolute; top: 50%; right: calc(var(--augu-x) + 9px);
  font: 700 10.5px/1 var(--augu-mono); letter-spacing: .06em; color: var(--augu-veneno); white-space: nowrap;
  text-shadow: 0 0 3px var(--augu-noche), 0 0 6px var(--augu-noche), 0 0 10px var(--augu-noche);
  opacity: 0; transform: translate(4px, -50%); transition: opacity .3s, transform .3s;
}
.augu-marca span {
  position: absolute; top: 50%; right: calc(var(--augu-x) + 34px);
  padding: 5px 9px; background: var(--augu-tinta); border: 1px solid color-mix(in srgb, var(--augu-azul-luz) 35%, transparent);
  font: 400 11px/1 var(--augu-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--augu-hueso); opacity: 0; transform: translate(6px, -50%); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.augu-marca.es-actual .augu-nudo {
  background: var(--augu-veneno);
  box-shadow: 0 0 0 1px var(--augu-veneno), 0 0 9px var(--augu-veneno);
  transform: rotate(45deg) scale(1.3);
}
.augu-marca.es-actual b { opacity: 1; transform: translate(0, -50%); }
.augu--brujula .augu-marca b, .augu--habla .augu-marca.es-actual b { opacity: 0; }
@media (hover: hover) {
  .augu-marca:hover .augu-nudo { background: var(--augu-azul-luz); box-shadow: 0 0 0 1px var(--augu-azul-luz), 0 0 8px var(--augu-azul); }
  .augu-marca:hover b { opacity: 1; color: var(--augu-azul-luz); transform: translate(0, -50%); }
  .augu-marca:hover span { opacity: 1; transform: translate(0, -50%); }
  .augu-marca.es-actual:hover b { color: var(--augu-veneno); }
}

/* ─────────── Augu colgando ─────────── */
.augu-colgado { position: absolute; top: 0; right: var(--augu-x); width: 1px; height: 0; will-change: transform; }
.augu-bote { position: absolute; inset: 0; }
.augu-hebra {
  position: absolute; left: 0; top: 0; width: 1px; height: var(--augu-hebra);
  background: color-mix(in srgb, var(--augu-hueso) 85%, transparent); box-shadow: 0 0 4px color-mix(in srgb, var(--augu-azul-luz) 80%, transparent);
  transform-origin: 50% 0; will-change: transform;
}
.augu-cuerpo {
  position: absolute;
  top: calc(var(--augu-hebra) - var(--augu-alto) * .146);
  left: calc(.5px - var(--augu-alto) * .2549);
  width: calc(var(--augu-alto) * .5333); height: var(--augu-alto);
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  will-change: transform;
}
/* área táctil ≥ 44 px aunque medio cuerpo esté por fuera */
.augu-cuerpo::before { content: ""; position: absolute; top: -8px; bottom: -6px; left: -18px; right: -12px; }
.augu-cuerpo:focus { outline: none; }
.augu-cuerpo:focus-visible { outline: 2px dashed var(--augu-veneno); outline-offset: 3px; border-radius: 12px; }
.augu-pendulo, .augu-salto, .augu-respira { position: absolute; inset: 0; transform-origin: 47.8% 14.6%; }
.augu-pendulo { will-change: transform; }
.augu-respira { animation: augu-respira 5.5s ease-in-out infinite; }
.augu-cuerpo img {
  display: block; width: 100%; height: 100%; max-width: none;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--augu-azul-luz) 90%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--augu-azul) 85%, transparent));
}
@keyframes augu-respira {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}

/* ─────────── el globo ─────────── */
.augu-globo {
  position: absolute;
  right: calc(var(--augu-alto) * .2549 - var(--augu-dentro) + 4px);
  top: calc(var(--augu-hebra) + var(--augu-alto) * .3);
  width: max-content; max-width: min(232px, calc(100vw - 100px));
  pointer-events: none; cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 9px color-mix(in srgb, var(--augu-azul) 70%, transparent));
  opacity: 0; visibility: hidden;
  transform: translateY(-50%);
  transition: opacity .18s ease, visibility .18s, transform .3s ease;
}
/* cerca del borde de abajo el globo sube sobre la cabeza (lejos del botón de WhatsApp) */
.augu--abajo .augu-globo { transform: translateY(calc(-100% - 18px)); }
.augu-globo-borde {
  display: block; padding: 1px;
  background: linear-gradient(110deg, var(--augu-azul-luz), var(--augu-azul) 70%, var(--augu-azul-luz));
  clip-path: polygon(9px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 0 9px);
  transform-origin: 100% 50%; transform: translateX(10px) scale(.86);
  transition: transform .32s cubic-bezier(.2, 1.5, .4, 1);
}
.augu-globo-txt {
  display: block; margin: 0; padding: 8px 24px 9px 14px;
  background: linear-gradient(160deg, #17132b, var(--augu-tinta) 70%);
  clip-path: polygon(8.6px 0, calc(100% - 15.6px) 0, 100% 50%, calc(100% - 15.6px) 100%, 0 100%, 0 8.6px);
  color: var(--augu-hueso); font: 400 21px/1.08 var(--augu-letra); letter-spacing: .01em;
  text-wrap: pretty;
}
.augu--habla .augu-globo { opacity: 1; visibility: visible; pointer-events: auto; }
.augu--habla .augu-globo-borde { transform: none; }

/* ─────────── la brújula ─────────── */
.augu-brujula {
  position: fixed; z-index: 53; top: 120px;
  right: calc(env(safe-area-inset-right, 0px) + 62px);
  width: min(248px, calc(100vw - 84px));
  max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 6px 6px;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--augu-azul) 26%, transparent), transparent 70%), var(--tinta, #0b0b18);
  border: 1px solid color-mix(in srgb, var(--augu-azul-luz) 40%, transparent);
  border-radius: 20px 4px 20px 4px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .7), 0 0 30px color-mix(in srgb, var(--augu-azul) 35%, transparent);
  color: var(--augu-hueso);
  opacity: 0; transform: translateX(14px) scale(.94); transform-origin: 100% 50%;
  transition: opacity .18s ease, transform .26s cubic-bezier(.2, 1.3, .4, 1);
}
.augu-brujula--abierta { opacity: 1; transform: none; }
.augu-brujula-tela {
  position: absolute; top: 0; right: 0; width: 84px; height: 84px; pointer-events: none;
  fill: none; stroke: var(--augu-hueso); stroke-width: .7; opacity: .2;
}
.augu-brujula-cabeza { position: relative; display: flex; align-items: center; gap: 11px; padding: 0 10px 11px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--augu-hueso) 14%, transparent); }
.augu-brujula-cabeza img {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: #000;
  box-shadow: 0 0 0 1.5px var(--augu-azul-luz), 0 0 0 4px color-mix(in srgb, var(--augu-azul) 35%, transparent), 0 0 16px color-mix(in srgb, var(--augu-azul) 90%, transparent);
}
.augu-brujula-cabeza p { margin: 0; font: 400 32px/1 var(--augu-letra); letter-spacing: .01em; }
.augu-brujula ol { list-style: none; margin: 0; padding: 0; }
.augu-brujula a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 10px;
  border-radius: 12px 3px 12px 3px; color: var(--augu-hueso); text-decoration: none;
  font: 400 27px/1 var(--augu-letra);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}
.augu-brujula a i { flex: none; min-width: 30px; font: 700 11px/1 var(--augu-mono); letter-spacing: .06em; font-style: normal; color: var(--augu-azul-luz); }
.augu-brujula a::after {
  content: ""; flex: none; margin-left: auto; width: 6px; height: 6px;
  transform: rotate(45deg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--augu-hueso) 35%, transparent);
}
.augu-brujula a[aria-current] { color: var(--augu-veneno); background: color-mix(in srgb, var(--augu-veneno) 10%, transparent); }
.augu-brujula a[aria-current] i { color: var(--augu-veneno); }
.augu-brujula a[aria-current]::after { background: var(--augu-veneno); box-shadow: 0 0 0 1px var(--augu-veneno), 0 0 9px var(--augu-veneno); }
.augu-brujula a:active { background: color-mix(in srgb, var(--augu-azul-luz) 16%, transparent); }
.augu-brujula a:focus { outline: none; }
.augu-brujula a:focus-visible { box-shadow: inset 0 0 0 2px var(--augu-veneno); }
@media (hover: hover) { .augu-brujula a:hover { background: color-mix(in srgb, var(--augu-azul-luz) 12%, transparent); } }

/* el destino de un salto recibe el foco sin marco */
.augu-destino:focus { outline: none; }

@media (min-width: 900px) {
  .augu, .augu-brujula { --augu-alto: 92px; --augu-hebra: 26px; --augu-x: 14px; --augu-dentro: -26px; }
  .augu-via { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .augu-respira { animation: none; }
  .augu-globo-borde, .augu-brujula { transition: none; transform: none; }
  .augu-marca b, .augu-marca span { transition: none; }
}

/* en pantallas táctiles los nudos son solo indicadores: no roban toques a las cartas */
@media (pointer: coarse) { .augu-marca { pointer-events: none; } }

/* acciones de la brújula */
.augu-brujula-acciones { display: grid; gap: 6px; margin-top: 8px; padding: 10px 6px 2px; border-top: 1px solid color-mix(in srgb, var(--augu-hueso) 14%, transparent); }
.augu-brujula-acciones > * {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 400 23px/1 var(--augu-letra); letter-spacing: .01em;
}
.augu-brujula-acciones button { background: color-mix(in srgb, var(--augu-azul) 55%, transparent); color: var(--augu-hueso); box-shadow: inset 0 0 0 1px var(--augu-azul-luz); }
.augu-brujula-acciones a { background: var(--augu-hueso); color: var(--augu-noche); }

/* agarrar a Augu: el dedo o el mouse la llevan por el hilo y la página la sigue */
.augu-cuerpo { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.augu--arrastre .augu-cuerpo { cursor: grabbing; }
html.augu-arrastrando, html.augu-arrastrando * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
html.augu-arrastrando { scroll-behavior: auto !important; }
.augu--arrastre .augu-riel-hecho { filter: drop-shadow(0 0 6px var(--augu-azul-luz)); }