/**
 * Adquisición de obra.
 *
 * El diseño aprobado no contemplaba la venta, así que estos estilos son nuevos y no tienen
 * contraparte en la carpeta del diseño. Van aparte por la misma razón que formulario.css y
 * contenido.css: ese CSS es el contrato que el tema reproduce y no se toca.
 *
 * Todo lo visible reutiliza tokens y clases que ya existen —.nuka-btn, --color-accent, la
 * escala de espaciado— para que el bloque no se lea como añadido de otro sitio.
 */

:root {
  /* Mismo plano que la burbuja flotante que el diseño ya preveía (--z-whatsapp): por debajo de
     la navegación, para que el cajón del menú móvil tape la barra al abrirse. Se define aquí y
     no en variables.css porque ese archivo es del diseño aprobado y no se toca. */
  --z-adquirir: 900;
}

/* --- Enlace destacado del menú ---
   Recuadro en color de acento, para que se lea como acción y no como una sección más. Hereda
   tipografía, tamaño y espaciado de .nuka-nav__link: solo cambia el tratamiento. El subrayado
   animado del resto de enlaces se anula, porque dentro de un recuadro no tiene sentido. */

.nuka-nav__link--destacado {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  /* El enlace base ya trae 4px verticales para dejar sitio al subrayado animado; aquí ese
     espacio pasa a ser el interior del recuadro, así que se toma de la escala. */
  padding: var(--space-xs) var(--space-sm);
}

.nuka-nav__link--destacado::after {
  display: none;
}

.nuka-nav__link--destacado:hover,
.nuka-nav__link--destacado.active {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* En el cajón móvil los enlaces van apilados: el recuadro se ajusta al texto en vez de
   ocupar todo el ancho de la columna. */
.nuka-nav__mobile-links .nuka-nav__link--destacado {
  display: inline-block;
  align-self: flex-start;
}

/* --- Bloque dentro de la ficha técnica --- */

.nuka-adquirir {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.nuka-adquirir__precio {
  font-family: var(--font-display);
  font-size: var(--text-body-large);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.nuka-adquirir__btn {
  display: inline-flex;
}

/* --- Barra flotante en móvil ---
   El botón de la ficha queda fuera de la vista en cuanto el visitante baja a ver las fotos, y
   en móvil la ficha va debajo de la imagen, así que se pierde antes. En escritorio no aparece:
   allí la columna izquierda con la ficha permanece visible mientras se recorre la galería. */

.nuka-adquirir-flotante {
  display: none;
}

@media (max-width: 767px) {
  .nuka-adquirir-flotante {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-adquirir);
    padding: var(--space-sm) var(--padding-x);
    /* Respeta la barra de gestos de iOS, que si no tapa el botón. */
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }

  .nuka-adquirir-flotante .nuka-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* Sitio para la barra al final de la página, para que no tape el pie ni el último bloque. */
  body.single-obras .nuka-footer {
    padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuka-adquirir-flotante {
    transition: none;
  }
}