/**
 * Portada alternativa "proyectos flotantes" (page-nn-flotante.php).
 * Hoja aparte y solo se carga en esa plantilla (ver functions.php) para
 * no engordar style.css con algo que, de momento, es una opción en
 * pruebas y no la portada real. Reutiliza las variables de color/alto
 * de header y footer que ya define style.css (--nn-color-*, --nn-header-
 * alto, --nn-footer-alto...) en vez de redefinirlas.
 *
 * 10/09/2026.
 */

/* El header/footer del tema son position:fixed (ver header.php/footer.php
   y sus reglas en style.css), así que igual que .nn-landing-hero en la
   portada actual, esta zona tiene que dejarles hueco ella misma en vez
   de esperar que el flujo normal del documento lo haga. Aquí, al ser un
   lienzo de física con hijos position:absolute, es más simple anclarla
   también como fixed entre los dos (top/bottom = su alto) que usar
   padding — así el área de juego que mide el JS es exactamente esta
   caja, sin tener que restarle nada. */
.nn-flotante-zona {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nn-header-alto-movil);
    bottom: var(--nn-footer-alto-movil);
    overflow: hidden;
    /* Antes llevaba dos degradados radiales de color como decoración de
       fondo — quitados a petición de Marta (12/09/2026): mismo fondo
       liso que el resto de la web, sin nada especial aquí. */
    background: var(--nn-color-fondo);
}

@media (min-width: 690px) {
    .nn-flotante-zona {
        top: var(--nn-header-alto);
        bottom: var(--nn-footer-alto);
    }
}

.nn-flotante-vacio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: italic;
    /* var(--nn-color-oscuro-rgb) en vez del verde suelto: así este texto
       también pasa a azul eléctrico en inglés, igual que el resto del
       sitio — pedido 13/09/2026. */
    color: rgba(var(--nn-color-oscuro-rgb), 0.5);
}

/* -------- burbujas --------
   Sin círculo, sin color de fondo ni sombras: solo el icono del proyecto
   (ilustración a línea). Pedido por Marta 12/09/2026.
   15/09/2026: se quitan el mix-blend-mode:multiply y la máscara circular
   que llevaba la imagen — eran un apaño para cuando el icono era un PNG
   con fondo casi blanco (dejaba un contorno rectangular fino contra el
   fondo de la página). Al pasar el icono a SVG con fondo transparente de
   verdad, ese problema no existe y ninguno de los dos hace ya falta. */
.nn-burbuja {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    will-change: transform;
}

.nn-burbuja:active { cursor: grabbing; }

.nn-burbuja__imagen {
    width: 82%;
    height: 82%;
    object-fit: contain;
    pointer-events: none;
}

/* -------- ficha de info: solo texto, debajo de la burbuja -------- */
.nn-ficha {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 168px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.nn-ficha.is-visible { opacity: 1; pointer-events: auto; }

.nn-ficha__nombre {
    display: block;
    font-family: var(--nn-fuente);
    font-weight: 500; /* Crimson Pro Medium */
    font-style: normal; /* redonda, no cursiva */
    font-size: 14px; /* antes 15px */
    line-height: 1.2;
    color: var(--nn-color-texto);
}

.nn-ficha__categoria {
    display: block;
    font-family: var(--nn-fuente);
    font-weight: 400; /* Crimson Pro Regular */
    font-style: normal;
    font-size: 10.5px;
    /* Sin mayúsculas — pedido por Marta 12/09/2026 (antes: uppercase). */
    letter-spacing: 0.02em;
    color: var(--nn-color-texto);
    margin-top: 2px;
}

.nn-ficha__categoria:empty { display: none; }

/* Botoncito verde "Ver más" — solo aparece en táctil (ver media query),
   como segundo toque tras ver la ficha. Antes era un enlace de texto
   subrayado; ahora sigue la misma línea visual que el resto de botones
   "pill" del sitio (fondo lima, texto oscuro, radio 999px). Pedido por
   Marta 12/09/2026.
   Mismo día, más tarde: fondo lima → --nn-color-oscuro (mismo verde que
   el resto del sitio, para que no quede nada de lima). El texto no puede
   quedarse en --nn-color-oscuro (sería del mismo verde que el fondo,
   invisible) — pasa a blanco. */
.nn-ficha__ver {
    display: none; /* solo en táctil, ver media query */
    margin-top: 6px;
    padding: 3px 14px;
    font-family: var(--nn-fuente);
    font-size: 12px;
    font-weight: 500;
    color: var(--nn-color-blanco);
    background-color: var(--nn-color-oscuro);
    text-decoration: none;
    border-radius: 999px;
}

@media (hover: none) {
    .nn-ficha__ver { display: inline-block; }
}