/* ============================================================================
   guide.css — capa "Guía funk": mano (pointer), mascota + bocadillo, toggle logo.
   Doodles recoloreados con mask-image (todos los webp tienen alpha).
   ============================================================================ */

/* --- Recolor por máscara: el doodle toma var(--mfg-color) --- */
.mfg-pointer, .mfg-mascot, .mfg-bulb, .mfg-aviso {
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	background-color: var(--mfg-color, var(--mf-ink));
	display: inline-block;
}
.mfg-pointer { -webkit-mask-image: url(../img/guide/pointer-ill.webp); mask-image: url(../img/guide/pointer-ill.webp); }
.mfg-mascot  { -webkit-mask-image: url(../img/guide/icon-proyectos.webp); mask-image: url(../img/guide/icon-proyectos.webp); }
.mfg-bulb    { -webkit-mask-image: url(../img/guide/bulb.webp); mask-image: url(../img/guide/bulb.webp); }
.mfg-aviso   { -webkit-mask-image: url(../img/guide/aviso.webp); mask-image: url(../img/guide/aviso.webp); }

/* =================== Sistema 1 — Mano guía =================== */
.mfg-pointer-guide {
	position: fixed; z-index: 40; width: clamp(48px, 4vw, 72px); aspect-ratio: 1;
	pointer-events: none; opacity: 0;
	--mfg-color: var(--mf-ink);
	transition: opacity .35s var(--mf-ease);   /* glued a target por scroll (sin transición de left/top) */
	will-change: left, top;
}
/* solo al cambiar de sección: viaje suave */
.mfg-pointer-guide.is-travel { transition: opacity .35s var(--mf-ease), left .55s var(--mf-ease), top .55s var(--mf-ease); }
.mfg-pointer-guide.is-on { opacity: 1; }
.mfg-pointer-guide .mfg-pointer { width: 100%; height: 100%; animation: mfg-bob 1.6s var(--mf-ease) infinite; }
/* dirección: por defecto apunta a la derecha (mano sentada a la IZQUIERDA del target) */
.mfg-pointer-guide[data-dir="left"] .mfg-pointer { transform: scaleX(-1); }
.mfg-pointer-guide[data-dir="left"] .mfg-pointer { animation-name: mfg-bob-left; }
/* sobre superficies oscuras el color lo fija el JS (paper) */

@keyframes mfg-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes mfg-bob-left { 0%,100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(6px); } }

/* =================== Sistema 2 — Mascota + bocadillo =================== */
/* Funker anclado DENTRO de la sección (absolute), arrastrable con física manual */
.mfg-friend {
	position: absolute; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 17px;
	width: max-content; touch-action: none; user-select: none; -webkit-user-select: none;
	transform-origin: bottom right; transition: transform .55s var(--mf-ease);
}
.mfg-friend.is-grab { cursor: grabbing; }
.mfg-friend.is-grab .mfg-friend-btn .mfg-mascot { animation: none; }
.mfg-friend-btn {
	position: relative; width: clamp(48px, 5vw, 68px); aspect-ratio: 1; border: 0; padding: 0;
	background: none; cursor: pointer; --mfg-color: var(--mf-ink);
}
.mfg-friend-btn .mfg-mascot { width: 100%; height: 100%; animation: mfg-float 3s var(--mf-ease) infinite; }
@keyframes mfg-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-3deg); } }

