/* Componentes de interfaz compartidos por las páginas de Joik.
 *
 * POR QUÉ EXISTE
 * El botón "píldora" vivía escrito inline dentro de index.html. Cuando
 * /aliados necesitó el mismo botón, hubo que copiarlo, y quedó definido en
 * dos lugares: cualquier ajuste había que hacerlo dos veces, y el día que
 * alguien se olvidara de una, las páginas se separaban sin que se notara.
 *
 * Acá vive una sola vez. Lo consumen index.html y aliados.html.
 *
 * QUÉ VA ACÁ Y QUÉ NO
 * Solo componentes que usa más de una página. Lo específico de una página
 * se queda en su propio CSS: los ajustes de /aliados sobre la plantilla
 * Drex siguen en aliados-template/css/joik-overrides.css, que carga
 * después y por lo tanto gana.
 */

/* ---------- Menú lateral de secciones ----------
   Barra fija con los números de cada sección. Siempre visible en
   escritorio; se oculta por debajo de 1024px, donde no hay ancho para
   ponerla al costado sin tapar contenido.

   El COLOR no vive acá, vive en cada página, y es a propósito: el home es
   oscuro y usa texto blanco; /aliados tiene el body blanco y ese mismo
   blanco sería invisible. Acá va solo la estructura y el comportamiento,
   que sí son iguales en las dos. */
.side-menu {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.side-menu a {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    padding: 5px 10px;
}
.side-menu a:hover,
.side-menu a.active {
    transform: translateX(-5px);
}
/* Sin esto, quien navega con teclado no ve en qué número está parado. */
.side-menu a:focus-visible {
    outline: 2px solid #01d1fe;
    outline-offset: 2px;
}
@media all and (max-width: 1024px) {
    .side-menu {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .side-menu a { transition: none; }
    .side-menu a:hover,
    .side-menu a.active { transform: none; }
}

/* ---------- Botón "píldora + círculo" ----------
   Estructura: pastilla con borde fino, texto corto adentro, y un círculo
   sólido celeste al final con una flecha (mismo SVG para las 3
   direcciones -- rotar un círculo no cambia cómo se ve, así que alcanza
   con rotar el círculo entero por CSS según data-direction, sin necesitar
   un ícono distinto por caso). "down" = baja a la siguiente sección
   (default, sin rotar), "side" = navega a otra página/pestaña, "up" =
   vuelve arriba.

   Colores por custom properties (--pill-border/--pill-text) con fallback
   en el propio var() -- así .jk-pill-btn anda solo (usa el fallback
   claro) o agrupado dentro de .jk-pill-btn-group--dark (hereda el valor
   oscuro de ahí, para que la leyenda de arriba use el mismo color). Esto
   es lo que permite "jugar" con los colores por sección sin duplicar
   reglas -- para una futura sección con fondo celeste, alcanzaría con una
   variante nueva que pise estas dos properties.

   El círculo se mantiene celeste sólido en las dos variantes a propósito:
   es el foco de la acción, tiene que "pegar" siempre sea cual sea el
   fondo detrás (clave para --icon-only, que es fijo y puede quedar sobre
   cualquier sección al scrollear -- un círculo sólido no depende de
   vidrio/blur para leerse bien, a diferencia de lo que se había probado
   antes).

   La flecha tiene un rebote sutil constante (misma idea que
   heroMockupFloat/psStartPulse en otras partes del sitio) y se acelera en
   hover -- intenta devolver algo de la vida que tenía el botón viejo
   cuando el texto se le escapaba del marco en hover, ahora que ese
   recurso ya no aplica acá. */
.jk-pill-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 6px 0 26px;
    border: 1.5px solid var(--pill-border, rgba(0,10,12,0.5));
    border-radius: 999px;
    background: transparent;
    color: var(--pill-text, rgba(0,10,12,0.85));
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}
/* :visited/:active/:focus reforzados con la misma especificidad que
   "a:hover,a:visited,a:active,a:focus{color:#f7f7f7}" del tema base --
   mismo motivo que en jk-frame-btn: sin esto, un link visitado una vez
   queda casi blanco para siempre en ese navegador en vez del color
   pensado. */
.jk-pill-btn:visited,
.jk-pill-btn:active,
.jk-pill-btn:focus {
    color: var(--pill-text, rgba(0,10,12,0.85));
}
.jk-pill-btn--dark {
    --pill-border: rgba(255,255,255,0.55);
    --pill-text: rgba(255,255,255,0.92);
}
.jk-pill-btn:hover {
    border-color: #01d1fe;
}
/* Sin esto, quien navega con teclado no ve dónde está parado: el tema
   base apaga el outline por defecto. */
.jk-pill-btn:focus-visible {
    outline: 2px solid #01d1fe;
    outline-offset: 3px;
}
.jk-pill-btn__label {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: 22px;
}
.jk-pill-btn__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #01d1fe;
    color: #050d10;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jk-pill-btn:hover .jk-pill-btn__circle {
    transform: scale(1.1);
}
.jk-pill-btn__arrow {
    width: 16px;
    height: 16px;
    display: block;
    animation: jkPillArrowBounce 2.2s ease-in-out infinite;
}
.jk-pill-btn:hover .jk-pill-btn__arrow {
    animation-duration: 0.85s;
}
@keyframes jkPillArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
.jk-pill-btn[data-direction="side"] .jk-pill-btn__circle { transform: rotate(-90deg); }
.jk-pill-btn[data-direction="up"] .jk-pill-btn__circle { transform: rotate(180deg); }
.jk-pill-btn[data-direction="side"]:hover .jk-pill-btn__circle { transform: rotate(-90deg) scale(1.1); }
.jk-pill-btn[data-direction="up"]:hover .jk-pill-btn__circle { transform: rotate(180deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) {
    .jk-pill-btn__arrow { animation: none; }
}

/* Variante solo-círculo (botón de volver arriba): sin pastilla ni texto,
   el círculo solo ya se entiende como acción -- a pedido, más liviano que
   repetir la estructura completa para un botón utilitario que siempre
   está ahí. */
.jk-pill-btn--icon-only {
    padding: 0;
    border: none;
}
.jk-pill-btn--icon-only:hover {
    border-color: transparent;
}
.jk-pill-btn--icon-only .jk-pill-btn__circle {
    width: 44px;
    height: 44px;
}

/* Leyenda larga: cuando el texto real no entra corto en la pastilla (ej.
   "Revisar mi presencia digital"), va aparte arriba del botón, y el botón
   queda con una palabra corta que resume la acción -- mismo criterio de
   color que el botón vía la misma custom property (heredada si vive
   dentro de .jk-pill-btn-group). */
.jk-pill-btn-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.jk-pill-btn-group--dark {
    --pill-border: rgba(255,255,255,0.55);
    --pill-text: rgba(255,255,255,0.92);
}
.jk-pill-btn-caption {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--pill-text, rgba(0,10,12,0.85));
    opacity: 0.75;
    margin-bottom: 10px;
}

@media (max-width: 880px) {
    .jk-pill-btn { height: 46px; padding: 0 5px 0 20px; }
    .jk-pill-btn__label { font-size: 12px; margin-right: 16px; }
    .jk-pill-btn__circle { width: 34px; height: 34px; }
    .jk-pill-btn__arrow { width: 14px; height: 14px; }
    .jk-pill-btn--icon-only { height: 38px; width: 38px; }
    .jk-pill-btn--icon-only .jk-pill-btn__circle { width: 38px; height: 38px; }
    .jk-pill-btn-caption { font-size: 12.5px; margin-bottom: 8px; }
}