/* Los tokens se declaran AQUI, no se heredan.
   Varios hooks del sitio definen `--nb-paper` y `--nb-line` con valores
   distintos en su propio `:root` —los bloques oscuros usan otros—, asi
   que confiar en la herencia deja el boton del color del ultimo hook que
   haya cargado. */
.nb-subir{
  --s-paper:#FFFFFF;
  --s-line:#E9E4F3;
  --s-violet:#7B5CF6;
  --s-violet-aa:#6B48F2;
  --s-ink:#14111F;

  /* APILADO SOBRE EL DE COOKIES, no en la esquina contraria.
   *
   * Los dos viven en la esquina derecha, en columna y con 10 px de aire:
   * cookies abajo (`bottom:18px`, su hook) y este encima. La cuenta es
   * 18 + 48 de alto + 10 de separacion = 76.
   *
   * Y EL ORDEN NO ES CAPRICHOSO. El de cookies esta SIEMPRE; este
   * aparece y desaparece al bajar. Si el volatil fuera el de abajo, el
   * de cookies daria un salto de 58 px cada vez que este entra o sale.
   * Con el volatil arriba, el ancla no se mueve nunca.
   *
   * En movil ademas los dos caen en la zona del pulgar; en esquinas
   * opuestas, uno de los dos obliga a cruzar la pantalla. */
  position:fixed; z-index:2147481000;
  right:18px; bottom:76px;
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--s-paper); color:var(--s-violet-aa);
  border:1px solid var(--s-line); cursor:pointer; padding:0;
  /* La sombra se tiñe de violeta ya en reposo, no solo al pasar el ratón.
     Una sombra gris bajo un botón de marca lo deja despegado del sitio;
     con el tinte de la paleta parece que la pieza pertenece a la página.
     Sutil a propósito: 0.10 y 0.26 de alfa, lo justo para notarse. */
  box-shadow:0 2px 6px rgba(123,92,246,0.10), 0 14px 30px -14px rgba(123,92,246,0.26);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:transform 0.24s ease, box-shadow 0.24s ease,
             border-color 0.24s ease, opacity 0.24s ease, visibility 0.24s;
}
.nb-subir.nb-visible{opacity:1; visibility:visible; transform:none}
.nb-subir:hover{
  transform:translateY(-3px); border-color:var(--s-violet);
  box-shadow:0 4px 10px rgba(20,17,31,0.1), 0 20px 40px -16px rgba(90,60,200,0.44);
}
.nb-subir:focus-visible{outline:2px solid var(--s-violet); outline-offset:3px}
.nb-subir svg{width:21px; height:21px; display:block}

/* CUANDO APARECE EL BADGE DE reCAPTCHA suben los dos, no uno.
   Google lo fija en la misma esquina con 60 px de alto, y el hook de
   cookies ya sube el suyo a `bottom:88px` en ese caso. Este tiene que
   subir lo mismo para no montarse encima: 88 + 48 + 10 = 146.
   Si el navegador no soporta `:has()` los dos se quedan donde estaban,
   que es el comportamiento de siempre: no mejora, pero no rompe. */
body:has(.grecaptcha-badge) .nb-subir{ bottom:146px }

/* La etiqueta sale por la IZQUIERDA, igual que la del boton de cookies:
   los dos estan pegados al borde derecho. */
.nb-subir::after{
  content:attr(data-txt); position:absolute; right:58px;
  white-space:nowrap; background:var(--s-ink); color:#fff;
  font-family:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:600; font-size:0.8rem;
  padding:7px 11px; border-radius:9px;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.nb-subir:hover::after,
.nb-subir:focus-visible::after{opacity:1; transform:none}

/* En movil la etiqueta sobra: no hay raton que la dispare y al pulsar
   se quedaria colgada en pantalla. */
@media (hover:none){ .nb-subir::after{content:none} }

/* MISMO CORTE Y MISMOS MARGENES QUE EL BOTON DE COOKIES.
   Su hook lo lleva a `right:12px; bottom:12px` por debajo de 520 px; si
   aqui se dejan los 18, los dos dejan de estar alineados y se nota:
   medido, 6 px de desfase en el borde derecho. La cuenta de la columna
   es la misma que arriba, con los margenes de movil: 12 + 48 + 10 = 70. */
@media (max-width:520px){
  .nb-subir{right:12px; bottom:70px}
  body:has(.grecaptcha-badge) .nb-subir{bottom:146px}
}

/* El del pie deja de tener sentido cuando hay uno permanente. */
.sec.footer .back-to-top,
.footer .back-to-top,
a.back-to-top{display:none !important}

@media (prefers-reduced-motion:reduce){
  .nb-subir{transition:opacity 0.01s linear}
  .nb-subir:hover{transform:none}
}