/* indicador "hay mensaje" (aviso) cuando el bocadillo está cerrado */
.mfg-friend-badge {
	position: absolute; top: -6px; left: -10px; width: 30px; height: 30px;
	--mfg-color: var(--mf-accent); opacity: 0; transform: scale(.6); transition: all .3s var(--mf-ease);
}
.mfg-friend.is-closed.has-msg .mfg-friend-badge { opacity: 1; transform: scale(1); animation: mfg-pulse 1.6s ease-in-out infinite; }
@keyframes mfg-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* bocadillo (CSS, legible) */
.mfg-bubble {
	max-width: min(320px, 72vw); background: #d9d9d9; color: #0f0f0f;
	font-family: var(--mf-font);
	border: 0; border-radius: var(--mf-radius);
	padding: var(--mf-space-2) var(--mf-space-3); font-size: var(--mf-type-body); line-height: 1.45;
	position: relative;
	transform-origin: bottom right; transition: opacity .28s var(--mf-ease), transform .32s var(--mf-ease);
}
/* Colita: dos curvas )) que se juntan en la punta apuntando a la mascota (SVG, se puede espejar). */
.mfg-tail { position: absolute; right: 24px; bottom: -13px; width: 26px; height: 19px; overflow: visible; pointer-events: none; }
.mfg-tail path { fill: #d9d9d9; }
.mfg-bubble-eyebrow { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; margin-bottom: 4px; }
/* Al cerrarse el bocadillo colapsa HACIA el funker (sale de él y vuelve a él). */
.mfg-friend.is-closed .mfg-bubble { opacity: 0; transform: scale(.16) translateY(6px); pointer-events: none; }
/* Funker a la IZQUIERDA: mascota a la izq, colita espejada al otro lado. */
.mfg-friend.is-left { align-items: flex-start; transform-origin: bottom left; }
.mfg-friend.is-left .mfg-bubble { transform-origin: bottom left; }
.mfg-friend.is-left .mfg-tail { right: auto; left: 24px; transform: scaleX(-1); }

/* --- Diálogo interactivo del funker: tabs, palabras-acción rojas, nav, tooltip copiado --- */
.mfg-bubble-tabs { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: 6px; }
.mfg-tab { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: inherit; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; transition: color .2s ease; }
.mfg-tab:hover { color: #5a5a5a; }
.mfg-tab.is-active { color: var(--mf-accent); }
.mfg-dlg-eyebrow { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; margin-bottom: 4px; }
.mfg-dlg-body { display: block; }
/* Palabras-acción y navegación: SOLO rojo, sin bold ni subrayado. Son parte del texto. */
.mfg-act, .mfg-nav { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; font-weight: inherit; text-decoration: none; color: var(--mf-accent); position: relative; }
.mfg-act:hover, .mfg-nav:hover { opacity: .78; }
.mfg-o { color: inherit; } /* el conector "o" entre Anterior/Siguiente NO va en rojo */
.mfg-copied { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); background: #0f0f0f; color: #fff; font-size: 9px; letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; white-space: nowrap; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.mfg-copied.is-on { opacity: 1; transform: translate(-50%, -3px); }

/* =================== Sistema 3 — Toggle claro/oscuro del logo =================== */
.gl-logo-stage {
	position: relative; border-radius: var(--mf-radius); overflow: hidden;
	min-height: clamp(260px, 34vw, 460px); display: grid;
}
.gl-logo-slide { grid-area: 1 / 1; display: grid; place-items: center; padding: var(--mf-space-6); }
.gl-logo-slide[hidden] { display: none; }
.gl-logo-slide.is-light { background: color-mix(in srgb, var(--mf-ink) 5%, var(--mf-paper)); }
.gl-logo-slide.is-dark  { background: var(--mf-ink); }
.gl-logo-slide.is-brand { background: var(--brand-primary); }
.gl-logo-slide img { max-width: min(460px, 70%); max-height: 55%; width: auto; height: auto; object-fit: contain; }

.gl-logo-toggle {
	position: absolute; right: var(--mf-space-3); bottom: var(--mf-space-3); z-index: 2;
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	background: var(--mf-paper); color: var(--mf-ink); border: 2px solid var(--mf-ink);
	border-radius: 73.5px; padding: .5rem .9rem .5rem .6rem; font-size: var(--mf-type-small);
	transition: transform var(--mf-dur) var(--mf-ease);
}
.gl-logo-toggle:hover { transform: translateY(-2px); }
.gl-logo-toggle .mfg-bulb { width: 22px; height: 26px; --mfg-color: var(--mf-ink); transition: opacity .3s var(--mf-ease); }
/* bombilla "apagada" (modo oscuro activo) = más tenue */
.gl-logo-stage[data-mode="1"] .gl-logo-toggle .mfg-bulb { opacity: .45; }

/* Reduced motion: sin bob/float/pulse */
@media (prefers-reduced-motion: reduce) {
	.mfg-pointer, .mfg-friend-btn .mfg-mascot, .mfg-friend-badge { animation: none !important; }
	.mfg-pointer-guide { transition: opacity .2s linear; }
}

/* Móvil: mano oculta (poco espacio), mascota más chica */
@media (max-width: 700px) {
	.mfg-pointer-guide { display: none; }
	.mfg-bubble { max-width: 62vw; }
}